mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-04-27 13:56:22 -04:00
make actual background gray, main content area white
This commit is contained in:
parent
b80bfa2353
commit
80737f7276
GPG Key ID:
2B0C9CF251E69A39
@ -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
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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() {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,7 +6,9 @@
|
||||
</head>
|
||||
<body>
|
||||
{{ block "header" . }}{{ partial "header" . }}{{ end }}
|
||||
<div id="wrap">
|
||||
{{ block "main" . }}{{ end }}
|
||||
</div>
|
||||
{{ block "footer" . }}{{ partial "footer" . }}{{ end }}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,8 +1,10 @@
|
||||
<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 }}{{ . }} –{{ 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>🐼</span></a></div>
|
||||
<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>
|
||||
{{ 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>
|
||||
</footer>
|
||||
|
||||
@ -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">
|
||||
<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"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 917 B After Width: | Height: | Size: 915 B |
Loading…
x
Reference in New Issue
Block a user