blog index update, split up css files to make it less pain

This commit is contained in:
Ruben 2024-09-30 17:26:47 -05:00
commit 4212149022
No known key found for this signature in database
5 changed files with 399 additions and 369 deletions

22
blog.css Normal file
View file

@ -0,0 +1,22 @@
/* article cards styling */
.article-card {
background-color: var(--surface0);
border-radius: 20px;
padding: 1rem;
header {
h3 {
margin-top: unset !important;
margin-bottom: -.6rem;
}
p {
margin-top: .6rem;
}
}
}
.article-card:not(:last-child) {
margin-bottom: 1rem;
}

View file

@ -4,11 +4,12 @@
<head>
<meta charset="UTF-8">
<title>do not interact @ s.p.g</title>
<title>blog @ s.p.g</title>
<link rel="icon" type="image/gif" href="/assets/favicon.png">
<link rel="stylesheet" type="text/css" href="/colors.css">
<link rel="stylesheet" type="text/css" href="/font.css">
<link rel="stylesheet" type="text/css" href="/style.css">
<link rel="stylesheet" type="text/css" href="/blog.css">
<link rel="stylesheet" type="text/css" href="/assets/fonts/Phosphor/bold/style.css">
<link rel="stylesheet" type="text/css" href="/assets/fonts/Phosphor/fill/style.css">
<link rel="canonical" href="https://sneexy.pages.gay/">
@ -58,8 +59,8 @@
<span id="seperator"></span>
<article class="article-card">
<header>
<h3>sigma bob!!!</h3>
<p>or some shit idk</p>
<h3><a href="./my-thoughts-on-social-media">sigma bob!!!</a></h3>
<p><small>or some shit idk</small></p>
</header>
</article>
</section>

371
home.css Normal file
View file

