Re-work sidebar border.

Lullabot · Jul 22, 2024 · 451816f · 451816f
1 parent 002e236
commit 451816f
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 10 deletions.
diff --git a/src/_includes/layout.liquid b/src/_includes/layout.liquid
@@ -41,8 +41,10 @@
       {% endfor %}
 
       </div>
-    {% endif %}
     <main>
+    {% else %}
+    <main class="cover-main">
+    {% endif %}
       <div class="navigation-wrapper hidden">{% include 'menu' %}</div>
       {{ content }}
     </main>

diff --git a/src/sass/styles.scss b/src/sass/styles.scss
@@ -23,6 +23,12 @@ main {
   justify-content: space-between;
   min-width: calc(100% - 81px);
   position: relative;
+  height: 100vh;
+  border-left: 1px solid $lb-gray;
+}
+
+.cover-main {
+  border-left: 0;
 }
 
 .sidebar {
@@ -138,10 +144,6 @@ main {
 }
 
 .page-number {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
   height: 80px;
   width: 80px;
   display: flex;
@@ -256,16 +258,16 @@ div.get-started {
 }
 
 .cover-copy {
-  background-color: #fff;
+  background-color: $lb-white;
   color: $lb-black;
   padding: 7em;
   font-size: 1.25em;
 }
 
 .toc-container {
-  padding: 4em; 
+  padding: 4em;
   padding-top: 10em;
-  text-align: left; 
+  text-align: left;
 
   > p {
     text-transform: uppercase;
@@ -338,7 +340,6 @@ p {
 .ebook-page-container {
   display: flex;
   height: 100%;
-  border-left: 1px solid $lb-gray;
 
   div {
     padding: 5%;
@@ -423,7 +424,6 @@ p {
     height: 80px;
     width: auto;
     flex-direction: row;
-    border: 0;
 
     .page-title {
       transform: rotate(90deg);
@@ -435,6 +435,12 @@ p {
     }
   }
 
+  .toc-container,
+  .ebook-page-container {
+    border-left: 0;
+    border-top: 1px solid $lb-gray;
+  }
+
   .ebook-page-container {
     flex-direction: column;
     margin-bottom: 2em;