simplified everything, partially half the size loaded, despite the unified css file :); added colour scheme support; added blogroll and about pages

This commit is contained in:
Vrifox 2021-03-05 19:35:05 +01:00
parent 8c242b4aa5
commit e753ca3e90
Signed by: vrifox
GPG key ID: D40098E5B60B2197
20 changed files with 194 additions and 734 deletions

View file

@ -1,9 +0,0 @@
@import '../import/colors.scss';
@import '../import/main.scss';
@import '../import/nav.scss';
@import '../import/footer.scss';
@import '../import/include.scss';
main {
@include posts;
}

View file

@ -1,108 +0,0 @@
@import '../import/colors.scss';
@import '../import/syntax.scss';
@import '../import/main.scss';
@import '../import/nav.scss';
@import '../import/footer.scss';
@import '../import/include.scss';
.section-article {
article {
margin: 0 auto;
max-width: 720px;
.meta {
color: $white-dark;
}
.title {
font-size: 2em;
margin-top: 20px;
}
img {
border-radius: 5px;
box-shadow: 0 0 40px 10px rgb(30, 30, 45);
margin-bottom: 15px;
width: 100%;
}
@include a-underlined;
h2 {
font-size: .6em;
}
aside {
margin-top: 80px;
.tags {
display: flex;
list-style: none;
margin-left: -15px;
padding: 0;
li {
a {
background: $bg60;
border: 0;
border-radius: 5px;
color: $white-dark;
margin-left: 15px;
padding: 10px;
&:hover {
background: $bg50;
color: $white-light;
}
}
}
}
}
}
}
.section-articles {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 1rem;
margin: 20px auto 0 auto;
max-width: 720px;
white-space: nowrap;
&::after {
background: $bg50;
content: '';
height: 200px;
left: 0;
position: absolute;
width: 100vw;
z-index: -10;
}
article {
display: flex;
flex-flow: column;
height: max-content;
margin: 20px 0;
a {
border-bottom: 1px solid transparent;
color: $white-dark;
transition: border .2s, color .2s;
&:hover {
border-bottom: 1px solid;
color: $red;
text-decoration: none;
}
}
}
.next-article {
margin-right: auto;
}
.previous-article {
margin-left: auto;
}
}
@media (max-width: 400px) {
.section-articles {
grid-template-columns: repeat(1, 1fr);
&::after {
height: 250px;
}
.next-article {
margin: 20px auto 0 auto;
}
.previous-article {
margin: 0 auto;
}
}
}

View file

@ -1,13 +0,0 @@
@import 'import/colors.scss';
@import 'import/main.scss';
@import 'import/nav.scss';
@import 'import/footer.scss';
@import 'import/include.scss';
header {
margin: 150px 0;
text-align: center;
h2 {
font-size: 2em;
}
}

View file

@ -1,17 +0,0 @@
$green: rgb(100, 200, 130);
$green-dark: rgb(80, 180, 110);
$green-light: rgb(100, 220, 150);
$red: rgb(255, 130, 130);
$red-dark: rgb(235, 110, 110);
$red-light: rgb(255, 150, 150);
$white: rgb(245, 245, 255);
$white-dark: rgb(215, 215, 225);
$white-light: rgb(255, 255, 255);
$white-disabled: rgb(150, 150, 160);
$bg30: rgb(30, 30, 45);
$bg40: rgb(40, 40, 60);
$bg50: rgb(50, 50, 75);
$bg60: rgb(60, 60, 90);
$bg70: rgb(70, 70, 105);
$bg80: rgb(80, 80, 120);

View file

@ -1,60 +0,0 @@
footer {
background: $bg30;
color: $white-dark;
margin-top: 100px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
&::after {
background: $bg30;
content: '';
height: 10000px;
overflow: hidden;
position: fixed;
width: 100vw;
}
.container {
align-items: center;
display: flex;
height: 64px;
.website-subnav {
margin-left: auto;
ul {
display: flex;
list-style-type: none;
padding: 0;
li {
margin-left: 30px;
a {
border-bottom: 1px solid transparent;
color: $white-dark;
padding: 5px 0;
transition: border .2s, color .2s;
&:hover {
border-bottom: 1px solid;
color: $red;
text-decoration: none;
}
}
}
}
}
}
}
@media (max-width: 600px) {
footer {
.container {
max-width: none;
.website-version {
order: 2;
padding: 10px 20px;
}
.website-subnav {
li {
padding: 4px 30px 4px 0;
}
}
}
}
}

