diff --git a/index.html b/index.html index 9644e30..723852f 100644 --- a/index.html +++ b/index.html @@ -64,7 +64,7 @@

~/socials-and-contacts

-
+

socials n' contacts

you can find or contact me in these places i'm usually available and active on. i suck 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.

@@ -101,7 +101,7 @@ sneexy
-
+ diff --git a/posts/index.html b/posts/index.html new file mode 100644 index 0000000..7486b3a --- /dev/null +++ b/posts/index.html @@ -0,0 +1,57 @@ + + + + + + posts ~ sneexy dot pages dot gay + + + + + + + + + + + + + + + + +
+
+ +

~/posts

+
+
+
+

posts

+

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.

+ for more spicy or venty blogs n stuff, check out postsn't, but it's probably not for everyone. +
+
+ + +
+
+ +

~/articles

+
+
+
+ +
+
+ + + + + + + diff --git a/posts/style.css b/posts/style.css new file mode 100644 index 0000000..66e1d6b --- /dev/null +++ b/posts/style.css @@ -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

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); + } +} \ No newline at end of file