worked on light dark toggle, pagination and style
4
404.md
@ -5,6 +5,6 @@ layout: default
|
|||||||
|
|
||||||
# 404
|
# 404
|
||||||
|
|
||||||
**Page not found :**
|
**Page not found:**
|
||||||
|
|
||||||
The requested page could not be found.
|
The requested page could not be found ╯︿╰
|
||||||
|
|||||||
3
Gemfile
@ -16,6 +16,7 @@ gem "minima", "~> 2.5"
|
|||||||
# If you have any plugins, put them here!
|
# If you have any plugins, put them here!
|
||||||
group :jekyll_plugins do
|
group :jekyll_plugins do
|
||||||
gem "jekyll-feed", "~> 0.12"
|
gem "jekyll-feed", "~> 0.12"
|
||||||
|
gem "jekyll-paginate", ">=0"
|
||||||
end
|
end
|
||||||
|
|
||||||
# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
|
# 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.
|
# do not have a Java counterpart.
|
||||||
gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]
|
gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]
|
||||||
|
|
||||||
|
|
||||||
|
gem "webrick", "~> 1.9"
|
||||||
|
|||||||
@ -61,6 +61,7 @@ GEM
|
|||||||
webrick (~> 1.7)
|
webrick (~> 1.7)
|
||||||
jekyll-feed (0.17.0)
|
jekyll-feed (0.17.0)
|
||||||
jekyll (>= 3.7, < 5.0)
|
jekyll (>= 3.7, < 5.0)
|
||||||
|
jekyll-paginate (1.1.0)
|
||||||
jekyll-sass-converter (3.0.0)
|
jekyll-sass-converter (3.0.0)
|
||||||
sass-embedded (~> 1.54)
|
sass-embedded (~> 1.54)
|
||||||
jekyll-seo-tag (2.8.0)
|
jekyll-seo-tag (2.8.0)
|
||||||
@ -172,10 +173,12 @@ DEPENDENCIES
|
|||||||
http_parser.rb (~> 0.6.0)
|
http_parser.rb (~> 0.6.0)
|
||||||
jekyll (~> 4.3.3)
|
jekyll (~> 4.3.3)
|
||||||
jekyll-feed (~> 0.12)
|
jekyll-feed (~> 0.12)
|
||||||
|
jekyll-paginate
|
||||||
minima (~> 2.5)
|
minima (~> 2.5)
|
||||||
tzinfo (>= 1, < 3)
|
tzinfo (>= 1, < 3)
|
||||||
tzinfo-data
|
tzinfo-data
|
||||||
wdm (~> 0.1.1)
|
wdm (~> 0.1.1)
|
||||||
|
webrick (~> 1.9)
|
||||||
|
|
||||||
BUNDLED WITH
|
BUNDLED WITH
|
||||||
2.5.22
|
2.5.23
|
||||||
|
|||||||
15
_config.yml
@ -32,6 +32,7 @@ github_username: oneandonlyvalle
|
|||||||
# theme: minima
|
# theme: minima
|
||||||
plugins:
|
plugins:
|
||||||
- jekyll-feed
|
- jekyll-feed
|
||||||
|
- jekyll-paginate
|
||||||
|
|
||||||
# Exclude from processing.
|
# Exclude from processing.
|
||||||
# The following items will not be processed, by default.
|
# The following items will not be processed, by default.
|
||||||
@ -52,3 +53,17 @@ plugins:
|
|||||||
# - vendor/cache/
|
# - vendor/cache/
|
||||||
# - vendor/gems/
|
# - vendor/gems/
|
||||||
# - vendor/ruby/
|
# - 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
@ -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>
|
||||||
@ -7,6 +7,7 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<script src="/assets/js/oneko.js"></script>
|
<script src="/assets/js/oneko.js"></script>
|
||||||
|
<script src="/assets/js/light-dark-toggle.js"></script>
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<h1>{{ site.title }}</h1>
|
<h1>{{ site.title }}</h1>
|
||||||
@ -17,6 +18,7 @@
|
|||||||
<a href="/">Home</a>
|
<a href="/">Home</a>
|
||||||
<a href="/blog/">Blog</a>
|
<a href="/blog/">Blog</a>
|
||||||
<a href="/about/">About</a>
|
<a href="/about/">About</a>
|
||||||
|
<button id="theme-toggle">System</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
@ -30,6 +32,7 @@
|
|||||||
<img src="/assets/images/pictochat.gif" class="button">
|
<img src="/assets/images/pictochat.gif" class="button">
|
||||||
<img src="/assets/images/kill.png" class="button">
|
<img src="/assets/images/kill.png" class="button">
|
||||||
<img src="/assets/images/affection.gif" 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>
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<img src="/assets/images/shoegaze.gif" class="stamp">
|
<img src="/assets/images/shoegaze.gif" class="stamp">
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
---
|
---
|
||||||
layout: default
|
layout: default
|
||||||
|
title: Home
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="home">
|
<div class="home">
|
||||||
@ -9,10 +10,11 @@ layout: default
|
|||||||
<h1 class="page-heading">Home</h1>
|
<h1 class="page-heading">Home</h1>
|
||||||
{%- endif -%}
|
{%- endif -%}
|
||||||
{{ content }}
|
{{ content }}
|
||||||
{%- if site.posts.size > 0 -%}
|
{%- if paginator.total_posts > 0 -%}
|
||||||
<h2 class="post-list-heading">{{ page.list_title | default: "Posts" }}</h2>
|
<h2 class="post-list-heading">{{ page.list_title | default: "Microblog" }}</h2>
|
||||||
<ul class="post-list">
|
<ul class="post-list">
|
||||||
{%- for post in site.posts -%}
|
{% for post in paginator.posts %}
|
||||||
|
{%- if post.collection == "microblog" -%}
|
||||||
<li>
|
<li>
|
||||||
{%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
|
{%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
|
||||||
<span class="post-meta">{{ post.date | date: date_format }}</span>
|
<span class="post-meta">{{ post.date | date: date_format }}</span>
|
||||||
@ -25,7 +27,8 @@ layout: default
|
|||||||
{{ post.excerpt }}
|
{{ post.excerpt }}
|
||||||
{%- endif -%}
|
{%- endif -%}
|
||||||
</li>
|
</li>
|
||||||
{%- endfor -%}
|
{%- endif -%}
|
||||||
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
<p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | relative_url }}">via RSS</a></p>
|
<p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | relative_url }}">via RSS</a></p>
|
||||||
{%- endif -%}
|
{%- endif -%}
|
||||||
|
|||||||
7
_microblog/2024-08-25-welcome-to-jekyll.markdown
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
---
|
||||||
|
layout: post
|
||||||
|
title: "Welcome to Jekyll!"
|
||||||
|
date: 2024-08-25 19:37:42 +0200
|
||||||
|
---
|
||||||
|
|
||||||
|
microblog test
|
||||||
166
_sass/main.scss
@ -1,5 +1,8 @@
|
|||||||
:root {
|
:root[data-applied-mode="light"] {
|
||||||
color-scheme: light dark;
|
color-scheme: light;
|
||||||
|
}
|
||||||
|
:root[data-applied-mode="dark"] {
|
||||||
|
color-scheme: dark;
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
@ -11,7 +14,7 @@
|
|||||||
body {
|
body {
|
||||||
background-color: light-dark(#eee, #333);
|
background-color: light-dark(#eee, #333);
|
||||||
background-image:
|
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(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);
|
repeating-linear-gradient(90deg, light-dark(#ccc, #626262) 1px, light-dark(#ccc, #626262) 3px, transparent 1px, transparent 20px);
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
@ -23,13 +26,13 @@ a {
|
|||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
a:link {
|
a:link {
|
||||||
color: light-dark(#f88, #77f);
|
color: light-dark(#f88, #9ce);
|
||||||
}
|
}
|
||||||
a:visited {
|
a:visited {
|
||||||
color: light-dark(#f68, #97f);
|
color: light-dark(#f68, #68e);
|
||||||
}
|
}
|
||||||
a:hover {
|
a:hover {
|
||||||
color: light-dark(#95d, #fad);
|
color: light-dark(#59d, #fad);
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
@ -43,92 +46,93 @@ a:hover {
|
|||||||
.header {
|
.header {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
h1 {
|
||||||
.header h1 {
|
font-size: 40px;
|
||||||
font-size: 40px;
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.navigation {
|
.navigation {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin: 20px 0px 20px 0px;
|
margin: 20px 0px 20px 0px;
|
||||||
}
|
* {
|
||||||
.navigation * {
|
margin: 0px 12px 0px 12px;
|
||||||
margin: 0px 12px 0px 12px;
|
padding: 0px 2px 0px 2px;
|
||||||
}
|
}
|
||||||
.navigation a {
|
a {
|
||||||
font-size: 22px;
|
font-size: 24px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
background-color: light-dark(#eee, #333);
|
background-color: light-dark(#eee, #333);
|
||||||
}
|
}
|
||||||
.navigation button {
|
button {
|
||||||
background-color: light-dark(#ddd, #444);
|
background-color: light-dark(#ddd, #444);
|
||||||
border: 1px solid light-dark(#224, #ede);
|
border: 1px solid light-dark(#234, #ede);
|
||||||
border-radius: 10px;
|
border-radius: 6px;
|
||||||
font-size: 18px;
|
font-size: 20px;
|
||||||
padding: 2px 4px 2px 4px;
|
padding: 2px 4px 2px 4px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
background-color: light-dark(#fff8ff, #595959);
|
background-color: light-dark(#fff8ff, #444);
|
||||||
border: 2px solid light-dark(#224, #ede);
|
border: 2px solid light-dark(#234, #ede);
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
width: 60%;
|
width: 60%;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
h1 {
|
||||||
.content h1 {
|
font-size: 35px;
|
||||||
font-size: 35px;
|
font-weight: normal;
|
||||||
font-weight: normal;
|
line-height: 40px;
|
||||||
line-height: 40px;
|
letter-spacing: -1px;
|
||||||
letter-spacing: -1px;
|
}
|
||||||
}
|
p {
|
||||||
.content p {
|
margin: 10px 0;
|
||||||
margin: 10px 0;
|
font-size: 16px;
|
||||||
font-size: 16px;
|
line-height: 1.5;
|
||||||
line-height: 1.5;
|
}
|
||||||
}
|
ul, ol {
|
||||||
.content ul, .content ol {
|
margin: 20px;
|
||||||
margin: 20px;
|
}
|
||||||
}
|
li {
|
||||||
.content li {
|
font-size: 15px;
|
||||||
font-size: 15px;
|
line-height: 20px;
|
||||||
line-height: 20px;
|
}
|
||||||
}
|
ul li {
|
||||||
.content ul li {
|
list-style-type: circle fill;
|
||||||
list-style-type: circle fill;
|
}
|
||||||
}
|
img {
|
||||||
.content img {
|
margin: 10px auto 10px auto;
|
||||||
margin: 10px auto 10px auto;
|
width: 50%;
|
||||||
width: 50%;
|
display: block;
|
||||||
display: block;
|
}
|
||||||
}
|
.inlineimg {
|
||||||
.content .inlineimg {
|
vertical-align: middle;
|
||||||
vertical-align: middle;
|
margin: 0 0;
|
||||||
margin: 0 0;
|
display: inline;
|
||||||
display: inline;
|
width: auto;
|
||||||
width: auto;
|
}
|
||||||
}
|
blockquote {
|
||||||
.content blockquote {
|
padding-left: 1em;
|
||||||
padding-left: 1em;
|
font-style: italic;
|
||||||
font-style: italic;
|
border-left: solid 2px #555;
|
||||||
border-left: solid 2px #555;
|
}
|
||||||
}
|
pre {
|
||||||
.content pre {
|
border: 2px solid #ddd;
|
||||||
border: 2px solid #ddd;
|
border-radius: 5px;
|
||||||
border-radius: 5px;
|
background-color: #fff;
|
||||||
background-color: #fff;
|
padding: 5px 5px;
|
||||||
padding: 5px 5px;
|
margin: 10px 0;
|
||||||
margin: 10px 0;
|
}
|
||||||
}
|
code *, code {
|
||||||
.content code *, .content code {
|
font-family: monospace;
|
||||||
font-family: monospace;
|
font-size: 14px;
|
||||||
font-size: 14px;
|
color: #111;
|
||||||
color: #111;
|
}
|
||||||
}
|
p code {
|
||||||
.content p code {
|
border: 1px solid #ddd;
|
||||||
border: 1px solid #ddd;
|
border-radius: 3px;
|
||||||
border-radius: 3px;
|
background-color: #fff;
|
||||||
background-color: #fff;
|
padding: 2px;
|
||||||
padding: 2px;
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.button, .stamp {
|
.button, .stamp {
|
||||||
|
|||||||
BIN
assets/images/banner2.gif
Normal file
|
After Width: | Height: | Size: 196 KiB |
BIN
assets/images/gitea.gif
Normal file
|
After Width: | Height: | Size: 1.4 KiB |
BIN
assets/images/graphicdesign.gif
Normal file
|
After Width: | Height: | Size: 3.0 KiB |
BIN
assets/images/gratis-sex-fotos.gif
Normal file
|
After Width: | Height: | Size: 2.8 KiB |
BIN
assets/images/htmlvir.gif
Normal file
|
After Width: | Height: | Size: 5.1 KiB |
@ -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
|
After Width: | Height: | Size: 1.7 KiB |
BIN
assets/images/tiredalien2.gif
Normal file
|
After Width: | Height: | Size: 899 B |
51
assets/js/light-dark-toggle.js
Normal 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));
|
||||||
|
}
|
||||||