sd/site
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add navbar, less edgy aboutme edit

Browse source
This commit is contained in:
Ruben 2024-08-11 13:44:26 -05:00
commit 9cc5831f3a
No known key found for this signature in database
GPG key ID: AE181294E97E4802
2 changed files with 163 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

17
index.html
View file

@ -20,6 +20,21 @@
<body>
<!-- top navbar -->
<div class="navbar">
<a class="nav-base nav-baselink" href="https://sneexy.pages.gay"><i class="ph-bold ph-squares-four"></i> sneexy <small>dot</small> pages <small>dot</small> gay</a>
<a class="nav-base nav-baselink-mobile" href="https://sneexy.pages.gay"><i class="ph-bold ph-squares-four"></i> s <i class="ph-bold ph-dot"></i> p <i class="ph-bold ph-dot"></i> g</a>
<div class="nav-base hover-tip"><i class="ph-bold ph-hand-pointing" alt="hover or tap"></i> here</div>
<nav class="nav-base nav-links">
<a href="https://sneexy.pages.gay"><i class="ph-bold ph-house"></i> home</a>
<i class="ph-bold ph-dot"></i>
<a href="https://sneexy.pages.gay/blog"><i class="ph-bold ph-article"></i> blog</a>
<i class="ph-bold ph-dot"></i>
<a href="https://sneexy.pages.gay/#socials-and-contacts"><i class="ph-bold ph-link"></i> links</a>
</nav>
<p class="nav-base nav-systray"><i class="ph-bold ph-bell"></i> <i class="ph-bold ph-speaker-high"></i> <i class="ph-bold ph-network"></i> <i class="ph-bold ph-battery-full"></i> <i class="ph-bold ph-power"></i></p>
</div>
<!-- simple introduction -->
<div id="sneexy" class="terminal">
<!-- theres probably a much better way to do this instead of manually
@ -54,7 +69,7 @@
</div>
<section>
<h2><a href="#about-me">about me</a></h2>
<p>i'm just some 18 year old <span class="rainbow">gay</span> foss enjoyer with adhd, going around the internet and slowly realizing how fucked the world is. or something like that.</p>
<p>i'm just some 18 year old <span class="rainbow">gay</span> foss enjoyer with adhd (and probably autistic), with access to the internet and nothing to do.</p>
<p>i consider myself to be a Professional Computer Toucher™. in both soulless boxes running either corporate or free software and robot-aligned beings <small>(you know, synths or protogens. love em!)</small>.</p>
<p>i'm a nerd into <a href="https://en.wikipedia.org/wiki/Free_and_open-source_software" target="_blank">free and open source</a> software <small>(as noted above)</small> and privacy stuff, along with other libre things. i'm not a programmer or anything, though. i've tried, didn't work out.</p>
<p>also a nerd into <a href="https://www.redhat.com/en/topics/linux/what-is-linux" target="_blank">Linux</a> stuff, mostly touched <a href="https://archlinux.org" target="_blank">Arch</a> and a little bit of <a href="https://nixos.org" target="_blank">NixOS</a> but have found to stuck with <a href="https://fedoraproject.org" target="_blank">Fedora</a>.</p>

152
style.css
View file

