mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-09-13 05:45:31 -04:00
majorly refactor SCSS and pray nothing breaks
This commit is contained in:
@@ -23,5 +23,8 @@
|
||||
"selector-no-qualifying-type": null,
|
||||
"shorthand-property-no-redundant-values": null
|
||||
},
|
||||
"ignoreFiles": ["assets/**/vendor/**"]
|
||||
"ignoreFiles": [
|
||||
"assets/**/vendor/**",
|
||||
"public/**"
|
||||
]
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@ const canonical = document.head.querySelector("link[rel='canonical']");
|
||||
// page must have both span#meta-hits and canonical URL to enter
|
||||
if (wrapper && canonical) {
|
||||
// javascript is enabled so show the loading indicator
|
||||
wrapper.style.display = "inline-block";
|
||||
wrapper.style.display = "inline-flex";
|
||||
|
||||
// get path and strip beginning and ending forward slash
|
||||
const slug = urlParse(canonical.href).pathname.replace(/^\/|\/$/g, "");
|
||||
@@ -26,13 +26,13 @@ if (wrapper && canonical) {
|
||||
wrapper.title = hitsComma + " " + hitsPlural;
|
||||
|
||||
// finally inject the hits...
|
||||
const counter = document.getElementById("hit-counter");
|
||||
const counter = document.getElementById("meta-hits-counter");
|
||||
if (counter) {
|
||||
counter.appendChild(document.createTextNode(hitsComma));
|
||||
}
|
||||
|
||||
// ...and hide the loading spinner
|
||||
const spinner = document.getElementById("hit-spinner");
|
||||
const spinner = document.getElementById("meta-hits-loading");
|
||||
if (spinner) {
|
||||
spinner.style.display = "none";
|
||||
}
|
||||
|
||||
@@ -18,48 +18,54 @@ if (wrapper) {
|
||||
<a class="repo-name" href="${repo.url}" target="_blank" rel="noopener">${repo.name}</a>
|
||||
|
||||
${repo.description ? html`<p class="repo-description">${repo.description}</p>` : null}
|
||||
${repo.language
|
||||
? html`<div class="repo-meta">
|
||||
<span
|
||||
class="repo-language-color"
|
||||
style="background-color: ${ifDefined(repo.language.color)}"
|
||||
></span>
|
||||
<span>${repo.language.name}</span>
|
||||
</div>`
|
||||
: null}
|
||||
${repo.stars > 0
|
||||
? html`<div
|
||||
class="repo-meta"
|
||||
title="${numeral(repo.stars).format("0,0")} ${repo.stars === 1 ? "star" : "stars"}"
|
||||
>
|
||||
<svg viewBox="0 0 16 16" height="16" width="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>${numeral(repo.stars).format("0,0")}</span>
|
||||
</div>`
|
||||
: null}
|
||||
${repo.forks > 0
|
||||
? html`<div
|
||||
class="repo-meta"
|
||||
title="${numeral(repo.forks).format("0,0")} ${repo.forks === 1 ? "fork" : "forks"}"
|
||||
>
|
||||
<svg viewBox="0 0 16 16" height="16" width="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>${numeral(repo.forks).format("0,0")}</span>
|
||||
</div>`
|
||||
: null}
|
||||
|
||||
<div class="repo-meta" title="${format(parseJSON(repo.updatedAt), "MMM d, yyyy, h:mm aa z")}">
|
||||
<span>
|
||||
Updated ${formatDistanceToNowStrict(parseJSON(repo.updatedAt), { addSuffix: true })}
|
||||
</span>
|
||||
<div class="repo-meta">
|
||||
${repo.language
|
||||
? html`<div class="repo-meta-item">
|
||||
<span
|
||||
class="repo-language-color"
|
||||
style="background-color: ${ifDefined(repo.language.color)}"
|
||||
></span>
|
||||
<span>${repo.language.name}</span>
|
||||
</div>`
|
||||
: null}
|
||||
${repo.stars > 0
|
||||
? html`<div
|
||||
class="repo-meta-item"
|
||||
title="${numeral(repo.stars).format("0,0")} ${repo.stars === 1 ? "star" : "stars"}"
|
||||
>
|
||||
<svg viewBox="0 0 16 16" height="16" width="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>${numeral(repo.stars).format("0,0")}</span>
|
||||
</div>`
|
||||
: null}
|
||||
${repo.forks > 0
|
||||
? html`<div
|
||||
class="repo-meta-item"
|
||||
title="${numeral(repo.forks).format("0,0")} ${repo.forks === 1 ? "fork" : "forks"}"
|
||||
>
|
||||
<svg viewBox="0 0 16 16" height="16" width="16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>${numeral(repo.forks).format("0,0")}</span>
|
||||
</div>`
|
||||
: null}
|
||||
|
||||
<div
|
||||
class="repo-meta-item"
|
||||
title="${format(parseJSON(repo.updatedAt), "MMM d, yyyy, h:mm aa z")}"
|
||||
>
|
||||
<span>
|
||||
Updated ${formatDistanceToNowStrict(parseJSON(repo.updatedAt), { addSuffix: true })}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
@@ -6,7 +6,20 @@ div#content {
|
||||
letter-spacing: -0.004em;
|
||||
line-height: 1.7;
|
||||
|
||||
h1,
|
||||
b,
|
||||
strong {
|
||||
letter-spacing: 0.008em; // not sure why the discrepancy between weights
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin-left: 0;
|
||||
padding-left: 1.5em;
|
||||
border-left: 3px solid;
|
||||
|
||||
@include themes.themed(color, "medium-dark");
|
||||
@include themes.themed(border-color, "links");
|
||||
}
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
@@ -14,8 +27,34 @@ div#content {
|
||||
margin-bottom: 0.5em;
|
||||
letter-spacing: 0.001em;
|
||||
line-height: 1.5;
|
||||
|
||||
// AnchorJS styles
|
||||
a.anchorjs-link {
|
||||
display: inline-block;
|
||||
margin-left: 0.25em;
|
||||
padding: 0 0.5em 0 0.25em;
|
||||
background: none;
|
||||
opacity: 0;
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
|
||||
&::before {
|
||||
content: "\0023"; // pound sign
|
||||
}
|
||||
|
||||
@include themes.themed(color, "medium-light");
|
||||
|
||||
&:hover {
|
||||
@include themes.themed(color, "links");
|
||||
}
|
||||
}
|
||||
|
||||
&:hover > a.anchorjs-link {
|
||||
opacity: 1; // '#' link appears on hover over entire sub-heading line
|
||||
}
|
||||
}
|
||||
|
||||
// special bottom border for H2s
|
||||
h2 {
|
||||
padding-bottom: 0.25em;
|
||||
border-bottom: 1px solid;
|
||||
@@ -56,33 +95,12 @@ div#content {
|
||||
}
|
||||
}
|
||||
|
||||
// AnchorJS styles
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
a.anchorjs-link {
|
||||
display: inline-block;
|
||||
margin-left: 0.25em;
|
||||
padding: 0 0.5em 0 0.25em;
|
||||
background: none;
|
||||
opacity: 0;
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
hr {
|
||||
margin: 1.5em auto;
|
||||
height: 2px;
|
||||
border: 0;
|
||||
|
||||
&::before {
|
||||
content: "\0023"; // pound sign
|
||||
}
|
||||
|
||||
@include themes.themed(color, "medium-light");
|
||||
|
||||
&:hover {
|
||||
@include themes.themed(color, "links");
|
||||
}
|
||||
}
|
||||
|
||||
&:hover > a.anchorjs-link {
|
||||
opacity: 1; // '#' link appears on hover over entire sub-heading line
|
||||
}
|
||||
@include themes.themed(background-color, "light");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@ footer {
|
||||
@include themes.themed(color, "medium-dark");
|
||||
}
|
||||
|
||||
div.row {
|
||||
div.footer-row {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-width: settings.$max-width;
|
||||
@@ -26,7 +26,7 @@ footer {
|
||||
}
|
||||
|
||||
// underline View Source link
|
||||
a#source {
|
||||
a#footer-view-source {
|
||||
padding-bottom: 2px;
|
||||
border-bottom: 1px solid;
|
||||
|
||||
@@ -40,7 +40,7 @@ footer {
|
||||
padding: 1em 1.25em 0 1.25em;
|
||||
|
||||
// stack columns on left instead of flexboxing across
|
||||
div.row {
|
||||
div.footer-row {
|
||||
display: block;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
@@ -55,13 +55,8 @@ pre,
|
||||
}
|
||||
}
|
||||
|
||||
// stretch background for entire width of content area
|
||||
main {
|
||||
width: 100%;
|
||||
padding: 0 1.5em;
|
||||
|
||||
@include themes.themed(color, "text");
|
||||
@include themes.themed(background-color, "background-inner");
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// this is what's extended by different layouts (in ../pages)
|
||||
@@ -71,53 +66,53 @@ div.layout {
|
||||
display: block; // https://stackoverflow.com/questions/28794718/max-width-not-working-for-ie-11
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
background-position: 0% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 0% settings.$link-underline-size;
|
||||
padding-bottom: settings.$link-underline-size;
|
||||
// stretch background for entire width of content area
|
||||
main {
|
||||
width: 100%;
|
||||
padding: 0 1.5em;
|
||||
|
||||
@include themes.themed(color, "links", ("background-size 0.25s ease-in-out"));
|
||||
@include themes.themed(color, "text");
|
||||
@include themes.themed(background-color, "background-inner");
|
||||
|
||||
// cool link underlines (via messy SCSS hacking):
|
||||
// https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/
|
||||
@each $theme, $map in themes.$themes {
|
||||
@at-root body.#{$theme} #{&} {
|
||||
background-image: underline-hack(map-get($map, "links"));
|
||||
a {
|
||||
background-position: 0% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 0% settings.$link-underline-size;
|
||||
padding-bottom: settings.$link-underline-size;
|
||||
|
||||
@include themes.themed(color, "links", ("background-size 0.25s ease-in-out"));
|
||||
|
||||
// cool link underlines (via messy SCSS hacking):
|
||||
// https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/
|
||||
@each $theme, $map in themes.$themes {
|
||||
@at-root body.#{$theme} #{&} {
|
||||
background-image: underline-hack(map-get($map, "links"));
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-size: 100% settings.$link-underline-size;
|
||||
}
|
||||
|
||||
// set an anchor's class to `no-underline` to disable all of this
|
||||
&.no-underline {
|
||||
background: none !important;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-size: 100% settings.$link-underline-size;
|
||||
// page titles
|
||||
h1 {
|
||||
margin-top: 0;
|
||||
letter-spacing: -0.005em;
|
||||
|
||||
a {
|
||||
// disable fancy underline without `.no-underline`
|
||||
color: inherit !important;
|
||||
background: none !important;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.no-underline {
|
||||
background: none !important;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
letter-spacing: 0.008em; // not sure why the discrepancy between weights
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin-left: 0;
|
||||
padding-left: 1.5em;
|
||||
border-left: 3px solid;
|
||||
|
||||
@include themes.themed(color, "medium-dark");
|
||||
@include themes.themed(border-color, "links");
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 1.5em auto;
|
||||
height: 2px;
|
||||
border: 0;
|
||||
|
||||
@include themes.themed(background-color, "light");
|
||||
}
|
||||
|
||||
// make SVG twemojis relative to surrounding text
|
||||
|
||||
@@ -17,22 +17,23 @@ header {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
a#logo {
|
||||
a#header-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@include themes.themed(color, "medium-dark");
|
||||
|
||||
img#selfie {
|
||||
img#header-selfie {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 1px solid;
|
||||
border-radius: 50%;
|
||||
user-select: none;
|
||||
|
||||
@include themes.themed(border-color, "light");
|
||||
}
|
||||
|
||||
span#name {
|
||||
span#header-name {
|
||||
margin: 0 0.6em;
|
||||
font-size: 1.25em;
|
||||
font-weight: 500;
|
||||
@@ -42,7 +43,7 @@ header {
|
||||
&:hover {
|
||||
@include themes.themed(color, "links");
|
||||
|
||||
img#selfie {
|
||||
img#header-selfie {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
@@ -57,11 +58,10 @@ header {
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
text-align: right;
|
||||
margin-left: 1.75em;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
will-change: transform;
|
||||
|
||||
@include themes.themed(color, "medium-dark", ("transform 0.15s ease-in-out"));
|
||||
@@ -72,16 +72,21 @@ header {
|
||||
@include themes.themed(color, "links", ("transform 0.15s ease-in-out"));
|
||||
}
|
||||
|
||||
span.icon {
|
||||
font-size: 1.3em;
|
||||
vertical-align: -0.085em;
|
||||
}
|
||||
span {
|
||||
align-self: center;
|
||||
|
||||
span.text {
|
||||
font-size: 0.95em;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.002em;
|
||||
margin-left: 0.65em;
|
||||
&.header-menu-icon {
|
||||
font-size: 1.3em;
|
||||
vertical-align: -0.085em;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&.header-menu-text {
|
||||
font-size: 0.95em;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.002em;
|
||||
margin-left: 0.65em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -121,36 +126,36 @@ header {
|
||||
padding: 0.5em 1.25em;
|
||||
|
||||
nav {
|
||||
a#logo {
|
||||
img#selfie {
|
||||
a#header-logo {
|
||||
img#header-selfie {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
span#name {
|
||||
span#header-name {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
img#selfie {
|
||||
img#header-selfie {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
ul.header-menu {
|
||||
font-size: 1.6em;
|
||||
|
||||
li {
|
||||
margin-left: 1.15em;
|
||||
|
||||
a {
|
||||
span.icon {
|
||||
a.header-menu-item {
|
||||
span.header-menu-icon {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
// hide text next to emojis on mobile
|
||||
span.text {
|
||||
span.header-menu-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -4,13 +4,7 @@ div.layout-etc {
|
||||
padding-bottom: 1.5em;
|
||||
|
||||
h1 {
|
||||
margin-top: 0;
|
||||
text-align: center;
|
||||
letter-spacing: -0.005em;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ div.layout-list {
|
||||
padding-top: 1.5em;
|
||||
padding-bottom: 0.25em;
|
||||
|
||||
section.year {
|
||||
section.list-section-year {
|
||||
font-size: 1.05em;
|
||||
|
||||
h2 {
|
||||
@@ -28,7 +28,7 @@ div.layout-list {
|
||||
line-height: 1.75;
|
||||
margin-bottom: 1em;
|
||||
|
||||
div.date {
|
||||
div.list-item-date {
|
||||
width: 5.25em;
|
||||
flex-shrink: 0;
|
||||
|
||||
@@ -48,7 +48,7 @@ div.layout-list {
|
||||
padding-top: 1em;
|
||||
padding-bottom: 0;
|
||||
|
||||
section.year {
|
||||
section.list-section-year {
|
||||
font-size: 1em;
|
||||
|
||||
h2 {
|
||||
|
||||
@@ -6,14 +6,8 @@ div.layout-projects {
|
||||
padding-bottom: 0.75em;
|
||||
|
||||
h1 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.4em;
|
||||
text-align: center;
|
||||
letter-spacing: -0.005em;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
div#content > p {
|
||||
@@ -62,28 +56,34 @@ div.layout-projects {
|
||||
}
|
||||
|
||||
div.repo-meta {
|
||||
display: inline-block;
|
||||
margin-right: 1.2em;
|
||||
font-size: 0.925em;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@include themes.themed(color, "medium");
|
||||
|
||||
svg {
|
||||
div.repo-meta-item {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 0.25em;
|
||||
margin-right: 0.2em;
|
||||
fill: currentColor;
|
||||
}
|
||||
align-self: baseline;
|
||||
margin-right: 1.5em;
|
||||
font-size: 0.925em;
|
||||
|
||||
span.repo-language-color {
|
||||
display: inline-block;
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
top: 0.235em;
|
||||
margin-right: 0.2em;
|
||||
@include themes.themed(color, "medium");
|
||||
|
||||
svg {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 0.25em;
|
||||
margin-right: 0.2em;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
span.repo-language-color {
|
||||
display: inline-block;
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
top: 0.235em;
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,26 +6,37 @@ div.layout-single {
|
||||
padding-bottom: 1em;
|
||||
|
||||
div#meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 0.3em;
|
||||
font-size: 0.825em;
|
||||
line-height: 2.3;
|
||||
letter-spacing: 0.04em;
|
||||
margin-top: 0.3em;
|
||||
|
||||
@include themes.themed(color, "medium");
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
|
||||
// disable fancy underline without `.no-underline`
|
||||
background: none !important;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
> div {
|
||||
display: inline-block;
|
||||
margin-right: 1.25em;
|
||||
display: inline-flex;
|
||||
margin-right: 1.6em;
|
||||
white-space: nowrap;
|
||||
|
||||
img.emoji {
|
||||
margin-right: 0.25em;
|
||||
vertical-align: -0.22em;
|
||||
cursor: inherit;
|
||||
span.meta-icon {
|
||||
margin-right: 0.4em;
|
||||
user-select: none;
|
||||
|
||||
img.emoji {
|
||||
margin-right: 0.25em;
|
||||
vertical-align: -0.22em;
|
||||
cursor: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
@@ -33,13 +44,22 @@ div.layout-single {
|
||||
}
|
||||
}
|
||||
|
||||
div#meta-date,
|
||||
div#meta-edit {
|
||||
a {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
||||
div#meta-tags {
|
||||
white-space: normal;
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
span {
|
||||
span.meta-tag {
|
||||
text-transform: lowercase;
|
||||
white-space: nowrap;
|
||||
margin-right: 0.4em;
|
||||
margin-right: 0.75em;
|
||||
|
||||
&::before {
|
||||
content: "#"; // cosmetically hashtagify tags
|
||||
@@ -54,7 +74,7 @@ div.layout-single {
|
||||
}
|
||||
}
|
||||
|
||||
div#hit-spinner {
|
||||
div#meta-hits-loading {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
|
||||
@@ -73,10 +93,6 @@ div.layout-single {
|
||||
line-height: 1.3;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.006em;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -5,15 +5,6 @@ div.layout-video {
|
||||
padding: 1.5em 0;
|
||||
text-align: center;
|
||||
|
||||
h1 {
|
||||
margin-top: 0;
|
||||
letter-spacing: -0.005em;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0.85em;
|
||||
letter-spacing: -0.005em;
|
||||
|
||||
@@ -29,16 +29,15 @@ css: |
|
||||
div#content span.limegreen {
|
||||
color: #32cd32;
|
||||
}
|
||||
header nav a#logo span#name {
|
||||
header nav a#header-logo span#header-name {
|
||||
font-size: 1.5em;
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
header nav ul li a span.text {
|
||||
font-size: 1.05em;
|
||||
line-height: 1.05;
|
||||
header nav ul li a span.header-menu-text {
|
||||
font-size: 1.1em;
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
footer div#copyright, footer div#poweredby {
|
||||
footer div.footer-row div {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
---
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{{ define "main" }}
|
||||
<div class="layout layout-etc">
|
||||
<h1><a class="no-underline" href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
|
||||
<h1><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
|
||||
|
||||
<div id="content">
|
||||
{{ .Content }}
|
||||
|
||||
@@ -2,14 +2,14 @@
|
||||
<div class="layout layout-list">
|
||||
{{- with .Pages }}
|
||||
{{- range .GroupByDate "2006" }}
|
||||
<section class="year">
|
||||
<section class="list-section-year">
|
||||
<h2>{{ .Key }}</h2>
|
||||
<ul>
|
||||
{{- with .Pages }}
|
||||
{{- range . }}
|
||||
<li>
|
||||
<div class="date">{{ .Date.Format "Jan 2" }}</div>
|
||||
<div class="title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></div>
|
||||
<div class="list-item-date">{{ .Date.Format "Jan 2" }}</div>
|
||||
<div class="list-item-title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></div>
|
||||
</li>
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{{ define "main" }}
|
||||
<div class="layout layout-projects">
|
||||
<h1><a class="no-underline" href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
|
||||
<h1><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
|
||||
|
||||
<div id="content">
|
||||
<div id="loading-spinner" class="loading"><div></div><div></div><div></div></div>
|
||||
|
||||
@@ -3,29 +3,39 @@
|
||||
<article>
|
||||
<div id="meta">
|
||||
<div id="meta-date">
|
||||
<a class="no-underline" href="{{ .Permalink }}" title="{{ .Date.Format "Mon, Jan 2 2006 3:04:05 PM MST" }}">📅 {{ .Date.Format "January 2, 2006" }}</a>
|
||||
<a href="{{ .Permalink }}" title="{{ .Date.Format "Mon, Jan 2 2006 3:04:05 PM MST" }}">
|
||||
<span class="meta-icon">📅</span>
|
||||
<span>{{ .Date.Format "January 2, 2006" }}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{{ with .Params.tags }}
|
||||
<div id="meta-tags">
|
||||
🏷️ {{ range first 5 . }}<span>{{ . }}</span> {{ end }}
|
||||
<span class="meta-icon">🏷️</span>
|
||||
{{ range first 5 . }}
|
||||
<span class="meta-tag">{{ . }}</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ with .Scratch.Get "sourceURL" }}
|
||||
<div id="meta-edit">
|
||||
<a class="no-underline" href="{{ . | safeURL }}" title="Edit this post on GitHub" target="_blank" rel="noopener">✏️ Improve This Post</a>
|
||||
<a href="{{ . | safeURL }}" title="Edit this post on GitHub" target="_blank" rel="noopener">
|
||||
<span class="meta-icon">✏️</span>
|
||||
<span>Improve This Post</span>
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ if eq hugo.Environment "production" }}
|
||||
<div id="meta-hits" style="display: none;">
|
||||
👀 <div id="hit-spinner" class="loading"><div></div><div></div><div></div></div><span id="hit-counter"></span>
|
||||
<span class="meta-icon">👀</span>
|
||||
<div id="meta-hits-loading" class="loading"><div></div><div></div><div></div></div><span id="meta-hits-counter"></span>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<h1 class="title"><a class="no-underline" href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
|
||||
<h1 class="title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
|
||||
|
||||
<div id="content">
|
||||
{{ .Content }}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{{ define "main" }}
|
||||
<div class="layout layout-video">
|
||||
<h1><a class="no-underline" href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
|
||||
<h1><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
|
||||
|
||||
<video
|
||||
{{ with .Resources.GetMatch "thumb.*" }}poster="{{ .Permalink }}"{{ end }}
|
||||
@@ -14,6 +14,8 @@
|
||||
<p>Your browser doesn't support HTML5 video. {{ with .Resources.GetMatch "*.mp4" }}<a href="{{ .Permalink }}">Click here to view the raw .mp4 video.</a>{{ end }}</p>
|
||||
</video>
|
||||
|
||||
{{ .Content }}
|
||||
<div id="content">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<footer>
|
||||
<div class="row">
|
||||
<div id="copyright">Content <a class="no-underline" href="{{ "license/" | absURL }}"{{ with .Site.Params.license.nameLong }} title="{{ . }}"{{ end }}>licensed under {{ .Site.Params.license.name }}</a>, {{ with .Site.Params.license.copyrightFirstYear }}<a class="no-underline" href="{{ "previously/" | absURL }}" title="Previously on...">{{ . }} –</a>{{ end }} {{ now.Format "2006" }}.</div>
|
||||
<div id="poweredby">Made with <span class="beat">❤️</span> and <a class="no-underline" href="https://gohugo.io/" title="Powered by Hugo" id="hugo" target="_blank" rel="noopener">Hugo</a>. {{ with .Scratch.Get "sourceURL" }}<a class="no-underline" href="{{ . | safeURL }}" title="View Source on GitHub" id="source" target="_blank" rel="noopener">View source.</a>{{ end }}</div>
|
||||
<div class="footer-row">
|
||||
<div id="footer-copyright">Content <a href="{{ "license/" | absURL }}"{{ with .Site.Params.license.nameLong }} title="{{ . }}"{{ end }}>licensed under {{ .Site.Params.license.name }}</a>, {{ with .Site.Params.license.copyrightFirstYear }}<a href="{{ "previously/" | absURL }}" title="Previously on...">{{ . }} –</a>{{ end }} {{ now.Format "2006" }}.</div>
|
||||
<div id="footer-powered-by">Made with <span class="beat">❤️</span> and <a href="https://gohugo.io/" title="Powered by Hugo" target="_blank" rel="noopener">Hugo</a>. {{ with .Scratch.Get "sourceURL" }}<a href="{{ . | safeURL }}" title="View Source on GitHub" id="footer-view-source" target="_blank" rel="noopener">View source.</a>{{ end }}</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -1,17 +1,24 @@
|
||||
<header>
|
||||
<nav>
|
||||
<a class="no-underline" href="{{ .Site.BaseURL }}" id="logo" rel="me author" aria-label="{{ .Site.Title }}">
|
||||
<a href="{{ .Site.BaseURL }}" id="header-logo" rel="me author" aria-label="{{ .Site.Title }}">
|
||||
{{ with partial "functions/webpack" (dict "context" . "src" "images/tiny-selfie.jpg") }}
|
||||
<img id="selfie" src="{{ .src }}" width="54" height="54" alt="Photo of Jake Jarvis">
|
||||
<img id="header-selfie" src="{{ .src }}" width="54" height="54" alt="Photo of Jake Jarvis">
|
||||
{{ end }}
|
||||
|
||||
<span id="name">{{ .Site.Title }}</span>
|
||||
<span id="header-name">{{ .Site.Title }}</span>
|
||||
</a>
|
||||
<ul>
|
||||
<ul id="header-menu">
|
||||
{{- range .Site.Menus.main }}
|
||||
<li><a class="no-underline" {{ printf "href=%q" .URL | safeHTMLAttr }} aria-label="{{ .Name }}"{{ if strings.HasPrefix .URL "http" }} target="_blank" rel="me noopener"{{ end }}><span class="icon">{{ .Pre }}</span><span class="text">{{ .Name }}</span></a></li>
|
||||
<li>
|
||||
<a class="header-menu-item" {{ printf "href=%q" .URL | safeHTMLAttr }} aria-label="{{ .Name }}"{{ if strings.HasPrefix .URL "http" }} target="_blank" rel="me noopener"{{ end }}>
|
||||
<span class="header-menu-icon">{{ .Pre }}</span>
|
||||
<span class="header-menu-text">{{ .Name }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{{- end }}
|
||||
<li><button class="dark-mode-toggle" title="Toggle Dark Mode" aria-label="Toggle Dark Mode" style="display: none;"></button></li>
|
||||
<li>
|
||||
<button class="dark-mode-toggle" title="Toggle Dark Mode" aria-label="Toggle Dark Mode" style="display: none;"></button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
@@ -14,7 +14,6 @@
|
||||
"url": "https://github.com/jakejarvis/jarv.is.git"
|
||||
},
|
||||
"type": "module",
|
||||
"exports": "./assets/js/index.js",
|
||||
"main": "./assets/js/index.js",
|
||||
"scripts": {
|
||||
"build": "gulp",
|
||||
@@ -110,7 +109,7 @@
|
||||
"stylelint-scss": "~3.21.0",
|
||||
"terser": "^5.9.0",
|
||||
"terser-webpack-plugin": "^5.2.4",
|
||||
"webpack": "^5.54.0",
|
||||
"webpack": "^5.55.1",
|
||||
"webpack-assets-manifest": "^5.0.6",
|
||||
"webpack-cli": "^4.8.0",
|
||||
"webpack-dev-server": "^4.3.0"
|
||||
|
||||
26
yarn.lock
26
yarn.lock
@@ -3470,9 +3470,9 @@ ee-first@1.1.1:
|
||||
integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
|
||||
|
||||
electron-to-chromium@^1.3.846:
|
||||
version "1.3.851"
|
||||
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.851.tgz#457846fce94d5de25511570435a94f1a622203ac"
|
||||
integrity sha512-Ak970eGtRSoHTaJkoDjdkeXYetbwm5Bl9pN/nPOQ3QzLfw1EWRjReOlWUra6o58SVgxfpwOT9U2P1BUXoJ57dw==
|
||||
version "1.3.853"
|
||||
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.853.tgz#f3ed1d31f092cb3a17af188bca6c6a3ec91c3e82"
|
||||
integrity sha512-W4U8n+U8I5/SUaFcqZgbKRmYZwcyEIQVBDf+j5QQK6xChjXnQD+wj248eGR9X4u+dDmDR//8vIfbu4PrdBBIoQ==
|
||||
|
||||
emoji-regex@^8.0.0:
|
||||
version "8.0.0"
|
||||
@@ -3539,9 +3539,9 @@ error-ex@^1.2.0, error-ex@^1.3.1:
|
||||
is-arrayish "^0.2.1"
|
||||
|
||||
es-abstract@^1.18.0-next.1, es-abstract@^1.18.0-next.2, es-abstract@^1.18.2:
|
||||
version "1.18.6"
|
||||
resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.6.tgz#2c44e3ea7a6255039164d26559777a6d978cb456"
|
||||
integrity sha512-kAeIT4cku5eNLNuUKhlmtuk1/TRZvQoYccn6TO0cSVdf1kzB0T7+dYuVK9MWM7l+/53W2Q8M7N2c6MQvhXFcUQ==
|
||||
version "1.18.7"
|
||||
resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.7.tgz#122daaa523d0a10b0f1be8ed4ce1ee68330c5bb2"
|
||||
integrity sha512-uFG1gyVX91tZIiDWNmPsL8XNpiCk/6tkB7MZphoSJflS4w+KgWyQ2gjCVDnsPxFAo9WjRXG3eqONNYdfbJjAtw==
|
||||
dependencies:
|
||||
call-bind "^1.0.2"
|
||||
es-to-primitive "^1.2.1"
|
||||
@@ -6880,9 +6880,9 @@ nanocolors@^0.1.12, nanocolors@^0.1.5:
|
||||
integrity sha512-2nMHqg1x5PU+unxX7PGY7AuYxl2qDx7PSrTRjizr8sxdd3l/3hBuWWaki62qmtYm2U5i4Z5E7GbjlyDFhs9/EQ==
|
||||
|
||||
nanocolors@^0.2.2, nanocolors@^0.2.6, nanocolors@^0.2.8:
|
||||
version "0.2.11"
|
||||
resolved "https://registry.yarnpkg.com/nanocolors/-/nanocolors-0.2.11.tgz#f2573e6872f1b70067423fc68bbc9d0de2f3bbee"
|
||||
integrity sha512-83ttyvfJj66dKMadWfBkEUOEDFfRc8FpzTJvh1MySR/pzWFmFikTQZGOV6kHZRz7yR/heiQ1y/MHBBN5P/e7WQ==
|
||||
version "0.2.12"
|
||||
resolved "https://registry.yarnpkg.com/nanocolors/-/nanocolors-0.2.12.tgz#4d05932e70116078673ea4cc6699a1c56cc77777"
|
||||
integrity sha512-SFNdALvzW+rVlzqexid6epYdt8H9Zol7xDoQarioEFcFN0JHo4CYNztAxmtfgGTVRCmFlEOqqhBpoFGKqSAMug==
|
||||
|
||||
nanoid@^3.1.25:
|
||||
version "3.1.28"
|
||||
@@ -10413,10 +10413,10 @@ webpack-sources@^3.2.0:
|
||||
resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.1.tgz#251a7d9720d75ada1469ca07dbb62f3641a05b6d"
|
||||
integrity sha512-t6BMVLQ0AkjBOoRTZgqrWm7xbXMBzD+XDq2EZ96+vMfn3qKgsvdXZhbPZ4ElUOpdv4u+iiGe+w3+J75iy/bYGA==
|
||||
|
||||
webpack@^5.54.0:
|
||||
version "5.54.0"
|
||||
resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.54.0.tgz#629f0cd14c7a4340af758a3c7cef25c50670ae4d"
|
||||
integrity sha512-MAVKJMsIUotOQKzFOmN8ZkmMlj7BOyjDU6t1lomW9dWOme5WTStzGa3HMLdV1KYD1AiFETGsznL4LMSvj4tukw==
|
||||
webpack@^5.55.1:
|
||||
version "5.55.1"
|
||||
resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.55.1.tgz#426ebe54c15fa57f7b242590f65fd182382b5998"
|
||||
integrity sha512-EYp9lwaOOAs+AA/KviNZ7bQiITHm4bXQvyTPewD2+f5YGjv6sfiClm40yeX5FgBMxh5bxcB6LryiFoP09B97Ug==
|
||||
dependencies:
|
||||
"@types/eslint-scope" "^3.7.0"
|
||||
"@types/estree" "^0.0.50"
|
||||
|
||||
Reference in New Issue
Block a user