From 27f5bd44656e0f45023fb729f637337f513da964 Mon Sep 17 00:00:00 2001 From: jxnshi Date: Mon, 31 Mar 2025 10:12:49 +0200 Subject: [PATCH] Add responsive --- build.zig.zon | 3 ++- public/layout.html | 4 ++-- public/style.css | 52 +++++++++++++++++++++++++++++++++------------- 3 files changed, 41 insertions(+), 18 deletions(-) diff --git a/build.zig.zon b/build.zig.zon index 25ecd84..0ddf234 100644 --- a/build.zig.zon +++ b/build.zig.zon @@ -1,6 +1,7 @@ .{ - .name = "jxnshi.xyz", + .name = .jxnshi_xyz, .version = "0.0.0", + .fingerprint = 0x81f101b737fbabfc, .paths = .{ "build.zig", "build.zig.zon", diff --git a/public/layout.html b/public/layout.html index deb95ef..e12f6fb 100644 --- a/public/layout.html +++ b/public/layout.html @@ -9,7 +9,7 @@
- [lain.png] + [lain.png]

jxnshi.xyz

@@ -22,7 +22,7 @@
- [lain.png] + [lain.png]
diff --git a/public/style.css b/public/style.css index cc53850..ffb6ded 100644 --- a/public/style.css +++ b/public/style.css @@ -3,6 +3,38 @@ src: url("/basis33.ttf"); } +@media screen and (max-width: 780px) { + .lain { + visibility: hidden; + } + + #header-middle { + width: 300px; + max-width: 100%; + } + + #content-div > div { + display: flex; + flex-direction: column; + width: calc(100% - 70px); + gap: 30px; + } +} + +@media screen and (min-width: 780px) { + #header-middle { + width: 400px; + max-width: 100%; + } + + #content-div > div { + display: flex; + flex-direction: column; + width: 1000px; + gap: 30px; + } +} + * { color: white; font-family: "basis33"; @@ -16,15 +48,11 @@ body::before { position: fixed; left: 0; top: 0; - width: calc(100% + 30px); - height: calc(100% + 30px); + width: 100%; + height: 100%; background-image: url("/scanlines.png"); background-position: 0 0; - background-position-x: 0px; - background-position-y: 0px; background-repeat: repeat; - background-repeat-x: repeat; - background-repeat-y: repeat; pointer-events: none; z-index: 10000000; opacity: 0.1; @@ -48,8 +76,7 @@ body { } header { - display: grid; - grid-template-columns: 1fr 500px 1fr; + display: flex; gap: 70px; align-items: center; } @@ -107,13 +134,6 @@ a:hover { width: 100%; } -#content-div > div { - display: flex; - flex-direction: column; - width: 1000px; - gap: 30px; -} - #donation-div { display: grid; grid-template: "a b" "c d"; @@ -152,11 +172,13 @@ a:hover { padding: 0; align-items: center; list-style: none; + flex-wrap: wrap; } #details { display: flex; gap: 80px; + flex-wrap: wrap; } #header-middle > div { -- 2.49.0