diff --git a/assets/style/index.css b/assets/style/index.css index a9ac017..04c9b4c 100644 --- a/assets/style/index.css +++ b/assets/style/index.css @@ -19,6 +19,7 @@ body { align-items: center; flex-direction: column; max-width: 100vw; + min-height: 100vh; } .content { @@ -26,7 +27,7 @@ body { padding: 8px 16px; width: calc(100vw - 32px); max-width: 720px; - flex: 1; + /* flex: 1; */ background-color: var(--background-2); border: 1px solid var(--accent); border-radius: 4px; @@ -63,3 +64,54 @@ a { .nav-button:hover { text-decoration: underline; } + +.footer { + margin-bottom: 16px; + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-end; +} + +.icon-row { + display: flex; + flex-direction: row; + align-items: center; +} +.icon-row > * { + margin-right: 16px; +} +.icon-row svg { + transition: fill 200ms ease; + fill: white; +} +.hover-email:hover { + fill: var(--accent); +} +.hover-discord:hover { + fill: #5865F2; +} +.hover-github:hover { + fill: #24292f; +} +.hover-mastodon:hover { + fill: #3c99dc; +} +.hover-reddit:hover { + fill: #ff4500; +} +.hover-twitch:hover { + fill: #6441a5; +} +.hover-twitter:hover { + fill: #00acee; +} +.hover-code:hover { + fill: #3a86ff; +} +.icon { + height: 1.2em; + fill: var(--foreground-dim); + vertical-align: sub; +} diff --git a/templates/base.html b/templates/base.html index cbe55c8..948dc2c 100644 --- a/templates/base.html +++ b/templates/base.html @@ -14,6 +14,41 @@
{% block content %}{% endblock %} +