Merge dev into main branch #2

Merged
vrifox merged 11 commits from dev into main 2023-01-06 22:53:36 +01:00
29 changed files with 280 additions and 147 deletions
Showing only changes of commit c974ac8f1a - Show all commits

View file

@ -1,4 +1,5 @@
footer { footer {
background-color: var(--border);
color: var(--text-secondary); color: var(--text-secondary);
grid-area: footer; grid-area: footer;
a { color: var(--text-secondary); } a { color: var(--text-secondary); }

View file

@ -12,29 +12,24 @@
} }
} }
#latest-posts { section {
display: flex; position: relative;
flex-direction: row; h2 {
gap: 1em; .more{
hyphens: auto; font-size: .75em;
overflow-x: scroll; font-weight: normal;
.post-group { hyphens: none;
background: var(--vriish-gradient); &::after {
border-radius: .5em; content: "\27F6";
display: flex; margin-left: .25em;
flex-direction: column; transition: margin .5s;
text-shadow: var(--vriish-gradient-shadow);
min-width: 15em;
width: 33.333%;
.title {
flex: auto;
margin: 1em;
} }
aside { &:hover::after {
margin: 1em; margin-left: .5em !important;
} }
} }
a { &:hover .more::after {
text-decoration: none; margin-left: .35em;
}
} }
} }

View file

@ -0,0 +1 @@
@import "verticalposts";

View file

@ -0,0 +1,31 @@
.verticalposts {
hyphens: auto;
margin-top: 4em;
.verticalposts-wrapper {
border-radius: .5em;
display: flex;
flex-direction: row;
gap: 1em;
overflow-x: scroll;
scroll-snap-type: x proximity;
.post-group {
background: var(--vriish-gradient);
border-radius: .5em;
display: flex;
flex-direction: column;
scroll-snap-align: start;
min-width: 15em;
width: 33.333%;
.title {
flex: auto;
margin: 1em;
}
aside {
margin: 1em;
}
}
}
a {
text-decoration: none;
}
}

View file

@ -8,15 +8,24 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
grid-area: sidebar; grid-area: sidebar;
height: 100vh;
margin-top: -2px; margin-top: -2px;
max-width: 300px;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1; z-index: 1;
gap: 1em;
padding: 1em;
@media (min-width: 921px) {
bottom: 0;
height: 100%;
}
header { header {
text-align: center; text-align: center;
padding: 2em 1em; user-select: none;
#avatar {
border-radius: 100%;
width: calc(100% - 2em);
max-width: 200px;
}
#name { #name {
margin: 0; margin: 0;
font-weight: bold; font-weight: bold;
@ -28,7 +37,7 @@
} }
} }
#sidebar-menu { #sidebar-menu {
padding: 2em 1em; user-select: none;
ul { ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
@ -36,13 +45,12 @@
} }
li { li {
border-radius: .5em; border-radius: .5em;
margin: .25em 0; margin: .5em 0;
padding: .25em .5em;
position: relative; position: relative;
letter-spacing: .025em; letter-spacing: .025em;
a { a {
text-shadow: 0 0 0 transparent; display: block;
transition: text-shadow .5s; padding: .25em .5em;
} }
::after { ::after {
background: var(--vriish-gradient); background: var(--vriish-gradient);
@ -51,24 +59,21 @@
content: ""; content: "";
left: 0; left: 0;
position: absolute; position: absolute;
right: 0; right: 100%;
top: 0; top: 0;
transition: opacity .5s; transition: opacity .5s, width .5s;
opacity: 0; opacity: 0;
width: 0;
z-index: -1; z-index: -1;
} }
&.active { &.active {
background: var(--vriish-gradient); background: var(--vriish-gradient);
a {
text-shadow: var(--vriish-gradient-shadow);
}
} }
&:hover { &:hover {
a {
text-shadow: var(--vriish-gradient-shadow);
}
::after { ::after {
opacity: 1; opacity: 1;
right: 0;
width: 100%;
} }
} }
} }
@ -76,4 +81,76 @@
text-decoration: none; text-decoration: none;
} }
} }
aside {
bottom: 1em;
position: absolute;
left: 1em;
right: 1em;
@media (max-width: 920px) {
position: initial;
}
#language-select {
position: relative;
pointer-events: none;
&:hover {
#languages {
//display: block;
bottom: 2em;
opacity: 100%;
pointer-events: all;
* {
pointer-events: all;
}
}
}
#language-icon {
text-decoration: none;
padding-top: 1em;
pointer-events: all;
&::after {
content: attr(data-page-lang);
position: absolute;
left: -4px;
font-size: 0.6em;
line-height: 1.5em;
bottom: 0;
text-transform: uppercase;
}
}
#languages {
background-color: var(--background);
border-radius: .5em;
margin: 0;
padding: 0;
user-select: none;
position: absolute;
//display: none;
bottom: 1em;
opacity: 0%;
transition: bottom .5s, opacity .5s;
li {
list-style: none;
overflow: hidden;
padding: .25em .5em;
position: relative;
transition: background .5s;
border-radius: .5em;
margin: .2em;
&:not(:last-of-type) {
margin-bottom: .5em;
}
&.active {
background: var(--vriish-gradient);
}
&:hover {
background: var(--vriish-gradient);
}
a {
text-decoration: none;
display: block;
}
}
}
}
}
} }

