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

chore: use address tag, work on posts

Browse source
This commit is contained in:
Ruben 2024-05-03 08:32:42 -05:00
commit 488b7c0926
No known key found for this signature in database
GPG key ID: AE181294E97E4802
3 changed files with 438 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

4
index.html
View file

@ -64,7 +64,7 @@
<p><a href="#socials-and-contacts">~/socials-and-contacts</a></p>
<div> <div id="minimize-btn"></div> <div id="maximize-btn"></div> <div id="close-btn"></div> </div>
</div>
<article>
<address>
<h1><a href="#socials-and-contacts">socials n' contacts</a></h1>
<p>you can find or contact me in these places i'm usually available and active on. <span style="color: var(--peach);">i <i>suck</i> at direct messages, if you try to contact me and i don't know you then chances are you'll get a response within the next 3028 years.</span></p>
<div class="socials-contacts-list">
@ -101,7 +101,7 @@
<a href="https://git.gay/sneexy" target="_blank">sneexy</a>
</span>
</div>
</article>
</address>
</div>
<!-- "fun" facts -->

57
posts/index.html Normal file
View file

@ -0,0 +1,57 @@
<!DOCTYPE html>
<html>
<head>
<title>posts ~ sneexy dot pages dot gay</title>
<link rel="icon" type="image/gif" href="../assets/petpet.gif">
<link rel="stylesheet" href="style.css">
<link rel="canonical" href="https://sneexy.pages.gay/">
<meta property="og:type" content="image.other">
<meta property="og:url" content="https://sneexy.pages.gay/">
<meta property="og:image" content="../assets/yoshi.gif">
<meta property="og:image:secure_url" content="https://sneexy.pages.gay/assets/yoshi.gif">
<meta property="og:image:type" content="gif">
<meta property="og:image:width" cotent="349">
<meta property="og:image:height" content="443">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- header/info section -->
<div id="about-me" class="terminal">
<div class="term-titlebar">
<img src="../assets/terminal.svg">
<p><a href="#posts">~/posts</a></p>
<div> <div id="minimize-btn"></div> <div id="maximize-btn"></div> <div id="close-btn"></div> </div>
</div>
<article>
<h1><a href="#posts">posts</a></h1>
<p>welcome to the small corner of this site where i make blog and stuff. they aren't always that though, so i just call this "posts". you can expect stuff like guides, rants and opinions and what not on here.</p>
<small>for more <span style="color: var(--red);">spicy</span> or <span style="color: var(--red);">venty</span> blogs n stuff, check out <a href="../postsnt" target="_blank" style="font-size: 14px; color: var(--red);">postsn't</a>, but it's probably not for everyone.</small>
</article>
</div>
<!-- actual posts. preferably list them by date posted. -->
<div id="articles" class="terminal">
<div class="term-titlebar">
<img src="../assets/terminal.svg">
<p><a href="#articles">~/articles</a></p>
<div> <div id="minimize-btn"></div> <div id="maximize-btn"></div> <div id="close-btn"></div> </div>
</div>
<article>
<span></span>
</article>
</div>
<!-- webrings and credits -->
<footer>
<div id="webring-credits" class="terminal">
<a href="../">go back</a>
</div>
</footer>
</body>
</html>

379
posts/style.css Normal file
View file

