From dee4e9f2ccf551ca4cd2da460b28c3022967eb2d Mon Sep 17 00:00:00 2001
From: Martin Allien <martin@allien.work>
Date: Thu, 17 Jun 2021 18:59:22 +0200
Subject: [PATCH] branding: add Kerberos config and base SCSS styling

---
 assets/scss/_kerberos-config.scss             | 180 ++++++++++++++++++
 assets/scss/_kerberos.scss                    |  85 +++++++++
 assets/scss/app.scss                          |   1 +
 ...s_1920d2ec1ff1120c91690141d2072447.content | 143 ++++++++++++++
 4 files changed, 409 insertions(+)
 create mode 100644 assets/scss/_kerberos-config.scss

diff --git a/assets/scss/_kerberos-config.scss b/assets/scss/_kerberos-config.scss
new file mode 100644
index 0000000..0e8ab9a
--- /dev/null
+++ b/assets/scss/_kerberos-config.scss
@@ -0,0 +1,180 @@
+/*
+  Override SASS' handling of HSL(a) color functions, don't touch it and let CSS handle it itself.
+  This will enable the trick with variable alpha channels for CSS color variables (see below).
+*/
+@function hsla($args...) { @return #{'hsla(#{$args})'}; }
+
+
+// ----- Mixins ----- //
+
+// Bulma breakpoints
+$gap: 32px;
+$tablet: 769px;
+$desktop:	960px + (2 * $gap);
+$widescreen:	1152px + (2 * $gap);
+$fullhd: 1344px + (2 * $gap);
+
+/*
+  Function for defining (not only) vertical rhythm by multiplies of 12px
+    Examples:
+    width: size(2); (equals to "width: 24px;")
+    line-height: size(3); (equals to "line-height: 36px;")
+*/
+@function size($multiplier) {
+  @return $multiplier * 12px;
+}
+
+// Responsive mixin (Bulma's)
+@mixin break($media) {
+  @if $media == t { 
+    @media only screen and (min-width: $tablet) { @content; }
+  }
+  @else if $media == d {
+    @media only screen and (min-width: $desktop) { @content; }
+  }
+  @else if $media == w {
+    @media only screen and (min-width: $widescreen) { @content; }
+  }
+  @else if $media == f {
+    @media only screen and (min-width: $fullhd) { @content; }
+  }
+}
+
+// Custom responsivity (px-based, for when default breakpoints aren't enough)
+@mixin break-from($size) {
+  // Usage: @include break-from(741px) {  }
+  @media only screen and (min-width: $size) { @content; }
+}
+
+
+// Orientation mixin for landscape/portrait
+@mixin orientation($orientation) {
+  // @include orientation(landscape) { ... }
+  // @include orientation(portrait) { ... }
+  @media only screen and (orientation: $orientation) { @content; }
+}
+
+
+// @include gradient (<top-color>, <bottom-color>);
+@mixin gradient($top, $bottom) {
+  background: $top;
+  background: -moz-linear-gradient(top, $top 0%, $bottom 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom));
+  background: -webkit-linear-gradient(top, $top 0%,$bottom 100%);
+  background: -o-linear-gradient(top, $top 0%,$bottom 100%);
+  background: -ms-linear-gradient(top, $top 0%,$bottom 100%);
+  background: linear-gradient(to bottom, $top 0%,$bottom 100%);
+}
+
+
+:root {
+
+  // ---------- COLORS ---------- //
+  /*
+    Usage:
+    - regular colors: "color: var(--hub);"
+    - transparent colors: "color: hsla(var(--hub-hsl), 0.3);" (mind the "-hsl" suffix in variable)
+  */
+  
+  --hub: hsl(278, 30%, 48%);
+  --hub-hsl: 278, 30%, 48%;
+  --hub-darker: hsl(278, 34%, 31%);
+  --hub-darker-hsl: 278, 34%, 31%;
+  --oss: hsl(2, 48%, 39%);
+  --oss-hsl: 2, 48%, 39%;
+  --oss-darker: hsl(2, 52%, 25%);
+  --oss-darker-hsl: 2, 52%, 25%;
+  --enterprise: hsl(162, 24%, 38%);
+  --enterprise-hsl: 162, 24%, 38%;
+  --enterprise-darker: hsl(162, 26%, 26%);
+  --enterprise-darker-hsl: 162, 26%, 26%;
+  --vault: hsl(229, 25%, 45%);
+  --vault-hsl: 229, 25%, 45%;
+  --vault-darker: hsl(230, 28%, 31%);
+  --vault-darker-hsl: 230, 28%, 31%;
+
+  --secondary: hsl(0, 3%, 41%);
+  --secondary-hsl: 0, 3%, 41%;
+  --secondary-darker: hsl(0, 3%, 48%);
+  --secondary-darker-hsl: 0, 3%, 48%;
+
+  --text: hsl(0, 3%, 15%);
+  --text-hsl: 0, 3%, 15%;
+  --text-muted: hsl(0, 3%, 41%);
+  --text-muted-hsl: 0, 3%, 41%;
+  --text-light: hsl(0, 5%, 63%);
+  --text-light-hsl: 0, 5%, 63%;
+
+  --card: hsl(0, 0%, 100%);
+  --card-hsl: 0, 0%, 100%;
+  --card-muted: hsl(0, 0%, 98%);
+  --card-muted-hsl: 0, 0%, 98%;
+
+  --info: hsl(205, 74%, 53%);
+  --info-hsl: 205, 74%, 53%;
+  --success: hsl(131, 31%, 52%);
+  --success-hsl: 131, 31%, 52%;
+  --warning: hsl(47, 86%, 47%);
+  --warning-hsl: 47, 86%, 47%;
+  --alert: hsl(2, 58%, 48%);
+  --alert-hsl: 2, 58%, 48%;
+
+  --bg: hsl(0, 5%, 93%);
+  --bg-hsl: 0, 5%, 93%;
+  --bg-muted: hsl(0, 4%, 89%);
+  --bg-muted-hsl: 0, 4%, 89%;
+  --bg-white: hsl(0, 0%, 100%);
+  --bg-white-hsl: 0, 0%, 100%;
+
+  // ---------- UI ---------- //
+
+  --radius: 4px;
+
+  // default padding for cards ("V" for vertical, "H" for horizontal)
+  --card-paddingV: #{size(2)}; // interpolate to embed the result in CSS var
+  --card-paddingH: #{size(1)};
+  @include break(t) {
+    --card-paddingV: #{size(2)};
+    --card-paddingH: #{size(2)};
+  }
+  @include break(d) {
+    --card-paddingV: #{size(3)};
+    --card-paddingH: #{size(3)};
+  }
+
+}
+
+
+// ========== PLACEHOLDERS ========== //
+/*
+  Usage:
+  @extend %box-shadow;
+*/
+
+%card-header-shadow {
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.07);
+}
+
+%card-footer-shadow {
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.07) inset;
+}
+
+%box-shadow {
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.03);
+}
+
+%box-shadow-bigger {
+  box-shadow: 0px 4px 34px rgba(0, 0, 0, 0.04), 0px 3px 4px rgba(0, 0, 0, 0.1);
+  border-radius: var(--radius);
+}
+
+%modal-shadow {
+  box-shadow: 0px 4px 34px rgba(0, 0, 0, 0.24), 0px 3px 4px rgba(0, 0, 0, 0.2);
+}
+
+%tfx {
+  transition: all 0.15s;
+  @media (prefers-reduced-motion) {
+    transition: none;
+  }
+}
\ No newline at end of file
diff --git a/assets/scss/_kerberos.scss b/assets/scss/_kerberos.scss
index e69de29..64487dc 100644
--- a/assets/scss/_kerberos.scss
+++ b/assets/scss/_kerberos.scss
@@ -0,0 +1,85 @@
+/*! doc.kerberos.io v2.0.0 | MIT License */
+
+// ----- Basics & Typography ----- //
+
+body {
+  font-family: 'Inter', sans-serif; // use regular Inter font by default..
+  @supports (font-variation-settings: normal) {
+    font-family: 'Inter var', sans-serif; // ..but if supported, use variable Inter font instead (all-in-one)
+  }
+  color: var(--text-muted);
+  background: var(--bg);
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 600;
+  color: var(--text);
+  margin: 0;
+  body.dark & {
+    color: var(--bg-white);
+  }
+}
+
+h1 {
+  font-size: 24px;
+  line-height: size(3);
+  @include break(t) {
+    font-size: 30px;
+    line-height: size(4);
+  }
+  @include break(w) {
+    font-size: 36px;
+  }
+}
+
+h2 {
+  font-size: 24px;
+  line-height: size(2.5);
+  margin-bottom: size(0.5);
+  @include break(w) {
+    font-size: 30px;
+    line-height: size(4);
+    margin-bottom: 0;
+  }
+}
+
+h3 {
+  font-size: 20px;
+  line-height: size(2);
+  @include break(w) { font-size: 24px; line-height: size(3); }
+}
+
+p {
+  font-size: 15px;
+  line-height: size(2);
+  margin: 0 0 size(1);
+  @include break(w) {
+    font-size: 18px;
+    line-height: size(2.5);
+  }
+  &.lead {
+    color: var(--text-light);
+    margin: 0 0 size(2);
+    font-size: 18px;
+    line-height: size(2);
+    @include break(w) {
+      font-size: 22px;
+      line-height: size(3);
+    }
+  }
+}
+
+img {
+  max-width: 100%;
+}
+
+
+// ----- UI ----- //
+
+
+// ----- Layout ----- //
+
+.navbar {
+  @extend %box-shadow-bigger;
+  margin-top: 6px; // make the whole gradient visible
+}
diff --git a/assets/scss/app.scss b/assets/scss/app.scss
index 9a6fc9f..68313ce 100644
--- a/assets/scss/app.scss
+++ b/assets/scss/app.scss
@@ -34,4 +34,5 @@
 @import "layouts/sidebar";
 
 /* Kerberos tweaks & branding */
