worked on light dark toggle, pagination and style

This commit is contained in:
Valentin Wagner 2024-12-11 19:51:44 +01:00
parent 32127d9672
commit 58b21d43fb
19 changed files with 215 additions and 188 deletions

4
404.md
View File

@ -5,6 +5,6 @@ layout: default
# 404
**Page not found :**
**Page not found:**
The requested page could not be found.
The requested page could not be found ╯︿╰

View File

@ -16,6 +16,7 @@ gem "minima", "~> 2.5"
# If you have any plugins, put them here!
group :jekyll_plugins do
gem "jekyll-feed", "~> 0.12"
gem "jekyll-paginate", ">=0"
end
# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
@ -32,3 +33,5 @@ gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
# do not have a Java counterpart.
gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]
gem "webrick", "~> 1.9"

View File

@ -61,6 +61,7 @@ GEM
webrick (~> 1.7)
jekyll-feed (0.17.0)
jekyll (>= 3.7, < 5.0)
jekyll-paginate (1.1.0)
jekyll-sass-converter (3.0.0)
sass-embedded (~> 1.54)
jekyll-seo-tag (2.8.0)
@ -172,10 +173,12 @@ DEPENDENCIES
http_parser.rb (~> 0.6.0)
jekyll (~> 4.3.3)
jekyll-feed (~> 0.12)
jekyll-paginate
minima (~> 2.5)
tzinfo (>= 1, < 3)
tzinfo-data
wdm (~> 0.1.1)
webrick (~> 1.9)
BUNDLED WITH
2.5.22
2.5.23

View File

@ -32,6 +32,7 @@ github_username: oneandonlyvalle
# theme: minima
plugins:
- jekyll-feed
- jekyll-paginate
# Exclude from processing.
# The following items will not be processed, by default.
@ -52,3 +53,17 @@ plugins:
# - vendor/cache/
# - vendor/gems/
# - vendor/ruby/
collections:
microblog:
output: true
permalink: microblog/:year/:month/:day/:hour-:minute/
paginate: 2 # default for all below; will be overridden by `per_page` value
pagination:
- paginate:
path: /blog/page:num/
per_page: 10
- paginate:
path: /page:num/
per_page: 20

33
_layouts/blog.html Normal file
View File

@ -0,0 +1,33 @@
---
layout: default
title: Blog
---
<div class="home">
{%- if page.title -%}
<h1 class="page-heading">{{ page.title }}</h1>
{% else %}
<h1 class="page-heading">Blog</h1>
{%- endif -%}
{{ content }}
{%- if paginator.total_posts > 0 -%}
<h2 class="post-list-heading">{{ page.list_title | default: "Posts" }}</h2>
<ul class="post-list">
{%- for post in paginator.posts -%}
<li>
{%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
<span class="post-meta">{{ post.date | date: date_format }}</span>
<h3>
<a class="post-link" href="{{ post.url | relative_url }}">
{{ post.title | escape }}
</a>
</h3>
{%- if site.show_excerpts -%}
{{ post.excerpt }}
{%- endif -%}
</li>
{%- endfor -%}
</ul>
<p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | relative_url }}">via RSS</a></p>
{%- endif -%}
</div>

View File

@ -7,6 +7,7 @@
</head>
<body>
<script src="/assets/js/oneko.js"></script>
<script src="/assets/js/light-dark-toggle.js"></script>
<div class="wrapper">
<div class="header">
<h1>{{ site.title }}</h1>
@ -17,6 +18,7 @@
<a href="/">Home</a>
<a href="/blog/">Blog</a>
<a href="/about/">About</a>
<button id="theme-toggle">System</button>
</div>
</div>
<div class="wrapper">
@ -30,6 +32,7 @@
<img src="/assets/images/pictochat.gif" class="button">
<img src="/assets/images/kill.png" class="button">
<img src="/assets/images/affection.gif" class="button">
<a href="http://www.rebas.se/humor/htmlvir.shtml"><img src="/assets/images/htmlvir.gif" class="button"></a>
</div>
<div class="wrapper">
<img src="/assets/images/shoegaze.gif" class="stamp">

View File

