| body { | |||||
| dark-mode-toggle { | |||||
| --dark-mode-toggle-dark-icon: url("/wp-content/moon.png"); | |||||
| --dark-mode-toggle-dark-icon: url("/wp-content/moon.png"); | |||||
| } | |||||
| body.light { | |||||
| background: #fffcf5; | background: #fffcf5; | ||||
| } | } | ||||
| nav a { | nav a { | ||||
| padding: 2px; | padding: 2px; | ||||
| } | } | ||||
| nav a.active { | |||||
| .light nav a.active { | |||||
| background-color: inherit; | background-color: inherit; | ||||
| color: #000; | color: #000; | ||||
| } | } | ||||
| a { | |||||
| .light a { | |||||
| color: #422eff; | color: #422eff; | ||||
| border-bottom: 1px solid #00ff9c; | border-bottom: 1px solid #00ff9c; | ||||
| } | } | ||||
| a:hover { | |||||
| .light a:hover { | |||||
| color: #000; | color: #000; | ||||
| background-color: #00ff9c; | background-color: #00ff9c; | ||||
| } | } | ||||
| .muted, .help-block { | .muted, .help-block { | ||||
| opacity: 0.70; | opacity: 0.70; | ||||
| } | } | ||||
| .light | |||||
| .hack .muted, | .hack .muted, | ||||
| .hack .help-block { | .hack .help-block { | ||||
| color: #0e0e0e; | color: #0e0e0e; |
| has_cookies = true # Optional, set true to disable cookie disclaimer | has_cookies = true # Optional, set true to disable cookie disclaimer | ||||
| disable_csp = false # Optional, set true to disable content security policy | disable_csp = false # Optional, set true to disable content security policy | ||||
| images = [ | images = [ | ||||
| "https://source.unsplash.com/collection/983219/2000x1322" | |||||
| "https://rohanverma.net/wp-content/uploads/me.jpg" | |||||
| ] # Suggested, controls default Open Graph images | ] # Suggested, controls default Open Graph images | ||||
| [params.layout.menu.main] | [params.layout.menu.main] |
| {{ $hackcss_mode := .Site.Params.hackcss.mode | default "hack" }} | {{ $hackcss_mode := .Site.Params.hackcss.mode | default "hack" }} | ||||
| {{ $hackcss_palette := .Site.Params.hackcss.palette | default "dark" }} | {{ $hackcss_palette := .Site.Params.hackcss.palette | default "dark" }} | ||||
| <body class="{{ if ne $hackcss_disabled true }}{{ $hackcss_mode }} {{ $hackcss_palette }} main container{{ end }}"> | <body class="{{ if ne $hackcss_disabled true }}{{ $hackcss_mode }} {{ $hackcss_palette }} main container{{ end }}"> | ||||
| {{ partial "body/darkmode.html" . }} | |||||
| <header>{{ block "header" . }}{{ end }}</header> | <header>{{ block "header" . }}{{ end }}</header> | ||||
| <main>{{ block "main" . }}{{ end }}</main> | <main>{{ block "main" . }}{{ end }}</main> | ||||
| <footer> | <footer> | ||||
| {{ partial "modules/toxic-swamp/toolbar.html" dict }} | {{ partial "modules/toxic-swamp/toolbar.html" dict }} | ||||
| {{ end }} | {{ end }} | ||||
| {{ end }} | {{ end }} | ||||
| {{ partial "body/scripts.html" . }} | |||||
| </body> | </body> | ||||
| </html> | </html> |
| <dark-mode-toggle | |||||
| id="dark-mode-toggle-1" | |||||
| appearance="toggle" | |||||
| permanent=true | |||||
| style="position:absolute;top:5px;right:50%" | |||||
| ></dark-mode-toggle> |
| <script type="module"> | |||||
| import * as DarkModeToggle from 'https://unpkg.com/dark-mode-toggle'; | |||||
| const toggle = document.querySelector('dark-mode-toggle'); | |||||
| const body = document.body; | |||||
| // Set or remove the `dark` class the first time. | |||||
| body.classList.remove('dark'); | |||||
| body.classList.remove('light'); | |||||
| if (toggle.mode === 'dark') { | |||||
| body.classList.add('dark') | |||||
| } else { | |||||
| body.classList.add('light') | |||||
| } | |||||
| // Listen for toggle changes (which includes `prefers-color-scheme` changes) | |||||
| // and toggle the `dark` class accordingly. | |||||
| toggle.addEventListener('colorschemechange', () => { | |||||
| body.classList.toggle('dark', toggle.mode === 'dark'); | |||||
| body.classList.toggle('light', toggle.mode !== 'dark'); | |||||
| }); | |||||
| </script> |
| <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Roboto+Slab:400,700" rel="stylesheet"> | <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Roboto+Slab:400,700" rel="stylesheet"> | ||||
| <link rel="authorization_endpoint" href="https://indieauth.com/auth"> | <link rel="authorization_endpoint" href="https://indieauth.com/auth"> | ||||
| <link rel="webmention" href="https://webmention.io/rhnvrm/webmention" /> | |||||
| <link rel="webmention" href="https://webmention.io/rohanverma.net/webmention" /> | |||||
| <link rel="pingback" href="https://webmention.io/rohanverma.net/xmlrpc" /> | |||||
| <script type="module" src="https://unpkg.com/dark-mode-toggle"></script> |