some subtle color helps a lot
This commit is contained in:
parent
31ad3ee1ea
commit
d62faf4c51
3 changed files with 44 additions and 12 deletions
BIN
assets/noise.png
Normal file
BIN
assets/noise.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 8.1 KiB |
|
@ -38,6 +38,10 @@ body {
|
|||
--s5: calc(var(--s4) * var(--ratio));
|
||||
--content-width: clamp(75vw, 40rem, 100vw - 3rem);
|
||||
--inset: calc(50vw - var(--content-width) / 2);
|
||||
background-image:
|
||||
radial-gradient(circle at -20% -20vmin, #00f2, transparent 60%),
|
||||
radial-gradient(circle at 120% calc(100% - 20vmin), #0873, transparent 60%),
|
||||
url(/noise.png);
|
||||
}
|
||||
|
||||
body[data-theme="dark"] {
|
||||
|
@ -55,7 +59,6 @@ body[data-theme="dark"] {
|
|||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
body[data-theme="auto"] {
|
||||
background-color: var(--c-body-background);
|
||||
}
|
||||
|
@ -107,9 +110,9 @@ a[href] {
|
|||
}
|
||||
a[href]:hover,
|
||||
a[href]:focus-visible,
|
||||
label:hover,
|
||||
label:focus-visible,
|
||||
label:has(input:focus-visible),
|
||||
nav label:hover,
|
||||
nav label:focus-visible,
|
||||
nav label:has(input:focus-visible),
|
||||
.nav-toggle-button:has(input[type="radio"]:checked) {
|
||||
background-color: var(--c-accent);
|
||||
text-decoration: none;
|
||||
|
@ -139,7 +142,11 @@ section {
|
|||
margin: 4rem -1rem -4rem;
|
||||
height: 4.1rem;
|
||||
border: none;
|
||||
background-image: radial-gradient(ellipse farthest-side at 50% 0%, var(--c-highlight), transparent);
|
||||
background-image: radial-gradient(
|
||||
ellipse farthest-side at 50% 0%,
|
||||
var(--c-highlight),
|
||||
transparent
|
||||
);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
|
@ -188,14 +195,18 @@ blockquote {
|
|||
padding: 0 1em;
|
||||
border-left: 1px solid var(--c-accent);
|
||||
&::after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: -0.5lh;
|
||||
bottom: -0.5lh;
|
||||
left: -0.1em;
|
||||
width: 10rem;
|
||||
background: radial-gradient(ellipse farthest-side at 0% 50%, var(--c-highlight), transparent);
|
||||
background: radial-gradient(
|
||||
ellipse farthest-side at 0% 50%,
|
||||
var(--c-highlight),
|
||||
transparent
|
||||
);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
@ -277,7 +288,7 @@ body > footer {
|
|||
}
|
||||
}
|
||||
|
||||
label {
|
||||
nav label {
|
||||
cursor: pointer;
|
||||
text-decoration-line: underline;
|
||||
> input[type="radio"] {
|
||||
|
@ -310,13 +321,13 @@ h3,
|
|||
h4 {
|
||||
position: relative;
|
||||
font-weight: 700;
|
||||
text-shadow: 0 0 0.2em var(--c-highlight);
|
||||
text-shadow: 0 0 0.5em var(--c-highlight);
|
||||
&:hover .header-anchor {
|
||||
opacity: 1;
|
||||
}
|
||||
&::after {
|
||||
opacity: 0.5;
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
bottom: 0;
|
||||
|
@ -325,7 +336,11 @@ h4 {
|
|||
width: 30rem;
|
||||
max-width: 100%;
|
||||
/* outline: 1px solid red; */
|
||||
background: radial-gradient(ellipse farthest-side at 50% 100%, var(--c-highlight), transparent);
|
||||
background: radial-gradient(
|
||||
ellipse farthest-side at 50% 100%,
|
||||
var(--c-highlight),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
}
|
||||
main {
|
||||
|
@ -370,3 +385,13 @@ p > code {
|
|||
margin: -0.1em;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
|
||||
#isso-thread {
|
||||
margin-top: 4rem !important;
|
||||
}
|
||||
.isso-textarea {
|
||||
margin: 0 !important;
|
||||
}
|
||||
.isso-thread-heading {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
|
|
@ -1,4 +1,11 @@
|
|||
---
|
||||
layout: base.njk
|
||||
---
|
||||
{{ content | safe }}
|
||||
|
||||
{{ content | safe }}
|
||||
|
||||
<script data-isso="//comments.apps.seigler.net/" src="//comments.apps.seigler.net/js/embed.min.js"></script>
|
||||
|
||||
<section id="isso-thread" data-title="{{computedTitle}}">
|
||||
<noscript>Javascript needs to be activated to view comments.</noscript>
|
||||
</section>
|
Loading…
Add table
Add a link
Reference in a new issue