jake/jarv.is
jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-04-27 13:56:22 -04:00
Code Issues

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
Signed by: jake
GPG Key ID: 2B0C9CF251E69A39
11 changed files with 90 additions and 72 deletions
Show Stats 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 // Global Colors
$color-background: #ffffff; $color-background: #ffffff;
$color-gray-background: #fbfbfb; $color-gray-background: #f9f9f9;
$color-text: #222222; $color-text: #222222;
$color-medium-dark: #313131; $color-medium-dark: #494949;
$color-medium: #444444; $color-medium: #5e5e5e;
$color-light: #666666;
$color-medium-light: #757575; $color-medium-light: #757575;
$color-super-light: #dddddd; $color-light: #d2d2d2;
$color-super-duper-light: #f4f4f4; $color-super-light: #f4f4f4;
$color-links: #0e6dc2; $color-links: #0e6dc2;
// For nifty color swapping on svg logo hover in components/_header.scss // 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 // Global Footer Styles
footer { footer {
width: 100%; width: 100%;
display: flex;
justify-content: space-between;
line-height: 1.7; line-height: 1.7;
padding: 1.5em; padding: 1.5em 2.5em;
box-sizing: border-box; box-sizing: border-box;
color: $color-light; color: $color-medium;
border-top: 1px solid $color-super-light; border-top: 1px solid $color-light;
a { a {
color: inherit; color: inherit;
} }
div { div#row {
&#copyright, width: 100%;
&#poweredby { max-width: 980px;
width: 40%; margin: 0 auto;
font-size: 0.85em; display: flex;
line-height: 2; justify-content: space-between;
}
&#copyright { div {
text-align: left; &#copyright,
} &#poweredby {
width: 40%;
&#poweredby { font-size: 0.85em;
text-align: right; line-height: 2;
a#source {
border-bottom: 1px solid $color-super-light;
} }
}
&#panda { &#copyright {
width: 20%; text-align: left;
text-align: center; }
font-size: 1.7em;
line-height: 1;
a { &#poweredby {
display: inline-block; text-align: right;
transition: transform 0.2s ease-in-out;
&:hover { a#source {
transform: scale(1.6) rotate(10deg); 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 // Responsive
@mixin responsive--footer() { @mixin responsive--footer() {
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 { &#panda {
display: none; display: none;
} }

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

@ -5,7 +5,7 @@ body {
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0 auto; margin: 0 auto;
background-color: $color-background; background-color: $color-gray-background; // really just the color of header & footer
color: $color-text; color: $color-text;
font-family: $system-fonts; font-family: $system-fonts;
line-height: 1.5; 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 // Responsive
@mixin responsive--global() { @mixin responsive--global() {

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

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

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

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

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

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

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

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

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

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

2
layouts/_default/baseof.html
View File

@ -6,7 +6,9 @@
</head> </head>
<body> <body>
{{ block "header" . }}{{ partial "header" . }}{{ end }} {{ block "header" . }}{{ partial "header" . }}{{ end }}
<div id="wrap">
{{ block "main" . }}{{ end }} {{ block "main" . }}{{ end }}
</div>
{{ block "footer" . }}{{ partial "footer" . }}{{ end }} {{ block "footer" . }}{{ partial "footer" . }}{{ end }}
</body> </body>
</html> </html>

2
layouts/partials/footer.html
View File

@ -1,8 +1,10 @@
<footer> <footer>
<div id="row">
<div id="copyright">Content licensed under <a class="no-underline" href="https://creativecommons.org/licenses/by/4.0/" title="Creative Commons Attribution 4.0 International" target="_blank" rel="noopener">CC-BY-4.0</a>, {{ with .Site.Params.wayback }}<a class="no-underline" href="{{ . }}" title="View Old Versions on Wayback Machine" id="wayback" target="_blank" rel="noopener">{{ end }}{{ with .Site.Params.copyrightFirstYear }}{{ . }} &ndash;{{ end }}{{ if .Site.Params.wayback }}</a>{{ end }} {{ now.Format "2006" }}.</div> <div id="copyright">Content licensed under <a class="no-underline" href="https://creativecommons.org/licenses/by/4.0/" title="Creative Commons Attribution 4.0 International" target="_blank" rel="noopener">CC-BY-4.0</a>, {{ with .Site.Params.wayback }}<a class="no-underline" href="{{ . }}" title="View Old Versions on Wayback Machine" id="wayback" target="_blank" rel="noopener">{{ end }}{{ with .Site.Params.copyrightFirstYear }}{{ . }} &ndash;{{ end }}{{ if .Site.Params.wayback }}</a>{{ end }} {{ now.Format "2006" }}.</div>
<div id="panda"><a class="no-underline" href="https://nationalzoo.si.edu/webcams/panda-cam" title="Live Panda Party!!!11" target="_blank" rel="noopener"><span>&#x1F43C;</span></a></div> <div id="panda"><a class="no-underline" href="https://nationalzoo.si.edu/webcams/panda-cam" title="Live Panda Party!!!11" target="_blank" rel="noopener"><span>&#x1F43C;</span></a></div>
<div id="poweredby"> <div id="poweredby">
<a class="no-underline" href="https://gohugo.io/" title="Powered by Hugo" id="hugo" target="_blank" rel="noopener">Powered by Hugo.</a> <a class="no-underline" href="https://gohugo.io/" title="Powered by Hugo" id="hugo" target="_blank" rel="noopener">Powered by Hugo.</a>
{{ with .Site.Params.gitRepo }}<a class="no-underline" href="{{ . }}" title="View Source on GitHub" id="source" target="_blank" rel="noopener">View source.</a>{{ end }} {{ with .Site.Params.gitRepo }}<a class="no-underline" href="{{ . }}" title="View Source on GitHub" id="source" target="_blank" rel="noopener">View source.</a>{{ end }}
</div> </div>
</div>
</footer> </footer>

2
layouts/partials/logo.html
View File

@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 144.1" width="30" height="45"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 144" width="30" height="45">
<g id="c1" fill="#6fbc4e"> <g id="c1" fill="#6fbc4e">
<polygon points="57.6 0 38.4 11.1 38.4 11.1 76.8 33.2 96 22.1 96 22.1 57.6 0 57.6 0"/> <polygon points="57.6 0 38.4 11.1 38.4 11.1 76.8 33.2 96 22.1 96 22.1 57.6 0 57.6 0"/>
<polygon points="19.2 66.5 0 77.6 0 77.6 19.2 88.7 38.4 77.6 38.4 77.6 19.2 66.5 19.2 66.5"/> <polygon points="19.2 66.5 0 77.6 0 77.6 19.2 88.7 38.4 77.6 38.4 77.6 19.2 66.5 19.2 66.5"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 917 B

After

Width:  |  Height:  |  Size: 915 B