jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-03 15:16:40 -04:00
Code Issues Activity

make actual background gray, main content area white

Browse Source
This commit is contained in:
Jake Jarvis
2019-12-14 22:34:50 -05:00
parent b80bfa2353
commit 80737f7276
11 changed files with 90 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
assets/sass/abstracts/_variables.scss
View File

@ -16,14 +16,13 @@ $link-underline-size: 2px;
// Global Colors
$color-background: #ffffff;
$color-gray-background: #fbfbfb;
$color-gray-background: #f9f9f9;
$color-text: #222222;
$color-medium-dark: #313131;
$color-medium: #444444;
$color-light: #666666;
$color-medium-dark: #494949;
$color-medium: #5e5e5e;
$color-medium-light: #757575;
$color-super-light: #dddddd;
$color-super-duper-light: #f4f4f4;
$color-light: #d2d2d2;
$color-super-light: #f4f4f4;
$color-links: #0e6dc2;
// For nifty color swapping on svg logo hover in components/_header.scss

75
assets/sass/components/_footer.scss
View File

@ -3,50 +3,56 @@
// Global Footer Styles
footer {
width: 100%;
display: flex;
justify-content: space-between;
line-height: 1.7;
padding: 1.5em;
padding: 1.5em 2.5em;
box-sizing: border-box;
color: $color-light;
border-top: 1px solid $color-super-light;
color: $color-medium;
border-top: 1px solid $color-light;
a {
color: inherit;
}
div {
&#copyright,
&#poweredby {
width: 40%;
font-size: 0.85em;
line-height: 2;
}
div#row {
width: 100%;
max-width: 980px;
margin: 0 auto;
display: flex;
justify-content: space-between;
&#copyright {
text-align: left;
}
&#poweredby {
text-align: right;
a#source {
border-bottom: 1px solid $color-super-light;
div {
&#copyright,
&#poweredby {
width: 40%;
font-size: 0.85em;
line-height: 2;
}
}
&#panda {
width: 20%;
text-align: center;
font-size: 1.7em;
line-height: 1;
&#copyright {
text-align: left;
}
a {
display: inline-block;
transition: transform 0.2s ease-in-out;
&#poweredby {
text-align: right;
&:hover {
transform: scale(1.6) rotate(10deg);
a#source {
border-bottom: 1px solid $color-light;
}
}
&#panda {
width: 20%;
text-align: center;
font-size: 1.7em;
line-height: 1;
a {
display: inline-block;
transition: transform 0.2s ease-in-out;
&:hover {
transform: scale(1.6) rotate(10deg);
}
}
}
}
@ -56,9 +62,10 @@ footer {
// Responsive
@mixin responsive--footer() {
footer {
padding-bottom: 0;
padding: 1em 1.5em 0 1.5em;
div {
div#row div {
// no more room at the inn for panda :(
&#panda {
display: none;
}

8
assets/sass/components/_global.scss
View File

@ -5,7 +5,7 @@ body {
width: 100%;
height: 100%;
margin: 0 auto;
background-color: $color-background;
background-color: $color-gray-background; // really just the color of header & footer
color: $color-text;
font-family: $system-fonts;
line-height: 1.5;
@ -32,6 +32,12 @@ a {
}
}
// white background for entire width content area
div#wrap {
width: 100%;
background-color: $color-background;
}
// Responsive
@mixin responsive--global() {

10
assets/sass/components/_header.scss
View File

@ -3,8 +3,7 @@
// Global Header Styles
header {
width: 100%;
background-color: $color-gray-background;
border-bottom: 1px solid $color-super-light;
border-bottom: 1px solid $color-light;
nav {
width: 100%;
@ -21,9 +20,10 @@ header {
padding: 15px;
h1#name {
margin: 0 0 0 20px;
font-size: 1.4em;
margin: 0 0 0 0.9em;
font-size: 1.5em;
font-weight: 500;
letter-spacing: 0.01em;
}
svg {
@ -60,7 +60,7 @@ header {
margin-right: 15px;
li {
width: 60px;
width: 2.5em;
text-align: right;
a {

6
assets/sass/pages/_home.scss
View File

@ -67,7 +67,7 @@ main#home {
margin-bottom: 0;
span {
margin-right: 4px;
margin-right: 0.2em;
}
}
@ -83,7 +83,7 @@ main#home {
float: right;
margin: 0 0 0.5em 1em;
padding: 4px;
border: 1px solid $color-super-light;
border: 1px solid $color-light;
border-radius: 50%;
width: 160px;
height: 160px;
@ -96,7 +96,7 @@ main#home {
main#home {
font-size: 1.1em;
line-height: 1.6;
padding: 1em 1.2em 0.5em 1.2em;
padding: 1.2em 1.2em 0.2em 1.2em;
img#me {
width: 85px;

10
assets/sass/pages/_list.scss
View File

@ -2,8 +2,8 @@
// Archive/List Styles
main#list {
max-width: 1010px;
padding: 1.5em 3em;
max-width: 980px;
padding: 1.5em 2.5em;
margin: 0 auto;
section.year {
@ -24,11 +24,11 @@ main#list {
display: flex;
div.date {
color: $color-light;
color: $color-medium;
width: 5.25em;
flex-shrink: 0;
}
&::after {
content: '';
display: block;
@ -50,7 +50,7 @@ main#list {
// Responsive
@mixin responsive--list() {
main#list {
padding: 1em 1.2em;
padding: 1em 1.5em;
section.year {
font-size: 1em;

23
assets/sass/pages/_single.scss
View File

@ -3,7 +3,7 @@
// Post Styles
main#single {
max-width: 910px;
padding: 1em 3em;
padding: 1em 2.5em;
margin: 0 auto;
article div {
@ -38,7 +38,7 @@ main#single {
display: block;
font-size: 0.9em;
font-style: normal;
color: $color-light;
color: $color-medium;
text-align: center;
}
@ -107,20 +107,20 @@ main#single {
div.highlight, code {
// https://markdotto.com/2018/02/07/github-system-fonts/
font-family: $system-fonts-monospace;
background: $color-super-duper-light;
background: $color-super-light;
font-size: 0.9em;
page-break-inside: avoid;
}
// inline code in paragraphs
p code {
border: 1px solid $color-super-light;
border: 1px solid $color-light;
padding: 0.2em;
}
// code fences
div.highlight {
border: 1px solid $color-super-light;
border: 1px solid $color-light;
border-left: 3px solid $color-links;
line-height: 1.6;
max-width: 100%;
@ -149,10 +149,10 @@ main#single {
}
div#byline {
color: $color-light;
color: $color-medium;
font-size: 0.85em;
line-height: 1.5;
letter-spacing: 1px;
letter-spacing: 0.08em;
a {
color: inherit;
@ -167,7 +167,7 @@ main#single {
display: inline;
margin: 0 0.7em;
text-transform: uppercase;
letter-spacing: 2px;
letter-spacing: 0.15em;
}
}
}
@ -179,13 +179,10 @@ main#single {
// Responsive
@mixin responsive--single() {
main#single {
padding: 0.8em 1.2em;
padding: 0.8em 1.5em;
article {
width: 100%;
max-width: 100%;
div#info h1 {
div#meta h1 {
font-size: 1.7em;
}
}

13
assets/sass/pages/_videos.scss
View File

@ -2,9 +2,14 @@
// Video Styles
main#video {
margin: 20px auto;
margin: 0 auto;
padding: 1.5em 0;
text-align: center;
h1 {
margin-top: 0;
}
p {
font-size: 0.85em;
line-height: 1.5em;
@ -27,16 +32,16 @@ main#video {
// Responsive
@mixin responsive--videos() {
main#video {
margin: 20px 0;
padding: 1em 0;
h1 {
font-size: 1.6em;
padding: 0 15px;
padding: 0 0.6em;
}
video {
width: 100%;
height: auto;
}
}
}
}