View file

@ -1,70 +0,0 @@
@mixin a-underlined {
a {
border-bottom: 1px solid;
color: $white;
margin: -2px 0;
padding: 2px 0;
transition: border .2s, color .2s;
&:hover {
color: $red;
text-decoration: none;
}
}
}
@mixin posts {
.section.posts {
.inner {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(2, 1fr);
margin: 40px 0;
a {
color: $white-light;
text-decoration: none;
}
article {
background: $bg60;
border-radius: 5px;
color: $white;
display: flex;
flex-flow: column;
height: 100%;
padding: 20px 40px;
transition: background .2s;
&:hover {
background: $bg50;
}
h2 {
color: $white;
display: flex;
font-size: 18px;
font-weight: 400;
margin: 0 0 10px 0;
min-height: 65px;
text-align: center;
span {
margin: auto;
}
}
p.description {
color: $white-dark;
flex: 1;
font-size: 16px;
margin: 20px 0;
}
p.meta {
color: $white-dark;
font-size: 14px;
margin: 0;
text-align: center;
}
}
}
}
@media (max-width: 900px) {
.section.posts .inner {
grid-template-columns: repeat(1, 1fr);
}
}
}

View file

@ -1,59 +0,0 @@
* {
box-sizing: border-box;
scrollbar-color: $red $bg60;
scrollbar-width: thin;
&::-webkit-scrollbar {
background: $bg60;
width: 6px;
}
&::-webkit-scrollbar-thumb {
background: $red;
}
}
html {
overflow-x: hidden;
overflow-y: scroll;
}
body {
background: $bg40;
color: $white;
display: grid;
font-family: 'Lucida Console', monospace;
line-height: 1.8;
margin: 0;
}
a {
color: $red;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.3em;
}
h3 {
font-size: 1.1em;
}
h4 {
font-size: .9em;
}
hr {
border-color: $bg60;
color: $bg60;
margin: 60px 0;
}
.container {
margin: 0 auto;
max-width: 1140px;
width: calc(100% - 40px);
}
main {
width: 100vw;
margin: 60px 0 0 0;
}

View file

@ -1,28 +0,0 @@
header.main {
align-items: center;
display: flex;
flex-wrap: wrap;
margin: 0 auto;
max-width: 1140px;
min-height: 64px;
width: 100%;
a {
color: $white;
padding: 17.6px 15px;
text-decoration: none;
text-underline-offset: 6px;
margin: 0 15px;
&:hover {
text-decoration: underline;
}
}
h1 {
display: flex;
font-size: 16px;
margin: 0;
}
nav {
display: flex;
flex-wrap: wrap;
}
}

View file

@ -1,7 +0,0 @@
.chroma { // background
background: $bg30;
border-radius: 5px;
color: $white;
padding: 10px;
}

View file

