add navbar, less edgy aboutme edit
This commit is contained in:
parent
1cd1c1cf68
commit
9cc5831f3a
2 changed files with 163 additions and 6 deletions
17
index.html
17
index.html
|
|
@ -20,6 +20,21 @@
|
||||||
|
|
||||||
<body>
|
<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 -->
|
<!-- simple introduction -->
|
||||||
<div id="sneexy" class="terminal">
|
<div id="sneexy" class="terminal">
|
||||||
<!-- theres probably a much better way to do this instead of manually
|
<!-- theres probably a much better way to do this instead of manually
|
||||||
|
|
@ -54,7 +69,7 @@
|
||||||
</div>
|
</div>
|
||||||
<section>
|
<section>
|
||||||
<h2><a href="#about-me">about me</a></h2>
|
<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 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>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>
|
<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
152
style.css
|
|
@ -151,6 +151,7 @@ body {
|
||||||
-webkit-animation: bg-gradient 10s ease infinite;
|
-webkit-animation: bg-gradient 10s ease infinite;
|
||||||
font-family: "JetBrains Mono";
|
font-family: "JetBrains Mono";
|
||||||
font-size: 18px;
|
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 */
|
/* the titlebar of the terminals */
|
||||||
.term-titlebar {
|
.term-titlebar {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 2fr auto 2fr;;
|
grid-template-columns: 2fr auto 2fr;
|
||||||
grid-template-areas:
|
grid-template-areas:
|
||||||
"term-icon term-title term-buttons";
|
"term-icon term-title term-buttons";
|
||||||
|
|
||||||
|
|
@ -300,6 +301,75 @@ styling of the terminal windows
|
||||||
text-decoration: underline;
|
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
|
text formatting and config stuff
|
||||||
font-family and <p> is set under .terminal
|
font-family and <p> is set under .terminal
|
||||||
|
|
@ -353,7 +423,7 @@ h1 a:hover {
|
||||||
/*
|
/*
|
||||||
about me section/terminal
|
about me section/terminal
|
||||||
*/
|
*/
|
||||||
.terminal:first-child {
|
.terminal:nth-child(2) {
|
||||||
margin-top: 3.8em;
|
margin-top: 3.8em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -783,6 +853,11 @@ animations
|
||||||
50% { opacity: 1.0; }
|
50% { opacity: 1.0; }
|
||||||
100% { opacity: 0; }
|
100% { opacity: 0; }
|
||||||
}
|
}
|
||||||
|
@keyframes blink-navbar-text {
|
||||||
|
0% { opacity: 0; }
|
||||||
|
50% { opacity: .8; }
|
||||||
|
100% { opacity: 0; }
|
||||||
|
}
|
||||||
@keyframes spin-y {
|
@keyframes spin-y {
|
||||||
/* values: 128px, 256px, 348px, 396px*/
|
/* values: 128px, 256px, 348px, 396px*/
|
||||||
0% { transform: perspective(396px) rotateY(0); }
|
0% { transform: perspective(396px) rotateY(0); }
|
||||||
|
|
@ -802,6 +877,11 @@ animations
|
||||||
50% { opacity: 1.0; }
|
50% { opacity: 1.0; }
|
||||||
100% { opacity: 0; }
|
100% { opacity: 0; }
|
||||||
}
|
}
|
||||||
|
@-moz-keyframes blink-navbar-text {
|
||||||
|
0% { opacity: 0; }
|
||||||
|
50% { opacity: .8; }
|
||||||
|
100% { opacity: 0; }
|
||||||
|
}
|
||||||
@-moz-keyframes spin-y {
|
@-moz-keyframes spin-y {
|
||||||
/* values: 128px, 256px, 348px, 396px*/
|
/* values: 128px, 256px, 348px, 396px*/
|
||||||
0% { transform: perspective(396px) rotateY(0); }
|
0% { transform: perspective(396px) rotateY(0); }
|
||||||
|
|
@ -821,6 +901,11 @@ animations
|
||||||
50% { opacity: 1.0; }
|
50% { opacity: 1.0; }
|
||||||
100% { opacity: 0; }
|
100% { opacity: 0; }
|
||||||
}
|
}
|
||||||
|
@-webkit-keyframes blink-navbar-text {
|
||||||
|
0% { opacity: 0; }
|
||||||
|
50% { opacity: .8; }
|
||||||
|
100% { opacity: 0; }
|
||||||
|
}
|
||||||
@-webkit-keyframes spin-y {
|
@-webkit-keyframes spin-y {
|
||||||
/* values: 128px, 256px, 348px, 396px*/
|
/* values: 128px, 256px, 348px, 396px*/
|
||||||
0% { transform: perspective(396px) rotateY(0); }
|
0% { transform: perspective(396px) rotateY(0); }
|
||||||
|
|
@ -840,14 +925,71 @@ animations
|
||||||
modify widths and spacing depending on the size of the display
|
modify widths and spacing depending on the size of the display
|
||||||
*/
|
*/
|
||||||
@media screen and (max-width: 59em) {
|
@media screen and (max-width: 59em) {
|
||||||
.terminal:first-child {
|
.navbar {
|
||||||
margin-top: 0.4em;
|
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 {
|
.terminal {
|
||||||
.term-titlebar {
|
.term-titlebar {
|
||||||
margin: -16px 0px -24px;
|
margin: -16px 0px -24px;
|
||||||
}
|
}
|
||||||
margin-bottom: 0.7em;
|
margin: 0px .7em .7em;
|
||||||
padding: 10px 16px;
|
padding: 10px 16px;
|
||||||
}
|
}
|
||||||
#sneexy > section {
|
#sneexy > section {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue