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 {
background-color: var(--border);
color: var(--text-secondary);
grid-area: footer;
a { color: var(--text-secondary); }

View file

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

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;
flex-direction: column;
grid-area: sidebar;
height: 100vh;
margin-top: -2px;
max-width: 300px;
position: sticky;
top: 0;
z-index: 1;
gap: 1em;
padding: 1em;
@media (min-width: 921px) {
bottom: 0;
height: 100%;
}
header {
text-align: center;
padding: 2em 1em;
user-select: none;
#avatar {
border-radius: 100%;
width: calc(100% - 2em);
max-width: 200px;
}
#name {
margin: 0;
font-weight: bold;
@ -28,7 +37,7 @@
}
}
#sidebar-menu {
padding: 2em 1em;
user-select: none;
ul {
list-style: none;
padding: 0;
@ -36,13 +45,12 @@
}
li {
border-radius: .5em;
margin: .25em 0;
padding: .25em .5em;
margin: .5em 0;
position: relative;
letter-spacing: .025em;
a {
text-shadow: 0 0 0 transparent;
transition: text-shadow .5s;
display: block;
padding: .25em .5em;
}
::after {
background: var(--vriish-gradient);
@ -51,24 +59,21 @@
content: "";
left: 0;
position: absolute;
right: 0;
right: 100%;
top: 0;
transition: opacity .5s;
transition: opacity .5s, width .5s;
opacity: 0;
width: 0;
z-index: -1;
}
&.active {
background: var(--vriish-gradient);
a {
text-shadow: var(--vriish-gradient-shadow);
}
}
&:hover {
a {
text-shadow: var(--vriish-gradient-shadow);
}
::after {
opacity: 1;
right: 0;
width: 100%;
}
}
}
@ -76,4 +81,76 @@
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
@import "variables";
@import "shortcodes";
// site parts
@import "sidebar";
@ -34,13 +35,18 @@ html {
"header header"
"sidebar content"
"sidebar footer";
grid-template-columns: 250px 1fr;
line-height: 1.7;
margin: 0;
min-height: 100vh;
@media (max-width: 920px) {
font-size: 1em;
grid-template-areas:
"header"
"content"
"sidebar"
"footer";
grid-template-columns: 1fr;
}
h1, h2, h3, h4, h5, h6 {
line-height: 1em;
@ -134,27 +140,9 @@ main {
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 {
margin-bottom: -1.5em;
font-size: smaller;
font-style: italic;
}
@media (max-width: 576px) {
main {
margin: 0 auto;
}
}

View file

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

View file

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

View file

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

View file

@ -1,4 +1,8 @@
---
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:
other: Home
projects:
other: Projects
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>
<html lang="en">
<html lang="{{ .Page.Lang }}">
<head>
<title>{{ with .Title }} {{ . }} {{ end }}{{ .Site.Title }}</title>
{{- $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 name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<body id="{{ .Page.Title }}">
{{- block "header" . }}{{ end }}
{{ partial "nav.html" . }}
{{ partial "sidebar.html" . }}
{{- block "main" . }}{{ end }}
{{ partial "footer.html" . }}
</body>

View file

@ -1,7 +1,7 @@
{{- define "main" }}
<main>
{{- 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 }}
<h1 class="title">{{ .Title }}</h1>
{{ .Content -}}

View file

@ -1,56 +1,12 @@
{{- define "header" }}
<header id="introduction" class="global-header">
<h1>Hola 🖖</h1>
<p>Ich bin Vri 🙂</p>
<h1>{{ i18n "introduction-heading" }}</h1>
<p>{{ i18n "introduction-sub" }}</p>
</header>
{{ end }}
{{- define "main" }}
<main>
<h2>Aus meinem Blog</h2>
<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>
{{ .Content }}
</main>
{{- end }}

View file

@ -1,6 +1,6 @@
<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 }}
<a href="{{ .URL }}">{{ .Name }}</a>
{{- 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