quinten/website-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

* updated links

Browse Source 
* added spaceweather everything
* hidden sidebar on mobile / mobile layout fix
This commit is contained in:
Quinten0508 2024-07-05 23:01:40 +02:00
parent 014b0f6ae6
commit 83841ce3d3
7 changed files with 402 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
TODO.html
View File

@ -88,6 +88,15 @@
--- ---
## Make a short bio (scary!) ## Make a short bio (scary!)
---
## Space weather!
* https://services.swpc.noaa.gov/images/animations/ovation/north/latest.jpg
* fetch new image every 10min to new API :3
* some one sentence forecast from https://services.swpc.noaa.gov as well
*
--- ---
## Add fun animations to the background ## Add fun animations to the background
Comets, twinkling stars, other animated pixel dithering waves or something idk! Comets, twinkling stars, other animated pixel dithering waves or something idk!

47
assets/icons/compass.svg Normal file
View File

@ -0,0 +1,47 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="compass" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 375 375" style="enable-background:new 0 0 375 375;" xml:space="preserve">
<g>
<g>
<path fill="#E9E9E9" d="M187.5,0C84.1,0,0,84.1,0,187.5S84.1,375,187.5,375S375,290.9,375,187.5S290.9,0,187.5,0z M187.5,337.5
c-82.7,0-150-67.3-150-150s67.3-150,150-150s150,67.3,150,150S270.2,337.5,187.5,337.5z"/>
</g>
</g>
<g>
<g>
<path fill="#E9E9E9" d="M150,150L93.7,281.3L225,225l56.3-131.3L150,150z M187.5,206.3c-10.4,0-18.8-8.4-18.8-18.8c0-10.4,8.4-18.8,18.8-18.8
s18.8,8.4,18.8,18.8C206.3,197.9,197.9,206.3,187.5,206.3z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 956 B

BIN
assets/icons/debian.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 904 B

46
assets/scripts/spaceweather.js Normal file
View File

@ -0,0 +1,46 @@
document.addEventListener('DOMContentLoaded', function() {
const ovationImage = document.getElementById('spaceweather-ovation');
const forecast = document.getElementById('spaceweather-forecast');
const overview = document.getElementById('spaceweather-overview');
const toggleButton = document.getElementById('spaceweather-button');
let isNorthOvation = true;
async function fetchSpaceWeatherText() {
try {
const response = await fetch('https://quinten0508.com/api/spaceweather/3-day-forecast.txt');
if (!response.ok) throw new Error('Network response was not ok');
const text = await response.text();
forecast.textContent = text;
} catch (error) {
console.error('Error fetching space weather text:', error);
}
}
function fetchSpaceWeatherImage() {
const imageUrl = isNorthOvation
? 'https://quinten0508.com/api/spaceweather/ovation-north.jpg'
: 'https://quinten0508.com/api/spaceweather/ovation-south.jpg';
ovationImage.src = imageUrl;
}
function fetchOverviewImage() {
overview.src = 'https://quinten0508.com/api/spaceweather/overview.gif';
}
toggleButton.addEventListener('click', function() {
isNorthOvation = !isNorthOvation;
fetchSpaceWeatherImage();
});
// Fetch text and images immediately on load
fetchSpaceWeatherText();
fetchSpaceWeatherImage();
fetchOverviewImage();
// Fetch images every 10 minutes
setInterval(() => {
fetchSpaceWeatherImage();
fetchOverviewImage();
}, 600000);
});

41
index.html
View File