@ -1,134 +0,0 @@
@import 'import/colors.scss';
@import 'import/main.scss';
@import 'import/nav.scss';
@import 'import/footer.scss';
@import 'import/include.scss';
.section.header {
background: $bg60;
@include a-underlined;
header {
margin: 60px auto;
max-width: 600px;
text-align: center;
h2 {
font-size: 2.5em;
margin: auto;
}
}
.section.contact {
background: $bg70;
border-radius: 5px;
display: flex;
padding: 20px;
margin: 60px auto;
max-width: 500px;
.table.contact {
margin: 0 auto;
white-space: nowrap;
tr {
td {
&:first-of-type {
padding: 5px 30px 5px 0;
text-align: right;
}
}
}
}
}
}
main {
.latest {
color: $white-dark;
display: block;
font-size: 1.5em;
text-align: center;
margin: -7px;
a {
color: $white;
font-weight: bold;
transition: border .2s, color .2s;
&:hover {
color: $red;
text-decoration: none;
}
}
}
.section.projects {
.inner {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(4, 1fr);
margin: 40px 0;
a {
color: $white-light;
text-decoration: none;
}
article {
background: $bg60;
border-radius: 5px;
color: $white;
display: flex;
flex-flow: column;
height: 100%;
padding: 20px 40px;
transition: background .2s;
&:hover {
background: $bg50;
}
h2 {
color: $white;
font-size: 18px;
font-weight: 400;
margin: 0;
text-align: center;
}
p.meta {
color: $white-dark;
font-size: 14px;
margin: 0;
text-align: center;
}
}
}
}
@include posts;
}
@media (max-width: 900px) {
main {
.section.projects.inner {
grid-template-columns: repeat(2, 1fr);
}
}
}
@media (max-width: 600px) {
.section.header {
.section.contact {
border-radius: 0;
padding: 10px;
margin: 60px -20px;
max-width: none;
overflow-x: auto;
width: 100vw;
.table.contact {
margin: 0 auto;
white-space: nowrap;
tr {
td {
&:first-of-type {
padding: 5px 20px 5px 0;
}
}
}
}
}
}
main {
.section.projects.inner {
grid-template-columns: repeat(1, 1fr);
}
}
}

112
assets/style.scss Normal file
View file

@ -0,0 +1,112 @@
:root {
--background: rgb(10, 10, 10);
--border: rgb(40, 40, 40);
--text: rgb(255, 255, 255);
--vrifox-red: rgb(255, 130, 130);
}
@media (prefers-color-scheme: light) {
:root {
--background: rgb(255, 255, 255);
--border: rgb(215, 215, 215);
--text: rgb(0, 0, 0);
}
}
* {
box-sizing: border-box;
scrollbar-color: var(--vrifox-red) var(--background);
scrollbar-width: thin;
&::-webkit-scrollbar {
background: var(--background);
width: 6px;
}
&::-webkit-scrollbar-thumb { background: var(--vrifox-red); }
}
html {
overflow-x: hidden;
overflow-y: scroll;
}
body {
background: var(--background);
color: var(--text);
display: grid;
font-family: system-ui, sans-serif;
font-size: 1.2em;
line-height: 1.8;
margin: 0;
}
a {
color: var(--text);
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: var(--vrifox-red);
&:hover { text-decoration: underline; }
}
h1 { font-size: 1.5em; }
h2 { font-size: 1.3em; }
h3 { font-size: 1.1em; }
h4 { font-size: 0.9em; }
hr {
border-color: var(--text);
color: var(--text);
margin: 60px 0;
}
// ------------------------
// - header / nav; footer -
// ------------------------
header, footer {
align-items: center;
display: flex;
flex-wrap: wrap;
margin: 0 auto;
max-width: 1140px;
min-height: 64px;
width: 100%;
a {
color: var(--text);
padding: 17.6px 15px;
text-decoration-color: var(--background);
text-decoration-thickness: 2px !important;
transition: text-decoration-color .2s;
margin: 0 15px;
&:hover { text-decoration-color: var(--vrifox-red); }
&.active { text-decoration-color: var(--text); }
}
}
header {
border-bottom: 1px solid var(--border);
h1 {
display: flex;
font-size: 1em;
margin: 0;
}
nav {
display: flex;
flex-wrap: wrap;
}
}
footer {
border-top: 1px solid var(--border);
color: var(--text);
a { color: var(--text); }
span {
padding: 17.6px 30px;
margin-right: auto;
}
}
// --------
// - main -
// --------
main {
margin: 60px auto;
max-width: 720px;
padding: 30px;
width: 100%;
span { font-size: .8em; }
}

View file

