diff --git a/assets/components.css b/assets/components.css deleted file mode 100644 index 7ee1d41..0000000 --- a/assets/components.css +++ /dev/null @@ -1,141 +0,0 @@ -.buttons { - display: flex; - flex-wrap: wrap; - gap: var(--spacing-sm); -} - -.buttons a { - display: inline-block; - text-align: center; - vertical-align: middle; - width: 88px; - height: 31px; - image-rendering: pixelated; - background: var(--theme-background-alt); - color: var(--theme-foreground); -} - -.inline-code { - border-radius: var(--radius-md); - border: 1px solid var(--theme-separator); - background-color: var(--theme-background-alt); - color: var(--theme-foreground); - padding: 0.1em 0.5em; -} - -nav { - margin-bottom: var(--spacing-2xl); -} - -nav ul { - display: flex; - flex-wrap: wrap; - list-style: none; - padding-left: 0; - gap: var(--spacing-md); -} - -nav li a { - padding: 0.35em 1.5em; - color: var(--theme-foreground-alt); - display: block; -} - -nav li.selected a { - background-color: var(--theme-foreground); - color: var(--theme-background); - border-radius: var(--radius-sm); -} - -nav a { - color: inherit; -} - -section { - margin-bottom: var(--section-spacing); -} - -section p { - margin-bottom: var(--spacing-md); - font-size: 0.9em; - color: var(--theme-foreground-alt); -} - -section h2 { - font-size: var(--font-size-md); - font-weight: 700; - margin-bottom: var(--spacing-md); - position: relative; - display: flex; - align-items: center; - color: var(--theme-foreground); -} - -section h2::before { - content: ""; - display: block; - width: 0.85rem; - height: 0.85rem; - margin-right: 1ch; - image-rendering: pixelated; -} - -header, -section { - position: relative; -} - -header::before, -section::before { - position: absolute; - font-size: 13rem; - font-weight: 700; - z-index: var(--z-background); - user-select: none; - letter-spacing: -0.075em; - -webkit-text-stroke: 2px var(--theme-foreground); - color: transparent; - opacity: 0.025; - pointer-events: none; -} - -@media (max-width: 1489px) { - header::before, - section::before { - display: none; - } -} - -section.typewriting a::after, -#donation a::after, -#links a::after { - display: inline-block; - width: 0.9em; - height: 0.9em; - margin-left: var(--space-1); - vertical-align: -0.1em; - content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23cac7ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6' /%3E%3Cpath d='M11 13l9 -9' /%3E%3Cpath d='M15 4h5v5' /%3E%3C/svg%3E"); -} - -section.typewriting a, -#donation a, -#links a { - color: var(--theme-foreground); -} - -header { - margin-bottom: var(--spacing-2xl); -} - -header h1 { - font-size: var(--font-size-2xl); - line-height: 1.1; - margin-bottom: var(--space-2); - position: relative; - display: inline-block; -} - -header h2 { - font-size: 0.9rem; - color: var(--theme-foreground-alt); -} diff --git a/assets/home.css b/assets/home.css deleted file mode 100644 index 63f550e..0000000 --- a/assets/home.css +++ /dev/null @@ -1,463 +0,0 @@ -#muxiepuff { - background: none; - border: none; - padding: 0; - outline: none; -} - -#projects ul { - list-style: none; - padding-left: 0; -} - -.project-card { - display: block; - text-decoration: none; - color: var(--theme-foreground); - background-color: var(--theme-background-alt); - border: 1px solid var(--theme-separator); - padding: var(--space-3) var(--space-4); - margin-bottom: var(--space-3); - position: relative; - overflow: hidden; - border-radius: var(--radius-md); - transition: all var(--transition-fast); -} - -.project-card:hover { - background-color: rgba(255, 255, 255, 0.025); - border-color: rgba(255, 255, 255, 0.125); -} - -.project-card .external-icon { - position: absolute; - color: var(--theme-foreground-alt); - top: var(--space-3); - right: var(--space-3); - opacity: 50%; -} - -.project-card .external-icon svg { - width: var(--space-5); - height: var(--space-5); -} - -.project-card .author { - font-size: var(--font-size-xs); - margin-bottom: var(--space-2); -} - -.project-card .author strong { - font-weight: 700; - color: var(--theme-foreground); -} - -.project-card .description { - font-size: var(--font-size-sm); - color: var(--theme-foreground-alt); - margin-bottom: var(--space-2); -} - -.project-card .info { - display: flex; - align-items: center; - gap: var(--space-2); - font-size: var(--font-size-xs); - color: var(--theme-foreground-alt); -} - -.project-card .language { - width: 10px; - height: 10px; - border-radius: var(--radius-circle); - background-color: var(--lang-color, #ccc); - display: inline-block; -} - -.silly-table { - display: grid; - width: 100%; - grid-template-columns: max-content 1fr; - align-items: stretch; - margin-top: var(--spacing-md); - background-color: var(--theme-background-alt); - border: 1px solid var(--theme-separator); - border-radius: var(--radius-lg); -} - -.silly-table .row { - display: contents; -} - -.silly-table .key, -.silly-table .value { - padding: var(--space-3) var(--space-5); - border-bottom: 1px solid var(--theme-separator); - line-height: 1; -} - -#donation .silly-table a::after { - vertical-align: -0.2em; -} - -.row:last-of-type .key, -.row:last-of-type .value { - border-bottom: none; -} - -.silly-table .key { - font-weight: bold; - color: var(--theme-foreground); - border-right: 1px solid var(--theme-separator); - white-space: nowrap; -} - -.silly-table .value { - font-size: var(--font-size-md); - word-break: break-all; - color: var(--theme-foreground-alt); - display: flex; - gap: var(--spacing-md); -} - -.fm-recent-tracks { - display: flex; - flex-wrap: wrap; - gap: var(--spacing-lg); - padding: 0; - margin: 0; - list-style: none; -} - -.fm-recent:hover { - filter: none; -} - -.fm-recent a { - display: flex; - flex-direction: column; - align-items: center; - gap: var(--space-3); - text-align: center; - max-width: var(--avatar-size); -} - -.fm-more { - overflow: hidden; - position: relative; - display: flex; - width: var(--avatar-size); - align-items: center; - justify-content: center; - text-align: center; - border: 1px solid var(--theme-separator); - padding: var(--space-3); - font-size: 0.9rem; - background-color: var(--theme-background-alt); - opacity: 0.5; - transition: opacity var(--transition-fast); - border-radius: var(--radius-music); - z-index: var(--z-base); -} - -.fm-more::before { - content: "→"; - position: absolute; - color: transparent; - font-size: 15rem; - -webkit-text-stroke: 2px var(--theme-separator); - z-index: var(--z-background); -} - -.fm-more:hover { - opacity: 1; - filter: none; -} - -.fm-recent .cover { - width: var(--avatar-size); - height: var(--avatar-size); - border-radius: var(--radius-music); - object-fit: cover; - background: var(--theme-background-alt); -} - -.fm-recent { - cursor: pointer; -} - -li:has(.cover[src*="2a96cbd8b46e442fc41c2b86b821562f.png"]) img { - display: none; -} - -li:has(.cover[src*="2a96cbd8b46e442fc41c2b86b821562f.png"])::before { - overflow: hidden; - display: flex; - content: "??"; - width: var(--avatar-size); - height: var(--avatar-size); - color: transparent; - font-size: 17rem; - letter-spacing: -0.075em; - line-height: 1; - text-align: center; - align-items: center; - justify-content: center; - background: var(--theme-background-alt); - -webkit-text-stroke: 2px var(--theme-separator); - border: 1px solid var(--theme-separator); - border-radius: var(--radius-music); - opacity: 50%; -} - -.fm-recent .meta { - display: flex; - flex-direction: column; - font-size: var(--font-size-md); - color: var(--theme-foreground-alt); -} - -.fm-recent .meta strong { - font-weight: 600; - font-size: var(--font-size-base); - color: var(--theme-foreground); -} - -.fm-recent .meta strong, -.fm-recent .meta span { - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - line-clamp: 2; - overflow: hidden; - word-wrap: anywhere; - text-overflow: ellipsis; - max-width: 100%; -} - -.fm-recent .loved { - color: var(--theme-foreground); - font-size: var(--font-size-base); -} - -header:before { - content: ":3"; - font-size: 7rem !important; - top: -0.5em; - left: -5rem; -} - -#about::before { - content: "bio"; - right: -7rem; - top: -2.5rem; -} - -#links::before { - content: "↪"; - transform: rotate(-15deg); - font-size: calc(var(--font-size-2xl) * 5); - left: -16rem; - top: 5rem; -} - -#projects::before { - content: "↩"; - transform: rotate(15deg); - font-size: calc(var(--font-size-2xl) * 5); - right: -16rem; - top: 2rem; -} - -#donation::before { - content: "$"; - left: -12.5rem; - top: 7rem; -} -u #friends::before { - content: "<3"; - transform: rotate(15deg); - font-size: calc(var(--font-size-2xl) * 5); - right: -5rem; - top: 3rem; -} - -#about h2::before { - background-color: var(--theme-foreground); - clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); -} - -#links h2::before { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='%23cac7ee' %3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M10 2a3 3 0 0 1 2.995 2.824l.005 .176v1h3a2 2 0 0 1 1.995 1.85l.005 .15v3h1a3 3 0 0 1 .176 5.995l-.176 .005h-1v3a2 2 0 0 1 -1.85 1.995l-.15 .005h-3a2 2 0 0 1 -1.995 -1.85l-.005 -.15v-1a1 1 0 0 0 -1.993 -.117l-.007 .117v1a2 2 0 0 1 -1.85 1.995l-.15 .005h-3a2 2 0 0 1 -1.995 -1.85l-.005 -.15v-3a2 2 0 0 1 1.85 -1.995l.15 -.005h1a1 1 0 0 0 .117 -1.993l-.117 -.007h-1a2 2 0 0 1 -1.995 -1.85l-.005 -.15v-3a2 2 0 0 1 1.85 -1.995l.15 -.005h3v-1a3 3 0 0 1 3 -3z' /%3E%3C/svg%3E"); -} - -#donation h2::before { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='%23cac7ee'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M15.999 2a1 1 0 0 1 1.001 1v3.255l.026 .018a7 7 0 0 1 2.204 2.537l.092 .19h.676a2 2 0 0 1 1.995 1.85l.005 .15v2a2 2 0 0 1 -2 2h-.676l-.104 .213a7 7 0 0 1 -1.097 1.558l-.123 .125v1.604a2.5 2.5 0 0 1 -2.336 2.495l-.162 .005c-1.16 0 -2.135 -.79 -2.418 -1.86l-.032 -.141l-4.05 .001l-.05 -.002l-.032 .141a2.5 2.5 0 0 1 -2.254 1.856l-.164 .005a2.5 2.5 0 0 1 -2.5 -2.5v-1.602l-.056 -.055a7 7 0 0 1 -1.576 -7.085l.092 -.256a7 7 0 0 1 6.539 -4.502h2.196l4.25 -2.832a1 1 0 0 1 .436 -.161zm-.999 8a1 1 0 0 0 -.993 .883l-.007 .127a1 1 0 0 0 1.993 .117l.007 -.127a1 1 0 0 0 -1 -1'/%3E%3C/svg%3E"); -} - -#projects h2::before { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='%23cac7ee'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M17.108 22.085c-1.266 -.068 -2.924 -.859 -5.071 -2.355l-.04 -.027l-.037 .027c-2.147 1.497 -3.804 2.288 -5.072 2.356l-.178 .005c-2.747 0 -3.097 -2.64 -1.718 -7.244l.054 -.178l-.1 -.075c-6.056 -4.638 -5.046 -7.848 2.554 -8.066l.202 -.005l.115 -.326c1.184 -3.33 2.426 -5.085 4.027 -5.192l.156 -.005c1.674 0 2.957 1.76 4.182 5.197l.114 .326l.204 .005c7.6 .218 8.61 3.428 2.553 8.065l-.102 .075l.055 .178c1.35 4.512 1.04 7.137 -1.556 7.24l-.163 .003z' /%3E%3C/svg%3E"); -} - -#friends h2::before { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23cac7ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M9 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0' /%3E%3Cpath d='M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2' /%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75' /%3E%3Cpath d='M21 21v-2a4 4 0 0 0 -3 -3.85' /%3E%3C/svg%3E"); -} - -#media h2::before { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23cac7ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 10v3'/%3E%3Cpath d='M6 6v11'/%3E%3Cpath d='M10 3v18'/%3E%3Cpath d='M14 8v7'/%3E%3Cpath d='M18 5v13'/%3E%3Cpath d='M22 10v3'/%3E%3C/svg%3E"); -} - -.typecycle { - display: inline-block; -} - -.typecycle::after { - content: ""; - border-right: 0.15em solid var(--theme-foreground); - animation: caret 2s ease-in-out infinite; - padding-left: 0.25ch; -} - -.typecycle span { - overflow: hidden; - display: inline-block; - vertical-align: bottom; -} - -.typecycle span:nth-child(1) { - animation: type-delete-1 10s ease-in-out infinite; -} - -.typecycle span:nth-child(2) { - animation: type-delete-2 10s ease-in-out infinite; -} - -.typecycle span:nth-child(3) { - animation: type-delete-3 10s ease-in-out infinite; -} - -@keyframes type-delete-1 { - 0%, 25%, 100% { - width: 0; - } - 8.33%, 16.66% { - width: 6ch; - } -} - -@keyframes type-delete-2 { - 0%, 33.33%, 58.33%, 100% { - width: 0; - } - 41.66%, 50% { - width: 5ch; - } -} - -@keyframes type-delete-3 { - 0%, 66.66%, 91.66%, 100% { - width: 0; - } - 75%, 83.33% { - width: 5ch; - } -} - -@keyframes caret { - 0%, 50% { - opacity: 1; - } - 100% { - opacity: 0; - } -} - -.griddy { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 25px; -} - -@media (max-width: 700px) { - .griddy { - grid-template-columns: repeat(2, 1fr); - } -} - -@media (max-width: 370px) { - .griddy { - grid-template-columns: repeat(1, 1fr); - } -} - -.griddy .column h3 { - font-size: var(--font-size-xs); - text-transform: uppercase; - letter-spacing: 0.08em; - margin-bottom: var(--space-3); - font-weight: 600; - color: var(--theme-foreground-alt); -} - -.griddy .column ul { - list-style: none; - padding-left: 0; -} - -.griddy .column a::before { - content: "$ "; - color: var(--theme-foreground); -} - -.griddy .column li { - font-style: italic; - color: var(--theme-foreground-bruh); -} - -.griddy .column a { - font-style: normal; - color: var(--theme-foreground); -} - -.pfps { - display: flex; - margin-top: var(--space-7); -} - -.pfps a { - position: relative; - display: block; - margin-left: calc(-1 * var(--space-6)); - transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); - border: var(--space-2) solid var(--theme-background); - border-radius: var(--radius-circle); -} - -.pfps a:first-child { - margin-left: 0; -} - -.pfps a:hover { - transform: scale(1.2) translateY(-4px); - z-index: 10; - filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15)); -} - -.pfps a img { - width: calc(var(--avatar-size) / 1.5); - height: calc(var(--avatar-size) / 1.5); - border-radius: var(--radius-circle); - object-fit: cover; -} - -.pfps a:hover, .pfps img:hover { - filter: none; -} - -.pfps:has(a:hover) img:not(:hover) { - filter: brightness(0.75); -} - -.pfps:has(a:hover) a:not(:hover) { - transform: scale(0.92); -} diff --git a/assets/report.css b/assets/report.css deleted file mode 100644 index 3577ac2..0000000 --- a/assets/report.css +++ /dev/null @@ -1,181 +0,0 @@ -.reports { - list-style: none; - padding-left: 0; -} - -.report { - display: block; - text-decoration: none; - color: var(--theme-foreground); - background-color: var(--theme-background-alt); - border: 1px solid var(--theme-separator); - padding: var(--space-4) var(--space-5); - margin-bottom: var(--space-3); - border-radius: var(--radius-md); - transition: all var(--transition-fast); - opacity: 75%; - position: relative; - overflow: hidden; -} - -.report::before { - position: absolute; - display: flex; - align-items: center; - justify-content: center; - content: "*******"; - transform: rotate(-35deg); - color: transparent; - font-size: 30rem; - letter-spacing: -0.075em; - line-height: 1; - text-align: center; - -webkit-text-stroke: 2px var(--theme-separator); - opacity: 0.5; -} - -.reports li, .report:hover { - opacity: 1; - filter: none; -} - -.report .date { - font-size: var(--font-size-sm); - color: var(--theme-foreground-bruh); - margin-bottom: var(--space-2); -} - -.report h3 { - font-size: var(--font-size-lg); - font-weight: 600; - margin-bottom: var(--space-1); - color: var(--theme-foreground); -} - -.report .excerpt { - font-size: var(--font-size-md); - color: var(--theme-foreground-alt); - line-height: 1.6; - margin-bottom: var(--space-2); -} - -.report .excerpt, .report .title { - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - line-clamp: 2; - overflow: hidden; - text-overflow: ellipsis; -} - -.report .tags { - display: flex; - flex-wrap: wrap; - gap: var(--space-2); - margin-top: var(--space-3); -} - -.report .tag { - font-size: var(--font-size-xs); - padding: var(--space-0) var(--space-2); - background-color: var(--theme-background); - border: 1px solid var(--theme-separator); - border-radius: var(--radius-sm); - color: var(--theme-foreground-alt); -} - -.report .arrow { - position: absolute; - right: 1.25em; - top: 50%; - transform: translateY(-50%); - opacity: 0; - font-size: 1.25rem; - transition: all var(--transition-fast); - color: var(--theme-foreground-alt); -} - -.report:hover .arrow { - opacity: 1; - transform: translateY(-50%) translateX(4px); -} - -article header { - margin-bottom: var(--space-7); - padding-bottom: var(--space-7); - border-bottom: 1px solid var(--theme-separator); -} - -article header .meta { - display: flex; - align-items: center; - font-size: var(--font-size-md); - color: var(--theme-foreground-bruh); - margin-bottom: var(--space-4); - gap: var(--space-4); -} - -article header h1 { - font-size: var(--font-size-xl); - margin: var(--space-3) 0; - color: var(--theme-foreground); -} - -article header .tags { - display: flex; - flex-wrap: wrap; - gap: var(--space-2); -} - -article header .tag { - font-size: 12px; - padding: var(--space-1) var(--space-3); - background-color: var(--theme-background-alt); - border: 1px solid var(--theme-separator); - border-radius: 2px; - color: var(--theme-foreground-alt); -} - -article .content { - color: var(--theme-foreground-alt); -} - -article .content p { - margin-bottom: var(--space-6); -} - -article .content h2 { - font-size: var(--font-size-xl); - color: var(--theme-foreground); - margin-top: var(--space-8); - margin-bottom: var(--space-4); - position: relative; -} - -article .content h2::before { - content: "## "; - color: var(--theme-foreground-bruh); - margin-right: 0.5ch; -} - -article .content h3 { - font-size: var(--font-size-lg); - color: var(--theme-foreground); - margin-top: var(--space-7); - margin-bottom: var(--space-3); -} - -article .content h3::before { - content: "### "; - color: var(--theme-foreground-bruh); - margin-right: 0.5ch; -} - -article footer { - margin-top: var(--space-10); - padding-top: var(--space-7); - border-top: 1px solid var(--theme-separator); - text-align: center; - color: var(--theme-foreground-alt); - font-size: var(--font-size-md); -} diff --git a/assets/styles.css b/assets/styles.css index 495a3c1..67c1a6e 100644 --- a/assets/styles.css +++ b/assets/styles.css @@ -1,3 +1,14 @@ +@import url(/fonts/iosevka-custom/import.css); + +:root { + --theme-background: #121317; + --theme-background-alt: #090a0d; + --theme-foreground: #cac7ee; + --theme-foreground-alt: #a4a3bd; + --theme-foreground-bruh: #7d7d86; + --theme-separator: #232833; +} + *, *::before, *::after { @@ -8,12 +19,57 @@ margin: 0; } +nav { + margin-bottom: 3em; +} + +nav ul { + display: flex; + flex-wrap: wrap; + list-style: none; + padding-left: 0; + gap: 1em; +} + +nav li a { + padding: 0.35em 1.5em; + color: var(--theme-foreground-alt); + display: block; +} + +nav li.selected a { + background-color: var(--theme-foreground); + color: var(--theme-background); + border-radius: 2px; +} + +nav a { + color: inherit; +} + +button, +[role="button"] { + color: inherit; + cursor: pointer; +} + +html, body, pre, code, span, button { + font-family: + "Iosevka Custom Web", "Iosevka Custom", "Iosevka", monospace, sans-serif; +} + body { + font-size: 17px; + line-height: 1.7; + -webkit-text-size-adjust: 100%; + background-color: var(--theme-background); color: var(--theme-foreground); - max-width: var(--max-width); + + max-width: 55em; margin: 0 auto; - padding: var(--spacing-xl) 16px; + padding: 2em 16px; + animation: fade 1s ease-in; } @@ -32,37 +88,768 @@ svg { user-select: none; } +header h1 { + font-size: 2.4rem; + line-height: 1.1; + margin-bottom: 0.4rem; + position: relative; + display: inline-block; +} + +.typecycle { + display: inline-block; +} + +.typecycle::after { + content: ""; + border-right: 0.15em solid var(--theme-foreground); + animation: caret 2s ease-in-out infinite; + padding-left: 0.25ch; +} + +.typecycle span { + overflow: hidden; + display: inline-block; + vertical-align: bottom; +} + +.typecycle span:nth-child(1) { + animation: type-delete-1 10s ease-in-out infinite; +} + +.typecycle span:nth-child(2) { + animation: type-delete-2 10s ease-in-out infinite; +} + +.typecycle span:nth-child(3) { + animation: type-delete-3 10s ease-in-out infinite; +} + +@keyframes type-delete-1 { + 0%, 25%, 100% { + width: 0; + } + 8.33%, 16.66% { + width: 6ch; + } +} + +@keyframes type-delete-2 { + 0%, 33.33%, 58.33%, 100% { + width: 0; + } + 41.66%, 50% { + width: 5ch; + } +} + +@keyframes type-delete-3 { + 0%, 66.66%, 91.66%, 100% { + width: 0; + } + 75%, 83.33% { + width: 5ch; + } +} + +@keyframes caret { + 0%, 50% { + opacity: 1; + } + 100% { + opacity: 0; + } +} + +header h2 { + font-size: 0.9rem; + color: var(--theme-foreground-alt); +} + +header { + margin-bottom: 3rem; +} + +section { + margin-bottom: 2em; +} + +section p { + margin-bottom: 1rem; + font-size: 0.9em; + color: var(--theme-foreground-alt); +} + +section h2 { + font-size: 0.875em; + font-weight: 700; + margin-bottom: 1rem; + position: relative; + display: flex; + align-items: center; + color: var(--theme-foreground); +} + +section h2::before { + content: ""; + display: block; + width: 0.85rem; + height: 0.85rem; + margin-right: 1ch; + image-rendering: pixelated; +} + +#links h2::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='%23cac7ee' %3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M10 2a3 3 0 0 1 2.995 2.824l.005 .176v1h3a2 2 0 0 1 1.995 1.85l.005 .15v3h1a3 3 0 0 1 .176 5.995l-.176 .005h-1v3a2 2 0 0 1 -1.85 1.995l-.15 .005h-3a2 2 0 0 1 -1.995 -1.85l-.005 -.15v-1a1 1 0 0 0 -1.993 -.117l-.007 .117v1a2 2 0 0 1 -1.85 1.995l-.15 .005h-3a2 2 0 0 1 -1.995 -1.85l-.005 -.15v-3a2 2 0 0 1 1.85 -1.995l.15 -.005h1a1 1 0 0 0 .117 -1.993l-.117 -.007h-1a2 2 0 0 1 -1.995 -1.85l-.005 -.15v-3a2 2 0 0 1 1.85 -1.995l.15 -.005h3v-1a3 3 0 0 1 3 -3z' /%3E%3C/svg%3E"); +} + +header, section { + position: relative; +} + +header.home::before, +section::before { + position: absolute; + font-size: 13rem; + font-weight: 700; + z-index: -1; + -webkit-user-select: none; + user-select: none; + letter-spacing: -0.075em; + -webkit-text-stroke: 2px var(--theme-foreground); + color: transparent; + opacity: 0.025; + pointer-events: none; +} + +@media (max-width: 1489px) { + header::before, + section::before { + display: none; + } +} + +header.home::before { + content: ":3"; + font-size: 7rem; + top: -0.5em; + left: -5rem; + opacity: 0.025; +} + +#about::before { + content: "bio"; + right: -7rem; + top: -2.5rem; +} + +#links::before { + content: "↪"; + transform: rotate(-15deg); + font-size: 13rem; + left: -16rem; + top: 5rem; +} + +#projects::before { + content: "↩"; + transform: rotate(15deg); + font-size: 13rem; + right: -16rem; + top: 5rem; +} + +#donation::before { + content: "$"; + left: -12.5rem; + top: 7rem; +} + +#friends::before { + content: "<3"; + transform: rotate(15deg); + font-size: 12rem; + right: -5rem; + top: 3rem; +} + +#donation h2::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='%23cac7ee'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M15.999 2a1 1 0 0 1 1.001 1v3.255l.026 .018a7 7 0 0 1 2.204 2.537l.092 .19h.676a2 2 0 0 1 1.995 1.85l.005 .15v2a2 2 0 0 1 -2 2h-.676l-.104 .213a7 7 0 0 1 -1.097 1.558l-.123 .125v1.604a2.5 2.5 0 0 1 -2.336 2.495l-.162 .005c-1.16 0 -2.135 -.79 -2.418 -1.86l-.032 -.141l-4.05 .001l-.05 -.002l-.032 .141a2.5 2.5 0 0 1 -2.254 1.856l-.164 .005a2.5 2.5 0 0 1 -2.5 -2.5v-1.602l-.056 -.055a7 7 0 0 1 -1.576 -7.085l.092 -.256a7 7 0 0 1 6.539 -4.502h2.196l4.25 -2.832a1 1 0 0 1 .436 -.161zm-.999 8a1 1 0 0 0 -.993 .883l-.007 .127a1 1 0 0 0 1.993 .117l.007 -.127a1 1 0 0 0 -1 -1'/%3E%3C/svg%3E"); +} + +#projects h2::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='%23cac7ee'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M17.108 22.085c-1.266 -.068 -2.924 -.859 -5.071 -2.355l-.04 -.027l-.037 .027c-2.147 1.497 -3.804 2.288 -5.072 2.356l-.178 .005c-2.747 0 -3.097 -2.64 -1.718 -7.244l.054 -.178l-.1 -.075c-6.056 -4.638 -5.046 -7.848 2.554 -8.066l.202 -.005l.115 -.326c1.184 -3.33 2.426 -5.085 4.027 -5.192l.156 -.005c1.674 0 2.957 1.76 4.182 5.197l.114 .326l.204 .005c7.6 .218 8.61 3.428 2.553 8.065l-.102 .075l.055 .178c1.35 4.512 1.04 7.137 -1.556 7.24l-.163 .003z' /%3E%3C/svg%3E"); +} + +#friends h2::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23cac7ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M9 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0' /%3E%3Cpath d='M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2' /%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75' /%3E%3Cpath d='M21 21v-2a4 4 0 0 0 -3 -3.85' /%3E%3C/svg%3E"); +} + +#media h2::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23cac7ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 10v3'/%3E%3Cpath d='M6 6v11'/%3E%3Cpath d='M10 3v18'/%3E%3Cpath d='M14 8v7'/%3E%3Cpath d='M18 5v13'/%3E%3Cpath d='M22 10v3'/%3E%3C/svg%3E"); +} + +#about h2::before { + background-color: var(--theme-foreground); + clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); +} + a { color: var(--theme-primary); text-decoration: none; } -a, -img, -li, -button { - transition: filter var(--transition-fast); +a, img, li, button { + transition: filter 0.2s ease-in-out; + &:hover { + filter: brightness(0.67); + } } -a:hover, -img:hover, -li:hover, -button:hover { - filter: brightness(0.67); +section.typewriting a, +#donation a, +#links a { + color: var(--theme-foreground); + + &::after { + display: inline-block; + width: 0.9em; + height: 0.9em; + margin-left: 0.25em; + vertical-align: -0.1em; + content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23cac7ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6' /%3E%3Cpath d='M11 13l9 -9' /%3E%3Cpath d='M15 4h5v5' /%3E%3C/svg%3E"); + } } -button, -[role="button"] { - color: inherit; +.griddy { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 25px; +} + +@media (max-width: 700px) { + .griddy { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 370px) { + .griddy { + grid-template-columns: repeat(1, 1fr); + } +} + +.griddy .column h3 { + font-size: 11px; + text-transform: uppercase; + letter-spacing: 0.08em; + margin-bottom: 0.75em; + font-weight: 600; + color: var(--theme-foreground-alt); +} + +.griddy .column ul { + list-style: none; + padding-left: 0; +} + +.griddy .column a::before { + content: "$ "; + color: var(--theme-foreground); +} + +.griddy .column li { + font-style: italic; + color: var(--theme-foreground-bruh); +} + +.griddy .column a { + font-style: normal; + color: var(--theme-foreground); +} + +.inline-code { + border-radius: 3px; + border: 1px solid var(--theme-separator); + background-color: var(--theme-background-alt); + color: var(--theme-foreground); + padding: 0.1em 0.5em; +} + +.silly-table { + display: grid; + grid-template-columns: max-content 1fr; + align-items: stretch; + margin-top: 16px; + width: 100%; + background-color: var(--theme-background-alt); + border: 1px solid var(--theme-separator); + border-radius: 10px; +} + +.silly-table .row { + display: contents; +} + +.silly-table .key, .silly-table .value { + padding: 0.75rem 1.25rem; + border-bottom: 1px solid var(--theme-separator); +} + +.row:last-of-type .key, .row:last-of-type .value { + border-bottom: none; +} + +.silly-table .key { + font-weight: 600; + color: var(--theme-foreground); + border-right: 1px solid var(--theme-separator); + white-space: nowrap; +} + +.silly-table .value { + font-size: 0.875em; + word-break: break-all; + color: var(--theme-foreground-alt); + display: flex; + gap: 1em; +} + +#projects ul { + list-style: none; + padding-left: 0; +} + +.project-card { + display: block; + text-decoration: none; + color: var(--theme-foreground); + background-color: var(--theme-background-alt); + border: 1px solid var(--theme-separator); + padding: 0.75em 1em; + margin-bottom: 0.5em; + position: relative; + overflow: hidden; + border-radius: 3px; +} + +.project-card:hover { + background-color: rgba(255, 255, 255, 0.025); + border-color: rgba(255, 255, 255, 0.125); +} + +.project-card .external-icon { + position: absolute; + color: var(--theme-foreground-alt); + top: 0.75rem; + right: 0.75rem; + opacity: 0.5; + + & > svg { + width: 1.25rem; + height: 1.25rem; + } +} + +.project-card .author { + font-size: 13px; + margin-bottom: 6px; +} + +.project-card .author strong { + font-weight: 700; + color: var(--theme-foreground); +} + +.project-card .description { + font-size: 12px; + color: var(--theme-foreground-alt); + margin-bottom: 8px; +} + +.project-card .info { + display: flex; + align-items: center; + gap: 8px; + font-size: 11px; + color: var(--theme-foreground-alt); +} + +.project-card .language { + width: 10px; + height: 10px; + border-radius: 1000px; + display: inline-block; + background-color: var(--lang-color, #ccc); +} + +#muxiepuff { + background: none; + border: none; + padding: 0; + outline: none; +} + +.buttons { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} + +.buttons a { + display: inline-block; + text-align: center; + vertical-align: middle; + width: 88px; + height: 31px; + image-rendering: pixelated; + background: var(--theme-background-alt); + color: var(--theme-foreground); +} + +.fm-recent-tracks { + display: flex; + flex-wrap: wrap; + gap: 1.5rem; + padding: 0; + margin: 0; + list-style: none; +} + +.fm-recent { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; + text-align: center; + max-width: 10rem; +} + +.fm-more::before { + content: "→"; + position: absolute; + color: transparent; + font-size: 15rem; + -webkit-text-stroke: 2px var(--theme-separator); + z-index: -1; +} + +.fm-more { + overflow: hidden; + position: relative; + display: flex; + width: 10rem; + align-items: center; + justify-content: center; + text-align: center; + border: 1px solid var(--theme-separator); + padding: 0.5rem; + font-size: 0.9rem; + background-color: var(--theme-background-alt); + opacity: 0.5; + transition: opacity 0.2s ease-in-out; + border-radius: 15%; + z-index: 0; +} + +.fm-more:hover { + opacity: 1; + filter: none; +} + +.fm-recent .cover { + width: 10rem; + height: 10rem; + border-radius: 15%; + object-fit: cover; + background: var(--theme-background-alt); +} + +.fm-recent { cursor: pointer; } -html, body { - font-size: var(--font-size-base); +li:has( + .cover[src="https://lastfm.freetls.fastly.net/i/u/300x300/2a96cbd8b46e442fc41c2b86b821562f.png"] +) { + & img { + display: none; + } + + &::before { + overflow: hidden; + display: flex; + content: "??"; + width: 10rem; + height: 10rem; + color: transparent; + font-size: 17rem; + letter-spacing: -0.075em; + line-height: 1; + text-align: center; + align-items: center; + justify-content: center; + background: var(--theme-background-alt); + -webkit-text-stroke: 2px var(--theme-separator); + border: 1px solid var(--theme-separator); + border-radius: 16%; + opacity: 0.5; + } } -html, body, pre, code, button { - font-family: - "Iosevka Custom Web", "Iosevka Custom", "Iosevka", monospace, sans-serif; - line-height: 1.7; +.fm-recent .meta { + display: flex; + flex-direction: column; + line-height: 1.25; + font-size: 0.85rem; + color: var(--theme-foreground-alt); +} + +.fm-recent .meta strong { + font-weight: 600; + font-size: 1rem; + color: var(--theme-foreground); +} + +.fm-recent .meta strong, +.fm-recent .meta span { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + line-clamp: 2; + overflow: hidden; + word-wrap: anywhere; + text-overflow: ellipsis; + max-width: 100%; +} + +.fm-recent .loved { + color: var(--theme-foreground); + font-size: 1rem; +} + +.pfps { + display: flex; + margin-top: 1em; +} + +.pfps a { + position: relative; + display: block; + width: 8rem; + margin-left: -1.5rem; + transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); + border: 0.5rem solid var(--theme-background); + border-radius: 1000px; +} + +.pfps a:first-child { + margin-left: 0; +} + +.pfps a:hover { + transform: scale(1.2) translateY(-4px); + z-index: 10; + filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15)); +} + +.pfps a img { + width: 100%; + height: 100%; + border-radius: 1000px; + object-fit: cover; +} + +.pfps a:hover, .pfps img:hover { + filter: none; +} + +.pfps:has(a:hover) img:not(:hover) { + filter: brightness(0.75); +} + +.pfps:has(a:hover) a:not(:hover) { + transform: scale(0.92); +} + +.reports { + list-style: none; + padding-left: 0; +} + +.report { + display: block; + text-decoration: none; + color: var(--theme-foreground); + background-color: var(--theme-background-alt); + border: 1px solid var(--theme-separator); + padding: 1em 1.25em; + margin-bottom: 0.75em; + border-radius: 3px; + transition: all 0.2s ease-in-out; + opacity: 0.75; + position: relative; + overflow: hidden; +} + +.report::before { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + content: "*******"; + transform: rotate(-35deg); + color: transparent; + font-size: 30rem; + letter-spacing: -0.075em; + line-height: 1; + text-align: center; + -webkit-text-stroke: 2px var(--theme-separator); + opacity: 0.5; +} + +.reports li, .report:hover { + opacity: 1; + filter: none; +} + +.report .date { + font-size: 12px; + color: var(--theme-foreground-bruh); + margin-bottom: 0.5em; +} + +.report h3 { + font-size: 1.1em; + font-weight: 600; + margin-bottom: 0.25em; + color: var(--theme-foreground); +} + +.report .excerpt { + font-size: 0.9em; + color: var(--theme-foreground-alt); + line-height: 1.6; + margin-bottom: 0.5em; +} + +.report .excerpt, .report .title { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + line-clamp: 2; + overflow: hidden; + text-overflow: ellipsis; +} + +.report .tags { + display: flex; + flex-wrap: wrap; + gap: 0.5em; + margin-top: 0.75em; +} + +.report .tag { + font-size: 11px; + padding: 0.25em 0.75em; + background-color: var(--theme-background); + border: 1px solid var(--theme-separator); + border-radius: 2px; + color: var(--theme-foreground-alt); +} + +.report .arrow { + position: absolute; + right: 1.25em; + top: 50%; + transform: translateY(-50%); + opacity: 0; + font-size: 1.25rem; + transition: all 0.2s ease-in-out; + color: var(--theme-foreground-alt); +} + +.report:hover .arrow { + opacity: 1; + transform: translateY(-50%) translateX(4px); +} + +article header { + margin-bottom: 2rem; + padding-bottom: 2rem; + border-bottom: 1px solid var(--theme-separator); +} + +article header .meta { + display: flex; + align-items: center; + font-size: 0.85em; + color: var(--theme-foreground-bruh); + margin-bottom: 1em; + gap: 1em; +} + +article header h1 { + font-size: 1.5rem; + margin: 0.75em 0; + color: var(--theme-foreground); +} + +article header .tags { + display: flex; + flex-wrap: wrap; + gap: 0.5em; +} + +article header .tag { + font-size: 12px; + padding: 0.3em 0.85em; + background-color: var(--theme-background-alt); + border: 1px solid var(--theme-separator); + border-radius: 2px; + color: var(--theme-foreground-alt); +} + +article .content { + color: var(--theme-foreground-alt); +} + +article .content p { + margin-bottom: 1.5em; +} + +article .content h2 { + font-size: 1.5em; + color: var(--theme-foreground); + margin-top: 2.5em; + margin-bottom: 1em; + position: relative; +} + +article .content h2::before { + content: "## "; + color: var(--theme-foreground-bruh); + margin-right: 0.5ch; +} + +article .content h3 { + font-size: 1.2em; + color: var(--theme-foreground); + margin-top: 2em; + margin-bottom: 0.75em; +} + +article .content h3::before { + content: "### "; + color: var(--theme-foreground-bruh); + margin-right: 0.5ch; +} + +article footer { + margin-top: 4rem; + padding-top: 2rem; + border-top: 1px solid var(--theme-separator); + text-align: center; + color: var(--theme-foreground-alt); + font-size: 0.85em; } diff --git a/assets/theme.css b/assets/theme.css deleted file mode 100644 index 3e46289..0000000 --- a/assets/theme.css +++ /dev/null @@ -1,76 +0,0 @@ -/** - * Copyright (c) 2025 favewa - * SPDX-License-Identifier: AGPL-3.0-or-later - */ - -:root { - --theme-background: #121317; - --theme-background-alt: #090a0d; - --theme-foreground: #cac7ee; - --theme-foreground-alt: #a4a3bd; - --theme-foreground-bruh: #7d7d86; - --theme-separator: #232833; - - --space-0: 0.16rem; - --space-1: 0.25rem; - --space-2: 0.5rem; - --space-3: 0.75rem; - --space-4: 1rem; - --space-5: 1.25rem; - --space-6: 1.5rem; - --space-7: 2rem; - --space-8: 2.5rem; - --space-9: 3rem; - --space-10: 4rem; - - --spacing-xs: var(--space-1); - --spacing-sm: var(--space-2); - --spacing-md: var(--space-4); - --spacing-lg: var(--space-6); - --spacing-xl: var(--space-7); - --spacing-2xl: var(--space-9); - --spacing-3xl: var(--space-10); - - --section-margin: var(--space-7); - --card-padding: var(--space-4); - --button-padding-x: var(--space-2); - --button-padding-y: var(--space-1); - --input-padding: var(--space-3); - - --radius-sm: 2px; - --radius-md: 3px; - --radius-lg: 10px; - --radius-circle: 1000px; - --radius-music: 15%; - - --transition-fast: 0.2s ease-in-out; - --transition-smooth: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); - - --font-size-xs: 11px; - --font-size-sm: 12px; - --font-size-md: 0.875rem; - --font-size-base: 17px; - --font-size-lg: 1.1rem; - --font-size-xl: 1.5rem; - --font-size-2xl: 2.4rem; - - --avatar-size: 160px; - - --max-width: 55em; - --section-spacing: 2em; - - --z-background: -1; - --z-base: 0; - --z-elevated: 10; -} - -@media (prefers-color-scheme: light) { - :root { - --theme-background: #f5f5f7; - --theme-background-alt: #ffffff; - --theme-foreground: #1d1d1f; - --theme-foreground-alt: #515154; - --theme-foreground-bruh: #86868b; - --theme-separator: #d2d2d7; - } -} diff --git a/client.ts b/client.ts index 135ecb5..192d434 100644 --- a/client.ts +++ b/client.ts @@ -4,8 +4,4 @@ */ // Import CSS files here for hot module reloading to work. -import "./assets/theme.css"; import "./assets/styles.css"; -import "./assets/components.css"; -import "./assets/home.css"; -import "./assets/report.css"; diff --git a/components/Fm.tsx b/components/Fm.tsx index ad6f682..e8bf0eb 100644 --- a/components/Fm.tsx +++ b/components/Fm.tsx @@ -17,30 +17,13 @@ export function Fm() {