Adjust spacing

Signed-off-by: Severin Kaderli <severin@kaderli.dev>
This commit is contained in:
Severin Kaderli 2021-01-16 23:53:33 +01:00
parent f890d40c63
commit d86cc49371
Signed by: severinkaderli
GPG key ID: F419F8835B72F0C4

View file

@ -33,10 +33,14 @@
} }
:root { :root {
--spacing: 10px; --spacing: 8px;
--width: 500px; --width: 500px;
--font-family: monospace; --font-family: monospace;
font-size: 14px; font-size: 16px;
}
* {
box-sizing: border-box;
} }
body { body {
@ -47,11 +51,11 @@
} }
.page { .page {
position: fixed; margin: calc(4 * var(--spacing)) auto 0;
top: 25%;
left: 50%; padding: var(--spacing);
transform: translate(-50%, -25%); width: 100%;
width: var(--width); max-width: var(--width);
} }
input { input {
@ -113,7 +117,6 @@
<body> <body>
<div class="page"> <div class="page">
<header> <header>
<h1>Hello Severin!</h1>
<form action="https://google.ch/search"> <form action="https://google.ch/search">
<input type="search" name="q" autofocus placeholder="Search..."> <input type="search" name="q" autofocus placeholder="Search...">
</form> </form>
@ -124,6 +127,7 @@
<ul> <ul>
<li><a rel="noopener noreferrer" href="https://mail.zoho.eu">Mail</a></li> <li><a rel="noopener noreferrer" href="https://mail.zoho.eu">Mail</a></li>
<li><a rel="noopener noreferrer" href="https://cloud.schaer.dev/apps/calendar">Calendar</a></li> <li><a rel="noopener noreferrer" href="https://cloud.schaer.dev/apps/calendar">Calendar</a></li>
<li><a rel="noopener noreferrer" href="https://cloud.schaer.dev/apps/files">Files</a></li>
</ul> </ul>
</div> </div>
<div class="group"> <div class="group">
@ -147,6 +151,8 @@
<h2>Programming</h2> <h2>Programming</h2>
<ul> <ul>
<li><a rel="noopener noreferrer" href="https://git.kaderli.dev">Gitea</a></li> <li><a rel="noopener noreferrer" href="https://git.kaderli.dev">Gitea</a></li>
<li><a rel="noopener noreferrer" href="https://ci.kaderli.dev">Concourse</a></li>
<li><a rel="noopener noreferrer" href="https://gitlab.com/severinkaderli">GitLab</a></li>
</ul> </ul>
</div> </div>
<div class="group"> <div class="group">
@ -156,14 +162,6 @@
<li><a rel="noopener noreferrer" href="https://www.backblaze.com">Backblaze</a></li> <li><a rel="noopener noreferrer" href="https://www.backblaze.com">Backblaze</a></li>
</ul> </ul>
</div> </div>
<div class="group">
<h2>Gaming</h2>
<ul>
<li><a rel="noopener noreferrer" href="https://www.reddit.com">Reddit</a></li>
<li><a rel="noopener noreferrer" href="https://fosstodon.org">Mastodon</a></li>
<li><a rel="noopener noreferrer" href="https://twitter.com">Twitter</a></li>
</ul>
</div>
</main> </main>
</div> </div>
</body> </body>