diff --git a/assets/css/app.css b/assets/css/app.css index 2442d23..14aac90 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -12,7 +12,6 @@ Influenced by: https://sproutsocial.com/ .mega-menu { display: none; left: 0; - position: absolute; text-align: left; width: 100%; } diff --git a/assets/js/app.js b/assets/js/app.js index ffc9531..3dc3922 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -33,43 +33,5 @@ liveSocket.connect() // >> liveSocket.enableLatencySim(1000) window.liveSocket = liveSocket -// set up dark mode toggle -function setDarkMode(on) { - if (on) { - darkModeToggle.checked = true - document.documentElement.classList.add('dark') - localStorage.theme = 'dark' - document.getElementById('sun-icon').classList.add('hidden') - document.getElementById('moon-icon').classList.remove('hidden') - } else { - darkModeToggle.checked = false - document.documentElement.classList.remove('dark') - localStorage.theme = 'light' - document.getElementById('moon-icon').classList.add('hidden') - document.getElementById('sun-icon').classList.remove('hidden') - } -} - -const darkModeToggle = document.getElementById("dark-mode-toggle") - -if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { - setDarkMode(true) -} else { - setDarkMode(false) -} - -darkModeToggle.addEventListener('click', function (ev) { - if (ev.target.checked) { - setDarkMode(true) - } else { - setDarkMode(false) - } -}) - -// remove preload class after the page laods so the styles -// will transition smoothly when switching between dark and -// light mode. Without the preload class, the transition will -// happen on page load if dark mode is enabled -setTimeout(() => { - document.body.classList.remove('preload') -}, 200) \ No newline at end of file +import "./dark-mode" +import "./menu-toggle" \ No newline at end of file diff --git a/assets/js/dark-mode.js b/assets/js/dark-mode.js new file mode 100644 index 0000000..23d12e6 --- /dev/null +++ b/assets/js/dark-mode.js @@ -0,0 +1,40 @@ +const darkModeToggle = document.getElementById("dark-mode-toggle") + +// set up dark mode toggle +function setDarkMode(on) { + if (on) { + darkModeToggle.checked = true + document.documentElement.classList.add('dark') + localStorage.theme = 'dark' + document.getElementById('sun-icon').classList.add('hidden') + document.getElementById('moon-icon').classList.remove('hidden') + } else { + darkModeToggle.checked = false + document.documentElement.classList.remove('dark') + localStorage.theme = 'light' + document.getElementById('moon-icon').classList.add('hidden') + document.getElementById('sun-icon').classList.remove('hidden') + } +} + +if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { + setDarkMode(true) +} else { + setDarkMode(false) +} + +darkModeToggle.addEventListener('click', function (ev) { + if (ev.target.checked) { + setDarkMode(true) + } else { + setDarkMode(false) + } +}) + +// remove preload class after the page laods so the styles +// will transition smoothly when switching between dark and +// light mode. Without the preload class, the transition will +// happen on page load if dark mode is enabled +setTimeout(() => { + document.body.classList.remove('preload') +}, 200) \ No newline at end of file diff --git a/assets/js/menu-toggle.js b/assets/js/menu-toggle.js new file mode 100644 index 0000000..c3b3bc1 --- /dev/null +++ b/assets/js/menu-toggle.js @@ -0,0 +1,6 @@ +const menuToggleButton = document.getElementById("menu-toggle-button"); + +menuToggleButton.addEventListener('click', function(ev) { + const nav = document.getElementById('nav'); + nav.classList.toggle('-ml-64'); +}) \ No newline at end of file diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js index 47f84ba..d3cae8d 100644 --- a/assets/tailwind.config.js +++ b/assets/tailwind.config.js @@ -78,6 +78,9 @@ module.exports = { dark: theme('colors.brand-purple-200') } }), + transitionProperty: { + 'margin': 'margin' + }, typography: (theme) => ({ DEFAULT: { css: { diff --git a/lib/school_house_web/templates/layout/_dark_mode_toggle.html.leex b/lib/school_house_web/templates/layout/_dark_mode_toggle.html.leex new file mode 100644 index 0000000..b090776 --- /dev/null +++ b/lib/school_house_web/templates/layout/_dark_mode_toggle.html.leex @@ -0,0 +1,27 @@ + diff --git a/lib/school_house_web/templates/layout/_header.html.leex b/lib/school_house_web/templates/layout/_header.html.leex index 047833b..96dcfe0 100644 --- a/lib/school_house_web/templates/layout/_header.html.leex +++ b/lib/school_house_web/templates/layout/_header.html.leex @@ -1,63 +1,46 @@ - +
+
- + diff --git a/lib/school_house_web/templates/layout/_lesson_menu.html.leex b/lib/school_house_web/templates/layout/_lesson_menu.html.leex index 6ef997e..83dad07 100644 --- a/lib/school_house_web/templates/layout/_lesson_menu.html.leex +++ b/lib/school_house_web/templates/layout/_lesson_menu.html.leex @@ -1,10 +1,10 @@ -
-
+
+
-
    +

    • <%= gettext("Basics") %>

      @@ -90,7 +90,7 @@
    -
      +

      • <%= gettext("Intermediate") %>

        @@ -172,7 +172,7 @@
      -
        +

        • <%= gettext("Testing") %>

          @@ -230,7 +230,7 @@
        -
          +

          • <%= gettext("Ecto") %>

            @@ -292,7 +292,7 @@
          -
            +

            • <%= gettext("Miscellaneous") %>

              diff --git a/lib/school_house_web/templates/lesson/lesson.html.eex b/lib/school_house_web/templates/lesson/lesson.html.eex index bc0c396..182ee76 100644 --- a/lib/school_house_web/templates/lesson/lesson.html.eex +++ b/lib/school_house_web/templates/lesson/lesson.html.eex @@ -1,5 +1,5 @@
              -
              +
              <%= @lesson.title %>
              diff --git a/lib/school_house_web/templates/page/index.html.eex b/lib/school_house_web/templates/page/index.html.eex index 4d07a66..bc5e0d8 100644 --- a/lib/school_house_web/templates/page/index.html.eex +++ b/lib/school_house_web/templates/page/index.html.eex @@ -1,5 +1,5 @@
              -
              +

              Welcome to Elixir School! diff --git a/lib/school_house_web/templates/page/why.html.eex b/lib/school_house_web/templates/page/why.html.eex index fe8e1ca..49c8ea6 100644 --- a/lib/school_house_web/templates/page/why.html.eex +++ b/lib/school_house_web/templates/page/why.html.eex @@ -1,4 +1,4 @@ -

              +

              @@ -12,7 +12,7 @@

              -
              +
              @@ -68,8 +68,8 @@
              -

              Functional Programming

              -

              +

              Functional Programming

              +

              While its roots are in lambda calculus, functional programming can be fun, easy, and approachable for everyone! By focusing on breaking problems down into simple, side-effect free, functions we can ensure fewer bugs, better test coverage, while incrementally building our solutions through the composition of well tested functions.

              diff --git a/lib/school_house_web/templates/post/index.html.eex b/lib/school_house_web/templates/post/index.html.eex index 2098d2d..d473eec 100644 --- a/lib/school_house_web/templates/post/index.html.eex +++ b/lib/school_house_web/templates/post/index.html.eex @@ -1,10 +1,10 @@ -
              +

              Recent Posts

              -

              +

              Articles authored by Elixir School contributors and members of the community.

              @@ -12,7 +12,7 @@
              -
              +
              <%= for post <- @posts, do: render("_post_preview.html", conn: @conn, post: post) %>