fix: design tweaks

frontend/src/app.sass

@@ -174,7 +174,10 @@ h4
     margin: 20px 0
 
   .navbar__container-radio:checked ~ * &
-    margin-top: calc(var(--current-header-height) + 40px)
+    margin-top: calc(var(--current-header-height) + 30px)
+    
+    @media (min-width: 769px) and (min-height: 501px)
+      margin-top: calc(var(--current-header-height) + 44px)
 
 .main__content, .modal__content
   a
@@ -183,19 +186,25 @@ h4
   p, form, .div-p
     margin: 0.5rem 0
 
+    &:first-child
+      margin: 0 0 0.5rem 0
+
     &:last-child
-      margin: 0.5rem 0 0
+      margin: 0.5rem 0 0 0
 
       &:first-child
         margin: 0
 
+@media (min-width: 769px) and (min-height: 501px)
+  .main__content
+    --current-header-height: var(--header-height)
+
 @media (min-width: 426px)
   .main__content
     margin-left: var(--asidenav-width-md, 50px)
 
-@media (min-width: 769px)
+@media (min-width: 769px) and (min-height: 501px)
   .main__content
-    --current-header-height: var(--header-height)
     margin-left: var(--asidenav-width-lg, 20%)
 
 @media (min-width: 1200px)
@@ -528,6 +537,9 @@ section
   display: grid
   grid-column: 2
 
+  h1 + &
+    margin: 0 auto 0.5rem
+
   &::before
     @extend .fas
 
@@ -586,7 +598,7 @@ section
     &::before
       height: auto
       width: 45px
-      font-size: 40px
+      font-size: 20px
       top: 15px
 
 .notification-error
@@ -602,15 +614,15 @@ section
   color: var(--color-warning)
 
 // "Heated" element.
-   Set custom property "--hotness" to a value from 0 to 1 to turn
+// Set custom property "--hotness" to a value from 0 to 1 to turn
-   the element's background to a color on a gradient from green to red.
+// the element's background to a color on a gradient from green to red.
 
-   TBD:
+// TBD:
-   - move to a proper place
+// - move to a proper place
-   - think about font-weight...
+// - think about font-weight...
 
-   Example:
+// Example:
-   <div .heated style="--hotness: 0.2">Lorem ipsum
+// <div .heated style="--hotness: 0.2">Lorem ipsum
 
 .heated
   --hotness: 0
@@ -644,14 +656,17 @@ section
   pointer-events: none
 
   .navbar__container-radio:checked ~ &
-    top: calc(80px + var(--header-height))
+    top: calc(84px + var(--header-height))
 
-@media (max-width: 768px)
+@media (max-width: 768px), (max-height: 500px)
   .ribbon
     top: calc(20px + var(--header-height-collapsed))
     right: -83px
     transform: rotate(45deg) scale(0.6)
 
+    .navbar__container-radio:checked ~ &
+      top: calc(50px + var(--header-height-collapsed))
+
 #admin-studyterms
   select, option, input
     min-width: 50px

frontend/src/utils/navbar/navbar.sass

@@ -1,24 +1,6 @@
 .navbar-container
   position: relative
 
-.navbar-shadow
-  position: fixed
-  right: 0
-  top: 0
-  height: var(--header-height-collapsed)
-  width: 20px
-  z-index: 50
-  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.4), transparent)
-  transition: height 0.2s cubic-bezier(0.03, 0.43, 0.58, 1)
-
-@media (min-width: 768px)
-  .navbar-shadow
-    height: var(--header-height)
-
-@media (min-width: 1025px)
-  .navbar-shadow
-    display: none
-
 .navbar
   position: fixed
   right: 0
@@ -38,23 +20,21 @@
     left: var(--asidenav-width-lg)
 
   @media (max-width: 768px), (max-height: 500px)
-    left: 0
     min-height: var(--header-height-collapsed)
     padding: 0
 
-@media (max-width: 768px), (max-height: 500px)
+  @media (max-width: 768px)
-  .navbar__link-wrapper
+    left: 0
-    height: var(--header-height-collapsed)
 
 .navbar__list-wrapper
   display: flex
   flex-flow: row nowrap
   justify-content: space-between
   align-items: center
-  margin: 0 40px
+  margin: 0
 
