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

58
styles.css
View file

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