@ -1,5 +1,6 @@
---
layout: default
title: Home
---
<div class="home">
@ -9,10 +10,11 @@ layout: default
<h1 class="page-heading">Home</h1>
{%- endif -%}
{{ content }}
{%- if site.posts.size > 0 -%}
<h2 class="post-list-heading">{{ page.list_title | default: "Posts" }}</h2>
{%- if paginator.total_posts > 0 -%}
<h2 class="post-list-heading">{{ page.list_title | default: "Microblog" }}</h2>
<ul class="post-list">
{%- for post in site.posts -%}
{% for post in paginator.posts %}
{%- if post.collection == "microblog" -%}
<li>
{%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
<span class="post-meta">{{ post.date | date: date_format }}</span>
@ -25,7 +27,8 @@ layout: default
{{ post.excerpt }}
{%- endif -%}
</li>
{%- endfor -%}
{%- endif -%}
{% endfor %}
</ul>
<p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | relative_url }}">via RSS</a></p>
{%- endif -%}

View File

@ -0,0 +1,7 @@
---
layout: post
title: "Welcome to Jekyll!"
date: 2024-08-25 19:37:42 +0200
---
microblog test

View File

@ -1,5 +1,8 @@
:root {
color-scheme: light dark;
:root[data-applied-mode="light"] {
color-scheme: light;
}
:root[data-applied-mode="dark"] {
color-scheme: dark;
}
* {
@ -11,7 +14,7 @@
body {
background-color: light-dark(#eee, #333);
background-image:
linear-gradient(90deg, transparent 134px, light-dark(#eac, #66c) 134px, light-dark(#eac, #66c) 137px, transparent 137px),
linear-gradient(90deg, transparent 134px, light-dark(#eac, #69a) 134px, light-dark(#eac, #69a) 137px, transparent 137px),
repeating-linear-gradient(0deg, light-dark(#ccc, #626262) 1px, light-dark(#ccc, #626262) 3px, transparent 1px, transparent 20px),
repeating-linear-gradient(90deg, light-dark(#ccc, #626262) 1px, light-dark(#ccc, #626262) 3px, transparent 1px, transparent 20px);
background-size: 100% 100%;
@ -23,13 +26,13 @@ a {
text-decoration: none;
}
a:link {
color: light-dark(#f88, #77f);
color: light-dark(#f88, #9ce);
}
a:visited {
color: light-dark(#f68, #97f);
color: light-dark(#f68, #68e);
}
a:hover {
color: light-dark(#95d, #fad);
color: light-dark(#59d, #fad);
}
.wrapper {
@ -43,92 +46,93 @@ a:hover {
.header {
display: flex;
margin-top: 20px;
}
.header h1 {
font-size: 40px;
h1 {
font-size: 40px;
}
}
.navigation {
display: flex;
margin: 20px 0px 20px 0px;
}
.navigation * {
margin: 0px 12px 0px 12px;
}
.navigation a {
font-size: 22px;
font-weight: bold;
background-color: light-dark(#eee, #333);
}
.navigation button {
background-color: light-dark(#ddd, #444);
border: 1px solid light-dark(#224, #ede);
border-radius: 10px;
font-size: 18px;
padding: 2px 4px 2px 4px;
* {
margin: 0px 12px 0px 12px;
padding: 0px 2px 0px 2px;
}
a {
font-size: 24px;
font-weight: bold;
background-color: light-dark(#eee, #333);
}
button {
background-color: light-dark(#ddd, #444);
border: 1px solid light-dark(#234, #ede);
border-radius: 6px;
font-size: 20px;
padding: 2px 4px 2px 4px;
}
}
.content {
background-color: light-dark(#fff8ff, #595959);
border: 2px solid light-dark(#224, #ede);
background-color: light-dark(#fff8ff, #444);
border: 2px solid light-dark(#234, #ede);
border-radius: 20px;
width: 60%;
padding: 20px;
}
.content h1 {
font-size: 35px;
font-weight: normal;
line-height: 40px;
letter-spacing: -1px;
}
.content p {
margin: 10px 0;
font-size: 16px;
line-height: 1.5;
}
.content ul, .content ol {
margin: 20px;
}
.content li {
font-size: 15px;
line-height: 20px;
}
.content ul li {
list-style-type: circle fill;
}
.content img {
margin: 10px auto 10px auto;
width: 50%;
display: block;
}
.content .inlineimg {
vertical-align: middle;
margin: 0 0;
display: inline;
width: auto;
}
.content blockquote {
padding-left: 1em;
font-style: italic;
border-left: solid 2px #555;
}
.content pre {
border: 2px solid #ddd;
border-radius: 5px;
background-color: #fff;
padding: 5px 5px;
margin: 10px 0;
}
.content code *, .content code {
font-family: monospace;
font-size: 14px;
color: #111;
}
.content p code {
border: 1px solid #ddd;
border-radius: 3px;
background-color: #fff;
padding: 2px;
h1 {
font-size: 35px;
font-weight: normal;
line-height: 40px;
letter-spacing: -1px;
}
p {
margin: 10px 0;
font-size: 16px;
line-height: 1.5;
}
ul, ol {
margin: 20px;
}
li {
font-size: 15px;
line-height: 20px;
}
ul li {
list-style-type: circle fill;
}
img {
margin: 10px auto 10px auto;
width: 50%;
display: block;
}
.inlineimg {
vertical-align: middle;
margin: 0 0;
display: inline;
width: auto;
}
blockquote {
padding-left: 1em;
font-style: italic;
border-left: solid 2px #555;
}
pre {
border: 2px solid #ddd;
border-radius: 5px;
background-color: #fff;
padding: 5px 5px;
margin: 10px 0;
}
code *, code {
font-family: monospace;
font-size: 14px;
color: #111;
}
p code {
border: 1px solid #ddd;
border-radius: 3px;
background-color: #fff;
padding: 2px;
}
}
.button, .stamp {

BIN
assets/images/banner2.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 196 KiB

BIN
assets/images/gitea.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
assets/images/htmlvir.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

View File

@ -1,100 +0,0 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta lang="en">
<title>VΛYT - Gallery</title>
<link rel="stylesheet" href="/stylesheet.css">
<link rel="stylesheet" href="/highlighting.css">
<meta name="generator" content="Nanoc 4.12.3">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-QXDT926SV4"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-QXDT926SV4');
</script>
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>VΛYT</h1>
</div>
</div>
<div class="wrapper">
<div class="navigation">
<a href="/">Home</a>
<a href="/about/">About</a>
<a href="/tech/">Tech</a>
<a href="/music/">Music</a>
<a href="/blog/">Blog</a>
</div>
</div>
<div class="wrapper">
<div class="content">
<h1>Gallery</h1>
<br>
<p>This is a list of all images on this website and also kind of an easteregg since there is no link to this page.</p>
<ul>
<li><a href="/images/soldering.jpg">/images/soldering.jpg</a></li>
<li><a href="/images/haruhi.gif">/images/haruhi.gif</a></li>
<li><a href="/images/neocities.png">/images/neocities.png</a></li>
<li><a href="/images/shoegaze.gif">/images/shoegaze.gif</a></li>
<li><a href="/images/pictochat.gif">/images/pictochat.gif</a></li>
<li><a href="/images/nosignal.gif">/images/nosignal.gif</a></li>
<li><a href="/images/KK.gif">/images/KK.gif</a></li>
<li><a href="/images/kirby.gif">/images/kirby.gif</a></li>
<li><a href="/images/computer2.gif">/images/computer2.gif</a></li>
<li><a href="/images/lainstamp.gif">/images/lainstamp.gif</a></li>
<li><a href="/images/computer.gif">/images/computer.gif</a></li>
<li><a href="/images/clippy.gif">/images/clippy.gif</a></li>
<li><a href="/images/hypnotoad.gif">/images/hypnotoad.gif</a></li>
<li><a href="/images/terminal.gif">/images/terminal.gif</a></li>
<li><a href="/images/email.gif">/images/email.gif</a></li>
<li><a href="/images/BMO.gif">/images/BMO.gif</a></li>
<li><a href="/images/KirbyIdle.gif">/images/KirbyIdle.gif</a></li>
<li><a href="/images/ghost.gif">/images/ghost.gif</a></li>
<li><a href="/images/underconstruction.gif">/images/underconstruction.gif</a></li>
<li><a href="/images/underconstructionbanner.gif">/images/underconstructionbanner.gif</a></li>
<li><a href="/images/believe.gif">/images/believe.gif</a></li>
<li><a href="/images/believe2.gif">/images/believe2.gif</a></li>
<li><a href="/images/robots.gif">/images/robots.gif</a></li>
<li><a href="/images/life.png">/images/life.png</a></li>
<li><a href="/images/cannibalism.png">/images/cannibalism.png</a></li>
<li><a href="/images/views.png">/images/views.png</a></li>
<li><a href="/images/affection.gif">/images/affection.gif</a></li>
<li><a href="/images/yukiguru.gif">/images/yukiguru.gif</a></li>
<li><a href="/images/Kuriyama_Mirai_flips_through_The_C_Programming_Language.gif">/images/Kuriyama_Mirai_flips_through_The_C_Programming_Language.gif</a></li>
<li><a href="/images/bi.png">/images/bi.png</a></li>
<li><a href="/images/vayt.png">/images/vayt.png</a></li>
<li><a href="/images/lambdafun.gif">/images/lambdafun.gif</a></li>
<li><a href="/images/vscode.gif">/images/vscode.gif</a></li>
<li><a href="/images/wiby.gif">/images/wiby.gif</a></li>
<li><a href="/images/hatsunemiku.gif">/images/hatsunemiku.gif</a></li>
<li><a href="/images/Yuki-Nagato-typing-and-coding-really-quickly-on-laptop.gif">/images/Yuki-Nagato-typing-and-coding-really-quickly-on-laptop.gif</a></li>
<li><a href="/images/yuki-nagato-typing.gif">/images/yuki-nagato-typing.gif</a></li>
<li><a href="/images/yuki-nagato-waving-a-mouse.gif">/images/yuki-nagato-waving-a-mouse.gif</a></li>
<li><a href="/images/nonft.gif">/images/nonft.gif</a></li>
<li><a href="/images/kill.png">/images/kill.png</a></li>
<li><a href="/images/etr.gif">/images/etr.gif</a></li>
<li><a href="/images/stamp-yrownwebsite.png">/images/stamp-yrownwebsite.png</a></li>
</ul>
</div>
</div>
<div class="wrapper">
<img src="/images/neocities.png" class="button">
<img src="/images/pictochat.gif" class="button">
<img src="/images/underconstruction.gif" class="button">
<img src="/images/affection.gif" class="button">
</div>
<div class="wrapper">
<img src="/images/shoegaze.gif" class="stamp">
<img src="/images/nosignal.gif" class="stamp">
<img src="/images/lainstamp.gif" class="stamp">
<img src="/images/believe.gif" class="stamp">
<img src="/images/views.png" class="stamp">
</div>
</body>
</html>

BIN
assets/images/power36.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 899 B

View File

@ -0,0 +1,51 @@
function getUserPreference() {
return localStorage.getItem('theme') || 'system';
}
function saveUserPreference(userPreference) {
localStorage.setItem('theme', userPreference);
}
function getAppliedMode(userPreference) {
if (userPreference === 'light') {
return 'light';
}
if (userPreference === 'dark') {
return 'dark';
}
// system
if (matchMedia('(prefers-color-scheme: light)').matches) {
return 'light';
}
return 'dark';
}
function setAppliedMode(mode) {
document.documentElement.dataset.appliedMode = mode;
}
function rotatePreferences(userPreference) {
if (userPreference === 'system') {
return 'light'
}
if (userPreference === 'light') {
return 'dark';
}
if (userPreference === 'dark') {
return 'system';
}
// for invalid values, just in case
return 'system';
}
const themeToggler = document.getElementById('theme-toggle');
let userPreference = getUserPreference();
setAppliedMode(getAppliedMode(userPreference));
themeToggler.innerText = userPreference;
themeToggler.onclick = () => {
const newUserPref = rotatePreferences(userPreference);
userPreference = newUserPref;
saveUserPreference(newUserPref);
themeToggler.innerText = newUserPref;
setAppliedMode(getAppliedMode(newUserPref));
}

5
blog.md Normal file
View File

@ -0,0 +1,5 @@
---
layout: blog
---
Long form writeups about stuff.