make sidebar a bit narrower

frextrite · Nov 26, 2018 · 502f773 · 502f773
1 parent 895bf8d
commit 502f773
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 23 deletions.
diff --git a/assets/scss/hyde-hyde/_responsive.scss b/assets/scss/hyde-hyde/_responsive.scss
@@ -18,10 +18,10 @@
   .hidden-tablet {
     display: none;
   }
-  .sidebar-about, 
+  .sidebar-about,
   .copyright {
     display: none;
-  }    
+  }
   .sidebar {
     margin: 0;
     padding: 0;
@@ -32,11 +32,11 @@
     overflow: hidden;
     margin-top: 0; }
   .collapsible-menu {
-    padding: 0px 0px; 
+    padding: 0px 0px;
   }
   .collapsible-menu ul {
     list-style-type: none;
-    padding: 0; 
+    padding: 0;
   }
   .collapsible-menu li {
     display: block;
@@ -51,20 +51,20 @@
     cursor: pointer;
     color: #fff;
     padding: 10px 0 10px 0px; }
-  
+
   input#menuToggle {
-    display: none; 
+    display: none;
   }
   input#menuToggle + label {
     font-weight: bold;
   }
 
   input#menuToggle:checked + label {
     background-image: url(/img/menu-close.svg);
-    background-position: 1.5rem; 
+    background-position: 1.5rem;
     color: #fff;
   }
-  
+
   input#menuToggle:checked ~ .menu-content {
     max-height: 100% !important;
   }
@@ -86,7 +86,7 @@
     position: fixed;
     text-align: left;
     top: 0;
-    width: 18rem;
+    width: $sidebar-width;
   }
   .sidebar-sticky {
     left: 1rem;
@@ -95,18 +95,18 @@
     top: 1rem;
   }
   .content {
-    margin-left: 20rem;
-    margin-right: 2rem;
-    max-width: 38rem;
+    margin-left: $content-margin-left;
+    margin-right: $content-margin-right;
+    max-width: $content-max-width;
   }
   .layout-reverse {
     .sidebar {
       left: auto;
       right: 0;
     }
     .content {
-      margin-left: 2rem;
-      margin-right: 20rem;
+      margin-left: $content-margin-right;
+      margin-right: $content-margin-left;
     }
   }
   .col-sm-8 {
@@ -131,19 +131,13 @@
   }
 }
 
-// Large devices (laptops/desktops, 992px and up) 
+// Large devices (laptops/desktops, 992px and up)
 // ~ 62rem/16px ~ 58.3529rem/17px ~ 55.1111rem/18px
 @media (min-width: 992px) {
   html,
   body {
     font-size: $large-device-font-size;
   }
-  .content {
-    margin-left: 20rem;
-    margin-right: 2rem;
-    // max-width: 46.056rem;
-    max-width: 38rem; // @ ~70 CPL
-  }
   .layout-reverse .content {
     margin-left: 4rem;
     margin-right: 22rem;
@@ -157,7 +151,7 @@
     width: 66.66666667%;
   }
   .portfolio-container {
-    width: 1360px;
+    width: 68rem;
   }
 }
 

diff --git a/assets/scss/hyde-hyde/_sidebar.scss b/assets/scss/hyde-hyde/_sidebar.scss
@@ -73,6 +73,8 @@
 }
 
 .copyright {
+  padding-top: 1rem;
   text-align: center;
 	font-size: $copyright-font-size;
+  line-height: 1.1rem;
 }
diff --git a/assets/scss/hyde-hyde/_variables.scss b/assets/scss/hyde-hyde/_variables.scss
@@ -88,9 +88,15 @@ $h5-font-size:1rem;
 
 // sidebar
 $sidebar-color: #300030;
-$site__title-font-size: 3rem;
+$sidebar-width: 16rem;
+$site__title-font-size: 2.5rem;
 $copyright-font-size: 0.7rem;
 
+// content
+$content-max-width: 38rem; // @ ~70 CPL
+$content-margin-left: $sidebar-width + 2rem;
+$content-margin-right: 2rem;
+
 // navigation
 $navigation-color: #c2255c;