header and footer

assets/css/application.scss

@@ -43,6 +43,7 @@ $fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
 @import "~views/admin";
 @import "~views/burger";
 @import "~views/communication";
+@import "~views/footer";
 @import "~views/header";
 @import "~views/markdown";
 @import "~views/metabar";

assets/css/common/_measurements.scss

@@ -14,10 +14,12 @@ $font-family-monospace: "Droid Sans Mono", monospace;
 
   --block-header-height: 2rem;
 
-  --navbar-size: 40px;
-  --navbar-secondary-size: 36px;
-  --navbar-avatar-size: 36px;
-  --navbar-input-size: 32px;
+  --navbar-size: 4rem;
+  --navbar-secondary-size: 2.5rem;
+  --navbar-avatar-size: 2.5rem;
+  --navbar-input-size: 2rem;
+  --navbar-input-width: 18vw;
+  --navbar-input-max-width: 22rem;
 
   --button-group-height: 2rem;
   --button-group-tall-height: 2.5rem;

assets/css/elements/_avatar.scss

@@ -1,4 +1,6 @@
 .avatar--navbar {
   width: var(--navbar-avatar-size);
   height: var(--navbar-avatar-size);
+  border-radius: 100%;
+  overflow: hidden;
 }

assets/css/elements/_base.scss

