From c5546bda83bc348a22e01e1c8fa7d83625bbb129 Mon Sep 17 00:00:00 2001 From: ada <> Date: Tue, 11 Jun 2024 19:38:09 +0200 Subject: [PATCH] mobile more --- index.html | 11 +++-- style.css | 132 ++++++++++++++++++++++++++++------------------------- 2 files changed, 77 insertions(+), 66 deletions(-) diff --git a/index.html b/index.html index a59fc1f..2ec1b0f 100644 --- a/index.html +++ b/index.html @@ -11,11 +11,6 @@
-
-

xpub 22–24

-

vulnerable interfaces

-
-
purple Backplaces @@ -45,6 +40,12 @@
+
+

xpub 22–24

+

vulnerable interfaces

+
+ +

Introduction

Act 1.

diff --git a/style.css b/style.css index 6d9faca..79aa573 100644 --- 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; } -} \ No newline at end of file + + #content strong { + position: absolute; + margin-left: -20mm; + width: 14mm; + } +}