mirror of
https://github.com/preactjs/wmr.git
synced 2026-01-25 15:08:00 +00:00
813 lines
13 KiB
CSS
813 lines
13 KiB
CSS
/*
|
||
* Colors from the Logo:
|
||
* --gray-dark: #220f2d;
|
||
* --gray-light: #bfb8c3;
|
||
* --purple-dark: #371a44;
|
||
* --purple-light: #c7c2cb;
|
||
* --blue-dark: #33aef1;
|
||
* --blue-light: #81cbf6;
|
||
* --red-dark: #bb2030;
|
||
* --red-light: #f92323;
|
||
*/
|
||
|
||
/**
|
||
* Theming
|
||
*/
|
||
:root {
|
||
--color-text: #222;
|
||
--color-brand: #33aef1;
|
||
--color-bg: #fff;
|
||
--color-header-bg: var(--color-bg);
|
||
--color-border: #e0e0e0;
|
||
--color-bg-code-inline: #dddddf;
|
||
--color-bg-code: #1f2427;
|
||
--color-info: var(--color-brand);
|
||
--color-info-bg: #e4f4ff;
|
||
--color-focus: #ff459c;
|
||
--color-btn-secondary-hover: rgba(0, 0, 0, 0.1);
|
||
--focus-width: 0.25rem;
|
||
|
||
--header-height: 3.5rem;
|
||
--header-accent-height: 0.125rem;
|
||
--container-width-big: 120ch;
|
||
--container-width: 88ch;
|
||
}
|
||
|
||
@media (prefers-color-scheme: dark) {
|
||
:root {
|
||
--color-text: rgb(224, 224, 224);
|
||
--color-bg: #181818;
|
||
--color-header-bg: rgba(37, 41, 49, 0.95);
|
||
--color-border: #525252;
|
||
--color-bg-code-inline: #424348;
|
||
--color-bg-code: #1f2427;
|
||
--color-info: var(--color-brand);
|
||
--color-info-bg: #1c2b4e;
|
||
--color-btn-secondary-hover: rgba(255, 255, 255, 0.1);
|
||
|
||
--header-accent-height: 0.1875rem;
|
||
}
|
||
|
||
.brand-shadow,
|
||
.icon {
|
||
filter: invert(1);
|
||
}
|
||
}
|
||
|
||
html[theme='light'] {
|
||
--color-text: #222;
|
||
--color-brand: #33aef1;
|
||
--color-bg: #fff;
|
||
--color-border: #e0e0e0;
|
||
--color-bg-code-inline: #dddddf;
|
||
--color-bg-code: #1f2427;
|
||
--color-info: var(--color-brand);
|
||
--color-info-bg: #e4f4ff;
|
||
--color-btn-secondary-hover: rgba(0, 0, 0, 0.1);
|
||
|
||
--header-height: 3.5rem;
|
||
--header-accent-height: 0.125rem;
|
||
}
|
||
html[theme='light'] .brand-shadow,
|
||
html[theme='light'] .icon {
|
||
filter: none;
|
||
}
|
||
|
||
html[theme='dark'] {
|
||
--color-text: rgb(224, 224, 224);
|
||
--color-bg: #181818;
|
||
--color-header-bg: rgba(37, 41, 49, 0.95);
|
||
--color-border: #525252;
|
||
--color-bg-code-inline: #424348;
|
||
--color-bg-code: #1f2427;
|
||
--color-info: var(--color-brand);
|
||
--color-info-bg: #1c2b4e;
|
||
--color-btn-secondary-hover: rgba(255, 255, 255, 0.1);
|
||
|
||
--header-accent-height: 0.1875rem;
|
||
}
|
||
html[theme='dark'] .icon,
|
||
html[theme='dark'] .brand-shadow {
|
||
filter: invert(1);
|
||
}
|
||
|
||
html[theme='teatime'] {
|
||
--color-text: #3a3f4d;
|
||
--color-brand: #33aef1;
|
||
--color-bg: #f1e7d0;
|
||
--color-border: #aaa;
|
||
--color-bg-code-inline: #dddddf;
|
||
--color-bg-code: #1f2427;
|
||
--color-info: var(--color-brand);
|
||
--color-info-bg: #e4f4ff;
|
||
|
||
--header-height: 3.5rem;
|
||
--header-accent-height: 0.125rem;
|
||
}
|
||
html[theme='teatime'] .brand-shadow,
|
||
html[theme='teatime'] .icon {
|
||
filter: none;
|
||
}
|
||
|
||
/**
|
||
* Reset
|
||
*/
|
||
html,
|
||
body {
|
||
margin: 0;
|
||
padding: 0;
|
||
height: 100%;
|
||
}
|
||
|
||
body {
|
||
font: 100%/1.5 system-ui, helvetica, sans-serif;
|
||
background: var(--color-bg);
|
||
color: var(--color-text);
|
||
transition: background 0.3s;
|
||
}
|
||
|
||
/* Prevent fixed header from overlapping anchors */
|
||
:target::before {
|
||
content: '';
|
||
display: block;
|
||
height: calc(1rem + var(--header-height));
|
||
margin: calc(-1 * calc(1rem + var(--header-height))) 0 0;
|
||
}
|
||
|
||
/** Wraps the content */
|
||
#page {
|
||
outline: none;
|
||
/* TODO: Not sure where the 2rem is coming from */
|
||
min-height: calc(100% - calc(var(--header-height) + 2rem));
|
||
}
|
||
#page::before {
|
||
content: '';
|
||
display: block;
|
||
height: var(--header-height);
|
||
margin-top: calc(-1 * var(--header-height));
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
-webkit-font-smoothing: antialiased;
|
||
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
|
||
}
|
||
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4,
|
||
h5 {
|
||
line-height: 1.1;
|
||
}
|
||
|
||
a {
|
||
text-decoration: none;
|
||
color: inherit;
|
||
}
|
||
|
||
ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
p {
|
||
margin-bottom: 1.6rem;
|
||
font-size: 1.125rem;
|
||
}
|
||
|
||
button {
|
||
color: inherit;
|
||
background: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
pre,
|
||
code {
|
||
font-family: 'Source Code Pro', 'source-code-pro', Menlo, Consolas, Monaco, 'Andale Mono', 'Courier New', monospace;
|
||
font-size: 0.9rem;
|
||
font-weight: 400;
|
||
}
|
||
|
||
/* inline code blocks */
|
||
code:not([class]) {
|
||
padding: 0.125rem 0.25rem;
|
||
border-radius: 0.25rem;
|
||
background: var(--color-bg-code-inline);
|
||
}
|
||
|
||
/* code blocks with language */
|
||
pre {
|
||
overflow: auto;
|
||
background: var(--color-bg-code);
|
||
border-radius: 0.5rem;
|
||
}
|
||
|
||
pre code {
|
||
padding: 1.25rem 1.5rem;
|
||
display: block;
|
||
}
|
||
|
||
svg {
|
||
fill: currentColor;
|
||
}
|
||
svg[outline] {
|
||
fill: none;
|
||
stroke: currentColor;
|
||
}
|
||
|
||
/* Focus */
|
||
.btn:focus-visible,
|
||
[name='theme']:focus-visible + label,
|
||
.menu-item:focus-visible,
|
||
.sidebar-nav-link:focus-visible,
|
||
.md a:focus-visible,
|
||
.md button:focus-visible {
|
||
outline: var(--focus-width) solid var(--color-focus);
|
||
}
|
||
|
||
/**
|
||
* Global styles
|
||
*/
|
||
html[theme='light'] .icon,
|
||
html[theme='teatime'] .icon {
|
||
filter: grayscale(1) brightness(0);
|
||
}
|
||
|
||
.theme-switcher {
|
||
position: relative;
|
||
width: 1.5rem;
|
||
height: 100%;
|
||
}
|
||
|
||
.theme-btn {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: var(--color-bg);
|
||
cursor: pointer;
|
||
transition: background 0.3s;
|
||
}
|
||
|
||
.theme-btn[data-next] {
|
||
z-index: 3000;
|
||
background: transparent;
|
||
}
|
||
.theme-btn[data-next] > .icon {
|
||
opacity: 0;
|
||
}
|
||
|
||
.theme-btn[data-active] {
|
||
z-index: 2000;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 3rem;
|
||
margin-top: 0;
|
||
}
|
||
|
||
h2 {
|
||
font-size: 2.2rem;
|
||
}
|
||
|
||
h2:hover .anchor,
|
||
h3:hover .anchor,
|
||
h4:hover .anchor,
|
||
h5:hover .anchor {
|
||
opacity: 1;
|
||
}
|
||
|
||
.anchor {
|
||
display: block;
|
||
opacity: 0;
|
||
font-size: 0.75em;
|
||
font-weight: bold;
|
||
color: #33aef1;
|
||
float: left;
|
||
margin-left: -1.75rem;
|
||
padding-right: 0.75rem;
|
||
transition: opacity 0.3s;
|
||
position: relative;
|
||
top: 0.3em;
|
||
}
|
||
.anchor:focus {
|
||
opacity: 1;
|
||
}
|
||
.anchor:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.container {
|
||
max-width: var(--container-width);
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
padding-left: 1rem;
|
||
padding-right: 1rem;
|
||
}
|
||
|
||
.flip-y {
|
||
transform: scale(-1);
|
||
}
|
||
|
||
/* Accessibility */
|
||
.is-hidden {
|
||
border: 0;
|
||
clip: rect(0 0 0 0);
|
||
clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
|
||
height: 1px;
|
||
margin: -1px;
|
||
overflow: hidden;
|
||
padding: 0;
|
||
position: absolute;
|
||
width: 1px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.btn {
|
||
display: inline-flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 1.125rem;
|
||
padding: 0.75rem 1.5rem;
|
||
border-radius: 0.5rem;
|
||
outline: none;
|
||
letter-spacing: 0.5px;
|
||
white-space: nowrap;
|
||
line-height: 1;
|
||
transition: background 0.3s, transform 0.1s;
|
||
}
|
||
.btn:active {
|
||
transform: translate3d(0, 0.2rem, 0);
|
||
}
|
||
.btn-primary {
|
||
background: var(--color-brand);
|
||
color: #fff;
|
||
}
|
||
.btn-primary:hover {
|
||
background: rgba(51, 174, 241, 0.8);
|
||
}
|
||
.btn-secondary {
|
||
background: none;
|
||
color: var(--color-text);
|
||
}
|
||
.btn-secondary:hover {
|
||
background: var(--color-btn-secondary-hover);
|
||
}
|
||
.btn-img-left {
|
||
display: block;
|
||
float: left;
|
||
margin-right: 0.75rem;
|
||
}
|
||
|
||
/**
|
||
* Header
|
||
*/
|
||
.header-area {
|
||
height: var(--header-height);
|
||
}
|
||
.header {
|
||
background: var(--color-bg);
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 200;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
height: var(--header-height);
|
||
padding: 0 1rem;
|
||
border-bottom: 0.0625rem solid var(--color-border);
|
||
transition: background 0.3s;
|
||
}
|
||
|
||
.menu {
|
||
display: flex;
|
||
height: 100%;
|
||
}
|
||
.menu-item {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 100%;
|
||
padding: 0 1rem;
|
||
font-size: 1rem;
|
||
font-weight: 500;
|
||
}
|
||
.menu-item[data-active] .menu-item-inner {
|
||
border-bottom: var(--header-accent-height) solid var(--color-brand);
|
||
}
|
||
.menu-item-icon {
|
||
padding: 0 0.625rem;
|
||
}
|
||
.menu-item-icon-label {
|
||
font-weight: normal;
|
||
font-size: 1rem;
|
||
padding-left: 0.5rem;
|
||
}
|
||
|
||
.menu-logo {
|
||
font-weight: bold;
|
||
font-size: 1.25rem;
|
||
}
|
||
|
||
/**
|
||
* Layouts
|
||
*/
|
||
.sidebar-layout {
|
||
margin-left: 16rem;
|
||
}
|
||
|
||
.sidebar {
|
||
position: fixed;
|
||
top: var(--header-height);
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 16rem;
|
||
padding: 1.5rem 0;
|
||
background: var(--color-bg);
|
||
border-right: 1px solid var(--color-border);
|
||
overflow: auto;
|
||
z-index: 200;
|
||
outline: none;
|
||
transition: background 0.3s, transform 0.5s;
|
||
}
|
||
.sidebar.hidden {
|
||
transform: translateX(-100%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
/** Mobile off-canvas sidebar layout */
|
||
@media (max-width: 900px) {
|
||
.header {
|
||
padding-left: var(--header-height);
|
||
}
|
||
.sidebar-layout {
|
||
margin: 0;
|
||
}
|
||
.sidebar {
|
||
transform: translateX(-16rem);
|
||
transition: transform 150ms ease;
|
||
animation: none;
|
||
overflow: visible;
|
||
}
|
||
.sidebar:focus,
|
||
.sidebar:focus-within,
|
||
.sidebar:active {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
/** Sidebar toggle button */
|
||
.sidebar:before {
|
||
position: absolute;
|
||
left: 0;
|
||
top: calc(-1 * var(--header-height));
|
||
content: 'Ⅲ';
|
||
transform: translateX(16rem) rotate(90deg);
|
||
width: var(--header-height);
|
||
height: var(--header-height);
|
||
padding: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: calc(var(--header-height) / 2);
|
||
line-height: 1;
|
||
background: var(--color-brand);
|
||
color: #fff;
|
||
pointer-events: all;
|
||
transition: transform 150ms ease;
|
||
}
|
||
.sidebar.hidden:before {
|
||
display: none;
|
||
}
|
||
.sidebar:focus:before,
|
||
.sidebar:focus-within:before,
|
||
.sidebar:active:before {
|
||
animation: pointer-events 500ms linear forwards 1;
|
||
content: '×';
|
||
transform: translateX(0) rotate(90deg);
|
||
}
|
||
@keyframes pointer-events {
|
||
100% {
|
||
pointer-events: none;
|
||
}
|
||
}
|
||
|
||
/** Sidebar scrim */
|
||
.sidebar:focus:after,
|
||
.sidebar:focus-within:after,
|
||
.sidebar:active:after {
|
||
content: '';
|
||
position: fixed;
|
||
left: 100%;
|
||
top: 0;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background: rgba(0, 0, 0, 0.2);
|
||
backdrop-filter: blur(1px);
|
||
opacity: 1;
|
||
pointer-events: none;
|
||
animation: sidebar-scrim 300ms ease forwards 1;
|
||
}
|
||
@keyframes sidebar-scrim {
|
||
0% {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
body .main {
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.version {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.sidebar-title {
|
||
margin-left: 2rem;
|
||
padding-top: 1.5rem;
|
||
text-transform: uppercase;
|
||
font-size: 0.8rem;
|
||
letter-spacing: 0.5px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.sidebar-nav-link {
|
||
display: block;
|
||
margin: 0 0 0 2rem;
|
||
padding: 0.25rem 0;
|
||
color: var(--sidebar-fg);
|
||
position: relative;
|
||
transition: color 0.3s, border-color 0.5s;
|
||
border-right: 0.0625rem solid transparent;
|
||
}
|
||
.sidebar-nav-link:hover {
|
||
color: var(--color-brand);
|
||
}
|
||
.sidebar-nav-link::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translate3d(-2rem, -50%, 0);
|
||
display: block;
|
||
width: 0.5rem;
|
||
height: 0.5rem;
|
||
border-radius: 50%;
|
||
background: var(--color-brand);
|
||
opacity: 0;
|
||
transition: all 0.3s;
|
||
}
|
||
.sidebar-nav-link[data-active] {
|
||
color: var(--color-brand);
|
||
border-right: 0.125rem solid var(--color-brand);
|
||
}
|
||
.sidebar-nav-link[data-active]::before {
|
||
transform: translate3d(-1.15rem, -50%, 0);
|
||
opacity: 1;
|
||
}
|
||
|
||
/**
|
||
* Main Content Area
|
||
*/
|
||
.main {
|
||
padding: 2rem 4rem;
|
||
width: 100%;
|
||
}
|
||
|
||
/**
|
||
* Markdown
|
||
*/
|
||
.md {
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
max-width: var(--container-width);
|
||
}
|
||
|
||
.md img,
|
||
.md video {
|
||
max-width: 100%;
|
||
}
|
||
|
||
.md p {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.md ul {
|
||
list-style: disc;
|
||
margin-left: 1.25rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.md a {
|
||
color: var(--color-brand);
|
||
}
|
||
|
||
.md blockquote {
|
||
background: var(--color-info-bg);
|
||
border-radius: 0.25rem;
|
||
margin: 2rem 0;
|
||
border-left: 0.5rem solid var(--color-info);
|
||
padding: 1rem;
|
||
}
|
||
.md blockquote *:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
/**
|
||
* Pagination
|
||
*/
|
||
.pagination {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 4rem 0;
|
||
}
|
||
|
||
.pagination-link {
|
||
display: flex;
|
||
align-items: center;
|
||
transition: color 0.3s;
|
||
font-size: 1.1rem;
|
||
}
|
||
.pagination-link:hover {
|
||
color: var(--color-brand);
|
||
}
|
||
.pagination-link img {
|
||
filter: none;
|
||
}
|
||
|
||
.pagination-text {
|
||
display: inline-block;
|
||
margin: 0 0.25rem;
|
||
}
|
||
|
||
/**
|
||
* Home Layout
|
||
*/
|
||
.jumbotron {
|
||
padding: 2rem;
|
||
background: var(--color-code-bg);
|
||
text-align: center;
|
||
}
|
||
.brand {
|
||
display: flex;
|
||
max-width: 40rem;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
margin: 4rem auto 2rem;
|
||
}
|
||
.brand h1 {
|
||
position: relative;
|
||
left: 3rem;
|
||
font-size: 10rem;
|
||
margin: 0;
|
||
z-index: -1;
|
||
}
|
||
|
||
@keyframes in-space {
|
||
0% {
|
||
transform: translateY(0) rotate(-2deg);
|
||
}
|
||
50% {
|
||
transform: translateY(-1.5rem) rotate(5deg);
|
||
}
|
||
100% {
|
||
transform: translateY(0) rotate(-2deg);
|
||
}
|
||
}
|
||
|
||
@keyframes in-space-shadow {
|
||
0% {
|
||
transform: scale(1, 1);
|
||
}
|
||
50% {
|
||
transform: scale(0.7, 0.7);
|
||
}
|
||
100% {
|
||
transform: scale(1, 1);
|
||
}
|
||
}
|
||
|
||
.brand-logo,
|
||
.brand-shadow {
|
||
position: absolute;
|
||
top: -40%;
|
||
left: 50%;
|
||
margin-left: -320px;
|
||
}
|
||
.brand-shadow {
|
||
z-index: -1;
|
||
transform-origin: center 90%;
|
||
animation: in-space-shadow 8s infinite;
|
||
}
|
||
.brand-logo {
|
||
animation: in-space 8s infinite;
|
||
}
|
||
@media (max-width: 600px) {
|
||
.brand-logo,
|
||
.brand-shadow {
|
||
width: 200px;
|
||
height: 200px;
|
||
margin-left: -160px;
|
||
top: -75%;
|
||
}
|
||
}
|
||
.tagline {
|
||
font-size: 1.5rem;
|
||
font-weight: 300;
|
||
margin-bottom: 2rem;
|
||
max-width: 50ch;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.cta {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-bottom: 2rem;
|
||
}
|
||
.cta > * + * {
|
||
/* TODO: should we use spacer components + css grid instead? */
|
||
margin-left: 2rem;
|
||
}
|
||
.jumbotron h4,
|
||
.jumbotron h6 {
|
||
flex: 0 0 100%;
|
||
margin: 0.5em 0 0;
|
||
font-weight: 300;
|
||
}
|
||
.jumbotron h4 {
|
||
font-size: 1.5rem;
|
||
}
|
||
.jumbotron h6 {
|
||
font-size: 1rem;
|
||
}
|
||
@media (max-width: 599px) {
|
||
.jumbotron h1 {
|
||
font-size: 70px;
|
||
}
|
||
.jumbotron h4 {
|
||
font-size: 1.3rem;
|
||
}
|
||
.jumbotron h6 {
|
||
font-size: 0.9rem;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Feature Grid
|
||
*/
|
||
.feature-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-evenly;
|
||
margin: 4rem auto;
|
||
max-width: 80rem;
|
||
padding: 0 2rem;
|
||
}
|
||
|
||
.feature {
|
||
flex: 1 1 33%;
|
||
min-width: 300px;
|
||
padding: 1rem;
|
||
}
|
||
|
||
.feature *:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.feature-title {
|
||
font-size: 1.75rem;
|
||
margin-top: 0;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
/**
|
||
* Footer
|
||
*/
|
||
.footer {
|
||
padding: 2rem 0;
|
||
border-top: 0.0625rem solid var(--color-border);
|
||
}
|
||
|
||
.footer-text {
|
||
font-size: 0.8rem;
|
||
opacity: 0.6;
|
||
margin: 0;
|
||
}
|
||
|
||
.footer-inner {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|