mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-11-16 05:10:49 -05:00
not using pixels is WAY harder than it sounds...
This commit is contained in:
@@ -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
|
||||
$color-background: #ffffff;
|
||||
$color-text: #202020;
|
||||
$color-text: #222222;
|
||||
$color-light: #666666;
|
||||
$color-medium-light: #9e9e9e;
|
||||
$color-super-light: #dddddd;
|
||||
@@ -53,10 +53,6 @@ $color-fairy: #f23e93;
|
||||
|
||||
|
||||
// Global Styles
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -68,8 +64,7 @@ body {
|
||||
"Droid Sans", "Helvetica Neue", sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
font-weight: 300;
|
||||
font-size: 24px;
|
||||
line-height: 1.5;
|
||||
box-sizing: border-box;
|
||||
|
||||
a {
|
||||
color: $color-links;
|
||||
@@ -78,12 +73,17 @@ body {
|
||||
border-bottom: 1px solid transparent;
|
||||
|
||||
&: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%);
|
||||
}
|
||||
}
|
||||
|
||||
// Home Styles
|
||||
&#home {
|
||||
font-size: 1.5em;
|
||||
line-height: 1.5;
|
||||
max-width: 1070px;
|
||||
padding: 60px;
|
||||
|
||||
@@ -112,7 +112,6 @@ body {
|
||||
|
||||
p {
|
||||
margin: 20px 0;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
sup {
|
||||
@@ -135,9 +134,6 @@ body {
|
||||
color: $color;
|
||||
|
||||
&: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%);
|
||||
}
|
||||
}
|
||||
@@ -180,7 +176,12 @@ body {
|
||||
&#panda {
|
||||
width: 20%;
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
font-size: 1.25em;
|
||||
line-height: 1.5;
|
||||
|
||||
a {
|
||||
border: none;
|
||||
}
|
||||
|
||||
span {
|
||||
text-align: center;
|
||||
@@ -196,6 +197,7 @@ body {
|
||||
|
||||
a {
|
||||
color: $color-light;
|
||||
border: none;
|
||||
|
||||
&#source {
|
||||
border-bottom: 1px solid $color-super-light;
|
||||
@@ -216,20 +218,19 @@ body {
|
||||
|
||||
// Blog Styles
|
||||
&#notes {
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
max-width: 1010px;
|
||||
padding: 20px 50px;
|
||||
|
||||
header {
|
||||
font-size: 16px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 40px;
|
||||
|
||||
a {
|
||||
&#more {
|
||||
border: none;
|
||||
font-size: 18px;
|
||||
font-size: 1.25em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@@ -252,10 +253,8 @@ body {
|
||||
footer {
|
||||
border-top: 1px solid $color-super-light;
|
||||
height: 40px;
|
||||
font-size: 24px;
|
||||
padding-top: 16px;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
a {
|
||||
color: $color-light;
|
||||
@@ -270,7 +269,7 @@ body {
|
||||
|
||||
&#copyright, &#poweredby {
|
||||
width: 40%;
|
||||
font-size: 0.55em;
|
||||
font-size: 0.85em;
|
||||
color: $color-light;
|
||||
}
|
||||
|
||||
@@ -289,7 +288,7 @@ body {
|
||||
&#panda {
|
||||
width: 20%;
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
font-size: 1.5em;
|
||||
|
||||
span {
|
||||
text-align: center;
|
||||
@@ -302,7 +301,6 @@ body {
|
||||
main {
|
||||
&#single article div {
|
||||
&#content {
|
||||
font-size: 16px;
|
||||
line-height: 1.8;
|
||||
object-fit: contain;
|
||||
}
|
||||
@@ -313,7 +311,7 @@ body {
|
||||
h1 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 20px;
|
||||
font-size: 32px;
|
||||
font-size: 2em;
|
||||
line-height: 1.4;
|
||||
|
||||
a {
|
||||
@@ -335,7 +333,7 @@ body {
|
||||
&.meta {
|
||||
margin: -5px 0 0 0;
|
||||
color: $color-light;
|
||||
font-size: 13px;
|
||||
font-size: 0.85em;
|
||||
line-height: 1.5;
|
||||
letter-spacing: 1px;
|
||||
|
||||
@@ -372,8 +370,8 @@ body {
|
||||
|
||||
+ em {
|
||||
display: block;
|
||||
font-size: 0.95em;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
color: $color-light;
|
||||
margin-top: 5px;
|
||||
}
|
||||
@@ -381,8 +379,8 @@ body {
|
||||
|
||||
figure figcaption {
|
||||
display: block;
|
||||
font-size: 0.95em;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
color: $color-light;
|
||||
margin-top: 5px;
|
||||
}
|
||||
@@ -436,14 +434,15 @@ body {
|
||||
|
||||
code {
|
||||
font-family: monospace;
|
||||
font-size: 1.2em;
|
||||
background: $color-super-duper-light;
|
||||
padding: 0.2em;
|
||||
border: 1px solid $color-super-light;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
pre code {
|
||||
padding: 1em 1.5em;
|
||||
font-size: 1.2em;
|
||||
line-height: 1.6;
|
||||
page-break-inside: avoid;
|
||||
border: 1px solid $color-super-light;
|
||||
@@ -489,7 +488,13 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
div {
|
||||
font-size: 1.1em;
|
||||
|
||||
&.date {
|
||||
float: left;
|
||||
color: $color-light;
|
||||
@@ -512,12 +517,12 @@ body {
|
||||
@media screen and (max-width: 800px) {
|
||||
// Responsive Home
|
||||
body#home {
|
||||
font-size: 16px;
|
||||
font-size: 1em;
|
||||
padding: 30px;
|
||||
|
||||
img#me {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
padding: 2px;
|
||||
margin: 0 0 10px 10px;
|
||||
}
|
||||
@@ -569,12 +574,18 @@ body {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
|
||||
main#archive section.year div {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
main#single article {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
|
||||
div.meta {
|
||||
font-size: 14px;
|
||||
div {
|
||||
&#info h1 {
|
||||
font-size: 1.7em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -590,29 +601,23 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-bottom: 30px;
|
||||
footer div {
|
||||
&#panda {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div {
|
||||
&#panda {
|
||||
display: none;
|
||||
}
|
||||
&#copyright {
|
||||
width: 50%;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
&#copyright {
|
||||
width: 50%;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
&#poweredby {
|
||||
width: 50%;
|
||||
line-height: 1.8;
|
||||
|
||||
&#poweredby {
|
||||
width: 50%;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
|
||||
a#hugo::after {
|
||||
content: "\A";
|
||||
white-space: pre;
|
||||
}
|
||||
a#hugo::after {
|
||||
content: "\A";
|
||||
white-space: pre;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -661,4 +666,4 @@ div.highlight span {
|
||||
&.gs {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user