From e431dacd1def0df953ab01c86e1dd1a3915151dd Mon Sep 17 00:00:00 2001 From: Robbie Antenesse Date: Thu, 6 Jun 2019 13:17:41 -0600 Subject: [PATCH] Style announcements --- src/scss/_structure.scss | 16 ++++++++++++++++ src/scss/themes/_blue.scss | 5 +++++ src/scss/themes/_dark.scss | 5 +++++ src/scss/themes/_default.scss | 5 +++++ src/scss/themes/_grape.scss | 5 +++++ src/scss/themes/_green.scss | 5 +++++ src/scss/themes/_light.scss | 5 +++++ src/scss/themes/_mint.scss | 5 +++++ src/scss/themes/_red.scss | 5 +++++ src/scss/themes/_royal.scss | 5 +++++ src/scss/themes/_yellow.scss | 5 +++++ 11 files changed, 66 insertions(+) diff --git a/src/scss/_structure.scss b/src/scss/_structure.scss index dad5600..79e9645 100644 --- a/src/scss/_structure.scss +++ b/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; diff --git a/src/scss/themes/_blue.scss b/src/scss/themes/_blue.scss index fe6d836..3c57bc8 100644 --- a/src/scss/themes/_blue.scss +++ b/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); diff --git a/src/scss/themes/_dark.scss b/src/scss/themes/_dark.scss index 0e1c4c1..31c0efc 100644 --- a/src/scss/themes/_dark.scss +++ b/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); diff --git a/src/scss/themes/_default.scss b/src/scss/themes/_default.scss index 6a6512e..02e8484 100644 --- a/src/scss/themes/_default.scss +++ b/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); diff --git a/src/scss/themes/_grape.scss b/src/scss/themes/_grape.scss index ae122bf..0d114f8 100644 --- a/src/scss/themes/_grape.scss +++ b/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); diff --git a/src/scss/themes/_green.scss b/src/scss/themes/_green.scss index 73b129b..d368f22 100644 --- a/src/scss/themes/_green.scss +++ b/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); diff --git a/src/scss/themes/_light.scss b/src/scss/themes/_light.scss index bc0ea14..c211517 100644 --- a/src/scss/themes/_light.scss +++ b/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); diff --git a/src/scss/themes/_mint.scss b/src/scss/themes/_mint.scss index 5d902b0..24a835b 100644 --- a/src/scss/themes/_mint.scss +++ b/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); diff --git a/src/scss/themes/_red.scss b/src/scss/themes/_red.scss index 3fed93d..623c61c 100644 --- a/src/scss/themes/_red.scss +++ b/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); diff --git a/src/scss/themes/_royal.scss b/src/scss/themes/_royal.scss index 6cf3623..fda3cc5 100644 --- a/src/scss/themes/_royal.scss +++ b/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); diff --git a/src/scss/themes/_yellow.scss b/src/scss/themes/_yellow.scss index 4609e70..6a3d5c2 100644 --- a/src/scss/themes/_yellow.scss +++ b/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);