added back content_block headerButtonGroup due to backwards compatibility and modified header.html.ep to fit changes
diff --git a/dev/scss/base/base.scss b/dev/scss/base/base.scss
index cfe10b5..7750665 100644
--- a/dev/scss/base/base.scss
+++ b/dev/scss/base/base.scss
@@ -34,16 +34,17 @@
fill: $dark-grey;
}
-html {
- height: 100vh;
-}
+// html {
+// height: 100vh;
+// }
body {
- position: relative;
min-height: 100vh;
font-size: 12pt;
margin: 0;
padding: 0;
+ display: flex;
+ flex-direction: column;
}
a {
@@ -99,6 +100,8 @@
border-left: 5px solid $ids-blue-1;
background-color: $ids-blue-2;
color: $ids-blue-1;
+ -webkit-mix-blend-mode: normal; // Safari
+ mix-blend-mode: soft-light;
&.bug,
&.missing,
diff --git a/dev/scss/base/buttongroup.scss b/dev/scss/base/buttongroup.scss
index 1937e53..01e2246 100644
--- a/dev/scss/base/buttongroup.scss
+++ b/dev/scss/base/buttongroup.scss
@@ -110,6 +110,7 @@
&.minimize::after {
content: $fa-minimize;
+ color: $dark-grey;
}
&.plugin::after {
diff --git a/dev/scss/base/icons.scss b/dev/scss/base/icons.scss
index ae4974a..3d758c0 100644
--- a/dev/scss/base/icons.scss
+++ b/dev/scss/base/icons.scss
@@ -2,6 +2,7 @@
* Font Awesome symbol table.
*/
+$fa-user: "\f007";
$fa-bars: "\f0c9";
$fa-extlink: "\f08e";
$fa-up: "\f0d8";
diff --git a/dev/scss/footer/footer.scss b/dev/scss/footer/footer.scss
index 97cfce8..59ad731 100644
--- a/dev/scss/footer/footer.scss
+++ b/dev/scss/footer/footer.scss
@@ -7,9 +7,9 @@
*/
footer {
background-color: $dark-grey;
- position: absolute;
-
- bottom: 0;
+ // position: absolute;
+ // bottom: 0;
+ margin-top: auto;
padding-bottom: 2px;
font-size: 70%;
width: 100%;
@@ -80,6 +80,6 @@
}
aside.active ~ footer {
- padding-left: $logo-left-distance;
+ // padding-left: $logo-left-distance;
transition: all .3s ease-in-out;
}
diff --git a/dev/scss/header/header.scss b/dev/scss/header/header.scss
index 10d1256..b640531 100644
--- a/dev/scss/header/header.scss
+++ b/dev/scss/header/header.scss
@@ -15,10 +15,176 @@
@include box-sizing-box();
position: relative;
background-color: $light-green;
- padding: $base-padding 0 0 $base-padding;
+ // padding: $base-padding 0 0 $base-padding;
+ padding-top: 4rem;
font-size: 10pt;
color: $nearly-white;
+ .navbar {
+ width: 100%;
+ height: 3rem;
+ background-color: $dark-green;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: end;
+ // overflow: hidden;
+ position: fixed;
+ top: 0;
+ z-index: 999;
+
+ &-group {
+
+ & fieldset.fieldset-login {
+ display: inline;
+ margin-right: 0;
+ padding: 0;
+ min-inline-size: unset;
+ border: unset;
+
+ & form.login {
+ display: flex;
+ align-items: center;
+
+ & input[type=text],
+ & input[type=password] {
+ @include input-field;
+ margin-right: 8px;
+ height: 2rem;
+ }
+
+ & button.btn-login {
+ width: 3rem;
+ height: 3rem;
+ background-color: $dark-green;
+ color: $nearly-white;
+ // padding: .75rem 1rem;
+ font-size: 180%;
+ border: none;
+ border-color: unset;
+ border-radius: 0;
+ text-shadow: none;
+ font-weight: normal;
+ top: unset;
+ transition: all .2s ease-in-out;
+ -o-transition: all .2s ease-in-out;
+ -moz-transition: all .2s ease-in-out;
+ -webkit-transition: all .2s ease-in-out;
+
+ &::after {
+ content: $fa-login;
+ }
+ }
+ & button.btn-login:hover {
+ background-color: $middle-green;
+ }
+ }
+ }
+ }
+
+ .dropdown {
+ display: flex;
+ align-items: center;
+ margin-right: 4rem;
+ position: relative;
+
+ &:hover .dropdown-content {
+ display: block;
+ }
+
+ &:hover .dropdown-btn {
+ background-color: $middle-green;
+ }
+
+ &-btn {
+ height: 3rem;
+ padding: .6rem .9rem;
+ font-size: 180% !important;
+ color: $nearly-white;
+ transition: all .2s ease-in-out;
+ -o-transition: all .2s ease-in-out;
+ -moz-transition: all .2s ease-in-out;
+ -webkit-transition: all .2s ease-in-out;
+ cursor: pointer;
+
+ &.profile::before {
+ @include icon-font;
+ content: $fa-user;
+ }
+
+ h3.user-name {
+ padding-right: 2px;
+ font-size: 85%;
+ display: inline;
+ }
+ }
+
+ &-content {
+ display: none;
+ width: 100%;
+ margin-top: 3rem;
+ padding: 0;
+ background-color: $middle-green;
+ list-style: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 999;
+ }
+
+ &-item {
+ display: block;
+ padding: .75rem;
+ font-size: 120%;
+ // font-weight: bold;
+ color: $nearly-white;
+ transition: all .2s ease-in-out;
+ -o-transition: all .2s ease-in-out;
+ -moz-transition: all .2s ease-in-out;
+ -webkit-transition: all .2s ease-in-out;
+
+ &:hover {
+ background-color: $light-green;
+ }
+ }
+ }
+
+ // &-item {
+ // height: 3rem;
+ // padding: .6rem .9rem;
+ // font-size: 180% !important;
+ // transition: all .2s ease-in-out;
+ // -o-transition: all .2s ease-in-out;
+ // -moz-transition: all .2s ease-in-out;
+ // -webkit-transition: all .2s ease-in-out;
+
+ // &:hover {
+ // background-color: $middle-green;
+ // }
+
+ // &.profile {
+ // width: 3rem;
+ // height: 3rem;
+ // padding: .6rem .9rem;
+
+ // &:hover {
+ // background-color: $middle-green;
+ // }
+ // }
+
+ // &.logout {
+ // width: 3rem;
+ // height: 3rem;
+ // margin-left: 1rem;
+ // padding: .6rem .9rem;
+
+ // &:hover {
+ // background-color: $middle-green;
+ // }
+ // }
+ // }
+ }
+
span.select {
display: inline-block;
cursor: pointer;
@@ -63,9 +229,9 @@
form {
position: relative;
display: block;
- padding-left: $logo-left-distance;
+ // padding-left: $logo-left-distance;
min-height: 2.7em;
- margin: 0px;
+ margin: 0 4rem;
}
input {
@@ -91,7 +257,8 @@
top: 0;
right: 0;
margin-right: 0;
- width: math.div($standard-margin,2);
+ width: 20px;
+ // width: math.div($standard-margin,2);
background-color: $dark-green;
text-align: center;
height: 100%;
@@ -117,7 +284,6 @@
@include icon-font;
}
- // Icons for buttons
> a.tutorial::after {
content: $fa-tutorial;
}
diff --git a/dev/scss/header/searchbar.scss b/dev/scss/header/searchbar.scss
index b082050..48f8bc5 100644
--- a/dev/scss/header/searchbar.scss
+++ b/dev/scss/header/searchbar.scss
@@ -10,6 +10,7 @@
margin-bottom: 3px;
width: 100%;
margin: 0;
+ border-radius: 6px;
&::-webkit-search-cancel-button {
display: none;
@@ -28,13 +29,14 @@
position: relative;
width: 100%;
padding: 0;
- padding-right: $right-distance + $button-width;
+ // padding-right: $right-distance + $button-width;
margin-top: 7pt;
button[type=submit] {
position: absolute;
padding: 0;
- right: $right-distance;
+ // right: $right-distance;
+ right: 0;
&:not(.loading)::after {
content: $fa-search;
diff --git a/dev/scss/main/intro.scss b/dev/scss/main/intro.scss
index 8f83175..80130f0 100644
--- a/dev/scss/main/intro.scss
+++ b/dev/scss/main/intro.scss
@@ -5,6 +5,12 @@
*/
div.intro {
+ &-container {
+ margin-top: 3rem;
+ display: flex;
+ gap: 4rem;
+ }
+
// Visited links
a:visited {
color: $darkest-orange
@@ -20,6 +26,6 @@
}
}
-aside.active ~ main div.intro {
- margin-left: $logo-left-distance - $standard-margin + $base-padding;
-}
\ No newline at end of file
+// aside.active ~ main div.intro {
+// margin-left: $logo-left-distance - $standard-margin + $base-padding;
+// }
\ No newline at end of file
diff --git a/dev/scss/main/logos.scss b/dev/scss/main/logos.scss
index 8388160..3a63c24 100644
--- a/dev/scss/main/logos.scss
+++ b/dev/scss/main/logos.scss
@@ -40,7 +40,8 @@
h1 {
position: absolute;
margin: 0;
- margin-left: 10pt;
+ // margin-left: 10pt;
+ margin-left: 3rem;
left: 0;
top: 0;
width: 7.8em;
diff --git a/dev/scss/main/main.scss b/dev/scss/main/main.scss
index e8c062d..910cd0a 100644
--- a/dev/scss/main/main.scss
+++ b/dev/scss/main/main.scss
@@ -23,12 +23,13 @@
main {
+ padding: 0 4rem;
padding-bottom: $footer-height + math.div($standard-margin,2);
- margin: {
- left: $standard-margin;
- right: math.div($standard-margin,2);
- }
+ // margin: {
+ // left: $standard-margin;
+ // right: math.div($standard-margin,2);
+ // }
&.embedded {
margin: {
diff --git a/dev/scss/main/news.scss b/dev/scss/main/news.scss
index 41b5b44..7cdb669 100644
--- a/dev/scss/main/news.scss
+++ b/dev/scss/main/news.scss
@@ -3,12 +3,13 @@
section#news {
background-color: $ids-green-2;
- -webkit-mix-blend-mode: normal; // Safari
mix-blend-mode: soft-light;
padding: 1em;
padding-right: 2em;
border-radius: $standard-border-radius;
border-left: 5px solid $ids-green-1;
+ height: 20rem;
+ overflow-y: scroll;
dt {
float: left;
@@ -51,4 +52,4 @@
margin-left: 1em;
}
}
-}
\ No newline at end of file
+}
diff --git a/dev/scss/sidebar/sidebar.scss b/dev/scss/sidebar/sidebar.scss
index da6541f..9e52ab2 100644
--- a/dev/scss/sidebar/sidebar.scss
+++ b/dev/scss/sidebar/sidebar.scss
@@ -3,11 +3,12 @@
@import "../util";
aside {
+ display: none;
background-color: $dark-green;
color: $nearly-white;
width: $logo-left-distance;
position: fixed;
- display: block;
+ // display: block;
transition: all .3s ease-in-out;
outline: none;
font-size: 10pt;
@@ -152,6 +153,7 @@
width: 100%;
}
+ // search form
> form > div {
position: relative;
width: 100%;