UI rework by Uyen
2024-11-18
- Delete unnecessary lines from .gitignore file.
- Fix sidebar to not be visible (on non-auth instances), if empty.
- Fix display/behaviour of annotation assistant bar to move correctly, when user types into the searchbar and clicks on the sidebar or anywhere else afterwards.
- Restore unlinted init.js file from patch 16 and add back changes for sidebar, top navbar, etc.
2024-10-30
- Fix overlap of documentation pop-up window.
- Change results area to not being shifted when sidebar is open.
- Add and adjust code for tour links (changed by Helge).
- Fix burger menu behaviour when clicking on tour link.
- Delete news and announcements template files from repository.
- Delete code snippets and files concerning news page.
- Change top navbar to non-sticky.
- Add and adjust code for top navbar items to be configurable (changed by Nils).
2024-10-09
- Add variables for element sizes and spacings.
- Remove static class for shifting the sidebar (fix position for annotation assistant bar on pages with the sidebar open by default).
- Fix shifted view on documentation page on small screens.
- Add check for burger icon existence.
- Add and style legend for login area.
- Delete commented-out code snippets on the go.
- Add new overall line-height.
- Add new logo addon styles back from patch set 12.
- Add back missing class attribute of hint-element.
2024-10-01
- Revise login area to be shown in a dropdown box on hovering the login icon.
- Fix login box focus, when user clicks on auto-completion.
- Add logout icon next to sign out text.
- Create new files for news and announcements (controller, templates) and fix news link.
- Fix visibility of news link for logged in and logged out users.
- Fix empty sidebar issue (make sidebar invisible, if empty).
- Fix animation issue, when the sidebar slides out (blank space, content shift).
- Fix relocation issue of annotation assistant bar.
- Fix navbar to not scroll up initially, when the user clicks on a hash link.
- Fix content display in tour window (title overlapped with text).
- Add tour link to the top navbar.
- Fix burger menu behaviour (lock navbar, when burger menu is active).
- Edit burger menu visibility, when the user clicks on tour link on small screens.
- Add media queries for navbar/dropdown.
- Fix small design issues.
2024-09-11
- Revise sidebar, searchbar, and content slide behaviour.
- Add and fix media queries for sidebar, content, and doc navigation.
- Fix news link and comments.
- Fix small design issues.
2024-08-05
- Fix sidebar visibility on starting page.
- Change slide-in state on start.
2024-07-15
- Improve appearance of title-addon on logo.
- Create and style new item on top navbar for 'News'.
- Change settings link in logout.html.ep to dynamic link.
2024-04-29
- Add an indicator for user login, and some minor design changes.
- Add back content_block headerButtonGroup due to backwards
compatibility and modify header.html.ep to fit changes.
- Correct color of minimize button for snippets to
nearly-white, and add media query for border-radius of
the search bar.
- Delete helper class get_user_name and set user_handle
instead to get the user name.
- Add scroll functionality for navbar: hide on scroll down,
show on scroll up.
- Create burger menu and add responsive styles for navbar,
optimize element positions in header.
- Add and style registration link to fit in login area,
change navbar size and input fields, improve positionings of
logo and icons, fix animation of navbar when scrolling on
small devices.
Change-Id: Ie7803aeafb6683d18de51f8c918fb7b0dd308fcc
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/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/base/lengths.scss b/dev/scss/base/lengths.scss
index c4a7e5a..613b8c6 100644
--- a/dev/scss/base/lengths.scss
+++ b/dev/scss/base/lengths.scss
@@ -4,15 +4,16 @@
* Defined lengths and sizes for the
* Kalamar layout.
*/
-$standard-border-radius: 6px;
-$item-padding: 3pt 6pt;
-$button-width: 30px;
-$base-padding: 8px;
-$border-size: 2px;
-$result-border-size: 1px;
-$left-width: 176px;
-$border-size: 2px;
-$left-distance: $left-width + ($border-size * 2);
+$standard-border-radius: 6px;
+$item-padding: 3pt 6pt;
+$button-width: 30px;
+$base-padding: 8px;
+$border-size: 2px;
+$result-border-size: 1px;
+$left-width: 176px;
+$border-size: 2px;
+$left-distance: $left-width + ($border-size * 2);
+$standard-size-and-spacing: 4rem;
/**
* Margins
diff --git a/dev/scss/footer/footer.scss b/dev/scss/footer/footer.scss
index 1a5b312..0d85a78 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%;
@@ -19,6 +19,10 @@
align-items: center;
height: $footer-height;
+ &.shifted {
+ padding-left: $logo-left-distance;
+ }
+
nav {
margin-left: $button-width;
padding: $item-padding;
@@ -94,6 +98,6 @@
}
aside.active:not(.off) ~ 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 41b5cc4..ccd13bd 100644
--- a/dev/scss/header/header.scss
+++ b/dev/scss/header/header.scss
@@ -12,14 +12,289 @@
@import "state"; // State
@import "panel"; // Panel
+.navbar {
+ width: 100%;
+ height: $standard-size-and-spacing;
+ background-color: $dark-green;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: end;
+ // overflow: hidden;
+ // position: fixed;
+ position: absolute;
+ top: 0;
+ z-index: 999;
+ transition: top .3s ease-in-out;
+ -o-transition: top .3s ease-in-out;
+ -moz-transition: top .3s ease-in-out;
+ -webkit-transition: top .3s ease-in-out;
+
+ &-group {
+ display: flex;
+ align-items: center;
+
+ h3.nav-link {
+ height: $standard-size-and-spacing;
+ font-size: 1rem;
+ 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;
+ }
+
+ a {
+ display: block;
+ padding: 1.5rem 1rem;
+ color: $nearly-white;
+ }
+ }
+
+ // fieldset.fieldset-login {
+ // display: flex;
+ // flex-direction: column;
+ // margin-right: 4rem;
+ // 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: 1.5rem;
+ // }
+
+ // button.btn-login {
+ // // width: 3rem;
+ // // height: 3rem;
+ // // background-color: $dark-green;
+ // background-color: unset;
+ // 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;
+ // }
+
+ // &:hover {
+ // // background-color: $middle-green;
+ // color: $dark-orange;
+ // }
+ // }
+ // }
+
+ // p {
+ // margin: 0;
+ // font-size: .7rem;
+ // color: $nearly-white;
+
+ // a {
+ // color: $dark-orange;
+
+ // &:hover {
+ // color: $middle-orange;
+ // }
+ // }
+ // }
+ // }
+ }
+
+ .dropdown {
+ display: flex;
+ align-items: center;
+ margin-right: $standard-size-and-spacing;
+ position: relative;
+
+ &:hover .dropdown-content,
+ &:focus-within .dropdown-content {
+ display: block;
+ }
+
+ &:hover .dropdown-btn,
+ &:focus-within .dropdown-btn {
+ color: $nearly-white;
+ background-color: $middle-green;
+ }
+
+ &-btn {
+ height: $standard-size-and-spacing;
+ padding: 1.25rem 1rem;
+ 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;
+
+ &.login::before {
+ @include icon-font;
+ content: $fa-login;
+ font-size: 150%;
+ }
+
+ &.profile::before {
+ @include icon-font;
+ content: $fa-user;
+ font-size: 150%;
+ }
+
+ h3.user-name {
+ padding-right: 2px;
+ // font-size: 85%;
+ font-size: 120%;
+ display: inline;
+ }
+ }
+
+ &-content {
+ display: none;
+ width: fit-content;
+ margin-top: $standard-size-and-spacing;
+ padding: 0;
+ background-color: $middle-green;
+ position: absolute;
+ top: 0;
+ z-index: 999;
+
+ &--left {
+ left: 0;
+ }
+
+ &--right {
+ right: 0;
+ padding: 1rem;
+ }
+
+ form.login {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ legend {
+ padding-bottom: $base-padding;
+ color: $nearly-white;
+ }
+
+ input[type=text],
+ input[type=password] {
+ @include input-field;
+ margin-bottom: 8px;
+ height: 2rem;
+ }
+
+ button.btn-login {
+ width: 100%;
+ height: 2rem;
+ margin-bottom: 1rem;
+ background-color: $dark-green;
+ color: $nearly-white;
+ font-size: 120%;
+ 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;
+ }
+
+ &:hover {
+ // color: $dark-orange;
+ background-color: $dark-orange;
+ }
+ }
+ }
+
+ p {
+ margin: 0;
+ font-size: .7rem;
+ color: $nearly-white;
+
+ a {
+ color: $dark-orange;
+
+ &:hover {
+ color: $middle-orange;
+ }
+ }
+ }
+ }
+
+ &-item {
+ display: block;
+ padding: .75rem;
+ font-size: 1rem;
+ 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 {
+ color: $nearly-white;
+ background-color: $light-green;
+ }
+
+ &.logout::before {
+ @include icon-font;
+ content: $fa-logout;
+ font-size: 1rem;
+ }
+
+ span {
+ display: inline;
+ }
+ }
+ }
+
+ .burger-icon {
+ display: none;
+
+ &::after {
+ @include icon-font;
+ content: $fa-bars;
+ }
+ }
+}
+
header {
@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: $standard-size-and-spacing;
font-size: 10pt;
color: $nearly-white;
-
+
+ &.shifted {
+ padding-left: $logo-left-distance;
+ }
+
span.select {
display: inline-block;
cursor: pointer;
@@ -64,9 +339,12 @@
form {
position: relative;
display: block;
- padding-left: $logo-left-distance;
+ // padding-left: $logo-left-distance;
min-height: 2.7em;
- margin: 0px;
+
+ &#searchform {
+ margin: 0 $standard-size-and-spacing;
+ }
}
input {
@@ -92,7 +370,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%;
@@ -118,7 +397,6 @@
@include icon-font;
}
- // Icons for buttons
> a.tutorial::after {
content: $fa-tutorial;
}
diff --git a/dev/scss/header/hint.scss b/dev/scss/header/hint.scss
index 68222b7..df85e25 100644
--- a/dev/scss/header/hint.scss
+++ b/dev/scss/header/hint.scss
@@ -4,6 +4,13 @@
/**
* Rules for the Kalamar hint helper.
*/
+
+#hint {
+ &.shifted {
+ left: $logo-left-distance;
+ }
+}
+
ul.menu.hint {
display: inline-block;
white-space: normal;
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/header/vc.scss b/dev/scss/header/vc.scss
index edd83e9..9057cad 100644
--- a/dev/scss/header/vc.scss
+++ b/dev/scss/header/vc.scss
@@ -14,6 +14,12 @@
.builder {
position: initial;
+
+ + .action {
+ .minimize::after {
+ color: $dark-grey !important;
+ }
+ }
}
.docGroup {
diff --git a/dev/scss/main/announcements.scss b/dev/scss/main/announcements.scss
new file mode 100644
index 0000000..5db0e27
--- /dev/null
+++ b/dev/scss/main/announcements.scss
@@ -0,0 +1,66 @@
+@charset "utf-8";
+@import "../util";
+
+section#announcements {
+ 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;
+ height: 20rem;
+ overflow-y: scroll;
+ font-size: .8rem;
+ width: 100%;
+
+ h3 {
+ font-size: 1rem;
+ }
+
+ dt {
+ // float: left;
+ // clear: left;
+ // width: 15ex;
+ // text-align: right;
+ text-align: left;
+ font-weight: bold;
+ float: none;
+ width: auto;
+ padding-bottom: .2em;
+ }
+
+ dd.maintenance > h4::after {
+ @include icon-font;
+ color: $ids-pink-1;
+ content: " " + $fa-warn;
+ }
+
+ dd {
+ // margin: 0 1ex 0 16ex;
+ margin-left: 1em;
+ 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#announcements {
+ dt {
+ // text-align: left;
+ // float: none;
+ // width: auto;
+ // padding-bottom: .2em;
+ }
+ dd {
+ // margin-left: 1em;
+ }
+ }
+}
diff --git a/dev/scss/main/intro.scss b/dev/scss/main/intro.scss
index e3b4d63..f667759 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: $standard-size-and-spacing;
+ }
+
// Visited links
a:visited {
color: $darkest-orange
@@ -20,6 +26,17 @@
}
}
-aside.active:not(.off) ~ main div.intro {
- margin-left: $logo-left-distance - $standard-margin + $base-padding;
-}
\ No newline at end of file
+@media all and (max-width: 42.5em) {
+ div.intro {
+ &-container {
+ margin-top: 1rem;
+ flex-direction: column;
+ gap: 1rem;
+ }
+ }
+}
+
+// aside.active:not(.off) ~ main div.intro {
+// margin-left: $logo-left-distance - $standard-margin + $base-padding;
+// }
+
diff --git a/dev/scss/main/introjs.scss b/dev/scss/main/introjs.scss
index 1e8ffe7..5cc4013 100644
--- a/dev/scss/main/introjs.scss
+++ b/dev/scss/main/introjs.scss
@@ -198,7 +198,9 @@
padding: 0;
font-weight: 700;
float: left;
- line-height: 32px; }
+ line-height: 32px;
+ top: 1rem;
+}
.introjs-tooltip-header {
padding-left: 20px;
diff --git a/dev/scss/main/logos.scss b/dev/scss/main/logos.scss
index 9b26013..eaa309d 100644
--- a/dev/scss/main/logos.scss
+++ b/dev/scss/main/logos.scss
@@ -9,17 +9,17 @@
content: "" !important;
}
- div.logoaddon {
- position:absolute;
- display: block;
- font-size: 45%;
- right: 5pt;
- bottom: 2.5pt;
- text-align:right;
- color: $nearly-white;
- padding: 3pt;
- text-shadow: 1pt 1pt 0 $light-green, -1pt -1pt 0 $light-green, -1pt 1pt 0 $light-green, 1pt -1pt 0 $light-green;
- }
+// div.logoaddon {
+// position:absolute;
+// display: block;
+// font-size: 45%;
+// right: 5pt;
+// bottom: 2.5pt;
+// text-align:right;
+// color: $nearly-white;
+// padding: 3pt;
+// text-shadow: 1pt 1pt 0 $light-green, -1pt -1pt 0 $light-green, -1pt 1pt 0 $light-green, 1pt -1pt 0 $light-green;
+// }
> * {
background: {
@@ -31,6 +31,26 @@
> span {
@include blind;
}
+
+ > div.logoaddon {
+ position:absolute;
+ display: block;
+ font-size: 10pt;
+ right: -1rem;
+ top: 1.7rem;
+ // bottom: 4pt;
+ // text-align:right;
+ color: $nearly-white;
+ // padding: 3pt;
+ text-shadow: 1pt 1pt 0 $light-green, -1pt -1pt 0 $light-green, -1pt 1pt 0 $light-green, 1pt -1pt 0 $light-green;
+
+ // Values from new logo:
+ // font-size: 45%;
+ // right: 5pt;
+ // bottom: 2.5pt;
+ // text-align: right;
+ // padding: 3pt;
+ }
}
}
@@ -44,9 +64,10 @@
a.logo > h1 {
position: absolute;
margin: 0;
- margin-left: 10pt;
+ // margin-left: 10pt;
+ margin-left: 3rem;
left: 0;
- top: 0;
+ top: 50%;
width: 7.8em;
height: 2.4em;
z-index: 105;
@@ -54,11 +75,15 @@
size: 78% !important;
image: url('#{$img-path}/korap-logo.svg');
}
+ transform: translateY(-50%);
+ -o-transform: translateY(-50%);
+ -moz-transform: translateY(-50%);
+ -webkit-transform: translateY(-50%);
}
-aside.active ~ header h1 {
- position: fixed;
-}
+// aside.active ~ header h1 {
+// position: fixed;
+// }
#overview {
diff --git a/dev/scss/main/main.scss b/dev/scss/main/main.scss
index 78bbad4..bb64ac0 100644
--- a/dev/scss/main/main.scss
+++ b/dev/scss/main/main.scss
@@ -1,38 +1,43 @@
@use 'sass:math';
-@import "highlight"; // JSON highlighting
-@import "kwic"; // Kwic view information
-@import "logos"; // Logo images
-@import "matchinfo"; // Match table
-@import "pagination"; // Pagination
-@import "query"; // View query
-@import "resultinfo"; // Information on results
-@import "tutorial"; // Embedded and non-embedded tutorial
-@import "koralquery"; // KoralQuery
-@import "alertify"; // Styling alerts
-@import "intro"; // Intro page
-@import "panel"; // Base panel system
-@import "introjs"; // Guided Tour
-@import "introjs-ids"; // Guided Tour: IDS specific
-@import "oauth"; // OAuth Management styles
-@import "news"; // View for optional news
-@import "plugin"; // Rules for embedded plugins
-@import "marketplace"; // Plugin Marketplace styles
+@import 'highlight'; // JSON highlighting
+@import 'kwic'; // Kwic view information
+@import 'logos'; // Logo images
+@import 'matchinfo'; // Match table
+@import 'pagination'; // Pagination
+@import 'query'; // View query
+@import 'resultinfo'; // Information on results
+@import 'tutorial'; // Embedded and non-embedded tutorial
+@import 'koralquery'; // KoralQuery
+@import 'alertify'; // Styling alerts
+@import 'intro'; // Intro page
+@import 'panel'; // Base panel system
+@import 'introjs'; // Guided Tour
+@import 'introjs-ids'; // Guided Tour: IDS specific
+@import 'oauth'; // OAuth Management styles
+@import 'announcements'; // Styling for announcements
+@import 'news'; // View for optional news
+@import 'plugin'; // Rules for embedded plugins
+@import 'marketplace'; // Plugin Marketplace styles
// @import "tagger"; // Tagger
-@import "../util";
-
+@import '../util';
main {
- padding-bottom: $footer-height + math.div($standard-margin,2);
+ padding: 0 $standard-size-and-spacing;
+ 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);
+ // }
+
+ &.shifted {
+ padding-left: calc($standard-size-and-spacing + $logo-left-distance);
}
&.embedded {
margin: {
- left: 14px;
+ left: 14px;
right: 14px;
}
}
@@ -45,27 +50,27 @@
}
h2#page-top {
- margin-top: 0;
+ margin-top: 0;
padding-top: 1em;
}
- &.page {
- margin-left: $logo-left-distance + 15px;
- p,
- li,
- dd,
- dt {
- code {
- background-color: $ids-grey-2;
- color: $ids-grey-1;
- padding: 0 .5em;
- border-radius: $standard-border-radius;
- }
- }
- }
+ // &.page {
+ // margin-left: $logo-left-distance + 15px;
+ // p,
+ // li,
+ // dd,
+ // dt {
+ // code {
+ // background-color: $ids-grey-2;
+ // color: $ids-grey-1;
+ // padding: 0 .5em;
+ // border-radius: $standard-border-radius;
+ // }
+ // }
+ // }
p.hint {
- margin: 0 auto;
+ margin: 0 auto;
text-align: center;
}
}
diff --git a/dev/scss/main/news.scss b/dev/scss/main/news.scss
index 41b5b44..c1c0911 100644
--- a/dev/scss/main/news.scss
+++ b/dev/scss/main/news.scss
@@ -2,20 +2,22 @@
@import "../util";
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;
+ margin: 2rem 0;
+
+ h3 {
+ font-size: 1rem;
+ }
dt {
- float: left;
- clear: left;
- width: 15ex;
- text-align: right;
+ // float: left;
+ // clear: left;
+ // width: 15ex;
+ // text-align: right;
+ text-align: left;
font-weight: bold;
+ float: none;
+ width: auto;
+ padding-bottom: .2em;
}
dd.maintenance > h4::after {
@@ -25,14 +27,15 @@
}
dd {
- margin: 0 1ex 0 16ex;
+ // margin: 0 1ex 0 16ex;
+ margin-left: 1em;
padding: 0 0 0.5em 1em;
> p {
max-width: 80ex;
margin-block-start: 0ex;
}
- > h4 {
+ > h4 {
margin-block-start: 0ex;
margin-block-end: 0.33ex;
}
@@ -42,13 +45,13 @@
@media all and (max-width: 42.5em) {
section#news {
dt {
- text-align: left;
- float: none;
- width: auto;
- padding-bottom: .2em;
+ // text-align: left;
+ // float: none;
+ // width: auto;
+ // padding-bottom: .2em;
}
dd {
- margin-left: 1em;
+ // margin-left: 1em;
}
}
-}
\ No newline at end of file
+}
diff --git a/dev/scss/media.scss b/dev/scss/media.scss
index 88738a9..6ff91e7 100644
--- a/dev/scss/media.scss
+++ b/dev/scss/media.scss
@@ -21,16 +21,148 @@
}
header {
- padding-right: 8px;
+ padding-top: 3rem;
+ // padding-right: 8px;
+
+ &.shifted {
+ padding-left: 0;
+ }
}
header form {
+ margin: 1.5rem 1rem;
padding-left: 0;
- padding-top: 33px;
+ // padding-top: 33px;
+
+ &#searchform {
+ margin: 2.5rem 1rem 0 1rem;
+ }
+ }
+
+ .navbar {
+ *:not(:first-child) {
+ display: none;
+ }
+
+ &-group {
+ h3.nav-link {
+ height: 2rem;
+
+ a {
+ padding: .75rem !important;
+ }
+ }
+ }
+
+ .burger-icon {
+ position: relative;
+ display: block !important;
+ width: $standard-size-and-spacing;
+ height: $standard-size-and-spacing;
+ font-size: 1.8rem;
+ color: $nearly-white;
+
+ &::after {
+ position: absolute;
+ top: 2rem;
+ left: 2rem;
+ transform: translate(-50%, -50%);
+ -o-transform: translate(-50%, -50%);
+ -moz-transform: translate(-50%, -50%);
+ -webkit-transform: translate(-50%, -50%);
+ }
+ }
+
+ &.show .burger-icon {
+ position: absolute;
+ top: 0;
+ right: 0;
+ background-color: $middle-green;
+ }
+
+ &.show * {
+ display: block;
+ }
+
+ &-group {
+ margin-top: $standard-size-and-spacing;
+ width: 100%;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ background-color: $middle-green;
+
+ fieldset.fieldset-login {
+ display: block !important;
+ margin-right: 0 !important;
+ padding: 1rem;
+
+ form.login {
+ align-items: normal !important;
+ flex-direction: column;
+ gap: 8px;
+
+ input[type=text],
+ input[type=password] {
+ @include input-field;
+ margin-right: 0 !important;
+ }
+
+ button.btn-login {
+ width: 100% !important;
+ align-self: center;
+ background-color: $dark-green !important;
+
+ &:hover {
+ background-color: $middle-green !important;
+ color: unset !important;
+ }
+ }
+ }
+
+ p {
+ padding: 1rem 0 0;
+
+ a {
+ display: inline;
+ }
+ }
+ }
+ }
+
+ @media (hover: none) and (pointer: coarse) {
+ .dropdown {
+ margin-right: 0 !important;
+
+ &-btn {
+ &.login {
+ visibility: hidden;
+ }
+ }
+
+ &-content {
+ display: block !important;
+ width: 100% !important;
+
+ form.login {
+ input[type=text],
+ input[type=password] {
+ width: 100%;
+ }
+ }
+
+ p {
+ a {
+ display: inline;
+ }
+ }
+ }
+ }
+ }
}
.vc {
-
font-size: 9pt;
.builder {
.doc {
@@ -58,13 +190,19 @@
}
z-index: 110;
position: absolute !important;
+ top: 50%;
+ transform: translateY(-50%);
+ -o-transform: translateY(-50%);;
+ -moz-transform: translateY(-50%);
+ -webkit-transform: translateY(-50%);
}
#searchbar {
padding-right: 30px;
margin-top: 0;
- input {
+ input#q-field {
font-size: 9pt;
+ border-radius: 6px 0 0 6px;
}
button[type=submit] {
right: 0;
@@ -80,8 +218,13 @@
}
main {
+ padding: 1rem;
margin-left: $standard-margin;
margin-right: $standard-margin;
+
+ &.shifted {
+ padding-left: 0;
+ }
}
header .button {
@@ -129,10 +272,17 @@
padding-right: 0;
.logo > * {
background: {
- size: 60%;
- position: 0 0;
+ size: 60%;
+ position: 0 0;
+ }
}
- }
+ }
+ }
+
+ .logo > * {
+ > div.logoaddon {
+ right: -1.2rem;
+ top: 1.4rem;
}
}
@@ -160,10 +310,10 @@
font-size: 9pt;
line-height: 1em;
}
- &.active ~ main div.intro,
- &.active ~ main.page {
- margin-left: $standard-margin !important;
- }
+ // &.active ~ main div.intro,
+ // &.active ~ main.page {
+ // margin-left: $standard-margin !important;
+ // }
&.active {
position: relative;
@@ -172,6 +322,7 @@
width: 100%;
top: 0;
border-width: 0;
+
fieldset input {
font-size: 9pt;
}
@@ -182,6 +333,10 @@
display: none;
}
}
+
+ .nav.nav-doc:first-child {
+ margin-top: $standard-size-and-spacing !important;
+ }
}
#tutorial {
@@ -203,9 +358,9 @@
}
}
- main.page {
- margin-right: 20px;
- }
+ // main.page {
+ // margin-right: 20px;
+ // }
footer {
padding-left: 0 !important;
@@ -220,6 +375,9 @@
}
}
}
+ padding-top: 2rem;
+ flex-direction: column;
+ height: unset;
}
}
diff --git a/dev/scss/sidebar/sidebar.scss b/dev/scss/sidebar/sidebar.scss
index da6541f..de7465c 100644
--- a/dev/scss/sidebar/sidebar.scss
+++ b/dev/scss/sidebar/sidebar.scss
@@ -1,26 +1,30 @@
@charset "utf-8";
-@use 'sass:math';
+@use "sass:math";
@import "../util";
aside {
background-color: $dark-green;
- color: $nearly-white;
- width: $logo-left-distance;
- position: fixed;
- display: block;
- transition: all .3s ease-in-out;
- outline: none;
- font-size: 10pt;
- z-index: 100; // Needs to be behind alerts
- top: 0;
- left: 0;
- height: 100%;
+ color: $nearly-white;
+ width: $logo-left-distance;
+ position: fixed;
+ display: block;
+ transition: all 0.3s ease-in-out;
+ outline: none;
+ font-size: 10pt;
+ z-index: 100; // Needs to be behind alerts
+ top: 0;
+ left: 0;
+ height: 100%;
padding-top: 65px;
> div {
overflow-y: auto;
overflow-x: visible;
max-height: 100%;
+
+ .fieldset-login {
+ display: none;
+ }
}
> * {
@@ -29,34 +33,35 @@
&::after {
@include icon-font;
- position: absolute;
- display: block;
- opacity: 0;
- cursor: pointer;
- right: 0;
- bottom: 0;
- content: $fa-login;
+ position: absolute;
+ display: block;
+ opacity: 0;
+ cursor: pointer;
+ right: 0;
+ bottom: 0;
+ // content: $fa-settings;
+ // content: $fa-login;
font-size: 16pt;
- width: 16pt;
- height: 17pt;
- padding: 6pt;
+ width: 16pt;
+ height: 17pt;
+ padding: 6pt;
background-color: $dark-green;
border-top-right-radius: $standard-border-radius;
- margin-right: -1 * math.div($standard-margin,2);
+ margin-right: -1 * math.div($standard-margin, 2);
}
&.settings::after {
- content: $fa-settings;
+ content: $fa-settings;
}
h2,
legend {
line-height: 2em;
- text-align: center;
- padding: 0;
- margin: 0;
+ text-align: center;
+ padding: 0;
+ margin: 0;
font: {
- size: 100%;
+ size: 100%;
weight: bold;
}
}
@@ -66,10 +71,10 @@
*/
ul.nav {
list-style-type: none;
- margin: 0;
- font-size: 10pt;
- text-indent: 0;
- padding: 0;
+ margin: 0;
+ font-size: 10pt;
+ text-indent: 0;
+ padding: 0;
li {
padding: 0;
@@ -116,7 +121,7 @@
margin: 0;
font: {
weight: bold;
- size: 100%;
+ size: 100%;
}
}
@@ -137,26 +142,31 @@
nav > ul > li > a {
font-weight: bold;
}
-
+
fieldset {
- position: relative;
+ position: relative;
border-width: 0;
legend {
display: none;
}
-
- input[type=text],
- input[type=password] {
+
+ input[type="text"],
+ input[type="password"] {
@include input-field;
width: 100%;
}
-
+
+ .login {
+ display: none;
+ }
+
+ // search form
> form > div {
- position: relative;
- width: 100%;
- margin-top: 4px;
- padding-right: $button-width
+ position: relative;
+ width: 100%;
+ margin-top: 4px;
+ padding-right: $button-width;
}
> p {
@@ -166,7 +176,7 @@
> p.announcement {
color: $nearly-white;
> time {
- display: block;
+ display: block;
font-size: 70%;
}
}
@@ -177,24 +187,24 @@
}
ul {
- display: block;
- font-size: 80%;
+ display: block;
+ font-size: 80%;
text-align: right;
- padding: 0;
+ padding: 0;
margin-top: 0;
> li {
display: inline;
&:first-child::after {
- content: ' | ';
+ content: " | ";
}
}
}
button {
position: absolute;
- top: 0;
- right: 0;
+ top: 0;
+ right: 0;
&::after {
content: $fa-login;
}
@@ -204,21 +214,25 @@
// Off aside
&.off,
&:not(:focus):not(.active) {
- margin-left: -1 * ($logo-left-distance - math.div($standard-margin,2));
+ margin-left: -1 * ($logo-left-distance - math.div($standard-margin, 2));
&::after {
opacity: 1;
}
-
+
> * {
opacity: 0;
transition: {
property: opacity;
- duration: .3s;
+ duration: 0.3s;
}
}
}
&.off::after {
- display:none;
+ display: none;
+ }
+
+ &.invisible {
+ display: none;
}
}