mobile styles, fix webring links again

This commit is contained in:
Abdulmujeeb Raji 2025-02-08 07:17:20 +00:00
parent 7baef42b65
commit 18b23a7adc
Signed by: midnadimple
GPG key ID: EB02C582F8C3962B
3 changed files with 37 additions and 10 deletions

View file

@ -14,7 +14,7 @@
<body> <body>
<div class="split left"> <div class="split left">
<header> <header>
<img src="assets/logo.svg" width="256"> <img src="assets/logo.svg" class="img-center">
<h1>A Tyrant Incorporated</h1> <h1>A Tyrant Incorporated</h1>
<em>a.k.a "Atiran Inc."</em> <em>a.k.a "Atiran Inc."</em>
</header> </header>

View file

@ -11,6 +11,7 @@ html, body {
background-color: var(--dark-color); background-color: var(--dark-color);
color: var(--fg-color); color: var(--fg-color);
margin: 0; margin: 0;
padding: 0;
font-family: "Cantarell", serif; font-family: "Cantarell", serif;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
@ -31,7 +32,7 @@ body {
.left { .left {
left: 0; left: 0;
width: 30%; width: 40%;
background-color: var(--bg-color); background-color: var(--bg-color);
} }
@ -42,19 +43,21 @@ body {
overflow-y: auto; overflow-y: auto;
} }
@media (max-width: 768px) { /* lg */
@media (max-width: 700px) {
.split { .split {
all: inherit; all: inherit;
} }
.left { .left {
all: inherit; all: inherit;
background-color: var(--bg-color);
width: 100%;
} }
.right { .right {
all: inherit; all: inherit;
padding-top: 15px; padding-top: 15px;
background-color: var(--dark-color);
padding-bottom: 4rem; padding-bottom: 4rem;
} }
} }
@ -121,12 +124,35 @@ article {
display: flex; display: flex;
justify-content: enter; justify-content: enter;
align-items: center; align-items: center;
img {
padding-right: 30px;
}
} }
.img-center {
display: block;
margin-left: auto;
margin-right: auto;
width: 70%;
}
article img {
margin-right: 30px;
}
/* lg */
@media (max-width: 1024px) {
article {
flex-direction: column;
}
article img {
margin: auto;
}
.container {
text-align: center;
}
}
.container { .container {
max-width: 1536px; max-width: 1536px;
margin-left: auto; margin-left: auto;
@ -154,6 +180,7 @@ article {
/* lg */ /* lg */
@media (max-width: 1024px) { @media (max-width: 1024px) {
.container { .container {
width: 60%;
max-width: 768px; max-width: 768px;
} }
} }
@ -175,7 +202,7 @@ article {
/* xs */ /* xs */
@media (max-width: 475px) { @media (max-width: 475px) {
.container { .container {
width: 100%; width: 90%;
} }
} }

View file

@ -33,6 +33,6 @@ else {
"<a href='" + atiran_members[beforeID] + "'>&lt;&lt; Previous</a> |" + "<a href='" + atiran_members[beforeID] + "'>&lt;&lt; Previous</a> |" +
" <a href='" + atiran_members[randomID] + "'>Random</a> |" + " <a href='" + atiran_members[randomID] + "'>Random</a> |" +
" <a href='https://libre.town/creative/development/librering.xhtml'>About LibreRing</a> |" + " <a href='https://libre.town/creative/development/librering.xhtml'>About LibreRing</a> |" +
" <a href='" + atiran_members[afterID] + "'Next</a> Next&gt;&gt;</p>"; " <a href='" + atiran_members[afterID] + "Next &gt;&gt;</a></p>";
} }