-  .navbar__list-left
+  @media (min-width: 769px)
-    margin-right: 40px
+    margin: 0 40px
 
 .navbar__list
   display: flex
@@ -62,9 +42,11 @@
   justify-content: flex-end
   align-items: center
   list-style-type: none
+  margin: 0
 
   &.navbar__list-left
     justify-content: flex-start
+    margin-right: 40px
 
   & > *
     display: block
@@ -80,13 +62,16 @@
     display: flex
     flex-flow: row nowrap
     align-items: center
-    overflow: auto
+    overflow: overlay
     list-style-type: none
     justify-content: flex-end
+    margin: 0
 
     & > *
       display: block
-      margin-right: 12px
+
+      @media (min-width: 769px) and (min-height: 501px)
+        margin-right: 12px
 
       &:last-child
         margin-right: 0
@@ -94,7 +79,7 @@
   &.navbar__container-list--left > ul
     justify-content: flex-start
 
-  @media (max-width: 768px), (max-height: 500px)
+  @media (max-width: 768px)
     padding: 0
 
   visibility: collapse
@@ -125,6 +110,9 @@
 
     &.navbar__container-list-closer--hidden
       visibility: hidden
+      
+    @media (max-width: 768px)
+      visibility: hidden
 
   &.navbar__container-list--left .navbar__container-list-closer
     left: 14.5px
@@ -144,6 +132,10 @@
   overflow: hidden
   cursor: pointer
 
+  @media (max-width: 768px), (max-height: 500px)
+    height: var(--header-height-collapsed)
+
+
 .navbar__link-icon
   opacity: 0.7
   transition: opacity 0.2s ease
@@ -179,10 +171,6 @@
   
   @media (min-width: 769px) and (min-height: 501px)
     border: 1px solid rgba(255, 255, 255, 0.7)
-    text-decoration: none
-
-  @media (max-width: 768px), (max-height: 500px)
-    text-decoration: underline
 
   height: 30px
   color: var(--color-lightwhite) !important
@@ -195,20 +183,15 @@
   min-width: 0
   transition: none
   cursor: pointer
+  white-space: nowrap
 
   &:not(.navbar__container-link--active):hover
-    text-decoration: none
+    background-color: var(--color-dark) !important
-
+    color: var(--color-lightwhite) !important
-    @media (min-width: 769px) and (min-height: 501px)
-      background-color: var(--color-dark) !important
-      color: var(--color-lightwhite) !important
 
   &.navbar__container-link--active
-    text-decoration: none
+    background-color: var(--color-lightwhite) !important
-
+    color: var(--color-dark) !important
-    @media (min-width: 769px) and (min-height: 501px)
-      background-color: var(--color-lightwhite) !important
-      color: var(--color-dark) !important
 
 
 // list item
@@ -216,20 +199,14 @@
   position: relative
   transition: background-color .1s ease
 
-  &:not(.navbar__list-item--favorite) + .navbar__list-item--lang-wrapper
+  & + .navbar__list-item
-    margin-left: 12px
-
-  &:not(.navbar__list-item--favorite) + .navbar__list-item
     margin-left: 12px
 
 @media (max-width: 500px)
   .navbar__list-item
     min-width: 60px
 
-    &:not(.navbar__list-item--favorite) + .navbar__list-item
+    & + .navbar__list-item
-      margin-left: 0
-
-    &:not(.navbar__list-item--favorite) + .navbar__list-item--lang-wrapper
       margin-left: 0
 
 // "Favorites" list item, only visible on small screens and logged in

templates/widgets/navbar/container-radio.cassius

@@ -1,7 +1,10 @@
 ##{containerIdent}-radio:checked ~ * ##{containerIdent}-container
   visibility: visible
-  margin: 14px 0 0 0
   height: 30px
+  
+@media (min-width: 769px) and (min-height: 501px)
+  ##{containerIdent}-radio:checked ~ * ##{containerIdent}-container
+    margin: 14px 0 0 0
 
 ##{containerIdent}-radio:checked ~ * ##{containerIdent}
   background-color: var(--color-dark)

templates/widgets/navbar/navbar.hamlet

@@ -1,6 +1,5 @@
 $newline never
 <div .navbar-container>
-  <div .navbar-shadow>
   <nav .navbar>
     <div .navbar__list-wrapper>
       <ul .navbar__list.navbar__list-left>