pallote-css 0.0.0

package/assets/_sass/components/_navbar.scss

@@ -0,0 +1,207 @@
+// —————————————————————————————————————————————————————————————————
+// navbar
+// nav
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// navbar
+// —————————————————————————————————————————————————————————————————
+
+.navbar {
+  top: 0;
+  left: 0;
+  width: 100vw;
+  background-color: $background-paper;
+  box-shadow: $box-shadow;
+
+  @include responsive(up, tablet) {
+    height: $navbar-height;
+  }
+
+  &.section {
+    position: sticky;
+    border-bottom: $border;
+  }
+
+  .section__container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: 0;
+    padding-bottom: 0;
+
+    @include responsive(up, tablet) {
+      height: 100%;
+    }
+
+    @include responsive(down, tablet) {
+      flex-direction: column;
+      align-items: stretch;
+      padding-top: 0;
+    }
+  }
+
+  &__button {
+    top: $spacing-md*1.5;
+    position: absolute;
+  }
+
+  &__main {
+    display: flex;
+    align-items: center;
+
+    @include responsive(down, tablet) {
+      justify-content: space-between;
+      padding-left: $spacing-lg;
+      height: $spacing-xl - $spacing-md;
+    }
+  }
+
+  &__logo {
+    display: flex;
+    align-items: baseline;
+    font-weight: $font-bold;
+
+    > * {
+      margin-right: $spacing-xs;
+    }
+  }
+
+  &__nav.nav {
+
+    @include responsive(down, tablet) {
+      @include transition($transition-md, max-height);
+      align-items: flex-start;
+      max-height: 0;
+      overflow: hidden;
+
+      .js-opened & {
+        max-height: 50vh;
+      }
+    }
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// nav
+// —————————————————————————————————————————————————————————————————
+
+// .nav {
+
+//   @include responsive(up, tablet) {
+//     height: 100%;
+//   }
+
+//   &__container {
+//     display: flex;
+//     list-style: none;
+
+//     @include responsive(up, tablet) {
+//       height: 100%;
+//       align-items: center;
+//     }
+
+//     @include responsive(down, tablet) {
+//       @include calc(max-height, '100vh - '$spacing-xl*3);
+//       align-items: flex-start;
+//       // overflow: scroll;
+//       width: 100%;
+//       padding-bottom: $spacing-md;
+//       flex-direction: column;
+//       width: 100%;
+//     }
+//   }
+
+//   &__item {
+//     // override ul & li styling
+//     margin-left: 0;
+
+//     & + & {
+//       padding-top: 0;
+//     }
+
+//     @include responsive(up, tablet) {
+//       margin-left: $spacing-sm;
+//     }
+
+//     @include responsive(down, tablet) {
+//       width: 100%;
+//       display: flex;
+//     }
+//   }
+
+//   &__trigger {
+//     position: relative;
+//     display: inline-flex;
+//     flex-direction: column;
+//     align-items: center;
+//     justify-content: center;
+//     position: relative;
+//     line-height: 1;
+//     height: $spacing-md*2;
+//     color: inherit;
+//     padding-right: $spacing-md;
+//     padding-left: $spacing-md;
+//     font-weight: $font-bold;
+
+//     @include responsive(down, tablet) {
+//       width: 100%;
+//       margin-bottom: $spacing-xs;
+//       padding: $spacing-md - $spacing-xs;
+//       align-items: flex-start;
+//       border-radius: $border-radius-sm;
+
+//       @include hover {
+//         background-color: $background-paper;
+//       }
+//     }
+
+//     @include responsive(up, tablet) {
+
+//       &:before {
+//         @include transition($transition-md, opacity);
+//         content: "";
+//         position: absolute;
+//         top: 0;
+//         right: 0;
+//         bottom: 0;
+//         left: 0;
+//         background-color: $background-paper;
+//         border-radius: $border-radius-sm;
+//         z-index: -1;
+//         opacity: 0;
+//       }
+
+//       @include hover {
+
+//         &:before {
+//           opacity: 1;
+//         }
+//       }
+//     }
+
+//     &--active {
+//       color: $primary;
+
+//       @include responsive(up, tablet) {
+
+//         &:after {
+//           content: "";
+//           position: absolute;
+//           bottom: -14px;
+//           left: 0;
+//           width: 100%;
+//           height: $spacing-sm;
+//           background-color: $primary;
+//           border-top-left-radius: $border-radius-sm;
+//           border-top-right-radius: $border-radius-sm;
+//         }
+//       }
+
+//       @include responsive(down, tablet) {
+//         background-color: $background-paper;
+//       }
+//     }
+//   }
+// }

package/assets/_sass/components/_page.scss

@@ -0,0 +1,33 @@
+// —————————————————————————————————————————————————————————————————
+// elements
+// withSidebar
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.page {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  
+  &__content {
+    width: 100%;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// withSidebar
+// —————————————————————————————————————————————————————————————————
+
+.page--withSidebar {
+
+  .page__container {
+    display: flex;
+  }
+
+  .section__container {
+    max-width: none;
+  }
+}

package/assets/_sass/components/_section.scss

@@ -0,0 +1,158 @@
+// —————————————————————————————————————————————————————————————————
+// elements
+// alignement
+// color
+// size
+// variants
+// overrides
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.section {
+  @include clamp(padding-right, $spacing-md, 4vw, $spacing-xl);
+  @include clamp(padding-left, $spacing-md, 4vw, $spacing-xl);
+  overflow: hidden; // prevent horizontal scroll on mobile
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  &__container {
+    @include clamp(padding-top, $spacing-lg, 8vw, $spacing-xl);
+    @include clamp(padding-bottom, $spacing-lg, 8vw, $spacing-xl);
+    width: 100%;
+    max-width: $desktop;
+    position: relative; // needed to have the content over section--landing:before
+  }
+
+  &__header {
+
+    & + .section__content { @include clamp(padding-top, $spacing-lg, 8vw, $spacing-xl); }
+    &--dense + .section__content { padding-top: $spacing-lg; }
+  }
+
+  &__content {
+    width: 100%;
+
+    & + & {
+      margin-top: $spacing-lg;
+    }
+  }
+
+  &__label {
+    color: $text-alt;
+    font-weight: $font-bold;
+  }
+  
+  &__title {
+    @extend %h3;
+    color: $primary;
+    max-width: $desktop*0.75;
+    
+    .section__label + & {
+      margin-top: $spacing-sm;
+    }
+
+    .section__header--dense & {
+      color: inherit;
+      @extend %h4;
+    }
+  }
+  
+  &__subtitle {
+    @extend %body;
+    max-width: $max-width-subtitle;
+    
+    .section__title + & {
+      margin-top: $spacing-lg - $spacing-md;
+    }
+
+    & + & {
+      margin-top: $spacing-md;
+    }
+  }
+
+  &__actions {
+
+    .section__title + &,
+    .section__subtitle + & {
+      margin-top: $spacing-lg;
+    }
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// alignement
+// —————————————————————————————————————————————————————————————————
+
+.section {
+
+  &--left { align-items: flex-start; text-align: left; }
+  &--center { align-items: center; text-align: center; }
+  &--right { align-items: flex-end; text-align: right; }
+}
+
+// —————————————————————————————————————————————————————————————————
+// color
+// —————————————————————————————————————————————————————————————————
+
+@mixin color($background-color, $color-title: $primary, $color: $text) {
+  background-color: $background-color;
+  color: $color;
+
+  & + & {
+
+    .section__container {
+      padding-top: 0;
+    }
+  }
+
+  .section__title { color: $color-title; }
+  .button--stroke { color: $color; }
+}
+
+.section {
+
+  &--default { @include color($background-default); }
+  &--paper { @include color($background-paper); }
+  &--primary { @include color($primary, $primary-text, $primary-text); }
+  &--primaryLight { @include color($primary-light); }
+}
+
+// —————————————————————————————————————————————————————————————————
+// size
+// —————————————————————————————————————————————————————————————————
+
+.section__content {
+
+  &--mobile { max-width: $mobile; }
+}
+
+// —————————————————————————————————————————————————————————————————
+// variants
+// —————————————————————————————————————————————————————————————————
+
+.section--landing {
+  align-items: center;
+
+  .section__title { @extend %h1; max-width: $desktop*0.5; }
+  .section__subtitle { @extend %h5; }
+}
+
+// first section of the page for page title
+.section--header {
+
+  .section__title { @extend %h2; }
+  .section__subtitle { @extend %subtitle; }
+}
+
+// —————————————————————————————————————————————————————————————————
+// overrides
+// —————————————————————————————————————————————————————————————————
+
+.footer {
+  border-top: $border;
+}

package/assets/_sass/components/_sidebar.scss

@@ -0,0 +1,27 @@
+.sidebar {
+  @include calc(height, '100vh - '$navbar-height);
+  position: sticky;
+  flex-shrink: 0;
+  border-right: $border;
+  width: 200px;
+  top: $navbar-height;
+  padding: $spacing-lg $spacing-md;
+  overflow-y: scroll;
+  scrollbar-color: light;
+
+  &__nav {
+    flex-direction: column;
+    
+    .nav {
+
+      &__group {
+        flex-direction: column;
+        align-items: stretch;
+      }
+
+      &__trigger {
+        width: 100%;
+      }
+    }
+  }
+}

package/assets/_sass/components/_tag.scss

@@ -0,0 +1,78 @@
+// —————————————————————————————————————————————————————————————————
+// elements
+// color
+// size
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.tags {
+  display: flex;
+  
+  .tag:not(:last-child) {
+    margin-right: $spacing-xs;
+  }
+
+  &--portrait {
+    flex-direction: column;
+    align-items: flex-start;
+  
+    .tag:not(:last-child) {
+      margin-bottom: $spacing-xs;
+      margin-right: 0;
+    }
+  }
+}
+
+.tag {
+  @extend %caption;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: $font-bold;
+  border-radius: $border-radius-sm;
+  white-space: nowrap; // prevent text to go on multiple lines
+  height: $spacing-md*1.5;
+  padding-right: $spacing-sm*0.75;
+  padding-bottom: 0.2em;
+  padding-left: $spacing-sm*0.75;
+}
+
+// —————————————————————————————————————————————————————————————————
+// color
+// —————————————————————————————————————————————————————————————————
+
+@mixin color($prefix, $colors...) {
+
+  @each $i in $colors {
+    .#{$prefix}#{nth($i, 1)} {
+      background-color: nth($i, 2);
+      color: nth($i, 3);
+    }
+  }
+}
+
+@include color('tag',
+  '' $primary $primary-text,
+  '--secondary' $secondary $secondary-text,
+  '--highlight' $highlight $highlight-text,
+  '--grey' $text-disabled $text,
+  '--success' $success $success-contrast,
+  '--info' $info $info-contrast,
+  '--warning' $warning $warning-contrast,
+  '--error' $error $error-contrast
+);
+
+// —————————————————————————————————————————————————————————————————
+// dense
+// —————————————————————————————————————————————————————————————————
+
+.tag--dense {
+  @extend %overline;
+  height: $spacing-md;
+  padding-right: $spacing-xs;
+  padding-left: $spacing-xs;
+  padding-bottom: 0.1em;
+}

package/assets/_sass/components/_text.scss

@@ -0,0 +1,89 @@
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+@mixin font-size($font-size, $font-weight, $line-height) {
+	font-size: $font-size;
+	font-weight: $font-weight;
+	line-height: $line-height;
+}
+
+.h1, %h1 {
+	@include font-size(
+		$h1-size,
+		$h1-weight,
+		$h1-line-height
+	);
+}
+
+.h2, %h2 {
+	@include font-size(
+		$h2-size,
+		$h2-weight,
+		$h2-line-height
+	);
+}
+
+.h3, %h3 {
+	@include font-size(
+		$h3-size,
+		$h3-weight,
+		$h3-line-height
+	);
+}
+
+.h4, %h4 {
+	@include font-size(
+		$h4-size,
+		$h4-weight,
+		$h4-line-height
+	);
+}
+
+.h5, %h5 {
+	@include font-size(
+		$h5-size,
+		$h5-weight,
+		$h5-line-height
+	);
+}
+
+.h6, %h6 {
+	@include font-size(
+		$h6-size,
+		$h6-weight,
+		$h6-line-height
+	);
+}
+
+.subtitle, %subtitle {
+	@include font-size(
+		$subtitle-size,
+		$subtitle-weight,
+		$subtitle-line-height
+	);
+}
+
+.body, %body {
+	@include font-size(
+		$body-size,
+		$body-weight,
+		$body-line-height
+	);
+}
+
+.caption, %caption {
+	@include font-size(
+		$caption-size,
+		$caption-weight,
+		$caption-line-height
+	);
+}
+
+.overline, %overline {
+	@include font-size(
+		$overline-size,
+		$overline-weight,
+		$overline-line-height
+	);
+}

package/assets/_sass/modules/_cookie.scss

@@ -0,0 +1,32 @@
+.cookie {
+
+  
+  &.section {
+    @include transition($transition-md, transform);
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: none;
+    background-color: $background-default;
+    text-align: left;
+    
+    .section__container {
+      padding-top: 10px;
+      padding-bottom: 9px;
+      flex-direction: row;
+      align-items: baseline;
+      justify-content: flex-start;
+    }
+  }
+
+  &.js-cookie-accepted {
+    @include transition($transition-md, transform);
+    transform: translateY(100%);
+  }
+
+  &__text {
+    display: inline;
+    margin-right: $spacing-xs;
+  }
+}

package/assets/_sass/plugins/_highlighter-theme.scss

@@ -0,0 +1,68 @@
+.highlight,
+.highlighter-rouge {
+  position: relative;
+  font-family: monospace;
+  font-size: 0.75rem;
+  background-color: $background-paper;
+  color: #EFF0F2;
+  padding: $spacing-md;
+  border-radius: $border-radius-md;
+  width: 100%;
+  
+  &.language-plaintext {
+    color: $text;
+    border-radius: $border-radius-sm;
+    padding: $spacing-xs $spacing-sm;
+
+    a & {
+      color: $primary-text;
+      background-color: $primary-light;
+    }
+  }
+
+  .highlight {
+    padding: 0;
+  }
+
+  pre {
+    margin: 0;
+    white-space: break-spaces;
+  }
+
+  p &, 
+  ul &, 
+  ol &, 
+  table & {
+    width: auto;
+  }
+
+  .tag {
+    font-family: $font;
+    float: right;
+    margin-top: 1px;
+    margin-right: -$spacing-xs;
+  }
+}
+
+.highlight {
+
+  .ge { font-style: italic; }
+
+  .hll { background-color: #49483e; }
+  .err { background-color: #1e0010; }
+
+  .err { color: #960050; }
+  .k, .kd, .kt, .no { color: #66d9ef; }
+  // css properties values
+  .il, .l, .m, .mo, .se { color: #D29132; }
+  // ponctuation
+  .n, .nb, .ni, .nn, .nv, .p, .py, .vi, .w { color: #EFF0F2; }
+  // tags in html
+  .gd, .nt, .kn, .o, .ow { color: #B1B9D4; }
+  // comments
+  .c, .cm, .cp, .c1, .cs { color: #636B7B; }
+  // classes in css
+  .kc, .kp, .kr, .ld, .mf, .mh, .mi, .s, .sb, .sc, .sd, .s2, .sh, .si, .sx, .sr, .s1, .ss { color: #EDD3AD; }
+  .na, .nc, .nd, .ne, .nf, .nl, .nx, .gi { color: #FFDC46; }
+  .bp, .vc, .vg, .gu { color: #75715e; }
+}