@ -12,16 +12,26 @@ menu:
url: / url: /
weight: 1 weight: 1
main: main:
- identifier: about
name: About
title: about
url: /about/
weight: 1
- identifier: blog - identifier: blog
name: blog name: Blog
title: blog title: blog
url: /blog/ url: /blog/
weight: 1 weight: 2
- identifier: blogroll
name: Blogroll
title: blogroll
url: /blogroll/
weight: 3
- identifier: projects - identifier: projects
name: projects name: Projects
title: projects title: projects
url: /projects/ url: /projects/
weight: 2 weight: 4
externallinks: externallinks:
- identifier: git - identifier: git
name: git name: git

View file

@ -2,13 +2,14 @@
<html lang="en"> <html lang="en">
<head> <head>
<title>{{ with .Title }} {{ . }} {{ end }}{{ .Site.Title }}</title> <title>{{ with .Title }} {{ . }} {{ end }}{{ .Site.Title }}</title>
{{- $style := resources.Get "/style.scss" | resources.ToCSS (dict "outputStyle" "compressed") }}
<link rel="preload stylesheet" as="style" href="{{ $style.Permalink }}" type="text/css" media="screen" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
{{ block "stylesheet" . }}{{ end }}
</head> </head>
<body> <body>
{{ partial "nav.html" . }} {{ partial "nav.html" . }}
{{ block "main" . }}{{ end }} {{- block "main" . }}{{ end }}
{{ partial "footer.html" . }} {{ partial "footer.html" . }}
</body> </body>
</html> </html>

View file

@ -4,32 +4,12 @@
<link rel="preload stylesheet" as="style" href="{{ $style.Permalink }}" type="text/css" media="screen" /> <link rel="preload stylesheet" as="style" href="{{ $style.Permalink }}" type="text/css" media="screen" />
{{- end -}} {{- end -}}
{{- define "main" }} {{- define "main" }}
<main> <main>
<div class="container"> {{- range .Pages }}
<section class="section posts"> <p> <a href="{{ .Permalink }}">{{ .Title }}</a> <span>{{ .Date.Format "2 January 2006" }}</span> </p>
<div class="section posts inner">
{{- range .Pages }}
<a href="{{ .Permalink }}">
<article>
<h2><span>{{ .Title }}</span></h2>
{{ with .Description }}<p class="description">{{ . }}</p>{{ end }}
{{- if eq .Params.type "post" }}
<p class="meta" title="{{ .Date.Format "2 Jan 2006, 15:04 MST" }}">
<span class="date">{{ .Date.Format "2 January 2006" }}</span>
{{- with .Params.author }}<span class="author">by {{ . }}</span>{{ end }}
{{ end }}
{{- if eq .Params.type "project" }}
<p class="meta">
{{ with .Params.activetime }}<span class="date">{{ . }}</span><br />{{ end }}
{{ with .Params.status }}<span class="status">{{ . }}</span>{{ end }}
{{- end }}
</p>
</article>
</a>
{{- end }}
</div>
</section>
</div>
</main>
{{- end }} {{- end }}
</main>
{{- end }}

View file