View file

@ -1,5 +1,6 @@
// general // general
@import "variables"; @import "variables";
@import "shortcodes";
// site parts // site parts
@import "sidebar"; @import "sidebar";
@ -34,13 +35,18 @@ html {
"header header" "header header"
"sidebar content" "sidebar content"
"sidebar footer"; "sidebar footer";
grid-template-columns: 250px 1fr;
line-height: 1.7; line-height: 1.7;
margin: 0; margin: 0;
min-height: 100vh;
@media (max-width: 920px) { @media (max-width: 920px) {
font-size: 1em;
grid-template-areas: grid-template-areas:
"header"
"content" "content"
"sidebar" "sidebar"
"footer"; "footer";
grid-template-columns: 1fr;
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
line-height: 1em; line-height: 1em;
@ -134,27 +140,9 @@ main {
span { font-size: .8em; } span { font-size: .8em; }
} }
#intro-heading {
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;
display: inline-block;
margin: 0.55em 0;
}
span[title="Freude"], span[title="happiness"] {
font-size: 1em;
}
p.date-published { p.date-published {
margin-bottom: -1.5em; margin-bottom: -1.5em;
font-size: smaller; font-size: smaller;
font-style: italic; font-style: italic;
} }
@media (max-width: 576px) {
main {
margin: 0 auto;
}
}

View file

@ -24,8 +24,8 @@
--background: hsl(0, 100%, 97.5%); --background: hsl(0, 100%, 97.5%);
--border: hsl(0, 100%, 90%); --border: hsl(0, 100%, 90%);
--text: rgb(50, 40, 30); --text: hsl(0, 100%, 5%);
--text-2: rgb(90, 80, 70); --text-2: hsl(0, 100%, 10%);
--sidebar-background: hsl(0, 100%, 95%); --sidebar-background: hsl(0, 100%, 95%);
} }

View file

@ -1,7 +1,14 @@
baseURL: "https://vrifox.cc/" baseURL: "https://vrifox.cc/"
title: "Vris Cute Corner" title: "Vris Cute Corner"
enableRobotsTXT: true enableRobotsTXT: true
defaultContentLanguage: de defaultContentLanguage: de
defaultContentLanguageInSubdir: true
params:
displayName: "Vri 🌈"
username: "@vrifox"
markup: markup:
highlight: highlight:
anchorLineNos: false anchorLineNos: false

View file

@ -7,10 +7,10 @@ main:
# name: "Kenntnisse" # name: "Kenntnisse"
# pageref: "/kenntnisse/" # pageref: "/kenntnisse/"
# weight: 2 # weight: 2
- identifier: "projects" # - identifier: "projects"
name: "Projekte" # name: "Projekte"
pageref: "/portfolio/" # pageref: "/portfolio/"
weight: 3 # weight: 3
- identifier: "blog" - identifier: "blog"
name: "Blog" name: "Blog"
pageref: "/blog/" pageref: "/blog/"
@ -19,3 +19,8 @@ main:
# name: "Empfehlungen" # name: "Empfehlungen"
# pageref: "/blogroll/" # pageref: "/blogroll/"
# weight: 5 # weight: 5
footer:
- identifier: "sourcecode"
name: "Quellcode"
url: "https://code.cozy.town/vri/website"
weight: 1

View file

