fix(styles): page title position

.gitignore

@@ -1,5 +1,4 @@
 node_modules
 .DS_Store
 dist
-dist-ssr
 *.local

README.md

@@ -37,20 +37,21 @@ Enliven your Logseq Workspace with gorgeous, custom, Notion style page banners a
 ![](screenshots/widgets-light-02.png)
 ![](screenshots/widgets-dark-03.png)
 
-- Calendar
-    - Install "Block calendar" plugin from Logseq Marketplace
-    - Go to installed plugin settings ""Settings -> Plugin Settings -> Block calendar"
-    - Set "Always render" to `#banner-widgets-calendar` banner placeholder
-    - ![](screenshots/block-calendar-settings.png)
+* Calendar
+    * Install "Block calendar" plugin from Logseq Marketplace
+    * Go to installed plugin settings ""Settings -> Plugin Settings -> Block calendar"
+    * Set "Always render" to `#banner-widgets-calendar` banner placeholder
+    * ![](screenshots/block-calendar-settings.png)
 
-- Custom HTML (iframes, etc...)! (you can set your own, here is some pre-configured):
-    - Weather
-        - Go to [Indify – Notion Widgets](https://indify.co), Sign Up
-        - Choose "Weather widget", set your city
-        - Set "Number of days" - 2
-        - Set colors (mandatory!) for proper work with "Banners" plugin
-        - ![](screenshots/weather-config.png)
-    - Pomo-focus (from https://pomofocus.io/app)
+* Custom HTML (iframes, etc...)! (you can set your own, here is some pre-configured):
+    * Weather
+        * Go to [Indify – Notion Widgets](https://indify.co), Sign Up
+        * Choose "Weather widget", set your city
+        * Set "Number of days" - 2
+        * ⚠ Set colors (mandatory!) for proper work with "Banners" plugin
+        * ![](screenshots/weather-config.png)
+        * ⚠ Copy YOUR personal widget ID and replace mine in plugin Settings!
+    * Pomo-focus (from https://pomofocus.io/app)
 
 For more tune use `custom.css` to position widgets iframes inside of banner area via CSS `position:absolute` & `top/right/bottom/left`.
 

src/main.css

@@ -29,8 +29,8 @@ body:is([data-page="page"], [data-page="home"]).is-banner-active #banner {
 }
 
 /* Icon */
-body:is([data-page="page"], [data-page="home"]).is-icon-active .journal-item:first-of-type>.page>.flex-col>.content>.flex-1::before,
-body:is([data-page="page"], [data-page="home"]).is-icon-active .page>.relative>.flex-row>.flex-1::before {
+body[data-page="home"].is-icon-active .journal-item:first-of-type>.page>.flex-col>.content>.flex-1::before,
+body[data-page="page"].is-icon-active .page>.relative>.flex-row>.flex-1::before {
     content: var(--pageIcon);
     font-size: var(--iconWidth);
     font-weight: normal;
@@ -40,21 +40,23 @@ body:is([data-page="page"], [data-page="home"]).is-icon-active .page>.relative>.
     transform: translateY(-55%);
     line-height: initial;
 }
-body:is([data-page="page"], [data-page="home"]).is-icon-active :is(.ls-page-title, .page-title, .journal-title) {
+body[data-page="home"].is-icon-active .journal-item:first-of-type .journal-title,
+body[data-page="page"].is-icon-active .page-title,
+body[data-page="page"].is-icon-active .ls-page-title.editing {
     margin-top: 35px;
 }
-body:is([data-page="page"], [data-page="home"]).is-icon-active #journals .journal-item:first-child {
+body[data-page="home"].is-icon-active #journals .journal-item:first-child {
     margin-top: 0;
 }
 
 /* Small icons for other home journal items */
-body:is([data-page="page"], [data-page="home"]).is-icon-active #journals .journal-item h1.title::before {
+body[data-page="home"].is-icon-active #journals .journal-item h1.title::before {
     content: var(--pageIcon);
     margin-right: 8px;
     font-size: 0.9em;
     font-weight: normal;
 }
-body:is([data-page="page"], [data-page="home"]).is-icon-active #journals .journal-item:first-of-type h1.title::before {
+body[data-page="home"].is-icon-active #journals .journal-item:first-of-type h1.title::before {
     display: none;
 }
 .page-title .page-icon {
@@ -139,7 +141,7 @@ html[data-theme='dark'] #banner-widgets-calendar {
 }
 #banner-widgets-calendar .calendar-head {
     font-weight: normal;
-    color: var(--widgetsTextColor);
+    color: rgba(255,255,255);
 }
 #banner-widgets-calendar :is(th, td) {
     border: 0;

src/main.ts

@@ -46,9 +46,11 @@ let timeout: number;
 let hidePluginProps: boolean;
 
 const settingsDefaultPageBanner = "https://wallpaperaccess.com/full/1146672.jpg";
+// const settingsDefaultPageBanner = "https://images.unsplash.com/photo-1516414447565-b14be0adf13e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1073&q=80";
 const settingsDefaultJournalBanner = "https://images.unsplash.com/photo-1646026371686-79950ceb6daa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1034&q=80";
 const settingsWidgetsCustomHTML = `
-<iframe id="banner-widgets-weather" src="https://indify.co/widgets/live/weather/7QOWaH4IPGGaAr4puql2"></iframe><iframe id="banner-widgets-pomo" src="https://pomofocus.io/app"></iframe>
+<iframe id="banner-widgets-weather" src="https://indify.co/widgets/live/weather/7QOWaH4IPGGaAr4puql2"></iframe>
+<iframe id="banner-widgets-pomo" src="https://pomofocus.io/app"></iframe>
 `;
 
 const settingsArray: SettingSchemaDesc[] = [
@@ -93,7 +95,7 @@ const settingsArray: SettingSchemaDesc[] = [
   },
   {
     key: "widgetsCalendarWidth",
-    title: "Block calendar widget width",
+    title: "Block calendar widget width (in px)",
     type: "string",
     description: "",
     default: "310px",