rottenwheel/revuo-weekly
1
0
Fork 0
mirror of https://github.com/rottenwheel/revuo-weekly.git synced 2024-11-26 04:53:30 +01:00
Code Issues Packages Projects Releases Wiki Activity

code optimization

Browse Source
This commit is contained in:
Luke 2023-03-11 11:32:12 +01:00 committed by GitHub
parent e8a6d5624f
commit f4adc4373d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 71 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
_sass/layout.scss
View File

@ -1,13 +1,15 @@
/* -- General Layout -- */ /* -- General Layout -- */
/* Required for footer to stick to the bottom */ /* Required for footer to stick to the bottom */
html, body { html,
height: 100%; body {
height: 100%;
} }
/* Navigation */ /* Navigation */
#nav, #nav-left { #nav,
#nav-left {
a { a {
display: block; display: block;
color: $background-color; color: $background-color;
@ -23,8 +25,8 @@ html, body {
} }
} }
span { span {
font-weight: 200; font-weight: 200;
} }
} }
#nav { #nav {
@ -46,14 +48,13 @@ html, body {
} }
#nav-list { #nav-list {
.nav-actions { .nav-actions {
/* Will turn to flex on mobile */ /* Will turn to flex on mobile */
display: none; display: none;
gap: 12px; gap: 12px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.icon { .icon {
padding: 0; padding: 0;
> img { > img {
@ -62,11 +63,10 @@ html, body {
} }
} }
/* Separator after menu */ /* Separator after menu */
&:after { &:after {
display: block; display: block;
content: ''; content: "";
width: 5rem; width: 5rem;
height: 1px; height: 1px;
margin: 23px auto; margin: 23px auto;
@ -89,7 +89,8 @@ html, body {
width: 1.5em; width: 1.5em;
background-color: lighten($text-color, 35%); background-color: lighten($text-color, 35%);
margin-top: 8px; margin-top: 8px;
&:after, &:before { &:after,
&:before {
content: ""; content: "";
display: block; display: block;
position: relative; position: relative;
@ -110,17 +111,17 @@ html, body {
&.btn-close:before { &.btn-close:before {
top: 0; top: 0;
-webkit-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg); -moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg); -ms-transform: rotate(-45deg);
transform: rotate(-45deg); transform: rotate(-45deg);
background-color: $background-color; background-color: $background-color;
} }
&.btn-close:after { &.btn-close:after {
top: -4px; top: -4px;
-webkit-transform: rotate(45deg); -webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg); -moz-transform: rotate(45deg);
-ms-transform: rotate(45deg); -ms-transform: rotate(45deg);
transform: rotate(45deg); transform: rotate(45deg);
background-color: $background-color; background-color: $background-color;
} }
} }
@ -136,67 +137,67 @@ html, body {
} }
#container { #container {
margin:0 auto; margin: 0 auto;
max-width: 730px; max-width: 730px;
padding: 0 1.5rem; padding: 0 1.5rem;
} }
#header { #header {
text-align: center; text-align: center;
padding: 24px 0; padding: 24px 0;
position: relative; position: relative;
margin-bottom: 23px; margin-bottom: 23px;
@media (max-width: 480px) { @media (max-width: 480px) {
padding-top: 10px; padding-top: 10px;
} }
a { a {
text-decoration: none; text-decoration: none;
color: $text-color; color: $text-color;
display: inline-block; display: inline-block;
border-bottom: none; border-bottom: none;
} }
img { img {
max-height: 100px; max-height: 100px;
margin: 0 auto; margin: 0 auto;
display: block; display: block;
@media (max-width: 940px) { @media (max-width: 940px) {
max-height: 90px; max-height: 90px;
} }
@media (max-width: 600px) { @media (max-width: 600px) {
max-height: 60px; max-height: 60px;
} }
@media (max-width: 480px) { @media (max-width: 480px) {
max-height: 50px; max-height: 50px;
} }
} }
h1 { h1 {
font-family: 'Bebas Neue', sans-serif; //Emerald logo font font-family: "Bebas Neue", sans-serif; //Emerald logo font
font-weight: 400; font-weight: 400;
font-size: 4.5em; font-size: 4.5em;
color: #d26e2b; color: #d26e2b;
@media (max-width: 940px) { @media (max-width: 940px) {
padding: 0; padding: 0;
} }
@media (max-width: 600px) { @media (max-width: 600px) {
font-size: 3em; font-size: 3em;
} }
@media (max-width: 480px) { @media (max-width: 480px) {
font-size: 2.5em; font-size: 2.5em;
} }
} }
&:after { &:after {
display: none; display: none;
content: ''; content: "";
width: 5rem; width: 5rem;
height: 1px; height: 1px;
margin: 23px auto; margin: 23px auto;
background-color: lighten($text-color, 70%); background-color: lighten($text-color, 70%);
@media (max-width: 480px) { @media (max-width: 480px) {
margin: 0.5rem auto; margin: 0.5rem auto;
} }
} }
@media (max-width: 600px) { @media (max-width: 600px) {
padding-bottom: 0; padding-bottom: 0;
} }
} }
@ -212,18 +213,18 @@ html, body {
#post-page { #post-page {
margin-bottom: 1.5em; margin-bottom: 1.5em;
@media (min-width: 940px) { @media (min-width: 940px) {
margin-bottom: 1.3334em; margin-bottom: 1.3334em;
} }
} }
.post+.post:before { .post + .post:before {
display: block; display: block;
content: ''; content: "";
width: 5rem; width: 5rem;
height: 1px; height: 1px;
margin: 23px auto; margin: 23px auto;
background-color: lighten($background-color, 70%) !important; background-color: lighten($background-color, 70%) !important;
} }
.by-line { .by-line {
display: block; display: block;
@ -262,14 +263,14 @@ img {
margin: 0 auto; margin: 0 auto;
margin-bottom: 24px; margin-bottom: 24px;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius: 4px;
-ms-border-radius: 4px; -ms-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
} }
img[title="Emerald"] { img[title="Emerald"] {
box-shadow: 0 2px 6px #ddd; box-shadow: 0 2px 6px #ddd;
} }
code { code {
color: lighten($text-color, 35%); color: lighten($text-color, 35%);
@ -278,7 +279,8 @@ code {
/* Set the vertical rhythm (and padding-left) for lists inside post content */ /* Set the vertical rhythm (and padding-left) for lists inside post content */
.content ul, .content ol { .content ul,
.content ol {
line-height: 1.5em; /* 24px/16px */ line-height: 1.5em; /* 24px/16px */
padding-left: 1.5em; padding-left: 1.5em;
@media (min-width: 940px) { @media (min-width: 940px) {
@ -307,12 +309,14 @@ code {
padding: 0.5em 1em; padding: 0.5em 1em;
border-bottom: none; border-bottom: none;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius: 4px;
-ms-border-radius: 4px; -ms-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
} }
.page-item:hover, .page-item:active, .page-item:focus { .page-item:hover,
border-bottom: none; .page-item:active,
.page-item:focus {
border-bottom: none;
} }
/* Footer */ /* Footer */
@ -325,17 +329,17 @@ footer {
} }
#wrap { #wrap {
min-height:100%; min-height: 100%;
position:relative; position: relative;
padding-bottom: 105px; padding-bottom: 105px;
} }
.footer { .footer {
padding: 25px 0; padding: 25px 0;
background-color: $main-color; background-color: $main-color;
color: $background-color; color: $background-color;
text-align: center; text-align: center;
position: absolute; position: absolute;
width: 100%; width: 100%;
bottom: 0; bottom: 0;
} }