jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-03 18:06:38 -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

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 {