make things look a bit better on mobile
This commit is contained in:
parent
e8f4f4d729
commit
9d930f20de
4 changed files with 61 additions and 2 deletions
|
@ -102,3 +102,29 @@ 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%;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -16,3 +16,35 @@
|
|||
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);
|
||||
}
|
||||
}
|
|
@ -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"
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue