Increase social link spacing further, add About-me divider
Sidebar gap 6rem -> 10rem (previous doubling still read as too small). About-me page: add a subtle .social-links-divider <hr> between the bio text and the icon row (8rem gap above it, 3rem below to the icons) - 11rem total separation from the text, up from 3rem, plus a visual break as requested.
This commit is contained in:
+13
-4
@@ -392,9 +392,9 @@ ul.menuitems {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 0.75rem;
|
gap: 0.75rem;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
/* At least double the standard 3rem inter-section gap (e.g. the gap
|
/* Clearly more than double the standard 3rem inter-section gap (e.g.
|
||||||
above "Tags:") to set the icon row apart from the sidebar nav. */
|
the gap above "Tags:") to set the icon row apart from the sidebar nav. */
|
||||||
margin: 6rem 0 0 0;
|
margin: 10rem 0 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.social-links li {
|
.social-links li {
|
||||||
@@ -420,7 +420,9 @@ ul.menuitems {
|
|||||||
height: 1.25rem;
|
height: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* About-me page variant: bigger icons, distinct gap from the text above. */
|
/* About-me page variant: bigger icons, distinct gap from the text above.
|
||||||
|
Spacing to the preceding text is handled by .social-links-divider's
|
||||||
|
own margins, so this only needs the gap from divider to icons. */
|
||||||
.social-links--large {
|
.social-links--large {
|
||||||
margin-top: 3rem;
|
margin-top: 3rem;
|
||||||
gap: 1.5rem;
|
gap: 1.5rem;
|
||||||
@@ -431,6 +433,13 @@ ul.menuitems {
|
|||||||
height: 5rem;
|
height: 5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.social-links-divider {
|
||||||
|
border: none;
|
||||||
|
border-top: 1px solid var(--table-border-color);
|
||||||
|
width: 4rem;
|
||||||
|
margin: 8rem auto 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.menuitems {
|
.menuitems {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
|||||||
@@ -20,6 +20,7 @@
|
|||||||
{{ page.content }}
|
{{ page.content }}
|
||||||
|
|
||||||
{% if page.slug == 'about-me' %}
|
{% if page.slug == 'about-me' %}
|
||||||
|
<hr class="social-links-divider">
|
||||||
{% set social_links_variant = 'large' %}
|
{% set social_links_variant = 'large' %}
|
||||||
{% include "includes/social_links.html" %}
|
{% include "includes/social_links.html" %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|||||||
Reference in New Issue
Block a user