severinkaderli/home.kaderli.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adjust some styling and improve responsiveness
All checks were successful
Build & Push Docker Image / build-and-push (push) Successful in 29s
Details

Browse source
This commit is contained in:
Severin Kaderli 2024-01-04 19:28:16 +01:00
parent 51d75a7a89
commit b4e0a41991
Signed by: severinkaderli
GPG key ID: F419F8835B72F0C4
2 changed files with 43 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

14
index.html
View file

@ -10,7 +10,7 @@
<body> <body>
<div class="page"> <div class="page">
<main> <main>
<div class="group"> <div class="link-group">
<h2>Organization</h2> <h2>Organization</h2>
<ul> <ul>
<li> <li>
@ -49,7 +49,7 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="group"> <div class="link-group">
<h2>Entertainment</h2> <h2>Entertainment</h2>
<ul> <ul>
<li> <li>
@ -74,7 +74,7 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="group"> <div class="link-group">
<h2>Social</h2> <h2>Social</h2>
<ul> <ul>
<li> <li>
@ -91,7 +91,7 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="group"> <div class="link-group">
<h2>Programming</h2> <h2>Programming</h2>
<ul> <ul>
<li> <li>
@ -108,7 +108,7 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="group"> <div class="link-group">
<h2>Hosting</h2> <h2>Hosting</h2>
<ul> <ul>
<li> <li>
@ -123,7 +123,7 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="group"> <div class="link-group">
<h2>Gaming</h2> <h2>Gaming</h2>
<ul> <ul>
<li> <li>
@ -133,7 +133,7 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="group"> <div class="link-group">
<h2>Guild Wars 2</h2> <h2>Guild Wars 2</h2>
<ul> <ul>
<li> <li>

48
styles.css
View file

@ -23,13 +23,16 @@
--color13: #ec7aca; --color13: #ec7aca;
--color14: #4ab0b9; --color14: #4ab0b9;
--color15: #a4a0ac; --color15: #a4a0ac;
--link-group-title-font-size: 1.5rem;
--link-group-item-font-size: 1.25rem;
} }
:root { :root {
--spacing: 8px; --spacing: 8px;
--width: 900px; --width: 900px;
--font-family: "Iosevka", monospace; --font-family: "Iosevka", monospace;
font-size: 200%; font-size: 100%;
} }
* { * {
@ -59,11 +62,6 @@ input {
padding: var(--spacing); padding: var(--spacing);
} }
.group {
width: 100%;
margin-bottom: calc(2 * var(--spacing));
}
header { header {
margin-bottom: calc(2 * var(--spacing)); margin-bottom: calc(2 * var(--spacing));
} }
@ -73,25 +71,34 @@ main {
flex-wrap: wrap; flex-wrap: wrap;
} }
ul { .link-group {
width: 100%;
margin-bottom: calc(2 * var(--spacing));
h2 {
margin-bottom: calc(0.5 * var(--spacing));
font-size: var(--link-group-title-font-size);
}
ul {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
display: flex; display: grid;
margin-left: var(--spacing); grid-template-columns: repeat( auto-fill, minmax(150px, 1fr) );
flex-wrap: wrap; flex-wrap: wrap;
gap: var(--spacing); gap: var(--spacing);
a {
font-size: var(--link-group-item-font-size);
}
}
} }
li:not(:last-child):after {
content: "/";
margin-left: -5px;
}
h2 {
margin-bottom: calc(0.5 * var(--spacing));
font-size: 1rem;
}
a { a {
color: inherit; color: inherit;
@ -101,3 +108,10 @@ a {
a:hover { a:hover {
text-decoration: underline; text-decoration: underline;
} }
@media screen and (max-width: 800px) {
ul {
margin-left: 0;
}
}