Documentation

docs/scss/components/_card-code.scss

@@ -0,0 +1,51 @@
+/**
+ * Docs: Code inside <article>
+ */
+
+// Custom spacings
+article pre {
+  margin-top: $spacing-block;
+  margin-bottom: -$spacing-gutter*2;
+
+  @if map-get($breakpoints, "sm") and
+    map-get($spacing-factor, "sm") {
+
+    @media (min-width: map-get($breakpoints, "sm")) {
+      padding: $spacing-block ($spacing-block*map-get($spacing-factor, "sm"));
+      margin-bottom: 0;
+    }
+  }
+
+  @if map-get($breakpoints, "md") and
+    map-get($spacing-factor, "md") and
+    $enable-responsive-spacings {
+
+    @media (min-width: map-get($breakpoints, "md")) {
+      padding: $spacing-block ($spacing-block*map-get($spacing-factor, "md"));
+      margin: -$spacing-block*map-get($spacing-factor, "md");
+      margin-top: $spacing-block*map-get($spacing-factor, "md");
+    }
+  }
+
+  @if map-get($breakpoints, "lg") and
+    map-get($spacing-factor, "lg") and
+    $enable-responsive-spacings {
+
+    @media (min-width: map-get($breakpoints, "lg")) {
+      padding: $spacing-block ($spacing-block*map-get($spacing-factor, "lg"));
+      margin: -$spacing-block*map-get($spacing-factor, "lg");
+      margin-top: $spacing-block*map-get($spacing-factor, "lg");
+    }
+  }
+
+  @if map-get($breakpoints, "xl") and
+    map-get($spacing-factor, "xl") and
+    $enable-responsive-spacings {
+
+    @media (min-width: map-get($breakpoints, "xl")) {
+      padding: $spacing-block ($spacing-block*map-get($spacing-factor, "xl"));
+      margin: -$spacing-block*map-get($spacing-factor, "xl");
+      margin-top: $spacing-block*map-get($spacing-factor, "xl");
+    }
+  }
+}

docs/scss/components/_nav.scss

@@ -0,0 +1,45 @@
+/**
+ * Docs: Navs
+ */
+
+body > nav {
+  -webkit-backdrop-filter: saturate(180%) blur(20px);
+  z-index: 99;
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  backdrop-filter: saturate(180%) blur(20px);
+  background-color: var(--nav-background);
+  box-shadow: 0px 1px 0 var(--nav-border);
+
+  li a {
+    border-radius: 0;
+  }
+
+  ul:first-of-type li {
+
+    // Brand
+    &:first-of-type {
+      a {
+        width: 3.5rem;
+        height: 3.5rem;
+        margin-left: -$spacing-gutter;
+        padding: 0;
+        background: var(--h1);
+        color: var(--background);
+      }
+    }
+
+    // Title
+    &:nth-of-type(2) {
+      display: none;
+      margin-left: $spacing-gutter;
+      color: var(--muted-text);
+
+      @media (min-width: map-get($breakpoints, "lg")) {
+        display: inline;
+      }
+    }
+  }
+}

docs/scss/components/_theme-switcher.scss

@@ -0,0 +1,70 @@
+/**
+ * Docs: Theme switcher
+ */
+
+button.switcher {
+  position: fixed;
+  right: $spacing-gutter/2;
+  bottom: $spacing-gutter;
+  width: auto;
+  max-width: 1rem + $spacing-gutter*2;
+  margin-bottom: 0;
+  padding: .75rem;
+  border-radius: 2rem;
+  line-height: 1;
+  text-align: right;
+  box-shadow: var(--card-shadow);
+
+  &::after {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    border: 2px solid currentColor;
+    border-radius: 50%;
+    background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);
+    vertical-align: bottom;
+    content: '';
+    transition: transform $transition;
+  }
+
+  i {
+    display: inline-block;
+    max-width: 0;
+    padding: 0;
+    overflow: hidden;
+    font-size: .875rem;
+    font-style: normal;
+    white-space: nowrap;
+  }
+
+  &:hover,
+  &:focus {
+    max-width: 100%;
+    transition: max-width $transition,
+                background-color $transition,
+                color $transition;
+  }
+
+  &:hover {
+
+    &::after {
+      transform: rotate(180deg);
+    }
+
+    i {
+      max-width: 100%;
+      padding: 0 ($spacing-gutter/2) 0 ($spacing-gutter/4);
+      transition: max-width $transition,
+                  padding $transition;
+    }
+  }
+
+  &:focus {
+    box-shadow: var(--card-shadow),
+                0 0 0 0.2rem var(--secondary-focus);
+  }
+
+  @media (min-width: map-get($breakpoints, "sm")) {
+    right: $spacing-gutter;
+  }
+}

docs/scss/content/_code.scss

