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
|
@ -101,4 +101,30 @@ button {
|
||||||
hr {
|
hr {
|
||||||
width: 32%;
|
width: 32%;
|
||||||
color: var(--gray);
|
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%;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
|
@ -15,4 +15,36 @@
|
||||||
|
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
background-color: var(--background);
|
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" />
|
<link rel="stylesheet" href="/styles/css/main.css" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
<link
|
<link
|
||||||
rel="alternate"
|
rel="alternate"
|
||||||
|
|
|
@ -20,7 +20,7 @@
|
||||||
</small>
|
</small>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<div style="display: flex; justify-content: space-between;">
|
<div class="ntfyForm">
|
||||||
<br style="margin-bottom: 10px;">
|
<br style="margin-bottom: 10px;">
|
||||||
<textarea id="ntfy-input" placeholder="Hi nelle! (。>﹏<。)" rows=2></textarea>
|
<textarea id="ntfy-input" placeholder="Hi nelle! (。>﹏<。)" rows=2></textarea>
|
||||||
<button
|
<button
|
||||||
|
|
Loading…
Reference in a new issue