@ -1,69 +1,26 @@
{{- define "stylesheet" -}} {{- define "main" }}
{{- $scss := resources.Get "/_default/single.scss" -}}
{{- $style := $scss | resources.ToCSS -}}
<link rel="preload stylesheet" as="style" href="{{ $style.Permalink }}" type="text/css" media="screen" />
{{- end -}}
{{- define "main" -}}
<main> <main>
<div class="container"> <h1 class="title">{{ .Title }}</h1>
<section class="section-article"> {{- if eq .Params.type "post" }}
<article> <p title="{{ .Date.Format "2. January 2006, 15:04 MST" }}">{{ .Date.Format "2. January 2006" }}</p>
<p class="meta"> {{- end }}
{{ if eq .Params.type "post" }}<span title="{{ .Date.Format "2. January 2006, 15:04 MST" }}">{{ .Date.Format "2. January 2006" }}</span>{{ end }} {{ .Content -}}
{{- if eq .Params.type "singlepage" }}<span title="{{ .Date.Format "2. January 2006" }}">version: {{ .Date.Format "2006-01-02" }}</span>{{ end }} <aside>
{{- with .Params.author }}<span>by {{ . }}</span>{{ end }} {{- with .Params.topics }}
</p> <ul class="topics">
<h1 class="title">{{ .Title }}</h1> {{- range . }}
{{ with .Params.featured_image }}<img src="{{ . | relURL }}" loading="lazy" alt="">{{ end }} <li>
<a href="{{ "topics" | relURL}}/{{ . | urlize }}">{{ . }}</a>
{{ printf "<!-- content -->" | safeHTML }} </li>
{{ .Content }} {{ end }}
{{- printf "<!-- content END -->" | safeHTML }} </ul>
{{- end }}
<aside class="meta"> {{- with .Params.tags }}
{{- with .Params.topics }} tags
<ul class="topics"> {{- range . }}
{{- range . }} <a href="{{ "tags" | relURL }}/{{ . | urlize }}">{{ . }}</a>
<li>
<a href="{{ "topics" | relURL}}/{{ . | urlize }}">{{ . }}</a>
</li>
{{ end }}
</ul>
{{- end }}
{{- with .Params.tags }}
<h3>tags</h3>
<ul class="tags">
{{- range . }}
<li>
<a href="{{ "tags" | relURL }}/{{ . | urlize }}">{{ . }}</a>
</li>
{{- end }}
</ul>
{{- end }}
</aside>
</article>
</section>
{{- if ne .Params.type "singlepage" }}
<section class="section-articles">
<article class="next-article">
{{- with .NextInSection }}
<a href="{{ .Permalink }}">
{{ if eq .Params.type "project" }}&leftarrow; next project{{ end }}
{{ if ne .Params.type "project" }}&leftarrow; next article{{ end }}
</a>
{{- end }}
</article>
<article class="previous-article">
{{- with .PrevInSection }}<span></span>
<a href="{{ .Permalink }}">
{{- if eq .Params.type "project" }}previous project &rightarrow;{{ end -}}
{{- if ne .Params.type "project" }}previous article &rightarrow;{{ end -}}
</a>
{{- end }}
</article>
</section>
{{- end }} {{- end }}
</div> {{- end }}
</aside>
</main> </main>
{{- end }} {{- end }}

View file

@ -1,18 +1,6 @@
{{ define "stylesheet" }}{{ $sass := resources.Get "/errorpages.scss" }}{{ $style := $sass | resources.ToCSS }} {{- define "main" }}
<link rel="preload stylesheet" as="style" href="{{ $style.Permalink }}" type="text/css" media="screen" /> <main>
{{ end }} <h2>{{ .Params.heading }}</h2>
<p>{{ .Params.subheading}}</p>
{{ define "main" }} </main>
<main> {{- end }}
<div class="container">
<section>
<header>
<h2>{{ .Params.heading }}</h2>
<span class="subtitle">{{.Params.subheading}}</span>
</header>
{{.Content}}
</section>
</div>
</main>
{{ end }}

View file

@ -1,17 +1,6 @@
{{ define "stylesheet" }}{{ $sass := resources.Get "/errorpages.scss" }}{{ $style := $sass | resources.ToCSS }} {{- define "main" }}
<link rel="preload stylesheet" as="style" href="{{ $style.Permalink }}" type="text/css" media="screen" /> <main>
{{ end }} <h2>{{ .Params.heading }}</h2>
<p>{{ .Params.subheading}}</p>
{{ define "main" }} </main>
<main> {{- end }}
<div class="container">
<section>
<header>
<h2>{{ .Params.heading }}</h2>
<span class="subtitle">{{.Params.subheading}}</span>
</header>
{{.Content}}
</section>
</div>
</main>
{{ end }}

View file

