mobile more

master
ada 3 months ago
parent c19dd0b7f6
commit c5546bda83

@ -11,11 +11,6 @@
<body>
<div id="row1">
<div class=" container">
<h2>xpub 2224</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 2224</h2>
<h1>vulnerable interfaces</h1>
</div>
<div id="row2">
<div id="content"><h1 id="introduction">Introduction</h1>
<h2 id="act-1.">Act 1.</h2>

@ -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;
}
}

Loading…
Cancel
Save