make things look a bit better on mobile

This commit is contained in:
nelle 2024-08-31 20:47:58 -06:00
parent e8f4f4d729
commit 9d930f20de
4 changed files with 61 additions and 2 deletions

View file

@ -101,4 +101,30 @@ button {
hr {
width: 32%;
color: var(--gray);
}
}
.ntfyForm {
display: flex;
justify-content: space-between;
}
/* Mobile */
@media (max-width: 768px) {
h1 {
font-size: 32px;
background-image: var(--accent-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 400%;
background-position: 0%;
}
.ntfyForm {
display: list-item;
margin-top: -8%;
margin-bottom: 8%;
}
}

View file

@ -15,4 +15,36 @@
color: var(--text);
background-color: var(--background);
}
@media (min-width: 992px) {
:root {
font-size: 20px;
font-family: departure-mono, system-ui;
padding: 1rem;
width: 1000px;
max-width: calc(100% - 2rem);
line-height: 1.4;
margin: auto;
color: var(--text);
background-color: var(--background);
}
}
@media (max-width: 768px) {
:root {
font-size: 14px;
font-family: departure-mono, system-ui;
padding: 1rem;
width: 1000px;
max-width: calc(100% - 2rem);
line-height: 1.4;
margin: auto;
color: var(--text);
background-color: var(--background);
}
}

View file

@ -9,6 +9,7 @@ const { title } = Astro.props;
---
<link rel="stylesheet" href="/styles/css/main.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link
rel="alternate"

View file

@ -20,7 +20,7 @@
</small>
<br>
<br>
<div style="display: flex; justify-content: space-between;">
<div class="ntfyForm">
<br style="margin-bottom: 10px;">
<textarea id="ntfy-input" placeholder="Hi nelle! (。><。)" rows=2></textarea>
<button