mirror of
https://github.com/zaaarf/friendenstein.git
synced 2024-11-12 18:49:22 +01:00
feat: icons with tooltip instead of link
This commit is contained in:
parent
dc78abbf45
commit
40785d8267
5 changed files with 293 additions and 205 deletions
|
@ -75,10 +75,11 @@ subtitle_suffixes = [
|
|||
|
||||
# Social icons, list here: https://github.com/rhazdon/hugo-theme-hello-friend-ng/blob/master/layouts/partials/svg.html
|
||||
social_icons = [
|
||||
{ name = "github", url = "https://github.com/zaaarf" },
|
||||
{ name = "codeberg", url = "https://codeberg.org/zaaarf" },
|
||||
{ name = "matrix", url = "https://matrix.to/#/@zaaarf:fantabos.co" },
|
||||
{ name = "email", url = "mailto:me@zaaarf.foo" }
|
||||
{ name = "github", at = "https://github.com/zaaarf" },
|
||||
{ name = "codeberg", at = "https://codeberg.org/zaaarf" },
|
||||
{ name = "matrix", at = "https://matrix.to/#/@zaaarf:fantabos.co" },
|
||||
{ name = "discord", at = "@zaaarf", link = false },
|
||||
{ name = "email", at = "mailto:me@zaaarf.foo" }
|
||||
]
|
||||
|
||||
# Valid keys are "post" and "list", one referring to individual blogposts,
|
||||
|
|
|
@ -26,8 +26,64 @@ div.home-container {
|
|||
}
|
||||
}
|
||||
|
||||
a.social-icon {
|
||||
.social-icon {
|
||||
padding: .2em .3em 0 .3em;
|
||||
font-size: 32px;
|
||||
cursor: pointer;
|
||||
|
||||
&-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-menu {
|
||||
position: absolute;
|
||||
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transition: all 0.15s ease-out 0.15s;
|
||||
|
||||
background-color: transparent;
|
||||
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 100%;
|
||||
|
||||
z-index: 10;
|
||||
|
||||
&-arrow {
|
||||
margin: 0 auto;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-bottom: 4px solid var(--metaColor);
|
||||
}
|
||||
|
||||
&-inner {
|
||||
position: relative;
|
||||
padding: .2em .5em;
|
||||
border: thin solid var(--metaColor);
|
||||
border-radius: 2px;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
border-color: transparent;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
box-shadow: 0 0 20px 1px #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nolink:hover .social-icon-menu {
|
||||
display: inline-block;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
|
|
@ -1,6 +1,14 @@
|
|||
:root.dark {
|
||||
.lightOnly {
|
||||
display: none;
|
||||
:root {
|
||||
&.dark {
|
||||
.light-only {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.light {
|
||||
.dark-only {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
{% import "macros/svg.html" as svg %}
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
|
@ -8,22 +9,23 @@
|
|||
<h1>{{ config.title }}</h1>
|
||||
{% endif %}
|
||||
{% if config.extra.home.subtitle %}
|
||||
<p>{{ config.extra.home.subtitle }}<span id="subtitleRand"></span></p>
|
||||
<p>{{ config.extra.home.subtitle }}<span id="subtitle-rand"></span></p>
|
||||
{% elif config.description %}
|
||||
<p>{{ config.description }}<span id="subtitleRand"></span></p>
|
||||
<p>{{ config.description }}<span id="subtitle-rand"></span></p>
|
||||
{% endif %}
|
||||
{% if config.extra.home.social_icons %}
|
||||
{{ svg::draw_icons(icons=config.extra.home.social_icons) }}
|
||||
{% endif %}
|
||||
{% include "svg.html" %}
|
||||
</div></div>
|
||||
{% if config.extra.home.subtitle_suffixes %}
|
||||
|
||||
<script>
|
||||
<script> //random subtitle logic
|
||||
const suffixes = [
|
||||
{% for s in config.extra.home.subtitle_suffixes %}
|
||||
"{{ s }}",
|
||||
{% endfor %}
|
||||
]
|
||||
var current = suffixes[Math.floor(Math.random() * suffixes.length)];
|
||||
var span = document.getElementById("subtitleRand");
|
||||
var span = document.getElementById("subtitle-rand");
|
||||
span.textContent = current;
|
||||
</script>
|
||||
{% endif %}
|
||||
|
|
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue