databook-theme 0.1.1

data/_sass/layout/_footer.scss

@@ -0,0 +1,76 @@
+:root {
+  --db-footer-vertical-padding: .5rem;
+
+  @media #{$medium-screen} {
+    --db-footer-vertical-padding: .75rem;
+  }
+
+  @media #{$large-screen} {
+    --db-footer-vertical-padding: 1rem;
+  }
+
+}
+
+
+.l-footer {
+  --db-footer-horizontal-padding: calc(var(--db-header-horizontal-padding) * 2);
+
+  @media #{$medium-screen} {
+    --db-footer-horizontal-padding: var(--db-header-horizontal-padding);
+  }
+  @at-root .l-wrapper.has-sidebar #{&} {
+    --db-footer-horizontal-padding: calc(var(--db-header-horizontal-padding) * 2);
+  }
+
+  border-top: 1px solid var(--db-border-color);
+  display: flex;
+  font-size: small;
+  flex-direction: row;
+  color: var(--db-text-color-inactive);
+  flex-wrap: wrap;
+  line-height: 2em;
+  padding: var(--db-footer-vertical-padding) var(--db-footer-horizontal-padding);
+
+  &__left {
+    text-align: left;
+  }
+
+  &__middle {
+    flex: 1;
+    text-align: center;
+  }
+
+  &__right {
+    text-align: right;
+  }
+
+  &__custom {
+    width: 100%;
+    margin-bottom: 1rem;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &__text {
+    width: 100%;
+  }
+
+
+  a {
+    @include text-link;
+  }
+}
+
+.c-footer-list {
+  display: flex;
+
+  &__item {
+    &:not(:first-child)::before {
+      content: "•";
+      margin: 0 .25rem;
+      color: var(--db-text-color-disabled);
+    }
+  }
+}

data/_sass/layout/_header.scss

@@ -0,0 +1,124 @@
+:root {
+  --db-header-vertical-padding: 0;
+  --db-header-horizontal-padding: calc((var(--db-header-height) - #{$header-object-size}) / 2);
+
+  @media #{$large-screen} {
+    --db-header-horizontal-padding: #{$page-spacing-large};
+  }
+
+  @media #{$wide-screen} {
+    --db-header-horizontal-padding: calc( (100% - #{$page-max-width}) / 2 );
+
+    .l-wrapper.is-wide {
+      --db-header-horizontal-padding: #{$page-spacing-wide};
+    }
+  }
+
+}
+
+.l-wrapper.has-sidebar {
+  --db-header-horizontal-padding: calc((var(--db-header-height) - #{$header-object-size}) / 2);
+}
+
+
+.l-header {
+  background-color: var(--db-background-color);
+  border-bottom: 1px solid var(--db-border-color);
+  display: flex;
+  flex-direction: row;
+  height: var(--db-header-height);
+  z-index: 999;
+  width: 100%;
+  padding: 0 var(--db-header-horizontal-padding);
+  color: var(--db-text-color-inactive);
+
+  @media #{$large-screen} {
+    box-shadow: none;
+  }
+
+  &__logo {
+    order: 3;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+
+    @media #{$large-screen} {
+      order: 1;
+      @at-root .l-wrapper.has-sidebar #{&} {
+        display: none;
+        @media print {
+          display: initial;
+        }
+      }
+    }
+  }
+  
+  &__left {
+    order: 2;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex: 1;
+
+    @media print {
+      display: none;
+    }
+  }
+
+  &__right {
+    order: 4;
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+    flex: 1;
+    justify-content: flex-end;
+
+    @media print {
+      display: none;
+    }
+  }
+  
+
+  &--sticky {
+    position: sticky;
+    top: 0;
+  }
+
+
+}
+
+
+.l-wrapper.has-background .l-header {
+  background-color: rgba( var(--db-overlay-color-rgb), 5%);
+  border-bottom-color: transparent;
+}
+
+
+.c-logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1em;
+  color: var(--db-text-color-important);
+  height: 1.5rem;
+
+  &__image {
+    height: 100%;
+    margin-right: 1rem;
+  }
+
+  &__text {
+    font-weight: bold;
+    letter-spacing: 2px;
+    white-space: nowrap;
+  }
+
+  @media #{$medium-screen} {
+    font-size: 1.4em;
+    height: 2rem;
+  }
+  
+  &:hover {
+    color: initial;
+  }
+}

data/_sass/layout/_main.scss

@@ -0,0 +1,8 @@
+.l-main {
+  flex: 1;
+  margin: 0;
+  flex-direction: column;
+  background-color: var(--db-background-color);
+  display: flex;
+  color: var(--db-text-color-active);
+}

data/_sass/layout/_misc.scss

@@ -0,0 +1,7 @@
+.l-wall {
+  &__title {
+    font-size: 2.5rem;
+    font-weight: bold;
+    margin-bottom: 2rem;
+  }
+}

data/_sass/layout/_navbar.scss

