mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-04-27 17:30:28 -04:00
went a little crazy with CSS link animations 😳
This commit is contained in:
parent
5b5d961a63
commit
87d6d33536
@ -51,6 +51,10 @@ $colors-home:(
|
||||
$color-serverless: #87cef7;
|
||||
$color-fairy: #f23e93;
|
||||
|
||||
// Other Settings
|
||||
$link-opacity: 50%;
|
||||
$link-underline-size: 2px;
|
||||
|
||||
|
||||
// Global Styles
|
||||
body {
|
||||
@ -68,15 +72,26 @@ body {
|
||||
|
||||
a {
|
||||
color: $color-links;
|
||||
background-color: transparent;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid transparent;
|
||||
// linear-gradient() hack to get our custom underline to wrap:
|
||||
// https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/
|
||||
// Calculate lighter underline color compared to text color by
|
||||
// mix()'ing with background (#fff) to give the impression of
|
||||
// opacity but with MUCH better compatibility.
|
||||
background-image: linear-gradient(mix($color-links, $color-background, $link-opacity), mix($color-links, $color-background, $link-opacity));
|
||||
background-position: 0% 100%;
|
||||
background-repeat: no-repeat;
|
||||
padding-bottom: $link-underline-size;
|
||||
background-size: 0% $link-underline-size;
|
||||
transition: background-size 0.25s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
// Calculate lighter underline color compared to text color.
|
||||
// mix()'ing with background (#fff) gives the impression of
|
||||
// opacity but with MUCH better compatibility.
|
||||
border-color: mix($color-links, $color-background, 40%);
|
||||
text-decoration: none;
|
||||
background-size: 100% $link-underline-size;
|
||||
}
|
||||
|
||||
&.no-underline {
|
||||
background: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -87,20 +102,15 @@ body {
|
||||
max-width: 1070px;
|
||||
padding: 60px;
|
||||
|
||||
img#me {
|
||||
float: right;
|
||||
margin: 0 0 20px 20px;
|
||||
padding: 4px;
|
||||
border: 1px solid $color-super-light;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 20px 0;
|
||||
font-size: 1.5em;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
@ -122,9 +132,13 @@ body {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
h1 a {
|
||||
color: inherit;
|
||||
border: none;
|
||||
img#me {
|
||||
float: right;
|
||||
margin: 0 0 20px 20px;
|
||||
padding: 4px;
|
||||
border: 1px solid $color-super-light;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
a {
|
||||
@ -132,10 +146,7 @@ body {
|
||||
@each $id, $color in $colors-home {
|
||||
&##{$id} {
|
||||
color: $color;
|
||||
|
||||
&:hover {
|
||||
border-color: mix($color, $color-background, 40%);
|
||||
}
|
||||
background-image: linear-gradient(mix($color, $color-background, $link-opacity), mix($color, $color-background, $link-opacity));
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -151,6 +162,7 @@ body {
|
||||
|
||||
&#fairy {
|
||||
color: $color-fairy;
|
||||
|
||||
&:hover {
|
||||
cursor: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzNiIgdmlld3BvcnQ9IjAgMCAxMDAgMTAwIiBzdHlsZT0iZm9udC1zaXplOjE4cHgiPjx0ZXh0IHk9IjUwJSI+8J+nmjwvdGV4dD48L3N2Zz4=) 5 5, auto;
|
||||
}
|
||||
@ -180,12 +192,12 @@ body {
|
||||
line-height: 1.5;
|
||||
|
||||
a {
|
||||
border: none;
|
||||
}
|
||||
display: inline-block;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
|
||||
span {
|
||||
text-align: center;
|
||||
width: 12px;
|
||||
&:hover {
|
||||
transform: scale(1.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -197,7 +209,6 @@ body {
|
||||
|
||||
a {
|
||||
color: $color-light;
|
||||
border: none;
|
||||
|
||||
&#source {
|
||||
border-bottom: 1px solid $color-super-light;
|
||||
@ -224,8 +235,7 @@ body {
|
||||
padding: 20px 50px;
|
||||
|
||||
header {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 40px;
|
||||
margin: 30px 0;
|
||||
|
||||
a {
|
||||
&#more {
|
||||
@ -288,11 +298,15 @@ body {
|
||||
&#panda {
|
||||
width: 20%;
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
font-size: 1.7em;
|
||||
|
||||
span {
|
||||
text-align: center;
|
||||
width: 12px;
|
||||
a {
|
||||
display: inline-block;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -462,6 +476,15 @@ body {
|
||||
div#commento-footer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// disable link underline effect
|
||||
a {
|
||||
background: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -520,13 +543,6 @@ body {
|
||||
font-size: 1em;
|
||||
padding: 30px;
|
||||
|
||||
img#me {
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
padding: 2px;
|
||||
margin: 0 0 10px 10px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
@ -541,6 +557,13 @@ body {
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
img#me {
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
padding: 2px;
|
||||
margin: 0 0 10px 10px;
|
||||
}
|
||||
|
||||
footer div {
|
||||
&#panda {
|
||||
display: none;
|
||||
@ -555,16 +578,16 @@ body {
|
||||
width: 50%;
|
||||
line-height: 20px;
|
||||
font-size: 0.7em;
|
||||
|
||||
span#copyright::after {
|
||||
content: "\A";
|
||||
white-space: pre;
|
||||
}
|
||||
}
|
||||
|
||||
&#blog {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
&#info span#copyright::after {
|
||||
content: "\A";
|
||||
white-space: pre;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -602,17 +625,17 @@ body {
|
||||
}
|
||||
|
||||
footer div {
|
||||
line-height: 1.8;
|
||||
|
||||
&#panda {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&#copyright {
|
||||
&#copyright, &#poweredby {
|
||||
width: 50%;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
&#poweredby {
|
||||
width: 50%;
|
||||
line-height: 1.8;
|
||||
|
||||
a#hugo::after {
|
||||
|
||||
@ -3,13 +3,13 @@
|
||||
<main id="single">
|
||||
<article itemscope itemtype="http://schema.org/Article" class="h-entry">
|
||||
<div id="info">
|
||||
<h1 itemprop="name" class="p-name"><a href="{{ .Permalink }}" itemprop="url" class="u-url">{{ .Title }}</a></h1>
|
||||
<h1 itemprop="name" class="p-name"><a class="no-underline" href="{{ .Permalink }}" itemprop="url" class="u-url">{{ .Title }}</a></h1>
|
||||
<div class="meta">
|
||||
by <span itemprop="author" itemscope itemtype="http://schema.org/Person" class="p-author"><a itemprop="url" rel="me author" href="{{ .Site.BaseURL }}" title="Jake Jarvis" class="h-card"><span itemprop="name" class="p-name">Jake Jarvis</span></a></span> ·
|
||||
<a href="{{ .Permalink }}" title="{{ .Date.Format "Mon, Jan 2 2006 3:04:05 PM MST" }}"><time itemprop="datePublished" content="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="dt-published">{{ .Date.Format "January 2, 2006" }}</time></a> ·
|
||||
by <span itemprop="author" itemscope itemtype="http://schema.org/Person" class="p-author"><a class="no-underline" itemprop="url" rel="me author" href="{{ .Site.BaseURL }}" title="Jake Jarvis" class="h-card"><span itemprop="name" class="p-name">Jake Jarvis</span></a></span> ·
|
||||
<a class="no-underline" href="{{ .Permalink }}" title="{{ .Date.Format "Mon, Jan 2 2006 3:04:05 PM MST" }}"><time itemprop="datePublished" content="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="dt-published">{{ .Date.Format "January 2, 2006" }}</time></a> ·
|
||||
<!-- {{ if lt 1 .WordCount }}{{ .WordCount }} words{{ else }}{{ .WordCount }} word{{ end }} · -->
|
||||
<!-- {{ .ReadingTime }} minute read -->
|
||||
<a href="{{ .Permalink }}#commento">Comments</a>
|
||||
<a class="no-underline" href="{{ .Permalink }}#commento">Comments</a>
|
||||
<div class="tags">
|
||||
{{ with .Params.tags }}{{ if ge (len .) 1 }}
|
||||
{{ range . }}<span class="tag p-category"><!--<a href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}">-->{{ . }}<!--</a>--></span>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<main itemscope itemtype="http://schema.org/Person" class="h-card">
|
||||
<header>
|
||||
<img itemprop="image" id="me" class="u-photo" src="{{ "me.jpg" | absURL }}" alt="Photo of Jake Jarvis" title="Photo of Jake Jarvis">
|
||||
<h1>Hi! I'm <a itemprop="url" rel="me author" class="u-url" href="{{ .Site.BaseURL }}" title="Jake Jarvis"><span itemprop="name" class="p-name">Jake Jarvis</span></a>. <span id="wave">👋<!--🏻--></span></h1>
|
||||
<h1>Hi! I'm <a class="no-underline" itemprop="url" rel="me author" class="u-url" href="{{ .Site.BaseURL }}" title="Jake Jarvis"><span itemprop="name" class="p-name">Jake Jarvis</span></a>. <span id="wave">👋<!--🏻--></span></h1>
|
||||
<h2 itemprop="description">I'm a <span itemprop="jobTitle">web and mobile developer</span> based in <a href="https://www.youtube-nocookie.com/embed/rLwbzGyC6t4?hl=en&fs=1&showinfo=1&rel=0&iv_load_policy=3" title=""Boston Accent Trailer - Late Night with Seth Meyers" on YouTube" id="boston" target="_blank" rel="noopener noreferrer nofollow"><span itemprop="homeLocation">Boston</span></a>.</h2>
|
||||
</header>
|
||||
<p>My recent focus has been on <a href="https://stackoverflow.blog/2018/01/11/brutal-lifecycle-javascript-frameworks/" title=""The Brutal Lifecycle of JavaScript Frameworks" by Ian Allen" id="javascript" target="_blank" rel="noopener noreferrer nofollow">modern JavaScript frameworks</a> like <a href="https://reactjs.org/" title="React Official Website" id="react" target="_blank" rel="noopener noreferrer nofollow">React</a>, <a href="https://angular.io/" title="Angular Official Website" id="angular" target="_blank" rel="noopener noreferrer nofollow">Angular</a>, and <a href="https://vuejs.org/" title="Vue.js Official Website" id="vue" target="_blank" rel="noopener noreferrer nofollow">Vue</a> in front of <a href="https://nodejs.org/en/" title="Node.js Official Website" id="node" target="_blank" rel="noopener noreferrer nofollow">Node</a> and <a href="https://golang.org/" title="Golang Official Website" id="golang" target="_blank" rel="noopener noreferrer nofollow">Go</a> backends...</p>
|
||||
@ -19,11 +19,11 @@
|
||||
<a href="https://gigaom.com/2009/10/06/fresh-faces-in-tech-10-kid-entrepreneurs-to-watch/6/" title=""Fresh Faces in Tech: 10 Kid Entrepreneurs to Watch" on Gigaom" id="news-7" target="_blank" rel="noopener noreferrer nofollow">outlets</a>.
|
||||
</p>
|
||||
<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="mailto:jake@jarv.is" title="Send Email" id="email">email</a><sup> <a href="https://keybase.io/jakejarvis/pgp_keys.asc?fingerprint=87fb4b6006dd1beb3ed47fabd36cb66f4002b25b" title="Jake Jarvis'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>
|
||||
<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="mailto:jake@jarv.is" title="Send Email" id="email">email</a><sup> <a class="no-underline" href="https://keybase.io/jakejarvis/pgp_keys.asc?fingerprint=87fb4b6006dd1beb3ed47fabd36cb66f4002b25b" title="Jake Jarvis'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's Blog" rel="me">Read more at my blog...</a></div>
|
||||
<div id="panda"><a href="https://nationalzoo.si.edu/webcams/panda-cam#maincontent" title="Live Panda Party!" target="_blank" rel="noopener noreferrer nofollow"><span>🐼</span></a></div>
|
||||
<div id="info"><span id="copyright"><a href="https://web.archive.org/web/20010501000000*/jakejarvis.com" title="View Old Versions on Wayback Machine" id="wayback" target="_blank" rel="noopener noreferrer nofollow">© 2001 –</a> {{ now.Format "2006" }} <a href="{{ .Site.BaseURL }}" title="Jake Jarvis">Jake Jarvis</a>.</span> <a href="https://github.com/jakejarvis/jarv.is" title="View Source on GitHub" id="source" target="_blank" rel="noopener noreferrer">View source.</a></div>
|
||||
<div id="panda"><a class="no-underline" href="https://nationalzoo.si.edu/webcams/panda-cam#maincontent" title="Live Panda Party!!!11" target="_blank" rel="noopener noreferrer nofollow"><span>🐼</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">© 2001 –</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>
|
||||
</main>
|
||||
{{ partial "footer.html" . }}
|
||||
@ -1,6 +1,6 @@
|
||||
<footer>
|
||||
<div id="copyright">Posts licensed under <a href="https://creativecommons.org/licenses/by/4.0/" title="Creative Commons Attribution 4.0 International" target="_blank" rel="noopener noreferrer nofollow">CC-BY-4.0</a>, <a href="https://web.archive.org/web/20010501000000*/jakejarvis.com" title="View Old Versions on Wayback Machine" id="wayback" target="_blank" rel="noopener noreferrer nofollow">2001 –</a> {{ now.Format "2006" }}.</div>
|
||||
<div id="panda"><a href="https://nationalzoo.si.edu/webcams/panda-cam#maincontent" title="Live Panda Party!" target="_blank" rel="noopener noreferrer nofollow"><span>🐼</span></a></div>
|
||||
<div id="poweredby"><a href="https://gohugo.io/" title="Powered by Hugo" id="hugo" target="_blank" rel="noopener noreferrer nofollow">Powered by Hugo.</a> <a href="https://github.com/jakejarvis/jarv.is" title="View Source on GitHub" id="source" target="_blank" rel="noopener noreferrer">View source.</a></div>
|
||||
<div id="copyright">Posts 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 noreferrer nofollow">CC-BY-4.0</a>, <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">2001 –</a> {{ now.Format "2006" }}.</div>
|
||||
<div id="panda"><a class="no-underline" href="https://nationalzoo.si.edu/webcams/panda-cam#maincontent" title="Live Panda Party!!!11" target="_blank" rel="noopener noreferrer nofollow"><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 noreferrer nofollow">Powered by Hugo.</a> <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>
|
||||
{{ if .IsPage }}<script async defer src="https://comments.jarv.is/js/commento.js"></script>{{ end }}
|
||||
@ -1,6 +1,6 @@
|
||||
<header>
|
||||
{{ if eq .Kind "page" }}<a href="{{ "notes/" | absURL }}" id="more" title="More Posts">« More Posts</a>{{ else }}<a href="{{ .Site.BaseURL }}" id="more" title="Return Home">« Return Home</a>{{ end }}
|
||||
<a href="{{ .Site.BaseURL }}" id="logo" title="Jake Jarvis">
|
||||
<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>
|
||||
<polygon fill="#6fbc4e" 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"/>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user