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

a real header/navbar on non-home pages, finally

Browse Source
This commit is contained in:
Jake Jarvis
2019-10-17 10:20:53 -04:00
parent 3db94d1cbe
commit 488d5c7661
6 changed files with 98 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,6 +3,7 @@
// Global Colors
$color-background: #ffffff;
$color-text: #222222;
$color-medium: #444444;
$color-light: #666666;
$color-medium-light: #757575;
$color-super-light: #dddddd;

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

@ -88,6 +88,10 @@ body#home {
text-align: left;
font-size: 0.9em;
line-height: 1.8;
span {
margin-right: 4px;
}
}
&#panda {

70
assets/sass/pages/_notes.scss
View File

@ -5,43 +5,78 @@ body#notes {
line-height: 1.5;
font-weight: 400;
max-width: 1010px;
padding: 35px 50px;
padding: 10px 50px 35px 50px;
header {
margin-bottom: 1.75em;
border-bottom: 1px solid $color-super-light;
margin-bottom: 25px;
a {
&#more {
font-size: 1.25em;
}
nav {
width: 100%;
padding: 10px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
&#logo {
img,
svg {
height: 150px;
width: 100px;
margin: 1.5em auto;
display: block;
a#logo {
display: flex;
align-items: center;
color: $color-medium;
img, svg {
height: 45px;
width: auto;
}
span#name {
margin: 0 20px;
font-size: 1.4em;
font-weight: 500;
}
&:hover {
color: $color-links;
$logo-original1: #6fbc4e;
$logo-original2: #ffb900;
$logo-original3: #009cdf;
svg {
g#area1 {
g#color1 {
fill: $logo-original2;
}
g#area2 {
g#color2 {
fill: $logo-original3;
}
g#area3 {
g#color3 {
fill: $logo-original1;
}
}
}
}
ul {
list-style: none;
display: flex;
align-items: center;
font-size: 1.5em;
line-height: 1;
li {
width: 60px;
text-align: right;
a {
display: inline-block;
transition: transform 0.15s ease-in-out;
&:hover {
transform: scale(1.4);
}
}
}
}
}
}
@ -104,8 +139,7 @@ body#notes {
text-align: center;
h1 {
margin-top: 0;
margin-bottom: 0.3em;
margin: 0.3em 0;
font-size: 2em;
line-height: 1.4;

20
assets/sass/pages/responsive/_notes.scss
View File

@ -2,17 +2,25 @@
// Responsive Blog
body#notes {
padding: 20px;
padding: 10px 20px 30px 20px;
width: 100%;
max-width: 100%;
header {
margin-bottom: 1.3em;
a#logo {
img,
svg {
height: 75px;
nav {
a#logo {
img, svg {
height: 55px;
width: auto;
}
span#name {
display: none;
}
}
ul li {
width: 50px;
}
}

2
layouts/index.html
View File

@ -21,7 +21,7 @@
<p>You can find some of my work on <a href="https://github.com/jakejarvis" title="Jake Jarvis on GitHub" id="github" target="_blank" rel="me noopener noreferrer">GitHub</a> or <a href="https://www.linkedin.com/in/jakejarvis/" title="Jake Jarvis on LinkedIn" id="linkedin" target="_blank" rel="me noopener noreferrer">LinkedIn</a>, my adventures on <a href="https://twitter.com/jakejarvis" title="Jake Jarvis on Twitter" id="twitter" target="_blank" rel="me noopener noreferrer">Twitter</a>, <a href="https://www.facebook.com/jakejarvis" title="Jake Jarvis on Facebook" id="facebook" target="_blank" rel="me noopener noreferrer">Facebook</a>, <a href="https://www.instagram.com/jakejarvis/" title="Jake Jarvis on Instagram" id="instagram" target="_blank" rel="me noopener noreferrer">Instagram</a>, or <a href="https://mastodon.social/@jakejarvis" title="Jake Jarvis on Mastodon" id="mastodon" target="_blank" rel="me noopener noreferrer">Mastodon</a>, and my standard <a href="{{ "resume.pdf" | absURL }}" title="View PDF Resume" id="resume" target="_blank" rel="noopener">PDF resume here</a>.</p>
<p>If any of this fits with what you're looking for, I'd love to hear from you via <a itemprop="email" class="u-email" href="&#x6D;&#x61;&#x69;&#x6C;&#x74;&#x6F;&#x3A;&#x6A;&#x61;&#x6B;&#x65;&#x40;&#x6A;&#x61;&#x72;&#x76;&#x2E;&#x69;&#x73;" title="Send Email" id="email">email</a><sup>&nbsp;<a class="no-underline" href="https://keybase.io/jakejarvis/pgp_keys.asc?fingerprint=87fb4b6006dd1beb3ed47fabd36cb66f4002b25b" title="Jake Jarvis&#39;s Public Key on Keybase" id="pgp" target="_blank" rel="noopener noreferrer nofollow">D36C B66F 4002 B25B</a></sup>, <a href="https://twitter.com/messages/compose?recipient_id=229769022" title="Send Direct Message on Twitter" id="dm" target="_blank" rel="noopener noreferrer nofollow">DM</a>, or <a href="sms:+1-617-917-3737" title="Send SMS: +1 (617) 917-3737" id="sms">text</a>!</p>
<footer>
<div id="blog"><a href="{{ "notes/" | absURL }}" title="Jake Jarvis&#39;s Blog" rel="me">Read more at my blog...</a></div>
<div id="blog"><a href="{{ "notes/" | absURL }}" title="Jake Jarvis&#39;s Blog" rel="me"><span>&#x1F4DD;</span> Read more at my blog...</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 noreferrer nofollow"><span>&#x1F43C;</span></a></div>
<div id="info"><span id="copyright"><a class="no-underline" href="https://web.archive.org/web/20010501000000*/jakejarvis.com" title="View Old Versions on Wayback Machine" id="wayback" target="_blank" rel="noopener noreferrer nofollow">&copy; 2001 &ndash;</a> {{ now.Format "2006" }} <a class="no-underline" href="{{ .Site.BaseURL }}" title="Jake Jarvis">Jake Jarvis</a>.</span> <a class="no-underline" href="https://github.com/jakejarvis/jarv.is" title="View Source on GitHub" id="source" target="_blank" rel="noopener noreferrer">View source.</a></div>
</footer>

45
layouts/partials/blog-header.html
View File

@ -1,21 +1,28 @@
<header>
{{ if eq .Kind "page" }}<a href="{{ "notes/" | absURL }}" id="more" title="More Posts">&laquo; More Posts</a>{{ else }}<a href="{{ .Site.BaseURL }}" id="more" title="Return Home">&laquo; Return Home</a>{{ end }}
<a class="no-underline" href="{{ .Site.BaseURL }}" id="logo" title="Jake Jarvis">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 144.1">
<title>Jake Jarvis</title>
<g id="area1" 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"/>
<polygon points="57.6 88.7 19.2 110.9 19.2 110.9 38.4 121.9 76.8 99.8 76.8 99.8 57.6 88.7 57.6 88.7"/>
</g>
<g id="area2" fill="#ffb900">
<polygon points="38.4 11.1 38.4 33.3 57.6 44.3 57.6 88.7 76.8 99.8 76.8 33.2 38.4 11.1 38.4 11.1"/>
<polygon points="19.2 110.9 19.2 110.8 19.2 88.7 0 77.6 0 121.9 38.4 144.1 38.4 121.9 19.2 110.9 19.2 110.9"/>
</g>
<g id="area3" fill="#009cdf">
<polygon points="76.8 33.2 76.8 99.8 76.8 99.8 38.4 121.9 38.4 144.1 96 110.9 96 22.1 76.8 33.2 76.8 33.2"/>
<polygon points="19.2 110.9 38.4 99.8 38.4 77.6 19.2 88.7 19.2 110.9 19.2 110.9"/>
</g>
</svg>
</a>
<nav>
<a class="no-underline" href="{{ .Site.BaseURL }}" id="logo" title="Jake Jarvis">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 144.1">
<g id="color1" 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"/>
<polygon points="57.6 88.7 19.2 110.9 19.2 110.9 38.4 121.9 76.8 99.8 76.8 99.8 57.6 88.7 57.6 88.7"/>
</g>
<g id="color2" fill="#ffb900">
<polygon points="38.4 11.1 38.4 33.3 57.6 44.3 57.6 88.7 76.8 99.8 76.8 33.2 38.4 11.1 38.4 11.1"/>
<polygon points="19.2 110.9 19.2 110.8 19.2 88.7 0 77.6 0 121.9 38.4 144.1 38.4 121.9 19.2 110.9 19.2 110.9"/>
</g>
<g id="color3" fill="#009cdf">
<polygon points="76.8 33.2 76.8 99.8 76.8 99.8 38.4 121.9 38.4 144.1 96 110.9 96 22.1 76.8 33.2 76.8 33.2"/>
<polygon points="19.2 110.9 38.4 99.8 38.4 77.6 19.2 88.7 19.2 110.9 19.2 110.9"/>
</g>
</svg>
<span id="name">Jake Jarvis</span>
</a>
<ul>
<li><a class="no-underline" href="{{ .Site.BaseURL }}" title="Home">&#x1F3E0;</a></li>
<li><a class="no-underline" href="{{ "notes/" | absURL }}" title="Notes">&#x1F4DD;</a></li>
<li><a class="no-underline" href="https://github.com/jakejarvis" title="GitHub" target="_blank" rel="me noopener noreferrer">&#x1F468;&#x200D;&#x1F4BB;</a></li>
<li><a class="no-underline" href="&#x6D;&#x61;&#x69;&#x6C;&#x74;&#x6F;&#x3A;&#x6A;&#x61;&#x6B;&#x65;&#x40;&#x6A;&#x61;&#x72;&#x76;&#x2E;&#x69;&#x73;" title="Email Me">&#x1F48C;</a></li>
</ul>
</nav>
</header>