@@ -12,6 +12,7 @@ body {
 
 main {
   padding: var(--padding-normal);
+  flex-grow: 1;
 }
 
 @include if-mobile {

assets/css/elements/_block.scss

@@ -102,6 +102,7 @@
 
 .block--fixed {
   padding: var(--padding-normal);
+  border-radius: var(--border-radius-inner);
 }
 
 .block__tab {

assets/css/elements/_flash.scss

@@ -1,13 +1,8 @@
 @mixin flash-type($type) {
   .flash--#{$type} {
     border: 1px solid var(--#{$type}-border-color);
-    box-shadow: 0 -1px var(--#{$type}-dark-color) inset;
     background: var(--#{$type}-color);
 
-    .flash__icon {
-      border-right: 1px solid var(--#{$type}-dark-color);
-    }
-
     .flash__message {
       border-left: 1px solid var(--#{$type}-border-color);
     }
@@ -27,6 +22,7 @@
   grid-template-columns: auto 1fr;
   margin: var(--padding-normal);
   margin-bottom: 0;
+  border-radius: var(--border-radius-inner);
 }
 
 @include if-phone {

assets/css/views/_footer.scss

@@ -0,0 +1,14 @@
+footer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--padding-large);
+  padding: var(--padding-normal);
+  background: var(--primary-dark-color);
+  justify-content: center;
+}
+
+footer > span {
+  order: 1;
+  width: 100%;
+  text-align: center;
+}

assets/css/views/_header.scss

@@ -1,95 +1,105 @@
-.header {
-  background: var(--primary-color);
+header {
+  display: flex;
   line-height: var(--navbar-size);
   padding: 0 var(--padding-normal);
-  border-bottom: 1px solid var(--primary-border-color);
-  box-shadow: 0 1px var(--primary-muted-color) inset, 0 -1px var(--primary-dark-color) inset;
   font-size: var(--font-header-size);
+  gap: var(--padding-large);
+  align-items: center;
 }
 
-.header--secondary {
-  background: var(--secondary-dark-color);
-  border-color: var(--secondary-color);
-  line-height: var(--navbar-secondary-size);
-
-  .header__link {
-    border-right-color: var(--secondary-color);
-    border-left-color: var(--secondary-dark-color);
-
-    & > .fa {
-      margin-right: var(--padding-small);
-    }
+.header__link {
+  color: var(--text-color) !important;
+}
 
-    &:hover {
-      background: var(--secondary-muted-color);
-    }
-  }
+.header__link--user {
+  display: flex;
+  align-items: center;
+  gap: var(--padding-normal);
 }
 
-.header__spacer {
-  flex: 1 0 auto;
-  height: var(--navbar-size);
+.header__logo {
+  font-size: var(--font-h1-size)
 }
 
-.header__link {
-  color: var(--text-color) !important;
-  display: block;
-  position: relative;
-  flex-shrink: 0;
-  padding: 0 var(--padding-small);
-  border-right: 1px solid var(--primary-border-color);
-  border-left: 1px solid var(--primary-dark-color);
-
-  &:hover {
-    background: var(--primary-dark-color);
-  }
+.header__search {
+  @extend .flex;
+  @extend .flex--no-wrap;
+  @extend .flex--centered;
+
+  border: 0;
+  border-radius: var(--border-radius-inner);
+  background: var(--primary-muted-color);
+  height: var(--navbar-input-size);
 }
 
-.header__link--no-hover:hover {
-  background: 0 !important;
+.header__search > button {
+  background: 0;
+  border: 0;
 }
 
 .header__input {
   @include animated-transition;
   height: var(--navbar-input-size);
-  background: var(--primary-muted-color);
   font-size: var(--font-size);
+  background: 0;
   border: 0;
+  box-shadow: 0;
 }
 
-select.header__input {
-  cursor: pointer;
+.header__input--text {
+  width: var(--navbar-input-width);
+  max-width: var(--navbar-input-max-width);
 }
 
-select.header__input:hover {
-  @include animated-transition;
-  background: var(--primary-dark-color) !important;
+.header__search__button {
+  display: flex;
+  align-items: center;
+  height: var(--navbar-input-size);
+  color: var(--text-color) !important;
+  padding: 0 var(--padding-normal);
 }
 
-.header__search {
-  @extend .flex__row;
-  height: var(--navbar-size);
-  padding: 0 var(--padding-small);
-  border-right: 1px solid var(--primary-border-color);
-  border-left: 1px solid var(--primary-dark-color);
+.header__search__button:hover {
+  background: var(--primary-color);
+  cursor: pointer;
 }
 
-.header__buttons {
-  border: 0;
-  border-radius: 0;
-  border-left: 1px solid var(--primary-dark-color);
+.header__filter-form {
+  padding: 0 var(--padding-normal);
 }
 
-.header__search__button {
-  height: var(--navbar-input-size);
+nav.header__secondary {
+  display: flex;
+  line-height: var(--navbar-secondary-size);
+  padding: 0 var(--padding-normal);
+  font-size: var(--font-header-size);
+  gap: var(--padding-large);
+  align-items: center;
   background: var(--primary-muted-color);
-  box-shadow: 0 -1px var(--secondary-dark-color) inset;
 }
 
-.header__search__button:hover {
-  background: var(--primary-dark-color) !important;
+nav.dropdown__content {
+  line-height: var(--navbar-secondary-size);
 }
 
-.header__filter-form {
-  padding: 0 var(--padding-small);
+@include if-mobile {
+  header {
+    gap: var(--padding-normal);
+    flex-wrap: wrap;
+    margin-bottom: var(--padding-normal);
+  }
+
+  nav.header__secondary {
+    display: none;
+  }
+
+  form.header__search {
+    width: 100%;
+    order: 1;
+  }
+
+  .header__input--text {
+    width: 100% !important;
+    max-width: 100% !important;
+  }
 }

lib/philomena_web/templates/layout/_footer.html.slime

@@ -1,20 +1,18 @@
-footer#footer
-  #footer_content
-    - footer_data = footer_data()
+footer
+  - footer_data = footer_data()
 
-    = for column <- footer_data["cols"] do
-      .footercol
-        h5 = column
+  = for column <- footer_data["cols"] do
+    .footercol
+      h5 = column
 
-        = for row <- footer_data[column] do
-          = if row["bold"] do
-            strong
-              a href=row["url"] target=row["target"]||"_self" = row["title"]
-          - else
+      = for row <- footer_data[column] do
+        = if row["bold"] do
+          strong
             a href=row["url"] target=row["target"]||"_self" = row["title"]
-          br
-
-  #serving_info
+        - else
+          a href=row["url"] target=row["target"]||"_self" = row["title"]
+        br
+  span
     ' Powered by
     a> href="https://github.com/philomena-dev/philomena" philomena
     | (