~xdavidwu/xdavidwu.link

98ea326d51f439d05c83ecded66b7e5f580d82b3 — xdavidwu 3 years ago 686e1fe
add darkmode switch without js
3 files changed, 23 insertions(+), 3 deletions(-)

M _layouts/default.html
M _sass/minimal-mistakes/_noscript.scss
M assets/css/main.scss
M _layouts/default.html => _layouts/default.html +6 -0
@@ 17,6 17,12 @@
  <body class="layout--{{ page.layout | default: layout.layout }}{% if page.classes or layout.classes %}{{ page.classes | default: layout.classes | join: ' ' | prepend: ' ' }}{% endif %}">
    {% include_cached skip-links.html %}
    {% include_cached browser-upgrade.html %}

    <input type="checkbox" id="darkmode">
    <label for="darkmode">
      <i class="fa fa-moon"></i>
    </label>

    {% include_cached masthead.html %}

    <div class="initial-content">

M _sass/minimal-mistakes/_noscript.scss => _sass/minimal-mistakes/_noscript.scss +13 -2
@@ 9,10 9,21 @@
  }
}

#follow-button:checked + label + ul.author__urls {
input#follow-button:checked + label + ul.author__urls {
  display: block;
}

#follow-button {
input#follow-button {
  display: none;
}

input#darkmode {
  display: none;
}

label[for="darkmode"] {
  position: absolute;
  z-index: 1000;
  bottom: 1.75em;
  right: 1em;
}

M assets/css/main.scss => assets/css/main.scss +4 -1
@@ 16,4 16,7 @@ $comments-provider: {{ site.comments.provider }};
  @import "minimal-mistakes/colors"; // color overrides
}


input#darkmode:checked ~ * {
  @import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin
  @import "minimal-mistakes/colors"; // color overrides
}