@ -0,0 +1,371 @@
/* about me section/first terminal */
#sneexy > section {
h1 #pfp {
width: auto;
height: 6rem;
vertical-align: middle;
}
.selfinfo {
display: grid;
padding-top: 5px;
grid-template-areas:
"pronouns names";
div {
text-align: left;
border-radius: 1em;
padding: .7em 1em;
ul {
padding-left: 1em;
}
li {
padding-bottom: 6px !important;
list-style: none;
}
}
div:first-child {
background-color: color-mix(in srgb, var(--flamingo) 20%, transparent);
}
div:last-child {
background-color: color-mix(in srgb, var(--lavender) 20%, transparent);
margin-left: 1.5em;
}
}
h1 {
margin-bottom: 1px;
}
p {
margin-top: 3px;
}
text-align: center;
}
/* socials and links sections */
.socials-contacts-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
margin-bottom: .5em;
}
.social-container {
display: inline-flex;
align-items: center;
margin: .3em;
padding: .2em;
border-radius: 1em;
background-color: var(--crust);
p, a, small {
padding-left: 1mm;
padding-right: 1mm;
margin-top: .8mm;
margin-bottom: .8mm;
}
a i {
color: var(--text) !important;
font-size: 1.5em;
padding-left: .8mm;
padding-right: .8mm;
vertical-align: middle;
}
a:has(i) {
text-decoration: none !important;
}
}
div#socials-and-contacts.terminal .socials-contacts-list #fedi {
background-color: color-mix(in srgb, var(--peach) 25%, transparent);
p, a, small {
color: var(--text);
text-decoration: none;
}
p:hover, a:hover {
color: var(--peach);
text-decoration: underline;
small {
color: var(--peach) !important;
text-decoration: underline;
}
}
}
div#socials-and-contacts.terminal .socials-contacts-list #email {
background-color: color-mix(in srgb, var(--red) 25%, transparent);
p, a {
color: var(--text);
text-decoration: none;
}
p:hover, a:hover {
color: var(--red);
text-decoration: underline;
}
i {
color: var(--text) !important;
font-size: 1.5em;
padding-left: 1.8mm;
padding-right: 2.8mm;
vertical-align: middle;
}
}
div#socials-and-contacts.terminal .socials-contacts-list #listenbrainz {
background-color: color-mix(in srgb, var(--mauve) 25%, transparent);
p, a {
color: var(--text);
text-decoration: none;
}
p:hover, a:hover {
color: var(--mauve);
text-decoration: underline;
}
}
div#socials-and-contacts.terminal .socials-contacts-list #gitgay {
background-color: color-mix(in srgb, var(--red) 10%, transparent);
p, a {
color: var(--text);
text-decoration: none;
}
p:hover, a:hover {
color: var(--mauve);
text-decoration: underline;
}
}
div#socials-and-contacts.terminal .socials-contacts-list #blog {
background-color: color-mix(in srgb, var(--pink) 10%, transparent);
p, a {
color: var(--text);
text-decoration: none;
}
p:hover, a:hover {
color: var(--pink);
text-decoration: underline;
}
}
div#socials-and-contacts.terminal .socials-contacts-list #music {
background-color: color-mix(in srgb, var(--sky) 10%, transparent);
p, a {
color: var(--text);
text-decoration: none;
}
p:hover, a:hover {
color: var(--sky);
text-decoration: underline;
}
}
div#socials-and-contacts.terminal .socials-contacts-list #shitposts {
background-color: color-mix(in srgb, var(--red) 10%, transparent);
p, a {
color: var(--text);
text-decoration: none;
}
p:hover, a:hover {
color: var(--red);
text-decoration: underline;
}
}
div#socials-and-contacts.terminal .socials-contacts-list #internet-archive {
background-color: color-mix(in srgb, var(--overlay2) 10%, transparent);
p, a {
color: var(--text);
text-decoration: none;
}
p:hover, a:hover {
color: var(--text);
text-decoration: underline;
}
}
/* quotes section */
.quotes-container {
display: inline-block;
text-align: center;
margin: .3em;
padding: .2em;
border-radius: 1em;
background-color: var(--crust);
p, a, small {
padding-left: 1mm;
padding-right: 1mm;
margin-top: .8mm;
margin-bottom: .8mm;
}
}
div#quotes.terminal .socials-contacts-list #limineow {
background-color: color-mix(in srgb, var(--red) 25%, transparent);
p, a, small {
color: var(--text);
text-decoration: none;
}
a:hover {
color: var(--red);
text-decoration: underline;
small {
color: var(--red) !important;
text-decoration: underline;
}
}
}
div#quotes.terminal .socials-contacts-list #bready {
background-color: color-mix(in srgb, var(--peach) 25%, transparent);
p, a, small {
color: var(--text);
text-decoration: none;
}
a:hover {
color: var(--peach);
text-decoration: underline;
small {
color: var(--peach) !important;
text-decoration: underline;
}
}
}
div#quotes.terminal .socials-contacts-list #mikoto {
background-color: color-mix(in srgb, var(--lavender) 25%, transparent);
p, a, small {
color: var(--text);
text-decoration: none;
}
a:hover {
color: var(--lavender);
text-decoration: underline;
small {
color: var(--lavender) !important;
text-decoration: underline;
}
}
}
div#quotes.terminal .socials-contacts-list #av70 {
background-color: color-mix(in srgb, var(--mauve) 25%, transparent);
p, a, small {
color: var(--text);
text-decoration: none;
}
a:hover {
color: var(--mauve);
text-decoration: underline;
small {
color: var(--mauve) !important;
text-decoration: underline;
}
}
}
div#quotes.terminal .socials-contacts-list #vozy {
background-color: color-mix(in srgb, var(--pink) 25%, transparent);
p, a, small {
color: var(--text);
text-decoration: none;
}
a:hover {
color: var(--pink);
text-decoration: underline;
small {
color: var(--pink) !important;
text-decoration: underline;
}
}
}
div#quotes.terminal .socials-contacts-list #guigui {
background-color: color-mix(in srgb, var(--green) 25%, transparent);
p, a, small {
color: var(--text);
text-decoration: none;
}
a:hover {
color: var(--green);
text-decoration: underline;
small {
color: var(--green) !important;
text-decoration: underline;
}
}
}
div#quotes.terminal .socials-contacts-list #binbows {
background-color: color-mix(in srgb, var(--crust) 25%, transparent);
p, a, small {
color: var(--text);
text-decoration: none;
}
a:hover {
color: var(--text);
text-decoration: underline;
small {
color: var(--text) !important;
text-decoration: underline;
}
}
}
/* buttons section !! */
.buttons {
font-size: 0px;
img {
margin-right: 5px;
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
}
}
/* custom css window */
#css {
style {
display: block;
padding: 1em;
margin-bottom: 1em;
width: auto;
height: auto;
background-color: var(--surface0);
border-radius: 1em;
white-space: break-spaces;
}
}
/* modify widths and spacing depending on the size of the display */
@media screen and (max-width: 59em) {
#sneexy > section {
.selfinfo {
grid-template-areas:
"pronouns"
"names";
div {
text-align: center;
margin-left: auto;
margin-right: auto;
ul {
text-align: left !important;
}
}
div:first-child {
margin-bottom: 1em;
}
div:last-child {
margin-left: auto !important;
}
}
}
.socials-contacts-list {
grid-template-columns: repeat(1, 1fr);
}
}

