Skip to content

Commit

Permalink
More variables
Browse files Browse the repository at this point in the history
  • Loading branch information
NotWoods committed Jul 28, 2024
1 parent 5e3d9cb commit c2a5a6c
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 12 deletions.
2 changes: 1 addition & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -230,7 +230,7 @@ <h3>Controls</h3>
<aside class="source text">
<p>
Icon from
<a href="https://www.w3.org/TR/appmanifest/#examples-of-masks" class="source__link"> W3C example </a>
<a href="https://www.w3.org/TR/appmanifest/#examples-of-masks" class="link source__link"> W3C example </a>
</p>
</aside>

Expand Down
24 changes: 13 additions & 11 deletions public/css/viewer.css
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,12 @@ body {
--divider-color: rgba(0, 0, 0, 0.25);
--tabs-height: 3rem;

--accent: hsl(219.4, 77%, 17.1%);
--accent-hover: hsl(219.6, 77.8%, 14.1%);
--accent-active: hsl(219.6, 76.8%, 27.1%);
--hint-hover: hsla(219.6, 77.8%, 14.1%, 0.2);
--hint-active: hsla(219.6, 77.8%, 14.1%, 0.3);

margin: 0;
min-height: calc(100vh - 1rem); /* Not sure why this works (: */

Expand All @@ -23,7 +29,7 @@ body {
color: var(--text-color);
background: var(--background);
text-align: center;
accent-color: #0a214d;
accent-color: var(--accent);
}
.dark {
--text-color: white;
Expand Down Expand Up @@ -129,10 +135,10 @@ dialog[open] {
white-space: nowrap;
}
.navbar__link:hover {
background: rgba(8, 27, 64, 0.2);
background: var(--hint-hover);
}
.navbar__link:focus {
background: rgba(8, 27, 64, 0.3);
.navbar__link:active, .navbar__link:focus {
background: var(--hint-active);
}
.navbar__link--active {
color: inherit;
Expand Down Expand Up @@ -174,7 +180,7 @@ input[type='url'] {
border: 1px solid transparent;
border-radius: 4px;
color: white;
background: #0a214d;
background: var(--accent);
font-weight: 700;
font-size: 0.875em;
}
Expand All @@ -183,14 +189,14 @@ input[type='url'] {
input:focus + label.button--primary,
input.focus + label.button--primary input:focus + label.button--secondary,
input.focus + label.button--secondary {
background: #081b40;
background: var(--accent-hover);
box-shadow:
0 1px 2px #3c40434d,
0 1px 3px 1px #3c404326;
}
.button--primary:active,
.button--secondary:active {
background: #10347a;
background: var(--accent-active);
box-shadow:
0 1px 2px #3c40434d,
0 2px 6px 2px #3c404326;
Expand Down Expand Up @@ -348,10 +354,6 @@ dialog::backdrop {
.about p {
opacity: 0.7;
}
.source__link,
.about__link {
color: inherit;
}

.text {
padding: 0 0.5em;
Expand Down

0 comments on commit c2a5a6c

Please sign in to comment.