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
+
+ 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);
- }
}