Conversation
AndrewKvalheim
left a comment
AndrewKvalheim
left a comment
There was a problem hiding this comment.
Thanks, this looks great. I’d tried this myself in the past but wasn’t sure how to handle the sponsor logos. Boxing them is a nice solution.
| body { | ||
| background-color: #0D0D0D ; | ||
| color: #B3B3B3; | ||
| outline: 5px dashed #000; |
There was a problem hiding this comment.
What’s the purpose of this outline? I don’t see how it’s visible.
|
|
||
| } | ||
| h1,h2,h3,h4,h5,h6 { | ||
| text-shadow: 0px 1px 1px #565656; |
There was a problem hiding this comment.
Can we use variables to override just the color? Something more like --heading-text-shadow-color: #565656;
There was a problem hiding this comment.
Alternatively, removing the text shadow altogether (including from the light color scheme) sounds reasonable.
| &, &:active { | ||
| color: #1D7193; | ||
| } | ||
| &:visited { | ||
| color: #1D7193; | ||
| } | ||
| &:hover { | ||
| color: #565656; | ||
| } |
There was a problem hiding this comment.
Can these be bumped up to a text contrast ratio of ≥4.5?
| } | ||
| @media (prefers-color-scheme: dark) { | ||
| .logo-wall { | ||
| display: flex; |
There was a problem hiding this comment.
| display: flex; |
Redundant, and probably not something we should be touching with a color scheme change anyway.
| .logo-wall{ | ||
| background-color: #B3B3B3; | ||
| } |
There was a problem hiding this comment.
| .logo-wall{ | |
| background-color: #B3B3B3; | |
| } |
Redundant
| display: flex; | ||
| border-radius: 4px; | ||
| background-color: #B3B3B3; | ||
| } |
There was a problem hiding this comment.
| } | |
| border-top: 12px solid #0C5A73; | |
| margin-left: auto; | |
| margin-right: auto; | |
| padding-bottom: 0.5em; | |
| padding-top: 0.5em; | |
| width: fit-content; | |
| } |
Not sure about this but maybe a direction to consider
| 325603a | suggestion |
|---|---|
 |
 |
2 participants
This adds a dark mode to the seagl website using the
prefers-color-schememedia feature.Colors were chosen from the official color palette.
see: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
and: https://seagl.org/style_guide#ColorPalette