feat: head height issue

pengx17 · Aug 7, 2021 · 7225454 · 7225454
1 parent fda37c1
commit 7225454
Show file tree

Hide file tree

Showing 9 changed files with 24 additions and 6 deletions.
diff --git a/dark.png b/dark.png
diff --git a/demo-video.gif b/demo-video.gif
diff --git a/demo.mp4 b/demo.mp4
diff --git a/demo.png b/demo.png
diff --git a/light.png b/light.png
diff --git a/readme.md b/readme.md
@@ -10,19 +10,23 @@ https://knowledge-garden.vercel.app/
 
 ## Usage
 
-The easiest way to adopt this theme is to use jsDelivr CDN by adding the following line to your `custom.css`. You can also change the `@master` part to use the latest version.
+The easiest way to adopt this theme is to use jsDelivr CDN by adding the following line to your `custom.css`. You can also change the `@main` part to use the latest version.
 
 ```css
+/* This must be the first line of the custom.css with other import rules */
 @import url("https://cdn.jsdelivr.net/gh/pengx17/logseq-dev-theme@main/custom.css");
+
+/* You can also add other styles below to override the default theme values */
 ```
 
 Alternatively, you can download this repo and load it as a Logseq Theme Plugin.
 
+
 ## Demo (might be outdated)
 
-![demo](./demo-video.gif)
-![](./light.png)
-![](./dark.png)
+![demo](./demo.png)
+
+<video src="./demo.mp4"></video>
 
 ### [Changelog](./CHANGELOG.md)
 

diff --git a/src/_blocks.scss b/src/_blocks.scss
@@ -5,6 +5,8 @@
 
   --ct-bullet-size: 6px;
   --ct-bullet-color: var(--ct-bold-color);
+
+  --ct-block-max-width: calc(100% - 38px);
 }
 
 /* block reference */
@@ -218,7 +220,7 @@ div.items-center::after,
 
 /* Block oversize issue */
 .block-content-wrapper {
-  max-width: calc(100% - 38px);
+  max-width: var(--ct-block-max-width);
 }
 
 .block-content-wrapper > div.flex-1 {

diff --git a/src/_miscs.scss b/src/_miscs.scss
@@ -100,7 +100,14 @@ a.tag:hover {
   font-size: 0.8em;
   background: var(--ls-secondary-background-color);
   width: fit-content;
-  min-width: 320px;
+  padding-right: 2rem;
+  max-width: var(--ct-block-max-width);
+}
+
+.sidebar-item-list {
+  .page-properties, .block-properties {
+    background: var(--ls-tertiary-background-color);
+  }
 }
 
 kbd {

diff --git a/src/_views.scss b/src/_views.scss
@@ -4,6 +4,7 @@
 }
 
 #main-container {
+  padding-top: var(--ct-header-height);
   position: absolute;
   width: 100%;
   overflow-x: hidden;
@@ -48,6 +49,10 @@
 }
 
 .sidebar-item-list {
+  padding-top: var(--ct-header-height);
+  position: absolute;
+  top: 0;
+  width: 100%;
   padding-left: 1rem;
   padding-right: 1rem;
 }