From f54331baa7dc0c68cc40e219efd8f165e1a35ad2 Mon Sep 17 00:00:00 2001 From: meaz Date: Fri, 25 Feb 2022 21:41:11 +0000 Subject: [PATCH] Fix word break in footer + font size in mobile view (#10) Fix https://git.disroot.org/Disroot/Website/issues/324 Co-authored-by: meaz Reviewed-on: https://git.disroot.org/Disroot/grav-theme-disrootblog/pulls/10 Co-authored-by: meaz Co-committed-by: meaz --- css/media-queries.css | 3 ++- css/style.css | 33 ++++++++++++++------------------- 2 files changed, 16 insertions(+), 20 deletions(-) diff --git a/css/media-queries.css b/css/media-queries.css index 0c8cd77..10dc4a6 100644 --- a/css/media-queries.css +++ b/css/media-queries.css @@ -6,6 +6,7 @@ letter-spacing: 0.5px; margin-bottom: 0px; height: 100%; + font-size: 10px; } footer div#footer-links ul li { @@ -25,4 +26,4 @@ font-size: 18px; line-height: 54px; } -} \ No newline at end of file +} diff --git a/css/style.css b/css/style.css index 73680bd..50b8574 100644 --- a/css/style.css +++ b/css/style.css @@ -94,12 +94,6 @@ body { font-family: 'Lato', 'Helvetica Neue', sans-serif; font-size: 16px; - -ms-word-break: break-all; - word-break: break-word; - --webkit-hyphens: auto; - -moz-hyphens: auto; - hyphens: auto; } body a { @@ -1737,7 +1731,7 @@ footer { align-items: center; height: 82px; } - + footer #footer-logo { height: 45px; width: 15%; @@ -1747,7 +1741,7 @@ footer { opacity: 0.7; display: inline-block; } - + footer .dot { height: 5px; width: 5px; @@ -1756,12 +1750,12 @@ footer { display: inline-block; margin-bottom: 2px; } - + footer #footer-links { text-align: center; width: 60%; } - + footer ul.footer-links { display: flex; justify-content: center; @@ -1769,31 +1763,32 @@ footer { padding-left: 0; margin-bottom: 24px; margin-top: 12px; - word-break: normal; } - + footer ul.footer-icons { display: flex; justify-content: end; margin-right: 30px; align-items: center; } - + footer div#footer-links ul li { padding-left: 20px; padding-right: 20px; margin: 0; padding-top: 13px; font-weight: 600; + text-align: center; + line-height: 1.5em; } - + footer #footer-links a { color: #b9a2ab; } footer #footer-links a:hover { color: #FFFFFF; } - + footer #footer-icons { width: 25%; background: transparent; @@ -1803,24 +1798,24 @@ footer { margin-bottom: 24px; margin-top: 12px; } - + footer #footer-icons ul li { margin: 0; padding-right: 10px; padding-top: 10px; text-align: right; } - + footer #footer-icons ul li .fa-fw { color: white; opacity: 0.7; } - + footer #footer-icons ul li .fa-fw:hover { color: white; opacity: 1; } - + footer a, footer a:visited { color: #FFFFFF; } footer a:hover, footer a:focus { color: #1F5C60; }