try adding mobile styling with javascript

PadjokeJ · Oct 30, 2024 · 4af4638 · 4af4638
1 parent cdb3824
commit 4af4638
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 78 deletions.
diff --git a/index.html b/index.html
@@ -3,7 +3,19 @@
     <head>
         <title>PADJOKEJ.dev</title>
         <link rel="icon" type="image/x-icon" href="/images/pfp.png">
-        <link rel="stylesheet" href="styles.css">
+        <link rel="stylesheet" id="pagestyle" href="styles.css">
+        <script>
+            if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) 
+            {
+                let sheet = "styles.css";
+            }
+            else
+            {
+                let sheet = "styles.css";
+            }
+            document.getElementById("pagestyle").setAttribute("href", sheet);  
+        </script>
+
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale : 1.0">
         <p>

diff --git a/mobile.css b/mobile.css
@@ -0,0 +1,57 @@
+body
+{
+    font-size: 25px;
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    margin: 0;
+    background: darkslategray;
+    text-align: center;
+    color:aliceblue
+}
+a
+{
+    font-size: 50px;
+}
+h1
+{
+    margin-bottom: 0;
+    font-size: 80px;
+    background: darkslategray;
+    text-align: center;
+    color:aliceblue
+}
+img 
+{
+    border-radius: 20%;
+    width : 50vw;
+}
+#button
+{
+    border-radius: 30px;
+    border: 8px solid rgb(93, 140, 168);
+    background: rgb(11, 36, 51);
+    padding: 20px; 
+    width: 400px;
+    height: 300px;
+}
+
+a
+{
+    color: rgb(93, 140, 168); 
+}
+
+#footer-bottom {
+    background-color: #1f1f1f;
+    background-color: rgba(0,0,0,0.32);
+    padding: 15px 0 5px;
+}
+
+#footer-info {
+    text-align: center;
+    color: #666;
+    padding-bottom: 10px;
+    float: none;
+}
+
+#main-footer {
+    background-color: #222222;
+}
diff --git a/styles.css b/styles.css
@@ -1,84 +1,34 @@
-@media (min-aspect-ratio: 1/1) {
-    body
-    {
-        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-        margin: 0;
-        background: darkslategray;
-        text-align: center;
-        color:aliceblue
-    }
 
-    h1
-    {
-        margin-bottom: 0;
-        font-size: 25px;
-        background: darkslategray;
-        text-align: center;
-        color:aliceblue
-    }
-
-    img 
-    {
-        border-radius: 20%;
-        width : calc(150px + 4vh);
-
-    }
-
-    #button
-    {
-        border-radius: 25px;
-        border: 2px solid rgb(93, 140, 168);
-        background: rgb(11, 36, 51);
-        padding: 20px; 
-        width: 200px;
-        height: 150px;
-    }
+body
+{
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    margin: 0;
+    background: darkslategray;
+    text-align: center;
+    color:aliceblue
 }
-
-@media (max-aspect-ratio: 1/1)
+h1
 {
-    body
-    {
-        font-size: 25px;
-        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-        margin: 0;
-        background: darkslategray;
-        text-align: center;
-        color:aliceblue
-    }
-
-    a
-    {
-        font-size: 50px;
-    }
-
-    h1
-    {
-        margin-bottom: 0;
-        font-size: 80px;
-        background: darkslategray;
-        text-align: center;
-        color:aliceblue
-    }
-
-    img 
-    {
-        border-radius: 20%;
-        width : 50vw;
-    }
-    #button
-    {
-        border-radius: 30px;
-        border: 8px solid rgb(93, 140, 168);
-        background: rgb(11, 36, 51);
-        padding: 20px; 
-        width: 400px;
-        height: 300px;
-    }
-
-
+    margin-bottom: 0;
+    font-size: 25px;
+    background: darkslategray;
+    text-align: center;
+    color:aliceblue
+}
+img 
+{
+    border-radius: 20%;
+    width : calc(150px + 4vh);
+}
+#button
+{
+    border-radius: 25px;
+    border: 2px solid rgb(93, 140, 168);
+    background: rgb(11, 36, 51);
+    padding: 20px; 
+    width: 200px;
+    height: 150px;
 }
-
 a
 {
     color: rgb(93, 140, 168);