Web-Projects/blog-static
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Change CSS to use rems

Browse Source
This commit is contained in:
Danila Fedorin 2019-12-27 23:12:35 -08:00
parent eb02e1e6b0
commit b8e0e0b4ce
2 changed files with 30 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
themes/vanilla/assets/scss/sidenotes.scss
View File

@ -1,7 +1,9 @@
@import "style.scss"; @import "style.scss";
$sidenote-width: 350px; $sidenote-width: 30rem;
$sidenote-offset: 15px; $sidenote-offset: 1.5rem;
$sidenote-padding: 1rem;
$sidenote-highlight-border-width: .2rem;
.sidenote { .sidenote {
&:hover { &:hover {
@ -11,15 +13,16 @@ $sidenote-offset: 15px;
} }
.sidenote-content { .sidenote-content {
border: 2px dashed; border: $sidenote-highlight-border-width dashed;
padding: 9px; padding: $sidenote-padding -
($sidenote-highlight-border-width - $standard-border-width);
border-color: $primary-color; border-color: $primary-color;
} }
} }
} }
.sidenote-label { .sidenote-label {
border-bottom: 2px solid $primary-color; border-bottom: .2rem solid $primary-color;
} }
.sidenote-checkbox { .sidenote-checkbox {
@ -30,7 +33,7 @@ $sidenote-offset: 15px;
display: block; display: block;
position: absolute; position: absolute;
width: $sidenote-width; width: $sidenote-width;
margin-top: -1.5em; margin-top: -1.5rem;
&.sidenote-right { &.sidenote-right {
right: 0; right: 0;
@ -45,8 +48,8 @@ $sidenote-offset: 15px;
@media screen and @media screen and
(max-width: $container-width + 2 * ($sidenote-width + 2 * $sidenote-offset)) { (max-width: $container-width + 2 * ($sidenote-width + 2 * $sidenote-offset)) {
position: static; position: static;
margin-top: 10px; margin-top: 1rem;
margin-bottom: 10px; margin-bottom: 1rem;
width: 100%; width: 100%;
display: none; display: none;
@ -55,16 +58,16 @@ $sidenote-offset: 15px;
} }
&.sidenote-left { &.sidenote-left {
margin-left: 0px; margin-left: 0rem;
} }
&.sidenote-right { &.sidenote-right {
margin-right: 0px; margin-right: 0rem;
} }
} }
@include bordered-block; @include bordered-block;
padding: 10px; padding: $sidenote-padding;
box-sizing: border-box; box-sizing: border-box;
text-align: left; text-align: left;
} }

28
themes/vanilla/assets/scss/style.scss
View File

@ -1,24 +1,28 @@
$container-width: 800px; $container-width: 50rem;
$standard-border-width: .075rem;
$primary-color: #36e281; $primary-color: #36e281;
$primary-color-dark: darken($primary-color, 10%); $primary-color-dark: darken($primary-color, 10%);
$code-color: #f0f0f0; $code-color: #f0f0f0;
$code-color-dark: darken($code-color, 10%); $code-color-dark: darken($code-color, 10%);
$border-color: #bfbfbf; $border-color: #bfbfbf;
$font-heading: "Lora", serif; $font-heading: "Lora", serif;
$font-body: "Raleway", serif; $font-body: "Raleway", serif;
$font-code: "Inconsolata", monospace; $font-code: "Inconsolata", monospace;
$standard-border: 1px solid $border-color;
$standard-border: $standard-border-width solid $border-color;
@mixin bordered-block { @mixin bordered-block {
border: $standard-border; border: $standard-border;
border-radius: 2px; border-radius: .2rem;
} }
body { body {
font-family: $font-body; font-family: $font-body;
font-size: 1.0em; font-size: 1.0rem;
line-height: 1.5; line-height: 1.5;
margin-bottom: 1em; margin-bottom: 1rem;
text-align: justify; text-align: justify;
} }
@ -27,8 +31,8 @@ main {
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
margin-bottom: .1em; margin-bottom: .1rem;
margin-top: .5em; margin-top: .5rem;
font-family: $font-heading; font-family: $font-heading;
font-weight: normal; font-weight: normal;
text-align: left; text-align: left;
@ -49,7 +53,7 @@ code {
pre code { pre code {
display: block; display: block;
padding: 0.5em; padding: 0.5rem;
overflow-x: auto; overflow-x: auto;
background-color: $code-color; background-color: $code-color;
} }
@ -61,12 +65,12 @@ pre code {
box-sizing: border-box; box-sizing: border-box;
@media screen and (max-width: $container-width){ @media screen and (max-width: $container-width){
padding: 0em 1em 0em 1em; padding: 0rem 1rem 0rem 1rem;
} }
} }
.button, input[type="submit"] { .button, input[type="submit"] {
padding: 0.5em; padding: 0.5rem;
background-color: $primary-color; background-color: $primary-color;
border: none; border: none;
color: white; color: white;
@ -87,7 +91,7 @@ pre code {
nav { nav {
background-color: $primary-color; background-color: $primary-color;
width: 100%; width: 100%;
margin: 1em 0px 1em 0px; margin: 1rem 0rem 1rem 0rem;
} }
nav a { nav a {
@ -110,7 +114,7 @@ nav a {
} }
.post-content { .post-content {
margin-top: .5em; margin-top: .5rem;
} }
h1 { h1 {