/* -- General Layout -- */ /* Required for footer to stick to the bottom */ html, body { height: 100%; } /* Navigation */ #nav, #nav-left { a { display: block; color: $background-color; padding: 0.33334em 0; font-size: 1.5em; font-weight: 400; border-bottom: none; @media (min-width: 940px) { font-size: 1em; } &:hover { background-color: lighten($main-color, 5%); } } span { font-weight: 200; } } #nav { @include nav-position(right); } #nav-left { @include nav-position(left); } /* Toggle class to open menu */ #nav.menu-open { @include open(-14rem); } #nav-left.menu-open-left { @include open(14rem); } #nav-list { .nav-actions { /* Will turn to flex on mobile */ display: none; gap: 12px; justify-content: center; align-items: center; .icon { padding: 0; >img { margin-bottom: 0; } } } /* Separator after menu */ &:after { display: block; content: ''; width: 5rem; height: 1px; margin: 23px auto; background-color: $background-color; } } /* Icon menu */ #nav-menu { @include icon-position(right); } #nav-menu-left { @include icon-position(left); } #menu { height: 4px; width: 1.5em; background-color: lighten($text-color, 35%); margin-top: 8px; &:after, &:before { content: ""; display: block; position: relative; height: 4px; width: 1.5em; background-color: lighten($text-color, 35%); transition: all 0.3s ease-in; } &:before { top: -8px; } &:after { top: 4px; } &.btn-close { background: none; } &.btn-close:before { top: 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); background-color: $background-color; } &.btn-close:after { top: -4px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); background-color: $background-color; } } /* Main content */ .fixed { position: fixed; width: 100%; @media (min-width: 940px) { position: static; } } #container { margin: 0 auto; max-width: 730px; padding: 0 1.5rem; } #header { text-align: center; padding: 24px 0; position: relative; margin-bottom: 23px; @media (max-width: 480px) { padding-top: 10px; } a { text-decoration: none; color: $text-color; display: inline-block; border-bottom: none; } img { max-height: 100px; margin: 0 auto; display: block; @media (max-width: 940px) { max-height: 90px; } @media (max-width: 600px) { max-height: 60px; } @media (max-width: 480px) { max-height: 50px; } } h1 { font-family: 'Bebas Neue', sans-serif; //Emerald logo font font-weight: 400; font-size: 4.5em; color: #d26e2b; @media (max-width: 940px) { padding: 0; } @media (max-width: 600px) { font-size: 3em; } @media (max-width: 480px) { font-size: 2.5em; } } &:after { display: none; content: ''; width: 5rem; height: 1px; margin: 23px auto; background-color: lighten($text-color, 70%); @media (max-width: 480px) { margin: 0.5rem auto; } } @media (max-width: 600px) { padding-bottom: 0; } } /* Posts */ #posts { li { list-style-type: none; padding-bottom: 0.66667em; } } #post-page { margin-bottom: 1.5em; @media (min-width: 940px) { margin-bottom: 1.3334em; } } .post+.post:before { display: block; content: ''; width: 5rem; height: 1px; margin: 23px auto; background-color: lighten($background-color, 70%) !important; } .by-line { display: block; color: lighten($text-color, 25%); line-height: 1.5em; /* 24px/16px */ margin-bottom: 1.5em; /* 24px/16px */ padding-top: 0.5em; font-weight: 200; @media (min-width: 940px) { display: block; color: lighten($text-color, 25%); line-height: 1.3334em; /* 24px/18px */ margin-bottom: 1.3334em; /* 24px/18px */ font-weight: 200; } } .by-line-post { display: block; color: lighten($text-color, 25%); line-height: 1.5em; /* 24px/16px */ padding-top: 0.5em; font-weight: 200; @media (min-width: 940px) { display: block; color: lighten($text-color, 25%); line-height: 1.3334em; /* 24px/18px */ margin-bottom: 1.3334em; /* 24px/18px */ font-weight: 200; } } img { max-width: 100%; display: block; margin: 0 auto; margin-bottom: 24px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; } img[title="Emerald"] { box-shadow: 0 2px 6px #ddd; } code { color: lighten($text-color, 35%); background-color: lighten($background-color, 35%); } /* Set the vertical rhythm (and padding-left) for lists inside post content */ .content ul, .content ol { line-height: 1.5em; /* 24px/16px */ padding-left: 1.5em; @media (min-width: 940px) { line-height: 1.33334em; /* 24px/18px */ } } /* Paginator */ .pagination { text-align: center; margin: 2.666668em; span { background-color: darken($background-color, 5%); color: $text-color; } a:hover { background-color: lighten($main-color, 5%); } } .page-item { background-color: $main-color; color: $background-color; padding: 4px 8px; font-weight: 400; padding: 0.5em 1em; border-bottom: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; } .page-item:hover, .page-item:active, .page-item:focus { border-bottom: none; } /* Footer */ footer { background-color: $main-color; color: $background-color; text-align: center; padding: 0.6667em 0; } #wrap { min-height: 100%; position: relative; padding-bottom: 140px; } .footer { padding: 25px 0; background-color: $main-color; color: $background-color; text-align: center; position: absolute; width: 100%; bottom: 0; }