This commit is contained in:
parent
02684342fd
commit
5f36cc80ed
31 changed files with 668 additions and 293 deletions
101
alt-popup.js
Normal file
101
alt-popup.js
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
// custom popups that appear on hover that uses the alt attribute on elements
|
||||
// generated with ai i'm SORRY but i'm stupid and this works so its probably fiiiine
|
||||
// i'll probably redo this when i can be assed to learn js myself
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
let popup = document.getElementById("alt-popup");
|
||||
|
||||
// add popup to all elements with alt or aria-label
|
||||
function initializePopups() {
|
||||
// find all elements with alt or aria-label
|
||||
const elementsWithAlt = document.querySelectorAll("[alt], [aria-label]");
|
||||
|
||||
// add mouse events to each element
|
||||
elementsWithAlt.forEach((element) => {
|
||||
element.addEventListener("mousemove", showPopup);
|
||||
element.addEventListener("mouseout", hidePopup);
|
||||
});
|
||||
}
|
||||
|
||||
// show popup and position it near the cursor
|
||||
function showPopup(event) {
|
||||
// get alt text or aria-label
|
||||
const altText = event.target.getAttribute("alt");
|
||||
const ariaLabel = event.target.getAttribute("aria-label");
|
||||
|
||||
// Use alt text if available, otherwise use aria-label
|
||||
const displayText = altText || ariaLabel;
|
||||
|
||||
if (displayText) {
|
||||
// use text in popup
|
||||
popup.textContent = displayText;
|
||||
|
||||
// Make the popup visible but with position:fixed and visibility:hidden
|
||||
// so we can measure its dimensions without it being visible yet
|
||||
popup.style.opacity = "0";
|
||||
popup.style.visibility = "visible";
|
||||
popup.style.position = "fixed"; // Changed from absolute to fixed
|
||||
|
||||
// Get viewport dimensions
|
||||
const viewportWidth = window.innerWidth;
|
||||
const viewportHeight = window.innerHeight;
|
||||
|
||||
// Get popup dimensions
|
||||
const popupWidth = popup.offsetWidth;
|
||||
const popupHeight = popup.offsetHeight;
|
||||
|
||||
// Use clientX/clientY which are relative to the viewport (for fixed positioning)
|
||||
let leftPos = event.clientX + 20;
|
||||
let topPos = event.clientY + 20;
|
||||
|
||||
// Check if popup would extend beyond right edge of viewport
|
||||
if (leftPos + popupWidth > viewportWidth) {
|
||||
// Flip to left side of cursor
|
||||
leftPos = event.clientX - popupWidth - 10;
|
||||
}
|
||||
|
||||
// Check if popup would extend beyond bottom edge of viewport
|
||||
if (topPos + popupHeight > viewportHeight) {
|
||||
// Flip to above cursor
|
||||
topPos = event.clientY - popupHeight - 10;
|
||||
}
|
||||
|
||||
// Additional check if flipping to left puts it offscreen
|
||||
if (leftPos < 0) {
|
||||
leftPos = 10;
|
||||
}
|
||||
|
||||
// Additional check if flipping to top puts it offscreen
|
||||
if (topPos < 0) {
|
||||
topPos = 10;
|
||||
}
|
||||
|
||||
// Set the final position and make it visible
|
||||
popup.style.left = leftPos + "px";
|
||||
popup.style.top = topPos + "px";
|
||||
popup.style.opacity = "1";
|
||||
popup.style.visibility = "visible";
|
||||
}
|
||||
}
|
||||
|
||||
function hidePopup() {
|
||||
popup.style.opacity = "0";
|
||||
popup.style.visibility = "hidden";
|
||||
}
|
||||
|
||||
initializePopups();
|
||||
|
||||
if (window.MutationObserver) {
|
||||
const observer = new MutationObserver((mutations) => {
|
||||
mutations.forEach((mutation) => {
|
||||
if (mutation.addedNodes.length) {
|
||||
initializePopups();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Only set up the observer once
|
||||
if (document.body) {
|
||||
observer.observe(document.body, { childList: true, subtree: true });
|
||||
}
|
||||
}
|
||||
});
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,93 +0,0 @@
|
|||
Copyright 2018 The Lexend Project Authors (https://github.com/googlefonts/lexend), with Reserved Font Name “RevReading Lexend”.
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://openfontlicense.org
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
Lexend Deca Variable Font
|
||||
=========================
|
||||
|
||||
This download contains Lexend Deca as both a variable font and static fonts.
|
||||
|
||||
Lexend Deca is a variable font with this axis:
|
||||
wght
|
||||
|
||||
This means all the styles are contained in a single file:
|
||||
LexendDeca-VariableFont_wght.ttf
|
||||
|
||||
If your app fully supports variable fonts, you can now pick intermediate styles
|
||||
that aren’t available as static fonts. Not all apps support variable fonts, and
|
||||
in those cases you can use the static font files for Lexend Deca:
|
||||
static/LexendDeca-Thin.ttf
|
||||
static/LexendDeca-ExtraLight.ttf
|
||||
static/LexendDeca-Light.ttf
|
||||
static/LexendDeca-Regular.ttf
|
||||
static/LexendDeca-Medium.ttf
|
||||
static/LexendDeca-SemiBold.ttf
|
||||
static/LexendDeca-Bold.ttf
|
||||
static/LexendDeca-ExtraBold.ttf
|
||||
static/LexendDeca-Black.ttf
|
||||
|
||||
Get started
|
||||
-----------
|
||||
|
||||
1. Install the font files you want to use
|
||||
|
||||
2. Use your app's font picker to view the font family and all the
|
||||
available styles
|
||||
|
||||
Learn more about variable fonts
|
||||
-------------------------------
|
||||
|
||||
https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
|
||||
https://variablefonts.typenetwork.com
|
||||
https://medium.com/variable-fonts
|
||||
|
||||
In desktop apps
|
||||
|
||||
https://theblog.adobe.com/can-variable-fonts-illustrator-cc
|
||||
https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
|
||||
|
||||
Online
|
||||
|
||||
https://developers.google.com/fonts/docs/getting_started
|
||||
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
|
||||
https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
|
||||
|
||||
Installing fonts
|
||||
|
||||
MacOS: https://support.apple.com/en-us/HT201749
|
||||
Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
|
||||
Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
|
||||
|
||||
Android Apps
|
||||
|
||||
https://developers.google.com/fonts/docs/android
|
||||
https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
|
||||
|
||||
License
|
||||
-------
|
||||
Please read the full license text (OFL.txt) to understand the permissions,
|
||||
restrictions and requirements for usage, redistribution, and modification.
|
||||
|
||||
You can use them in your products & projects – print or digital,
|
||||
commercial or otherwise.
|
||||
|
||||
This isn't legal advice, please consider consulting a lawyer and see the full
|
||||
license for all details.
|
||||
Binary file not shown.
Binary file not shown.
|
|
@ -19,7 +19,7 @@
|
|||
<meta lang="en-US">
|
||||
<meta property="og:url" content="https://synth.download/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="/script.js"></script>
|
||||
<script src="/alt-popup.js"></script>
|
||||
<script src="/script.js" defer="defer"></script>
|
||||
</head>
|
||||
|
||||
|
|
|
|||
14
button.js
Normal file
14
button.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
// snippet that copies the html for my button(s)
|
||||
function copyButtonSneexy() {
|
||||
navigator.clipboard.writeText(
|
||||
'<a href="https://synth.download"><img src="https://synth.download/assets/buttons/sneexy.svg" alt="Sneexy"></a>'
|
||||
);
|
||||
alert("button html copied!");
|
||||
}
|
||||
|
||||
function copyButtonSynthDownload() {
|
||||
navigator.clipboard.writeText(
|
||||
'<a href="https://synth.download"><img src="https://synth.download/assets/buttons/synth.download.svg" alt="Synth.Download!"></a>'
|
||||
);
|
||||
alert("button html copied!");
|
||||
}
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
<meta lang="en-US">
|
||||
<meta property="og:url" content="https://synth.download/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="/script.js"></script>
|
||||
<script src="/alt-popup.js"></script>
|
||||
<script async src="https://js.stripe.com/v3/buy-button.js"></script>
|
||||
</head>
|
||||
|
||||
|
|
@ -26,8 +26,8 @@
|
|||
|
||||
<!-- top navbar -->
|
||||
<div class="navbar">
|
||||
<a class="nav-base nav-baselink" href="/"><span class="tabler--grid-dots"></span> synth download!</a>
|
||||
<details class="nav-base nav-baselink-mobile">
|
||||
<a class="nav-base nav-left nav-baselink" href="/"><span class="tabler--grid-dots"></span> synth download!</a>
|
||||
<details class="nav-base nav-left nav-baselink-mobile">
|
||||
<summary><span class="tabler--grid-dots"></span> s <span aria-hidden="true" class="dot" style="background-color: var(--background) !important;"></span> d!</summary>
|
||||
<ul>
|
||||
<li>
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
<nav class="nav-base nav-links">
|
||||
<nav class="nav-base nav-left nav-links">
|
||||
<a href="/"><span class="tabler--home"></span> home</a>
|
||||
<div class="dot"></div>
|
||||
<a href="/me"><span class="tabler--user"></span> about me</a>
|
||||
|
|
@ -53,7 +53,71 @@
|
|||
<div class="dot"></div>
|
||||
<a href="/me#links"><span class="tabler--link"></span> links</a>
|
||||
</nav>
|
||||
<p aria-hidden="true" class="nav-base nav-systray">
|
||||
<details aria-label="Accessibility Settings" class="nav-base nav-right nav-accessibility">
|
||||
<summary><span aria-label="Accessibility Settings" class="tabler--accessible"></span></summary>
|
||||
<ul>
|
||||
<li>
|
||||
<p>Accessibility Settings</p>
|
||||
<p class="caption">Done with pure CSS! <span style="color: var(--red);">Settings do not save, sorry.</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden="true" class="seperator"></span>
|
||||
<p class="caption section" style="font-size: smaller; opacity: .9;">Font</p>
|
||||
|
||||
<span>
|
||||
<input type="radio" id="font-jbm" name="font-setting" value="jbm" checked />
|
||||
<label for="font-jbm" style="font-family: 'JetBrains Mono', system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">JetBrains Mono</label><br>
|
||||
</span>
|
||||
<span>
|
||||
<input type="radio" id="font-ahn" name="font-setting" value="ahn" />
|
||||
<label for="font-ahn" style="font-family: 'Atkinson Hyperlegible Next', system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">Atkinson Hyperlegible Next</label><br>
|
||||
</span>
|
||||
<span>
|
||||
<input type="radio" id="font-inter" name="font-setting" value="inter" />
|
||||
<label for="font-inter" style="font-family: 'Inter', system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">Inter</label><br>
|
||||
</span>
|
||||
<p class="caption" style="padding: .2rem 0px;">Support not guaranteed, but provided as options anyways:</p>
|
||||
<span>
|
||||
<input type="radio" id="font-sans-serif" name="font-setting" value="sans-serif" />
|
||||
<label for="font-sans-serif" style="font-family: sans-serif, system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, serif !important;">Sans Serif</label><br>
|
||||
</span>
|
||||
<span>
|
||||
<input type="radio" id="font-serif" name="font-setting" value="serif" />
|
||||
<label for="font-serif" style="font-family: serif, system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">Serif</label><br>
|
||||
</span>
|
||||
<span>
|
||||
<input type="radio" id="font-monospace" name="font-setting" value="monospace" />
|
||||
<label for="font-monospace" style="font-family: monospace, system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">Monospace</label><br>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden="true" class="seperator"></span>
|
||||
<span>
|
||||
<input type="checkbox" id="uncapitalization" name="uncapitalization" />
|
||||
<label for="uncapitalization">Disable forced uncapitalization</label><br>
|
||||
</span>
|
||||
<span>
|
||||
<input type="checkbox" id="disable-bg" name="disable-bg" />
|
||||
<label for="disable-bg">Disable background gradient</label><br>
|
||||
</span>
|
||||
<span>
|
||||
<input type="checkbox" id="disable-focus-animations" name="focus-animations" />
|
||||
<label for="disable-focus-animations">Disable focus animations</label><br>
|
||||
</span>
|
||||
<span>
|
||||
<input type="checkbox" id="disable-alttext" name="disable-alttext" />
|
||||
<label for="disable-alttext">Disable alt-text popup</label>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden="true" class="seperator"></span>
|
||||
<p class="caption">Disabling the alt-text popup or forced uncapitalization does not affect "normal" accessibility. The alt-text pop-up is custom made in replacement of using the <span class="code">title</span> attribute, and forced uncapitalization is done using CSS's <span class="code">text-transform</span>.</p>
|
||||
<p class="caption" style="padding: .6rem 0px;">Dark/Light mode toggling will be available whenever I figure out how to do so entirely just using CSS or until I decide to remake this with JavaScript.</p>
|
||||
<p class="caption">Saving these settings will also be available whenever I decide to remake this using/attach some JavaScript to this instead.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
<p aria-hidden="true" class="nav-base nav-right nav-systray">
|
||||
<span class="tabler--bell"></span>
|
||||
<span class="tabler--volume"></span>
|
||||
<span class="tabler--wifi"></span>
|
||||
|
|
|
|||
42
font.css
42
font.css
|
|
@ -40,6 +40,48 @@
|
|||
font-style: italic;
|
||||
}
|
||||
|
||||
/* font config, Atkinson Hyperlegible Next */
|
||||
|
||||
@font-face {
|
||||
font-family: "Atkinson Hyperlegible Next";
|
||||
src: local("Atkinson Hyperlegible Next"),
|
||||
url("/assets/fonts/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-Regular.woff2")
|
||||
format("woff"),
|
||||
local("JetBrainsMono Nerd Font");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Atkinson Hyperlegible Next";
|
||||
src: local("Atkinson Hyperlegible Next"),
|
||||
url("/assets/fonts/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-Bold.woff2")
|
||||
format("woff"),
|
||||
local("Atkinson Hyperlegible");
|
||||
font-weight: bold;
|
||||
font-style: bold;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Atkinson Hyperlegible Next";
|
||||
src: local("Atkinson Hyperlegible Next"),
|
||||
url("/assets/fonts/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-Italic.woff2")
|
||||
format("woff"),
|
||||
local("Atkinson Hyperlegible");
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Atkinson Hyperlegible Next";
|
||||
src: local("Atkinson Hyperlegible Next"),
|
||||
url("/assets/fonts/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-BoldItalic.woff2")
|
||||
format("woff"),
|
||||
local("Atkinson Hyperlegible");
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* font config, Inter
|
||||
original css by Inter, modified by Sneexy */
|
||||
|
||||
|
|
|
|||
2
home.css
2
home.css
|
|
@ -1,3 +1,5 @@
|
|||
/* home.css - for use with /me, mainly */
|
||||
|
||||
/* about me section/first terminal */
|
||||
|
||||
#sneexy > section {
|
||||
|
|
|
|||
76
index.html
76
index.html
|
|
@ -10,6 +10,7 @@
|
|||
<link rel="stylesheet" type="text/css" href="/font.css">
|
||||
<link rel="stylesheet" type="text/css" href="/tabler.css">
|
||||
<link rel="stylesheet" type="text/css" href="/style.css">
|
||||
<link rel="stylesheet" type="text/css" href="/accessibility.css">
|
||||
<link rel="stylesheet" type="text/css" href="/site.css">
|
||||
<link rel="canonical" href="https://synth.download/">
|
||||
<link rel="me" href="https://booping.synth.download/@sneexy">
|
||||
|
|
@ -18,15 +19,16 @@
|
|||
<meta lang="en-US">
|
||||
<meta property="og:url" content="https://synth.download/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="/script.js"></script>
|
||||
<script src="/alt-popup.js"></script>
|
||||
<script src="/button.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- top navbar -->
|
||||
<div class="navbar">
|
||||
<a class="nav-base nav-baselink" href="/"><span class="tabler--grid-dots"></span> synth download!</a>
|
||||
<details class="nav-base nav-baselink-mobile">
|
||||
<a class="nav-base nav-left nav-baselink" href="/"><span class="tabler--grid-dots"></span> synth download!</a>
|
||||
<details class="nav-base nav-left nav-baselink-mobile">
|
||||
<summary><span class="tabler--grid-dots"></span> s <span aria-hidden="true" class="dot" style="background-color: var(--background) !important;"></span> d!</summary>
|
||||
<ul>
|
||||
<li>
|
||||
|
|
@ -43,7 +45,7 @@
|
|||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
<nav class="nav-base nav-links">
|
||||
<nav class="nav-base nav-left nav-links">
|
||||
<a href="/"><span class="tabler--home"></span> home</a>
|
||||
<div class="dot"></div>
|
||||
<a href="/me"><span class="tabler--user"></span> about me</a>
|
||||
|
|
@ -52,7 +54,71 @@
|
|||
<div class="dot"></div>
|
||||
<a href="/me#links"><span class="tabler--link"></span> links</a>
|
||||
</nav>
|
||||
<p aria-hidden="true" class="nav-base nav-systray">
|
||||
<details aria-label="Accessibility Settings" class="nav-base nav-right nav-accessibility">
|
||||
<summary><span aria-label="Accessibility Settings" class="tabler--accessible"></span></summary>
|
||||
<ul>
|
||||
<li>
|
||||
<p>Accessibility Settings</p>
|
||||
<p class="caption">Done with pure CSS! <span style="color: var(--red);">Settings do not save, sorry.</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden="true" class="seperator"></span>
|
||||
<p class="caption section" style="font-size: smaller; opacity: .9;">Font</p>
|
||||
|
||||
<span>
|
||||
<input type="radio" id="font-jbm" name="font-setting" value="jbm" checked />
|
||||
<label for="font-jbm" style="font-family: 'JetBrains Mono', system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">JetBrains Mono</label><br>
|
||||
</span>
|
||||
<span>
|
||||
<input type="radio" id="font-ahn" name="font-setting" value="ahn" />
|
||||
<label for="font-ahn" style="font-family: 'Atkinson Hyperlegible Next', system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">Atkinson Hyperlegible Next</label><br>
|
||||
</span>
|
||||
<span>
|
||||
<input type="radio" id="font-inter" name="font-setting" value="inter" />
|
||||
<label for="font-inter" style="font-family: 'Inter', system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">Inter</label><br>
|
||||
</span>
|
||||
<p class="caption" style="padding: .2rem 0px;">Support not guaranteed, but provided as options anyways:</p>
|
||||
<span>
|
||||
<input type="radio" id="font-sans-serif" name="font-setting" value="sans-serif" />
|
||||
<label for="font-sans-serif" style="font-family: sans-serif, system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, serif !important;">Sans Serif</label><br>
|
||||
</span>
|
||||
<span>
|
||||
<input type="radio" id="font-serif" name="font-setting" value="serif" />
|
||||
<label for="font-serif" style="font-family: serif, system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">Serif</label><br>
|
||||
</span>
|
||||
<span>
|
||||
<input type="radio" id="font-monospace" name="font-setting" value="monospace" />
|
||||
<label for="font-monospace" style="font-family: monospace, system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">Monospace</label><br>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden="true" class="seperator"></span>
|
||||
<span>
|
||||
<input type="checkbox" id="uncapitalization" name="uncapitalization" />
|
||||
<label for="uncapitalization">Disable forced uncapitalization</label><br>
|
||||
</span>
|
||||
<span>
|
||||
<input type="checkbox" id="disable-bg" name="disable-bg" />
|
||||
<label for="disable-bg">Disable background gradient</label><br>
|
||||
</span>
|
||||
<span>
|
||||
<input type="checkbox" id="disable-focus-animations" name="focus-animations" />
|
||||
<label for="disable-focus-animations">Disable focus animations</label><br>
|
||||
</span>
|
||||
<span>
|
||||
<input type="checkbox" id="disable-alttext" name="disable-alttext" />
|
||||
<label for="disable-alttext">Disable alt-text popup</label>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden="true" class="seperator"></span>
|
||||
<p class="caption">Disabling the alt-text popup or forced uncapitalization does not affect "normal" accessibility. The alt-text pop-up is custom made in replacement of using the <span class="code">title</span> attribute, and forced uncapitalization is done using CSS's <span class="code">text-transform</span>.</p>
|
||||
<p class="caption" style="padding: .6rem 0px;">Dark/Light mode toggling will be available whenever I figure out how to do so entirely just using CSS or until I decide to remake this with JavaScript.</p>
|
||||
<p class="caption">Saving these settings will also be available whenever I decide to remake this using/attach some JavaScript to this instead.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
<p aria-hidden="true" class="nav-base nav-right nav-systray">
|
||||
<span class="tabler--bell"></span>
|
||||
<span class="tabler--volume"></span>
|
||||
<span class="tabler--wifi"></span>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<meta lang="en-US">
|
||||
<meta property="og:url" content="https://synth.download/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="/script.js"></script>
|
||||
<script src="/alt-popup.js"></script>
|
||||
<script defer src="https://booping.synth.download/embed.js"></script>
|
||||
</head>
|
||||
|
||||
|
|
@ -28,8 +28,8 @@
|
|||
|
||||
<!-- top navbar -->
|
||||
<div class="navbar">
|
||||
<a class="nav-base nav-baselink" href="/"><span class="tabler--grid-dots"></span> synth download!</a>
|
||||
<details class="nav-base nav-baselink-mobile">
|
||||
<a class="nav-base nav-left nav-baselink" href="/"><span class="tabler--grid-dots"></span> synth download!</a>
|
||||
<details class="nav-base nav-left nav-baselink-mobile">
|
||||
<summary><span class="tabler--grid-dots"></span> s <span aria-hidden="true" class="dot" style="background-color: var(--background) !important;"></span> d!</summary>
|
||||
<ul>
|
||||
<li>
|
||||
|
|
@ -46,16 +46,80 @@
|
|||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
<nav class="nav-base nav-links">
|
||||
<nav class="nav-base nav-left nav-links">
|
||||
<a href="/"><span class="tabler--home"></span> home</a>
|
||||
<div aria-hidden="true" class="dot"></div>
|
||||
<div class="dot"></div>
|
||||
<a href="/me"><span class="tabler--user"></span> about me</a>
|
||||
<div aria-hidden="true" class="dot"></div>
|
||||
<div class="dot"></div>
|
||||
<a href="https://notebook.synth.download"><span class="tabler--notebook"></span> notebook</a>
|
||||
<div aria-hidden="true" class="dot"></div>
|
||||
<div class="dot"></div>
|
||||
<a href="/me#links"><span class="tabler--link"></span> links</a>
|
||||
</nav>
|
||||
<p aria-hidden="true" class="nav-base nav-systray">
|
||||
<details aria-label="Accessibility Settings" class="nav-base nav-right nav-accessibility">
|
||||
<summary><span aria-label="Accessibility Settings" class="tabler--accessible"></span></summary>
|
||||
<ul>
|
||||
<li>
|
||||
<p>Accessibility Settings</p>
|
||||
<p class="caption">Done with pure CSS! <span style="color: var(--red);">Settings do not save, sorry.</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden="true" class="seperator"></span>
|
||||
<p class="caption section" style="font-size: smaller; opacity: .9;">Font</p>
|
||||
|
||||
<span>
|
||||
<input type="radio" id="font-jbm" name="font-setting" value="jbm" checked />
|
||||
<label for="font-jbm" style="font-family: 'JetBrains Mono', system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">JetBrains Mono</label><br>
|
||||
</span>
|
||||
<span>
|
||||
<input type="radio" id="font-ahn" name="font-setting" value="ahn" />
|
||||
<label for="font-ahn" style="font-family: 'Atkinson Hyperlegible Next', system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">Atkinson Hyperlegible Next</label><br>
|
||||
</span>
|
||||
<span>
|
||||
<input type="radio" id="font-inter" name="font-setting" value="inter" />
|
||||
<label for="font-inter" style="font-family: 'Inter', system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">Inter</label><br>
|
||||
</span>
|
||||
<p class="caption" style="padding: .2rem 0px;">Support not guaranteed, but provided as options anyways:</p>
|
||||
<span>
|
||||
<input type="radio" id="font-sans-serif" name="font-setting" value="sans-serif" />
|
||||
<label for="font-sans-serif" style="font-family: sans-serif, system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, serif !important;">Sans Serif</label><br>
|
||||
</span>
|
||||
<span>
|
||||
<input type="radio" id="font-serif" name="font-setting" value="serif" />
|
||||
<label for="font-serif" style="font-family: serif, system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">Serif</label><br>
|
||||
</span>
|
||||
<span>
|
||||
<input type="radio" id="font-monospace" name="font-setting" value="monospace" />
|
||||
<label for="font-monospace" style="font-family: monospace, system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">Monospace</label><br>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden="true" class="seperator"></span>
|
||||
<span>
|
||||
<input type="checkbox" id="uncapitalization" name="uncapitalization" />
|
||||
<label for="uncapitalization">Disable forced uncapitalization</label><br>
|
||||
</span>
|
||||
<span>
|
||||
<input type="checkbox" id="disable-bg" name="disable-bg" />
|
||||
<label for="disable-bg">Disable background gradient</label><br>
|
||||
</span>
|
||||
<span>
|
||||
<input type="checkbox" id="disable-focus-animations" name="focus-animations" />
|
||||
<label for="disable-focus-animations">Disable focus animations</label><br>
|
||||
</span>
|
||||
<span>
|
||||
<input type="checkbox" id="disable-alttext" name="disable-alttext" />
|
||||
<label for="disable-alttext">Disable alt-text popup</label>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden="true" class="seperator"></span>
|
||||
<p class="caption">Disabling the alt-text popup or forced uncapitalization does not affect "normal" accessibility. The alt-text pop-up is custom made in replacement of using the <span class="code">title</span> attribute, and forced uncapitalization is done using CSS's <span class="code">text-transform</span>.</p>
|
||||
<p class="caption" style="padding: .6rem 0px;">Dark/Light mode toggling will be available whenever I figure out how to do so entirely just using CSS or until I decide to remake this with JavaScript.</p>
|
||||
<p class="caption">Saving these settings will also be available whenever I decide to remake this using/attach some JavaScript to this instead.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
<p aria-hidden="true" class="nav-base nav-right nav-systray">
|
||||
<span class="tabler--bell"></span>
|
||||
<span class="tabler--volume"></span>
|
||||
<span class="tabler--wifi"></span>
|
||||
|
|
|
|||
|
|
@ -18,15 +18,15 @@
|
|||
<meta lang="en-US">
|
||||
<meta property="og:url" content="https://synth.download/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="/script.js"></script>
|
||||
<script src="/alt-popup.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- top navbar -->
|
||||
<div class="navbar">
|
||||
<a class="nav-base nav-baselink" href="/"><span class="tabler--grid-dots"></span> synth download!</a>
|
||||
<details class="nav-base nav-baselink-mobile">
|
||||
<a class="nav-base nav-left nav-baselink" href="/"><span class="tabler--grid-dots"></span> synth download!</a>
|
||||
<details class="nav-base nav-left nav-baselink-mobile">
|
||||
<summary><span class="tabler--grid-dots"></span> s <span aria-hidden="true" class="dot" style="background-color: var(--background) !important;"></span> d!</summary>
|
||||
<ul>
|
||||
<li>
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
<nav class="nav-base nav-links">
|
||||
<nav class="nav-base nav-left nav-links">
|
||||
<a href="/"><span class="tabler--home"></span> home</a>
|
||||
<div class="dot"></div>
|
||||
<a href="/me"><span class="tabler--user"></span> about me</a>
|
||||
|
|
@ -52,7 +52,71 @@
|
|||
<div class="dot"></div>
|
||||
<a href="/me#links"><span class="tabler--link"></span> links</a>
|
||||
</nav>
|
||||
<p aria-hidden="true" class="nav-base nav-systray">
|
||||
<details aria-label="Accessibility Settings" class="nav-base nav-right nav-accessibility">
|
||||
<summary><span aria-label="Accessibility Settings" class="tabler--accessible"></span></summary>
|
||||
<ul>
|
||||
<li>
|
||||
<p>Accessibility Settings</p>
|
||||
<p class="caption">Done with pure CSS! <span style="color: var(--red);">Settings do not save, sorry.</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden="true" class="seperator"></span>
|
||||
<p class="caption section" style="font-size: smaller; opacity: .9;">Font</p>
|
||||
|
||||
<span>
|
||||
<input type="radio" id="font-jbm" name="font-setting" value="jbm" checked />
|
||||
<label for="font-jbm" style="font-family: 'JetBrains Mono', system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">JetBrains Mono</label><br>
|
||||
</span>
|
||||
<span>
|
||||
<input type="radio" id="font-ahn" name="font-setting" value="ahn" />
|
||||
<label for="font-ahn" style="font-family: 'Atkinson Hyperlegible Next', system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">Atkinson Hyperlegible Next</label><br>
|
||||
</span>
|
||||
<span>
|
||||
<input type="radio" id="font-inter" name="font-setting" value="inter" />
|
||||
<label for="font-inter" style="font-family: 'Inter', system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">Inter</label><br>
|
||||
</span>
|
||||
<p class="caption" style="padding: .2rem 0px;">Support not guaranteed, but provided as options anyways:</p>
|
||||
<span>
|
||||
<input type="radio" id="font-sans-serif" name="font-setting" value="sans-serif" />
|
||||
<label for="font-sans-serif" style="font-family: sans-serif, system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, serif !important;">Sans Serif</label><br>
|
||||
</span>
|
||||
<span>
|
||||
<input type="radio" id="font-serif" name="font-setting" value="serif" />
|
||||
<label for="font-serif" style="font-family: serif, system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">Serif</label><br>
|
||||
</span>
|
||||
<span>
|
||||
<input type="radio" id="font-monospace" name="font-setting" value="monospace" />
|
||||
<label for="font-monospace" style="font-family: monospace, system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">Monospace</label><br>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden="true" class="seperator"></span>
|
||||
<span>
|
||||
<input type="checkbox" id="uncapitalization" name="uncapitalization" />
|
||||
<label for="uncapitalization">Disable forced uncapitalization</label><br>
|
||||
</span>
|
||||
<span>
|
||||
<input type="checkbox" id="disable-bg" name="disable-bg" />
|
||||
<label for="disable-bg">Disable background gradient</label><br>
|
||||
</span>
|
||||
<span>
|
||||
<input type="checkbox" id="disable-focus-animations" name="focus-animations" />
|
||||
<label for="disable-focus-animations">Disable focus animations</label><br>
|
||||
</span>
|
||||
<span>
|
||||
<input type="checkbox" id="disable-alttext" name="disable-alttext" />
|
||||
<label for="disable-alttext">Disable alt-text popup</label>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden="true" class="seperator"></span>
|
||||
<p class="caption">Disabling the alt-text popup or forced uncapitalization does not affect "normal" accessibility. The alt-text pop-up is custom made in replacement of using the <span class="code">title</span> attribute, and forced uncapitalization is done using CSS's <span class="code">text-transform</span>.</p>
|
||||
<p class="caption" style="padding: .6rem 0px;">Dark/Light mode toggling will be available whenever I figure out how to do so entirely just using CSS or until I decide to remake this with JavaScript.</p>
|
||||
<p class="caption">Saving these settings will also be available whenever I decide to remake this using/attach some JavaScript to this instead.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
<p aria-hidden="true" class="nav-base nav-right nav-systray">
|
||||
<span class="tabler--bell"></span>
|
||||
<span class="tabler--volume"></span>
|
||||
<span class="tabler--wifi"></span>
|
||||
|
|
|
|||
75
script.js
75
script.js
|
|
@ -1,75 +0,0 @@
|
|||
// custom popups that appear on hover that uses the alt attribute on elements
|
||||
// generated with ai i'm SORRY but i'm stupid and this works so its probably fiiiine
|
||||
// i'll probably redo this when i can be assed to learn js myself
|
||||
// Wait for DOM to be fully loaded before executing code (do we even need this. my site is just basic bitch html)
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
let popup = document.getElementById("alt-popup");
|
||||
|
||||
// add popup to all elements with alt or aria-label
|
||||
function initializePopups() {
|
||||
// find all elements with alt or aria-label
|
||||
const elementsWithAlt = document.querySelectorAll("[alt], [aria-label]");
|
||||
|
||||
// add mouse events to each element
|
||||
elementsWithAlt.forEach((element) => {
|
||||
element.addEventListener("mousemove", showPopup);
|
||||
element.addEventListener("mouseout", hidePopup);
|
||||
});
|
||||
}
|
||||
|
||||
// show popup and position it near the cursor
|
||||
function showPopup(event) {
|
||||
// get alt text or aria-label
|
||||
const altText = event.target.getAttribute("alt");
|
||||
const ariaLabel = event.target.getAttribute("aria-label");
|
||||
|
||||
// Use alt text if available, otherwise use aria-label
|
||||
const displayText = altText || ariaLabel;
|
||||
|
||||
if (displayText) {
|
||||
// use text in popup
|
||||
popup.textContent = displayText;
|
||||
|
||||
// correct popup positioning away from cursor and make it visible
|
||||
popup.style.left = event.clientX + 20 + "px";
|
||||
popup.style.top = event.clientY + 20 + "px";
|
||||
popup.style.opacity = "1";
|
||||
}
|
||||
}
|
||||
|
||||
function hidePopup() {
|
||||
popup.style.opacity = "0";
|
||||
}
|
||||
|
||||
initializePopups();
|
||||
|
||||
if (window.MutationObserver) {
|
||||
const observer = new MutationObserver((mutations) => {
|
||||
mutations.forEach((mutation) => {
|
||||
if (mutation.addedNodes.length) {
|
||||
initializePopups();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Only set up the observer once
|
||||
if (document.body) {
|
||||
observer.observe(document.body, { childList: true, subtree: true });
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// snippet that copies the html for my button(s)
|
||||
function copyButtonSneexy() {
|
||||
navigator.clipboard.writeText(
|
||||
'<a href="https://synth.download"><img src="https://synth.download/assets/buttons/sneexy.svg" alt="Sneexy"></a>'
|
||||
);
|
||||
alert("button html copied!");
|
||||
}
|
||||
|
||||
function copyButtonSynthDownload() {
|
||||
navigator.clipboard.writeText(
|
||||
'<a href="https://synth.download"><img src="https://synth.download/assets/buttons/synth.download.svg" alt="Synth.Download!"></a>'
|
||||
);
|
||||
alert("button html copied!");
|
||||
}
|
||||
240
style.css
240
style.css
|
|
@ -1,3 +1,85 @@
|
|||
/* style.css - general, reusable styling */
|
||||
|
||||
/* ---------------------------------
|
||||
- choosable accessibility settings -
|
||||
---------------------------------- */
|
||||
|
||||
/* - font settings - */
|
||||
|
||||
/* jetbrains mono */
|
||||
:root:has(#font-jbm:checked) {
|
||||
--font-family: 'JetBrains Mono', 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif;
|
||||
|
||||
.navbar .nav-base.nav-right.nav-systray span {
|
||||
margin: 0px -.1rem;
|
||||
}
|
||||
}
|
||||
/* atkinson hyperlegible next */
|
||||
:root:has(#font-ahn:checked) {
|
||||
--font-family: 'Atkinson Hyperlegible Next', 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif;
|
||||
}
|
||||
/* inter */
|
||||
:root:has(#font-inter:checked) {
|
||||
--font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif;
|
||||
}
|
||||
|
||||
/* (browser) sans serif */
|
||||
:root:has(#font-sans-serif:checked) {
|
||||
--font-family: sans-serif, 'Segoe UI', Tahoma, Geneva, Verdana, system-ui;
|
||||
}
|
||||
|
||||
/* (browser) serif */
|
||||
:root:has(#font-serif:checked) {
|
||||
--font-family: serif, 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif;
|
||||
}
|
||||
|
||||
/* (browser) monospace */
|
||||
:root:has(#font-monospace:checked) {
|
||||
--font-family: monospace, 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif;
|
||||
}
|
||||
|
||||
/* - misc - */
|
||||
|
||||
/* disable forced uncapitalization */
|
||||
:root:has(#uncapitalization:checked) {
|
||||
body {
|
||||
text-transform: none !important;
|
||||
}
|
||||
}
|
||||
/* disable background gradient */
|
||||
:root:has(#disable-bg:checked) {
|
||||
body {
|
||||
background: var(--background) !important;
|
||||
}
|
||||
}
|
||||
/* disable focus animations */
|
||||
:root:has(#disable-focus-animations:checked) {
|
||||
.window {
|
||||
transition: unset !important;
|
||||
}
|
||||
.window:hover {
|
||||
transition: unset !important;
|
||||
animation: unset !important;
|
||||
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px !important;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
transition: unset !important;
|
||||
}
|
||||
.navbar:hover {
|
||||
transition: unset !important;
|
||||
animation: unset !important;
|
||||
background-color: color-mix(in srgb, var(--accent) 30%, transparent) !important;
|
||||
border-bottom: .2rem solid var(--accent) !important;
|
||||
}
|
||||
}
|
||||
/* disable custom alt text popup */
|
||||
:root:has(#disable-alttext:checked) {
|
||||
.alt-popup {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------------
|
||||
- background wallpaper, global font -
|
||||
---------------------------------- */
|
||||
|
|
@ -5,7 +87,7 @@
|
|||
body {
|
||||
background: linear-gradient(var(--background), color-mix(in srgb, var(--accent) 25%, var(--background)));
|
||||
min-height: calc(100vh - 4rem);
|
||||
font-family: 'JetBrains Mono', monospace, system-ui, sans-serif;
|
||||
font-family: var(--font-family);
|
||||
font-size: 1.125rem;
|
||||
text-transform: lowercase;
|
||||
margin: unset !important; /* idk why it does that */
|
||||
|
|
@ -38,7 +120,6 @@ body {
|
|||
}
|
||||
|
||||
a {
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
padding: .3rem 0rem .3rem .5rem;
|
||||
text-decoration: none;
|
||||
color: var(--foreground);
|
||||
|
|
@ -181,7 +262,6 @@ footer {
|
|||
min-height: 1.8em !important;
|
||||
max-height: 1.8em !important;
|
||||
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
align-content: center;
|
||||
vertical-align: middle;
|
||||
background-color: color-mix(in srgb, var(--accent) 30%, transparent);
|
||||
|
|
@ -195,34 +275,38 @@ footer {
|
|||
max-width: fit-content;
|
||||
align-content: center;
|
||||
}
|
||||
.nav-baselink {
|
||||
background-color: var(--accent);
|
||||
.nav-left {
|
||||
text-decoration: unset !important;
|
||||
color: var(--background);
|
||||
padding: 0px .4rem .1rem !important;
|
||||
border-bottom-right-radius: 1rem;
|
||||
height: 1.9rem;
|
||||
}
|
||||
.nav-left::before {
|
||||
background: var(--background);
|
||||
content: '';
|
||||
display: block;
|
||||
left: 5rem;
|
||||
margin-left: .67rem;
|
||||
min-height: 2rem;
|
||||
min-width: 10rem;
|
||||
position: absolute;
|
||||
top: 0rem;
|
||||
z-index: -1;
|
||||
}
|
||||
.nav-baselink {
|
||||
background-color: var(--accent);
|
||||
color: var(--background);
|
||||
|
||||
svg {
|
||||
color: var(--background) !important;
|
||||
}
|
||||
}
|
||||
.nav-baselink::before {
|
||||
content: '';
|
||||
background: var(--background);
|
||||
min-width: 14rem;
|
||||
min-height: 1.7rem;
|
||||
display: block;
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
}
|
||||
.nav-baselink-mobile {
|
||||
display: none;
|
||||
}
|
||||
.nav-links {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
padding: 0px .4rem !important;
|
||||
border-bottom-right-radius: 1rem;
|
||||
}
|
||||
.nav-links a {
|
||||
color: var(--foreground);
|
||||
|
|
@ -232,15 +316,64 @@ footer {
|
|||
color: var(--accent);
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
.nav-systray {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
|
||||
.nav-right {
|
||||
margin-left: auto !important;
|
||||
padding: 0px .4rem !important;
|
||||
border-bottom-left-radius: 1rem;
|
||||
i {
|
||||
padding: 0px 2px 0px 2px;
|
||||
height: 2rem;
|
||||
}
|
||||
.nav-accessibility {
|
||||
background-color: var(--accent);
|
||||
color: var(--background);
|
||||
position: absolute;
|
||||
right: 7.7rem;
|
||||
span {
|
||||
transform: scale(1.3) translateY(-.05rem) translateX(.2rem);
|
||||
}
|
||||
|
||||
ul {
|
||||
background-color: var(--background);
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-bottom: var(--accent) solid .15rem;
|
||||
border-left: var(--accent) solid .15rem;
|
||||
max-height: 27rem;
|
||||
min-height: 27rem;
|
||||
min-width: 17rem;
|
||||
overflow: scroll;
|
||||
position: absolute;
|
||||
right: -7.6rem;
|
||||
top: .94rem;
|
||||
width: auto;
|
||||
|
||||
li {
|
||||
color: var(--foreground);
|
||||
list-style-type: none;
|
||||
margin-left: -2rem;
|
||||
padding: .4rem;
|
||||
|
||||
span {
|
||||
padding: .1rem 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-accessibility::before {
|
||||
background: var(--accent);
|
||||
content: '';
|
||||
display: block;
|
||||
margin-left: .67rem;
|
||||
min-height: 2rem;
|
||||
min-width: 10rem;
|
||||
position: absolute;
|
||||
top: 0rem;
|
||||
z-index: -1;
|
||||
}
|
||||
.nav-systray {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
padding: 0px .1rem;
|
||||
min-width: 6.45rem;
|
||||
}
|
||||
|
||||
a, p {
|
||||
|
|
@ -258,6 +391,10 @@ footer {
|
|||
transition: .2s background-color, .1s border-bottom;
|
||||
background-color: var(--accent);
|
||||
border-bottom: .1rem solid var(--accent);
|
||||
|
||||
.nav-accessibility {
|
||||
border-left: .2rem solid var(--background);
|
||||
}
|
||||
}
|
||||
|
||||
/* text formatting and config stuff
|
||||
|
|
@ -335,6 +472,22 @@ h1 a:hover {
|
|||
color: var(--foreground) !important;
|
||||
}
|
||||
|
||||
/* code (enforced monospace) */
|
||||
.code {
|
||||
font-family: 'JetBrains Mono', monospace, 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif !important;
|
||||
}
|
||||
|
||||
/* caption styled text */
|
||||
.caption {
|
||||
font-size: small;
|
||||
opacity: .8;
|
||||
|
||||
.section {
|
||||
font-size: smaller;
|
||||
opacity: .9;
|
||||
}
|
||||
}
|
||||
|
||||
/* the dot */
|
||||
.dot {
|
||||
display: inline-flex;
|
||||
|
|
@ -348,6 +501,17 @@ h1 a:hover {
|
|||
margin-bottom: .1rem;
|
||||
}
|
||||
|
||||
/* seperator */
|
||||
.seperator::before {
|
||||
border-bottom: .1rem solid var(--border);
|
||||
content: '';
|
||||
display: block;
|
||||
height: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
margin-top: -.7rem;
|
||||
min-width: max-content;
|
||||
}
|
||||
|
||||
/* summary styling */
|
||||
|
||||
summary {
|
||||
|
|
@ -612,6 +776,9 @@ footer {
|
|||
.nav-base {
|
||||
padding: .27em .2em !important;
|
||||
}
|
||||
.nav-left {
|
||||
height: 1.9rem;
|
||||
}
|
||||
.nav-baselink {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
@ -636,10 +803,6 @@ footer {
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
i {
|
||||
padding-right: .4em;
|
||||
}
|
||||
|
||||
ul {
|
||||
background-color: var(--background);
|
||||
border-bottom-right-radius: 1rem;
|
||||
|
|
@ -653,19 +816,24 @@ footer {
|
|||
list-style-type: none;
|
||||
margin-left: -2em;
|
||||
padding-bottom: unset !important;
|
||||
span {
|
||||
padding-right: .4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-baselink-mobile::before {
|
||||
display: none;
|
||||
}
|
||||
.nav-baselink-mobile summary {
|
||||
display: block !important;
|
||||
margin-top: 0px !important;
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
background-color: var(--accent);
|
||||
text-decoration: unset !important;
|
||||
color: var(--background);
|
||||
padding: .3em;
|
||||
border-bottom-right-radius: 1rem;
|
||||
width: 4.7em;
|
||||
width: 5.7em;
|
||||
|
||||
i:not(:first-child) {
|
||||
margin-left: -.5em;
|
||||
|
|
@ -676,6 +844,20 @@ footer {
|
|||
.nav-links {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
height: 1.4rem;
|
||||
}
|
||||
.nav-accessibility {
|
||||
right: 7.6rem;
|
||||
min-width: 1.6rem;
|
||||
span {
|
||||
transform: scale(1.3) translateY(-.05rem) translateX(.2rem);
|
||||
}
|
||||
}
|
||||
.nav-systray {
|
||||
padding: .27em .5em !important;
|
||||
}
|
||||
}
|
||||
|
||||
.window:not(#footer) {
|
||||
|
|
@ -722,4 +904,4 @@ footer {
|
|||
|
||||
margin-bottom: .8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<meta lang="en-US">
|
||||
<meta property="og:url" content="https://disappearing.synth.download/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="/script.js"></script>
|
||||
<script src="/alt-popup.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
|
|||
15
tabler.css
15
tabler.css
|
|
@ -6,6 +6,21 @@ uses Tabler icons via https://icon-sets.iconify.design/tabler to generate reusab
|
|||
---- constantly reused -----
|
||||
---------------------------- */
|
||||
|
||||
/* ti-accessible */
|
||||
.tabler--accessible {
|
||||
display: inline-block;
|
||||
width: 1.3rem;
|
||||
height: 1.3rem;
|
||||
vertical-align: top;
|
||||
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0'/%3E%3Cpath d='m10 16.5l2-3l2 3m-2-3v-2l3-1m-6 0l3 1'/%3E%3Ccircle cx='12' cy='7.5' r='.5' fill='%23000'/%3E%3C/g%3E%3C/svg%3E");
|
||||
background-color: currentColor;
|
||||
-webkit-mask-image: var(--svg);
|
||||
mask-image: var(--svg);
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-size: 100% 100%;
|
||||
mask-size: 100% 100%;
|
||||
}
|
||||
/* ti-grid-dots */
|
||||
.tabler--grid-dots {
|
||||
display: inline-block;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue