mode-toggle

#Version Demo:

press key F12 or Ctrl+Shift+m - in presentation

=> and active view mobile (response mode)

GitHub Page Demo

#Technologies use in project

ES6 localStorage

http-server

@media, varibles, grid, prefers-color-scheme

[...]
@media all and (max-width: 414px) {
    .container {
        --container-height: 80vh;
        --container-margin-left: 1em;
        --container-margin-right: 1em;
    }
}
@media all and (max-height: 414px) {
    .container {
        --container-height: 80vh;
        --container-margin-top: 1em;
        --container-margin-bottom: 1em;
    }
}

@media all and (max-width: 768px) {
    .container {
        --container-height: 50vh;
        grid-template-columns: 100%;
        grid-template-rows: 15% 15% auto;
        grid-template-areas: "switch" "title" "content";
    }
}

---

When you want to run localhost

What you need?

• git
• node.js

# step by step

download repository:

run Console ( CMD, PowerShell, ...)

npm install
npm run start