diff --git a/images/icon-defs.svg b/images/icon-defs.svg
index 781df5b..52c5f92 100644
--- a/images/icon-defs.svg
+++ b/images/icon-defs.svg
@@ -6,14 +6,21 @@
+
+
+
+
-
+
+
+
+
diff --git a/index.html b/index.html
index 5915cc7..beeebd1 100644
--- a/index.html
+++ b/index.html
@@ -82,10 +82,18 @@
GitHub
+
+
+ Codeberg
+
Mastodon
+
+
+ Bluesky
+
Matrix
diff --git a/style.css b/style.css
index 184fae1..332bb3e 100644
--- a/style.css
+++ b/style.css
@@ -1,3 +1,6 @@
+* {
+ box-sizing: border-box;
+}
html {
background: #eee;
color: #444;
@@ -9,7 +12,7 @@ html {
}
body {
grid-row: 2;
- max-width: 30em;
+ max-width: 34em;
margin: auto;
padding: 2em;
line-height: 1.5em;
@@ -85,11 +88,11 @@ img.profile {
padding: 0;
}
.contact li {
- flex: 1 0 6em;
+ width: 50%;
list-style-type: none;
display: inline-block;
- margin: 0.5em 1em;
- padding: 0;
+ padding: 0.5em 1em;
+ margin: 0;
}
.contact a {
display: inline-block;
@@ -97,11 +100,10 @@ img.profile {
height: 1.5em;
}
.contact a .icon {
- padding-right: 0.5em;
width: 1.7em;
height: 1.7em;
vertical-align: bottom;
- margin-left: -2.4em;
+ margin: 0 0.5em 0 -2.4em;
}
.contact a:hover {
color: #08f;
@@ -151,6 +153,11 @@ code {
display: inline;
}
}
+@media (min-width: 600px) {
+ .contact li {
+ width: 33.3%;
+ }
+}
@media (min-width: 800px) {
html {
font-size: 20px;