From 59e98e5274f40bab82414d2841ff1a316dc6514e Mon Sep 17 00:00:00 2001 From: Vri Date: Mon, 28 Nov 2022 18:32:29 +0100 Subject: [PATCH] [wip] website redesign --- .gitignore | 1 + assets/style.scss | 162 ++++++++++++++++------------------- config.toml | 42 --------- content/_index.md | 13 +-- layouts/_default/baseof.html | 1 + layouts/index.html | 53 +++++++++++- layouts/partials/footer.html | 2 +- layouts/partials/nav.html | 42 +++++---- 8 files changed, 155 insertions(+), 161 deletions(-) delete mode 100644 config.toml diff --git a/.gitignore b/.gitignore index 0d2619a..e23656f 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,7 @@ # generated directories /public/* /resources/_gen/* +.vscode/ # ignored files .directory diff --git a/assets/style.scss b/assets/style.scss index 05c8c52..78535e8 100644 --- a/assets/style.scss +++ b/assets/style.scss @@ -1,98 +1,90 @@ -:root { - --background: hsl(210, 21%, 15%); - --border: hsl(210, 21%, 20%); - --text: hsl(210, 21%, 95%); - --text-2: hsl(210, 21%, 80%); - --text-secondary: hsl(210, 21%, 40%); - --vriish-red: hsl(0, 100%, 75%); - --rose: hsl(0, 100%, 75%); - --orange: hsl(25, 100%, 75%); - --gold: hsl(50, 100%, 75%); - --emerald: hsl(130, 100%, 75%); - --sky: hsl(215, 100%, 75%); - --purpur: hsl(275, 100%, 75%); - --white: hsl(360, 100%, 100%); -} -@media (prefers-color-scheme: light) { - :root { - --background: rgb(255, 245, 235); - --border: rgb(225, 215, 205); - --text: rgb(50, 40, 30); - --text-2: rgb(90, 80, 70); - } -} +// general +@import "variables"; + +// site parts +@import "sidebar"; +@import "footer"; + +// pages +@import "home"; * { box-sizing: border-box; - scrollbar-color: var(--vriish-red) var(--background); + scrollbar-color: var(--vriish-rose) var(--background); scrollbar-width: thin; &::-webkit-scrollbar { background: var(--background); width: 6px; } - &::-webkit-scrollbar-thumb { background: var(--vriish-red); } + &::-webkit-scrollbar-thumb { background: var(--vriish-rose); } } html { + margin: 0; 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.7; - margin: 0; -} - -h1, h2, h3, h4, h5, h6 { - line-height: 1em; - margin: .8em 0; -} - -a { - color: var(--text); - text-decoration: underline; - text-decoration-color: var(--vriish-red); - text-underline-offset: 3px; - transition: text-decoration-color .2s; - &:hover { text-decoration-color: var(--text); } -} - -center { - margin: 19.2px 0; - text-align: center; -} - -pre { - border: 1px solid var(--vriish-red); - border-radius: 4px; - overflow: auto; - padding: 10px 15px; -} - -p { - hyphens: auto; - img { - border: 2px solid var(--border); - border-radius: 4px; - display: block; - margin: 0 auto; + padding: 0; + body { + background: var(--background); + color: var(--text); + display: grid; + font-family: system-ui, sans-serif; + font-size: 1.2em; + grid-template-areas: + "header header" + "sidebar content" + "sidebar footer"; + line-height: 1.7; + margin: 0; + @media (max-width: 920px) { + grid-template-areas: + "content" + "sidebar" + "footer"; + } + h1, h2, h3, h4, h5, h6 { + line-height: 1em; + margin: .8em 0; + } + a { + color: var(--text); + text-decoration: underline; + text-decoration-color: var(--vriish-rose); + text-underline-offset: 3px; + transition: text-decoration-color .2s; + &:hover { text-decoration-color: var(--text); } + } + pre { + border: 1px solid var(--vriish-rose); + border-radius: 4px; + overflow: auto; + padding: 10px 15px; + } + p { + hyphens: auto; + img { + border: 2px solid var(--border); + border-radius: 4px; + display: block; + margin: 0 auto; + } + } + hr { + border: 1px solid var(--border); + color: var(--border); + margin: 60px 0; + } } } -hr { - border: 1px solid var(--border); - color: var(--border); - margin: 60px 0; +.global-header { + grid-area: header; } // ------------------------ // - header / nav; footer - // ------------------------ -header, footer { +/*header, footer { align-items: center; display: flex; overflow: auto; @@ -104,7 +96,7 @@ header, footer { text-decoration-thickness: 2px !important; text-underline-offset: 6px; margin: 0 15px; - &:hover { text-decoration-color: var(--vriish-red); } + &:hover { text-decoration-color: var(--vriish-rose); } } } header { @@ -116,7 +108,7 @@ header { font-size: 1em; margin: 0; a { - color: var(--vriish-red); + color: var(--vriish-rose); } } nav { @@ -126,24 +118,16 @@ header { aside { margin-left: auto; } -} -footer { - bottom: 0; - color: var(--text-secondary); - position: absolute; - a { color: var(--text-secondary); } - span { - padding: 17.6px 30px; - margin-right: auto; - } -} +}*/ + // -------- // - main - // -------- main { + grid-area: content; margin: 20px auto; - max-width: 720px; + max-width: 1000px; overflow: hidden; padding: 30px; width: 100%; @@ -151,7 +135,7 @@ main { } #intro-heading { - background-image: linear-gradient(180deg, var(--rose) 0%, var(--rose) 50%, var(--gold) 95%, var(--rose) 100%); + background-image: linear-gradient(180deg, var(--vriish-rose) 0%, var(--vriish-rose) 50%, var(--gold) 95%, var(--vriish-rose) 100%); background-clip: text; -webkit-background-clip: text; color: transparent; diff --git a/config.toml b/config.toml deleted file mode 100644 index d20b093..0000000 --- a/config.toml +++ /dev/null @@ -1,42 +0,0 @@ -baseURL = "https://vrifox.cc/" -title = "Vris Cute Corner" -enableRobotsTXT = true -[menu] -[[menu.name]] - identifier = "vrifox.cc" - name = "VrifoxCC" - url = "/" - weight = 1 -[[menu.main]] - identifier = "kenntnisse" - name = "Kenntnisse" - url = "/kenntnisse/" - weight = 1 -[[menu.main]] - identifier = "Portfolio" - name = "Portfolio" - url = "/portfolio/" - weight = 2 -[[menu.footer]] - identifier = "blog" - name = "Blog" - url = "/blog/" - weight = 1 -[[menu.footer]] - identifier = "blogroll" - name = "Empfehlungen" - url = "/blogroll/" - weight = 2 -[markup] - [highlight] - anchorLineNos = false - lineNos = false - lineNumbersInTable = false - noClasses = false - style = "dracula" - tabWidth = 4 - [goldmark] - [extensions] - linkify = false - [renderer] - unsafe = true diff --git a/content/_index.md b/content/_index.md index b2c232e..d1356ae 100644 --- a/content/_index.md +++ b/content/_index.md @@ -1,14 +1,3 @@ --- -title: "รœber Vri" +title: "Hola ๐Ÿ––" --- - -# Vris Atelier {#intro-heading} - -**Grafik.** -Vektorgrafiken setzen und Rastergrafiken pixeln. - -**Gestaltung.** -Webseiten entwerfen, umsetzen und optimieren. - -**Infrastruktur.** -Server und Dienste aufsetzen, absichern und betreiben. diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 72a1958..5cbbfde 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -9,6 +9,7 @@ + {{- block "header" . }}{{ end }} {{ partial "nav.html" . }} {{- block "main" . }}{{ end }} {{ partial "footer.html" . }} diff --git a/layouts/index.html b/layouts/index.html index bbd0e56..afe9c0b 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,5 +1,56 @@ +{{- define "header" }} + +{{ end }} + {{- define "main" }}
- {{ .Content -}} +

Aus meinem Blog

+
+ {{ range first 3 (where .Site.RegularPages "Section" "blog") }} + +

{{ .Title }}

+ + + {{ end }} +
+
+

Interessen

+
Programmieren
+
Gestalten
+
รœbersetzen
+
+
+
+
+
+

Kenntnisse

+
HTML & CSS seit 2009
+
SCSS seit 2013
+
Javascript seit 2022
+
Rust seit 2021
+
Python seit 2021
+
Bash seit 2015
+
Affinity Designer 2015โ€“2020
+
Inkscape seit 2020
+
Boxy SVG seit 2022
+
+
+

Kenntnisse

+
HTML & CSS seit 2009
+
SCSS seit 2013
+
Javascript seit 2022
+
Rust seit 2021
+
Python seit 2021
+
Bash seit 2015
+
Affinity Designer 2015โ€“2020
+
Inkscape seit 2020
+
Boxy SVG seit 2022
+
{{- end }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 547f869..227b3ff 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,6 +1,6 @@