mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2026-10-16 14:35:43 -04:00
majorly refactor SCSS and pray nothing breaks
This commit is contained in:
22 files changed
+289
-244
No files matched your search
@@ -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";
|
||||
}
|
||||
|
||||
+47
-41
@@ -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;
|
||||
|
||||
Reference in new issue
Block a user