fix mobile display

This commit is contained in:
ari melody 2025-07-10 16:41:25 +01:00
parent d112d7ae63
commit 6f6c0c3a6d
Signed by: ari
GPG key ID: CF99829C92678188
3 changed files with 21 additions and 7 deletions

View file

@ -4,7 +4,7 @@
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" value="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>bliss town</title>
<link rel="icon" type="image/x-icon" href="/img/favicon.png">
@ -22,10 +22,10 @@
<header>
<nav>
<span class="nav-title">
<span class="title-icon">
<div class="title-icon">
<img src="/img/icon-light.svg" class="only-light" width=26 height=26 />
<img src="/img/icon-dark.svg" class="only-dark" width=26 height=26 />
</span>
</div>
<strong>bliss<span class="col-on-primary">.</span>town</strong>
</span>
<a href="/">home</a>
@ -34,10 +34,10 @@
</header>
<main>
<h1>
<span class="title-icon">
<div class="title-icon">
<img src="/img/icon-light.svg" class="only-light" width=64 height=64 />
<img src="/img/icon-dark.svg" class="only-dark" width=64 height=64 />
</span>
</div>
welcome to bliss<span class="col-on-primary">.</span>town!
</h1>

View file

@ -115,3 +115,9 @@
color: var(--on-primary);
border: 1px solid var(--on-primary);
}
@media screen and (max-width: 500px) {
.crew-tags {
flex-wrap: wrap;
}
}

View file

@ -153,13 +153,15 @@ footer:hover {
.title-icon {
position: relative;
height: 1.2em;
width: 1.3em;
height: 1.1em;
margin: 0 .1em;
padding-right: 1.6em;
display: inline-block;
}
.title-icon img {
width: 1.4em;
height: 1.4em;
position: absolute;
}
@ -179,3 +181,9 @@ footer:hover {
box-shadow: 0 2px 8px #0c03116e;
}
}
@media screen and (max-width: 500px) {
h1 {
font-size: 1.2em;
}
}