jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2026-09-10 15:45:31 -04:00
Code Issues Activity

not using pixels is WAY harder than it sounds...

Browse Source
This commit is contained in:
jake
2019-09-30 18:26:02 -04:00
parent 768e08c3e1
commit 25f9ec97eb
1 changed files with 57 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/style.scss
+56 -51
View File
@@ -1,8 +1,8 @@
/*! Compiled from https://github.com/jakejarvis/jarv.is/blob/master/assets/style.scss */ /*! Compiled CSS from SASS: https://go.jarv.is/sass-source */
// Global Colors // Global Colors
$color-background: #ffffff; $color-background: #ffffff;
$color-text: #202020; $color-text: #222222;
$color-light: #666666; $color-light: #666666;
$color-medium-light: #9e9e9e; $color-medium-light: #9e9e9e;
$color-super-light: #dddddd; $color-super-light: #dddddd;
@@ -53,10 +53,6 @@ $color-fairy: #f23e93;
// Global Styles // Global Styles
* {
box-sizing: border-box;
}
body { body {
width: 100%; width: 100%;
height: 100%; height: 100%;
@@ -68,8 +64,7 @@ body {
"Droid Sans", "Helvetica Neue", sans-serif, "Droid Sans", "Helvetica Neue", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-weight: 300; font-weight: 300;
font-size: 24px; box-sizing: border-box;
line-height: 1.5;
a { a {
color: $color-links; color: $color-links;
@@ -78,12 +73,17 @@ body {
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
&:hover { &:hover {
// Calculate lighter underline color compared to text color.
// mix()'ing with background (#fff) gives the impression of
// opacity but with MUCH better compatibility.
border-color: mix($color-links, $color-background, 40%); border-color: mix($color-links, $color-background, 40%);
} }
} }
// Home Styles // Home Styles
&#home { &#home {
font-size: 1.5em;
line-height: 1.5;
max-width: 1070px; max-width: 1070px;
padding: 60px; padding: 60px;
@@ -112,7 +112,6 @@ body {
p { p {
margin: 20px 0; margin: 20px 0;
font-size: 1em;
} }
sup { sup {
@@ -135,9 +134,6 @@ body {
color: $color; color: $color;
&:hover { &:hover {
// Lighter underline compared to text color. mix()'ing with
// background (#fff) gives the impression of transparency
// but with MUCH better compatibility.
border-color: mix($color, $color-background, 40%); border-color: mix($color, $color-background, 40%);
} }
} }
@@ -180,7 +176,12 @@ body {
&#panda { &#panda {
width: 20%; width: 20%;
text-align: center; text-align: center;
font-size: 1em; font-size: 1.25em;
line-height: 1.5;
a {
border: none;
}
span { span {
text-align: center; text-align: center;
@@ -196,6 +197,7 @@ body {
a { a {
color: $color-light; color: $color-light;
border: none;
&#source { &#source {
border-bottom: 1px solid $color-super-light; border-bottom: 1px solid $color-super-light;
@@ -216,20 +218,19 @@ body {
// Blog Styles // Blog Styles
&#notes { &#notes {
font-size: 18px; line-height: 1.5;
font-weight: 400; font-weight: 400;
max-width: 1010px; max-width: 1010px;
padding: 20px 50px; padding: 20px 50px;
header { header {
font-size: 16px;
margin-top: 20px; margin-top: 20px;
margin-bottom: 40px; margin-bottom: 40px;
a { a {
&#more { &#more {
border: none; border: none;
font-size: 18px; font-size: 1.25em;
font-weight: 400; font-weight: 400;
} }
@@ -252,10 +253,8 @@ body {
footer { footer {
border-top: 1px solid $color-super-light; border-top: 1px solid $color-super-light;
height: 40px; height: 40px;
font-size: 24px;
padding-top: 16px; padding-top: 16px;
margin-top: 30px; margin-top: 30px;
margin-bottom: 20px;
a { a {
color: $color-light; color: $color-light;
@@ -270,7 +269,7 @@ body {
&#copyright, &#poweredby { &#copyright, &#poweredby {
width: 40%; width: 40%;
font-size: 0.55em; font-size: 0.85em;
color: $color-light; color: $color-light;
} }
@@ -289,7 +288,7 @@ body {
&#panda { &#panda {
width: 20%; width: 20%;
text-align: center; text-align: center;
font-size: 1em; font-size: 1.5em;
span { span {
text-align: center; text-align: center;
@@ -302,7 +301,6 @@ body {
main { main {
&#single article div { &#single article div {
&#content { &#content {
font-size: 16px;
line-height: 1.8; line-height: 1.8;
object-fit: contain; object-fit: contain;
} }
@@ -313,7 +311,7 @@ body {
h1 { h1 {
margin-top: 0; margin-top: 0;
margin-bottom: 20px; margin-bottom: 20px;
font-size: 32px; font-size: 2em;
line-height: 1.4; line-height: 1.4;
a { a {
@@ -335,7 +333,7 @@ body {
&.meta { &.meta {
margin: -5px 0 0 0; margin: -5px 0 0 0;
color: $color-light; color: $color-light;
font-size: 13px; font-size: 0.85em;
line-height: 1.5; line-height: 1.5;
letter-spacing: 1px; letter-spacing: 1px;
@@ -372,8 +370,8 @@ body {
+ em { + em {
display: block; display: block;
font-size: 0.95em;
text-align: center; text-align: center;
font-size: 15px;
color: $color-light; color: $color-light;
margin-top: 5px; margin-top: 5px;
} }
@@ -381,8 +379,8 @@ body {
figure figcaption { figure figcaption {
display: block; display: block;
font-size: 0.95em;
text-align: center; text-align: center;
font-size: 15px;
color: $color-light; color: $color-light;
margin-top: 5px; margin-top: 5px;
} }
@@ -436,14 +434,15 @@ body {
code { code {
font-family: monospace; font-family: monospace;
font-size: 1.2em;
background: $color-super-duper-light; background: $color-super-duper-light;
padding: 0.2em; padding: 0.2em;
border: 1px solid $color-super-light; border: 1px solid $color-super-light;
font-size: 16px;
} }
pre code { pre code {
padding: 1em 1.5em; padding: 1em 1.5em;
font-size: 1.2em;
line-height: 1.6; line-height: 1.6;
page-break-inside: avoid; page-break-inside: avoid;
border: 1px solid $color-super-light; border: 1px solid $color-super-light;
@@ -489,7 +488,13 @@ body {
} }
} }
h2 {
font-size: 1.8em;
}
div { div {
font-size: 1.1em;
&.date { &.date {
float: left; float: left;
color: $color-light; color: $color-light;
@@ -512,12 +517,12 @@ body {
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
// Responsive Home // Responsive Home
body#home { body#home {
font-size: 16px; font-size: 1em;
padding: 30px; padding: 30px;
img#me { img#me {
width: 70px; width: 68px;
height: 70px; height: 68px;
padding: 2px; padding: 2px;
margin: 0 0 10px 10px; margin: 0 0 10px 10px;
} }
@@ -569,12 +574,18 @@ body {
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
main#archive section.year div {
font-size: 1em;
}
main#single article { main#single article {
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
div.meta { div {
font-size: 14px; &#info h1 {
font-size: 1.7em;
}
} }
} }
@@ -590,29 +601,23 @@ body {
} }
} }
footer { footer div {
margin-bottom: 30px; &#panda {
display: none;
}
div { &#copyright {
&#panda { width: 50%;
display: none; line-height: 1.8;
} }
&#copyright { &#poweredby {
width: 50%; width: 50%;
font-size: 14px; line-height: 1.8;
line-height: 1.8;
}
&#poweredby { a#hugo::after {
width: 50%; content: "\A";
font-size: 14px; white-space: pre;
line-height: 1.8;
a#hugo::after {
content: "\A";
white-space: pre;
}
} }
} }
} }