Refactored admonition styles to be slightly lighter

2026-08-02 02:38:53 -04:00 · 2016-10-21 21:15:35 +02:00
parent 130bd9fe0b
commit 46b7e0f5fe
11 changed files with 433 additions and 149 deletions
--- a/src/assets/stylesheets/_config.scss
+++ b/src/assets/stylesheets/_config.scss
@@ -79,7 +79,7 @@ $md-icon-padding:                     $ms-base * 0.5;
 $md-icon-margin:                      $ms-base * 0.25;

 // Code blocks
-$md-code-background:                  #F7F7F7;
+$md-code-background:                  hsla(0, 0%, 0%, 0.035);
 $md-code-color:                       #37474F;

 // Keystrokes
--- a/src/assets/stylesheets/_shame.scss
+++ b/src/assets/stylesheets/_shame.scss
@@ -48,7 +48,7 @@
    max-height: 0vh; // TODO: can this be done in percent!?!?!?
    opacity: 0;
    transition: opacity .4s, max-height .4s;
-    .md-js__search--locked & {
+    [data-md-locked] & {
      max-height: 75vh;
      opacity: 1;
    }
@@ -56,9 +56,9 @@
    position: absolute; // must be absolute, or header nav will stretch
    background: $md-color-white;
    // color: red;
-    border-top: px2rem(1px) solid $md-color-black--lightest; // TODO: box-shadow inset!
+    border-top: 0.1rem solid $md-color-black--lightest; // TODO: box-shadow inset!
    text-align: left;                                        // TODO: wrap with another div for this effect
-    border-radius: 0 0 px2rem(3px) px2rem(3px);
+    border-radius: 0 0 0.3rem 0.3rem;
    z-index: -1;

    // Override native scrollbar styles
@@ -108,13 +108,13 @@
      margin: 0;
      padding: 0;
      list-style-type: none;
-      border-top: px2rem(1px) solid $md-color-black--lightest;
+      border-top: 0.1rem solid $md-color-black--lightest;
    }

    &__item {
      // background: yellow;

-      // border-top: px2rem(1px) solid $md-color-black--lightest;
+      // border-top: 0.1rem solid $md-color-black--lightest;
    }


@@ -161,10 +161,10 @@
 //
 //
 //   background: $md-color-white;
-//   border-radius: 0 0 px2rem(3px) px2rem(3px);
+//   border-radius: 0 0 0.3rem 0.3rem;
 //   color: #000000;
 //   text-align: left;
-//   border-top: px2rem(1px) solid $md-color-black--lightest;
+//   border-top: 0.1rem solid $md-color-black--lightest;
 //   display: none; // TODO: doesnt work due to display: none;
 //   opacity: 0;
 //
@@ -181,7 +181,7 @@
 // }

 .md-search__input:focus {
-  border-radius: px2rem(3px) px2rem(3px) 0 0;
+  border-radius: 0.3rem 0.3rem 0 0;
 }

