From 42121490220d6b91ea5569c4f89692dfbf507987 Mon Sep 17 00:00:00 2001 From: Ruben Date: Mon, 30 Sep 2024 17:26:47 -0500 Subject: [PATCH] blog index update, split up css files to make it less pain --- blog.css | 22 +++ blog/index.html | 7 +- home.css | 371 ++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 1 + style.css | 367 +---------------------------------------------- 5 files changed, 399 insertions(+), 369 deletions(-) create mode 100644 blog.css create mode 100644 home.css diff --git a/blog.css b/blog.css new file mode 100644 index 0000000..2acd236 --- /dev/null +++ b/blog.css @@ -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; +} \ No newline at end of file diff --git a/blog/index.html b/blog/index.html index cabdd46..bba13be 100644 --- a/blog/index.html +++ b/blog/index.html @@ -4,11 +4,12 @@ - do not interact @ s.p.g + blog @ s.p.g + @@ -58,8 +59,8 @@
-

sigma bob!!!

-

or some shit idk

+

sigma bob!!!

+

or some shit idk

diff --git a/home.css b/home.css new file mode 100644 index 0000000..65a11a5 --- /dev/null +++ b/home.css @@ -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); + } +} diff --git a/index.html b/index.html index 18731b3..2bba427 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,7 @@ + diff --git a/style.css b/style.css index bb19461..3a8011b 100644 --- a/style.css +++ b/style.css @@ -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); - } }