refactor: adapt some styles for new layout container

resources/css/common.css

@@ -6,6 +6,12 @@
   --ls-font-family: 'Inter';
 }
 
+@media (prefers-color-scheme: dark) {
+  html {
+    background-color: #002b36;
+  }
+}
+
 .dark-theme {
     --ls-primary-background-color: #002b36;
     --ls-secondary-background-color: #073642;
@@ -97,7 +103,7 @@
 html {
   font-family: var(--ls-font-family), Inter, sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !important;
 
-  /* FIXME: global revealjs.css ? */
+  /* FIXME: rewrite revealjs.css ??? */
   height: unset !important;
   overflow: auto !important;
 }
@@ -113,13 +119,13 @@ a svg {
 }
 
 html, body, #root, #draw {
-  //height: 100%;
+  /* height: 100%; */
 }
 
-html, body {
+body {
   color: #24292e;
   line-height: 1.5;
-  background-color: #002b36;
+  background-color: transparent;
   min-height: 100%;
 }
 
@@ -322,10 +328,6 @@ a.page-ref:hover {
   color: var(--ls-link-ref-text-hover-color)
 }
 
-.ls-block {
-  min-height: 24px;
-}
-
 .block-highlight, .content .selected {
   background-color: #7cccff;
   background-color: var(--ls-block-highlight-color);
@@ -653,10 +655,6 @@ dt {
   //scrollbar-width: thin !important;
 }
 
-* {
-  //scrollbar-width: thin !important;
-}
-
 blockquote {
   display: block;
   text-indent: 0em;
@@ -992,13 +990,13 @@ a.login:hover {
 }
 
 .marker-switch {
-  display: inline;
   font-size: 85%;
   margin-right: 6px;
   margin-left: 2px;
   border-radius: 3px;
   font-weight: 500;
   display: inline-block;
+  text-align: center;
   width: 16px;
   height: 18px;
   opacity: 0.5;
@@ -1080,7 +1078,7 @@ pre {
   max-width: 665px;
 }
 
-.ls-block, .editor-wrapper {
+.editor-wrapper {
   margin: 0 auto;
 }
 
@@ -1097,10 +1095,6 @@ img, video {
   max-width: 653px;
 }
 
-.ls-block img {
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);
-}
-
 #intro img {
   max-width: 100%;
 }
@@ -1189,39 +1183,6 @@ a.tag:hover {
   top: 3.2em;
 }
 
-.ls-block h1 {
-  font-size: 2em;
-  margin: .67em 0
-}
-
-.ls-block h2 {
-  font-size: 1.5em;
-  margin: .75em 0
-}
-
-.ls-block h3 {
-  font-size: 1.17em;
-  margin: .83em 0
-}
-
-.ls-block h4 {
-  margin: 1.12em 0
-}
-
-.ls-block h5 {
-  font-size: .83em;
-  margin: 1.5em 0
-}
-
-.ls-block h6 {
-  font-size: .75em;
-  margin: 1.67em 0
-}
-
-.ls-block h1, .ls-block h2, .ls-block h3, .ls-block h4, .ls-block h5, .ls-block h6 {
-  font-weight: 600
-}
-
 .bullet-container .bullet-heading {
   background-color: #8fbc8f;
   background-color: var(--ls-block-bullet-color);

src/main/frontend/components/block.cljs

@@ -324,8 +324,9 @@
   (let [page-name (string/lower-case page-name)
         page-original-name (:page/original-name (db/entity [:page/name page-name]))
         current-page (state/get-current-page)]
-    [:div.embed-page.py-2.my-2.px-3.bg-base-2
-     [:p
+    [:div.embed-page.bg-base-2
+     {:class (if (:sidebar? config) "in-sidebar")}
+     [:section
       [:code.mr-2 "Embed page:"]
       (page-cp config {:page/name page-name})]
      (when (and
@@ -1790,7 +1791,7 @@
                                sidebar?
                                0
                                :else
-                               -18)}}
+                               -10)}}
        (let [first-block (first blocks)
              blocks' (if (and (:block/pre-block? first-block)
                               (db/pre-block-with-only-title? (:block/repo first-block) (:block/uuid first-block)))

src/main/frontend/components/block.css

@@ -6,14 +6,71 @@
   max-width: 100%;
   overflow: auto;
   cursor: text;
+
+  img {
+    width: 100%;
+  }
 }
 
 .block-children {
 }
 
+.embed-page {
+  @apply py-2 my-2 px-2;
+
+  > section {
+    margin-bottom: 5px;
+  }
+
+  &.in-sidebar {
+    background-color: var(--ls-tertiary-background-color);
+  }
+}
+
 .ls-block {
+  min-height: 24px;
+  margin: 0 auto;
+
+  img {
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);
+  }
+}
+
+.ls-block h1 {
+  font-size: 2em;
+  margin: .67em 0;
+}
+
+.ls-block h2 {
+  font-size: 1.5em;
+  margin: .75em 0;
+}
+
+.ls-block h3 {
+  font-size: 1.17em;
+  margin: .83em 0;
+}
+
+.ls-block h4 {
+  margin: 1.12em 0;
 }
 
-.block-content img {
-  width: 100%;
-}
+.ls-block h5 {
+  font-size: .83em;
+  margin: 1.5em 0;
+}
+
+.ls-block h6 {
+  font-size: .75em;
+  margin: 1.67em 0;
+}
+
+.ls-block h1,
+.ls-block h2,
+.ls-block h3,
+.ls-block h4,
+.ls-block h5,
+.ls-block h6 {
+  font-weight: 600;
+  margin-bottom: 0;
+}

src/main/frontend/components/page.cljs

@@ -354,7 +354,7 @@
                          (not block?)
                          (not (state/hide-file?))
                          (not config/publishing?))
-                [:div.text-sm.ml-1.mb-4.flex-1 {:key "page-file"}
+                [:div.text-sm.ml-1.mb-2.flex-1 {:key "page-file"}
                  [:span.opacity-50 (t :file/file)]
                  [:a.bg-base-2.p-1.ml-1 {:style {:border-radius 4}
                                          :href (str "/file/" (util/url-encode file-path))}

src/main/frontend/components/sidebar.cljs

@@ -38,8 +38,8 @@
     {:viewBox "0 0 24 24", :fill "none", :stroke "currentColor"}
     [:path
      {:d svg-d
-      :stroke-width "2",
-      :stroke-linejoin "round",
+      :stroke-width "2"
+      :stroke-linejoin "round"
       :stroke-linecap "round"}]]
    title])
 
@@ -244,9 +244,8 @@
   (when-not (state/sub :ui/sidebar-open?)
     ;; TODO: remove with-context usage
     (rum/with-context [[t] i18n/*tongue-context*]
-      [:div#help.font-bold.absolute.bottom-4.bg-base-2.rounded-full.h-8.w-8.flex.items-center.justify-center.font-bold.cursor.opacity-70.hover:opacity-100
-       {:style {:right 24}
-        :title (t :help-shortcut-title)
+      [:div.cp__sidebar-help
+       {:title (t :help-shortcut-title)
         :on-click (fn []
                     (state/sidebar-add-block! (state/get-current-repo) "help" :help nil))}
        "?"])))

src/main/frontend/components/sidebar.css

@@ -22,6 +22,49 @@
   }
 }
 
+.cp__sidebar-layout {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.cp__sidebar-main-layout {
+  overflow-y: auto;
+  display: flex;
+  background-color: var(--ls-primary-background-color);
+}
+
+.cp__sidebar-layout.is-right-sidebar-open {
+  .cp__sidebar-main-layout {
+    margin-right: 40%;
+  }
+}
+
+.cp__sidebar-main-content-container {
+  position: relative;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cp__sidebar-main-content {
+  padding: 3rem 1.5rem;
+  max-width: 640px;
+  flex: 1;
+}
+
+.cp__sidebar-help {
+  @apply font-bold fixed bottom-4
+  rounded-full h-8 w-8 flex items-center justify-center font-bold
+  opacity-70 hover:opacity-100;
+
+  user-select: none;
+  cursor: help;
+  right: 24px;
+  background-color: var(--ls-secondary-background-color);
+}
+
 .cp__right-sidebar {
   position: fixed;
   top: 3rem;
@@ -99,38 +142,6 @@
   }
 }
 
-.cp__sidebar-layout {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-}
-
-.cp__sidebar-main-layout {
-  overflow-y: auto;
-  display: flex;
-  background-color: var(--ls-primary-background-color);
-}
-
-.cp__sidebar-layout.is-right-sidebar-open {
-  .cp__sidebar-main-layout {
-    margin-right: 40%;
-  }
-}
-
-.cp__sidebar-main-content-container {
-  position: relative;
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.cp__sidebar-main-content {
-  padding: 3rem 1.5rem;
-  max-width: 640px;
-  flex: 1;
-}
-
 @media (max-width: 640px) {
   .cp__sidebar-main-content {
     max-width: 100vw;