violette/bigblase.xyz
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

theme ; WIP ; TODO light mode switch + first page + english pages

Browse source
This commit is contained in:
violette 2024-02-06 10:26:10 -05:00
parent 8cec9f5844
commit 4aa32a5b11
5 changed files with 139 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

129
themes/violette/assets/css/main.css
View file

@ -1,39 +1,113 @@
:root {
--bg: white;
--border: white;
--text: black;
--text-pink-dark: #ed61e1;
--text-mauve-dark: #c282e0;
--text-pink-light: #ed61e1;
--text-mauve-light: #c282e0;
--text-pink: blue;
--text-mauve: #c282e0;
}
@media (prefers-color-scheme: dark) {
:root {
--bg:black;
--text:white;
--text-pink: var(--text-pink-dark);
--text-mauve: var(--text-mauve-dark);
}
#color-mode:checked ~ .color-scheme-wrapper {
--bg:black;
--text:white;
--text-pink: var(--text-pink-dark)
--text-mauve: var(--text-mauve-dark)
}
@media (prefers-color-scheme: dark) {
#color-mode:checked ~ .color-scheme-wrapper {
--bg:white;
--text:black;
--text-pink: var(--text-pink-light)
--text-mauve: var(--text-mauve-light)
}
}
.color-scheme-wrapper {
min-height:100vh;
background:var(--bg);
color:var(--text);
}
.margin {
background:var(--bg);
color:var(--text);
padding-left: 20px;
padding-right: 20px;
}
#color-mode {
display: none;
}
body { body {
color: #fff;
background-color: #111;
font-family: sans-serif; font-family: sans-serif;
line-height: 1.5; line-height: 1.5;
margin: 1rem; margin: 0;
} }
header { header {
background-color: var(--bg);
color: var(--text);
border-bottom: 1px solid #222; border-bottom: 1px solid #222;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
h1 { h1 {
width: 100%; width: 100%;
padding-top: 10px;
color: var(--text-pink);
text-align: center; text-align: center;
color: #c282e0;
transition: 300ms color; transition: 300ms color;
margin-top: 0;
} }
h1:hover { h1:hover {
color: #5082cf; color: var(--text-mauve);
transition-duration: 500ms; transition-duration: 500ms;
} }
h2 {
color: var(--text-pink);
transition: 300ms color;
}
h2:hover {
color: var(--text-mauve);
transition-duration: 500ms;
}
h3 {
color: var(--text-pink);
padding-left: 20px;
}
footer { footer {
border-top: 1px solid #222; border-top: 1px solid #222;
margin-top: 1rem; margin-top: 0;
padding-top: 0;
width: 100%; width: 100%;
display: flex; display: flex;
position: sticky; position: sticky;
background-color: #111;
} }
.footer { .footer {
color: var(--text);
background-color: var(--bg);
align-items: center; align-items: center;
width: 100%; width: 100%;
display: flex; display: flex;
@ -41,17 +115,48 @@ footer {
gap: 10px; gap: 10px;
} }
.nav { .nav {
display: flex; display: flex;
list-style-type: none; list-style-type: none;
}
li {
margin: 5pt; margin: 5pt;
} }
a { main {
background-color: var(--bg);
border-bottom: 1rem solid var(--bg);
}
.nav-right {
display: flex;
align-items:flex-end;
justify-content: flex-end;
list-style-type: none;
width: 100%;
}
li {
padding-left: 5pt;
padding-right: 5pt;
}
ul {
padding-right: 5pt;
margin-left: 5pt;
}
a, label {
color: #c282e0; color: #c282e0;
text-decoration: none; text-decoration: none;
} }
.toggle-dark {
align-self: flex-end;
width: auto;
padding-right: 20pt;
padding-left: 20pt;
}
.toggle-dark label {
width: 100%;
display: block;
}

23
themes/violette/layouts/_default/baseof.html
View file

@ -6,15 +6,20 @@
{{ partialCached "favicon.html" . }} {{ partialCached "favicon.html" . }}
{{ end }} {{ end }}
</head> </head>
<body> <body>
<header> <input id="color-mode" class="theme-box" type="checkbox">
{{ partial "header.html" . }} <div class="color-scheme-wrapper">
</header> <div class="margin">
<main> <header>
{{ block "main" . }}{{ end }} {{ partial "header.html" . }}
</main> </header>
<footer> <main>
{{ partial "footer.html" . }} {{ block "main" . }}{{ end }}
</footer> </main>
<footer>
{{ partial "footer.html" . }}
</footer>
</div></div>
</body> </body>
</html> </html>

1
themes/violette/layouts/partials/darkModeToggle.html Normal file
View file

@ -0,0 +1 @@
<label for="color-mode">Dark Mode</label>

2
themes/violette/layouts/partials/header.html
View file

@ -1,2 +1,2 @@
<h1>{{ site.Title }}</h1> <h1>{{ site.Title }}</h1>
{{ partial "menu.html" (dict "menuID" "main" "page" .) }} <span>{{ partial "menu.html" (dict "menuID" "main" "page" .) }}</span>

6
themes/violette/layouts/partials/menu.html
View file

@ -47,5 +47,11 @@ Renders a menu for the given menu ID.
</ul> </ul>
{{- end }} {{- end }}
</li> </li>
{{- end }} {{- end }}
<li class="nav-right">
<span class="toggle-dark">{{- partial "partials/darkModeToggle.html" }}</span>
<span class="empty-space-menu"></span>
</li>
{{- end }} {{- end }}