@ -1,73 +1,7 @@
{{- define "stylesheet" -}} {{- define "main" }}
{{- $scss := resources.Get "/index.scss" -}}
{{- $style := $scss | resources.ToCSS -}}
<link rel="preload stylesheet" as="style" href="{{ $style.Permalink }}" type="text/css" media="screen" />
{{- end -}}
{{- define "main" -}}
<section class="section header">
<div class="container">
<header>
<h2>{{ .Params.heading }}</h2>
<span class="subtitle">{{.Params.subheading}}</span>
</header>
<section class="section contact">
<table class="table contact">
{{- range sort .Params.contact "weight" "asc" }}
<tr>
<td>{{ .name }}</td>
<td>
{{- with .url }}<a href="{{ . }}">{{ end -}}
{{ .handle }}
{{- with .url }}</a>{{ end }} {{ with .hint }}<a href="{{ .url }}">{{ .name }}</a>{{ end -}}
</td>
</tr>
{{- end }}
</table>
</section>
</div>
</section>
<main> <main>
<div class="container"> {{- range first 8 (where .Site.RegularPages "Type" "post") }}
<section class="section projects"> <p> <a href="{{ .Permalink }}">{{ .Title }}</a> <span>{{ .Date.Format "2 January 2006" }}</span> </p>
<span class="latest">
latest <a href="{{ "/projects" | relURL }}">projects</a>
</span>
<div class="section projects inner">
{{- range first 4 (where .Site.RegularPages "Type" "project") }}
<a href="{{ .Permalink }}">
<article>
<h2>{{ .Title }}</h2>
<p class="meta">
{{ with .Params.activetime }}<span class="date">{{ . }}</span><br />{{ end }}
{{ with .Params.status }}<span class="status">{{ . }}</span>{{ end }}
</p>
</article>
</a>
{{- end }}
</div>
</section>
<hr>
<section class="section posts">
<span class="latest">
latest <a href="{{ "/blog" | relURL }}">posts</a>
</span>
<div class="section posts inner">
{{- range first 4 (where .Site.RegularPages "Type" "post") }}
<a href="{{ .Permalink }}">
<article>
<h2><span>{{ .Title }}</span></h2>
{{ with .Description }}<p class="description">{{ . }}</p>{{ end }}
<p class="meta" title="{{ .Date.Format "2 Jan 2006, 15:04 MST" }}">
<span class="date">{{ .Date.Format "2 January 2006" }}</span>
<span class="author">{{ with .Params.author }}by {{ end }}{{ .Params.author }}</span>
</p>
</article>
</a>
{{- end }}
</div>
</section>
</div>
</main>
{{- end }} {{- end }}
</main>
{{- end }}

View file

@ -1,21 +1,7 @@
<footer> <footer>
<div class="container"> <span title="{{ now.Format "2. January 2006, 15:04 MST" }}">version {{ now.Format "2006-01-02" }}</span>
<section class="website-version"> {{- range .Site.Menus.footer }}
<span title="{{ now.Format "2. January 2006, 15:04 MST" }}">version {{ now.Format "2006-01-02" }}</span> <a href="{{ .URL }}">{{ .Name }}</a>
</section> {{- end }}
<section class="website-subnav">
<ul>
{{- $currentPage := . }}
{{- range .Site.Menus.footer }}
<li>
<a href="{{ .URL }}">
{{- .Pre }}
<span>{{ .Name }}</span>
</a>
</li>
{{- end }}
</ul>
</section>
</div>
</footer> </footer>

View file

@ -1,11 +1,19 @@
{{- $currentPage := . -}} {{- $currentPage := . }}
<header class="main"> <header>
{{- range .Site.Menus.name }} {{- range .Site.Menus.name }}
<h1><a href="{{ .URL }}">{{ .Name }}</a></h1> {{- if $currentPage.IsMenuCurrent "name" . }}
<h1> <a href="{{ .URL }}" class="active">{{ .Name }}</a> </h1>
{{- else }}
<h1> <a href="{{ .URL }}">{{ .Name }}</a> </h1>
{{- end }} {{- end }}
{{- end }}
<nav> <nav>
{{- range .Site.Menus.main }} {{- range .Site.Menus.main }}
{{- if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) -}}
<a href="{{ .URL }}" class="active">{{ .Name }}</a>
{{- else }}
<a href="{{ .URL }}">{{ .Name }}</a> <a href="{{ .URL }}">{{ .Name }}</a>
{{- end}}
{{- end }} {{- end }}
</nav> </nav>
</header> </header>