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

small touch-ups:

Browse Source 
* added right sidebar 'directory' to 'all' pages, migrated styles over to main stylesheet to accomodate
This commit is contained in:
Quinten0508 2024-07-04 01:03:00 +02:00
parent e0e1666308
commit c6edd3c0e3
3 changed files with 58 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
index.html
View File

@ -10,14 +10,14 @@
<body>
<div class="container">
<div class="container" id="top">
<div class="sidebar">
</div>
<div class="container-main">
<div id="maintitlebox">
<h1 id="maintitle" class="box">Quinten's Outpost</h1>
<h1 id="maintitle" class="box"><a style="text-decoration: none; color: #E9E9E9;" href="./">Quinten's Outpost</a></h1>
<button id="oneko-button" class="button">:3</button>
</div>
@ -74,7 +74,7 @@
<div class="box">
<div class="box" id="Status">
<h3 style="padding-bottom: 1rem;">Status</h3>
<div id="uptime"></div>
</div>
@ -109,10 +109,18 @@
</div> <!--container-main-->
<div class="sidebar"> <!-- empty sidebars necessary on both sides (or nowhere) to maintain symmetry without another flexbox layer -->
<div class="sidebar" id="links-directory">
<div class="box" style="margin: 0;">
<h5 style="padding-bottom: 0;">Directory</h5>
<ul style="margin-bottom: 0;">
<a href="#top"><li>Top</li></a>
<a href="#Status"><li>Status</li></a>
</ul>
</div>
</div>
</div>
</div>
</div> <!--sidebar-->

62
links.html
View File

@ -25,41 +25,20 @@
p {
display: inline;
}
#links-directory {
position: sticky;
padding: 0;
top: 0;
margin-top: 17.5rem;
padding-top: 1rem;
}
</style>
</head>
<body>
<div class="container">
<div class="container" id="top">
<div class="sidebar" id="links-directory">
<div class="box" style="margin: 0;">
<h5 style="padding-bottom: 0;">Directory</h5>
<ul style="margin-bottom: 0;">
<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>
</ul>
</div>
<div class="sidebar">
</div>
<div class="container-main">
<div id="maintitlebox">
<h1 id="maintitle" class="box">Quinten's Outpost</h1>
<h1 id="maintitle" class="box"><a style="text-decoration: none; color: #E9E9E9;" href="./">Quinten's Outpost</a></h1>
<button id="oneko-button" class="button">:3</button>
</div>
@ -76,7 +55,7 @@
<a class="linkbox link" href="https://t.me/quinten0508" rel="me" target="_blank">
<p>telegram</p></a>
<!-- :3 13 year old firefox bug https://bugzilla.mozilla.org/show_bug.cgi?id=646552 -->
<a class="linkbox link" onClick="javascript:window.open('mailto:quinten0508@protonmail.com', 'mail');event.preventDefault()" href="mailto:quinten0508@protonmail.com" rel="me" target="_blank">
<a class="linkbox link" onClick="javascript:window.open('mailto:quinten@tuta.com', 'mail');event.preventDefault()" href="mailto:quinten@tuta.com" rel="me" target="_blank">
<p>email</p></a>
<!-- new button template
<a class="linkbox link" href="" target="_blank">
@ -89,6 +68,7 @@
</div>
</div>
<div id="directory-box" class="box">
<!-- must resist the urge to dynamically generate this, fuck js -->
<h5 style="display: inline-block; padding: 0;">Current directory:</h5>
@ -103,19 +83,6 @@
<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>
<br><br><br>
<h5 style="padding-bottom: 0;">Directory</h5>
<ul style="margin-bottom: 0;">
<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>
</ul>
</div>
<!--
@ -421,7 +388,22 @@
</div> <!--container-main-->
<div class="sidebar"> <!-- empty sidebars necessary on both sides (or nowhere) to maintain symmetry without another flexbox layer -->
<div class="sidebar" id="links-directory">
<div class="box" style="margin: 0;">
<h5 style="padding-bottom: 0;">Directory</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>
</ul>
</div>
</div>
</div>

25
style.css
View File

@ -96,7 +96,7 @@ html {
font-style: normal;
color: #E9E9E9;
font-weight: 400;
min-width: calc(min(900px, 92vw) + 300px);
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 */
}
@ -400,6 +400,29 @@ body {
}
#links-directory {
position: sticky;
padding: 0;
top: 0;
margin-top: 17.5rem;
padding-top: 1rem;
}
ul {
list-style-type: "* ";
margin-bottom: 4rem;
}
li {
margin: 0.75rem;
}
a {
color: #E9E9E9;
text-decoration: underline;
position: relative;
}
h1 {