diff --git a/sass/darkmode_toggle.scss b/sass/darkmode_toggle.scss new file mode 100644 index 0000000..7c1bf9b --- /dev/null +++ b/sass/darkmode_toggle.scss @@ -0,0 +1,88 @@ +:root { + --light: #d8dbe0; + --dark: #28292c; + --link: rgb(27, 129, 112); + --link-hover: rgb(24, 94, 82); +} + +* { + /* padding: 0; */ + /* margin: 0; */ + /* box-sizing: border-box; */ +} + +body { + /* background-color: #cfafaf; */ + /* display: flex; */ + /* justify-content: center; */ + /* align-items: center; */ + /* height: 100vh; */ +} + +$diameter: 100; + +.toggle-switch { + position: relative; + width: 200px; +} + +label { + position: absolute; + width: 100%; + height: 100px; + background-color: var(--dark); + border-radius: 50px; + cursor: pointer; +} + +input { + position: absolute; + display: none; +} + +.slider { + position: absolute; + width: 100%; + height: 100%; + border-radius: 50px; + transition: 0.3s; +} + +input:checked~.slider { + background-color: var(--light); +} + +.slider::before { + content: ""; + position: absolute; + top: 13px; + left: 16px; + width: 75px; + height: 75px; + border-radius: 50%; + box-shadow: inset 28px -4px 0px 0px var(--light); + background-color: var(--dark); + transition: 0.3s; +} + +input:checked~.slider::before { + transform: translateX(95px); + background-color: var(--dark); + box-shadow: none; +} + +a { + position: relative; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + top: 150px; + left: 10px; + font-size: 10px; + text-decoration: none; + color: var(--link); + font-weight: bold; + text-align: center; +} + +a:hover { + color: var(--link-hover); +} \ No newline at end of file diff --git a/templates/_macros.html b/templates/_macros.html index 43723fd..894bafd 100644 --- a/templates/_macros.html +++ b/templates/_macros.html @@ -42,10 +42,13 @@ - +
+ +
- - {% endmacro render_header %} \ No newline at end of file diff --git a/templates/darkmode_toggle.html b/templates/darkmode_toggle.html new file mode 100644 index 0000000..9484457 --- /dev/null +++ b/templates/darkmode_toggle.html @@ -0,0 +1,6 @@ +
+ +
\ No newline at end of file diff --git a/templates/index.html b/templates/index.html index a265e0b..64ad334 100644 --- a/templates/index.html +++ b/templates/index.html @@ -5,8 +5,9 @@ - + + @@ -36,149 +37,156 @@ {{ macros::render_header(path="/") }} -
- {% block hero %} +{% block body_tag%} - -
-

- {{ config.extra.slogan }} -

-

- {{ section.extra.intro | safe }} -

-
- - - - + + {% endblock body_tag %} + + +
+ + {% block hero %} + + +
+

+ {{ config.extra.slogan }} +

+

+ {{ section.extra.intro | safe }} +

+
+ + + + +
+
+ + +
+ Explore More ⇩
-
- - -
- Explore More ⇩ -
- + - {% endblock hero %} + {% endblock hero %} -
- -{% endblock header %} - - - -{% block toc %} -{% if section.toc %} -{% set toc = section.toc %} -{% elif page.toc %} -{% set toc = page.toc %} -{% endif %} -{% if toc %} -{% if page.extra.disable_toc %} -{% else %} -
-
- {% for h in toc %} -
- {{ h.title }} -
- {% if h.children %} - {% for h2 in h.children %} -
- - {{ h2.title }} -
- {% endfor %} - {% endif %} - {% endfor %} -
-
-{% endif %} -{% endif %} -{% endblock toc %} - - - - -{% block sidebar %} - - - -{% endblock sidebar %} - - -{% block footer %} - -{% endblock footer %} \ No newline at end of file + + {% endblock header %} + + + + {% block toc %} + {% if section.toc %} + {% set toc = section.toc %} + {% elif page.toc %} + {% set toc = page.toc %} + {% endif %} + {% if toc %} + {% if page.extra.disable_toc %} + {% else %} +
+
+ {% for h in toc %} +
+ {{ h.title }} +
+ {% if h.children %} + {% for h2 in h.children %} +
+ - {{ h2.title }} +
+ {% endfor %} + {% endif %} + {% endfor %} +
+
+ {% endif %} + {% endif %} + {% endblock toc %} + + + + + {% block sidebar %} + + + + {% endblock sidebar %} + + + {% block footer %} + + {% endblock footer %} \ No newline at end of file