Style announcements

src/scss/_structure.scss

@@ -162,6 +162,22 @@
 }
 
 
+.announcement {
+  position: relative;
+  padding: 0 $general-padding $general-padding;
+  text-align: center;
+
+  .close-button {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    font-size: 25px;
+    line-height: 10px;
+    cursor: pointer;
+    text-decoration: none;
+  }
+}
+
 .entry {
   .word {
     display: inline-block;

src/scss/themes/_blue.scss

@@ -182,6 +182,11 @@
     }
   }
 
+  .announcement {
+    background-color: saturate(lighten($footer-color, 20%), 20%);
+    box-shadow: 4px 4px 5px 0px #000000;
+  }
+
   .entry {
     background-color: $entry-color;
     border: 1px solid darken($entry-color, 20);

src/scss/themes/_dark.scss

@@ -182,6 +182,11 @@
     }
   }
 
+  .announcement {
+    background-color: saturate(lighten($footer-color, 20%), 20%);
+    box-shadow: 4px 4px 5px 0px $dark;
+  }
+
   .entry {
     background-color: $entry-color;
     border: 1px solid darken($entry-color, 20);

src/scss/themes/_default.scss

@@ -181,6 +181,11 @@
     }
   }
 
+  .announcement {
+    background-color: saturate(lighten($footer-color, 20%), 20%);
+    box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);
+  }
+
   .entry {
     background-color: $entry-color;
     border: 1px solid darken($entry-color, 20);

src/scss/themes/_grape.scss

@@ -181,6 +181,11 @@
     }
   }
 
+  .announcement {
+    background-color: saturate(lighten($footer-color, 20%), 20%);
+    box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);
+  }
+
   .entry {
     background-color: $entry-color;
     border: 1px solid darken($entry-color, 20);

src/scss/themes/_green.scss

@@ -182,6 +182,11 @@
     }
   }
 
+  .announcement {
+    background-color: saturate(lighten($footer-color, 20%), 20%);
+    box-shadow: 4px 4px 5px 0px #000000;
+  }
+
   .entry {
     background-color: $entry-color;
     border: 1px solid darken($entry-color, 20);

src/scss/themes/_light.scss

@@ -181,6 +181,11 @@
     }
   }
 
+  .announcement {
+    background-color: saturate(lighten($footer-color, 20%), 20%);
+    box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);
+  }
+
   .entry {
     background-color: $entry-color;
     border: 1px solid darken($entry-color, 20);

src/scss/themes/_mint.scss

@@ -181,6 +181,11 @@
     }
   }
 
+  .announcement {
+    background-color: saturate(lighten($footer-color, 20%), 20%);
+    box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);
+  }
+
   .entry {
     background-color: $entry-color;
     border: 1px solid darken($entry-color, 20);

src/scss/themes/_red.scss

@@ -182,6 +182,11 @@
     }
   }
 
+  .announcement {
+    background-color: saturate(lighten($footer-color, 20%), 20%);
+    box-shadow: 4px 4px 5px 0px #000000;
+  }
+
   .entry {
     background-color: $entry-color;
     border: 1px solid darken($entry-color, 20);

src/scss/themes/_royal.scss

@@ -182,6 +182,11 @@
     }
   }
 
+  .announcement {
+    background-color: saturate(lighten($footer-color, 20%), 20%);
+    box-shadow: 4px 4px 5px 0px #000000;
+  }
+
   .entry {
     background-color: $entry-color;
     border: 1px solid darken($entry-color, 20);

src/scss/themes/_yellow.scss

@@ -182,6 +182,11 @@
     }
   }
 
+  .announcement {
+    background-color: saturate(lighten($footer-color, 20%), 20%);
+    box-shadow: 4px 4px 5px 0px #000000;
+  }
+
   .entry {
     background-color: $entry-color;
     border: 1px solid darken($entry-color, 20);