mobile more

5 months ago · c5546bda83
parent c19dd0b7f6
commit c5546bda83
2 changed files with 77 additions and 66 deletions
--- a/index.html
+++ b/index.html
@ -11,11 +11,6 @@
 <body>
    <div id="row1">

-        <div class=" container"> 
-        <h2>xpub 22–24</h2>
-        <h1>vulnerable interfaces</h1>
-        </div>
-
        <div class="content-list" id="index-contents">
            <img src="/img/purple.png" alt="purple" class="img">
            <a href="/ada/index.html" class=" content">Backplaces</a>
@ -45,6 +40,12 @@
        
    </div>

+    <div class=" container"> 
+        <h2>xpub 22–24</h2>
+        <h1>vulnerable interfaces</h1>
+    </div>
+
+
    <div id="row2">
        <div id="content"><h1 id="introduction">Introduction</h1>
            <h2 id="act-1.">Act 1.</h2>
--- a/style.css
+++ b/style.css
@ -20,31 +20,6 @@ body {
    box-sizing: border-box;
 }

-.container {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    position: absolute;
-    bottom: 0;
-    left: 70px; 
-    margin-bottom: 70px;
-}
-
-h1 {
-    font-family: 'Platypi-Bold', serif;
-    font-size: 50px;
-    max-width: 20%;
-    margin: 0;
-}
-
-.container h2 {
-    font-family: 'Platypi-Regular', serif;
-    font-size: 40px;
-    max-width: 30%;
-    margin: 0;
-    margin-bottom: -0.5rem;
-}
-
 .content-list {
    max-width: 633px;
    margin: auto;
@ -64,10 +39,27 @@ h1 {
    filter: saturate(2);
 }

-#row1, #row2 {
-    width: 100%;
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin: 200px 0; 
 }    

+h1 {
+    font-family: 'Platypi-Bold', serif;
+    font-size: 50px;
+    max-width: 20%;
+    margin: 0;
+}
+
+.container h2 {
+    font-family: 'Platypi-Regular', serif;
+    font-size: 40px;
+    max-width: 30%;
+    margin: 0;
+    margin-bottom: -0.5rem;
+}

 #content {
    font-size: 22px;
@ -75,8 +67,7 @@ h1 {
    max-width: 633px;
    margin: auto;
    margin-right: 0;
-    margin-top: 430px;
-    margin-bottom: 200px;   
+    margin-top: -100px;
 }

 #content p {
@ -95,8 +86,6 @@ h1 {
    width: 44mm; 
 }

-
-
@keyframes wiggle {
    25% {
        transform: scale(0.8, 1.3);
@ -109,7 +98,6 @@ h1 {
    }
 }

-
 .content-list a:hover img,
 .content-list img:hover {
    animation: wiggle 0.6s infinite;
@ -126,6 +114,7 @@ h1 {
    .container {
        margin-left: -20px;
        line-height: 2rem;
+        margin: 20px 0; /* Adjusted for mobile */
    }
      
    .container h1 {
@ -142,14 +131,35 @@ h1 {
        max-width: 90%;
        margin-top: 30px;
        margin-right: -20px;
-       
    }
      
    .content-list img {
        width: 25px;
    }

-    .about {
-        padding: 20px;
+    #content {
+        font-size: 15px;
+        line-height: 1.2rem;
+        max-width: -webkit-fill-available;
+        margin: auto;
+        margin-right: 0;
+        margin-top: 50px;
+    }
+    
+    #content p {
+        width: 220px;
+        margin-left: 20mm;
+    }
+    
+    #content h1 {display: none;}
+    #content h2, #content h3 {
+        text-decoration: underline;
+        text-align: center;
+    }
+    
+    #content strong {
+        position: absolute;
+        margin-left: -20mm;
+        width: 14mm; 
    }
 }