Add news style to main styles and make them responsive
Change-Id: I8322c4580a9a31ba3da77ec801640a286f41542c
diff --git a/dev/scss/main/main.scss b/dev/scss/main/main.scss
index c49ceb1..2cab784 100644
--- a/dev/scss/main/main.scss
+++ b/dev/scss/main/main.scss
@@ -14,6 +14,7 @@
@import "introjs"; // Guided Tour
@import "introjs-ids"; // Guided Tour: IDS specific
@import "oauth"; // OAuth Management styles
+@import "news"; // View for optional news
// @import "tagger"; // Tagger
@import "../util";
diff --git a/dev/scss/main/news.scss b/dev/scss/main/news.scss
new file mode 100644
index 0000000..a714aec
--- /dev/null
+++ b/dev/scss/main/news.scss
@@ -0,0 +1,51 @@
+@charset "utf-8";
+@import "../util";
+
+section#news {
+ background-color: $ids-green-2;
+ mix-blend-mode: soft-light;
+ padding: 1em;
+ padding-right: 2em;
+ border-radius: $standard-border-radius;
+ border-left: 5px solid $ids-green-1;
+
+ dt {
+ float: left;
+ clear: left;
+ width: 15ex;
+ text-align: right;
+ font-weight: bold;
+ }
+
+ dt.maintenance, dd.maintenance > h4 {
+ color: red;
+ }
+
+ dd {
+ margin: 0 1ex 0 16ex;
+ padding: 0 0 0.5em 1em;
+ > p {
+ max-width: 80ex;
+ margin-block-start: 0ex;
+ }
+
+ > h4 {
+ margin-block-start: 0ex;
+ margin-block-end: 0.33ex;
+ }
+ }
+}
+
+@media all and (max-width: 42.5em) {
+ section#news {
+ dt {
+ text-align: left;
+ float: none;
+ width: auto;
+ padding-bottom: .2em;
+ }
+ dd {
+ margin-left: 1em;
+ }
+ }
+}
\ No newline at end of file