@include break-to-device(mobile landscape) {
@@ -398,4 +398,6 @@ mark {

 .md-search__output {
  overflow-y: auto; // necessary for rounded borders
-}
+}
+
+// TODO: integrate stylelint and property order!
--- a/src/assets/stylesheets/base/_typeset.scss
+++ b/src/assets/stylesheets/base/_typeset.scss
@@ -132,7 +132,7 @@ kbd {
  // Horizontal separators
  hr {
    margin: 2.4rem 0;
-    border-bottom: px2rem(1px) dotted $md-color-black--lighter;
+    border-bottom: 0.1rem dotted $md-color-black--lighter;
  }

  // Links
@@ -223,14 +223,14 @@ kbd {
  kbd {
    display: inline-block;
    padding: 0.4rem 0.5rem 0.5rem;
-    border: px2rem(1px) solid darken($md-keyboard-background, 20%);
-    border-radius: px2rem(3px);
+    border: 0.1rem solid darken($md-keyboard-background, 20%);
+    border-radius: 0.2rem;
    border-bottom-color: darken($md-keyboard-background, 25%);
    background-color: $md-keyboard-background;
    color: $md-keyboard-color;
    font-size: 85%;
    line-height: 1.0rem;
-    box-shadow: 0 #{-(px2rem(1px))} 0
+    box-shadow: 0 -0.1rem 0
      darken($md-keyboard-background, 30%) inset;
    vertical-align: 0.1rem;
    word-break: break-word;
@@ -250,7 +250,7 @@ kbd {
  // Blockquotes, possibly nested
  blockquote {
    padding-left: 1.2rem;
-    border-left: px2rem(4px) solid $md-color-black--lighter;
+    border-left: 0.4rem solid $md-color-black--lighter;
    color: $md-color-black--light;
  }

--- a/src/assets/stylesheets/extensions/_admonition.scss
+++ b/src/assets/stylesheets/extensions/_admonition.scss
@@ -26,28 +26,12 @@

 // Admonition extension
 .admonition {
-  position: relative;
  margin: 2.0rem 0;
-  padding: 0.8rem 1.6rem;
-  border-left: px2rem(32px) solid $clr-blue-a200;
-  border-radius: px2rem(2px);
+  padding: 0.8rem 1.2rem;
+  border-left: 0.4rem solid $clr-blue-a200;
+  border-radius: 0 0.2rem 0.2rem 0;
  background: transparentize($clr-blue-a200, 0.95);

-  // Icon
-  &::before {
-    display: block;
-    position: absolute;     // TODO: inherit icon!
-    top: 0.2rem;
-    left: -2.6rem;
-    float: left;
-    color: $md-color-white;
-    font-family: "Material Icons";
-    font-size: 2.0rem;
-    font-weight: normal;
-    content: "edit";
-    vertical-align: -0.1em;
-  }
-
  // Title
  &-title {
    color: $clr-blue-a400;
@@ -56,14 +40,24 @@
    line-height: 2;
    text-transform: uppercase;

-    // Ensure smaller spacing to next element
+    // Remove bottom spacing for title
    html & {
-      margin-bottom: 1.6rem;
+      margin-bottom: 0;
    }

-    // Ensure smaller spacing to next element
+    // Remove top spacing for first element following title
    html & + * {
-      margin-top: 1.6rem;
+      margin-top: 0;
+    }
+
+    // Icon
+    &::before {
+      @extend %md-icon;
+
+      margin-right: 0.45em;
+      font-size: 2.0rem;
+      content: "edit";
+      vertical-align: -0.25em;
    }
  }

@@ -82,9 +76,9 @@
    summary tldr: $clr-light-blue-a400 "subject",
    tip idea: $clr-teal-a700 "whatshot",
    success check done: $clr-green-a400 "done",
-    warning warn: $clr-orange-a400 "warning",
+    warning attention important: $clr-orange-a400 "warning",
    failure fail missing: $clr-red-a200 "clear",
-    danger fatal: $clr-red-a400 "flash_on",
+    danger caution: $clr-red-a400 "flash_on",
    error bug: $clr-pink-a400 "bug_report"
  ) {
    $tint: nth($appearance, 1);
@@ -96,14 +90,14 @@
      border-color: $tint;
      background: transparentize($tint, 0.95);

-      // Icon
-      &::before {
-        content: $icon;
-      }
-
      // Set color for title
      .admonition-title {
        color: $tint;
+
+        // Icon
+        &::before {
+          content: $icon;
+        }
      }
    }

--- a/src/assets/stylesheets/extensions/_codehilite.scss
+++ b/src/assets/stylesheets/extensions/_codehilite.scss
@@ -20,6 +20,60 @@
 /// DEALINGS
 ////

+// ----------------------------------------------------------------------------
+// Variables
+// ----------------------------------------------------------------------------
+
+// Keywords
+$codehilite-keyword: #3B78E7;
+$codehilite-keyword-declaration: #3B78E7;
+$codehilite-keyword-namespace: #3B78E7;
+$codehilite-keyword-reserved: #3E61A2;
+$codehilite-keyword-type: #3E61A2;
+
+// Comments
+$codehilite-comment: #999999;
+$codehilite-comment-multiline: #999999;
+$codehilite-comment-preproc: #666666;
+$codehilite-comment-single: #999999;
+$codehilite-comment-special: #999999;
+
+// Names
+$codehilite-name-attribute: #C2185B;
+$codehilite-name-builtin: #C2185B;
+$codehilite-name-builtin-pseudo: #3E61A2;
+$codehilite-name-class: #C2185B;
+$codehilite-name-constant: #3E61A2;
+$codehilite-name-decorator: #666666;
+$codehilite-name-entity: #666666;
+$codehilite-name-exception: #C2185B;
+$codehilite-name-function: #C2185B;
+$codehilite-name-label: #3B5179;
+$codehilite-name-namespace: #EC407A;
+$codehilite-name-tag: #3B78E7;
+$codehilite-name-variable: #3E61A2;
+$codehilite-name-variable-class: #3E61A2;
+$codehilite-name-variable-instance: #3E61A2;
+$codehilite-name-variable-global: #3E61A2;
+$codehilite-name-extension: #EC407A;
+
+// Literals
+$codehilite-literal-string: #0D904F; // #1eec86 for dark background
+$codehilite-literal-string-backticks: #0D904F;
+$codehilite-literal-string-char: #0D904F;
+$codehilite-literal-string-doc: #999999;
+$codehilite-literal-string-double: #0D904F;
+$codehilite-literal-string-single: #0D904F;
+$codehilite-literal-string-symbol: #0D904F;
+
+// Numbers
+$codehilite-literal-number: #E74C3C;
+$codehilite-literal-number-float: #E74C3C;
+$codehilite-literal-number-hex: #E74C3C;
+$codehilite-literal-number-integer: #E74C3C;
+$codehilite-literal-number-integer-long: #E74C3C;
+$codehilite-literal-number-oct: #E74C3C;
+
 // ----------------------------------------------------------------------------
 // Rules
 // ----------------------------------------------------------------------------
@@ -45,62 +99,62 @@
  .gt { color: #AA0000; } // Generic.Traceback

  // Keywords
-  .k  { color: #A71D5D; } // Keyword
+  .k  { color: $codehilite-keyword; }
  .kc { color: #A71D5D; } // Keyword.Constant
-  .kd { color: #A71D5D; } // Keyword.Declaration
-  .kn { color: #A71D5D; } // Keyword.Namespace
+  .kd { color: $codehilite-keyword-declaration; }
+  .kn { color: $codehilite-keyword-namespace; }
  .kp { color: #A71D5D; } // Keyword.Pseudo
-  .kr { color: #0086B3; } // Keyword.Reserved
-  .kt { color: #0086B3; } // Keyword.Type
+  .kr { color: $codehilite-keyword-reserved; }
+  .kt { color: $codehilite-keyword-type; }

  // Comments
-  .c  { color: #969896; } // Comment
-  .cm { color: #969896; } // Comment.Multiline
-  .cp { color: #666666; } // Comment.Preproc
-  .c1 { color: #969896; } // Comment.Single
-  .cs { color: #969896; } // Comment.Special
+  .c  { color: $codehilite-comment; }
+  .cm { color: $codehilite-comment-multiline; }
+  .cp { color: $codehilite-comment-preproc; }
+  .c1 { color: $codehilite-comment-single; }
+  .cs { color: $codehilite-comment-special; }

  // Names
-  .na { color: #795DA3; } // Name.Attribute
-  .na { color: #795DA3; } // Name.Attribute
-  .nb { color: #795DA3; } // Name.Builtin
-  .bp { color: #795DA3; } // Name.Builtin.Pseudo
-  .nc { color: #795DA3; } // Name.Class
-  .no { color: #795DA3; } // Name.Constant
-  .nd { color: #795DA3; } // Name.Decorator
-  .ni { color: #795DA3; } // Name.Entity
-  .ne { color: #795DA3; } // Name.Exception
-  .nf { color: #795DA3; } // Name.Function
-  .nl { color: #795DA3; } // Name.Label
-  .nn { color: #795DA3; } // Name.Namespace
-  .nt { color: #795DA3; } // Name.Tag
-  .nv { color: #795DA3; } // Name.Variable
-  .vc { color: #795DA3; } // Name.Variable.Class
-  .vg { color: #795DA3; } // Name.Variable.Global
-  .vi { color: #795DA3; } // Name.Variable.Instance
-  .ow { color: inherit; } // Operator.Word
+  .na { color: $codehilite-name-attribute; }
+  .nb { color: $codehilite-name-builtin; }
+  .bp { color: $codehilite-name-builtin-pseudo; }
+  .nc { color: $codehilite-name-class; }
+  .no { color: $codehilite-name-constant; }
+  .nd { color: $codehilite-name-entity; }
+  .ni { color: $codehilite-name-entity; }
+  .ne { color: $codehilite-name-exception; }
+  .nf { color: $codehilite-name-function; }
+  .nl { color: $codehilite-name-label; }
+  .nn { color: $codehilite-name-namespace; }
+  .nt { color: $codehilite-name-tag; }
+  .nv { color: $codehilite-name-variable; }
+  .vc { color: $codehilite-name-variable-class; }
+  .vg { color: $codehilite-name-variable-global; }
+  .vi { color: $codehilite-name-variable-instance; }
+  .nx { color: $codehilite-name-extension; }
+  .ow { color: inherit; }

  // Numbers
-  .m  { color: #0086B3; } // Literal.Number
-  .mf { color: #0086B3; } // Literal.Number.Float
-  .mh { color: #0086B3; } // Literal.Number.Hex
-  .mi { color: #0086B3; } // Literal.Number.Integer
-  .mo { color: #0086B3; } // Literal.Number.Oct
-  .il { color: #0086B3; } // Literal.Number.Integer.Long
+  .m  { color: $codehilite-literal-number; }
+  .mf { color: $codehilite-literal-number-float; }
+  .mh { color: $codehilite-literal-number-hex; }
+  .mi { color: $codehilite-literal-number-integer; }
+  .il { color: $codehilite-literal-number-integer-long; }
+  .mo { color: $codehilite-literal-number-oct; }

  // Strings
-  .s  { color: #183691; } // Literal.String
-  .sb { color: #183691; } // Literal.String.Backtick
-  .sc { color: #183691; } // Literal.String.Char
-  .sd { color: #183691; } // Literal.String.Doc
-  .s2 { color: #183691; } // Literal.String.Double
+  .s  { color: $codehilite-literal-string; }
+  .sb { color: $codehilite-literal-string-backticks; }
+  .sc { color: $codehilite-literal-string-char; }
+  .sd { color: $codehilite-literal-string-doc; }
+  .s2 { color: $codehilite-literal-string-double; }
  .se { color: #183691; } // Literal.String.Escape
  .sh { color: #183691; } // Literal.String.Heredoc
  .si { color: #183691; } // Literal.String.Interpol
  .sx { color: #183691; } // Literal.String.Other
  .sr { color: #009926; } // Literal.String.Regex
-  .s1 { color: #D01040; } // Literal.String.Single
-  .ss { color: #990073; } // Literal.String.Symbol
+  .s1 { color: $codehilite-literal-string-single; }
+  .ss { color: $codehilite-literal-string-symbol; }

  // Diffs
  .gd { background-color: #FFDDDD; } // Generic.Deleted
--- a/src/assets/stylesheets/helpers/_px2em.scss
+++ b/src/assets/stylesheets/helpers/_px2em.scss
@@ -44,24 +44,3 @@
    @error "Invalid size: #{$size} - unit must be 'px'";
  }
 }
-
-///
-/// Convert font size in px to rem.
-///
-/// @group  helpers
-/// @access public
-/// @param  {Number} $size Font size in px
-/// @param  {Number} $base Base font size
-/// @return {Number}       Font size in rem
-///
-@function px2rem($size, $base: 10px) {
-  @if unit($size) == px {
-    @if unit($base) == px {
-      @return ($size / $base) * 1.0rem;
-    } @else {
-      @error "Invalid base: #{$base} - unit must be 'px'";
-    }
-  } @else {
-    @error "Invalid size: #{$size} - unit must be 'px'";
-  }
-}
--- a/src/assets/stylesheets/layout/_base.scss
+++ b/src/assets/stylesheets/layout/_base.scss
@@ -47,7 +47,7 @@ body {
  min-height: 100%;

  // Lock body to viewport height (e.g. in search mode)
-  &.md-js__body--locked {
+  &[data-md-locked] {
    height: 100%;
    overflow: hidden;
  }
@@ -56,7 +56,7 @@ body {
 // Horizontal separators
 hr {
  display: block;
-  height: px2rem(1px);
+  height: 0.1rem;
  padding: 0;
  border: 0;
 }
--- a/src/assets/stylesheets/layout/_nav.scss
+++ b/src/assets/stylesheets/layout/_nav.scss
@@ -31,7 +31,7 @@

  // Table of contents
  &--secondary {
-    border-left: px2rem(4px) solid $md-color-primary;
+    border-left: 0.4rem solid $md-color-primary;
  }

  // List title
--- a/src/assets/stylesheets/layout/_search.scss
+++ b/src/assets/stylesheets/layout/_search.scss
@@ -74,7 +74,7 @@
  // Search form
  &__form {
    position: relative;
-    border-radius: px2rem(2px);
+    border-radius: 0.2rem;
    text-align: right;

    // [mobile -]: Add drop-shadow on mobile
@@ -88,7 +88,7 @@
      transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1.0);

      // Active search field
-      .md-js__search--locked & {
+      [data-md-locked] & {
        width: 66.8rem;
      }
    }
@@ -117,7 +117,7 @@
  // Search field
  &__input {
    padding: 0 1.6rem 0 6.4rem;
-    border-radius: px2rem(2px);
+    border-radius: 0.2rem;
    text-overflow: ellipsis;

    // Placeholder and icon color in active state
@@ -157,8 +157,8 @@
      }

      // Active search field
-      .md-js__search--locked & {
-        border-radius: px2rem(3px) px2rem(3px) 0 0;
+      [data-md-locked] & {
+        border-radius: 0.3rem 0.3rem 0 0;
        background: $md-color-white;
        color: $md-color-black;
        text-overflow: none;
--- a/src/assets/stylesheets/layout/_sidebar.scss
+++ b/src/assets/stylesheets/layout/_sidebar.scss
@@ -37,8 +37,8 @@
    top: 5.6rem;
  }

-  // Omit repaint of whole page by promoting primary sidebar - not the
-  // secondary sidebar, because then the thick line becomes jittery
+  // Omit repaint of whole page by promoting primary sidebar to a separate
+  // layer, but not the secondary sidebar to omit jittering
  &--primary {
    backface-visibility: hidden;
  }
@@ -151,7 +151,7 @@

    // [screen +]: Add line for reference
    @include break-from-device(screen) {
-      border-right: px2rem(1px) solid $md-color-black--lightest;
+      border-right: 0.1rem solid $md-color-black--lightest;
    }
  }
 }