mirror of
https://github.com/Speyll/anemone.git
synced 2024-11-10 00:16:35 +00:00
headless css + cleaner javascript
This commit is contained in:
parent
243321205e
commit
67c73978ce
13 changed files with 119 additions and 352 deletions
|
@ -3,4 +3,4 @@ title = "About"
|
||||||
+++
|
+++
|
||||||
This is an about page, nothing more nothing less `forget about it`.
|
This is an about page, nothing more nothing less `forget about it`.
|
||||||
|
|
||||||
{{ youtube(id="pS6zJ7IsJkM" class="textCenter") }}
|
{{ youtube(id="pS6zJ7IsJkM" class="text-center") }}
|
|
@ -1,294 +1,30 @@
|
||||||
:root,
|
#nav-bar {
|
||||||
:root.light {
|
padding: .625rem 0 0 0;
|
||||||
--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;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
gap: .4rem;
|
gap: .25rem;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
align-content: flex-end
|
align-content: flex-end
|
||||||
}
|
}
|
||||||
|
|
||||||
.themeButton {
|
#footer-container {
|
||||||
cursor: pointer;
|
display: flex;
|
||||||
border: none;
|
flex-wrap: wrap;
|
||||||
font-size: 1.8rem;
|
justify-content: space-between;
|
||||||
background-color: transparent
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark .themeButton.dark,
|
.accent-data {
|
||||||
.themeButton.light {
|
color: var(--accent);
|
||||||
display: none
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark .themeButton.light {
|
.theme-transition {
|
||||||
display: block
|
transition: color 0.3s ease, background-color 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tagsData {
|
.tags-data {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
@ -297,56 +33,68 @@ textarea {
|
||||||
align-content: flex-end
|
align-content: flex-end
|
||||||
}
|
}
|
||||||
|
|
||||||
.titleList li {
|
.title-list li {
|
||||||
margin-bottom: .75rem;
|
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 {
|
.footnote-definition {
|
||||||
margin: 0 0 0 2rem;
|
margin: 0 0 0 .125rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footnote-definition-label {
|
.footnote-definition-label {
|
||||||
color: var(--metaColor);
|
color: var(--accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
.footnote-definition p {
|
.footnote-definition p {
|
||||||
display: inline;
|
display: inline;
|
||||||
padding: 0 0 0 1rem;
|
margin: .625rem 0 0 .625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footContainer {
|
/* general classes */
|
||||||
display: flex;
|
.no-style {
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.noStyle {
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 0
|
border-radius: 0
|
||||||
}
|
}
|
||||||
|
|
||||||
.textCenter {
|
.no-style:hover {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-center {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.floatRight {
|
.float-right {
|
||||||
float: right
|
float: right
|
||||||
}
|
}
|
||||||
|
|
||||||
.floatLeft {
|
.float-left {
|
||||||
float: left
|
float: left
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* shortcodes css */
|
||||||
.webring {
|
.webring {
|
||||||
margin: 0.5rem;
|
margin: .375rem;
|
||||||
}
|
|
||||||
|
|
||||||
/* Add Padding */
|
|
||||||
@media (max-width: 650px) {
|
|
||||||
.wrapper {
|
|
||||||
margin: 1rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
|
@ -1,21 +1,49 @@
|
||||||
const setTheme = (theme) => {
|
const toggleButton = document.getElementById('theme-toggle');
|
||||||
document.documentElement.className = theme;
|
const themeIcon = document.getElementById('theme-icon');
|
||||||
localStorage.setItem('theme', theme);
|
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) {
|
// Function to update the theme based on the current mode
|
||||||
const defaultTheme = "{{ config.extra.default_theme }}";
|
const updateTheme = (isDarkMode) => {
|
||||||
setTheme(defaultTheme);
|
const theme = isDarkMode ? 'dark' : 'light';
|
||||||
localStorage.setItem('hasCodeRun', 'true');
|
document.documentElement.setAttribute('data-theme', theme);
|
||||||
}
|
updateThemeIcon(isDarkMode);
|
||||||
|
};
|
||||||
|
|
||||||
const getTheme = () => {
|
// Function to toggle the theme
|
||||||
const theme = localStorage.getItem('theme');
|
const toggleTheme = () => {
|
||||||
if (theme) {
|
const isDarkMode = toggleButton.checked;
|
||||||
setTheme(theme);
|
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);
|
||||||
|
|
BIN
static/theme-switch-sound.mp3
Normal file
BIN
static/theme-switch-sound.mp3
Normal file
Binary file not shown.
|
@ -4,7 +4,6 @@
|
||||||
{% include "head.html" %}
|
{% include "head.html" %}
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="wrapper">
|
|
||||||
<header>
|
<header>
|
||||||
{% include "header.html" %}
|
{% include "header.html" %}
|
||||||
</header>
|
</header>
|
||||||
|
@ -15,6 +14,5 @@
|
||||||
<footer>
|
<footer>
|
||||||
{% include "footer.html" %}
|
{% include "footer.html" %}
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -1,10 +1,10 @@
|
||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div><a href="..">..</a>/<span class="metaData">{{ page.slug }}</span></div>
|
<div><a href="..">..</a>/<span class="accent-data">{{ page.slug }}</span></div>
|
||||||
<time datetime="{{ page.date }}">Published on: <span class="metaData">{{ page.date }}</span></time>
|
<time datetime="{{ page.date }}">Published on: <span class="accent-data">{{ page.date }}</span></time>
|
||||||
{% if config.extra.author and config.extra.display_author == true %}
|
{% 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 %}
|
{% endif %}
|
||||||
<h1>{{ page.title }}</h1>
|
<h1>{{ page.title }}</h1>
|
||||||
|
|
||||||
|
@ -37,7 +37,7 @@
|
||||||
|
|
||||||
{{ page.content | safe }}
|
{{ page.content | safe }}
|
||||||
|
|
||||||
<p class="tagsData">
|
<p class="tags-data">
|
||||||
{% if page.taxonomies.tags %}
|
{% if page.taxonomies.tags %}
|
||||||
{% for tag in page.taxonomies.tags %}
|
{% for tag in page.taxonomies.tags %}
|
||||||
<a href="/tags/{{ tag | slugify }}">/{{ tag }}/</a>
|
<a href="/tags/{{ tag | slugify }}">/{{ tag }}/</a>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<hr>
|
<hr>
|
||||||
<div class=footContainer>
|
<div id="footer-container">
|
||||||
{% if config.extra.footer_content_license %}
|
{% if config.extra.footer_content_license %}
|
||||||
<div>Except where otherwise noted, content on this site is licensed under a
|
<div>Except where otherwise noted, content on this site is licensed under a
|
||||||
{% if config.extra.footer_content_license_link %}
|
{% if config.extra.footer_content_license_link %}
|
||||||
|
@ -9,14 +9,14 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
license.</div>
|
license.</div>
|
||||||
{% endif %}
|
{% 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>
|
<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 & <a target="_blank" rel="noopener noreferrer" href="https://github.com/Speyll/veqev">veqev</a> colors.<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 & <a target="_blank" rel="noopener noreferrer" href="https://github.com/Speyll/veqev">veqev</a> colors.<br>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
{% if config.generate_feed %}
|
{% if config.generate_feed %}
|
||||||
<div class="footRight">
|
<div>
|
||||||
<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>
|
<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>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -90,7 +90,9 @@
|
||||||
{% endblock feed %}
|
{% endblock feed %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% block css %}
|
{% 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 %}
|
{% endblock css %}
|
||||||
<script src="{{ get_url(path='js/script.js', trailing_slash=false) | safe }}" defer></script>
|
<script src="{{ get_url(path='js/script.js', trailing_slash=false) | safe }}" defer></script>
|
||||||
|
|
||||||
|
|
|
@ -5,27 +5,19 @@
|
||||||
{% set current_lang = section.lang %}
|
{% set current_lang = section.lang %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if config.extra.header_nav %}
|
{% if config.extra.header_nav %}
|
||||||
<nav class="navBar">
|
<nav id="nav-bar">
|
||||||
{% for nav_item in config.extra.header_nav %}
|
{% for nav_item in config.extra.header_nav %}
|
||||||
<a href="{{ nav_item.url }}" class="{% if nav_item.url == current_url %}active{% endif %}">
|
<a href="{{ nav_item.url }}" class="{% if nav_item.url == current_url %}active{% endif %}">
|
||||||
{% set language_key = 'name_' ~ current_lang %}
|
{% set language_key = 'name_' ~ current_lang %}
|
||||||
{{ nav_item[language_key] }}
|
{{ nav_item[language_key] }}
|
||||||
</a>
|
</a>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
<div>
|
||||||
<div class="themeSwitch">
|
<input type="checkbox" id="theme-toggle" style="display: none;">
|
||||||
{% if not config.extra.default_theme %}
|
<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>
|
||||||
<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>
|
<audio id="theme-sound">
|
||||||
<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>
|
<source src="{{ get_url(path='theme-switch-sound.mp3', trailing_slash=false) | safe }}" type="audio/mp3">
|
||||||
|
</audio>
|
||||||
{% 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>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
|
@ -32,7 +32,7 @@
|
||||||
|
|
||||||
{{ page.content | safe }}
|
{{ page.content | safe }}
|
||||||
|
|
||||||
<p class="tagsData">
|
<p class="tags-data">
|
||||||
{% if page.taxonomies.tags %}
|
{% if page.taxonomies.tags %}
|
||||||
{% for tag in page.taxonomies.tags %}
|
{% for tag in page.taxonomies.tags %}
|
||||||
<a href="/tags/{{ tag | slugify }}">/{{ tag }}/</a>
|
<a href="/tags/{{ tag | slugify }}">/{{ tag }}/</a>
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
{% set pages = section.pages %}
|
{% set pages = section.pages %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<ul class="titleList">
|
<ul class="title-list">
|
||||||
{% for page in pages %}
|
{% for page in pages %}
|
||||||
<li>
|
<li>
|
||||||
<a href="{{ page.permalink | safe }}">{{ page.title }}</a>
|
<a href="{{ page.permalink | safe }}">{{ page.title }}</a>
|
||||||
|
@ -20,6 +20,6 @@
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
{% if paginator %}
|
{% if paginator %}
|
||||||
<div class="metaData">{% if paginator.previous %}<a href="{{ paginator.first }}">⥶</a>   <a href="{{ paginator.previous }}"><</a>{% endif %}   {{ paginator.current_index }} / {{ paginator.number_pagers }}   {% if paginator.next %}<a href="{{ paginator.next }}">></a>   <a href="{{ paginator.last }}">⥸</a>{% endif %}</div>
|
<div class="accent-data">{% if paginator.previous %}<a href="{{ paginator.first }}">⥶</a>   <a href="{{ paginator.previous }}"><</a>{% endif %}   {{ paginator.current_index }} / {{ paginator.number_pagers }}   {% if paginator.next %}<a href="{{ paginator.next }}">></a>   <a href="{{ paginator.last }}">⥸</a>{% endif %}</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endblock content %}
|
{% endblock content %}
|
|
@ -1 +0,0 @@
|
||||||
<span class="metaData">{{content}}</span>
|
|
|
@ -1,4 +1,4 @@
|
||||||
<span class="webring">
|
<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 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>
|
Loading…
Reference in a new issue