@ -0,0 +1,379 @@
/*
i use catppuccin color schemes because jod i LOVE catppuccin
*/
@media (prefers-color-scheme: light) {
/*
catppuccin latte
*/
:root {
--rosewater: #dc8a78;
--flamingo: #dd7878;
--pink: #ea76cb;
--mauve: #8839ef;
--red: #d20f39;
--maroon: #e64553;
--peach: #fe640b;
--yellow: #df8e1d;
--green: #40a02b;
--teal: #179299;
--sky: #04a5e5;
--sapphire: #209fb5;
--blue: #1e66f5;
--lavender: #7287fd;
--text: #4c4f69;
--subtext1: #5c5f77;
--subtext0: #6c6f85;
--overlay2: #7c7f93;
--overlay1: #8c8fa1;
--overlay0: #9ca0b0;
--surface2: #acb0be;
--surface1: #bcc0cc;
--surface0: #ccd0da;
--base: #eff1f5;
--mantle: #e6e9ef;
--crust: #dce0e8;
/* wallpaper */
--background-image: url("../assets/backgrounds/plasma-6-day-mocha.png");
}
}
@media (prefers-color-scheme: dark) {
/*
catppuccin mocha
*/
:root {
--rosewater: #f5e0dc;
--flamingo: #f2cdcd;
--pink: #f5c2e7;
--mauve: #cba6f7;
--red: #f38ba8;
--maroon: #eba0ac;
--peach: #fab387;
--yellow: #f9e2af;
--green: #a6e3a1;
--teal: #94e2d5;
--sky: #89dceb;
--sapphire: #74c7ec;
--blue: #89b4fa;
--lavender: #b4befe;
--text: #cdd6f4;
--subtext1: #bac2de;
--subtext0: #a6adc8;
--overlay2: #9399b2;
--overlay1: #7f849c;
--overlay0: #6c7086;
--surface2: #585b70;
--surface1: #45475a;
--surface0: #313244;
--base: #1e1e2e;
--mantle: #181825;
--crust: #11111b;
/* wallpaper */
--background-image: url("../assets/backgrounds/plasma-6-night-mocha.png");
}
}
/*
font config, JetBrains Mono
*/
@font-face {
font-family: "JetBrains Mono";
src:
local("JetBrains Mono"),
local("JetBrainsMono Nerd Font"),
url("../assets/fonts/JetBrainsMono/fonts/ttf/JetBrainsMono-Regular.ttf") format("opentype"),
url("../assets/fonts/JetBrainsMono/fonts/webfonts/JetBrainsMono-Regular.woff2") format("woff2");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "JetBrains Mono";
src:
local("JetBrains Mono"),
local("JetBrainsMono Nerd Font"),
url("../assets/fonts/JetBrainsMono/fonts/ttf/JetBrainsMono-Bold.ttf") format("opentype"),
url("../assets/fonts/JetBrainsMono/fonts/webfonts/JetBrainsMono-Bold.woff2") format("woff");
font-weight: bold;
font-style: bold;
}
@font-face {
font-family: "JetBrains Mono";
src:
local("JetBrains Mono"),
local("JetBrainsMono Nerd Font"),
url("../assets/fonts/JetBrainsMono/fonts/ttf/JetBrainsMono-Italic.ttf") format("opentype"),
url("../assets/fonts/JetBrainsMono/fonts/webfonts/JetBrainsMono-Italic.woff2") format("woff");
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: "JetBrains Mono";
src:
local("JetBrains Mono"),
local("JetBrainsMono Nerd Font"),
url("../assets/fonts/JetBrainsMono/fonts/ttf/JetBrainsMono-BoldItalic.ttf") format("opentype"),
url("../assets/fonts/JetBrainsMono/fonts/webfonts/JetBrainsMono-BoldItalic.woff2") format("woff");
font-weight: bold;
font-style: italic;
}
/*
font config, Lexend Deca
*/
@font-face {
font-family: "Lexend Deca";
src:
local("Lexend Deca"),
local("Lexend"),
url("../assets/fonts/LexendDeca/static/LexendDeca-Regular.ttf") format("opentype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Lexend Deca";
src:
local("Lexend Deca"),
local("Lexend"),
url("../assets/fonts/LexendDeca/static/LexendDeca-Bold.ttf") format("opentype");
font-weight: bold;
font-style: bold;
}
/*
background wallpaper, font
*/
body {
background-color: var(--crust);
background: var(--background-image) no-repeat center center fixed;
background-size: cover;
font-family: "JetBrains Mono";
font-size: 18px;
}
/*
styling of the terminal windows
*/
.terminal {
/* the titlebar of the terminals */
.term-titlebar {
display: grid;
grid-template-columns: 2fr auto 2fr;;
grid-template-areas:
"term-icon term-title term-buttons";
margin: -10px 0px -20px;
/* terminal icon */
img {
width: 22px;
height: 22px;
align-self: center;
}
/* title text */
p, a {
font-family: "Lexend Deca";
font-size: 16px;
color: var(--text);
text-decoration: none;
grid-column: 2;
}
/* window buttons */
div {
display: flex;
height: 22px;
align-self: center;
margin-left: auto;
#minimize-btn {
width: 22px;
height: 22px;
background: var(--surface2);
border-radius: 50%;
transition: .2s background;
}
#maximize-btn {
width: 22px;
height: 22px;
background: var(--surface2);
border-radius: 50%;
margin-left: 10px;
transition: .2s background;
}
#close-btn {
width: 22px;
height: 22px;
background: var(--surface2);
border-radius: 50%;
margin-left: 10px;
transition: .2s background;
}
}
}
background-color: var(--base);
color: var(--text);
border: var(--mantle) solid 3px;
border-radius: 20px;
max-width: 48em;
padding: 14px 24px;
margin-left: auto;
margin-right: auto;
margin-bottom: 3.4em;
transition: .2s border-color;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.terminal:hover {
.term-titlebar {
div {
#minimize-btn {
background: var(--yellow);
transition: .2s background;
}
#maximize-btn {
background: var(--green);
transition: .2s background;
}
#close-btn {
background: var(--red);
transition: .2s background;
}
}
}
border-color: var(--green);
transition: .2s border-color;
}
.terminal > .term-titlebar > p:hover, a:hover {
text-decoration: underline;
}
/*
text formatting and config stuff
font-family and <p> is set under .terminal
*/
/* the only headings i use */
h1, h1 a {
color: var(--text);
font-size: 32px;
text-decoration: none;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 20px
}
/* TEXT */
p, li {
font-size: 18px;
}
/* links should look good i think */
a {
font-size: 18px;
color: var(--green);
}
/* smol text */
small {
font-size: 14px;
}
/* lists need some styling */
li {
margin-left: -1em;
padding-bottom: 18px;
}
/* gay ass text */
.rainbow {
animation: 2s linear infinite rainbow;
}
/* heading 1 is also clickable */
h1 a:hover {
text-decoration: underline;
}
/*
about me section/terminal
*/
.terminal:first-child {
margin-top: 3.8em;
}
/*
footer/credits
*/
footer {
.fediring a {
display: inline-grid;
font-size: 18px;
color: var(--green);
text-decoration: none;
margin-bottom: .5em;
}
p, a {
text-align: center;
font-size: 16px;
margin: .4em 0px .4em;
}
img {
max-width: 30%;
display: flex;
margin-left: auto;
margin-right: auto;
}
}
/*
animations
*/
@keyframes spin-y {
/* values: 128px, 256px, 348px, 396px*/
0% { transform: perspective(396px) rotateY(0); }
100% { transform: perspective(396px) rotateY(360deg); }
}
@keyframes rainbow {
0% {filter: hue-rotate(0deg) contrast(150%) saturate(150%); }
100% { filter: hue-rotate(360deg) contrast(150%) saturate(150%); }
}
/*
modify widths and spacing depending on the size of the display
*/
@media screen and (max-width: 59em) {
.terminal:first-child {
margin-top: 0.4em;
}
.terminal {
.term-titlebar {
margin: -16px 0px -24px;
}
margin-bottom: 0.7em;
padding: 10px 16px;
}
.socials-contacts-list {
grid-template-columns: repeat(1, 1fr);
}
}