@ -1,4 +1,8 @@
--- ---
title: "Hola 🖖" title: "Hola 🖖"
--- ---
Deutsch Ich erstelle gerne Grafiken und Websites.
Ich betreibe und pflege Dienste auf [Cozy Town](https://cozy.town).
{{< verticalposts header="latest-posts-heading" >}}

View file

@ -1,4 +1,8 @@
--- ---
title: "Holahe 🖖" title: "Hola 🖖"
--- ---
English I like to create Graphics and Websites.
I host and maintain services at [Cozy Town](https://cozy.town).
{{< verticalposts header="latest-posts-heading" >}}

20
i18n/de.yaml Normal file
View file

@ -0,0 +1,20 @@
# Menus
home:
other: Start
projects:
other: Projekte
blog:
other: Blog
# Shortcodes
verticalposts-more:
other: mehr
# Content
introduction-heading:
other: Hola 🖖
introduction-sub:
other: Ich bin Vri 🙂
latest-posts-heading:
other: Aus meinem Blog

View file

@ -1,6 +1,20 @@
# Menus
home: home:
other: Home other: Home
projects: projects:
other: Projects other: Projects
blog: blog:
other: Blog other: Blog
# Shortcodes
verticalposts-more:
other: more
# Content
introduction-heading:
other: Hola 🖖
introduction-sub:
other: I am Vri 🙂
latest-posts-heading:
other: From my Blog

View file

@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="{{ .Page.Lang }}">
<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") }} {{- $style := resources.Get "/style.scss" | resources.ToCSS (dict "outputStyle" "compressed") }}
@ -8,9 +8,9 @@
<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" />
</head> </head>
<body> <body id="{{ .Page.Title }}">
{{- block "header" . }}{{ end }} {{- block "header" . }}{{ end }}
{{ partial "nav.html" . }} {{ partial "sidebar.html" . }}
{{- block "main" . }}{{ end }} {{- block "main" . }}{{ end }}
{{ partial "footer.html" . }} {{ partial "footer.html" . }}
</body> </body>

View file

@ -1,7 +1,7 @@
{{- define "main" }} {{- define "main" }}
<main> <main>
{{- if eq .Params.type "post" }} {{- if eq .Params.type "post" }}
<p class="date-published" title="{{ .Date.Format "2. January 2006, 15:04 MST" }}">{{ .Date.Day }}. {{ if eq .Params.lang "de"}} {{ index $.Site.Data.monate (printf "%d" .Date.Month) }} {{ else }} {{ .Date.Month }} {{ end }} {{ .Date.Year }}</p> <p class="date-published" title="{{ .Date | time.Format "2. January 2006, 15:04 MST" }}">{{ .Date | time.Format "2. January 2006" }}</p>
{{- end }} {{- end }}
<h1 class="title">{{ .Title }}</h1> <h1 class="title">{{ .Title }}</h1>
{{ .Content -}} {{ .Content -}}

View file

@ -1,56 +1,12 @@
{{- define "header" }} {{- define "header" }}
<header id="introduction" class="global-header"> <header id="introduction" class="global-header">
<h1>Hola 🖖</h1> <h1>{{ i18n "introduction-heading" }}</h1>
<p>Ich bin Vri 🙂</p> <p>{{ i18n "introduction-sub" }}</p>
</header> </header>
{{ end }} {{ end }}
{{- define "main" }} {{- define "main" }}
<main> <main>
<h2>Aus meinem Blog</h2> {{ .Content }}
<section id="latest-posts">
{{ range first 3 (where .Site.RegularPages "Section" "blog") }}
<a href="{{ .Permalink }}" class="post-group">
<p class="title">{{ .Title }}</p>
<aside 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>
</aside>
</a>
{{ end }}
</section>
<section id="interests">
<h2>Interessen</h1>
<div>Programmieren</div>
<div>Gestalten</div>
<div>Übersetzen</div>
</section>
<section id="languages">
<div></div>
</section>
<section id="skills">
<h2>Kenntnisse</h1>
<div>HTML & CSS <span>seit 2009</span></div>
<div>SCSS <span>seit 2013</span></div>
<div>Javascript <span>seit 2022</span></div>
<div>Rust <span>seit 2021</span></div>
<div>Python <span>seit 2021</span></div>
<div>Bash <span>seit 2015</span></div>
<div>Affinity Designer <span>20152020</span></div>
<div>Inkscape <span>seit 2020</span></div>
<div>Boxy SVG <span>seit 2022</span></div>
</section>
<section id="skills">
<h2>Kenntnisse</h1>
<div>HTML & CSS <span>seit 2009</span></div>
<div>SCSS <span>seit 2013</span></div>
<div>Javascript <span>seit 2022</span></div>
<div>Rust <span>seit 2021</span></div>
<div>Python <span>seit 2021</span></div>
<div>Bash <span>seit 2015</span></div>
<div>Affinity Designer <span>20152020</span></div>
<div>Inkscape <span>seit 2020</span></div>
<div>Boxy SVG <span>seit 2022</span></div>
</section>
</main> </main>
{{- end }} {{- end }}

View file

@ -1,6 +1,6 @@
<footer> <footer>
<p title="Revision vom {{ now.Format "2. January 2006, um 15:04 Uhr MST" }}">R {{ now.Format "2006-01-02" }}</p> <p title="Build vom {{ .Date | time.Format "2. January 2006, um 15:04 Uhr MST" }}">Version: {{ .Date | time.Format "02.01.2006" }}</p>
{{- range .Site.Menus.footer }} {{- range .Site.Menus.footer }}
<a href="{{ .URL }}">{{ .Name }}</a> <a href="{{ .URL }}">{{ .Name }}</a>
{{- end }} {{- end }}

View file

@ -1,28 +0,0 @@
{{ $currentPage := . }}
<nav id="sidebar">
<header>
<p id="name">Vri 🌈</p>
<p id="information">
<span>@vrifox</span>
</p>
</header>
<section id="sidebar-menu">
<ul>
{{- range .Site.Menus.main }}
{{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}
<li class="active"><a href="{{ .URL }}">{{ .Name }}</a></li>
{{ else }}
<li><a href="{{ .URL }}">{{ .Name }}</a></li>
{{ end }}
{{- end }}
</ul>
</section>
{{- if .Site.IsMultiLingual }}
<aside>
{{- range .Site.Languages }}
<a href="{{/* where .Page.TranslationKey .Lang */}}{{/* .Permalink */}}Test{{/* end */}}">{{ .LanguageName }}</a>
{{- end }}
</aside>
{{- end }}
</nav>

View file

@ -0,0 +1,44 @@
{{ $currentPage := . }}
<nav id="sidebar">
<header>
<img id="avatar" src="/2021_vrifox-avatar.png">
<p id="name">{{ .Site.Params.displayName }}</p>
<p id="information">
<span>{{ .Site.Params.username }}</span>
</p>
</header>
<section id="sidebar-menu">
<ul>
{{- range .Site.Menus.main }}
{{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}
<li class="active"><a href="{{ .URL }}">{{ .Name }}</a></li>
{{ else }}
<li><a href="{{ .URL }}">{{ .Name }}</a></li>
{{ end }}
{{- end }}
</ul>
</section>
<aside>
{{- if .Site.IsMultiLingual }}
{{ $siteLanguages := .Site.Languages }}
{{ $pageLanguage := .Page.Lang }}
<div id="language-select">
<span id="language-icon" href="#" data-page-lang="{{ .Page.Lang }}">🌐</span>
<ul id="languages">
{{ range .Page.AllTranslations }}
{{ $translation := . }}
{{ range $siteLanguages }}
{{ if eq $translation.Lang .Lang }}
{{ if eq $pageLanguage .Lang }}
<li class="active"><a href="{{ $translation.Permalink }}">{{ .LanguageName }}</a></li>
{{ else }}
<li><a href="{{ $translation.Permalink }}">{{ .LanguageName }}</a></li>
{{ end }}
{{ end }}
{{ end }}
{{ end }}
</ul>
</div>
{{- end }}
</nav>

View file

@ -0,0 +1,14 @@
<section class="verticalposts">
{{ with .Get "header" }}<h2>{{ i18n . }} <a href="blog/"class="more">{{ i18n "verticalposts-more" }}</a></h2>{{ end }}
<div class="verticalposts-wrapper">
{{ range first 3 (where .Site.RegularPages "Section" "blog") }}
<a href="{{ .Permalink }}" class="post-group">
<p class="title">{{ .Title }}</p>
<aside class="meta" title="{{ .Date | time.Format "2 Jan 2006, 15:04 MST" }}">
<span class="date">{{ .Date | time.Format "2. January 2006" }}</span>
<span class="author">{{ with .Params.author }}by {{ end }}{{ .Params.author }}</span>
</aside>
</a>
{{ end }}
</div>
</section>

Binary file not shown.

After

Width:  |  Height:  |  Size: 296 KiB