sigmasternchen/drnk.me
1
0
Fork 0
mirror of https://github.com/sigmasternchen/drnk.me synced 2025-03-15 09:48:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: Add decent mobile layout

Browse source
This commit is contained in:
overflowerror 2023-12-03 14:53:29 +01:00
parent 2bce50dac6
commit 50288f40c2
1 changed files with 56 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
html/static/css/main.css
View file

@ -15,59 +15,96 @@
font-family: "Poppins", sans-serif; font-family: "Poppins", sans-serif;
} }
:root {
--ref-unit: 1vw;
}
@media (max-aspect-ratio: 1/1) {
:root {
--ref-unit: 1.5vh;
}
}
html { html {
background: lightgray; background: lightgray;
} }
.page-header { .page-header {
position: fixed; position: fixed;
left: 30vw; left: calc(30 * var(--ref-unit));
width: 50vw; width: calc(50 * var(--ref-unit));
top: 5vw; top: calc(5 * var(--ref-unit));
}
@media (max-aspect-ratio: 1/1) {
.page-header {
left: 0;
width: 100%;
text-align: center;
}
} }
.page-header h1 { .page-header h1 {
font-weight: normal; font-weight: normal;
font-size: 5vw; font-size: calc(5 * var(--ref-unit));
margin: 0; margin: 0;
} }
.page-header h2 { .page-header h2 {
font-weight: normal; font-weight: normal;
font-size: 3vw; font-size: calc(3 * var(--ref-unit));
margin: -1vw 0 0 3vw; margin: calc(-1 * var(--ref-unit)) 0 0 calc(3 * var(--ref-unit));
} }
.bottle { .bottle {
position: fixed; position: fixed;
width: 50vw; width: calc(50 * var(--ref-unit));
left: 0; left: 0;
top: calc((100vh - 50vw) / 2 + 5vw); top: calc((100vh - 50 * var(--ref-unit)) / 2 + 5 * var(--ref-unit));
}
@media (max-aspect-ratio: 1/1) {
.bottle {
filter: contrast(50%) blur(2vw);
}
}
@media (max-aspect-ratio: 3/4) {
.bottle {
width: 110vw;
}
} }
.center-panel { .center-panel {
position: fixed; position: fixed;
width: 40vw; width: calc(40 * var(--ref-unit));
height: 30vw; height: calc(30 * var(--ref-unit));
top: 25vw; top: calc(25 * var(--ref-unit));
left: 40vw; left: calc(40 * var(--ref-unit));
}
@media (max-aspect-ratio: 1/1) {
.center-panel {
width: 80vw;
left: 10vw;
}
} }
.center-panel input { .center-panel input {
font-size: 3vw; font-size: calc(3 * var(--ref-unit));
width: 100%; width: 100%;
margin-top: 1vw; margin-top: calc(1 * var(--ref-unit));
} }
.result { .result {
font-size: 2vw; font-size: calc(3 * var(--ref-unit));
} }
.error { .error {
border: 1px solid red; border: 1px solid red;
color: red; color: red;
padding: 0.2vw; padding: calc(0.2 * var(--ref-unit));
font-size: 1.3vw; font-size: calc(1.3 * var(--ref-unit));
} }
.invisible { .invisible {
@ -76,7 +113,7 @@ html {
.copy, .copy:visited { .copy, .copy:visited {
color: black; color: black;
padding-left: 1vw; padding-left: calc(1 * var(--ref-unit));
} }
.copy:hover { .copy:hover {
@ -85,4 +122,4 @@ html {
.copy:active { .copy:active {
color: lightpink; color: lightpink;
} }