@@ -0,0 +1,323 @@
+// very ugly
+// todo: rewrite
+
+$triangle-size: 6px;
+$secondarymenu-overlay-size: 1px;
+$minimum-menu-width: 10rem;
+
+@mixin make_dropdown($multilevel: false) {
+  display: none;
+  flex-direction: column;
+  background-color: var(--db-background-color);
+  background-image: var(--db-surface-overlay);
+  outline: 1px solid var(--db-border-color);
+  box-shadow:
+    -.1rem -.1rem .4rem var(--db-surface-shadow-color),
+    .2rem .2rem .4rem var(--db-surface-shadow-color);
+  border-radius: 1px 1px $border-radius-object $border-radius-object;
+  min-width: $minimum-menu-width;
+  position: absolute;
+  top: calc( var(--db-header-height) - ( ( var(--db-header-height) - 100% ) / 2 ) - 1px );
+  padding: .25rem 0;
+  font-weight: normal;
+  white-space: nowrap;
+  
+  @if $multilevel {
+    left: 0;
+    right: unset;
+  } @else {
+    left: -1rem;
+    right: unset;
+  }
+
+  .c-navmenu__item {
+    line-height: 3rem;
+    font-weight: normal;
+    border-radius: 1px;
+    text-align: left;
+    color: var(--db-text-color-active);
+
+    .c-navmenu__text {
+      display: block;
+      padding: 0 1rem;
+    }
+
+    @if $multilevel {
+      &:hover > .c-navmenu__text {
+        background-color: var(--db-control-color);
+        color: var(--db-control-text-color);
+      }
+    } @else {
+      .c-navmenu__text:hover  {
+        background-color: var(--db-control-color);
+        color: var(--db-control-text-color);
+      }
+    }
+  }
+
+}
+
+@mixin make_dropdown_level2() {
+  //border-top-width: 1px;
+  border-radius: $border-radius-object;
+  top: -.25rem;
+  position: absolute;
+
+  left: calc(100% - #{$secondarymenu-overlay-size});
+}
+
+@mixin make_horizon() {
+  display: flex;
+  flex-direction: row;
+  border: none;
+  outline: none;
+  background: none;
+  background-color: transparent;
+  font-size: inherit;
+  box-shadow: none;
+  position: initial;
+  padding: 0;
+  border-radius: 0;
+  text-align: center;
+
+  > .c-navmenu__item {
+    text-align: center;
+    //min-width: $minimum-menu-width * .618;
+    font-weight: bold;
+    line-height: var(--db-header-height);
+    color: var(--db-text-color-inactive);
+    position: relative;
+
+    &:hover {
+      > .c-navmenu__text {
+        background-color: unset;
+        color: var(--db-text-color-important);
+
+        &:not(:only-child) {
+          @include make_triangle();
+        }
+      }
+
+      > .c-navmenu__menu {
+        display: flex;
+      }
+    }
+  }
+
+}
+
+@mixin make_triangle() {
+  position: relative;
+
+  &::before {
+    content: '';
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0 $triangle-size $triangle-size $triangle-size;
+    border-color: transparent transparent var(--db-background-color) transparent;
+    position: absolute;
+    bottom: calc( ( ( var(--db-header-height) - 100% ) / -2 ) + 1px);
+    z-index: 999;
+    left: calc( 50% - #{$triangle-size} );
+  }
+
+  &::after {
+    content: '';
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0 ($triangle-size + 1) ($triangle-size + 1) ($triangle-size + 1);
+    border-color: transparent transparent var(--db-border-color) transparent;
+    position: absolute;
+    bottom: calc( ( ( var(--db-header-height) - 100% ) / -2 ) + 1px);
+    z-index: 998;
+    left: calc( 50% - #{$triangle-size} - 1px );
+  }
+
+}
+
+@mixin make_rightangle() {
+  position: relative;
+  padding-right: 2rem;
+
+  &::after {
+    @include fontawesome-text;
+    content: '\f105';
+    position: absolute;
+    right: 0;
+    width: 2rem;
+    text-align: center;
+  }
+
+}
+
+.c-navmenu {
+  list-style: none;
+  padding: 0;
+  position: relative;
+  user-select: none;
+  line-height: 32px;
+
+  > .c-navmenu__menu {
+    @include make_dropdown(false);
+    > .c-navmenu__item {
+      .c-navmenu__menu {
+        .c-navmenu__item {
+          > a {
+            padding: 0 2rem;
+          }
+          .c-navmenu__menu {
+            .c-navmenu__item {
+              > a {
+                padding: 0 3rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &:focus-within {
+    > .c-navmenu__menu {
+      display: flex;
+    }
+
+    > .c-navmenu__button {
+      @include make_triangle();
+      border-color: var(--db-border-color);
+    }
+  }
+
+  @at-root div#{&}__text {
+    color: var(--db-text-color-inactive);
+  }
+
+  &--responsive {
+    left: 0;
+
+    @media #{$large-screen} {
+  
+      .c-navmenu__button {
+        display: none;
+      }
+  
+      > .c-navmenu__menu {
+        @include make_horizon();
+        left: 0;
+  
+        > .c-navmenu__item {
+
+          .c-navmenu__item {
+            position: relative;
+            
+            &:hover{
+              > .c-navmenu__menu {
+                display: flex;
+              }
+            }
+          }
+  
+          .c-navmenu__menu {
+            @include make_dropdown(true);
+  
+            .c-navmenu__text:not(:only-child) {
+              @include make_rightangle();
+            }
+  
+            .c-navmenu__menu {
+              @include make_dropdown_level2();
+              a {
+                padding: 0 1rem !important;
+              }
+            }
+  
+          }
+        }
+      }
+    }
+  }
+
+  &__divider {
+    border-top: 1px solid var(--db-border-color);
+    margin: .25rem .5rem;
+  }
+
+  &--right &__menu {
+    left: unset !important;
+    right: -1rem;
+  }
+
+  &--right.c-navmenu--responsive &__menu {
+    right: 0 !important;
+  }
+
+  &--right &__menu &__menu {
+    @media #{$large-screen} {
+      .c-navmenu__menu {
+        right: calc(100% - #{$secondarymenu-overlay-size}) !important;
+      }
+    }
+  }
+
+}
+
+.c-navbutton {
+  border-radius: $border-radius-object;
+  border: 1px solid transparent;
+  text-align: center;
+  align-items: center;
+  padding: 0;
+  width: $header-object-size;
+  height: $header-object-size;
+  line-height: $header-object-size;
+  background-color: transparent;
+  color: var(--db-text-color-inactive);
+  outline: 0;
+  margin-right: .25rem;
+
+  &:hover {
+    border-color: var(--db-border-color);
+    color: var(--db-text-color-active);
+    background-color: var(--db-background-hover-color);
+  }
+  &:active {
+    background-image: var(--db-surface-overlay);
+  }
+}
+
+
+.c-search {
+  display: flex;
+
+  &__textbox {
+    width: 0px;
+    outline: none;
+    border-width: 0 0 1px 0;  
+  }
+
+  &__expand {
+    overflow: hidden;
+  }
+
+  &__go {
+    display: none;
+  }
+
+  &:focus-within {
+    > .c-search__textbox {
+      width: 8rem;
+    }
+    > .c-search__expand {
+      display: none;
+    }
+    > .c-search__go {
+      display: initial;
+    }
+  }
+
+  label {
+    display: block;
+  }
+}

data/_sass/layout/_sidebar.scss

@@ -0,0 +1,115 @@
+.l-sidebar {
+  --db-sidebar-width: #{$side-width};
+  
+  background-color: var(--db-surface-color);
+  background-image: var(--db-surface-overlay);
+  border-right: 1px solid var(--db-border-color);
+  
+  color: var(--db-text-color-active);
+  display: none;
+  flex-direction: column;
+  overflow: auto;
+  position: fixed;
+  width: 100%;
+  z-index: 999;
+
+  height: 100vh;
+  padding-top: var(--db-header-height);
+
+  @media #{$medium-screen} {
+    width: var(--db-sidebar-width);
+    overflow: auto;
+  }
+
+  @media #{$large-screen} {
+    display: flex;
+    overflow: initial;
+    position: static;
+    margin-top: 0;
+    padding-top: 0;
+    height: auto;
+      
+    &--sticky {
+      position: sticky;
+      top: 0;
+      align-self: flex-start;
+      height: 100vh;
+    }
+  }
+
+  &.is-toggled {
+    display: flex;
+    position: fixed;
+    box-shadow: 0 0 1rem 0 var(--db-surface-shadow-color);
+
+    @media #{$large-screen} {
+      display: none;
+    }
+  }
+
+  &__header {
+    @include flex-center;
+    border-bottom: 1px solid var(--db-border-color);
+    height: var(--db-header-height);
+    display: none;
+
+    @media #{$large-screen} {
+      display: flex;
+    }
+    
+  }
+
+  &__body {
+    flex: 1;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__footer {
+    color: var(--db-text-color-inactive);
+    font-size: 80%;
+    padding: 1.5rem 1rem;
+    text-align: center;
+  }
+}
+
+.c-navbutton--sidebar {
+  @include fontawesome-icon;
+
+  &::before {
+    content: "\f105";
+    @media #{$large-screen} {
+      content: "\f104";
+    }
+  }
+
+  &.is-toggled::before {
+    content: "\f104";
+    @media #{$large-screen} {
+      content: "\f105";
+    }
+  }
+  
+}
+
+#sidebar-toggler {
+  display: none;
+
+  &:checked + .l-sidebar {
+    display: flex;
+    position: fixed;
+    box-shadow: 0 0 1rem 0 var(--db-surface-shadow-color);
+  
+    @media #{$large-screen} {
+      display: none;
+    }
+  }
+
+  &:checked ~ .l-main .c-navbutton--sidebar::before {
+    content: "\f104";
+    @media #{$large-screen} {
+      content: "\f105";
+    }
+  }
+}

data/_sass/layout/_wrapper.scss

@@ -0,0 +1,7 @@
+.l-wrapper {
+  display: flex;
+  flex-direction: row;
+  min-height: 100vh;
+  width: 100%;
+  color: var(--db-text-color-active);
+}