View file

@ -9,6 +9,7 @@
<link rel="stylesheet" type="text/css" href="/colors.css">
<link rel="stylesheet" type="text/css" href="/font.css">
<link rel="stylesheet" type="text/css" href="/style.css">
<link rel="stylesheet" type="text/css" href="/home.css">
<link rel="stylesheet" type="text/css" href="/assets/fonts/Phosphor/bold/style.css">
<link rel="stylesheet" type="text/css" href="/assets/fonts/Phosphor/fill/style.css">
<link rel="canonical" href="https://sneexy.pages.gay/">

367
style.css
View file

@ -289,353 +289,12 @@ details[open] > summary::after {
transform: rotate(180deg);
}
/* about me section/first terminal */
/* padding above first terminal */
.terminal:nth-child(2) {
margin-top: 3.8em;
}
#sneexy > section {
h1 #pfp {
width: auto;
height: 6rem;
vertical-align: middle;
}
.selfinfo {
display: grid;
padding-top: 5px;
grid-template-areas:
"pronouns names";
div {
text-align: left;
border-radius: 1em;
padding: .7em 1em;
ul {
padding-left: 1em;
}
li {
padding-bottom: 6px !important;
list-style: none;
}
}
div:first-child {
background-color: color-mix(in srgb, var(--flamingo) 20%, transparent);
}
div:last-child {
background-color: color-mix(in srgb, var(--lavender) 20%, transparent);
margin-left: 1.5em;
}
}
h1 {
margin-bottom: 1px;
}
p {
margin-top: 3px;
}
text-align: center;
}
/* socials and links sections */
.socials-contacts-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
margin-bottom: .5em;
}
.social-container {
display: inline-flex;
align-items: center;
margin: .3em;
padding: .2em;
border-radius: 1em;
background-color: var(--crust);
p, a, small {
padding-left: 1mm;
padding-right: 1mm;
margin-top: .8mm;
margin-bottom: .8mm;
}
a i {
color: var(--text) !important;
font-size: 1.5em;
padding-left: .8mm;
padding-right: .8mm;
vertical-align: middle;
}
a:has(i) {
text-decoration: none !important;
}
}
div#socials-and-contacts.terminal .socials-contacts-list #fedi {
background-color: color-mix(in srgb, var(--peach) 25%, transparent);
p, a, small {
color: var(--text);
text-decoration: none;
}
p:hover, a:hover {
color: var(--peach);
text-decoration: underline;
small {
color: var(--peach) !important;
text-decoration: underline;
}
}
}
div#socials-and-contacts.terminal .socials-contacts-list #email {
background-color: color-mix(in srgb, var(--red) 25%, transparent);
p, a {
color: var(--text);
text-decoration: none;
}
p:hover, a:hover {
color: var(--red);
text-decoration: underline;
}
i {
color: var(--text) !important;
font-size: 1.5em;
padding-left: 1.8mm;
padding-right: 2.8mm;
vertical-align: middle;
}
}
div#socials-and-contacts.terminal .socials-contacts-list #listenbrainz {
background-color: color-mix(in srgb, var(--mauve) 25%, transparent);
p, a {
color: var(--text);
text-decoration: none;
}
p:hover, a:hover {
color: var(--mauve);
text-decoration: underline;
}
}
div#socials-and-contacts.terminal .socials-contacts-list #gitgay {
background-color: color-mix(in srgb, var(--red) 10%, transparent);
p, a {
color: var(--text);
text-decoration: none;
}
p:hover, a:hover {
color: var(--mauve);
text-decoration: underline;
}
}
div#socials-and-contacts.terminal .socials-contacts-list #blog {
background-color: color-mix(in srgb, var(--pink) 10%, transparent);
p, a {
color: var(--text);
text-decoration: none;
}
p:hover, a:hover {
color: var(--pink);
text-decoration: underline;
}
}
div#socials-and-contacts.terminal .socials-contacts-list #music {
background-color: color-mix(in srgb, var(--sky) 10%, transparent);
p, a {
color: var(--text);
text-decoration: none;
}
p:hover, a:hover {
color: var(--sky);
text-decoration: underline;
}
}
div#socials-and-contacts.terminal .socials-contacts-list #shitposts {
background-color: color-mix(in srgb, var(--red) 10%, transparent);
p, a {
color: var(--text);
text-decoration: none;
}
p:hover, a:hover {
color: var(--red);
text-decoration: underline;
}
}
div#socials-and-contacts.terminal .socials-contacts-list #internet-archive {
background-color: color-mix(in srgb, var(--overlay2) 10%, transparent);
p, a {
color: var(--text);
text-decoration: none;
}
p:hover, a:hover {
color: var(--text);
text-decoration: underline;
}
}
/* quotes section */
.quotes-container {
display: inline-block;
text-align: center;
margin: .3em;
padding: .2em;
border-radius: 1em;
background-color: var(--crust);
p, a, small {
padding-left: 1mm;
padding-right: 1mm;
margin-top: .8mm;
margin-bottom: .8mm;
}
}
div#quotes.terminal .socials-contacts-list #limineow {
background-color: color-mix(in srgb, var(--red) 25%, transparent);
p, a, small {
color: var(--text);
text-decoration: none;
}
a:hover {
color: var(--red);
text-decoration: underline;
small {
color: var(--red) !important;
text-decoration: underline;
}
}
}
div#quotes.terminal .socials-contacts-list #bready {
background-color: color-mix(in srgb, var(--peach) 25%, transparent);
p, a, small {
color: var(--text);
text-decoration: none;
}
a:hover {
color: var(--peach);
text-decoration: underline;
small {
color: var(--peach) !important;
text-decoration: underline;
}
}
}
div#quotes.terminal .socials-contacts-list #mikoto {
background-color: color-mix(in srgb, var(--lavender) 25%, transparent);
p, a, small {
color: var(--text);
text-decoration: none;
}
a:hover {
color: var(--lavender);
text-decoration: underline;
small {
color: var(--lavender) !important;
text-decoration: underline;
}
}
}
div#quotes.terminal .socials-contacts-list #av70 {
background-color: color-mix(in srgb, var(--mauve) 25%, transparent);
p, a, small {
color: var(--text);
text-decoration: none;
}
a:hover {
color: var(--mauve);
text-decoration: underline;
small {
color: var(--mauve) !important;
text-decoration: underline;
}
}
}
div#quotes.terminal .socials-contacts-list #vozy {
background-color: color-mix(in srgb, var(--pink) 25%, transparent);
p, a, small {
color: var(--text);
text-decoration: none;
}
a:hover {
color: var(--pink);
text-decoration: underline;
small {
color: var(--pink) !important;
text-decoration: underline;
}
}
}
div#quotes.terminal .socials-contacts-list #guigui {
background-color: color-mix(in srgb, var(--green) 25%, transparent);
p, a, small {
color: var(--text);
text-decoration: none;
}
a:hover {
color: var(--green);
text-decoration: underline;
small {
color: var(--green) !important;
text-decoration: underline;
}
}
}
div#quotes.terminal .socials-contacts-list #binbows {
background-color: color-mix(in srgb, var(--crust) 25%, transparent);
p, a, small {
color: var(--text);
text-decoration: none;
}
a:hover {
color: var(--text);
text-decoration: underline;
small {
color: var(--text) !important;
text-decoration: underline;
}
}
}
/* buttons section !! */
.buttons {
font-size: 0px;
img {
margin-right: 5px;
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
}
}
/* custom css window */
#css {
style {
display: block;
padding: 1em;
margin-bottom: 1em;
width: auto;
height: auto;
background-color: var(--surface0);
border-radius: 1em;
white-space: break-spaces;
}
}
/* footer/credits */
footer {
@ -923,28 +582,4 @@ footer {
margin: 0px .7em .7em;
padding: 10px 16px;
}
#sneexy > section {
.selfinfo {
grid-template-areas:
"pronouns"
"names";
div {
text-align: center;
margin-left: auto;
margin-right: auto;
ul {
text-align: left !important;
}
}
div:first-child {
margin-bottom: 1em;
}
div:last-child {
margin-left: auto !important;
}
}
}
.socials-contacts-list {
grid-template-columns: repeat(1, 1fr);
}
}