vbatts/hugo-theme-hyde-hyde
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

make sidebar a bit narrower

Browse source
This commit is contained in:
Huy Tran 2018-11-27 08:10:47 +11:00
parent 895bf8d44a
commit 502f773074
3 changed files with 25 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
assets/scss/hyde-hyde/_responsive.scss
View file

@ -18,10 +18,10 @@
.hidden-tablet { .hidden-tablet {
display: none; display: none;
} }
.sidebar-about, .sidebar-about,
.copyright { .copyright {
display: none; display: none;
} }
.sidebar { .sidebar {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -32,11 +32,11 @@
overflow: hidden; overflow: hidden;
margin-top: 0; } margin-top: 0; }
.collapsible-menu { .collapsible-menu {
padding: 0px 0px; padding: 0px 0px;
} }
.collapsible-menu ul { .collapsible-menu ul {
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
} }
.collapsible-menu li { .collapsible-menu li {
display: block; display: block;
@ -51,9 +51,9 @@
cursor: pointer; cursor: pointer;
color: #fff; color: #fff;
padding: 10px 0 10px 0px; } padding: 10px 0 10px 0px; }
input#menuToggle { input#menuToggle {
display: none; display: none;
} }
input#menuToggle + label { input#menuToggle + label {
font-weight: bold; font-weight: bold;
@ -61,10 +61,10 @@
input#menuToggle:checked + label { input#menuToggle:checked + label {
background-image: url(/img/menu-close.svg); background-image: url(/img/menu-close.svg);
background-position: 1.5rem; background-position: 1.5rem;
color: #fff; color: #fff;
} }
input#menuToggle:checked ~ .menu-content { input#menuToggle:checked ~ .menu-content {
max-height: 100% !important; max-height: 100% !important;
} }
@ -86,7 +86,7 @@
position: fixed; position: fixed;
text-align: left; text-align: left;
top: 0; top: 0;
width: 18rem; width: $sidebar-width;
} }
.sidebar-sticky { .sidebar-sticky {
left: 1rem; left: 1rem;
@ -95,9 +95,9 @@
top: 1rem; top: 1rem;
} }
.content { .content {
margin-left: 20rem; margin-left: $content-margin-left;
margin-right: 2rem; margin-right: $content-margin-right;
max-width: 38rem; max-width: $content-max-width;
} }
.layout-reverse { .layout-reverse {
.sidebar { .sidebar {
@ -105,8 +105,8 @@
right: 0; right: 0;
} }
.content { .content {
margin-left: 2rem; margin-left: $content-margin-right;
margin-right: 20rem; margin-right: $content-margin-left;
} }
} }
.col-sm-8 { .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 // ~ 62rem/16px ~ 58.3529rem/17px ~ 55.1111rem/18px
@media (min-width: 992px) { @media (min-width: 992px) {
html, html,
body { body {
font-size: $large-device-font-size; 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 { .layout-reverse .content {
margin-left: 4rem; margin-left: 4rem;
margin-right: 22rem; margin-right: 22rem;
@ -157,7 +151,7 @@
width: 66.66666667%; width: 66.66666667%;
} }
.portfolio-container { .portfolio-container {
width: 1360px; width: 68rem;
} }
} }

2
assets/scss/hyde-hyde/_sidebar.scss
View file

@ -73,6 +73,8 @@
} }
.copyright { .copyright {
padding-top: 1rem;
text-align: center; text-align: center;
font-size: $copyright-font-size; font-size: $copyright-font-size;
line-height: 1.1rem;
} }

8
assets/scss/hyde-hyde/_variables.scss
View file

@ -88,9 +88,15 @@ $h5-font-size:1rem;
// sidebar // sidebar
$sidebar-color: #300030; $sidebar-color: #300030;
$site__title-font-size: 3rem; $sidebar-width: 16rem;
$site__title-font-size: 2.5rem;
$copyright-font-size: 0.7rem; $copyright-font-size: 0.7rem;
// content
$content-max-width: 38rem; // @ ~70 CPL
$content-margin-left: $sidebar-width + 2rem;
$content-margin-right: 2rem;
// navigation // navigation
$navigation-color: #c2255c; $navigation-color: #c2255c;