revuo-weekly/_sass/layout.scss

388 lines
6 KiB
SCSS

/* -- 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;
}