This commit is contained in:
parent
11c377779a
commit
04473a6660
19
themes/devroom-2024/assets/scss/_colors_dark.scss
Normal file
19
themes/devroom-2024/assets/scss/_colors_dark.scss
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
$accent: rgb(90, 126, 193);
|
||||||
|
$background: rgb(40, 44, 53);
|
||||||
|
$backdrop: darken($background, 5%);
|
||||||
|
$text: rgb(226, 226, 226);
|
||||||
|
$subtext: #868686;
|
||||||
|
$links: $accent;
|
||||||
|
$footer: $subtext;
|
||||||
|
$meta: $text;
|
||||||
|
$header: $text;
|
||||||
|
$highlight: $links;
|
||||||
|
$blockquote_border: $accent;
|
||||||
|
$important_border: #f00;
|
||||||
|
$code_background: $text;
|
||||||
|
$code_border_color: $text;
|
||||||
|
$code: $background;
|
||||||
|
$separator: darken(desaturate($accent, 20%), 20%);
|
||||||
|
$darkmode_icon: $text;
|
||||||
|
$tag_background: $accent;
|
||||||
|
$tag_color: $text;
|
19
themes/devroom-2024/assets/scss/_colors_light.scss
Normal file
19
themes/devroom-2024/assets/scss/_colors_light.scss
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
$accent: rgb(90, 126, 193);
|
||||||
|
$background: #fafafa;
|
||||||
|
$backdrop: darken($background, 5%);
|
||||||
|
$text: #333333;
|
||||||
|
$subtext: #868686;
|
||||||
|
$links: $accent;
|
||||||
|
$footer: $subtext;
|
||||||
|
$meta: $text;
|
||||||
|
$header: $text;
|
||||||
|
$highlight: $links;
|
||||||
|
$blockquote_border: $accent;
|
||||||
|
$important_border: #f00;
|
||||||
|
$code_background: $text;
|
||||||
|
$code_border_color: $text;
|
||||||
|
$code: $background;
|
||||||
|
$separator: lighten($accent, 35%);
|
||||||
|
$darkmode_icon: $text;
|
||||||
|
$tag_background: $accent;
|
||||||
|
$tag_color: $background;
|
|
@ -4,27 +4,11 @@ $h1_font_size: 2.0rem;
|
||||||
$h2_font_size: 1.7rem;
|
$h2_font_size: 1.7rem;
|
||||||
$header_size: 1.2rem;
|
$header_size: 1.2rem;
|
||||||
|
|
||||||
$font_size: 16px;
|
$font_size: 18px;
|
||||||
$code_font_size: 14px;
|
$code_font_size: 14px;
|
||||||
$code_line_height: 17px;
|
$code_line_height: 17px;
|
||||||
$line-height: 1.6;
|
$line-height: 1.6;
|
||||||
|
|
||||||
$accent: rgb(90, 126, 193);
|
|
||||||
$background: rgb(40, 44, 53);
|
|
||||||
$backdrop: darken($background, 5%);
|
|
||||||
$text: rgb(226, 226, 226);
|
|
||||||
$subtext: #868686;
|
|
||||||
$links: $accent;
|
|
||||||
$footer: $subtext;
|
|
||||||
$meta: $text;
|
|
||||||
$header: $text;
|
|
||||||
$highlight: $links;
|
|
||||||
$blockquote_border: $accent;
|
|
||||||
$important_border: #f00;
|
|
||||||
$code_background: $text;
|
|
||||||
$code_border_color: $text;
|
|
||||||
$code: $background;
|
|
||||||
$separator: darken(desaturate($accent, 20%), 20%);
|
|
||||||
|
|
||||||
html, body {
|
html, body {
|
||||||
background-color: $background;
|
background-color: $background;
|
||||||
|
@ -33,6 +17,9 @@ html, body {
|
||||||
font-size: $font_size;
|
font-size: $font_size;
|
||||||
line-height: $line-height;
|
line-height: $line-height;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
|
||||||
|
transition: color 0.2s ease-in-out,
|
||||||
|
background-color 0.2s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
code, pre {
|
code, pre {
|
||||||
|
@ -49,7 +36,7 @@ code, pre {
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
background-color: $background;
|
|
||||||
padding: 1rem 1.5rem;
|
padding: 1rem 1.5rem;
|
||||||
margin: 1rem auto;
|
margin: 1rem auto;
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
|
@ -394,13 +381,16 @@ article.full {
|
||||||
}
|
}
|
||||||
|
|
||||||
a.tag {
|
a.tag {
|
||||||
background-color: $accent;
|
background-color: $tag_background;
|
||||||
color: $text;
|
color: $tag_color;
|
||||||
padding: 2px 8px 4px;
|
padding: 2px 8px 4px;
|
||||||
margin: 0 2px;
|
margin: 0 2px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
text-transform: lowercase;
|
text-transform: lowercase;
|
||||||
|
|
||||||
|
transition: color 0.2s ease-in-out,
|
||||||
|
background-color 0.2s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-about {
|
.article-about {
|
||||||
|
@ -467,3 +457,19 @@ form {
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-dark {
|
||||||
|
width: 1.25rem;
|
||||||
|
height: 1.25rem;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-left: 1rem;
|
||||||
|
display: block;
|
||||||
|
padding: 0.35rem;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
fill: $darkmode_icon;
|
||||||
|
|
||||||
|
transition: color 0.2s ease-in-out,
|
||||||
|
background-color 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
}
|
2
themes/devroom-2024/assets/scss/devroom_dark.scss
Normal file
2
themes/devroom-2024/assets/scss/devroom_dark.scss
Normal file
|
@ -0,0 +1,2 @@
|
||||||
|
@import "_colors_dark";
|
||||||
|
@import "_site";
|
2
themes/devroom-2024/assets/scss/devroom_light.scss
Normal file
2
themes/devroom-2024/assets/scss/devroom_light.scss
Normal file
|
@ -0,0 +1,2 @@
|
||||||
|
@import "_colors_light";
|
||||||
|
@import "_site";
|
|
@ -16,21 +16,41 @@
|
||||||
<title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title>
|
<title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title>
|
||||||
{{ hugo.Generator }}
|
{{ hugo.Generator }}
|
||||||
<link rel="stylesheet" href="/css/lightbox.min.css" />
|
<link rel="stylesheet" href="/css/lightbox.min.css" />
|
||||||
{{ if .Site.IsServer }} {{ $cssOpts := (dict "targetPath" "css/devroom.css"
|
|
||||||
"enableSourceMap" true ) }} {{ $styles := resources.Get "scss/devroom.scss"
|
{{ if .Site.IsServer }} {{ $cssOpts := (dict "targetPath" "css/devroom_light.css"
|
||||||
| resources.ExecuteAsTemplate "style.devroom.css" . | toCSS $cssOpts }}
|
"enableSourceMap" true ) }} {{ $styles := resources.Get "scss/devroom_light.scss"
|
||||||
<link rel="stylesheet" href="{{ $styles.RelPermalink }}" media="screen" />
|
| resources.ExecuteAsTemplate "style.devroom_light.css" . | toCSS $cssOpts }}
|
||||||
{{ else }} {{ $cssOpts := (dict "targetPath" "css/devroom.css" ) }} {{
|
<link id="style-light" rel="stylesheet" href="{{ $styles.RelPermalink }}" media="screen" />
|
||||||
$styles := resources.Get "scss/devroom.scss" | resources.ExecuteAsTemplate
|
{{ else }} {{ $cssOpts := (dict "targetPath" "css/devroom_light.css" ) }} {{
|
||||||
"style.devroom.css" . | toCSS $cssOpts | minify | fingerprint }}
|
$styles := resources.Get "scss/devroom_light.scss" | resources.ExecuteAsTemplate
|
||||||
|
"style.devroom_light.css" . | toCSS $cssOpts | minify | fingerprint }}
|
||||||
<link
|
<link
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
|
id="style-light"
|
||||||
href="{{ $styles.RelPermalink }}"
|
href="{{ $styles.RelPermalink }}"
|
||||||
integrity="{{ $styles.Data.Integrity }}"
|
integrity="{{ $styles.Data.Integrity }}"
|
||||||
crossorigin="anonymous"
|
crossorigin="anonymous"
|
||||||
media="screen"
|
media="screen"
|
||||||
/>
|
/>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
|
{{ if .Site.IsServer }} {{ $cssOpts := (dict "targetPath" "css/devroom_dark.css"
|
||||||
|
"enableSourceMap" true ) }} {{ $styles := resources.Get "scss/devroom_dark.scss"
|
||||||
|
| resources.ExecuteAsTemplate "style.devroom_dark.css" . | toCSS $cssOpts }}
|
||||||
|
<link id="style-dark" rel="stylesheet" href="{{ $styles.RelPermalink }}" media="screen" />
|
||||||
|
{{ else }} {{ $cssOpts := (dict "targetPath" "css/devroom_dark.css" ) }} {{
|
||||||
|
$styles := resources.Get "scss/devroom_dark.scss" | resources.ExecuteAsTemplate
|
||||||
|
"style.devroom_dark.css" . | toCSS $cssOpts | minify | fingerprint }}
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
id="style-dark"
|
||||||
|
href="{{ $styles.RelPermalink }}"
|
||||||
|
integrity="{{ $styles.Data.Integrity }}"
|
||||||
|
crossorigin="anonymous"
|
||||||
|
media="screen"
|
||||||
|
/>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
<link
|
<link
|
||||||
rel="alternate"
|
rel="alternate"
|
||||||
type="application/rss+xml"
|
type="application/rss+xml"
|
||||||
|
@ -49,5 +69,18 @@
|
||||||
{{ partial "footer.html" . }}
|
{{ partial "footer.html" . }}
|
||||||
</div>
|
</div>
|
||||||
<script src="/js/lightbox-plus-jquery.min.js"></script>
|
<script src="/js/lightbox-plus-jquery.min.js"></script>
|
||||||
|
<script>
|
||||||
|
function theme_set(toggled) {
|
||||||
|
document.getElementById('style-light').disabled = toggled;
|
||||||
|
document.getElementById('style-dark').disabled = !toggled;
|
||||||
|
localStorage.setItem('theme-toggled', toggled ? '1' : '');
|
||||||
|
}
|
||||||
|
|
||||||
|
function theme_toggle() {
|
||||||
|
theme_set(!document.getElementById('style-light').disabled);
|
||||||
|
}
|
||||||
|
|
||||||
|
theme_set(localStorage.getItem('theme-toggled'));
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -1,6 +1,8 @@
|
||||||
<header>
|
<header>
|
||||||
<nav>
|
<nav>
|
||||||
<a href="/" class="brand">devroom.io</a>
|
<a href="/" class="brand">devroom.io</a>
|
||||||
|
|
||||||
|
|
||||||
<div class="menu">
|
<div class="menu">
|
||||||
<a href="/" class="menu-item">Blog</a>
|
<a href="/" class="menu-item">Blog</a>
|
||||||
<a href="/projects/" class="menu-item">Projects</a>
|
<a href="/projects/" class="menu-item">Projects</a>
|
||||||
|
@ -9,5 +11,14 @@
|
||||||
<a href="/privacy/" class="menu-item">Privacy</a>
|
<a href="/privacy/" class="menu-item">Privacy</a>
|
||||||
<a href="/contact/" class="menu-item">Contact</a>
|
<a href="/contact/" class="menu-item">Contact</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="btn-dark" onclick="theme_toggle(); return false;" role="button">
|
||||||
|
|
||||||
|
<svg id="glyphicons-halflings" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||||
|
<path id="contrast" d="M10,2a8,8,0,1,0,8,8A8.00917,8.00917,0,0,0,10,2Zm0,14A6,6,0,0,1,10,4Z"></path>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user