Theme refresh
This commit is contained in:
parent
5c8c034af8
commit
f4c865548d
|
@ -1,35 +1,48 @@
|
||||||
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,700&display=swap&subset=latin-ext');
|
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Rubik:wght@400;700&display=swap');
|
||||||
@import "./nord.scss";
|
|
||||||
|
|
||||||
$h1_font_size: 1.6rem;
|
$h1_font_size: 2.4rem;
|
||||||
$h2_font_size: 1.2rem;
|
$h2_font_size: 2rem;
|
||||||
$font_size: 0.96rem;
|
$header_size: 1.4rem;
|
||||||
$line-height: 1.5rem;
|
$font_size: 1.1rem;
|
||||||
|
$code_font_size: 0.96rem;
|
||||||
|
$code_line_height: 1.4rem;
|
||||||
|
$line-height: 1.6rem;
|
||||||
|
|
||||||
$backdrop: darken($nord0, 10%);
|
$background: #FBFBF2;
|
||||||
$background: darken($nord0, 10%);
|
$backdrop: $background;
|
||||||
$text: $nord5;
|
$text: #272932;
|
||||||
$links: lighten($nord10, 17%);
|
$links: #0081AF;
|
||||||
$footer: $nord5;
|
$footer: $text;
|
||||||
$meta: $text;
|
$meta: $text;
|
||||||
$header: $nord10;
|
$header: $text;
|
||||||
$highlight: darken($nord14, 25%);
|
$highlight: $links;
|
||||||
|
$code_background: #fff;
|
||||||
|
$code_border_color: #9A8873;
|
||||||
|
$code: #A4508B;
|
||||||
|
|
||||||
html, body {
|
html, body {
|
||||||
background-color: $backdrop;
|
background-color: $backdrop;
|
||||||
color: $text;
|
color: $text;
|
||||||
font-family: 'IBM Plex Mono', monospace;
|
font-family: 'PT Serif', serif;
|
||||||
font-size: $font_size;
|
font-size: $font_size;
|
||||||
line-height: $line-height;
|
line-height: $line-height;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
code, pre {
|
||||||
|
font-family: 'IBM Plex Mono', monospace;
|
||||||
|
}
|
||||||
|
|
||||||
.important {
|
.important {
|
||||||
background-color: $highlight;
|
|
||||||
color: $background;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
padding: 1rem;
|
font-style: italic;
|
||||||
text-align: center;
|
}
|
||||||
|
|
||||||
|
.important::before {
|
||||||
|
content: '\f0a4';
|
||||||
|
font-family: "Font Awesome 6 Free";
|
||||||
|
font-size: 1rem;
|
||||||
|
margin-right: 0.7rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
|
@ -48,38 +61,21 @@ nav a {
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4, h5 {
|
h1, h2, h3, h4, h5 {
|
||||||
font-size: $font_size;
|
font-family: 'Rubik', sans-serif;
|
||||||
|
font-size: $header_size;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $header;
|
color: $header;
|
||||||
margin: 0.67rem 0;
|
margin: 0.67rem 0;
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: $h1_font_size;
|
font-size: $h1_font_size;
|
||||||
color: $text;
|
color: $text;
|
||||||
&::before {
|
margin-bottom: 1.6rem;
|
||||||
content: "# ";
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-size: $h2_font_size;
|
font-size: $h2_font_size;
|
||||||
&::before {
|
|
||||||
content: "## "
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h3::before {
|
|
||||||
content: "### "
|
|
||||||
}
|
|
||||||
|
|
||||||
h4::before {
|
|
||||||
content: "#### "
|
|
||||||
}
|
|
||||||
|
|
||||||
h5::before {
|
|
||||||
content: "##### "
|
|
||||||
}
|
}
|
||||||
|
|
||||||
b,
|
b,
|
||||||
|
@ -87,8 +83,9 @@ strong {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
blockquote *::before {
|
blockquote {
|
||||||
content: "> ";
|
border-left: 5px solid $code_border_color;
|
||||||
|
padding-left: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
|
@ -100,24 +97,31 @@ ol {
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
list-style-type: "* ";
|
|
||||||
list-style-position: outside;
|
list-style-position: outside;
|
||||||
}
|
}
|
||||||
|
|
||||||
span.begin-task-list + ul {
|
span.begin-task-list + ul {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
padding-left: 20px;
|
padding-left: 1rem;
|
||||||
|
|
||||||
input[type="checkbox"] {
|
input[type="checkbox"] {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="checkbox"]::before {
|
input[type="checkbox"]::before {
|
||||||
content: "[ ]";
|
content: '\f111';
|
||||||
|
font-family: "Font Awesome 6 Free";
|
||||||
|
font-size: 1rem;
|
||||||
|
color: rgba($links, 0.3);
|
||||||
|
margin-right: 0.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="checkbox"]:checked::before {
|
input[type="checkbox"]:checked::before {
|
||||||
content: "[✓]";
|
content: '\f058';
|
||||||
|
font-family: "Font Awesome 6 Free";
|
||||||
|
font-size: 1rem;
|
||||||
|
color: $links;
|
||||||
|
margin-right: 0.4rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -125,22 +129,9 @@ header {
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.privacy-notice {
|
|
||||||
border-top: 2px dashed $footer;
|
|
||||||
margin-top: 1.5rem;
|
|
||||||
|
|
||||||
.buymeacoffee {
|
|
||||||
background-color: #FF6C11;
|
|
||||||
color: #fff;
|
|
||||||
text-decoration: none;
|
|
||||||
padding-left: 0.4rem;
|
|
||||||
padding-right: 0.4rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
color: $footer;
|
color: $footer;
|
||||||
border-top: 2px dashed $footer;
|
border-top: 1px solid $footer;
|
||||||
margin-top: 1.5rem;
|
margin-top: 1.5rem;
|
||||||
|
|
||||||
em {
|
em {
|
||||||
|
@ -159,28 +150,15 @@ small {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
hr {
|
|
||||||
border: none;
|
|
||||||
border-top: 2px dashed $footer;
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
code {
|
||||||
color: $nord14;
|
color: $code;
|
||||||
}
|
}
|
||||||
|
|
||||||
code::before,
|
|
||||||
code::after {
|
|
||||||
content: "`";
|
|
||||||
}
|
|
||||||
|
|
||||||
pre > code::before,
|
|
||||||
pre > code::after {
|
|
||||||
content: "";
|
|
||||||
}
|
|
||||||
|
|
||||||
pre, code {
|
pre, code {
|
||||||
font-family: 'IBM Plex Mono', monospace;
|
font-family: 'IBM Plex Mono', monospace;
|
||||||
font-size: $font_size;
|
font-size: $code_font_size;
|
||||||
|
line-height: $code_line_height;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre > code {
|
pre > code {
|
||||||
|
@ -191,29 +169,16 @@ pre > code {
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
background-color: $background !important;
|
background-color: $code_background !important;
|
||||||
margin-left: 2.5rem;
|
padding: 1rem 1rem 1rem 2.5rem;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
line-height: $line-height;
|
line-height: $line-height;
|
||||||
|
border: 2px solid $code_border_color;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre::before {
|
table td, table th {
|
||||||
display: block;
|
padding: 0.2rem 1rem;
|
||||||
content: "```";
|
|
||||||
color: $footer;
|
|
||||||
}
|
|
||||||
pre::after {
|
|
||||||
display: block;
|
|
||||||
content: "```";
|
|
||||||
color: $footer;
|
|
||||||
}
|
|
||||||
|
|
||||||
table td::before,
|
|
||||||
table th::before {
|
|
||||||
content: " | ";
|
|
||||||
color: $footer;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-columns {
|
.flex-columns {
|
||||||
|
|
|
@ -15,6 +15,7 @@
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU=" crossorigin="anonymous" />
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU=" crossorigin="anonymous" />
|
||||||
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/buttons-min.css" crossorigin="anonymous" />
|
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/buttons-min.css" crossorigin="anonymous" />
|
||||||
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/forms-min.css" crossorigin="anonymous" />
|
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/forms-min.css" crossorigin="anonymous" />
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/regular.min.css" />
|
||||||
{{ if .Site.IsServer }}
|
{{ if .Site.IsServer }}
|
||||||
{{ $cssOpts := (dict "targetPath" "css/devroom.css" "enableSourceMap" true ) }}
|
{{ $cssOpts := (dict "targetPath" "css/devroom.css" "enableSourceMap" true ) }}
|
||||||
{{ $styles := resources.Get "scss/devroom.scss" | resources.ExecuteAsTemplate "style.devroom.css" . | toCSS $cssOpts }}
|
{{ $styles := resources.Get "scss/devroom.scss" | resources.ExecuteAsTemplate "style.devroom.css" . | toCSS $cssOpts }}
|
||||||
|
|
|
@ -1,17 +1,11 @@
|
||||||
<section class="privacy-notice">
|
|
||||||
<p>
|
|
||||||
My site is free of ads and trackers. I record privacy-respecting usage statistics with
|
|
||||||
<a href="https://usefathom.com/">Fathom</a>.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>Was this post helpful to you? Why not
|
|
||||||
<a class="buymeacoffee" target="_blank" href="https://www.buymeacoffee.com/ariejan">☕ Buy me a coffee</a>.
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<p>{{ .Site.Copyright | safeHTML }}</p>
|
<p>
|
||||||
<p>{{ .Site.Params.footerquote | safeHTML }}</p>
|
{{ .Site.Copyright | safeHTML }}
|
||||||
|
<br />
|
||||||
|
This site is free of ads. Statistics are tracked respecting your privacy with <a href="https://usefathom.com/">Fathom</a>.
|
||||||
|
<br />
|
||||||
|
Was this post helpful to you? Why not <a class="buymeacoffee" target="_blank" href="https://www.buymeacoffee.com/ariejan">☕ Buy me a coffee</a>
|
||||||
|
</p>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<!-- Fathom - simple website analytics - https://github.com/usefathom/fathom -->
|
<!-- Fathom - simple website analytics - https://github.com/usefathom/fathom -->
|
||||||
|
|
|
@ -3,22 +3,20 @@
|
||||||
<article>
|
<article>
|
||||||
<h1>{{ .Title }}</h1>
|
<h1>{{ .Title }}</h1>
|
||||||
<div class="meta">
|
<div class="meta">
|
||||||
| Posted: <time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
|
Posted: <time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
|
||||||
{{ .Date.Format (.Site.Params.dateFormat | default "2006-01-02" ) }}
|
{{ .Date.Format (.Site.Params.dateFormat | default "2006-01-02" ) }}</time>
|
||||||
</time>
|
~{{ .FuzzyWordCount }} words
|
||||||
|
~{{ .ReadingTime }} min
|
||||||
| ~{{ .FuzzyWordCount }}wrds
|
|
||||||
(~{{ .ReadingTime }}min)
|
|
||||||
|
|
||||||
{{ if not (eq $lastmod $date) }}
|
{{ if not (eq $lastmod $date) }}
|
||||||
| Last updated: <time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
|
Last updated: <time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
|
||||||
{{ .Lastmod.Format (.Site.Params.dateFormat | default "2006-01-02" ) }}
|
{{ .Lastmod.Format (.Site.Params.dateFormat | default "2006-01-02" ) }}
|
||||||
</time>
|
</time>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
| Tagged
|
Tagged
|
||||||
{{ with .Page.Params.Tags }}{{ partial "taxonomy/tags.html" . }}{{ end }}
|
{{ with .Page.Params.Tags }}{{ partial "taxonomy/tags.html" . }}{{ end }}
|
||||||
</div>
|
</div>
|
||||||
{{ .Content }}
|
{{ .Content }}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user