mobile more

6 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,52 +39,65 @@ 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{
+#content {
    font-size: 22px;
    line-height: 1.7rem;
    max-width: 633px;
    margin: auto;
    margin-right: 0;
-    margin-top: 430px;
-    margin-bottom: 200px;   
+    margin-top: -100px;
 }

-#content p{
+#content p {
    margin-left: 25mm;
 }

-#content h1{display: none;}
-#content h2, #content h3{
+#content h1 {display: none;}
+#content h2, #content h3 {
    text-decoration: underline;
    text-align: center;
 }

-#content strong{
-  position: absolute;
-  margin-left: -44mm;
-  width: 44mm; 
+#content strong {
+    position: absolute;
+    margin-left: -44mm;
+    width: 44mm; 
 }

-
-
-@keyframes wiggle{
-    25%{
-	transform: scale(0.8,1.3);
+@keyframes wiggle {
+    25% {
+        transform: scale(0.8, 1.3);
    }
-    50%{
-	transform: scale(1.1,0.8);
+    50% {
+        transform: scale(1.1, 0.8);
    }
-    75%{
-	transform: scale(0.7,1.2);
+    75% {
+        transform: scale(0.7, 1.2);
    }
 }

-
 .content-list a:hover img,
 .content-list img:hover {
    animation: wiggle 0.6s infinite;
@ -118,38 +106,60 @@ h1 {

@media (max-width: 768px) {
    body {
-      font-size: 21px;
-      line-height: 1.5rem;
-      padding: 0 50px;
+        font-size: 21px;
+        line-height: 1.5rem;
+        padding: 0 50px;
    }
      
    .container {
-     margin-left: -20px;
-     line-height: 2rem;
+        margin-left: -20px;
+        line-height: 2rem;
+        margin: 20px 0; /* Adjusted for mobile */
    }
      
    .container h1 {
-      font-size: 30px;
-      max-width: 200px;    
+        font-size: 30px;
+        max-width: 200px;    
    }
      
    .container h2 {
-      font-size: 20px;
-      max-width: 70px; 
+        font-size: 20px;
+        max-width: 70px; 
    }
      
    .content-list {
        max-width: 90%;
        margin-top: 30px;
        margin-right: -20px;
-       
    }
      
    .content-list img {
-      width: 25px;
+        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; 
+    }
+}