Theme refresh
This commit is contained in:
parent
5c8c034af8
commit
f4c865548d
GPG Key ID:
AD739154F713697B
|
|
@ -1,35 +1,48 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,700&display=swap&subset=latin-ext');
|
||||
@import "./nord.scss";
|
||||
@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');
|
||||
|
||||
$h1_font_size: 1.6rem;
|
||||
$h2_font_size: 1.2rem;
|
||||
$font_size: 0.96rem;
|
||||
$line-height: 1.5rem;
|
||||
$h1_font_size: 2.4rem;
|
||||
$h2_font_size: 2rem;
|
||||
$header_size: 1.4rem;
|
||||
$font_size: 1.1rem;
|
||||
$code_font_size: 0.96rem;
|
||||
$code_line_height: 1.4rem;
|
||||
$line-height: 1.6rem;
|
||||
|
||||
$backdrop: darken($nord0, 10%);
|
||||
$background: darken($nord0, 10%);
|
||||
$text: $nord5;
|
||||
$links: lighten($nord10, 17%);
|
||||
$footer: $nord5;
|
||||
$background: #FBFBF2;
|
||||
$backdrop: $background;
|
||||
$text: #272932;
|
||||
$links: #0081AF;
|
||||
$footer: $text;
|
||||
$meta: $text;
|
||||
$header: $nord10;
|
||||
$highlight: darken($nord14, 25%);
|
||||
$header: $text;
|
||||
$highlight: $links;
|
||||
$code_background: #fff;
|
||||
$code_border_color: #9A8873;
|
||||
$code: #A4508B;
|
||||
|
||||
html, body {
|
||||
background-color: $backdrop;
|
||||
color: $text;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-family: 'PT Serif', serif;
|
||||
font-size: $font_size;
|
||||
line-height: $line-height;
|
||||
}
|
||||
|
||||
code, pre {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
}
|
||||
|
||||
.important {
|
||||
background-color: $highlight;
|
||||
color: $background;
|
||||
width: 100%;
|
||||
display: block;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.important::before {
|
||||
content: '\f0a4';
|
||||
font-family: "Font Awesome 6 Free";
|
||||
font-size: 1rem;
|
||||
margin-right: 0.7rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
|
@ -48,38 +61,21 @@ nav a {
|
|||
}
|
||||
|
||||
h1, h2, h3, h4, h5 {
|
||||
font-size: $font_size;
|
||||
font-family: 'Rubik', sans-serif;
|
||||
font-size: $header_size;
|
||||
font-weight: bold;
|
||||
color: $header;
|
||||
margin: 0.67rem 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: $h1_font_size;
|
||||
color: $text;
|
||||
&::before {
|
||||
content: "# ";
|
||||
}
|
||||
margin-bottom: 1.6rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: $h2_font_size;
|
||||
&::before {
|
||||
content: "## "
|
||||
}
|
||||
}
|
||||
|
||||
h3::before {
|
||||
content: "### "
|
||||
}
|
||||
|
||||
h4::before {
|
||||
content: "#### "
|
||||
}
|
||||
|
||||
h5::before {
|
||||
content: "##### "
|
||||
}
|
||||
|
||||
b,
|
||||
|
|
@ -87,8 +83,9 @@ strong {
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
blockquote *::before {
|
||||
content: "> ";
|
||||
blockquote {
|
||||
border-left: 5px solid $code_border_color;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
@ -100,24 +97,31 @@ ol {
|
|||
}
|
||||
|
||||
ul {
|
||||
list-style-type: "* ";
|
||||
list-style-position: outside;
|
||||
}
|
||||
|
||||
span.begin-task-list + ul {
|
||||
list-style-type: none;
|
||||
padding-left: 20px;
|
||||
padding-left: 1rem;
|
||||
|
||||
input[type="checkbox"] {
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
color: $footer;
|
||||
border-top: 2px dashed $footer;
|
||||
border-top: 1px solid $footer;
|
||||
margin-top: 1.5rem;
|
||||
|
||||
em {
|
||||
|
|
@ -159,28 +150,15 @@ small {
|
|||
font-weight: normal;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 2px dashed $footer;
|
||||
}
|
||||
|
||||
code {
|
||||
color: $nord14;
|
||||
color: $code;
|
||||
}
|
||||
|
||||
code::before,
|
||||
code::after {
|
||||
content: "`";
|
||||
}
|
||||
|
||||
pre > code::before,
|
||||
pre > code::after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
pre, code {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: $font_size;
|
||||
font-size: $code_font_size;
|
||||
line-height: $code_line_height;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
|
|
@ -191,29 +169,16 @@ pre > code {
|
|||
}
|
||||
|
||||
pre {
|
||||
background-color: $background !important;
|
||||
margin-left: 2.5rem;
|
||||
background-color: $code_background !important;
|
||||
padding: 1rem 1rem 1rem 2.5rem;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
line-height: $line-height;
|
||||
border: 2px solid $code_border_color;
|
||||
}
|
||||
|
||||
pre::before {
|
||||
display: block;
|
||||
content: "```";
|
||||
color: $footer;
|
||||
}
|
||||
pre::after {
|
||||
display: block;
|
||||
content: "```";
|
||||
color: $footer;
|
||||
}
|
||||
|
||||
table td::before,
|
||||
table th::before {
|
||||
content: " | ";
|
||||
color: $footer;
|
||||
font-weight: normal;
|
||||
table td, table th {
|
||||
padding: 0.2rem 1rem;
|
||||
}
|
||||
|
||||
.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://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://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/regular.min.css" />
|
||||
{{ if .Site.IsServer }}
|
||||
{{ $cssOpts := (dict "targetPath" "css/devroom.css" "enableSourceMap" true ) }}
|
||||
{{ $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>
|
||||
<p>{{ .Site.Copyright | safeHTML }}</p>
|
||||
<p>{{ .Site.Params.footerquote | safeHTML }}</p>
|
||||
<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>
|
||||
|
||||
<!-- Fathom - simple website analytics - https://github.com/usefathom/fathom -->
|
||||
|
|
|
|||
|
|
@ -3,22 +3,20 @@
|
|||
<article>
|
||||
<h1>{{ .Title }}</h1>
|
||||
<div class="meta">
|
||||
| Posted: <time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
|
||||
{{ .Date.Format (.Site.Params.dateFormat | default "2006-01-02" ) }}
|
||||
</time>
|
||||
|
||||
| ~{{ .FuzzyWordCount }}wrds
|
||||
(~{{ .ReadingTime }}min)
|
||||
Posted: <time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
|
||||
{{ .Date.Format (.Site.Params.dateFormat | default "2006-01-02" ) }}</time>
|
||||
~{{ .FuzzyWordCount }} words
|
||||
~{{ .ReadingTime }} min
|
||||
|
||||
{{ 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" ) }}
|
||||
</time>
|
||||
{{ end }}
|
||||
|
||||
<br />
|
||||
|
||||
| Tagged
|
||||
Tagged
|
||||
{{ with .Page.Params.Tags }}{{ partial "taxonomy/tags.html" . }}{{ end }}
|
||||
</div>
|
||||
{{ .Content }}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user