mobile more

master
ada 3 months ago
parent c19dd0b7f6
commit c5546bda83

@ -11,11 +11,6 @@
<body> <body>
<div id="row1"> <div id="row1">
<div class=" container">
<h2>xpub 2224</h2>
<h1>vulnerable interfaces</h1>
</div>
<div class="content-list" id="index-contents"> <div class="content-list" id="index-contents">
<img src="/img/purple.png" alt="purple" class="img"> <img src="/img/purple.png" alt="purple" class="img">
<a href="/ada/index.html" class=" content">Backplaces</a> <a href="/ada/index.html" class=" content">Backplaces</a>
@ -45,6 +40,12 @@
</div> </div>
<div class=" container">
<h2>xpub 2224</h2>
<h1>vulnerable interfaces</h1>
</div>
<div id="row2"> <div id="row2">
<div id="content"><h1 id="introduction">Introduction</h1> <div id="content"><h1 id="introduction">Introduction</h1>
<h2 id="act-1.">Act 1.</h2> <h2 id="act-1.">Act 1.</h2>

@ -20,31 +20,6 @@ body {
box-sizing: border-box; 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 { .content-list {
max-width: 633px; max-width: 633px;
margin: auto; margin: auto;
@ -64,10 +39,27 @@ h1 {
filter: saturate(2); filter: saturate(2);
} }
#row1, #row2 { .container {
width: 100%; 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; font-size: 22px;
@ -75,8 +67,7 @@ h1 {
max-width: 633px; max-width: 633px;
margin: auto; margin: auto;
margin-right: 0; margin-right: 0;
margin-top: 430px; margin-top: -100px;
margin-bottom: 200px;
} }
#content p { #content p {
@ -95,8 +86,6 @@ h1 {
width: 44mm; width: 44mm;
} }
@keyframes wiggle { @keyframes wiggle {
25% { 25% {
transform: scale(0.8, 1.3); transform: scale(0.8, 1.3);
@ -109,7 +98,6 @@ h1 {
} }
} }
.content-list a:hover img, .content-list a:hover img,
.content-list img:hover { .content-list img:hover {
animation: wiggle 0.6s infinite; animation: wiggle 0.6s infinite;
@ -126,6 +114,7 @@ h1 {
.container { .container {
margin-left: -20px; margin-left: -20px;
line-height: 2rem; line-height: 2rem;
margin: 20px 0; /* Adjusted for mobile */
} }
.container h1 { .container h1 {
@ -142,14 +131,35 @@ h1 {
max-width: 90%; max-width: 90%;
margin-top: 30px; margin-top: 30px;
margin-right: -20px; margin-right: -20px;
} }
.content-list img { .content-list img {
width: 25px; width: 25px;
} }
.about { #content {
padding: 20px; 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;
} }
} }
Loading…
Cancel
Save