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

Change CSS to use rems

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";
$sidenote-width: 350px;
$sidenote-offset: 15px;
$sidenote-width: 30rem;
$sidenote-offset: 1.5rem;
$sidenote-padding: 1rem;
$sidenote-highlight-border-width: .2rem;
.sidenote {
&:hover {
@ -11,15 +13,16 @@ $sidenote-offset: 15px;
}
.sidenote-content {
border: 2px dashed;
padding: 9px;
border: $sidenote-highlight-border-width dashed;
padding: $sidenote-padding -
($sidenote-highlight-border-width - $standard-border-width);
border-color: $primary-color;
}
}
}
.sidenote-label {
border-bottom: 2px solid $primary-color;
border-bottom: .2rem solid $primary-color;
}
.sidenote-checkbox {
@ -30,7 +33,7 @@ $sidenote-offset: 15px;
display: block;
position: absolute;
width: $sidenote-width;
margin-top: -1.5em;
margin-top: -1.5rem;
&.sidenote-right {
right: 0;
@ -45,8 +48,8 @@ $sidenote-offset: 15px;
@media screen and
(max-width: $container-width + 2 * ($sidenote-width + 2 * $sidenote-offset)) {
position: static;
margin-top: 10px;
margin-bottom: 10px;
margin-top: 1rem;
margin-bottom: 1rem;
width: 100%;
display: none;
@ -55,16 +58,16 @@ $sidenote-offset: 15px;
}
&.sidenote-left {
margin-left: 0px;
margin-left: 0rem;
}
&.sidenote-right {
margin-right: 0px;
margin-right: 0rem;
}
}
@include bordered-block;
padding: 10px;
padding: $sidenote-padding;
box-sizing: border-box;
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-dark: darken($primary-color, 10%);
$code-color: #f0f0f0;
$code-color-dark: darken($code-color, 10%);
$border-color: #bfbfbf;
$font-heading: "Lora", serif;
$font-body: "Raleway", serif;
$font-code: "Inconsolata", monospace;
$standard-border: 1px solid $border-color;
$standard-border: $standard-border-width solid $border-color;
@mixin bordered-block {
border: $standard-border;
border-radius: 2px;
border-radius: .2rem;
}
body {
font-family: $font-body;
font-size: 1.0em;
font-size: 1.0rem;
line-height: 1.5;
margin-bottom: 1em;
margin-bottom: 1rem;
text-align: justify;
}
@ -27,8 +31,8 @@ main {
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: .1em;
margin-top: .5em;
margin-bottom: .1rem;
margin-top: .5rem;
font-family: $font-heading;
font-weight: normal;
text-align: left;
@ -49,7 +53,7 @@ code {
pre code {
display: block;
padding: 0.5em;
padding: 0.5rem;
overflow-x: auto;
background-color: $code-color;
}
@ -61,12 +65,12 @@ pre code {
box-sizing: border-box;
@media screen and (max-width: $container-width){
padding: 0em 1em 0em 1em;
padding: 0rem 1rem 0rem 1rem;
}
}
.button, input[type="submit"] {
padding: 0.5em;
padding: 0.5rem;
background-color: $primary-color;
border: none;
color: white;
@ -87,7 +91,7 @@ pre code {
nav {
background-color: $primary-color;
width: 100%;
margin: 1em 0px 1em 0px;
margin: 1rem 0rem 1rem 0rem;
}
nav a {
@ -110,7 +114,7 @@ nav a {
}
.post-content {
margin-top: .5em;
margin-top: .5rem;
}
h1 {