mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-07-03 18:06:38 -04:00
global header/navbar on all pages like a grown-up website (#17)
This commit is contained in:
GitHub
81
assets/sass/components/_footer.scss
Normal file
81
assets/sass/components/_footer.scss
Normal file
@ -0,0 +1,81 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
// Global Footer Styles
|
||||
footer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 1.7;
|
||||
padding: 1.5em;
|
||||
box-sizing: border-box;
|
||||
color: $color-light;
|
||||
border-top: 1px solid $color-super-light;
|
||||
|
||||
/* stylelint-disable-next-line no-descending-specificity */
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
div {
|
||||
&#copyright,
|
||||
&#poweredby {
|
||||
width: 40%;
|
||||
font-size: 0.85em;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
&#copyright {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&#poweredby {
|
||||
text-align: right;
|
||||
|
||||
a#source {
|
||||
border-bottom: 1px solid $color-super-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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive
|
||||
@mixin responsive--footer() {
|
||||
footer {
|
||||
padding-bottom: 0;
|
||||
|
||||
div {
|
||||
&#panda {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&#copyright,
|
||||
&#poweredby {
|
||||
line-height: 1.8;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
&#poweredby {
|
||||
a#hugo::after {
|
||||
content: "\A";
|
||||
white-space: pre;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
48
assets/sass/components/_global.scss
Normal file
48
assets/sass/components/_global.scss
Normal file
@ -0,0 +1,48 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
// Global Styles
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
background-color: $color-background;
|
||||
color: $color-text;
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
"Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
|
||||
"Droid Sans", "Helvetica Neue", sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
line-height: 1.5;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-links;
|
||||
text-decoration: none;
|
||||
background-image: underline-hack($color-links);
|
||||
background-position: 0% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 0% $link-underline-size;
|
||||
padding-bottom: $link-underline-size;
|
||||
transition: background-size 0.25s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background-size: 100% $link-underline-size;
|
||||
}
|
||||
|
||||
&.no-underline {
|
||||
background: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Responsive
|
||||
@mixin responsive--global() {
|
||||
body {
|
||||
// Safari iOS menu bar reappers below 44px:
|
||||
// https://www.eventbrite.com/engineering/mobile-safari-why/
|
||||
padding-bottom: 45px !important;
|
||||
// Allows you to scroll below the viewport; default value is visible
|
||||
overflow-y: scroll;
|
||||
}
|
||||
}
|
||||
109
assets/sass/components/_header.scss
Normal file
109
assets/sass/components/_header.scss
Normal file
@ -0,0 +1,109 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
// Global Header Styles
|
||||
header {
|
||||
width: 100%;
|
||||
background-color: $color-gray-background;
|
||||
border-bottom: 1px solid $color-super-light;
|
||||
|
||||
nav {
|
||||
width: 100%;
|
||||
padding: 0.5em 1.5em;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
a#logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $color-medium-dark;
|
||||
padding: 15px;
|
||||
|
||||
img,
|
||||
svg {
|
||||
width: 30px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
h1#name {
|
||||
margin: 0 0 0 20px;
|
||||
font-size: 1.4em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
// mix up logo colors on hover
|
||||
&:hover {
|
||||
color: $color-links;
|
||||
|
||||
svg {
|
||||
g#c1 {
|
||||
fill: $color-logo1;
|
||||
}
|
||||
g#c2 {
|
||||
fill: $color-logo2;
|
||||
}
|
||||
g#c3 {
|
||||
fill: $color-logo3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Horizontal emoji links
|
||||
ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.5em;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
margin-right: 15px;
|
||||
|
||||
li {
|
||||
width: 60px;
|
||||
text-align: right;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
transition: transform 0.15s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Responsive
|
||||
@mixin responsive--header() {
|
||||
header nav {
|
||||
padding: 0.4em 1em;
|
||||
|
||||
a#logo {
|
||||
padding: 10px;
|
||||
|
||||
img,
|
||||
svg {
|
||||
width: 40px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
h1#name {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
font-size: 1.75em;
|
||||
margin-right: 10px;
|
||||
|
||||
li {
|
||||
width: 55px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,22 +1,3 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
// nifty color swapping on svg logo hover
|
||||
a#logo {
|
||||
&:hover {
|
||||
$logo-original1: #6fbc4e;
|
||||
$logo-original2: #ffb900;
|
||||
$logo-original3: #009cdf;
|
||||
|
||||
svg {
|
||||
g#c1 {
|
||||
fill: $logo-original2;
|
||||
}
|
||||
g#c2 {
|
||||
fill: $logo-original3;
|
||||
}
|
||||
g#c3 {
|
||||
fill: $logo-original1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user