* updated links
* added spaceweather everything * hidden sidebar on mobile / mobile layout fix
This commit is contained in:
Quinten0508
parent
014b0f6ae6
commit
83841ce3d3
@ -88,6 +88,15 @@
|
||||
---
|
||||
## 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
|
||||
Comets, twinkling stars, other animated pixel dithering waves or something idk!
|
||||
|
||||
47
assets/icons/compass.svg
Normal file
47
assets/icons/compass.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 956 B |
BIN
assets/icons/debian.gif
Normal file
BIN
assets/icons/debian.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 904 B |
46
assets/scripts/spaceweather.js
Normal file
46
assets/scripts/spaceweather.js
Normal 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);
|
||||
});
|
||||
39
index.html
39
index.html
@ -6,13 +6,14 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container" id="top">
|
||||
|
||||
<div class="sidebar">
|
||||
<div class="sidebar sidebar-left">
|
||||
</div>
|
||||
<div class="container-main">
|
||||
|
||||
@ -51,7 +52,7 @@
|
||||
<!-- must resist the urge to dynamically generate this, fuck js -->
|
||||
<h5 style="display: inline-block; padding: 0;">Current directory:</h5>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
@ -79,6 +80,29 @@
|
||||
<div id="uptime"></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">
|
||||
<h3>titleee</h3>
|
||||
@ -109,12 +133,12 @@
|
||||
|
||||
</div> <!--container-main-->
|
||||
|
||||
<div class="sidebar" id="links-directory">
|
||||
<div class="sidebar sidebar-right" id="links-tree">
|
||||
<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;">
|
||||
<a href="#top"><li>Top</li></a>
|
||||
<a href="#Status"><li>Status</li></a>
|
||||
<li><a href="#top">Top</a></li>
|
||||
<li><a href="#Status">Status</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -138,5 +162,6 @@
|
||||
<script src="/assets/scripts/heartbeat.js"></script>
|
||||
<script src="/assets/scripts/onekoswap.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>
|
||||
157
links.html
157
links.html
@ -9,23 +9,37 @@
|
||||
|
||||
<style>
|
||||
ul {
|
||||
list-style-type: "* ";
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
li {
|
||||
margin: 0.75rem;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#main-links ul {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
ul li::before {
|
||||
content: "* ";
|
||||
}
|
||||
|
||||
#links-directory ul li:first-child::before {
|
||||
content: "↑ "; /* arrow for "Top" button */
|
||||
}
|
||||
|
||||
a {
|
||||
color: #E9E9E9;
|
||||
text-decoration: underline;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
p {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
h5 {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
@ -33,7 +47,7 @@
|
||||
|
||||
<div class="container" id="top">
|
||||
|
||||
<div class="sidebar">
|
||||
<div class="sidebar sidebar-left">
|
||||
</div>
|
||||
<div class="container-main">
|
||||
|
||||
@ -44,8 +58,8 @@
|
||||
|
||||
<div id="subtitlebox">
|
||||
<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?] -->
|
||||
<p>links</p></a>
|
||||
<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>home</p></a>
|
||||
<a class="linkbox link offsite" href="https://x.com/quinten0508" rel="me" target="_blank">
|
||||
<p>twitter</p></a>
|
||||
<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 -->
|
||||
<h5 style="display: inline-block; padding: 0;">Current directory:</h5>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
@ -82,7 +96,7 @@
|
||||
<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>
|
||||
<br><br>
|
||||
<p>Feel free to request more links, just email me!.</p>
|
||||
<p>Feel free to submit, just email me!</p>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
@ -93,14 +107,14 @@
|
||||
<br><span> >></span></li>
|
||||
-->
|
||||
|
||||
<div class="box">
|
||||
<div class="box" id="main-links">
|
||||
|
||||
<h4 id="Tools">Tools</h4>
|
||||
<h5 style="margin-top: 1rem; margin-bottom: 0;">Windows</h5>
|
||||
<span>! = official, from Microsoft. Does not mean better!</span>
|
||||
<ul>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<br><span> >>"tune and streamline your Windows experience"</span></li>
|
||||
@ -159,8 +173,6 @@
|
||||
<br><span> >> what if: bootable USB but with multiple ISOs and a nice gui.
|
||||
<br> <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>
|
||||
<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>
|
||||
<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>
|
||||
<br><span> >></span></li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
@ -210,8 +230,9 @@
|
||||
<li><a href="https://corru.observer/" target="_blank"><p>corru.observer</p></a>
|
||||
<br><span> >> sci-fi browser game with fun story!</span></li>
|
||||
|
||||
<li><a href="https://pianoverse.net/" target="_blank"><p>Pianoverse</p></a>
|
||||
<br><span> >> play piano (MIDI) together online</span></li>
|
||||
<li><a href="https://pianoverse.net/" target="_blank"><p>Pianoverse</p></a>,
|
||||
<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>
|
||||
@ -221,8 +242,23 @@
|
||||
<li><a href="https://geekenspiel.com/" target="_blank"><p>Geekenspiel</p></a>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
|
||||
@ -360,48 +396,83 @@
|
||||
|
||||
</ul>
|
||||
|
||||
<h4>Homelab</h4>
|
||||
<h4 id="Homelab">Homelab</h4>
|
||||
<ul>
|
||||
<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>
|
||||
|
||||
|
||||
<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>
|
||||
<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> <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> <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>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div> <!--container-main-->
|
||||
|
||||
<div class="sidebar" id="links-directory">
|
||||
<div class="sidebar sidebar-right" id="links-tree">
|
||||
<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;">
|
||||
<a href="#top"><li>Top</li></a>
|
||||
<a href="#Tools"><li>Tools</li></a>
|
||||
<a href="#Astrophotography"><li>Astrophotography</li></a>
|
||||
<a href="#Fun"><li>Fun</li></a>
|
||||
<a href="#Archive"><li>Archive</li></a>
|
||||
<a href="#Educational"><li>Educational</li></a>
|
||||
<a href="#Electronics"><li>Electronics</li></a>
|
||||
<a href="#Games"><li>Games</li></a>
|
||||
<a href="#Piracy"><li>Piracy</li></a>
|
||||
<a href="#Homelab"><li>Homelab</li></a>
|
||||
<li><a href="#top">Top</a></li>
|
||||
<li><a href="#Tools">Tools</a></li>
|
||||
<li><a href="#Astrophotography">Astrophotography</a></li>
|
||||
<li><a href="#Fun">Fun</a></li>
|
||||
<li><a href="#Archive">Archive</a></li>
|
||||
<li><a href="#Educational">Educational</a></li>
|
||||
<li><a href="#Electronics">Electronics</a></li>
|
||||
<li><a href="#Games">Games</a></li>
|
||||
<li><a href="#Piracy">Piracy</a></li>
|
||||
<li><a href="#Homelab">Homelab</a></li>
|
||||
<li><a href="#NewsAndBlogs">News & Blogs</a></li>
|
||||
<li><a href="#Art">Art</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -424,5 +495,5 @@
|
||||
<script src="/assets/scripts/heartbeat.js"></script>
|
||||
<script src="/assets/scripts/onekoswap.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>
|
||||
216
style.css
216
style.css
@ -96,7 +96,6 @@ html {
|
||||
font-style: normal;
|
||||
color: #E9E9E9;
|
||||
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 */
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -131,6 +207,10 @@ body {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#sidebar-left .box ul li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
.link {
|
||||
color: #E9E9E9;
|
||||
@ -303,8 +383,6 @@ body {
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#lastfm-artist {
|
||||
font-style: normal;
|
||||
}
|
||||
@ -391,15 +469,59 @@ body {
|
||||
}
|
||||
|
||||
.uptime-name-element {
|
||||
flex: 5;
|
||||
flex: 3;
|
||||
}
|
||||
.uptime-status-element {
|
||||
flex: 1;
|
||||
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;
|
||||
padding: 0;
|
||||
top: 0;
|
||||
@ -407,66 +529,6 @@ body {
|
||||
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 {
|
||||
width: 100vw;
|
||||
@ -479,7 +541,7 @@ button {
|
||||
|
||||
|
||||
|
||||
@media (max-width: 700px) {
|
||||
@media (max-width: 900px) {
|
||||
#subtitlebox{
|
||||
height: 6rem;
|
||||
}
|
||||
@ -489,5 +551,27 @@ button {
|
||||
#heartbeatbox, #clock-box {
|
||||
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! */
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user