+@import "kerberos-config";
 @import "kerberos";
\ No newline at end of file
diff --git a/resources/_gen/assets/scss/scss/app.scss_1920d2ec1ff1120c91690141d2072447.content b/resources/_gen/assets/scss/scss/app.scss_1920d2ec1ff1120c91690141d2072447.content
index 8dbd87a..63fd98e 100644
--- a/resources/_gen/assets/scss/scss/app.scss_1920d2ec1ff1120c91690141d2072447.content
+++ b/resources/_gen/assets/scss/scss/app.scss_1920d2ec1ff1120c91690141d2072447.content
@@ -10657,5 +10657,148 @@ a.docs-link {
   text-decoration: underline; }
 
 /* Kerberos tweaks & branding */
+/*
+  Override SASS' handling of HSL(a) color functions, don't touch it and let CSS handle it itself.
+  This will enable the trick with variable alpha channels for CSS color variables (see below).
+*/
+/*
+  Function for defining (not only) vertical rhythm by multiplies of 12px
+    Examples:
+    width: size(2); (equals to "width: 24px;")
+    line-height: size(3); (equals to "line-height: 36px;")
+*/
+:root {
+  /*
+    Usage:
+    - regular colors: "color: var(--hub);"
+    - transparent colors: "color: hsla(var(--hub-hsl), 0.3);" (mind the "-hsl" suffix in variable)
+  */
+  --hub: hsl(278, 30%, 48%);
+  --hub-hsl: 278, 30%, 48%;
+  --hub-darker: hsl(278, 34%, 31%);
+  --hub-darker-hsl: 278, 34%, 31%;
+  --oss: hsl(2, 48%, 39%);
+  --oss-hsl: 2, 48%, 39%;
+  --oss-darker: hsl(2, 52%, 25%);
+  --oss-darker-hsl: 2, 52%, 25%;
+  --enterprise: hsl(162, 24%, 38%);
+  --enterprise-hsl: 162, 24%, 38%;
+  --enterprise-darker: hsl(162, 26%, 26%);
+  --enterprise-darker-hsl: 162, 26%, 26%;
+  --vault: hsl(229, 25%, 45%);
+  --vault-hsl: 229, 25%, 45%;
+  --vault-darker: hsl(230, 28%, 31%);
+  --vault-darker-hsl: 230, 28%, 31%;
+  --secondary: hsl(0, 3%, 41%);
+  --secondary-hsl: 0, 3%, 41%;
+  --secondary-darker: hsl(0, 3%, 48%);
+  --secondary-darker-hsl: 0, 3%, 48%;
+  --text: hsl(0, 3%, 15%);
+  --text-hsl: 0, 3%, 15%;
+  --text-muted: hsl(0, 3%, 41%);
+  --text-muted-hsl: 0, 3%, 41%;
+  --text-light: hsl(0, 5%, 63%);
+  --text-light-hsl: 0, 5%, 63%;
+  --card: hsl(0, 0%, 100%);
+  --card-hsl: 0, 0%, 100%;
+  --card-muted: hsl(0, 0%, 98%);
+  --card-muted-hsl: 0, 0%, 98%;
+  --info: hsl(205, 74%, 53%);
+  --info-hsl: 205, 74%, 53%;
+  --success: hsl(131, 31%, 52%);
+  --success-hsl: 131, 31%, 52%;
+  --warning: hsl(47, 86%, 47%);
+  --warning-hsl: 47, 86%, 47%;
+  --alert: hsl(2, 58%, 48%);
+  --alert-hsl: 2, 58%, 48%;
+  --bg: hsl(0, 5%, 93%);
+  --bg-hsl: 0, 5%, 93%;
+  --bg-muted: hsl(0, 4%, 89%);
+  --bg-muted-hsl: 0, 4%, 89%;
+  --bg-white: hsl(0, 0%, 100%);
+  --bg-white-hsl: 0, 0%, 100%;
+  --radius: 4px;
+  --card-paddingV: 24px;
+  --card-paddingH: 12px; }
+  @media only screen and (min-width: 769px) {
+    :root {
+      --card-paddingV: 24px;
+      --card-paddingH: 24px; } }
+  @media only screen and (min-width: 1024px) {
+    :root {
+      --card-paddingV: 36px;
+      --card-paddingH: 36px; } }
+/*
+  Usage:
+  @extend %box-shadow;
+*/
+.navbar {
+  box-shadow: 0px 4px 34px rgba(0, 0, 0, 0.04), 0px 3px 4px rgba(0, 0, 0, 0.1);
+  border-radius: var(--radius); }
+
+/*! doc.kerberos.io v2.0.0 | MIT License */
+body {
+  font-family: 'Inter', sans-serif;
+  color: var(--text-muted);
+  background: var(--bg); }
+  @supports (font-variation-settings: normal) {
+    body {
+      font-family: 'Inter var', sans-serif; } }
+
+h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
+  font-weight: 600;
+  color: var(--text);
+  margin: 0; }
+  body.dark h1, body.dark .h1, body.dark h2, body.dark .h2, body.dark h3, body.dark .h3, body.dark h4, body.dark .h4, body.dark h5, body.dark .h5, body.dark h6, body.dark .h6 {
+    color: var(--bg-white); }
+
+h1, .h1 {
+  font-size: 24px;
+  line-height: 36px; }
+  @media only screen and (min-width: 769px) {
+    h1, .h1 {
+      font-size: 30px;
+      line-height: 48px; } }
+  @media only screen and (min-width: 1216px) {
+    h1, .h1 {
+      font-size: 36px; } }
+h2, .h2 {
+  font-size: 24px;
+  line-height: 30px;
+  margin-bottom: 6px; }
+  @media only screen and (min-width: 1216px) {
+    h2, .h2 {
+      font-size: 30px;
+      line-height: 48px;
+      margin-bottom: 0; } }
+h3, .h3 {
+  font-size: 20px;
+  line-height: 24px; }
+  @media only screen and (min-width: 1216px) {
+    h3, .h3 {
+      font-size: 24px;
+      line-height: 36px; } }
+p {
+  font-size: 15px;
+  line-height: 24px;
+  margin: 0 0 12px; }
+  @media only screen and (min-width: 1216px) {
+    p {
+      font-size: 18px;
+      line-height: 30px; } }
+  p.lead {
+    color: var(--text-light);
+    margin: 0 0 24px;
+    font-size: 18px;
+    line-height: 24px; }
+    @media only screen and (min-width: 1216px) {
+      p.lead {
+        font-size: 22px;
+        line-height: 36px; } }
+img {
+  max-width: 100%; }
+
+.navbar {
+  margin-top: 6px; }
 
 /*# sourceMappingURL=main.css.map */
\ No newline at end of file