@ -6,13 +6,14 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<div class="container" id="top"> <div class="container" id="top">
<div class="sidebar"> <div class="sidebar sidebar-left">
</div> </div>
<div class="container-main"> <div class="container-main">
@ -51,7 +52,7 @@
<!-- must resist the urge to dynamically generate this, fuck js --> <!-- must resist the urge to dynamically generate this, fuck js -->
<h5 style="display: inline-block; padding: 0;">Current directory:</h5> <h5 style="display: inline-block; padding: 0;">Current directory:</h5>
<p style="display: inline-block;"> <p style="display: inline-block;">
<img src="./assets/icons/tux.svg" id="directory-icon"><a class="link" href="./">/home/quinten</a> <img src="./assets/icons/tux.svg" id="directory-icon">/<a class="link" href="./">home/quinten</a>
</p> </p>
</div> </div>
@ -79,6 +80,29 @@
<div id="uptime"></div> <div id="uptime"></div>
</div> </div>
<div class="box" id="spaceweather">
<h3>Space Weather</h3>
<button id="spaceweather-button" class="button">
<svg style="width: 1rem; height: 1rem;">
<use xlink:href="assets/icons/compass.svg#compass"></use>
</svg>
</button>
<div id="spaceweather-container">
<div id="spaceweather-text">
<p style="font-style: italic; color: #e9e9e9a2; font-size: 0.8rem; margin-bottom: 1rem;">Source: Space Weather Prediction Center (NOAA)</p>
<pre id="spaceweather-forecast"></pre>
</div>
<div id="spaceweather-images">
<img id="spaceweather-ovation"> <!-- add a button to switch between north and south?-->
<img id="spaceweather-overview">
</div>
</div>
</div>
<div class="box"> <div class="box">
<h3>titleee</h3> <h3>titleee</h3>
@ -109,14 +133,14 @@
</div> <!--container-main--> </div> <!--container-main-->
<div class="sidebar" id="links-directory"> <div class="sidebar sidebar-right" id="links-tree">
<div class="box" style="margin: 0;"> <div class="box" style="margin: 0;">
<h5 style="padding-bottom: 0;">Directory</h5> <h5 style="padding-bottom: 0;">Tree</h5>
<ul style="margin-bottom: 0;"> <ul style="margin-bottom: 0;">
<a href="#top"><li>Top</li></a> <li><a href="#top">Top</a></li>
<a href="#Status"><li>Status</li></a> <li><a href="#Status">Status</a></li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
@ -138,5 +162,6 @@
<script src="/assets/scripts/heartbeat.js"></script> <script src="/assets/scripts/heartbeat.js"></script>
<script src="/assets/scripts/onekoswap.js"></script> <script src="/assets/scripts/onekoswap.js"></script>
<script src="/assets/scripts/uptime.js"></script> <script src="/assets/scripts/uptime.js"></script>
<script src="/assets/scripts/oneko.js" data-cat="/assets/oneko.gif"></script> <!-- Loaded last, after everything else is in place --> <script src="/assets/scripts/oneko.js" data-cat="/assets/oneko.gif"></script>
<script src="/assets/scripts/spaceweather.js"></script>
</html> </html>

163
links.html
View File