@@ -0,0 +1,107 @@
+/**
+ * Docs: Code
+ */
+
+// Custom spacings for <pre> (vertically aligned with <article> content)
+pre {
+
+  @if map-get($breakpoints, "sm") and
+    map-get($spacing-factor, "sm") and
+    $enable-responsive-spacings {
+
+    @media (min-width: map-get($breakpoints, "sm")) {
+      padding: $spacing-block ($spacing-block*map-get($spacing-factor, "sm"));
+    }
+  }
+
+  @if map-get($breakpoints, "md") and
+    map-get($spacing-factor, "md") and
+    $enable-responsive-spacings {
+
+    @media (min-width: map-get($breakpoints, "md")) {
+      padding: $spacing-block ($spacing-block*map-get($spacing-factor, "md"));
+    }
+  }
+
+  @if map-get($breakpoints, "lg") and
+    map-get($spacing-factor, "lg") and
+    $enable-responsive-spacings {
+
+    @media (min-width: map-get($breakpoints, "lg")) {
+      padding: $spacing-block ($spacing-block*map-get($spacing-factor, "lg"));
+    }
+  }
+
+  @if map-get($breakpoints, "xl") and
+    map-get($spacing-factor, "xl") and
+    $enable-responsive-spacings {
+
+    @media (min-width: map-get($breakpoints, "xl")) {
+      padding: $spacing-block ($spacing-block*map-get($spacing-factor, "xl"));
+    }
+  }
+}
+
+// Badge for Valid & Invalid code
+[data-theme="invalid"],
+[data-theme="valid"] {
+  position: relative;
+  margin-bottom: 0 !important;
+
+  // Label
+  &:before {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: -$spacing-gutter;
+    padding: .375rem .75rem;
+    border-radius: 0;
+    color: var(--primary-inverse);
+    font-size: 14px;
+    line-height: 1;
+
+    @media (min-width: map-get($breakpoints, "sm")) {
+      right: 0;
+    }
+
+    @media (min-width: map-get($breakpoints, "lg")) {
+      top: $spacing-gutter;
+      right: $spacing-gutter;
+    }
+  }
+
+  // Spacing for Valid & Invalid badge
+  pre {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+}
+
+// Color for Valid & Invalid code
+[data-theme="invalid"] {
+  &:before {
+    background: var(--invalid);
+    content: 'Bulky';
+  }
+
+  pre {
+    border-color: var(--invalid);
+  }
+}
+
+[data-theme="valid"] {
+  &:before {
+    background: var(--valid);
+    content: 'Great';
+  }
+
+  pre {
+    border-color: var(--valid);
+  }
+}
+
+section[title="love"] [data-theme="invalid"] {
+  &:before {
+    content: 'Not so great';
+  }
+}

docs/scss/layout/_layout.scss

@@ -0,0 +1,242 @@
+/**
+ * Docs: Global layout
+ */
+
+$navHeight: 3.5rem;
+
+
+// Docs: Commons
+// ––––––––––––––––––––
+
+section > hgroup {
+  margin-bottom: $spacing-typography*2;
+
+  p {
+    color: var(--muted-text);
+    font-size: 1.125rem;
+  }
+}
+a[role=button] {
+  margin-right: $spacing-gutter/4;
+  margin-bottom: $spacing-typography;
+}
+
+
+// Main (Grid)
+// ––––––––––––––––––––
+
+body > main {
+  padding-top:map-get($spacing-factor, "xs") + $navHeight;
+
+  @media (min-width: map-get($breakpoints, "sm")) {
+    padding-top: map-get($spacing-factor, "sm") + $navHeight;
+  }
+
+  @media (min-width: map-get($breakpoints, "md")) {
+    padding-top: map-get($spacing-factor, "md") + $navHeight;
+  }
+
+  @media (min-width: map-get($breakpoints, "lg")) {
+    grid-column-gap: $spacing-gutter*4;
+    display: grid;
+    grid-template-columns: 200px auto;
+    padding-top: map-get($spacing-factor, "lg") + $navHeight;
+  }
+
+  @media (min-width: map-get($breakpoints, "xl")) {
+    padding-top: map-get($spacing-factor, "xl") + $navHeight;
+  }
+
+  > * {
+    min-width: 0; // HACK for childs in overflow
+  }
+}
+
+
+// Anchors hacks for internal links
+// ––––––––––––––––––––
+
+a[name]:not([href])::before {
+  display: block;
+  height: map-get($spacing-factor, "xs") + $navHeight;
+  margin-top: -(map-get($spacing-factor, "xs")+ $navHeight);
+  content: '';
+
+
+  @media (min-width: map-get($breakpoints, "sm")) {
+    height: map-get($spacing-factor, "sm") + $navHeight;
+    margin-top: -(map-get($spacing-factor, "sm") + $navHeight);
+  }
+
+  @media (min-width: map-get($breakpoints, "md")) {
+    height: map-get($spacing-factor, "md") + $navHeight;
+    margin-top: -(map-get($spacing-factor, "md") + $navHeight);
+  }
+
+  @media (min-width: map-get($breakpoints, "lg")) {
+    height: map-get($spacing-factor, "lg") + $navHeight;
+    margin-top: -(map-get($spacing-factor, "lg") + $navHeight);
+  }
+
+  @media (min-width: map-get($breakpoints, "xl")) {
+    height: map-get($spacing-factor, "xl") + $navHeight;
+    margin-top: -(map-get($spacing-factor, "xl") + $navHeight);
+  }
+}
+
+
+// Aside
+// ––––––––––––––––––––
+
+main > aside {
+
+
+  nav {
+    width: 100%;
+    margin-bottom: $spacing-block;
+
+    h1 {
+      margin-bottom: $spacing-typography;
+    }
+
+    @media (min-width: map-get($breakpoints, "lg")) {
+      position: fixed;
+      width: 200px;
+      max-height: calc(100vh - 5.5rem);
+      margin-bottom: 0;
+      overflow-x: hidden;
+      overflow-y: auto;
+
+      h1 {
+        display: none;
+      }
+    }
+  }
+
+  li, summary {
+    padding-top: 0;
+    padding-bottom: 0;
+    font-size: 16px;
+  }
+  a,
+  a.secondary {
+    &:focus {
+      background-color: transparent;
+      color: var(--primary-hover);
+    }
+  }
+
+  details {
+    padding-bottom: .25rem;
+    border-bottom: none;
+  }
+
+  details summary {
+    font-weight: 300;
+    text-transform: uppercase;
+
+    &::after {
+      display: none;
+    }
+  }
+}
+
+[role=document] {
+  section > h1,
+  section > h2,
+  section > h3 {
+    line-height: 1;
+  }
+}
+
+
+// Docs: Customization
+// ––––––––––––––––––––
+
+#customization {
+
+  figure {
+    display: grid;
+    grid-template-columns: repeat(9, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    margin-bottom: 0;
+    overflow: hidden;
+
+    @media (min-width: map-get($breakpoints, "sm")) {
+    grid-template-columns: repeat(18, 1fr);
+    grid-template-rows: 1fr;
+    border-top-right-radius: $round;
+    border-top-left-radius: $round;
+    }
+
+    ~ article {
+    margin-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    }
+
+  button {
+    margin-bottom: 0;
+    padding: 0;
+    padding-top: 100%;
+    border:none;
+    border-radius: 0;
+
+      &:focus {
+        box-shadow: none;
+      }
+
+      &.picked {
+        // Source: https://feathericons.com/
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: .66rem auto;
+        box-shadow: inset 0 0 1rem 0 rgba(0,0,0,0.25);
+      }
+      &[data-color="lime"],
+      &[data-color="yellow"],
+      &[data-color="amber"] {
+        &.picked {
+          // Source: https://feathericons.com/
+          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232c4049' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+        }
+      }
+    }
+  }
+
+  h4 {
+    transition: color $transition;
+  }
+
+  pre[data-theme="generated"] {
+    border-color: var(--primary);
+  }
+}
+
+
+// Docs: Grids
+// ––––––––––––––––––––
+
+#grids {
+
+  button {
+    display: inline-block;
+    width: auto;
+    margin-right: .5rem;
+
+    svg {
+      stroke: var(--secondary);
+      margin-right: .5rem;
+      border: 3px solid currentColor;
+      border-radius: 1rem;
+      background: currentColor;
+    }
+  }
+
+  .grid > * {
+    padding: ($spacing-gutter/2) 0;
+    background: var(--code-background);
+    text-align: center;
+  }
+}

docs/scss/pico.docs.scss

@@ -0,0 +1,22 @@
+/*!
+ * Pico: Customs styles for Docs
+ */
+
+// Config
+@import "../../scss/colors";
+@import "../../scss/variables";
+
+// Theming
+@import "themes/light";
+@import "themes/dark";
+
+// Layout
+@import "layout/layout";
+
+// Content
+@import "content/code";
+
+// Components
+@import "components/nav";
+@import "components/card-code";
+@import "components/theme-switcher";

docs/scss/themes/_dark.scss

@@ -0,0 +1,23 @@
+/**
+ * Dark theme (Auto) [Additions for docs]
+ * Automatically enabled if user has Dark mode enabled
+ */
+
+@media only screen and (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --nav-background: #{rgba(darken($grey-900, 6%), .8)};
+    --nav-border:     #{rgba($grey-500, .2)};
+  }
+}
+
+
+
+/**
+ * Dark theme (Forced) [Additions for docs]
+ * Enabled if forced with data-theme="dark"
+ */
+
+[data-theme="dark"] {
+  --nav-background: #{rgba(darken($grey-900, 6%), .8)};
+  --nav-border:     #{rgba($grey-500, .2)};
+}

docs/scss/themes/_light.scss

@@ -0,0 +1,10 @@
+/**
+ * Light theme (Default) [Additions for docs]
+ * Can be forced with data-theme="light"
+ */
+
+[data-theme="light"],
+:root:not([data-theme="dark"]) {
+  --nav-background: #{rgba($white, .7)};
+  --nav-border:     #{rgba($grey-500, .2)};
+}