implemented following users to receive (opt-in) email notifications when they publish an article.

css/base.css

@@ -31,7 +31,8 @@ a,
 .modal_button,
 th,
 td,
-li {
+li,
+span {
   font-family: 'Hack Nerd Font Mono', Hack, sans-serif;
   padding: 0;
   margin: 0;
@@ -65,7 +66,8 @@ a,
 label,
 li,
 .modal_button,
-.button {
+.button,
+span {
   font-size: 1vw;
 }
 
@@ -285,10 +287,6 @@ table tr td label {
   border: 3px solid orange;
 }
 
-.button:hover {
-  box-shadow: 0 2px 4px 0 rgba(255, 165, 0, 0.3), 0 3px 8px 0 rgba(255, 165, 0, 0.7);
-}
-
 .narrow {
   width: 20%;
 }
@@ -301,10 +299,6 @@ table tr td label {
   text-decoration: none;
 }
 
-.tag:hover {
-  box-shadow: 0 2px 4px 0 rgba(255, 165, 0, 0.3), 0 3px 8px 0 rgba(255, 165, 0, 0.7);
-}
-
 .tag_row {}
 
 .tag_box {
@@ -383,7 +377,6 @@ textarea:focus,
 input:hover,
 textarea:hover {
   border: 3px solid orange;
-  box-shadow: 0 2px 4px 0 rgba(255, 165, 0, 0.3), 0 3px 8px 0 rgba(255, 165, 0, 0.7);
   outline: none;
 }
 
@@ -734,6 +727,37 @@ hr {
   border-radius: 9px;
 }
 
+.dropdown {
+  position: relative;
+  display: block;
+  margin-right: 15px;
+  padding: 15px;
+  border-radius: 9px;
+}
+
+.dropdown_content {
+  display: none;
+  position: absolute;
+  min-width: 50px;
+  padding: 15px;
+  z-index: 2;
+}
+
+.dropdown:hover .dropdown_content {
+  display: block;
+  margin-left: -15px;
+  margin-top: 15px;
+  border-radius: 12px;
+}
+
+.dropdown_content form * {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+
+.margin_right {
+  margin-right: 15px;
+}
 
 @media screen and (max-width: 992px) {
   body {
@@ -772,7 +796,8 @@ hr {
   ul li a,
   ol li a,
   .modal_button,
-  .button {
+  .button,
+  span {
     font-size: 2vw;
   }
 

css/dark.css

@@ -13,7 +13,8 @@ h4,
 h5,
 p,
 small,
-label {
+label,
+span {
   color: white;
 }
 
@@ -54,9 +55,9 @@ table tr {
   color: white;
 }
 
-.button:hover {
-  color: black;
-  background-color: white;
+.button:hover,
+.button:hover i {
+  color: orange;
 }
 
 .tag {
@@ -139,6 +140,15 @@ select:-webkit-autofill {
   border: 2px solid orange;
 }
 
+.dropdown {
+  border: 2px solid white;
+}
+
+.dropdown_content {
+  background-color: black;
+  border: 2px solid white;
+}
+
 @media screen and (max-width: 992px) {
   nav {
     border-bottom: none;

css/light.css

@@ -13,7 +13,8 @@ h4,
 h5,
 p,
 small,
-label {
+label,
+span {
   color: black;
 }
 
@@ -54,9 +55,9 @@ table tr {
   color: black;
 }
 
-.button:hover {
-  color: white;
-  background-color: black;
+.button:hover,
+.button:hover * {
+  color: orange;
 }
 
 .tag {
@@ -139,6 +140,15 @@ select:-webkit-autofill {
   border: 2px solid orange;
 }
 
+.dropdown {
+  border: 2px solid black;
+}
+
+.dropdown_content {
+  background-color: white;
+  border: 2px solid black;
+}
+
 @media screen and (max-width: 992px) {
   nav {
     border-bottom: none;