]> jxnshi.xyz Git - jxnshi.xyz.git/commitdiff
projects / jxnshi.xyz.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: e2fdc25)
Add responsive
authorjxnshi <jxnshi@cock.li>
Mon, 31 Mar 2025 08:12:49 +0000 (10:12 +0200)
committerjxnshi <jxnshi@cock.li>
Mon, 31 Mar 2025 08:12:49 +0000 (10:12 +0200)
build.zig.zon patch | blob | history
public/layout.html patch | blob | history
public/style.css patch | blob | history

diff --git a/build.zig.zon b/build.zig.zon
index 25ecd84b201b1c68ac43cb9b18272f6b521b25a8..0ddf234b6a30569edf0bf0ff1b0bcbddf00467a7 100644 (file)
--- 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 deb95efdcb93231de343df406edfb77cbf37e83c..e12f6fb6668a39f7f87b447c71e56d4a24f12957 100644 (file)
--- a/public/layout.html
+++ b/public/layout.html
@@ -9,7 +9,7 @@
     <body>
         <div id="main-div">
             <header>
-                <img src="/lain2.png" alt="[lain.png]" width="150" height="150">
+                <img class="lain" src="/lain2.png" alt="[lain.png]" width="150" height="150">
                 <div id="header-middle">
                     <h1><a href="/">jxnshi.xyz</a></h1>
                     <div class="isle">
@@ -22,7 +22,7 @@
                         </div>
                     </div>
                 </div>
-                <img src="/lain.png" alt="[lain.png]" width="150" height="150">
+                <img class="lain" src="/lain.png" alt="[lain.png]" width="150" height="150">
             </header>
             <div id="content-div">
                 <div>
diff --git a/public/style.css b/public/style.css
index cc53850da16f8fbc74a48f6673cc9885edb67646..ffb6ded276ce1294a864db48b333067f156a513b 100644 (file)
--- 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 {
jxnshi.xyz website.