uniformed classes in the document and modified stylesheet to match them

diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index 84d9fce4983835b23474ad9e8b1f79a22bf49b43..6f5989e2b01c71f957ca0e4df40b42ecd881fc14 100644 (file)
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -1,9 +1,19 @@
 body {
        background-color: #dadada;;
-       header#masthead {
-               background-color: #656565;
-       }
+       header#masthead,
        footer#colophon {
                background-color: #656565;
        }
+}
+.screen-reader-text,
+.hidden {
+       border:0;
+       clip:rect(1px, 1px, 1px, 1px);
+       clip-path:inset(100%);
+       height:1px;
+       overflow:hidden;
+       padding:0;
+       position:absolute;
+       white-space:nowrap;
+       width:1px
 }
\ No newline at end of file

diff --git a/layouts/partials/home-social-links.html b/layouts/partials/home-social-links.html
index cef1f3a46939b4fc63e03391e65510fbe6b3c6fc..119d7066c32e78040b2d2c63b11374921ad92bba 100644 (file)
--- a/layouts/partials/home-social-links.html
+++ b/layouts/partials/home-social-links.html
@@ -1,5 +1,5 @@
 <div id="home-social-links">
-       <h3 class="text-only">my socials</h3>
+       <h3 class="screen-reader-text">my socials</h3>
        <ul>
                {{ range site.Data.socials.sites }}
                        <li>