Merge branch 'master' of https://github.com/luizdepra/hugo-coder into luizdepra-master

assets/js/dark-mode.js

@@ -0,0 +1,28 @@
+const body = document.body;
+const darkModeToggle = document.getElementById('dark-mode-toggle');
+const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+// Check if user preference is set, if not check value of body class for light or dark else it means that colorscheme = auto
+if (localStorage.getItem("colorscheme")) {
+  setTheme(localStorage.getItem("colorscheme"));
+} else if (body.classList.contains('colorscheme-light') || body.classList.contains('colorscheme-dark')) {
+  setTheme(body.classList.contains("colorscheme-dark") ? "dark" : "light");
+} else {
+  setTheme(darkModeMediaQuery.matches ? "dark" : "light");
+}
+
+darkModeToggle.addEventListener('click', () => {
+  setTheme(body.classList.contains("colorscheme-dark") ? "light" : "dark");
+});
+
+darkModeMediaQuery.addListener((event) => {
+  setTheme(event.matches ? "dark" : "light");
+});
+
+function setTheme(theme) {
+  body.classList.remove('colorscheme-auto');
+  inverse = theme === 'dark' ? 'light' : 'dark';
+  localStorage.setItem('colorscheme', theme);
+  body.classList.remove('colorscheme-' + inverse);
+  body.classList.add('colorscheme-' + theme);
+}

assets/scss/_base.scss