@ -8,24 +8,38 @@
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<style> <style>
ul { ul {
list-style-type: "* "; list-style-type: none;
margin-bottom: 4rem; margin: 0;
} padding-left: 0;
li { }
margin: 0.75rem;
#main-links ul {
margin-bottom: 4rem;
}
ul li::before {
content: "* ";
}
#links-directory ul li:first-child::before {
content: "↑ "; /* arrow for "Top" button */
} }
a { a {
color: #E9E9E9; color: #E9E9E9;
text-decoration: underline; text-decoration: underline;
position: relative; position: relative;
} }
p { p {
display: inline; display: inline;
} }
h5 {
padding-bottom: 0;
}
</style> </style>
</head> </head>
@ -33,7 +47,7 @@
<div class="container" id="top"> <div class="container" id="top">
<div class="sidebar"> <div class="sidebar sidebar-left">
</div> </div>
<div class="container-main"> <div class="container-main">
@ -44,8 +58,8 @@
<div id="subtitlebox"> <div id="subtitlebox">
<div id="links" class="box"> <div id="links" class="box">
<a class="linkbox link onsite" href="./links.html"> <!-- TODO: MAKE ON-WEB LINKS A SEPERATE BOX [ALSO PRIORITIZED OVER SOCIALS, MAYBE MOVE SOCIALS AWAY / SMALLER / AS SIDEBAR?] --> <a class="linkbox link onsite" href="./"> <!-- TODO: MAKE ON-WEB LINKS A SEPERATE BOX [ALSO PRIORITIZED OVER SOCIALS, MAYBE MOVE SOCIALS AWAY / SMALLER / AS SIDEBAR?] -->
<p>links</p></a> <p>home</p></a>
<a class="linkbox link offsite" href="https://x.com/quinten0508" rel="me" target="_blank"> <a class="linkbox link offsite" href="https://x.com/quinten0508" rel="me" target="_blank">
<p>twitter</p></a> <p>twitter</p></a>
<a class="linkbox link offsite" href="https://www.last.fm/user/Quinten0508" rel="me" target="_blank"> <a class="linkbox link offsite" href="https://www.last.fm/user/Quinten0508" rel="me" target="_blank">
@ -73,7 +87,7 @@
<!-- must resist the urge to dynamically generate this, fuck js --> <!-- must resist the urge to dynamically generate this, fuck js -->
<h5 style="display: inline-block; padding: 0;">Current directory:</h5> <h5 style="display: inline-block; padding: 0;">Current directory:</h5>
<p style="display: inline-block;"> <p style="display: inline-block;">
<img src="./assets/icons/tux.svg" id="directory-icon"><a class="link" href="./">/home/quinten</a>/<a class="link" href="./links.html">links</a> <img src="./assets/icons/tux.svg" id="directory-icon">/<a class="link" href="./">home/quinten</a>/<a class="link" href="./links.html">links</a>
</p> </p>
</div> </div>
@ -82,7 +96,7 @@
<h3>Links</h3> <h3>Links</h3>
<p>An ever-growing collection of links to other places on the internet, loosely sorted and vaguely described. Featuring relatively unknown and/or super useful links. Just give them a try!</p> <p>An ever-growing collection of links to other places on the internet, loosely sorted and vaguely described. Featuring relatively unknown and/or super useful links. Just give them a try!</p>
<br><br> <br><br>
<p>Feel free to request more links, just email me!.</p> <p>Feel free to submit, just email me!</p>
</div> </div>
<!-- <!--
@ -93,14 +107,14 @@
<br><span> >></span></li> <br><span> >></span></li>
--> -->
<div class="box"> <div class="box" id="main-links">
<h4 id="Tools">Tools</h4> <h4 id="Tools">Tools</h4>
<h5 style="margin-top: 1rem; margin-bottom: 0;">Windows</h5> <h5 style="margin-top: 1rem; margin-bottom: 0;">Windows</h5>
<span>! = official, from Microsoft. Does not mean better!</span> <span>! = official, from Microsoft. Does not mean better!</span>
<ul> <ul>
<li><a href="https://massgrave.dev/" target="_blank"><p>Massgrave</p></a> <li><a href="https://massgrave.dev/" target="_blank"><p>Massgrave</p></a>
<br><span> >> ctivation scripts</span></li> <br><span> >> Activation scripts</span></li>
<li><a href="https://www.admx.help/" target="_blank"><p>Windows GPO catalog</p></a> <li><a href="https://www.admx.help/" target="_blank"><p>Windows GPO catalog</p></a>
<br><span> >> catalog of Group Policies</span></li> <br><span> >> catalog of Group Policies</span></li>
@ -112,11 +126,11 @@
<li><a href="https://learn.microsoft.com/en-us/sysinternals/" target="_blank"><p>!Sysinternals</p></a> <li><a href="https://learn.microsoft.com/en-us/sysinternals/" target="_blank"><p>!Sysinternals</p></a>
<br><span> >> "sysinternals" tools</span></li> <br><span> >> official, useful tools</span></li>
<li><a href="https://www.nirsoft.net/utils/index.html" target="_blank"><p>NirSoft</p></a> <li><a href="https://www.nirsoft.net/utils/index.html" target="_blank"><p>NirSoft</p></a>
<br><span> >> NirSoft utilities</span></li> <br><span> >> similar to sysinternals but different tools</span></li>
<li><a href="https://learn.microsoft.com/en-us/windows/powertoys/" target="_blank"><p>!PowerToys</p></a> <li><a href="https://learn.microsoft.com/en-us/windows/powertoys/" target="_blank"><p>!PowerToys</p></a>
<br><span> >>"tune and streamline your Windows experience"</span></li> <br><span> >>"tune and streamline your Windows experience"</span></li>
@ -158,8 +172,6 @@
<li><a href="https://www.ventoy.net/en/index.html" target="_blank"><p>Ventoy</p></a>, <li><a href="https://www.ventoy.net/en/index.html" target="_blank"><p>Ventoy</p></a>,
<br><span> >> what if: bootable USB but with multiple ISOs and a nice gui. <br><span> >> what if: bootable USB but with multiple ISOs and a nice gui.
<br> &nbsp;&nbsp;&nbsp;&nbsp;<a href="https://medicatusb.com/" target="_blank">Medicat</a> for a ready-to-go version.</span></li> <br> &nbsp;&nbsp;&nbsp;&nbsp;<a href="https://medicatusb.com/" target="_blank">Medicat</a> for a ready-to-go version.</span></li>
<li><a href="https://imgops.com/" target="_blank"><p>ImgOps</p></a> <li><a href="https://imgops.com/" target="_blank"><p>ImgOps</p></a>
<br><span> >> anything images: host, reverse search, inspect, edit, add effects</span></li> <br><span> >> anything images: host, reverse search, inspect, edit, add effects</span></li>
@ -177,9 +189,17 @@
<li><a href="https://unlighthouse.dev/" target="_blank"><p>Unlighthouse</p></a> <li><a href="https://unlighthouse.dev/" target="_blank"><p>Unlighthouse</p></a>
<br><span> >> like google lighthouse website performance tests, but for all pages and not by Google™</span></li> <br><span> >> like google lighthouse website performance tests, but for all pages and not by Google™</span></li>
<li><a href="https://kinopio.club" target="_blank"><p>Kinopio</p></a>
<br><span> >> mindmapping and linking on steroids, also more fun</span></li>
<li><a href="https://www.magentaa11y.com/" target="_blank"><p>magenta a11y</p></a>
<br><span> >> easy a11y accessibility checklists (sorry, still working on the bare website!)</span></li>
<li><a href="https://lure.sh/" target="_blank"><p>LURE</p></a>
<br><span> >> cross-distro (linux) app repository</span></li>
<li><a href="" target="_blank"><p></p></a> <li><a href="" target="_blank"><p></p></a>
<br><span> >></span></li> <br><span> >></span></li>
</ul> </ul>
@ -210,8 +230,9 @@
<li><a href="https://corru.observer/" target="_blank"><p>corru.observer</p></a> <li><a href="https://corru.observer/" target="_blank"><p>corru.observer</p></a>
<br><span> >> sci-fi browser game with fun story!</span></li> <br><span> >> sci-fi browser game with fun story!</span></li>
<li><a href="https://pianoverse.net/" target="_blank"><p>Pianoverse</p></a> <li><a href="https://pianoverse.net/" target="_blank"><p>Pianoverse</p></a>,
<br><span> >> play piano (MIDI) together online</span></li> <a href="https://plink.in/" target="_blank"><p>Plink!</p></a>
<br><span> >> play music together online</span></li>
<li><a href="https://www.increpare.com/" target="_blank"><p>increpare games</p></a> <li><a href="https://www.increpare.com/" target="_blank"><p>increpare games</p></a>
@ -221,8 +242,23 @@
<li><a href="https://geekenspiel.com/" target="_blank"><p>Geekenspiel</p></a> <li><a href="https://geekenspiel.com/" target="_blank"><p>Geekenspiel</p></a>
<br><span> >> "retro" computer stickers/badges</span></li> <br><span> >> "retro" computer stickers/badges</span></li>
<li><a href="listen.hatnote.com " target="_blank"><p>Listen to Wikipedia</p></a>
<br><span> >> pleasant little sounds and animations for each article creation, change and deletion</span></li>
<li><a href="https://raould.github.io/pn0gstr0m/" target="_blank"><p>pn0gstr0m</p></a>
<br><span> >> pong but the ball multiplies and there's powerups</span></li>
<li><a href="https://www.music-map.com/" target="_blank"><p>Music-Map</p></a>
<br><span> >> find similar artists through a map</span></li>
<li><a href="https://music.ishkur.com/" target="_blank"><p>iskhur's guide to electronic music</p></a>
<br><span> >> huge timeline and tree of all electronic music, with samples for each genre/year</span></li>
<li><a href="" target="_blank"><p></p></a> <li><a href="" target="_blank"><p></p></a>
<br><span> >> </span></li> <br><span> >> </span></li>
<li><a href="https://bemuse.ninja/" target="_blank"><p>Bemuse</p></a>
<br><span> >> fully-fledged rhythm game in your web browser</span></li>
</ul> </ul>
@ -360,48 +396,83 @@
</ul> </ul>
<h4>Homelab</h4> <h4 id="Homelab">Homelab</h4>
<ul> <ul>
<li><a href="https://noted.lol/" target="_blank"><p>noted.lol</p></a> <li><a href="https://noted.lol/" target="_blank"><p>noted.lol</p></a>
<br><span> >> shortform articles on new apps to self-host</span></li> <br><span> >> shortform articles on new apps to self-host</span></li>
<li><a href="https://selfh.st/apps/" target="_blank"><p>selfh.st</p></a>
<br><span> >> extensive list of self-hosted apps</span></li>
<li><a href="" target="_blank"><p></p></a> <li><a href="" target="_blank"><p></p></a>
<br><span> >></span></li> <br><span> >></span></li>
</ul>
<h4 id="NewsAndBlogs">News & Blogs</h4>
<ul>
<li><a href="https://solar.lowtechmagazine.com/" target="_blank"><p>LOW←TECH MAGAZINE</p></a>
<br><span> >> completely solar-powered, all about climate and power</span></li>
<li><a href="https://www.404media.co/" target="_blank"><p>404 Media</p></a>
<br><span> >> independent tech news</span></li>
<li><a href="https://waxy.org/" target="_blank"><p>Waxy.org</p></a>
<br><span> >> tech, internet culture (infrequent)</span></li>
<li><a href="https://seirdy.one/posts/2021/03/10/search-engines-with-own-indexes/" target="_blank"><p>A look at all search engines</p></a>
<br><span> >> goes in-depth about all of the new search engines, and which ones actually stand out</span>
<br>&nbsp;&nbsp;&nbsp;&nbsp;<span>also check out <a href="https://seirdy.one" target="_blank">the main website</a></span></li>
<li><a href="https://iwebthings.joejenett.com/" target="_blank"><p>iwebthings</p></a>
<br><span> >> "notes" with fun discoveries from all over the internet every few days</span>
<br>&nbsp;&nbsp;&nbsp;&nbsp;<span>and the <a href="https://dwt-archives.joejenett.com/" target="_blank">daily webthing archives</a> </span></li>
<li><a href="https://href.cool/" target="_blank"><p>href.cool</p></a>,
<a href="https://www.kickscondor.com/hrefhunt/" target="_blank"><p>hrefhunt</p></a>,
<a href="https://goblin-heart.net/sadgrl/links" target="_blank"><p>goblin-heart links</p></a>,
<a href="https://s1nez.nekoweb.org/bookmarks" target="_blank"><p>s1nez' bookmarks</p></a>,
<a href="https://web.archive.org/web/20230817122434/https://links.yesterweb.org/" target="_blank"><p>yesterlinks (archived)</p></a>,
<br><span> >> curated selection of links, like this page but way better</span></li>
<li><a href="" target="_blank"><p></p></a>
<br><span> >></span></li>
</ul>
<h4 id="Art">Art</h4>
<h5>The only section without descriptions :)</h5>
<ul>
<li><a href="https://neauoire.github.io/neauismea/" target="_blank"><p>neauismea</p></a></li>
<li><a href="https://1041uuu.tumblr.com/" target="_blank"><p>1041uuu</p></a></li>
<li><a href="" target="_blank"><p></p></a></li>
</ul> </ul>
</div> </div>
</div> <!--container-main--> </div> <!--container-main-->
<div class="sidebar" id="links-directory"> <div class="sidebar sidebar-right" id="links-tree">
<div class="box" style="margin: 0;"> <div class="box" style="margin: 0;">
<h5 style="padding-bottom: 0;">Directory</h5> <h5 style="padding-bottom: 0;">Tree</h5>
<ul style="margin-bottom: 0;"> <ul style="margin-bottom: 0;">
<a href="#top"><li>Top</li></a> <li><a href="#top">Top</a></li>
<a href="#Tools"><li>Tools</li></a> <li><a href="#Tools">Tools</a></li>
<a href="#Astrophotography"><li>Astrophotography</li></a> <li><a href="#Astrophotography">Astrophotography</a></li>
<a href="#Fun"><li>Fun</li></a> <li><a href="#Fun">Fun</a></li>
<a href="#Archive"><li>Archive</li></a> <li><a href="#Archive">Archive</a></li>
<a href="#Educational"><li>Educational</li></a> <li><a href="#Educational">Educational</a></li>
<a href="#Electronics"><li>Electronics</li></a> <li><a href="#Electronics">Electronics</a></li>
<a href="#Games"><li>Games</li></a> <li><a href="#Games">Games</a></li>
<a href="#Piracy"><li>Piracy</li></a> <li><a href="#Piracy">Piracy</a></li>
<a href="#Homelab"><li>Homelab</li></a> <li><a href="#Homelab">Homelab</a></li>
<li><a href="#NewsAndBlogs">News & Blogs</a></li>
<li><a href="#Art">Art</a></li>
</ul> </ul>
</div> </div>
@ -424,5 +495,5 @@
<script src="/assets/scripts/heartbeat.js"></script> <script src="/assets/scripts/heartbeat.js"></script>
<script src="/assets/scripts/onekoswap.js"></script> <script src="/assets/scripts/onekoswap.js"></script>
<script src="/assets/scripts/uptime.js"></script> <script src="/assets/scripts/uptime.js"></script>
<script src="/assets/scripts/oneko.js" data-cat="/assets/oneko.gif"></script> <!-- Loaded last, after everything else is in place --> <script src="/assets/scripts/oneko.js" data-cat="/assets/oneko.gif"></script>
</html> </html>

