diff --git a/assets/scss/hyde-hyde/_responsive.scss b/assets/scss/hyde-hyde/_responsive.scss index cb28aa5..e30d332 100644 --- 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,9 +51,9 @@ cursor: pointer; color: #fff; padding: 10px 0 10px 0px; } - + input#menuToggle { - display: none; + display: none; } input#menuToggle + label { font-weight: bold; @@ -61,10 +61,10 @@ 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,9 +95,9 @@ 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 { @@ -105,8 +105,8 @@ 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 index 9478d8d..3e53171 100644 --- 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 index 8d33b59..e10be37 100644 --- 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;