mirror of
https://github.com/jaandrle/deka-dom-el
synced 2024-11-21 23:39:37 +01:00
125 lines
2.3 KiB
JavaScript
125 lines
2.3 KiB
JavaScript
import { styles } from "./ssr.js";
|
|
styles.css`
|
|
@import url(https://cdn.simplecss.org/simple.min.css);
|
|
:root{
|
|
--body-max-width: 45rem;
|
|
--marked: #fb3779;
|
|
--code: #0d47a1;
|
|
--accent: #d81b60;
|
|
}
|
|
@media (prefers-color-scheme:dark) {
|
|
:root {
|
|
--accent: #f06292;
|
|
--code: #62c1f0;
|
|
}
|
|
}
|
|
body {
|
|
grid-template-columns: 100%;
|
|
grid-template-areas: "header" "sidebar" "content";
|
|
}
|
|
@media (min-width:768px) {
|
|
body{
|
|
grid-template-rows: auto auto;
|
|
grid-template-columns: calc(10 * var(--body-max-width) / 27) auto;
|
|
grid-template-areas:
|
|
"header header"
|
|
"sidebar content"
|
|
}
|
|
}
|
|
body > *{
|
|
grid-column: unset;
|
|
}
|
|
body > header{
|
|
grid-area: header;
|
|
padding: 0;
|
|
}
|
|
body > nav{
|
|
grid-area: sidebar;
|
|
background-color: var(--accent-bg);
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
}
|
|
body > nav {
|
|
font-size: 1rem;
|
|
line-height: 2;
|
|
padding: 1rem 0 0 0;
|
|
}
|
|
body > nav ol,
|
|
body > nav ul {
|
|
align-content: space-around;
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
body > nav ol li,
|
|
body > nav ul li {
|
|
display:inline-block
|
|
}
|
|
body > nav a,
|
|
body > nav a:visited {
|
|
margin: 0 .5rem 1rem .5rem;
|
|
border: 1px solid currentColor;
|
|
border-radius: var(--standard-border-radius);
|
|
color: var(--text-light);
|
|
display: inline-block;
|
|
padding: .1rem 1rem;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
transition: all .15s;
|
|
}
|
|
body > nav a.current,
|
|
body > nav a[aria-current=page] {
|
|
background-color: var(--bg);
|
|
color: var(--text);
|
|
}
|
|
body > nav a:hover{
|
|
background-color: var(--bg);
|
|
color: var(--accent);
|
|
}
|
|
@media only screen and (max-width:720px) {
|
|
body > nav{
|
|
flex-flow: row wrap;
|
|
padding-block: .5rem;
|
|
}
|
|
body > nav a {
|
|
border:none;
|
|
text-decoration:underline;
|
|
margin-block: .1rem;
|
|
padding-block:.1rem;
|
|
line-height: 1rem;
|
|
font-size: .9rem;
|
|
}
|
|
}
|
|
main{
|
|
grid-area: content;
|
|
display: grid;
|
|
grid-template-columns:
|
|
[full-main-start] 1fr
|
|
[main-start] min(var(--body-max-width), 90%) [main-end]
|
|
1fr [full-main-end];
|
|
}
|
|
main > *{
|
|
grid-column: main;
|
|
}
|
|
.icon {
|
|
vertical-align: sub;
|
|
padding-right: .25rem;
|
|
display: inline-block;
|
|
width: 1em;
|
|
height: 1.3em;
|
|
margin-right: 0.2rem;
|
|
stroke-width: 0;
|
|
stroke: currentColor;
|
|
fill: currentColor;
|
|
}
|
|
.note{
|
|
font-size: .9rem;
|
|
font-style: italic;
|
|
}
|
|
`;
|