216
style.css
View File

@ -96,7 +96,6 @@ html {
font-style: normal; font-style: normal;
color: #E9E9E9; color: #E9E9E9;
font-weight: 400; font-weight: 400;
min-width: calc(min(900px, 92vw) + 500px);
/* min-width: 1000px; /* probably play with this to DECIMATE mobile and get consistent layout at the cost of horizontal scroll on mobile */ /* min-width: 1000px; /* probably play with this to DECIMATE mobile and get consistent layout at the cost of horizontal scroll on mobile */
} }
@ -108,6 +107,83 @@ body {
} }
ul {
list-style-type: none;
margin: 0;
padding-left: 0;
}
li {
margin: 0.75rem;
}
ul li::before {
content: "* ";
}
#main-links ul {
margin-bottom: 4rem;
}
#links-directory ul li:first-child::before {
content: "↑ "; /* arrow for "Top" button */
}
a {
color: #E9E9E9;
text-decoration: underline;
position: relative;
}
h1 {
font-weight: 500;
font-size: 4rem;
letter-spacing: 0.2rem;
margin: 0;
padding: 0;
}
h3 {
font-weight: 500;
font-size: 2.4rem;
margin: 0;
padding: 0;
padding-bottom: 0.2rem;
text-align: left;
}
h4 {
font-weight: 400;
font-size: 1.8rem;
margin: 0;
padding: 0;
text-align: left;
}
h5 {
font-size: 1.2rem;
font-style: italic;
font-weight: 500;
margin: 0;
padding: 0;
padding-bottom: 1.2rem;
}
p, pre {
font-size: 1.2rem;
margin: 0;
padding: 0;
}
button {
color: #E9E9E9;
}
.container { .container {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -131,6 +207,10 @@ body {
flex: 1; flex: 1;
} }
#sidebar-left .box ul li {
display: inline-block;
}
.link { .link {
color: #E9E9E9; color: #E9E9E9;
@ -303,8 +383,6 @@ body {
} }
#lastfm-artist { #lastfm-artist {
font-style: normal; font-style: normal;
} }
@ -391,15 +469,59 @@ body {
} }
.uptime-name-element { .uptime-name-element {
flex: 5; flex: 3;
} }
.uptime-status-element { .uptime-status-element {
flex: 1; flex: 1;
border-left: 1px solid #E9E9E9; border-left: 1px solid #E9E9E9;
} }
#spaceweather {
position: relative;
}
#links-directory { #spaceweather-button {
position: absolute;
right: 0;
top: -1.5rem;
padding: 0.65rem;
border-right: none;
border-top: none;
}
#spaceweather-container {
display: flex;
flex-direction: row;
}
#spaceweather-images {
flex: 2;
display: flex;
flex-direction: column;
}
#spaceweather-ovation, #spaceweather-overview {
width: 90%;
height: 90%;
display: block; /* center image: don't forget display: block alongside auto margins for this to work! */
margin: 1rem;
}
#spaceweather-text {
flex: 3;
}
#spaceweather-forecast {
white-space: pre-wrap; /* Ensures text wraps as needed */
word-wrap: break-word; /* Handles long words and URLs */
}
#links-tree {
position: sticky; position: sticky;
padding: 0; padding: 0;
top: 0; top: 0;
@ -407,66 +529,6 @@ body {
padding-top: 1rem; padding-top: 1rem;
} }
ul {
list-style-type: "* ";
margin-bottom: 4rem;
}
li {
margin: 0.75rem;
}
a {
color: #E9E9E9;
text-decoration: underline;
position: relative;
}
h1 {
font-weight: 500;
font-size: 4rem;
letter-spacing: 0.2rem;
margin: 0;
padding: 0;
}
h3 {
font-weight: 500;
font-size: 2.4rem;
margin: 0;
padding: 0;
padding-bottom: 0.2rem;
text-align: left;
}
h4 {
font-weight: 400;
font-size: 1.8rem;
margin: 0;
padding: 0;
text-align: left;
}
h5 {
font-size: 1.2rem;
font-style: italic;
font-weight: 500;
margin: 0;
padding: 0;
padding-bottom: 1.2rem;
}
p, pre {
font-size: 1.2rem;
margin: 0;
padding: 0;
}
button {
color: #E9E9E9;
}
#stripes { #stripes {
width: 100vw; width: 100vw;
@ -479,7 +541,7 @@ button {
@media (max-width: 700px) { @media (max-width: 900px) {
#subtitlebox{ #subtitlebox{
height: 6rem; height: 6rem;
} }
@ -489,5 +551,27 @@ button {
#heartbeatbox, #clock-box { #heartbeatbox, #clock-box {
flex: 13; flex: 13;
} }
#spaceweather-container {
flex-direction: column;
}
#spaceweather-forecast {
font-size: 1rem;
}
#spaceweather-images {
margin-top: 3rem;
flex-direction: row;
}
#spaceweather-ovation {
width: 80%;
max-width: 300px;
}
}
@media (max-width: 1430px) {
.sidebar {
display: none; /* remove sidebars on mobile -- don't put critical content there! */
}
} }