diff --git a/website/assets/style.css b/website/assets/style.css index 1bc6b22..1f11186 100644 --- a/website/assets/style.css +++ b/website/assets/style.css @@ -1,5 +1,23 @@ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"); +a { + color: white; +} + +.binkies { + grid-area: binkies; + display: flex; + gap: 5px; + flex-wrap: wrap; + align-items: center; + justify-content: center; +} + +.blog { + grid-area: blog; + min-height: 75vh; +} + body { font-family: "Inter", sans-serif; font-optical-sizing: auto; @@ -9,10 +27,127 @@ body { scrollbar-width: thin; } -a { +.commit { + grid-area: commit; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 0px; + padding: 5px; + margin: 5px; +} + +.commit > *, +.commit > * > * { + padding: 0; + margin: 0; +} + +.contact-icons a { + display: inline-block; + transition: transform 0.15s; +} + +.contact-icons a i { + font-size: 50px; + transition: + transform 0.15s, + color 0.15s; color: white; } +.contact-icons a[title="Bluesky"]:hover i { + transform: scale(1.15); + color: #0085ff; +} + +.contact-icons a[title="Discord"]:hover i { + transform: scale(1.15); + color: #5865f2; +} + +.contact-icons a[title="Forgejo @ sadgit"]:hover i { + transform: scale(1.15); + color: #f05033; +} + +.contact-icons a[title="GitHub"]:hover i { + transform: scale(1.15); + color: #333; +} + +.contact-icons a[title="LastFM"]:hover i { + transform: scale(1.15); + color: #d51007; +} + +.contact-icons a[title="Matrix"]:hover i { + transform: scale(1.15); + color: #00b7ff; +} + +.contact-icons a[title="Mastodon"]:hover i { + transform: scale(1.15); + color: #6364ff; +} + +.contact-icons a[title="Telegram"]:hover i { + transform: scale(1.15); + color: #229ed9; +} + +.details { + grid-area: details; +} + +.donations { + grid-area: donations; +} + +.e-mail { + font-size: small; +} + +.emoji { + font-family: "Noto Emoji", sans-serif; + font-optical-sizing: auto; + font-style: normal; + font-variation-settings: "slnt" 0; +} + +.giscus-outer { + max-height: 20vh; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + text-shadow: 0px 0px 4px white; +} + +.lastfm { + grid-area: lastfm; + display: flex; + align-items: center; + flex-direction: row; + gap: 20px; +} + +.lastfm > div { + display: flex; + flex-direction: column; + justify-content: center; +} + +.logo { + max-width: 40%; + max-height: 40%; +} + .order { display: grid; grid-template-areas: @@ -28,13 +163,6 @@ a { grid-template-rows: repeat(25vh, 6); } -.emoji { - font-family: "Noto Emoji", sans-serif; - font-optical-sizing: auto; - font-style: normal; - font-variation-settings: "slnt" 0; -} - .paper { color: white; background-color: #000000de; @@ -44,12 +172,10 @@ a { word-wrap: break-word; overflow: auto; } -.giscus-outer { - max-height: 20vh; -} -.e-mail { - font-size: small; +.paper > :nth-child(1) { + margin: 0; + padding: 0; } /* https://danmarshall.github.io/google-font-to-svg-path/ */ @@ -59,81 +185,9 @@ a { background-position: 20px 20px; } -.paper > :nth-child(1) { - margin: 0; - padding: 0; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - text-shadow: 0px 0px 4px white; -} -.details { - grid-area: details; -} -.donations { - grid-area: donations; -} -.lastfm { - grid-area: lastfm; - display: flex; - align-items: center; - flex-direction: row; - gap: 20px; -} -.lastfm > div { - display: flex; - flex-direction: column; - justify-content: center; -} -.status { - grid-area: status; -} -.skills { - grid-area: skills; -} -.commit { - grid-area: commit; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 0px; - padding: 5px; - margin: 5px; -} - -.commit > *, -.commit > * > * { - padding: 0; - margin: 0; -} -.binkies { - grid-area: binkies; - display: flex; - gap: 5px; - flex-wrap: wrap; - align-items: center; - justify-content: center; -} -.webrings { - grid-area: webrings; -} .projects { grid-area: projects; } -.blog { - grid-area: blog; - min-height: 75vh; -} -.logo { - max-width: 40%; - max-height: 40%; -} .projects-list { display: flex; @@ -144,6 +198,13 @@ h6 { list-style: none; height: 200px; } + +.project-desc { + font-size: 1em; + margin: 0; + color: #eee; +} + .project-item { background: #111a; border-radius: 6px; @@ -154,33 +215,11 @@ h6 { gap: 6px; transition: background 0.2s; } + .project-item:hover { background: #222c; } -.project-title { - font-size: 1.2em; - font-weight: 600; - margin: 0; - display: flex; - align-items: center; - gap: 8px; -} -.project-title a { - color: white; - text-decoration: underline; - transition: color 0.2s; -} -.project-desc { - font-size: 1em; - margin: 0; - color: #eee; -} -.project-tags { - display: flex; - flex-wrap: wrap; - gap: 6px; - margin-top: 4px; -} + .project-tag { background: #222; color: #fff; @@ -192,10 +231,45 @@ h6 { opacity: 0.85; } +.project-tags { + display: flex; + flex-wrap: wrap; + gap: 6px; + margin-top: 4px; +} + +.project-title { + font-size: 1.2em; + font-weight: 600; + margin: 0; + display: flex; + align-items: center; + gap: 8px; +} + +.project-title a { + color: white; + text-decoration: underline; + transition: color 0.2s; +} + +.skills { + grid-area: skills; +} + +.status { + grid-area: status; +} + +.webrings { + grid-area: webrings; +} + webring-container { width: unset !important; height: unset !important; } + @media only screen and (max-width: 600px) { .order { grid-template-areas: diff --git a/website/index.html b/website/index.html index 5c84f4f..842667b 100644 --- a/website/index.html +++ b/website/index.html @@ -26,27 +26,39 @@ __TEMPLATE_HEAD__
Did you know that I have a 6 gigabyte big MiDi collection?
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/website/templates/head.html b/website/templates/head.html
index d0af662..12c4a83 100644
--- a/website/templates/head.html
+++ b/website/templates/head.html
@@ -24,16 +24,10 @@
-
-
\ No newline at end of file
+ -->