From 24f3cbaf63e3bf67fa4fe9979681ba9cb9d7a55e Mon Sep 17 00:00:00 2001 From: onomanapeia Date: Thu, 9 Jan 2025 11:03:41 -0600 Subject: [PATCH] change directory structure & new blog post --- _posts/2025-01-09-akeome.md | 26 + _posts/updates/2025-01-09-title.md | 6 + css/honey.css | 86 +++ css/main.css | 49 ++ css/moon.css | 69 +++ css/peach.css | 25 + css/sakura.css | 50 ++ css/style.css | 837 +++++++++++++++++++++++++++++ js/menu.js | 54 ++ js/moji.js | 2 + js/profile.js | 16 + js/scrobble.js | 9 + js/soundbite.js | 3 + js/theme.js | 22 + music/mana.mp3 | 3 + music/mya.mp3 | 3 + music/peachmoon.mp3 | 3 + 17 files changed, 1263 insertions(+) create mode 100644 _posts/2025-01-09-akeome.md create mode 100644 _posts/updates/2025-01-09-title.md create mode 100644 css/honey.css create mode 100644 css/main.css create mode 100644 css/moon.css create mode 100644 css/peach.css create mode 100644 css/sakura.css create mode 100644 css/style.css create mode 100644 js/menu.js create mode 100644 js/moji.js create mode 100644 js/profile.js create mode 100644 js/scrobble.js create mode 100644 js/soundbite.js create mode 100644 js/theme.js create mode 100644 music/mana.mp3 create mode 100644 music/mya.mp3 create mode 100644 music/peachmoon.mp3 diff --git a/_posts/2025-01-09-akeome.md b/_posts/2025-01-09-akeome.md new file mode 100644 index 0000000..90f6037 --- /dev/null +++ b/_posts/2025-01-09-akeome.md @@ -0,0 +1,26 @@ +--- +layout: 2col +title: "あけおめ～♪" +date: 2025-01-09 +tags: girlblogging +show_blog_footer: true +--- +明けましておめでとうございます～♪！ Happy new year, everyone~♪! + +2024 was...a lot. I feel like overall, it was an ok year, especially compared to years like 2020, but no year is without its ups and downs. + +2024 was the year I began this website! We went through three major design iterations, and I'm planning on a fourth soon (yes I like how the site currently looks, but the carbon output has increased and so I want to make it both more accessible, and also work on sustainability; ALSO I get bored easily and am constantly ). + +I started journaling again, after not having journaled regularly since I was a teenager, and I gathered a sizeable collection of washi tape and stickers, and even a few notebooks! I acquired many pens in my search for a pen that was comfortable enough for me to write with for a long time, and landed on fountain pens as a concept. I broke two jinhaos, both of my pink ones... {% emoji crydance %} + +I gathered a small collection of inks and began mixing my own fountain pen inks! I quit playing the MMO i had dedicated much of my time to the past three years (FFXIV), and I started therapy up again. I got closer with two important friends, and cut out one toxic one about halfway through the year. + +I became more comfortable with myself, started practicing more self-compassion, learned to stand up for myself, and spent more time looking after myself instead of focusing all of my attention onto others. It was hard, and at times, it felt borderline narcissistic, but I learned that was because of how I'd been raised, and not because I was a narcissist. + +In 2025, I'm looking forward to doing more art, trying out more makeup looks and maybe even really zeroing in on a personal style, makeup-wise. I'm looking forward to picking sewing back up and dipping my toes into music production. + +I want to read more, draw more, finish some crochet projects, and continue to re-evaluate the things I do and have in my life and continue [konmari](https://en.wikipedia.org/wiki/Marie_Kondo#KonMari_method)-ing things and practices that no longer serve me, and tidy up my life and my home in 2025. + +there's a lot of things about this and the next few years that will be really challenging for me, as an american, but I really hope I'll get through it ok and that even if nothing else gets any better, then at least my relationship with myself and my relationships with people will continue to improve. + +Thank you for joining me on this adventure this past year, anyone who is reading this now, and may your 2025 bring you joy!! \ No newline at end of file diff --git a/_posts/updates/2025-01-09-title.md b/_posts/updates/2025-01-09-title.md new file mode 100644 index 0000000..b33406f --- /dev/null +++ b/_posts/updates/2025-01-09-title.md @@ -0,0 +1,6 @@ +--- +date: 2025-01-09 +title: "site update" +collection: updates +--- +new [blog post]({% link _posts/2025-01-09-akeome.md %})! \ No newline at end of file diff --git a/css/honey.css b/css/honey.css new file mode 100644 index 0000000..bc53ded --- /dev/null +++ b/css/honey.css @@ -0,0 +1,86 @@ +:root { + --bgColor: #FEDF9E; + --fgColor: #5a4735; + --metaColor: #fce699; + --headColor: #705134; + --linkColor: #ec5800; + --hovColor: #d2691e; + --bgSelect: #E5C589; + background-color: #FEDF9E; + background-size: 10px 10px; + background-image: + linear-gradient(to right, #fdd37f 1px, transparent 1px), + linear-gradient(to bottom, #fdd37f 1px, transparent 1px); + --sidebarUrl: url("/img/theme/sunny_plaid_jonespatterns.jpg") repeat; + --bullet: url("/img/theme/crepe.gif"); + --theme-image: url("/img/theme/pickebicke.gif"); + } + + .peachmoon { + text-align: center; + font-size: .9em; + padding: 0.75rem 0 1em 0; + } + + ul.update { + list-style-image: url("/img/theme/new.gif"); + } + + @font-face { + font-family: pointfree; + src: url("/fonts/pointfree.ttf") + } + @font-face { + font-family: cheese; + src: url("/fonts/CheeseMatcha.otf") + } + @font-face { + font-family: kitto; + src: url("/fonts/kitto.otf"); + } + + html { + font: .85rem 'pointfree', monospace; + } + + img { + opacity: 0.9; + } + + h1 { + padding-top: 2.25rem; + padding-bottom: .25rem; + font: 4.25em 'obliviate', cursive; + letter-spacing: 0.25rem; + line-height: 3rem; + } + + h2 { + font: bold 2.8rem 'kitto', monospace; + line-height: 3rem; + padding-top: .5rem; + } + + h3 { + font: 2.8em 'cheese', monospace; + line-height: 3rem; + padding: .4rem 0 .2rem; + } + + h4 { + font: bold 2.9rem 'firstly', monospace; + line-height: 2rem; + padding-top: 1rem; + } + + code { + font: 1rem 'courier', monospace; + } + + .highlight { + padding: 0.5rem; + } + + .theme-credit { + padding-bottom: 0.5rem; + } \ No newline at end of file diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..c649aff --- /dev/null +++ b/css/main.css @@ -0,0 +1,49 @@ +/* preloads */ +@font-face { + font-family: pixelegance; + src: url("/fonts/pixelegance.ttf") + } + +/* main color theme */ +:root { + --boxbg: ; + --text: ; + --primary: ; + --secondary: ; + --accent: ; + --link: ; + --linkhover: ; + --highlight: ; + --dark: ; + --gridbg: ; + --gridline: ; +} +/* dark mode */ +@media (prefers-color-scheme: dark) { + :root { + --boxbg: ; + --text: ; + --primary: ; + --secondary: ; + --accent: ; + --link: ; + --linkhover: ; + --highlight: ; + --gridbg: ; + --gridline: ; + } +} + +.grid { + background-image: + linear-gradient(to right, var(--gridbg) 1px, transparent 1px), + linear-gradient(to bottom, var(--gridline) 1px, transparent 1px); +} + +.spoiler { + background-color: var(--dark); +} + +.spoiler:hover { + background-color: inherit; +} \ No newline at end of file diff --git a/css/moon.css b/css/moon.css new file mode 100644 index 0000000..11d2bc6 --- /dev/null +++ b/css/moon.css @@ -0,0 +1,69 @@ +:root { + --bgColor: #000040; + --fgColor: #D8DAFF; + --metaColor: #141C36; + --headColor: #A0A8F4; + --linkColor: #FF72F7; + --hovColor: #6BB6E5; + --bgSelect: #453355; + --sidebarUrl: url("/img/theme/stars.gif") repeat; + background-color: #030314; + background-size: 10px 10px; + background-image: + linear-gradient(to right, #1C1736 1px, transparent 1px), + linear-gradient(to bottom, #1C1736 1px, transparent 1px); + --bullet: url("/img/theme/pastelstar.gif"); + --theme-image: url("/img/theme/spaaace.gif"); + } + + ul.update { + list-style-image: url("/img/theme/upup.gif"); + } + + @font-face { + font-family: vcr; + src: url("/fonts/vcr.ttf") + } + @font-face { + font-family: loveletter; + src: url("/fonts/loveletter.ttf") + } + @font-face { + font-family: starlight; + src: url("/fonts/starlight.ttf") + } + @font-face { + font-family: pixelegance; + src: url("/fonts/pixelegance.ttf") + } + + html { + font: .9rem 'vcr', monospace; + line-height: 1.25rem; + } + + h1 { + font: 3.8em loveletter, monospace; + } + + h2 { + font: bold 2.75em pixelegance, monospace; + line-height: 2.5rem; + padding-top: .5rem; + } + + h3 { + font: 2.2em starlight, monospace; + line-height: 2rem; + padding: .9rem 0; + } + + h4 { + font: bold 1.75rem pixelegance, monospace; + padding-top: 1rem; + margin: 0.1vw 0.1vw 0.1vw 1.5vw; + } + + code { + font: 1rem courier, monospace; + } \ No newline at end of file diff --git a/css/peach.css b/css/peach.css new file mode 100644 index 0000000..80df79f --- /dev/null +++ b/css/peach.css @@ -0,0 +1,25 @@ +:root { + --bgColor: #FFFAFC; + --fgColor: #6e5854; + --metaColor: #FFEFF1; + --headColor: #E05969; + --linkColor: #BC2F3F; + --hovColor: #e3868f; + --bgSelect: #fab0b8; + --sidebarUrl: url("/img/theme/peach.jpeg") repeat; + --bullet: url("/img/theme/kingluludeer_peach.png"); + --theme-image: url("/img/theme/kittea_paws.gif"); + background-color: white; + background-size: 10px 10px; + background-image: + linear-gradient(to right, #FFEFF1 1px, transparent 1px), + linear-gradient(to bottom, #FFEFF1 1px, transparent 1px); + } + + ul.update { + list-style-image: url("/img/theme/loveup.gif"); + } + + .theme-credit { + padding-bottom: 0.5rem; + } \ No newline at end of file diff --git a/css/sakura.css b/css/sakura.css new file mode 100644 index 0000000..5172053 --- /dev/null +++ b/css/sakura.css @@ -0,0 +1,50 @@ +:root { + --bgColor: #F7DEE9; + --fgColor: #626865; + --metaColor: #F6E6E6; + --headColor: #6caecf; + --linkColor: #d36977; + --hovColor: #FF5686; + --bgSelect: #BAD4AF; + --sidebarUrl: url("/img/theme/zeudontumblr.png"); + background-color: var(--bgColor); + background-size: 10px 10px; + background-image: + linear-gradient(to right, #F2EAEA 1px, transparent 1px), + linear-gradient(to bottom, #F2EAEA 1px, transparent 1px); + --bullet: url("/img/theme/acrylliaDA-sakurabulletdark.png"); + --theme-image: url("/img/theme/nyanberri.png"); + } + + @font-face { + font-family: dokidoki; + src: url("/fonts/DokiDoki.otf") + } + + html { + font: .9rem 'dokidoki', monospace; + } + + a:hover { + text-decoration: underline dotted 2px var(--hovColor); + } + + nav { + background-size: cover; + } + + ul.fave { + list-style-image: url("/img/theme/tamagotchininja_heart.gif"); + } + + ul.update { + list-style-image: url("/img/theme/pinkarrow.gif"); + } + + pre { + font: .8rem 'dokidoki', monospace; + } + + .theme-credit { + padding-bottom: 0.5rem; + } \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..b731b87 --- /dev/null +++ b/css/style.css @@ -0,0 +1,837 @@ +:root { + --bgColor: #FFFAFC; + --fgColor: #6e5854; + --metaColor: #FFEFF1; + --headColor: #E05969; + --linkColor: #BC2F3F; + --hovColor: #e3868f; + --bgSelect: #3a2930; + --sidebarUrl: url("/img/theme/peach.jpeg") repeat; + background-color: white; + background-size: 10px 10px; + background-image: + linear-gradient(to right, #FFEFF1 1px, transparent 1px), + linear-gradient(to bottom, #FFEFF1 1px, transparent 1px); + --bullet: url("/img/theme/kingluludeer_peach.png"); + --theme-image: url("/img/theme/kittea_paws.gif"); /* credit: https://www.deviantart.com/kittea-paws/art/kitten-floating-away-with-balloons-886993258 */ +} + +@media (prefers-color-scheme: dark) { + :root { + --bgColor: #000040; + --fgColor: #D8DAFF; + --metaColor: #141C36; + --headColor: #A0A8F4; + --linkColor: #FF72F7; + --hovColor: #6BB6E5; + --bgSelect: #6c7086; + --sidebarUrl: url("/img/theme/stars.gif") repeat; + background-color: #030314; + background-size: 10px 10px; + background-image: + linear-gradient(to right, #1C1736 1px, transparent 1px), + linear-gradient(to bottom, #1C1736 1px, transparent 1px); + --bullet: url("/img/theme/pastelstar.gif"); + --theme-image: url("/img/theme/spaaace.gif"); + } + + ul.update { + list-style-image: url("/img/theme/upup.gif"); + } + + @font-face { + font-family: vcr; + src: url("/fonts/vcr.ttf") + } + @font-face { + font-family: loveletter; + src: url("/fonts/loveletter.ttf") + } + @font-face { + font-family: starlight; + src: url("/fonts/starlight.ttf") + } + @font-face { + font-family: pixelegance; + src: url("/fonts/pixelegance.ttf") + } + + html { + font: .9rem 'vcr', monospace; + line-height: 1.25rem; + } + + h1 { + font: 3.8em loveletter, monospace; + } + + h2 { + font: bold 2.75em pixelegance, monospace; + line-height: 2.5rem; + padding-top: .5rem; + } + + h3 { + font: 2.2em starlight, monospace; + line-height: 2rem; + padding: .9rem 0; + } + + h4 { + font: bold 1.75rem pixelegance, monospace; + padding-top: 1rem; + margin: 0.1rem 0.1rem 0.1rem 1.5rem; + } + + code { + font: 1rem courier, monospace; + } +} + +@font-face { + font-family: Hez; + src: url("/fonts/Hezaedrus.ttf") +} +@font-face { + font-family: hylie; + src: url("/fonts/Hylie.otf") +} +@font-face { + font-family: obliviate; + src: url("/fonts/Obliviate.otf") +} +@font-face { + font-family: firstly; + src: url("/fonts/Firstly.otf") +} + +::-moz-selection { + color: var(--metaColor); + background: var(--bgSelect) +} + +::selection { + color: var(--fgColor); + background: var(--bgSelect) +} + +article { + display:inline-block; + margin-left: 220px; + padding: 1px 20px; + height: 100%; + width: calc(100% - 270px); +} + +nav { + text-align: center; + padding: 16px; + width: 200px; + background: var(--sidebarUrl); + position: fixed; + z-index: 1; + top: 0; + left: 0; + height: 100%; + align-content: center; + overflow: auto; + scrollbar-color: var(--hovColor) var(--bgColor); + scrollbar-width: thin; +} + +nav > * { + padding: .4rem .25rem; +} + +nav a { + color: var(--fgColor); + text-decoration: none; + padding: .4rem .25rem; +} + +nav a.active { + color: var(--linkColor); +} +nav a:hover:not(.active) { + color: var(--fgColor); +} + +@media screen and (max-width: 700px) { + nav { + width: 100%; + height: fit-content; + position: relative; + justify-items: center; + background-color: var(--metaColor); + padding: 0; + padding-bottom: 1rem; + } + article { + margin-left: 0; width: 94%; + } + .menu-toggle { + padding-bottom: 1rem; + } +} + +footer { + font-size: 1.5em; + clear: both; + text-align: right; + margin: auto; + position:sticky; + padding-right: 10px; + bottom: 15px; +} + +@media screen and (max-width: 700px) { + footer { + font-size: 2em; + } + footer a { + background-color: var(--metaColor); + opacity: 0.25; + border-radius: .25em; + padding: .8rem; + } + footer a:hover { + opacity: 1; + } +} + +.menu a { + display: block +} + +.submenu { + display: none; + text-decoration: none; + font-style: italic; + font-size: .8rem; +} + +.menu-item a:hover { + text-decoration: none; + color: var(--fgColor); + background-color: var(--bgSelect); +} + +.menu-toggle { + color: var(--linkColor) +} + +.menu-toggle, .menu { + text-decoration: none; +} + +@media (max-width: 640px) { + nav a { + padding: 1rem; + } + .menu { + display: none; + } +} + +.nav-icon { + display: flex; + justify-content:center; +} + +.nav-icon i { + padding: 8px; + vertical-align: middle; +} + +@media screen and (max-width: 700px) { + .menu-toggle { + padding-top: 2rem; + } + .nav-icon { + padding: .5rem; + } +} + +.peachmoon { + text-align: center; + font-size: .9em; + padding: 1em; +} + +.theme-image { + content: var(--theme-image); + float: left; + padding-right: .75rem; +} + +details a { + display: block; +} + +details { + padding: .5rem 0 0 0; +} + +summary { + text-align: center; +} + +details summary > * { + display: inline; +} + +@media screen and (max-width: 700px) { + details { + padding: .5rem 0; + } + details a { + padding: 1rem 0; + } +} + +html { + scrollbar-color: var(--hovColor) var(--bgColor); + scrollbar-width: thin; + font-size: 1em; + font-style: normal; + line-height: 1.2; + margin: auto; + overflow-wrap: break-word; + background: var(--bgUrl); + color: var(--fgColor); + font-family: 'Hez', monospace; +} + +img { + vertical-align: middle; +} + +p { + margin: 0rem 1.5rem 1rem 1.5rem; +} + +@media (max-width: 640px) { + p { + margin: 1rem .5rem; + } +} + +a { + text-decoration: none; + color: var(--linkColor) +} + +a:hover { + text-decoration: underline dashed 2px; + color: var(--hovColor) +} + +.ph { + font-size: 1em; + color: var(--linkColor); + fill: var(--fgColor); + background-color: transparent; + vertical-align: middle; +} + +h1 { + color: var(--headColor); + font: 3.8em hylie, cursive; + line-height: .8em; + padding-top: .35em; + margin: 0; + text-align: center; +} + +h2 { + color: var(--headColor); + font: 3.5em firstly, cursive; + font-weight: bold; + line-height: .7em; + margin: 0.1rem 0.1rem 0.1rem 1.25rem; + padding: .1rem 0; +} + +h3 { + color: var(--headColor); + font: 2.6em obliviate, cursive; + line-height: 2rem; + margin: 0.1rem 0.1rem 0.1rem 1.5rem; + padding: .4rem 0 .2rem; +} + +h4 { + color: var(--headColor); + font: bold 2.9rem firstly, cursive; + margin: 0.1rem 0.1rem 0.1rem 1.5rem; + padding-top: 1rem; + line-height: 2rem; +} + +ul { + list-style-image: var(--bullet); + font-size: 1em; + line-height: 1.3em; + margin: 0.1rem 0.1rem 0.1rem 1rem; + padding-left: 1.75rem; +} + +ul.fave { + list-style-image: url("/img/main/heart.png"); + padding-bottom: 0.75rem; +} + +ul p, ol p { + margin-left: 0 +} + +ol { + font-size: 1em; + line-height: 1.2em; + margin: 0.1rem 0.1rem 0.1rem 1.5rem; + padding-left: 0; +} + +ol li { + margin-left: 1.5rem; +} + +pre { + border: 1px solid var(--bgSelect); + background-color: var(--bgColor); + padding: 1rem; + margin: 0 2rem 0.75rem; + overflow-x: auto; + font: 1.1em monospace; + color: var(--fgColor); + white-space: pre-wrap; + word-break: break-word; + padding-bottom: 0.75rem; +} + +address { + margin-left: 1.5rem; + font-size: 0.9em; +} + +time { + font-size: 0.9em; +} + +dt { + font-weight:bold; + margin-left: 3em; +} + +dt::before { + content: "・" +} + +dd { + font-style:italic; + margin-left: 5em; + padding-bottom: .7em; +} + +figure img { + border-radius: 1em; + max-width: 100%; +} + +figure { + text-align: center; + align-content: center; + margin: 1em; +} + +figcaption { + font-size: .9em; + font-style: italic; + line-height: 1em; + margin: auto; + padding-top: .5em; + max-width: 550px; +} + +hr { + border: dashed 1px; + color: var(--hovColor); + width: 93%; + margin: 1em auto; +} + +hr.blog { + width: 36%; +} + +@media screen and (max-width: 700px) { + hr.blog { + width: 99%; + } +} + +.profile-img img { + max-width: 200px; + text-align: center; + border-radius: 100%; + padding: 0; +} + +.theme-switches{ + text-align: center; + display: inline-flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; +} +.switch { + height: 1.5em; + width: 1.5em; + margin: 0.2em; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.25rem; + font-style: normal; +} +.switch:hover { + transform: scale(1.2); +} +@media screen and (max-width: 700px) { + .switch { + padding: 5px; + font-size: 2.5rem; + font-style: normal; + } +} + +.imgwall { + font-size: 0; + line-height: 0em; + image-rendering: pixelated; + text-align: center; +} + +.imgwall > img { + display: inline-block; +} + +#padded img { + padding: 1px; +} + +#nobutton { + font-size: 1rem; + display: inline-block; + vertical-align: middle; + padding: 1px; +} + +#userbox img { + image-rendering: auto; + vertical-align: middle; + margin: .1rem; + max-width: 239px; +} + +#stamp > img { + image-rendering: auto; + vertical-align: middle; + padding: 1px; +} + +#stamp { + margin: .5rem; +} + +#blinkies img, #blinkies > img { + max-width: 150px; +} + +#music { + text-align: center; +} + +#music a:hover { + text-decoration: none; +} + +.emote { + font-size: 0; + line-height: 0em; + text-align: center; +} + +.emote img { + display: inline-block; + padding: 1px; + width: 50px; +} + +.kaomoji { + background-color: var(--metaColor); + border-radius: 1em; + padding: 0.3em; + display: inline-flex; + vertical-align: center; + margin: 0.2em; +} + +.kaomoji:hover { + background-color: var(--hovColor) +} + +.center { + font-size: 0.9em; + image-rendering: pixelated; + text-align: center; + display: block; + justify-content: center; + align-items: center; +} + +.center a:hover { + text-decoration: none; +} + +.dotbox { + max-width: fit-content; + margin: 10px auto; + padding: 1rem; + border: var(--hovColor) dotted 2px; + border-radius: 1.5em; + background-color: var(--bgColor); + text-align: center; +} + +.dotbox ul { + display: inline-block; + text-align: left; + margin: auto; + list-style: none; +} + +#tag-cloud:hover { + text-decoration: none; +} + +#tag-cloud { + display:block; + text-align: center; + margin: auto; + font-family: firstly, cursive; + font-size: 1.5rem; + padding: 0; + border: dashed 1px; + color: var(--headColor); + background-color: var(--metaColor); + border-radius: 2rem; + width: fit-content; + padding: 0.25rem; +} + +#tag-cloud > * { + padding: 0.1rem 0.2rem; +} + +@media screen and (max-width: 700px) { + #tag-cloud > * { + padding: 0.25rem 0.25rem; + } + +} + +.site-tag a:hover { + text-decoration: none; + color: var(--headColor) +} + +.toc-list { + text-align: center; + justify-items: center; + margin: 0; + padding: .5em 0 0 0; +} + +#toc li { + display: inline-flex; +} + +#toc li::before { + content: url(/img/main/tinystar.gif); + padding-right: .5em; +} + +#toc li:last-child::after { + content: url(/img/main/tinystar.gif); + padding-left: .5em; +} + +.twocol { + display: flex; + gap: 10px; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.twocol > * { + margin: 1rem; +} + +.twocol ul { + list-style: none; + padding-left: 0; + margin: 0; +} + +.twocol .smolbox { + display: block; +} + +.smolbox { + padding: 0.5em; + background-color: var(--metaColor); + border: 1px dashed var(--hovColor); + border-radius: 1em; + max-width: fit-content; + text-align: left; + margin: auto; +} + +.threecol { + display: flex; + gap: 10px; + flex-wrap: wrap; + justify-content: center; + margin: auto; +} + +.threecol > * { + margin: .5rem; + max-width: calc(100% - .1rem); +} + +.threecol > p { + margin: 0; +} + +.threecol > .cover { + align-content: center; + text-align: right; + font-size: 1.25rem; +} + +@media screen and (max-width: 700px) { + .threecol { + justify-content: left; + width: calc(100% - .2rem); + } + .threecol > .cover > img { + width: calc(100% - .1rem); + } +} + +#statuscafe { + padding: .5em; + background-color: azure; + border: 1px solid midnightblue; +} +#statuscafe-username { + margin-bottom: .5em; +} +#statuscafe-content { + margin: 0 1em 0.5em 1em; +} + +.theme-credit { + display: inline-flex; + max-width: 95%; + gap: 10px; + align-items: center; + justify-content: center; + padding-top: .25rem; +} + +.theme-credit > * { + margin: auto; +} + +.theme-credit h4 { + padding: .1rem 0; +} + +.image-gallery { + width: 95%; + display: grid; + grid-template-columns: repeat(auto-fill,minmax(350px, 1fr)); + gap: 10px; + text-align: center; + padding-top: 1rem; +} + +.box { + width: 100%; + padding: 0; + margin: 0; +} + +.box img { + max-width: 380px +} + +@media (max-width: 640px) { + .box img { + max-width: 100% + } +} + +.img-gallery { + width: auto; + height: auto; + object-fit: cover; +} + +.masonry-container { + column-count: 4; /* Number of columns */ + column-gap: .5rem; /* Spacing between columns */ + margin: 0 auto; +} + +.masonry-container > * { + break-inside: avoid; /* Prevents items from breaking inside columns */ + margin-bottom: 10px; /* Space between items */ +} + +.masonry-item img { + max-width: 100%; + height: auto; /* Maintains aspect ratio */ + display: block; +} + +/* Responsive adjustments */ +@media (max-width: 1200px) { + .masonry-container { + column-count: 3; /* 3 columns on medium screens */ + } +} + +@media (max-width: 900px) { + .masonry-container { + column-count: 2; /* 2 columns on smaller screens */ + } +} + +@media (max-width: 640px) { + .masonry-container { + column-count: 1; /* 1 column on very small screens */ + } + .masonry-container p { + padding: 0; + margin: 0; + } + .masonry-container img { + width: calc(100% - .2rem); + } +} \ No newline at end of file diff --git a/js/menu.js b/js/menu.js new file mode 100644 index 0000000..bbdda06 --- /dev/null +++ b/js/menu.js @@ -0,0 +1,54 @@ +/* Toggle between showing and hiding the navigation menu links when the user clicks on the hamburger menu / bar icon */ +function myFunction() { + var x = document.getElementById("myLinks"); + if (x.style.display === "block") { + x.style.display = "none"; + } else { + x.style.display = "block"; + } +} + +function toggleSubmenu(event) { + event.preventDefault(); // Prevent the default anchor click behavior + var submenu = event.target.nextElementSibling; // Get the submenu + + if (submenu.style.display === "block") { + submenu.style.display = "none"; + } else { + submenu.style.display = "block"; + } +} + +// Function to keep the menu open based on the current URL +function setActiveMenu() { + const currentUrl = window.location.pathname; // Get current URL path + const menuItems = document.querySelectorAll('.menu a'); + + menuItems.forEach(item => { + // Check if the current item is the active one + if (item.getAttribute('href') === currentUrl) { + item.classList.add('active'); // Add active class to the current link + const submenu = item.closest('.submenu'); // Get the closest submenu of this item + + // If there's a submenu, show it + if (submenu) { + submenu.style.display = 'block'; // Open the submenu + const parentMenuItem = submenu.previousElementSibling; // Get the parent menu item + if (parentMenuItem) { + parentMenuItem.classList.add('active'); // Highlight the parent item + } + } + } else if (item.closest('.submenu') && item.getAttribute('href') === currentUrl) { + // If this is a submenu item, add active class to the submenu item + item.classList.add('active'); + +// Find the parent menu item and open the submenu +const parentMenuItem = item.closest('.menu-item'); +parentMenuItem.querySelector('.submenu-toggle').classList.add('active'); // Highlight parent item +const parentSubmenu = parentMenuItem.querySelector('.submenu'); // Get the submenu +if (parentSubmenu) { + parentSubmenu.style.display = 'block'; // Open parent submenu +} +} +}); +} \ No newline at end of file diff --git a/js/moji.js b/js/moji.js new file mode 100644 index 0000000..fa41dd1 --- /dev/null +++ b/js/moji.js @@ -0,0 +1,2 @@ +var mojis = ["(ノ・∀・)ノ︵ ┻━┻", "(⁎˃ᆺ˂)💦", "｡゜(｀Д´)゜｡", "(ノಠ益ಠ)ノ︵ ┻━┻", "ლ(ಠ益ಠლ", "(´;ω;｀)", "｡･ﾟ’(*/益＼*) ‘ﾟ･｡", "(╥ᆺ╥；)", "(◞‸◟；)", ".˚‧º·(ฅωฅ*)‧º·˚.", "(*ﾉω・*)💦", "( ◕ᴗ◕)っ✂╰⋃╯", "｡*ﾟ+.*.｡(っ ᐛ )っ✂╰⋃╯"] +document.getElementById("mojis").innerText = mojis[Math.floor(Math.random() * mojis.length)]; \ No newline at end of file diff --git a/js/profile.js b/js/profile.js new file mode 100644 index 0000000..87593b0 --- /dev/null +++ b/js/profile.js @@ -0,0 +1,16 @@ +function getRandomImage() { + + var images = ['/img/picrew/058.png', '/img/picrew/057.jpg', '/img/picrew/056.png', '/img/picrew/055.png', '/img/picrew/053.png', '/img/picrew/052.jpg', '/img/picrew/050.png', '/img/picrew/048.png', '/img/picrew/045.png', '/img/picrew/043.jpg', '/img/picrew/042.png', '/img/picrew/039.png', '/img/picrew/037.png', '/img/picrew/036.png', '/img/picrew/030.jpg', '/img/picrew/029.png', '/img/picrew/028.png', '/img/picrew/010.png', '/img/picrew/007.png', '/img/picrew/005.png', '/img/picrew/004.png', '/img/picrew/003.png']; + var image = images[Math.floor(Math.random()*images.length)]; + + return image; + + } + + function displayRandomImage() { + + var htmlImage = document.getElementById("randomImage"); + htmlImage.src = getRandomImage(); + + } + displayRandomImage(); \ No newline at end of file diff --git a/js/scrobble.js b/js/scrobble.js new file mode 100644 index 0000000..4108df6 --- /dev/null +++ b/js/scrobble.js @@ -0,0 +1,9 @@ +let user = 'ameiro'; +let url = 'https://lastfm-last-played.biancarosa.com.br/' + user + '/latest-song'; +let song = document.querySelector('#song'); +fetch(url) + .then(function (response) { + return response.json() + }).then(function (json) { + song.innerHTML = json['track']['name'] + ' - ' + json['track']['artist']['#text']; + }); \ No newline at end of file diff --git a/js/soundbite.js b/js/soundbite.js new file mode 100644 index 0000000..da2f6b0 --- /dev/null +++ b/js/soundbite.js @@ -0,0 +1,3 @@ +function playAudio(url) { + new Audio(url).play(); + } \ No newline at end of file diff --git a/js/theme.js b/js/theme.js new file mode 100644 index 0000000..67ae833 --- /dev/null +++ b/js/theme.js @@ -0,0 +1,22 @@ +window.addEventListener('load', function() { +var prefersDarkScheme = window.matchMedia !== undefined && window.matchMedia("(prefers-color-scheme: dark)").matches; +var DEFAULT_THEME = prefersDarkScheme ? 'moon' : 'peach'; +var THEMES = ["moon", "peach", "sakura", "honey"]; + +function setTheme(theme) { + if (THEMES.indexOf(theme) < 0) theme = DEFAULT_THEME; + document.getElementById('switcher-id').href = '/css/' + theme + '.css'; + localStorage.setItem('style', theme); +} + +var savedTheme = localStorage.getItem('style'); +setTheme(savedTheme || DEFAULT_THEME); + +const switches = document.getElementsByClassName('switch'); +for (const el of switches) { + console.log(el); + el.addEventListener('click', () => { + setTheme(el.dataset.theme); + }); +} +}); \ No newline at end of file diff --git a/music/mana.mp3 b/music/mana.mp3 new file mode 100644 index 0000000..21d67c2 --- /dev/null +++ b/music/mana.mp3 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:2107461bfbc471409689b2745a58da92a63e725149c135065104f98da4c42ee1 +size 8448 diff --git a/music/mya.mp3 b/music/mya.mp3 new file mode 100644 index 0000000..1b5cd29 --- /dev/null +++ b/music/mya.mp3 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:b60f13dd57041a7e42e34787da7128be754fbbdad821aeae8f1b91e59b6d50a0 +size 6361 diff --git a/music/peachmoon.mp3 b/music/peachmoon.mp3 new file mode 100644 index 0000000..8bb5b76 --- /dev/null +++ b/music/peachmoon.mp3 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:101d4fa4141900b14bd98adbf456ad91b9e6e142e4ae6791a851d2157015bc55 +size 1940093