@@ -26,6 +26,7 @@ a {
   font-weight: 300;
   color: $link-color;
   text-decoration: none;
+  transition: all .25s ease-in;
   &:focus,
   &:hover {
     text-decoration: underline;
@@ -46,6 +47,24 @@ h6 {
   font-weight: 700;
   color: $alt-fg-color;
   margin: 6.4rem 0 3.2rem 0;
+
+  &:hover .heading-link {
+    visibility: visible;
+  }
+
+  .heading-link {
+    color: $link-color;
+    font-weight: inherit;
+    text-decoration: none;
+    font-size: 80%;
+    visibility: hidden;
+  }
+
+  .title-link {
+    color: inherit;
+    font-weight: inherit;
+    text-decoration: none;
+  }
 }
 
 h1 {
@@ -210,3 +229,10 @@ figure {
 .fas {
   font-weight: 900;
 }
+
+img.emoji {
+  height: 1em;
+  width: 1em;
+  margin: 0 .05em 0 .1em;
+  vertical-align: -0.1em;
+}

assets/scss/_base_dark.scss

@@ -14,6 +14,24 @@
   h5,
   h6 {
     color: $alt-fg-color-dark;
+
+    &:hover .heading-link {
+      visibility: visible;
+    }
+
+    .heading-link {
+      color: $link-color-dark;
+      font-weight: inherit;
+      text-decoration: none;
+      font-size: 80%;
+      visibility: hidden;
+    }
+
+    .title-link {
+      color: inherit;
+      font-weight: inherit;
+      text-decoration: none;
+    }
   }
 
   code {

assets/scss/_content.scss

@@ -3,6 +3,11 @@
   margin-top: 1.6rem;
   margin-bottom: 3.2rem;
   article {
+    details {
+      summary {
+        cursor: pointer;
+      }
+    }
     header {
       margin-top: 6.4rem;
       margin-bottom: 3.2rem;
@@ -83,6 +88,7 @@
       }
       .date {
         display: inline-block;
+        flex:1;
         width: 20.0rem;
         text-align: right;
         margin-right: 3.0rem;
@@ -93,6 +99,7 @@
       }
       .title {
         font-size: 1.8rem;
+        flex:2;
         color: $fg-color;
         font-family: $heading-font-family;
         font-weight: 700;
@@ -103,6 +110,13 @@
       }
     }
   }
+  ul:not(.pagination) {
+    li {
+      @media only screen and (min-width : 768.1px) {
+        display: flex;
+      }
+    }
+  }
 }
 
 .centered {

assets/scss/_float.scss

@@ -0,0 +1,27 @@
+.float-container {
+  bottom: 2rem;
+  right: 2rem;
+  z-index: 100;
+  position: fixed;
+  font-size: 1.6em;
+  a {
+    display: block;
+    text-align: center;
+    width: 3.0rem;
+    height: 3.0rem;
+    color: $alt-fg-color;
+    background-color: $alt-bg-color;
+    font-size: 2.0rem;
+    border-radius: 0.5rem;
+    opacity: 50%;
+    transition: all .25s ease-in;
+    &:hover, &:focus {
+      color: $link-color;
+      opacity: 100%;
+      @media only screen and (max-width : 768px) {
+        color: $alt-fg-color;
+        opacity: 50%;
+      }
+    }
+  }
+}

assets/scss/_float_dark.scss

@@ -0,0 +1,24 @@
+@mixin float_dark {
+  .float-container {
+    a {
+      color: $alt-fg-color-dark;
+      background-color: $alt-bg-color-dark;
+      &:hover, &:focus {
+        color: $link-color-dark;
+        @media only screen and (max-width : 768px) {
+          color: $alt-fg-color-dark;
+        }
+      }
+    }
+  }
+}
+
+body.colorscheme-dark {
+  @include float_dark()
+}
+
+ body.colorscheme-auto {
+  @media (prefers-color-scheme: dark) {
+    @include float_dark()
+  }
+}

assets/scss/_footer.scss

@@ -1,6 +1,7 @@
 .footer {
   width: 100%;
   text-align: center;
+  font-family: $heading-font-family;
   line-height: 2.0rem;
   margin-bottom:1.0rem;
   a {

assets/scss/_navigation.scss

@@ -55,6 +55,11 @@
         margin-right: 1.0rem;
       }
     }
+    .separator {
+      @media only screen and (max-width : 768px) {
+        display: none;
+      }
+    }
     .menu-separator {
       @media only screen and (max-width : 768px) {
         border-top: 2px solid $fg-color;
@@ -65,10 +70,19 @@
       }
     }
   }
+  #dark-mode-toggle {
+    margin: 1.7rem 0;
+    font-size: 2.4rem;
+    line-height: inherit;
+    bottom: 2rem;
+    left: 2rem;
+    z-index: 100;
+    position: fixed;
+  }
   #menu-toggle {
     display: none;
     @media only screen and (max-width : 768px) {
-      &:checked + label {
+      &:checked + label > i {
         color: $alt-bg-color;
       }
       &:checked + label + ul {
@@ -82,15 +96,23 @@
     display: none;
     @media only screen and (max-width : 768px) {
       display: block;
+      margin: 1.8rem 0;
       font-size: 2.4rem;
       font-weight: 400;
-      line-height: 6.0rem;
-      color: $fg-color;
-      cursor: pointer;
-      &:hover,
-      &:focus {
-        color: $link-color
+    }
+
+    i {
+      &:hover, &:focus {
+        color: $alt-fg-color;
       }
     }
   }
+  i {
+    color: $fg-color;
+    cursor: pointer;
+    &:hover,
+    &:focus {
+      color: $link-color;
+    }
+  }
 }

assets/scss/_navigation_dark.scss

@@ -25,17 +25,22 @@
     }
     #menu-toggle {
       @media only screen and (max-width : 768px) {
-        &:checked + label {
+        &:checked + label > i {
           color: $alt-bg-color-dark;
         }
       }
     }
+    i {
+      color: $fg-color-dark;
+      &:hover,
+      &:focus {
+        color: $link-color-dark;
+      }
+    }
     .menu-button {
-      @media only screen and (max-width : 768px) {
-        color: $fg-color-dark;
-        &:hover,
-        &:focus {
-          color: $link-color-dark;
+      i {
+        &:hover, &:focus {
+          color: $alt-fg-color-dark;
         }
       }
     }

assets/scss/_variables.scss

@@ -15,4 +15,4 @@ $bg-color-dark: #212121 !default;
 $fg-color-dark: #dadada !default;
 $alt-bg-color-dark: #424242 !default;
 $alt-fg-color-dark: #dadada !default;
-$link-color-dark: #36679f !default;
+$link-color-dark: #42a5f5 !default;

assets/scss/coder-dark.scss

@@ -3,3 +3,4 @@
 @import "content_dark";
 @import "navigation_dark";
 @import "footer_dark";
+@import "float_dark";

assets/scss/coder.scss

@@ -1,6 +1,8 @@
+@import "css/normalize", "css/fork-awesome";
 @import "variables";
 @import "base";
 @import "content";
 @import "navigation";
 @import "pagination";
 @import "footer";
+@import "float";

assets/scss/css/normalize.css

@@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+ html {
+    line-height: 1.15; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+  }
+  
+  /* Sections
+     ========================================================================== */
+  
+  /**
+   * Remove the margin in all browsers.
+   */
+  
+  body {
+    margin: 0;
+  }
+  
+  /**
+   * Render the `main` element consistently in IE.
+   */
+  
+  main {
+    display: block;
+  }
+  
+  /**
+   * Correct the font size and margin on `h1` elements within `section` and
+   * `article` contexts in Chrome, Firefox, and Safari.
+   */
+  
+  h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+  }
+  
+  /* Grouping content
+     ========================================================================== */
+  
+  /**
+   * 1. Add the correct box sizing in Firefox.
+   * 2. Show the overflow in Edge and IE.
+   */
+  
+  hr {
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
+  }
+  
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+  
+  pre {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+  
+  /* Text-level semantics
+     ========================================================================== */
+  
+  /**
+   * Remove the gray background on active links in IE 10.
+   */
+  
+  a {
+    background-color: transparent;
+  }
+  
+  /**
+   * 1. Remove the bottom border in Chrome 57-
+   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+   */
+  
+  abbr[title] {
+    border-bottom: none; /* 1 */
+    text-decoration: underline; /* 2 */
+    text-decoration: underline dotted; /* 2 */
+  }
+  
+  /**
+   * Add the correct font weight in Chrome, Edge, and Safari.
+   */
+  
+  b,
+  strong {
+    font-weight: bolder;
+  }
+  
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+  
+  code,
+  kbd,
+  samp {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+  
+  /**
+   * Add the correct font size in all browsers.
+   */
+  
+  small {
+    font-size: 80%;
+  }
+  
+  /**
+   * Prevent `sub` and `sup` elements from affecting the line height in
+   * all browsers.
+   */
+  
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  
+  sub {
+    bottom: -0.25em;
+  }
+  
+  sup {
+    top: -0.5em;
+  }
+  
+  /* Embedded content
+     ========================================================================== */
+  
+  /**
+   * Remove the border on images inside links in IE 10.
+   */
+  
+  img {
+    border-style: none;
+  }
+  
+  /* Forms
+     ========================================================================== */
+  
+  /**
+   * 1. Change the font styles in all browsers.
+   * 2. Remove the margin in Firefox and Safari.
+   */
+  
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1.15; /* 1 */
+    margin: 0; /* 2 */
+  }
+  
+  /**
+   * Show the overflow in IE.
+   * 1. Show the overflow in Edge.
+   */
+  
+  button,
+  input { /* 1 */
+    overflow: visible;
+  }
+  
+  /**
+   * Remove the inheritance of text transform in Edge, Firefox, and IE.
+   * 1. Remove the inheritance of text transform in Firefox.
+   */
+  
+  button,
+  select { /* 1 */
+    text-transform: none;
+  }
+  
+  /**
+   * Correct the inability to style clickable types in iOS and Safari.
+   */
+  
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"] {
+    -webkit-appearance: button;
+  }
+  
+  /**
+   * Remove the inner border and padding in Firefox.
+   */
+  
+  button::-moz-focus-inner,
+  [type="button"]::-moz-focus-inner,
+  [type="reset"]::-moz-focus-inner,
+  [type="submit"]::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+  }
+  
+  /**
+   * Restore the focus styles unset by the previous rule.
+   */
+  
+  button:-moz-focusring,
+  [type="button"]:-moz-focusring,
+  [type="reset"]:-moz-focusring,
+  [type="submit"]:-moz-focusring {
+    outline: 1px dotted ButtonText;
+  }
+  
+  /**
+   * Correct the padding in Firefox.
+   */
+  
+  fieldset {
+    padding: 0.35em 0.75em 0.625em;
+  }
+  
+  /**
+   * 1. Correct the text wrapping in Edge and IE.
+   * 2. Correct the color inheritance from `fieldset` elements in IE.
+   * 3. Remove the padding so developers are not caught out when they zero out
+   *    `fieldset` elements in all browsers.
+   */
+  
+  legend {
+    box-sizing: border-box; /* 1 */
+    color: inherit; /* 2 */
+    display: table; /* 1 */
+    max-width: 100%; /* 1 */
+    padding: 0; /* 3 */
+    white-space: normal; /* 1 */
+  }
+  
+  /**
+   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+   */
+  
+  progress {
+    vertical-align: baseline;
+  }
+  
+  /**
+   * Remove the default vertical scrollbar in IE 10+.
+   */
+  
+  textarea {
+    overflow: auto;
+  }
+  
+  /**
+   * 1. Add the correct box sizing in IE 10.
+   * 2. Remove the padding in IE 10.
+   */
+  
+  [type="checkbox"],
+  [type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+  }
+  
+  /**
+   * Correct the cursor style of increment and decrement buttons in Chrome.
+   */
+  
+  [type="number"]::-webkit-inner-spin-button,
+  [type="number"]::-webkit-outer-spin-button {
+    height: auto;
+  }
+  
+  /**
+   * 1. Correct the odd appearance in Chrome and Safari.
+   * 2. Correct the outline style in Safari.
+   */
+  
+  [type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+  }
+  
+  /**
+   * Remove the inner padding in Chrome and Safari on macOS.
+   */
+  
+  [type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  
+  /**
+   * 1. Correct the inability to style clickable types in iOS and Safari.
+   * 2. Change font properties to `inherit` in Safari.
+   */
+  
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
+  }
+  
+  /* Interactive
+     ========================================================================== */
+  
+  /*
+   * Add the correct display in Edge, IE 10+, and Firefox.
+   */
+  
+  details {
+    display: block;
+  }
+  
+  /*
+   * Add the correct display in all browsers.
+   */
+  
+  summary {
+    display: list-item;
+  }
+  
+  /* Misc
+     ========================================================================== */
+  
+  /**
+   * Add the correct display in IE 10+.
+   */
+  
+  template {
+    display: none;
+  }
+  
+  /**
+   * Add the correct display in IE 10.
+   */
+  
+  [hidden] {
+    display: none;
+  }