headless css + cleaner javascript

This commit is contained in:
Speyll 2024-02-29 04:22:04 +01:00
parent 243321205e
commit 67c73978ce
13 changed files with 119 additions and 352 deletions

View file

@ -3,4 +3,4 @@ title = "About"
+++
This is an about page, nothing more nothing less `forget about it`.
{{ youtube(id="pS6zJ7IsJkM" class="textCenter") }}
{{ youtube(id="pS6zJ7IsJkM" class="text-center") }}

View file

@ -1,294 +1,30 @@
:root,
:root.light {
--bgColor: #EEEEEE;
--fgColor: #41474E;
--metaColor: #D26878;
--headColor: #;
--linkColor: #5690AF;
--hovColor: #22453F;
--bgSelect: #FFFAE1;
--bgUrl: url(https://i.ibb.co/Qpkrw4V/tile-Light.webp) repeat;
--red: #D26878;
--dimRed: #623039;
--orange: #e08f67;
--dimOrange: #926048;
--yellow: #FFFAE1;
--dimYellow: #D5C5A1;
--green: #56AFA0;
--dimGreen: #22453F;
--blue: #5690AF;
--dimBlue: #223844;
--purple: #9271D6;
--dimPurple: #47356C;
--grey: #CBCDCD;
--dimGrey: #646868
}
:root.dark {
--bgColor: #222529;
--fgColor: #D6D6D6;
--metaColor: #78B6AD;
--headColor: #;
--linkColor: #DBD5BC;
--hovColor: #E2AEA2;
--bgSelect: #464949;
--bgUrl: url(https://i.ibb.co/LzrFBFJ/tileDark.webp) repeat;
--red: #CD909B;
--dimRed: #684249;
--orange: #E2AEA2;
--dimOrange: #704941;
--yellow: #DBD5BC;
--dimYellow: #6F6847;
--green: #78B6AD;
--dimGreen: #3E615C;
--blue: #87C9E5;
--dimBlue: #38494F;
--purple: #CEA7DE;
--dimPurple: #5E406A;
--grey: #CBCDCD;
--dimGrey: #464949
}
::-moz-selection {
color: var(--bgColor);
background: var(--metaColor)
}
::selection {
color: var(--bgColor);
background: var(--metaColor)
}
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 62.5%;
scrollbar-color: var(--metaColor) var(--bgColor);
scrollbar-width: thin;
}
body {
font-family: monospace;
font-size: 1.6rem;
line-height: 1.35;
max-width: 64rem;
margin: auto;
overflow-wrap: break-word;
background: var(--bgColor);
color: var(--fgColor);
}
h1 {
font-size: 2.4rem;
color: var(--bgColor);
background-color: var(--metaColor);
text-align: center;
text-wrap: balance;
}
h1::before {
color: var(--bgColor);
content: '# '
}
h2::before,
h3::before,
h4::before,
h5::before,
h6::before {
color: var(--metaColor);
content: '# '
}
a {
text-decoration: none;
padding: 0 .2rem 0 .2rem;
border-radius: .3rem;
color: var(--linkColor);
}
a:focus,
a:hover {
background-color: var(--linkColor);
color: var(--bgColor)
}
ul {
list-style: none;
margin-top: .5rem;
margin-bottom: .5rem;
}
li {
margin-bottom: .25rem;
}
ul li::marker {
content: '» ';
color: var(--metaColor)
}
ul li:hover::marker {
content: '# ';
font-weight: 700;
color: var(--linkColor)
}
blockquote {
border-left: .5rem solid var(--metaColor);
margin: 1rem;
padding: 0 0 0 1rem
}
textarea {
border: 2px dotted;
outline: 0;
resize: none;
overflow: auto;
background-color: var(--bgColor)
}
hr {
border: 1px dashed
}
img {
max-width: 90%;
height: auto;
margin: .2rem;
padding: .2rem;
border: dashed .2rem var(--metaColor);
border-radius: 15px
}
pre {
border: 1px solid var(--metaColor);
padding: 1rem;
overflow-x: auto;
font-style: monospace;
white-space: pre-wrap;
word-break: break-word;
}
p code,
li code,
div code {
padding: 0 .2rem 0 .2rem;
border-radius: .3rem;
color: var(--bgColor);
background-color: var(--fgColor);
}
pre code {
padding: 0;
border-radius: 0;
color: inherit;
background-color: inherit;
}
iframe {
max-width: 90%;
}
table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
border: none;
margin-left: auto;
margin-right: auto;
margin-bottom: 1rem;
line-height: 1.1
}
thead th:first-child {
width: 20%
}
th {
font-weight: 400
}
td,
th {
padding: .5rem;
border: dashed .1rem var(--metaColor)
}
footer {
font-size: 1.4rem;
clear: both;
color: var(--footColor)
}
footer,
td,
th {
text-align: left
}
.metaData,
.themeButton,
hr,
textarea {
color: var(--metaColor)
}
/* Site Specific Styling */
.wrapper {
min-height: 100vh;
min-height: 100svh;
display: grid;
grid-template-rows: auto 1fr auto;
gap: 2rem;
}
/* Icons settings */
.icons {
width: 2.0rem;
height: 2.0rem;
aspect-ratio: 1/1;
display: inline-block;
vertical-align: middle;
color: var(--fgColor);
fill: var(--fgColor);
background-color: transparent;
}
.icons__background:hover {
background-color: transparent;
color: var(--metaColor);
}
.navBar {
padding: 1rem 0 0 0;
#nav-bar {
padding: .625rem 0 0 0;
display: flex;
flex-direction: row;
gap: .4rem;
gap: .25rem;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
align-content: flex-end
}
.themeButton {
cursor: pointer;
border: none;
font-size: 1.8rem;
background-color: transparent
#footer-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.dark .themeButton.dark,
.themeButton.light {
display: none
.accent-data {
color: var(--accent);
}
.dark .themeButton.light {
display: block
.theme-transition {
transition: color 0.3s ease, background-color 0.3s ease;
}
.tagsData {
.tags-data {
display: flex;
flex-direction: column;
flex-wrap: wrap;
@ -297,56 +33,68 @@ textarea {
align-content: flex-end
}
.titleList li {
.title-list li {
margin-bottom: .75rem;
}
/* icons settings */
.icons {
width: 1.3rem;
height: 1.3rem;
aspect-ratio: 1/1;
display: inline-block;
vertical-align: middle;
color: var(--text);
fill: var(--text);
background-color: transparent;
cursor: pointer;
}
.icons:hover {
background-color: transparent;
color: var(--accent);
}
/* footnotes */
.footnote-definition {
margin: 0 0 0 2rem;
margin: 0 0 0 .125rem;
}
.footnote-definition-label {
color: var(--metaColor);
color: var(--accent);
}
.footnote-definition p {
display: inline;
padding: 0 0 0 1rem;
margin: .625rem 0 0 .625rem;
}
.footContainer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.noStyle {
/* general classes */
.no-style {
padding: 0;
margin: 0;
border: none;
border-radius: 0
}
.textCenter {
.no-style:hover {
background-color: transparent;
color: var(--accent);
}
.text-center {
text-align: center;
}
.floatRight {
.float-right {
float: right
}
.floatLeft {
.float-left {
float: left
}
/* shortcodes css */
.webring {
margin: 0.5rem;
}
/* Add Padding */
@media (max-width: 650px) {
.wrapper {
margin: 1rem;
}
margin: .375rem;
}

View file

@ -1,21 +1,49 @@
const setTheme = (theme) => {
document.documentElement.className = theme;
localStorage.setItem('theme', theme);
}
const toggleButton = document.getElementById('theme-toggle');
const themeIcon = document.getElementById('theme-icon');
const themeSound = document.getElementById('theme-sound');
const hasCodeRun = localStorage.getItem('hasCodeRun');
// Function to update the theme icon based on the current theme
const updateThemeIcon = (isDarkMode) => {
const themeMode = isDarkMode ? 'darkMode' : 'lightMode';
const iconPath = themeIcon.querySelector('use').getAttribute('href').replace(/#.*$/, `#${themeMode}`);
themeIcon.querySelector('use').setAttribute('href', iconPath);
};
if (!hasCodeRun) {
const defaultTheme = "{{ config.extra.default_theme }}";
setTheme(defaultTheme);
localStorage.setItem('hasCodeRun', 'true');
}
// Function to update the theme based on the current mode
const updateTheme = (isDarkMode) => {
const theme = isDarkMode ? 'dark' : 'light';
document.documentElement.setAttribute('data-theme', theme);
updateThemeIcon(isDarkMode);
};
const getTheme = () => {
const theme = localStorage.getItem('theme');
if (theme) {
setTheme(theme);
}
}
// Function to toggle the theme
const toggleTheme = () => {
const isDarkMode = toggleButton.checked;
updateTheme(isDarkMode);
themeSound.play();
localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
getTheme();
// Add transition class to body for smooth transition
document.body.classList.add('theme-transition');
setTimeout(() => {
document.body.classList.remove('theme-transition');
}, 300);
};
// Event listener for theme toggle
toggleButton.addEventListener('change', toggleTheme);
// Function to initialize the theme based on the stored preference
const initializeTheme = () => {
const storedTheme = localStorage.getItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const isDarkMode = storedTheme === 'dark' || (!storedTheme && prefersDark);
toggleButton.checked = isDarkMode;
updateTheme(isDarkMode);
};
// Initialize the theme
initializeTheme();
// Listen for changes in system preference
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', initializeTheme);

Binary file not shown.

View file

@ -4,7 +4,6 @@
{% include "head.html" %}
</head>
<body>
<div class="wrapper">
<header>
{% include "header.html" %}
</header>
@ -15,6 +14,5 @@
<footer>
{% include "footer.html" %}
</footer>
</div>
</body>
</html>

View file

@ -1,10 +1,10 @@
{% extends "base.html" %}
{% block content %}
<div><a href="..">..</a>/<span class="metaData">{{ page.slug }}</span></div>
<time datetime="{{ page.date }}">Published on: <span class="metaData">{{ page.date }}</span></time>
<div><a href="..">..</a>/<span class="accent-data">{{ page.slug }}</span></div>
<time datetime="{{ page.date }}">Published on: <span class="accent-data">{{ page.date }}</span></time>
{% if config.extra.author and config.extra.display_author == true %}
<address rel="author">By <span class="metaData">{{config.extra.author}}</span></address>
<address rel="author">By <span class="accent-data">{{config.extra.author}}</span></address>
{% endif %}
<h1>{{ page.title }}</h1>
@ -37,7 +37,7 @@
{{ page.content | safe }}
<p class="tagsData">
<p class="tags-data">
{% if page.taxonomies.tags %}
{% for tag in page.taxonomies.tags %}
<a href="/tags/{{ tag | slugify }}">&#47;{{ tag }}&#47;</a>

View file

@ -1,5 +1,5 @@
<hr>
<div class=footContainer>
<div id="footer-container">
{% if config.extra.footer_content_license %}
<div>Except where otherwise noted, content on this site is licensed under a
{% if config.extra.footer_content_license_link %}
@ -9,14 +9,14 @@
{% endif %}
license.</div>
{% endif %}
<div class="footLeft">
<div>
<p>Theme and color theme licensed under <a target="_blank" rel="noopener noreferrer" href="https://en.wikipedia.org/wiki/Licence_MIT">MIT</a>.<br>
Built with <a target="_blank" rel="noopener noreferrer" href="https://www.getzola.org">Zola</a> using <a target="_blank" rel="noopener noreferrer" href="https://github.com/Speyll/anemone">anemone</a> theme &amp; <a target="_blank" rel="noopener noreferrer" href="https://github.com/Speyll/veqev">veqev</a> colors.<br>
</p>
</div>
{% if config.generate_feed %}
<div class="footRight">
<a class="icons__background" target="_blank" rel="noopener noreferrer" href="{{ get_url(path="atom.xml", trailing_slash=false) }}" title="Subscribe via RSS for updates."><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#rss', trailing_slash=false) | safe }}"></use></svg></a>
<div>
<a class="no-style" target="_blank" rel="noopener noreferrer" href="{{ get_url(path="atom.xml", trailing_slash=false) }}" title="Subscribe via RSS for updates."><svg class="icons"><use href="{{ get_url(path='icons.svg#rss', trailing_slash=false) | safe }}"></use></svg></a>
</div>
{% endif %}
</div>

View file

@ -90,7 +90,9 @@
{% endblock feed %}
{% endif %}
{% block css %}
<link rel="stylesheet" href="{{ get_url(path='css/style.css', trailing_slash=false) | safe }}"/>
<link rel="stylesheet" type="text/css" href="https://speyll.github.io/suCSS/reset-min.css"/>
<link rel="stylesheet" type="text/css" href="https://speyll.github.io/suCSS/suCSS-min.css"/>
<link rel="stylesheet" type="text/css" href="{{ get_url(path='css/style.css', trailing_slash=false) | safe }}"/>
{% endblock css %}
<script src="{{ get_url(path='js/script.js', trailing_slash=false) | safe }}" defer></script>

View file

@ -5,27 +5,19 @@
{% set current_lang = section.lang %}
{% endif %}
{% if config.extra.header_nav %}
<nav class="navBar">
<nav id="nav-bar">
{% for nav_item in config.extra.header_nav %}
<a href="{{ nav_item.url }}" class="{% if nav_item.url == current_url %}active{% endif %}">
{% set language_key = 'name_' ~ current_lang %}
{{ nav_item[language_key] }}
</a>
{% endfor %}
<div class="themeSwitch">
{% if not config.extra.default_theme %}
<button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use></svg></button>
<button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use></svg></button>
{% elif config.extra.default_theme and config.extra.default_theme == "light" %}
<button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg class="icons icons__background"> <use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use></svg></button>
<button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use></svg></button>
{% elif config.extra.default_theme and config.extra.default_theme == "dark" %}
<button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use></svg></button>
<button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use></svg></button>
{% endif %}
<div>
<input type="checkbox" id="theme-toggle" style="display: none;">
<label for="theme-toggle" id="theme-toggle-label"><svg id="theme-icon" class="icons"><use href="{{ get_url(path='/icons.svg#lightMode', trailing_slash=false) | safe }}"></use></svg></label>
<audio id="theme-sound">
<source src="{{ get_url(path='theme-switch-sound.mp3', trailing_slash=false) | safe }}" type="audio/mp3">
</audio>
</div>
</nav>
</nav>
{% endif %}

View file

@ -32,7 +32,7 @@
{{ page.content | safe }}
<p class="tagsData">
<p class="tags-data">
{% if page.taxonomies.tags %}
{% for tag in page.taxonomies.tags %}
<a href="/tags/{{ tag | slugify }}">&#47;{{ tag }}&#47;</a>

View file

@ -11,7 +11,7 @@
{% set pages = section.pages %}
{% endif %}
<ul class="titleList">
<ul class="title-list">
{% for page in pages %}
<li>
<a href="{{ page.permalink | safe }}">{{ page.title }}</a>
@ -20,6 +20,6 @@
</ul>
{% if paginator %}
<div class="metaData">{% if paginator.previous %}<a href="{{ paginator.first }}"></a> &nbsp <a href="{{ paginator.previous }}"><</a>{% endif %} &nbsp {{ paginator.current_index }} / {{ paginator.number_pagers }} &nbsp {% if paginator.next %}<a href="{{ paginator.next }}">></a> &nbsp <a href="{{ paginator.last }}"></a>{% endif %}</div>
<div class="accent-data">{% if paginator.previous %}<a href="{{ paginator.first }}"></a> &nbsp <a href="{{ paginator.previous }}"><</a>{% endif %} &nbsp {{ paginator.current_index }} / {{ paginator.number_pagers }} &nbsp {% if paginator.next %}<a href="{{ paginator.next }}">></a> &nbsp <a href="{{ paginator.last }}"></a>{% endif %}</div>
{% endif %}
{% endblock content %}

View file

@ -1 +0,0 @@
<span class="metaData">{{content}}</span>

View file

@ -1,4 +1,4 @@
<span class="webring">
<a class="icons__background" href={{prev}}><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#chevronLeft', trailing_slash=false) | safe }}"></use></svg></a>
<a class="no-style" href={{prev}}><svg class="icons"><use href="{{ get_url(path='icons.svg#chevronLeft', trailing_slash=false) | safe }}"></use></svg></a>
<a href={{webring}}>{{webringName}}</a>
<a class="icons__background" href={{next}}><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#chevronRight', trailing_slash=false) | safe }}"></use></svg></a></span>
<a class="no-style" href={{next}}><svg class="icons"><use href="{{ get_url(path='icons.svg#chevronRight', trailing_slash=false) | safe }}"></use></svg></a></span>