worked on light dark toggle, pagination and style
4
404.md
@ -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 ╯︿╰
|
||||
|
||||
3
Gemfile
@ -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"
|
||||
|
||||
@ -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
|
||||
|
||||
15
_config.yml
@ -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
@ -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>
|
||||
<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">
|
||||
|
||||
@ -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 -%}
|
||||
|
||||
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 {
|
||||
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
|
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));
|
||||
}
|
||||