Make some CSS rules more precise

So that e.g. a .social div in our future sliding menu is not affected.

2 files changed, 5 insertions, 5 deletions

diff --git a/stylesheets/commun.css b/stylesheets/commun.css
index 174ab7d..76a1db7 100644
--- a/stylesheets/commun.css
+++ b/stylesheets/commun.css
@@ -33,10 +33,10 @@ header.banner h1 {
     font-family: 'Cormorant', serif;
 }
 
-header.banner img, .social a img {
+header.banner img, footer.social img {
     filter: brightness(0);
 }
-header.banner:hover img, .social a:hover img {
+header.banner:hover img, footer.social img:hover {
     filter: none;
 }
 header.banner:hover {
@@ -201,12 +201,12 @@ footer.legal {
         padding: var(--menu-top-margin) 1em 0;
     }
 
-    .social a {
+    footer.social a {
         display: block;
         margin: 1rem;
     }
 
-    .social a > img {
+    footer.social a > img {
         width: 2.2rem;
     }
 
diff --git a/stylesheets/dark.css b/stylesheets/dark.css
index 297b27a..0234077 100644
--- a/stylesheets/dark.css
+++ b/stylesheets/dark.css
@@ -12,6 +12,6 @@ footer.social a.lang:hover {
     border-color: white;
 }
 
-header.banner img, .social a img {
+header.banner img, footer.social a img {
     filter: brightness(10);
 }