templates/weather.tmpl: add alerts section

Initial version.

1 files changed, 55 insertions, 1 deletions

diff --git a/static/peach.css b/static/peach.css
index ab2e643..ac9a780 100644
--- a/static/peach.css
+++ b/static/peach.css
@@ -22,7 +22,7 @@ body {
 .root-container {
     display: flex;
     flex-direction: column;
-    row-gap: 10px;
+    row-gap: 15px;
 }
 
 @media (min-width: 440px)  {
@@ -112,6 +112,60 @@ body {
     color: rgb(0,0,0);
 }
 
+/* Alerts */
+.alerts-container {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    row-gap: 10px;
+}
+
+@media (max-width: 440px)  {
+    .alerts-container {
+	padding: 0 15px;
+    }
+}
+
+.alert-container .alert-header {
+    background-color: rgb(0,0,0);
+    color: rgb(255,255,255);
+    font-weight: 900;
+    padding: 5px 0px 5px 10px;
+}
+
+.alert-container {
+    border-radius: 3px;
+    border: 0.3px solid rgb(0,0,0);
+}
+
+.alert-container .alert-header .event-name {
+    font-size: 1.2em;
+}
+
+.alert-container .alert-body {
+    display: flex;
+    flex-direction: column;
+    padding: 15px 15px 2px 15px;
+}
+
+.alert-container .alert-body p {
+    margin: 0 0 10px 0;
+}
+
+.alert-container .alert-body .severity {
+    font-size: 1em;
+}
+
+.alert-container .alert-body .description {
+    font-size: 0.9em;
+}
+
+.alert-container .alert-body .instruction {
+    font-size: 0.8em;
+    border-top: 1px solid rgb(150,150,150);
+    padding: 10px 0 0 0;
+}
+
 /* BiDaily Timeline */
 .bd-timeline-container {
     display: flex;