@ -151,6 +151,7 @@ body {
-webkit-animation: bg-gradient 10s ease infinite;
font-family: "JetBrains Mono";
font-size: 18px;
margin: unset !important; /* idk why it does that */
}
/*
@ -160,7 +161,7 @@ styling of the terminal windows
/* the titlebar of the terminals */
.term-titlebar {
display: grid;
grid-template-columns: 2fr auto 2fr;;
grid-template-columns: 2fr auto 2fr;
grid-template-areas:
"term-icon term-title term-buttons";
@ -300,6 +301,75 @@ styling of the terminal windows
text-decoration: underline;
}
/*
top navbar styling. attempts to look like a desktop panel/window manager bar
*/
.navbar {
position: fixed;
top: 0 !important;
min-width: 100%;
max-width: 100%;
min-height: 2.3em;
max-height: 2.3em;
display: grid;
grid-gap: 1em;
grid-template-columns: max-content auto max-content;
font-family: "Lexend";
align-content: center;
vertical-align: middle;
color: var(--text);
.nav-base {
padding: .2em;
border-radius: 8px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 3px 15px;
max-width: fit-content;
align-content: center;
}
.nav-baselink {
background-color: var(--green);
text-decoration: unset !important;
color: var(--crust);
margin-left: .4em !important;
}
.nav-baselink-mobile {
display: none;
}
.hover-tip {
display: none;
}
.nav-links {
background-color: var(--base);
color: var(--text);
padding: 0px 5px 0px;
}
.nav-links a {
color: var(--text);
text-decoration: unset !important;
}
.nav-links a:hover {
color: var(--green);
text-decoration: underline !important;
}
.nav-systray {
background-color: var(--crust);
color: var(--text);
margin-right: .4em !important;
i {
padding: 0px 2px 0px 2px;
}
}
a, p {
margin: unset !important;
}
small {
opacity: .7;
}
}
/*
text formatting and config stuff
font-family and <p> is set under .terminal
@ -353,7 +423,7 @@ h1 a:hover {
/*
about me section/terminal
*/
.terminal:first-child {
.terminal:nth-child(2) {
margin-top: 3.8em;
}
@ -783,6 +853,11 @@ animations
50% { opacity: 1.0; }
100% { opacity: 0; }
}
@keyframes blink-navbar-text {
0% { opacity: 0; }
50% { opacity: .8; }
100% { opacity: 0; }
}
@keyframes spin-y {
/* values: 128px, 256px, 348px, 396px*/
0% { transform: perspective(396px) rotateY(0); }
@ -802,6 +877,11 @@ animations
50% { opacity: 1.0; }
100% { opacity: 0; }
}
@-moz-keyframes blink-navbar-text {
0% { opacity: 0; }
50% { opacity: .8; }
100% { opacity: 0; }
}
@-moz-keyframes spin-y {
/* values: 128px, 256px, 348px, 396px*/
0% { transform: perspective(396px) rotateY(0); }
@ -821,6 +901,11 @@ animations
50% { opacity: 1.0; }
100% { opacity: 0; }
}
@-webkit-keyframes blink-navbar-text {
0% { opacity: 0; }
50% { opacity: .8; }
100% { opacity: 0; }
}
@-webkit-keyframes spin-y {
/* values: 128px, 256px, 348px, 396px*/
0% { transform: perspective(396px) rotateY(0); }
@ -840,14 +925,71 @@ animations
modify widths and spacing depending on the size of the display
*/
@media screen and (max-width: 59em) {
.terminal:first-child {
margin-top: 0.4em;
.navbar {
min-height: 2.3em;
max-height: 2.3em;
font-family: "Lexend";
align-content: center;
vertical-align: middle;
color: var(--text);
.nav-baselink {
display: none !important;
}
.nav-baselink-mobile {
display: unset !important;
background-color: var(--green);
text-decoration: unset !important;
color: var(--crust);
margin-left: .4em !important;
i:not(:first-child) {
margin-left: -.5em;
margin-right: -.5em;
opacity: .6;
}
}
.hover-tip {
display: unset !important;
background-color: var(--base);
animation: blink 3s ease-inr-out infinite;
-moz-animation: blink 3s ease-in-out infinite;
-webkit-animation: blink 3s ease-in-out infinite;
}
.nav-links {
display: none !important;
}
}
.navbar:hover {
grid-template-columns: max-content auto;
grid-template-rows: auto auto;
min-height: 4.9em !important;
max-height: 5.5em !important;
.hover-tip {
display: none !important;
}
.nav-links {
display: unset !important;
grid-row: 2 !important;
padding: .2em;
margin-left: .4em !important;
}
.nav-baselink-mobile {
padding: .2em !important;
}
.nav-systray {
margin-left: auto !important;
}
}
.terminal:nth-child(2) {
margin-top: 2.4em;
}
.terminal {
.term-titlebar {
margin: -16px 0px -24px;
}
margin-bottom: 0.7em;
margin: 0px .7em .7em;
padding: 10px 16px;
}
#sneexy > section {