diff --git a/assets/css/component/a11y.css b/assets/css/component/a11y.css new file mode 100644 index 0000000000000000000000000000000000000000..99142bd6ba2d8c5b8879ae5a5a278059a4a1be70 --- /dev/null +++ b/assets/css/component/a11y.css @@ -0,0 +1,355 @@ +/* a11y button */ + +#has-a11y { + margin-right: auto; +} + +#has-a11y-summary { + padding: .6ex 1ex; + font-weight: 700; +} + +#has-a11y-summary::before{ + font-family: 'base-ui'; + font-weight: 400; + content: '\e900'; +} + +#has-a11y[open] #a11y { + --anm: expand 99ms forwards; + --tso: bottom; +} + +/* a11y container */ +#a11y { + display: flex; + position: fixed; + bottom: calc(1rem + var(--vfoot)); + flex-direction: column; + margin: 0; + border: var(--border); + border-radius: 1ex; + background: var(--bg); + padding: 1rem; + max-height: calc(100vh - var(--vhead) - var(--vfoot) - 2rem ); + overflow-y: auto; + gap: var(--medskip); +} + +/* hide input checkbox */ +#a11y input[type=checkbox], +#a11y input[type=radio], +#bionReadSwitch { + position: absolute; + top: -100vh; +} + +#a11y select, +#a11y input[type=range], +#setColorScheme label, +#setOpenDyslexic, +button { + cursor: pointer; +} + +/* range */ +label.range { + display: flex; + flex-direction: row-reverse; +} + +label.range > input { + flex: 1; + accent-color: var(--ac); +} + +label.range > output { + width: 4rem; + text-align: center; + color: var(--ac); + font: 700 var(--large) var(--sf), sans-serif; +} + +#setColorScheme { + display: flex; + flex-direction: row; + align-items: center; + margin-bottom: 1ex; +} + +/* lightswitch */ +#lightSwitch + label { + display: flex; + flex-direction: column; + align-items: center; + border-radius: 0.5ex; + padding: 1ex; + width: 4rem; + font-weight: 700; + gap: 1ex; +} + +#lightSwitch:hover + label, +#lightSwitch:focus + label, +#setContrast > input:hover + label { + background: var(--g18s); + color: var(--ac); +} + +/* credit to @mrozilla on codepen https://codepen.io/mrozilla/pen/OJJNjRb */ +input + label > #lightSwitchIndicator { + --ray-size: calc(var(--size) * -0.4); + --offset-orthogonal: calc(var(--size) * 0.65); + --offset-diagonal: calc(var(--size) * 0.45); + --tsf: scale(0.75); + --size: 1.414em; + display: block; + outline: none; + border-radius: 999px; + box-shadow: inset 0 0 0 var(--size), + calc(var(--offset-orthogonal) * -1) 0 0 var(--ray-size), + var(--offset-orthogonal) 0 0 var(--ray-size), + 0 calc(var(--offset-orthogonal) * -1) 0 var(--ray-size), + 0 var(--offset-orthogonal) 0 var(--ray-size), + calc(var(--offset-diagonal) * -1) calc(var(--offset-diagonal) * -1) 0 var(--ray-size), + var(--offset-diagonal) var(--offset-diagonal) 0 var(--ray-size), + calc(var(--offset-diagonal) * -1) var(--offset-diagonal) 0 var(--ray-size), + var(--offset-diagonal) calc(var(--offset-diagonal) * -1) 0 var(--ray-size); + width: var(--size); + height: var(--size); + color: #ffaa00; +} + +input:checked + label > #lightSwitchIndicator { + --tsf: scale(1); + box-shadow: inset calc(var(--size) * 0.33) calc(var(--size) * -0.25) 0; +} + +/* contrast */ +#setContrast { + display: flex; + position: relative; + flex: 1; + justify-content: center; + margin: 0 0 0 1ex; + border: none; + border-left: var(--bound); + padding: 2.5em 0 0 1ex; +} + +#setContrast legend { + position: absolute; + top: 0; + padding: 1ex; +} + +#setContrast label { + -webkit-transition: 99ms; + -moz-transition: 99ms; + -o-transition: 99ms; + transition: 99ms; + border-radius: 1rem; + padding: 3pt 7pt; + font-size: 0.84em !important; +} + +#setContrast > input:checked + label { + background: var(--fg); + color: var(--bg); +} + +#setContrast > input + label::before { + font-family:'base-ui'; + content: '\e904\a0'; +} + +#setContrast > input:checked + label::before { + content: '\e903\a0'; +} + +/* color palette */ +#setColorPalette { + align-items: baseline; +} + +#setColorPalette > *, +#setOpenDyslexic > * { + padding: 1ex 0; +} + +#colorPalette { + flex: 1; + margin-left: 0.5ex; + border: unset; + border-radius: 1rem; + background: var(--bg); + padding: 0.5ex 1.25ex; + color: var(--fg); + font: inherit !important; +} + +/* font */ +#baselineStretchState::after { + font-size: 0.8em; + content: '×'; +} + +#fontSizeState::after { + font-size: 0.8em; + content: 'pt'; +} + +#setOpenDyslexic > label { + display: flex; + align-items: center; +} + +#OpenDyslexicState { + display: flex; + margin-left: auto; + border-radius: 1em; + background: #80808080; + width: 2.4em; + height: 0.8em; +} + +#OpenDyslexicIndicator { + --tst: 0.5s ease-out; + position: relative; + align-self: center; + border: 1pt solid #80808008; + border-radius: 1em; + box-shadow: var(--box-shadow-focus); + background: #fff; + padding: 6pt; +} + +#OpenDyslexic:hover + label #OpenDyslexicIndicator, +#OpenDyslexic:focus + label #OpenDyslexicIndicator { + --anm: grab 3s ease-out 3; +} + +#OpenDyslexic:checked:hover + label #OpenDyslexicIndicator, +#OpenDyslexic:checked:focus + label #OpenDyslexicIndicator { + --anm: unset; +} + +#OpenDyslexic:checked + label #OpenDyslexicIndicator { + left: 1.3em; +} + +@keyframes grab { + 0%, 10%, 20%, 100% { + left: 0; + } + 5%, 15% { + left: 3pt; + } +} + +@-webkit-keyframes grab { + 0%, 20%, 40%, 100% { + left: 0; + } + 10%, 30% { + left: 3pt; + } +} + +/* menu */ +#a11y-menu { + display: inline-flex; + align-items: center; + margin: 0; + padding: 0; + width: 100%; + gap: 1ex; +} + +#a11y-menu > button { + display: inline-flex; + flex-direction: column; + align-items: center; + border: unset; + padding: 1ex; +} + +#a11y-menu > .has-aria-label { + background: unset; + color: var(--fg); +} + +#a11y-menu > .has-aria-label::before { + margin: auto; + padding: 0.25rem 0.5rem; +} + +#a11y-menu .has-aria-label:after { + font-size: 0.7em; +} + +#resetButton::before { + font-family: 'base-ui'; + content: '\e90f'; +} + +#closeButton::before { + font-family: 'base-ui'; + content: '\e913'; +} + +#bionReadButton, +#saveButton { + flex: 1; + margin-left: auto; + cursor: pointer; +} + +/* bionRead */ +b.k { + vertical-align: baseline; + letter-spacing: var(--bion); + color: var(--off); + font-weight: 400 !important; + -webkit-text-stroke: var(--bion) var(--off); + font-synthesis: weight; +} + +#useBionRead { + display: none; + margin: auto; + letter-spacing: 0.1em; + font-size: var(--footnotesize); +} + +legend, +.has-aria-label-top:before, +#setColorPalette > label, +input + label > span { + font-weight: 700; +} + +#setContrast > input + label > span { + font-weight: 400; +} + +#bionReadButton > span { + font-weight: 400; + text-transform: uppercase; +} + +#noScript, +#noLocalStorage { + margin: auto; + border-top: var(--bound); + padding-top: 1rem; + max-width: 20rem; +} + +@media only screen and (max-width: 640px) { + + #has-a11y > summary > span { + display: none; + } + +} \ No newline at end of file diff --git a/assets/css/component/background.css b/assets/css/component/background.css new file mode 100644 index 0000000000000000000000000000000000000000..604f7b20f0dc2dcd46521a1bd32a1e2f5661f5c4 --- /dev/null +++ b/assets/css/component/background.css @@ -0,0 +1,98 @@ +#background-footer, +#background-header, +#background-body { + display: flex; + position: fixed; + top: 0; + left: 0; + z-index: -2; + width: 100vw; + height: 100vh; +} + +#background-footer, +#background-header, +#background-body, +#a11y, +#lightSwitchIndicator, +#setContrast, +#colorPalette, +ul.carousel__viewport > li > a > span::before, +ul.carousel__viewport > li > a > span::after, +ul.carousel__viewport > li > a > span, +#list-categories a:hover::after, +.letterine > i { + -webkit-transition: var(--flashGuard); + -moz-transition: var(--flashGuard); + -o-transition: var(--flashGuard); + transition: var(--flashGuard); +} + +#background-body, +.background { + background-color: var(--bg); +} + +#background-header { + /* border-bottom: var(--border); */ + height: var(--vhead); +} + +#background-footer { + top: unset; + bottom: 0; + /* border-top: var(--border); */ + height: var(--vfoot); +} + +/* grain */ + +.grain, +#grain { + background-image: url("data:image/svg+xml;utf8,"); + mix-blend-mode: difference; +} + +#grain { + position: absolute; + width: 100%; + height: 100%; +} + +/* distraction */ + +#dwclock { + opacity: 0.33; + margin: auto; + width: 100vmin; + height: 100vmin; + filter: blur(2vmin) saturate(2); +} + +#hour, +#min { + position: absolute; + width: 100vmin; + height: 100vmin; +} + +.hand { + --min: 40vmin; + --hour: 28vmin; + --tsf: translateY(calc(50vmin - var(--min))); + margin: 0 auto auto ; + border-right: 2vmin solid transparent; + border-bottom: var(--min) solid #60f; + border-left: 2vmin solid transparent; + border-radius: 2vmin; + background-image: linear-gradient(0deg, var(--bg) 0%, #60f 100%); + width: 3vmin; + height: var(--min); +} + +#hour .hand { + --tsf: translateY(calc(50vmin - var(--hour))); + border-bottom: var(--hour) solid #20f; + background-image: linear-gradient(0deg, var(--bg) 0%, #20f 100%); + height: var(--hour); +} \ No newline at end of file diff --git a/assets/css/component/breadcrumb.css b/assets/css/component/breadcrumb.css new file mode 100644 index 0000000000000000000000000000000000000000..5e683f51cf330ced0d0d6349f90fde2771b8aa96 --- /dev/null +++ b/assets/css/component/breadcrumb.css @@ -0,0 +1,116 @@ +main > header.pagewidth { + margin-top: var(--medskip); + padding-left: calc(var(--void) - 0.5ex - 4pt); + height: 2.5rem; +} + +#back { + display: inline-flex; + position: relative; + top: 2.8pt; + float: left; + border: none; + background: none; + padding: 0; + color: inherit; +} + +#back::before, +header > menu a::before { + padding: 6pt 9pt; + font-size: var(--large); +} + +#rss-button::before { + font-family: 'base-ui'; + content: '\e910'; +} + +#print-button::before { + font-family: 'base-ui'; + content: '\e90c'; +} + +#navigatorShare::before { + font-family: 'base-ui'; + content: '\e912'; +} + +#copyPermalink::before { + font-family: base-ui; + content: '\e905'; +} + +main > header > menu { + float: right; + visibility: hidden; + margin: 0 0 0 auto; + padding: 0; + list-style: none; + font-size: 1.1rem; +} + +main#term > header > menu, +main#page > header > menu { + visibility: visible; +} + +main#term #print-button { + visibility: hidden; +} + +main > header > menu > li, +ul.breadcrumb > li { + display: inline; +} + +main > header > menu > li > a { + opacity: 0.86; + color: var(--fg) !important; +} + +.pagination .rfill a::before, +.carousel__viewport__slide:last-child > nav a::before, +#back::before { + --tsf: rotate(-90deg) translateX(1pt); + font-family: base-ui; + content: '\e902'; +} + +#has-breadcrumb a { + margin: 2pt; + padding: 0.5ex; + text-transform: uppercase; + letter-spacing: 0.1rem; + color: var(--fg); + font-size: var(--small); +} + +ul.breadcrumb { + display: block; + padding: 5pt 0; + overflow: auto; + text-overflow: ellipsis; + white-space: nowrap; + -ms-overflow-style: none; + scrollbar-width: none; +} + +header > menu a { + display: inline-flex; + position: relative; +} + +ul.breadcrumb > li:last-child a { + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-touch-callout: none; +} + +ul.breadcrumb > li + li:before { + color: var(--mid); + content: '/'; +} \ No newline at end of file diff --git a/assets/css/component/card.css b/assets/css/component/card.css new file mode 100644 index 0000000000000000000000000000000000000000..c3d4b6bd709a3aa5032d9f11cb919062a8655908 --- /dev/null +++ b/assets/css/component/card.css @@ -0,0 +1,167 @@ +.feed-item { + position: relative; + transition: 99ms; + margin: var(--medskip) auto var(--medskip) 0; + padding: 1rem; + width: var(--golden-ratio); + font-size: var(--small); +} + +.feed-item:hover, +.feed-item:focus-within { + --tsf: scale(1.01); +} + +.feed-item * { + margin-top: 0; + margin-bottom: 0; +} + +.feed-item h1 { + margin: 8pt 0 0 0; + font-size: var(--Large); + font-weight: 700; +} + +.feed-item img { + width: auto; + height: auto; + max-height: 38vh; + aspect-ratio: 10/8; + object-fit: cover; +} + +.feed-item .par { + --grd: linear-gradient(var(--off) 50%, transparent 100%); + opacity: 0.86; + margin-right: auto; + -webkit-mask-image: var(--grd); + mask-image: var(--grd); + clip-path: text; +} + +.feed-item img + .par { + width: var(--golden-ratio); +} + +.feed-item > a { + position: absolute; + top: 2.5rem; + right: 0; + bottom: 3rem; + left: 0; + transition: 0.2s; + z-index: 1; +} + +.feed-item > a:hover, +.feed-item > a:focus { + top: 0; + bottom: 0; + background-color: #80808008; +} + +.feed-item > hgroup { + display: flex; + flex-direction: column; +} + +.feed-item > section { + display: flex; + flex-direction: row-reverse; + margin: 8pt 0; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + gap: 1rem; +} + +.feed-item > section.has-cover { + aspect-ratio: 10/3; +} + +.feed-item > footer, +.feed-item > hgroup > div { + display: flex; + flex-flow: nowrap; + align-items: center; + white-space: nowrap; +} + +.feed-item > footer > ul, +.feed-item > hgroup > div > span { + display: block; + overflow-x: auto; + -ms-overflow-style: none; + scrollbar-width: none; + text-overflow: ellipsis; +} + +.feed-item > hgroup > div > div { + margin-left: auto; + padding-left: 1rem; +} + +.feed-item > footer > ul { + text-align: right; + font-size: var(--scriptsize); +} + +.readingTime { + margin-right: auto; + padding-right: 1rem; +} + +.readingTime + .baselineskip { + height: 1em; +} + +.flowlines { + border: var(--border); + object-fit: none !important; +} + +ul.pagination { + display: flex; + margin: var(--medskip) 1ex; +} + +.pagination a { + display: flex; + padding: 1ex 1em; + text-transform: uppercase; + letter-spacing: 0.2ex; + color: var(--ac); + gap: 1ex; +} + +@media only screen and (max-width: 640px) { + + .feed-item { + width: unset; + } + + aside + #list-posts .feed-item { + width: var(--golden-ratio); + } + + aside + #list-posts .feed-item > section { + flex-direction: column; + aspect-ratio: unset; + } + + aside + #list-posts .feed-item .par { + max-height: 25vh; + width: unset; + } + +} + +@media only screen and (max-width: 480px) { + + .feed-item > section { + flex-direction: column; + aspect-ratio: unset !important; + } + +} \ No newline at end of file diff --git a/assets/css/component/carousel.css b/assets/css/component/carousel.css new file mode 100644 index 0000000000000000000000000000000000000000..b44b191708896ee5b05dfd2b67d804d9fd195b24 --- /dev/null +++ b/assets/css/component/carousel.css @@ -0,0 +1,299 @@ +/* + +
+ +
+
----
----
----
----
---- + | | | | | | | | | | + | | | | | | | | | | + | | | | | | | | | | + | | | | | | | | | | + ---
| | ---
| | ---
+ ---
---
+
+
+*/ +.carousel { + position: relative; + width: 100%; + overflow: hidden; +} + +.carousel__nav { + display: flex; + position: absolute; + right: 2rem; + bottom: 2rem; + justify-content: flex-end; + z-index: 1; + width: calc(100% - 4rem); + font-size: var(--small); +} + +.carousel__nav > ul { + overflow-x: auto; + white-space: nowrap; +} + +.carousel__viewport nav a { + display: flex; + z-index: 2; + font-size: var(--small); +} + +.carousel__viewport { + display: flex; + height: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + scroll-behavior: smooth; + scroll-snap-type: x mandatory; + scrollbar-width: none; +} + +ul.carousel__viewport { + border: none; + padding: 0; +} + +.carousel__viewport > div, +.carousel__viewport > section, +ul.carousel__viewport > li, +.carousel__viewport__slide { + display: flex; + position: relative; + flex-direction: row; + flex-shrink: 0; + flex-wrap: wrap; + align-items: center; + width: 100%; +} + +ul.carousel__viewport > li { + position: relative; + margin: 1ex; + border-radius: 1ex; + background-size: cover; + width: 16rem; + height: 12.8rem; +} + +ul.carousel__viewport > li > a { + position: absolute; + top: -1px; + right: 0; + bottom: 0; + left: -1px; + border-radius: 0.82ex; + overflow: clip; + color: var(--fg); + font-size: var(--small); + font-weight: bold; +} + +ul.carousel__viewport > li:hover, +ul.carousel__viewport > li:focus-within { + --tsf: scale(0.96); + opacity: 0.86; +} + +ul.carousel__viewport > li > a > span { + display: inline-block; + position: relative; + border-radius: 0 0 1ex 0; + background-color: var(--bg); + padding: 0.7ex 2ex; + max-width: 12.8rem; +} + +ul.carousel__viewport > li > a > span::before, +ul.carousel__viewport > li > a > span::after { + position: absolute; + border-top-left-radius: 1ex; + box-shadow: 0 -1ex 0 0 var(--bg); + background-color: transparent; + width: 1ex; + height: 2ex; + content: ''; +} + +ul.carousel__viewport > li > a > span::before { + bottom: -2ex; + left: 0; +} + +ul.carousel__viewport > li > a > span::after { + top: 0; + right: -1ex; +} + +.carousel__viewport__slide__cover { + flex: 1 1 40%; + padding: 1.5rem 0 5rem 1.5rem; + height: 100%; + max-height: 1024px; +} + +.carousel__viewport__slide__content { + margin-bottom: auto; + padding: 0 2rem; + width: 100%; + max-height: calc(100% - 5rem); + overflow-y: auto; +} + +.carousel__viewport__slide__content h1.section-title { + margin: 0 !important; + padding: var(--smallskip) 0 1ex; + font: italic var(--Large) var(--rm), serif; +} + +.carousel__viewport__slide__content h2 { + font-size: var(--large); +} + +.carousel__viewport__slide__content h3 { + font-size: var(--normalsize); +} + +.carousel__viewport__slide__content p { + max-width: var(--canonic); +} + +.carousel__viewport__slide__content .footnotes p { + max-width: unset; +} + +.carousel__viewport__slide__cover + .carousel__viewport__slide__content { + flex: 1 1 60%; + margin-bottom: 5rem; +} + +.carousel__viewport__slide__cover + .carousel__viewport__slide__content p { + width: unset; +} + +.carousel__viewport__slide__cover img { + border-radius: 1ex; + width: 100%; + height: 100%; + object-fit: cover; +} + +/* 2 item */ + +#list-tags > nav a, +.carousel__viewport__slide > nav a { + display: inline-flex; + padding: 1ex; + gap: 1ex; +} + +.carousel__viewport__slide > nav a { + text-transform: uppercase; + letter-spacing: 0.1em; + color: var(--fg); +} + +.pagination .lfill a::after, +#list-tags > nav a::after, +.carousel__viewport__slide:first-child > nav a::after { + /* -> */ + --tsf: rotate(90deg); + font-family: base-ui; + content: '\e902'; +} + +.carousel__viewport .rfill { + display: inline-block !important; +} + +#list-taxonomy > .carousel__viewport { + flex-direction: column; + height: calc(14.8rem + 2ex); + overflow-y: auto; + scroll-snap-type: y mandatory; +} + +#list-taxonomy #list-series, +#list-taxonomy #list-categories { + padding: 1rem 0; +} + +#list-series ul.carousel__viewport, +#list-categories ul.carousel__viewport, +#list-author ul.carousel__viewport { + scrollbar-width: thin; +} + +#list-categories a:hover::after { + position: absolute; + right: 1ex; + bottom: 1ex; + border-radius: 0.7ex; + background: var(--bg); + padding: 0.7ex 0; + width: calc(3.2rem - 2ex); + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; + content: attr(data-post-counter); +} + +@media only screen and (max-width: 960px) { + + aside.carousel { + width: unset; + } + +} + +@media only screen and (max-width: 640px) { + + .carousel__nav { + right: 0; + bottom: 0; + background: var(--bg); + width: unset; + } + + .carousel__viewport__slide > .carousel__nav { + position: sticky; + position: -webkit-sticky; + } + + aside .carousel__viewport > div, + aside .carousel__viewport > section, + aside .carousel__viewport__slide { + display: block; + height: 100%; + overflow-y: auto; + } + + .carousel__viewport__slide__cover { + padding: unset; + height: unset; + } + + .carousel__viewport__slide__cover img { + border-radius: 0; + padding: 0 1rem; + height: unset; + } + + .carousel__viewport__slide__content { + padding: 0 1rem 5rem; + max-height: unset; + } + + .carousel__viewport__slide__cover + .carousel__viewport__slide__content { + margin-bottom: 1rem; + } + + .carousel__nav > ul.rounded { + padding: 1ex 0; + width: calc(100vw - 2rem); + text-align: right; + } + +} \ No newline at end of file diff --git a/assets/css/component/column.css b/assets/css/component/column.css new file mode 100644 index 0000000000000000000000000000000000000000..9aa5e3d403b69b1ae35b3c0b759ec5bc85518d80 --- /dev/null +++ b/assets/css/component/column.css @@ -0,0 +1,69 @@ +.column { + /* auto column count */ + --col: 16rem; + display: block; + -webkit-column-gap: 1.618rem; + -moz-column-gap: 1.618rem; + column-gap: 1.618rem; + column-fill: balance; + -webkit-column-width: var(--col); + -moz-column-width: var(--col); + column-width: var(--col); +} + +.column--multicols { + /* modify column count on element inline: + */ + --col: unset; + --multicols: 3; + -webkit-column-count: var(--multicols); + -moz-column-count: var(--multicols); + column-count: var(--multicols); +} + +.column__span { + column-span: all; +} + +.column > *, +.column__item { + margin-bottom: 1.618rem; + break-after: auto; + break-before: auto; + break-inside: avoid; +} + +.column img { + width: 100%; + height: auto; +} + +.column.pin { + --col: 12rem; +} + +.has-quote { + display: flex; + flex-direction: column-reverse; + color: var(--fg); +} + +.has-quote::after { + margin: unset; +} + +.has-quote > div { + margin-left: auto; +} + +.has-quote > img { + margin: 1ex 0; +} + +@media screen and (max-width: 640px) { + + .column.pin { + --col: 10rem; + } + +} \ No newline at end of file diff --git a/assets/css/component/fediverse.css b/assets/css/component/fediverse.css new file mode 100644 index 0000000000000000000000000000000000000000..a1534577ecc38d485b81ff8b191a5db43b62f2b7 --- /dev/null +++ b/assets/css/component/fediverse.css @@ -0,0 +1,88 @@ +/* this style is used inline in fediverse.js */ + +#comments > * { + width: var(--golden-ratio); +} + +#comments noscript { + margin: var(--medskip) 0; +} + +#discussion-starter { + margin-bottom: var(--medskip); +} + +#discussion-starter > footer { + display: flex; + align-items: center; + justify-content: space-between; +} + +.mastodon-comment { + margin: 1rem 0 1rem calc(var(--mul) * var(--indent)); + border: 1pt solid #fff4; + border-left: 2pt solid var(--ac); + box-shadow: 0 0.5pt 1pt 0 var(--g18s); + background: #80808008; + padding: 1rem 1rem 1ex; + overflow: auto; +} + +.mastodon-comment .content { + margin-left: 4rem; + line-height: calc(var(--baselineStretch) * 1.272); +} + +.mastodon-comment .par a { + max-width: 100%; + vertical-align: bottom; + white-space: break-spaces; +} + +.mastodon-comment .attachments * { + width: 100%; + height: auto; +} + +.mastodon-comment > footer { + margin-top: 1rem; + margin-left: 3.5rem; +} + +.mastodon-comment > footer .stat { + display: inline-flex; + flex-shrink: 0; + gap: 5pt; +} + +.stat a { + display: inline-flex; + align-items: center; + padding: 2pt; + color: var(--mid); + gap: 2pt; +} + +.stat a::before { + vertical-align: text-top; +} + +a.favourites.active { + color: var(--i3i); +} + +.mastodon-comment .date { + margin-left: auto; + padding-left: 1rem; + color: var(--mid); + font-size: calc(10pt * var(--fontScale));; +} + +@media only screen and (max-width: 960px) { + + .mastodon-comment .content, + .mastodon-comment > footer { + margin-left: 0; + } + +} diff --git a/assets/css/component/hero.css b/assets/css/component/hero.css new file mode 100644 index 0000000000000000000000000000000000000000..7519763b8ee19b35f98d5f4f2373469e059ded4a --- /dev/null +++ b/assets/css/component/hero.css @@ -0,0 +1,92 @@ +/* + +
+ +
+
----
----
----
----
---- + | | | | | | | | | | + | | | | | | | | | | + | | | | | | | | | | + | | | | | | | | | | + ---
| | ---
| | ---
+ ---
---
+
+
+*/ +.hero { + display: flex; + position: relative; +} + +.hero__image { + display: flex; + position: -webkit-sticky; + position: sticky; + top: 0; + float: left; + height: calc(var(--vbody) - 14.8rem - 1rem - 2ex); + max-height: 1024px; +} + +.hero > * { + width: 50%; +} + +.hero img { + margin-left: auto; + padding: 2rem; + max-width: 100%; + max-height: calc(var(--vbody) - 14.8rem - 1rem - 2ex); + object-fit: cover; +} + +.hero__content { + --col: 27rem; + padding: 2rem 0; + max-width: var(--col); + font-size: var(--small); +} + +.hero__content h1, +.hero__content h2, +.hero__content h3 { + margin: 4pt 0; + font: italic var(--Large) var(--rm), serif; + line-height: 1.618; +} + +@media only screen and (max-width: 960px) { + + .hero { + width: 100%; + } + +} + +@media only screen and (max-width: 640px) { + + .hero { + display: flex; + flex-direction: column; + } + + .hero > * { + align-self: center; + width: 86%; + } + + .hero__image { + position: inherit; + width: unset; + height: unset; + } + +} + +@media only screen and (max-width: 480px) { + + .hero img { + padding: 1rem; + } + +} \ No newline at end of file diff --git a/assets/css/component/keyframe.css b/assets/css/component/keyframe.css new file mode 100644 index 0000000000000000000000000000000000000000..7a9309d90aaf20cd1e95698f43118b0d663b1f02 --- /dev/null +++ b/assets/css/component/keyframe.css @@ -0,0 +1,85 @@ +@keyframes ellipsis { + 0% {content: '...';} + 25% {content: '';} + 50% {content: '.';} + 100% {content: '..';} +} + +@-webkit-keyframes ellipsis { + 0% {content: '...';} + 25% {content: '';} + 50% {content: '.';} + 100% {content: '..';} +} + +@-webkit-keyframes idle { + from, to {border-color: var(--paper);} + 50% {border-color: transparent;} +} + +@keyframes idle { + from, to {border-color: var(--paper);} + 50% {border-color: transparent;} +} + +@-webkit-keyframes blinking { + from, to {visibility: visible;} + 50% {visibility: hidden;} +} + +@keyframes blinking { + from, to {visibility: visible;} + 50% {visibility: hidden;} +} + +@keyframes expand { + from { + -webkit-transform: scale(1 , 0); + -moz-transform: scale(1 , 0); + -ms-transform: scale(1 , 0); + -o-transform: scale(1 , 0); + transform: scale(1 , 0); + } + to { + -webkit-transform: scale(1 , 1); + -moz-transform: scale(1 , 1); + -ms-transform: scale(1 , 1); + -o-transform: scale(1 , 1); + transform: scale(1 , 1); + } +} + +@-webkit-keyframes expand { + from { + -webkit-transform: scale(1 , 0); + transform: scale(1 , 0); + } + to { + -webkit-transform: scale(1 , 1); + transform: scale(1 , 1); + } +} + +@media (prefers-reduced-motion) { + + @keyframes expand { + from { + -webkit-transform: unset; + -moz-transform: unset; + -ms-transform: unset; + -o-transform: unset; + transform: unset; + } + } + + @-webkit-keyframes expand { + from { + -webkit-transform: unset; + -moz-transform: unset; + -ms-transform: unset; + -o-transform: unset; + transform: unset; + } + } + +} \ No newline at end of file diff --git a/assets/css/component/link.css b/assets/css/component/link.css new file mode 100644 index 0000000000000000000000000000000000000000..3ce6f5b4943a547a9aad5d19b2cbf8bc40b9c696 --- /dev/null +++ b/assets/css/component/link.css @@ -0,0 +1,81 @@ +a { + text-decoration: none; + color: var(--ac); +} + +#bionReadSwitch + label, +#join-discussion, +#saveButton, +#share, +a.cta { + border-radius: 2em; + background: var(--fg); + padding: 6pt 12pt; + color: var(--bg); + font-weight: 700; + text-align: center; +} + +#has-a11y-summary, +a.underline { + border: 2pt solid transparent; + border-width: 0 0 2pt 0; +} + +#to-top:focus, +#has-a11y-summary:hover, +#has-a11y-summary:focus, +#has-a11y[open] #has-a11y-summary, +a.underline:hover, +a.underline:focus { + --anm: underline 127ms ease-in; + border-color: var(--ac); + -webkit-animation: var(--anm); + -moz-animation: var(--anm); + -o-animation: var(--anm); + animation: var(--anm); +} + +ul.rounded li { + margin: 0.5ex; + display: inline-block; +} + +ul.rounded a { + display: inline-flex; + opacity: 0.86; + border: var(--border); + border-radius: 2rem; + background: #80808008; + padding: 0.5ex 1em; + color: var(--fg); + gap: 1pt; +} + +ul.rounded a:hover { + border-color: #80808022; + box-shadow: var(--box-shadow-active); + background: #80808016; +} + +ul.invert a { + opacity: 0.86; + border: unset; + background: var(--fg) !important; + color: var(--bg) !important; +} + +ul.invert a:visited { + color: var(--bg); +} + +ul.has-hash a { + text-transform: uppercase; + letter-spacing: 0.1rem; + font-size: 0.9em; +} + +#term .section-title > .tag::before, +ul.has-hash a::before { + content: '#'; +} \ No newline at end of file diff --git a/assets/css/component/logotype.css b/assets/css/component/logotype.css new file mode 100644 index 0000000000000000000000000000000000000000..150f2bb77993e8af1663fa6e8f40ce4b41a00af5 --- /dev/null +++ b/assets/css/component/logotype.css @@ -0,0 +1,105 @@ +/* _____ _ _ _ ____ __ __ + | ___| / \ | \ | | / ___| \ \ / / + | |_ / _ \ | \| | | | \ V / + | _| / ___ \ | |\ | | |___ | | + |_| /_/ \_\ |_| \_| \____| |_| + + + + FANCY LOGOTYPE + + + + simplified from : + https://codepen.io/alvarotrigo/pen/rNbxNWg */ + +#logo { + --h: calc(3.33rem - 10pt); + display: flex; + align-items: center; + justify-content: center; + margin: 5pt 0; + height: var(--h); +} + +#logo > * { + height: var(--h); +} + +#logo #logotype__text { + --anm: dash 30s infinite alternate; + text-transform: uppercase; + letter-spacing: 0.2ex; + font-family: var(--sf), sans-serif; + font-size: calc(27pt * var(--fontScale)); + font-weight: 700; + stroke: var(--off); + stroke-width: 1px; +} + +#logo:focus #logotype__text { + --anm: unset; + outline-color: var(--off); + stroke: none; +} + +@-webkit-keyframes dash { + 0% { + fill:var(--off); + stroke-dasharray: 0 50%; + stroke-dashoffset: 20%; + } + + 100% { + fill: #0000; + stroke-dasharray: 50% 0; + stroke-dashoffset: -20%; + } +} + +@keyframes dash { + 0% { + fill: var(--off); + stroke-dasharray: 0 50%; + stroke-dashoffset: 20%; + } + + 100% { + fill: #0000; + stroke-dasharray: 50% 0; + stroke-dashoffset: -20%; + } +} + +/* logomark default */ + +#logomark--dark + #logomark { + display: inline-block; +} + +@media (prefers-color-scheme: light) { + + #logomark--dark { + display: none; + } + + #logomark--dark + #logomark { + display: inline-block; + } + +} + +@media (prefers-color-scheme: dark) { + + #logomark--dark { + display: inline-block; + } + + #logomark--dark + #logomark { + display: none; + } + +} \ No newline at end of file diff --git a/assets/css/component/marginpar.css b/assets/css/component/marginpar.css new file mode 100644 index 0000000000000000000000000000000000000000..692e2cb94059851c2a86c5f79fcbc57dc6af29c5 --- /dev/null +++ b/assets/css/component/marginpar.css @@ -0,0 +1,51 @@ +.marginpar { + left: var(--golden-ratio); + margin-right: 0; + margin-left: calc(var(--marginparwidth) * -1); + font-size: var(--small); + font-style: italic; +} + +.marginpar.abs { + /* will ignore clear attribute */ + position: absolute; + right: var(--void); + left: unset; +} + +.marginpar-ctrl, +.marginpar-ctrl + label::before { + position: absolute; + top: -100vh; +} + +@media screen and (max-width: 640px) { + + .marginpar-ctrl + label { + display: inline-flex; + padding: 2pt; + } + + .marginpar-ctrl + label::before { + position: unset; + display: block !important; + left: 0; + } + + .marginpar-ctrl:checked + label::before { + --anm: unset; + color: var(--ac); + } + + .marginpar { + display: none; + float: unset; + } + + .marginpar-ctrl:checked + label + .marginpar { + display: block; + position: unset; + margin: 1ex 0; + } + +} \ No newline at end of file diff --git a/assets/css/component/menu.css b/assets/css/component/menu.css new file mode 100644 index 0000000000000000000000000000000000000000..48cd1f97823a29ac1ae205aa7c9855400c265b80 --- /dev/null +++ b/assets/css/component/menu.css @@ -0,0 +1,560 @@ +ul.delimiter, +ul.breadcrumb, +nav > ul, +ul[role=presentation] { + margin: 0; + list-style: none; + font-size: inherit; +} + +ul.delimiter, +ul.delimiter li, +ul.inline, +ul.inline li, +nav > ul, +nav > ul > li { + display: inline; + padding: 0; +} + +/* container */ + +body > header, +body > header > nav { + display: flex; + z-index: 2; +} + +#top-nav { + margin-left: auto; + font-weight: bold; +} + +#top-nav[open], +#has-main-menu { + flex: 1; +} + +#top-nav > nav { + display: flex; + justify-content: flex-end; + gap: 1ex; +} + +#logo + #top-nav #main-menu, +#logo + #top-nav #main-menu .l1 { + /* flush item to right-end when logotype on the left */ + justify-content: flex-end; +} + +#main-menu .l1 { + display: flex; + gap: 1ex; +} + +/* menu icon */ + +.menu-icon::before { + content: '\e90b'; + font-family: 'base-ui'; +} + +.keydown .menu-icon::before { + border: var(--border); +} + +#has-more-menu > summary { + width: 43pt; +} + +#has-a11y[open] > summary .icon::before, +#has-search[open] .icon::before, +details[open] > summary > .menu-icon::before { + --anm: blinking 2s step-end infinite; + color: var(--ac); +} + +/* on 'hull' viewport */ + +#i18n-menu, +#more-menu, +.on-hull, +.screening { + /* 'hull' --vbody container */ + position: fixed; + top: var(--vhead); + left: 0; + width: 100vw; + height: var(--vbody); +} + +.screening { + /* obscure main body */ + --blur: blur(0.2vmin); + --dim: brightness(0.96); + z-index: -1; + background-color: #80808008; + -webkit-backdrop-filter: var(--blur) var(--dim); + backdrop-filter: var(--blur) var(--dim); +} + +/* item on 'deck' */ + +.on-deck, +a#has-i18n { + display: flex; + align-items: center; + justify-content: center; + margin: auto 0; + padding: unset; + min-width: var(--vhead); + height: calc(var(--vhead) - 12pt); + max-height: 4.2rem; +} + +#has-i18n > .on-deck { + padding: 0 1ex; + width: unset; +} + +/* item on 'plank' */ + +.on-plank { + /* add on-plank */ + display: flex; + flex-direction: column; + border: var(--border); + border-radius: 1ex; + background: var(--bg); + padding: 1.414ex; + width: fit-content; + max-height: calc(var(--vbody) - 2rem); + overflow-y: auto; + gap: 1ex; +} + +.on-plank ul { + display: flex; + flex-direction: column; + margin: 0 1ex; + border-right: var(--bound); + padding: 1ex; + gap: 1ex; +} + +details[open] .on-plank, +.l1 details[open] > ul, +.marginpar-ctrl:checked + label + .marginpar { + --anm: expand 99ms forwards; + --tso: top; +} + +#main-menu .on-plank { + position: fixed; + top: calc(var(--vhead) + 1rem); + max-width: 20rem; + translate: -1.414ex; +} + +#i18n-menu > .on-plank, +#more-menu > .on-plank { + /* .on-hull > .on-plank */ + margin: 1rem var(--void) 1rem auto; + max-width: var(--max-width); +} + +/* visible menu item */ + +#has-l10n a, +#top-nav a, +.anchor { + display: flex; + align-items: baseline; + border: 2pt solid transparent; + border-width: 0 0 2pt 0; + padding: 1ex; + width: 100%; + color: var(--fg); +} + +#top-nav a > .icon::after { + content: '\a0'; +} + +#top-nav a.has-desc { + flex-direction: column; +} + +.anchor { + align-items: center; +} + +#has-l10n a:hover, +#has-l10n a:focus, +#top-nav a:hover, +#top-nav a:focus, +.anchor:hover, +.anchor:focus { + --anm: underline 127ms ease-in; + color: var(--ac); + border-color: var(--ac); +} + +@-webkit-keyframes underline { + from { + border-image: linear-gradient(to right, var(--ac), transparent 100%) 1; + } + + 50% { + border-image: linear-gradient(to right, var(--ac), transparent 50%) 1; + } + + to { + border-image: linear-gradient(to right, var(--ac), transparent 0%) 1; + } +} + +@keyframes underline { + from { + border-image: linear-gradient(to right, transparent, transparent) 1; + } + + 50% { + border-image: linear-gradient(to right, var(--ac), transparent) 1; + } + + to { + border-image: linear-gradient(to right, var(--ac), var(--ac)) 1; + } +} + +.marginpar-ctrl + label::before, +.anchor:after { + /* add indicator [v] */ + --tst: 200ms ease-out; + position: relative; + top: 0.23em; + left: 0.43em; + margin-left: auto; + background: linear-gradient(to top, transparent 49%, var(--g18) 51%); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + font: 8pt 'base-ui'; + content: '\e913'; +} + +.anchor:hover::after { + background: linear-gradient(to top, transparent 49%, var(--ac) 51%); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} + +#has-i18n .anchor::after { + left: unset; +} + +.marginpar-ctrl:checked + label::before, +details[open] > .anchor:after { + /* change indicator state [x] */ + --anm: blinking 3s step-end infinite; + background: unset; + top: 0; + color: var(--g18); +} + +details[open] > .anchor.on-deck:after { + /* make opened
element more prominent */ + color: red; +} + +/* bilingual */ + +a#has-i18n { + width: auto; + font-weight: 700; + font-size: 0.9em; + gap: 3pt; +} + +a#has-i18n > .alt, +a#has-i18n:hover > .act, +a#has-i18n:focus > .act, +a#has-i18n:active > .act { + /* active/current language */ + color: var(--g18); +} + +a#has-i18n:hover > .alt, +a#has-i18n:focus > .alt, +a#has-i18n:active > .alt { + /* alternate language */ + color: var(--fg); +} + +/* multilingual */ + +#has-i18n .on-deck { + gap: 3pt; +} + +#has-l10n { + display: inline-block; +} + +#has-l10n summary { + display: block !important; + padding: 3.5pt 1.4ex 3.5pt 3.5pt; + font-size: 0.9em; +} + +#has-l10n > summary::before { + font-family: 'base-ui'; + content: '\e90a\a0'; +} + +#has-l10n a, +#i18n-menu a { + align-items: center; + gap: 1ex; +} + +#has-l10n img, +#has-i18n img { + border-radius: 2pt; + width: auto; + height: 8pt; + object-fit: cover; +} + +#has-l10n .on-plank { + position: absolute; + z-index: 1; + margin-top: 1ex; + border: var(--border); + background: var(--bg); + width: auto; +} + +.parent-anchor a::after, +#i18n-menu a::after, +#content a::after { + --tsf: rotate(45deg); + display: inline-block; + margin-top: 0.3em; + margin-left: auto; + font: 0.7em 'base-ui'; + content: '\e902'; +} + +.parent-anchor a::after, +#i18n-menu a::after { + color: var(--g18); +} + +.hero nav a { + color: var(--fg); + position: relative; +} + +.hero nav .t { + top: 150%; +} + +.hero nav a .icon { + display: inline-flex; + margin: 2pt; + padding: 6pt; + font-size: var(--large); +} + +@media only screen and (max-width: 640px) { + + /* container behaviour */ + + #top-nav * { + outline: none !important; + } + + #top-nav[open] > nav { + --anm: expand 99ms forwards; + --tso: top; + } + + #main-menu { + display: unset; + } + + #main-menu .l1 { + flex-direction: column; + } + + /* swap menu-icon */ + + #top-nav > summary, + #top-nav[open] > summary { + display: flex !important; + margin-left: auto; + width: 43pt; + } + + #has-more-menu > summary { + width: 100%; + } + + #has-more-menu .t, + #has-search .t { + display: initial; + position: unset; + visibility: unset; + background: unset; + width: 100%; + color: inherit; + font: inherit; + } + + /* swap screen element */ + + #top-nav-screen.screening { + display: block; + background-color: var(--bg); + backdrop-filter: blur(5vmin); + } + + /* swap hull element */ + + #top-nav > nav { + position: fixed; + top: var(--vhead); + left: 0; + flex-direction: column; + justify-content: unset; + z-index: 3; + padding: 1.414ex; + width: 100vw; + height: var(--vbody); + overflow-y: auto; + } + + #i18n-menu, + #more-menu, + #hasDuckDuckGo, + #main-menu .on-plank { + /* also unset main menu plank */ + position: unset; + width: unset; + max-width: unset; + height: unset; + } + + /* reorder hull item */ + + #has-search { + order: 1; + } + + #has-main-menu { + flex: unset; + order: 2; + } + + #has-more-menu { + order: 3; + } + + #has-i18n { + order: 4; + margin: auto 1ex 2rem; + } + + /* redefine deck element */ + + #top-nav > nav .on-deck { + justify-content: unset; + height: unset; + } + + #top-nav > nav #has-i18n .on-deck { + padding: 1ex; + } + + /* swap plank element */ + + .on-plank { + border: unset; + background: unset; + min-width: unset; + max-height: unset; + } + + #main-menu .on-plank { + margin: 0 1ex; + border-right: var(--bound); + border-radius: 0; + padding: 1ex; + translate: unset; + } + + #i18n-menu > .on-plank , + #more-menu > .on-plank { + /* .on-hull > .on-plank */ + margin: unset; + padding: 0; + width: 100%; + } + + #has-main-menu, + #has-more-menu, + #has-search { + /* make as plank */ + margin: 1ex; + border: var(--border); + border-radius: 1ex; + background: var(--bg); + padding: 1ex; + } + + details[open] > .anchor.on-deck:after { + color: var(--g18); + } + + /* bilingual */ + + a#has-i18n::after { + margin: 0 auto 0 1.5ex; + content: attr(aria-label); + } + + a#has-i18n > img { + display: initial; + } + + /* multilingual */ + + #has-i18n img { + height: 12pt; + } + + #i18n-menu { + margin-top: 1ex; + } + + .languangeName { + display: block !important; + margin-left: 0.5ex; + } + + /* hide desktop element */ + + #top-nav > nav .screening, + #top-nav > summary > .t, + #has-search[open] > summary, + #has-more-menu[open] > summary, + #has-more-menu .menu-icon, + #has-search .icon, + .iso639 { + display: none; + } + +} \ No newline at end of file diff --git a/assets/css/component/search.css b/assets/css/component/search.css new file mode 100644 index 0000000000000000000000000000000000000000..22aa3b91686f2a9b51dae4cea90f0f9a0455a530 --- /dev/null +++ b/assets/css/component/search.css @@ -0,0 +1,196 @@ +#has-search > summary::before { + padding: 0 1ex; + font-family: 'base-ui'; + font-weight: 400; + content: '\e911'; +} + +#duckduckgo, +.pagefind-ui { + margin: 1rem var(--void) 1rem auto; + width: calc(var(--marginparwidth) - 1rem); + min-width: 17rem; + max-height: calc(var(--vbody) - 2rem); + font-weight: normal; +} + +.pagefind-ui { + display: flex; + flex-direction: column; + border: var(--border); + border-radius: 1ex; + background: var(--bg); + padding: 1.414ex; + overflow-y: auto; + gap: 1ex; +} + +#has-search[open] > summary > .t, +.pagefind-ui__search-clear { + display: none; +} + +.pagefind-ui__drawer p { + margin: 0; +} + +#duckduckgo { + flex-direction: row; +} + +.form { + align-items: center; +} + +/* the search box */ + +.form__input { + flex: 1; + border: none; + border-radius: 2rem 0 0 2rem; + background: none; + padding: 0; + padding-left: 1em; + color: var(--fg); + font-family: var(--sf), sans-serif; +} + +#duckduckgo .form__input { + --ac: #de5833; + flex: 1; + border-bottom: 2pt solid var(--g18s); + border-radius: 0.25ex; + padding: 1ex; +} + +.pagefind-ui__search-input:hover, +.pagefind-ui__search-input:focus, +#duckduckgo .form__input:hover, +#duckduckgo .form__input:focus { + --anm: underline 127ms ease-in; + outline: none !important; + border-color: var(--ac); + -webkit-animation: var(--anm); + -moz-animation: var(--anm); + -o-animation: var(--anm); + animation: var(--anm); +} + +/* the search button */ + +.pagefind-ui__button, +.form__reset, +.form__button { + display: inline-flex; + position: relative; + border: none; + border-radius: 0 50% 50% 0; + background: none; + padding: 0; +} + +#duckduckgo .form__button, +#duckduckgo .form__button > img { + width: 2rem; + height: 2rem; +} + +#duckduckgo .form__input:hover + .form__button, +#duckduckgo .form__input:focus + .form__button { + --tsf: scaleX(-1); +} + +#duckduckgo .form__button:hover, +#duckduckgo .form__button:focus { + --tsf: scale(1.1); +} + +.form:invalid .form__reset { + opacity: 0; + pointer-events: none; +} + +.form:valid .form__reset { + opacity: 1; + pointer-events: all; +} + +/* additional pagefind styles */ + +.pagefind-ui__form { + display: flex; + flex-direction: column; + gap: 1ex; +} + +.pagefind-ui__search-input { + margin: 1ex 1ex 0.5ex; + border: 0; + border-bottom: 2pt solid var(--g18s); + background: none; + padding: 1ex !important; + color: var(--fg); +} + +.pagefind-ui__drawer { + margin: 0 1ex; + padding: 0 1ex; +} + +p.pagefind-ui__message { + margin: 1ex 0; +} + +.pagefind-ui__result-excerpt { + color: var(--mid); + font-size: var(--small); +} + +ol.pagefind-ui__results { + margin: 0; + padding: 0; + list-style: none; +} + +.pagefind-ui__result { + margin-bottom: 1rem; +} + +a.pagefind-ui__result-link { + border-bottom: 0 !important; + padding: 1ex 1ex 0.5ex !important; + font-weight: 700; +} + +.pagefind-ui__result-excerpt { + padding: 0 1ex; + font-size: 0.9em; +} + +@media only screen and (max-width: 640px) { + + #has-search .on-deck { + flex-direction: row-reverse; + } + + #has-search .t { + padding: 1ex; + text-align: unset; + } + + #search, + #hasDuckDuckGo { + position: unset; + padding: 0; + width: unset; + height: unset; + } + + .pagefind-ui, + #duckduckgo { + margin: 1ex; + padding: 0; + border: unset; + } + +} \ No newline at end of file diff --git a/assets/css/component/share.css b/assets/css/component/share.css new file mode 100644 index 0000000000000000000000000000000000000000..d83cc26e33517cbca27ac8f4f573fe5478873394 --- /dev/null +++ b/assets/css/component/share.css @@ -0,0 +1,150 @@ +.form#mastodon { + display: inline-flex; + width: 100%; +} + +#mastodonInstance { + /* passive mode; display as button */ + display: none; + height: 2.654rem; +} + +#has-mastodon.active { + /* active mode display as form */ + flex: 1; +} + +#has-mastodon.active #mastodonInstance { + display: initial !important; +} + +#has-mastodon.active #mastodon { + border: 3pt solid #563acc02; + border-radius: 2rem; + background: #563acc22; +} + +#mastodonInstance ~ button:focus .mastodon, +#mastodonInstance:focus ~ button .mastodon { + background: #4f36b5; + color: #fff; +} + +#has-share { + margin:var(--vskip); + padding-bottom: 2pt; +} + +#has-share[open] { + padding-bottom: 0; +} + +#share { + float: left; + margin: 1pt 0; +} + +#has-share[open] #share { + background: unset; + padding-left: 0; + color: unset; +} + +#has-share[open] #share::after { + content: ':'; +} + +#has-share ul { + display: flex; + position: relative; + flex-wrap: wrap; + align-items: center; + justify-content: center; + text-align: center; +} + +#has-share a { + display: inline-flex; + position: relative; +} + +#has-share i { + border-radius: 2rem; + padding: 0.62rem; + font-size: var(--Large); +} + +#has-share i:hover { + --tst: 200ms ease-in; + opacity: 1; +} + +#has-share a:focus i, +#has-share i:hover { + color: #fff !important; +} + +/* Social sharing button */ +#has-share .email {color: var(--mid)} +#has-share a:focus .email, +#has-share .email:hover {background: var(--mid)} +#has-share .bluesky {color: #1185fe} +#has-share a:focus .bluesky, +#has-share .bluesky:hover {background: #0072ce} +#has-share .facebook {color: #3b5998} +#has-share a:focus .facebook, +#has-share .facebook:hover {background: #2d4373} +#has-share .hackernews {color: #FF6600} +#has-share a:focus .hackernews, +#has-share .hackernews:hover {background: #FB6200} +#has-share .linkedin {color: #0077b5} +#has-share a:focus .linkedin, +#has-share .linkedin:hover {background: #046293} +#has-share .mastodon {color: #563acc} +#has-share a:focus .mastodon, +#has-share .mastodon:hover {background: #4f36b5} +#has-share .pinterest {color: #bd081c} +#has-share a:focus .pinterest, +#has-share .pinterest:hover {background: #8c0615} +#has-share .reddit {color: #5f99cf} +#has-share a:focus .reddit, +#has-share .reddit:hover {background: #3a80c1} +#has-share .telegram {color: #54A9EB} +#has-share a:focus .telegram, +#has-share .telegram:hover {background: #4B97D1} +#has-share .tumblr {color: #35465C} +#has-share a:focus .tumblr, +#has-share .tumblr:hover {background: #222d3c} +#has-share .twitter {color: #55acee} +#has-share a:focus .twitter, +#has-share .twitter:hover {background: #2795e9} +#has-share .vk {color: #507299} +#has-share a:focus .vk, +#has-share .vk:hover {background: #43648c} +#has-share .whatsapp {color: #25D366} +#has-share a:focus .whatsapp, +#has-share .whatsapp:hover {background: #1DA851} +#has-share .xing {color: #1a7576} +#has-share a:focus .xing, +#has-share .xing:hover {background: #114C4C} + +@media only screen and (max-width: 844px) { + + #share { + float: unset; + } + + #has-share[open] #share { + padding-left: 16.18pt; + } + + #has-mastodon.active { + flex: 0 0 100%; + } + + #has-mastodon.active #mastodon { + margin-bottom: 1ex; + max-width: 27em; + } + +} \ No newline at end of file diff --git a/assets/css/component/skipper.css b/assets/css/component/skipper.css new file mode 100644 index 0000000000000000000000000000000000000000..da37fd9cb4db7b6403dbc39a310809e33066af4b --- /dev/null +++ b/assets/css/component/skipper.css @@ -0,0 +1,44 @@ +#to-content { + /* displayed to screen reader, + but visually removed to oustide canvas */ + --tsf: translateY(-100vmax); + display: flex; + position: fixed; + top: 0; + left: 0; + align-items: center; + justify-content: center; + z-index: 3; + outline: none !important; + background: var(--bg) !important; + width: 100vw; + height: var(--vhead); + } + +#to-content:focus { + /* replace top nav on focus */ + --tsf: translate(0); +} + +body > footer > nav { + margin-left: auto; +} + +#to-top { + padding: 1ex; + color: var(--fg); + overflow: hidden; +} + +#to-top::before { + --tsf: rotate(-45deg); + display: inline-flex; + transition: 0.2s; + font-family: 'base-ui'; + content: '\e902'; +} + +#to-top:hover::before, +#to-top:focus::before { + --tsf: unset; +} \ No newline at end of file diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000000000000000000000000000000000000..2046fc43b811c1303b500687d506dc3f20316a4a --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,28 @@ +:root { + /* default contrast */ + --ac-light: #36c; + --fg-light: #111; + --bg-light: #f9f9fb; + --midtone: gray; + --fg-dark: #f9f9fb; + --bg-dark: #111; + --ac-dark: #fa0; + + /* less contrast */ + --ac-light-less: var(--ac-light); + --fg-light-less: #13253d; + --bg-light-less: #e7e2e2; + --midtone-less: #7d8490; + --fg-dark-less: #e7e2e2; + --bg-dark-less: #13253d; + --ac-dark-less: var(--ac-dark); + + /* more contrast */ + --ac-light-more: var(--ac-light); + --fg-light-more: #000; + --bg-light-more: #fff; + --midtone-more: gray; + --fg-dark-more: #fff; + --bg-dark-more: #000; + --ac-dark-more: var(--ac-dark); +} \ No newline at end of file diff --git a/assets/css/layout/_default/baseof.css b/assets/css/layout/_default/baseof.css new file mode 100644 index 0000000000000000000000000000000000000000..db3129581dddd76e3f6159ef720b16c0c22225f0 --- /dev/null +++ b/assets/css/layout/_default/baseof.css @@ -0,0 +1,318 @@ +/* + +
=====[sticky]======
+
+
+
+
=====[sticky]======<
+ +*/ + +:root { + --golden-ratio: 61.803398%; + --canonic: 70.710678%; + --max-width: 1024px; + --void: calc((100vw - var(--canonic) - 1rem) / 2); + --vhead: 4.2rem; + --vfoot: 3.33rem; + --vbody: calc(100vh - var(--vhead) - var(--vfoot)); + --marginparwidth: 27vw; /* --canonic - ( --canonic * --golden-ratio) */ + --g18: #80808080; + --g18s: #80808022; + --bound: 1pt dotted var(--g18); + --border: 1pt solid var(--g18s); + --box-shadow-hover: 0 1px 0.5px var(--g18); + --box-shadow-focus: 0 0.5px 1px var(--g18); + --box-shadow-active: 0 0.5px 0.5px var(--mid); + font-size: calc(var(--fontScale) * 10pt); +} + +::-webkit-scrollbar { + /* width: 8pt; + height: 8pt; */ + scroll-behavior: smooth; +} + +::-webkit-scrollbar-track { + background: transparent; + border-radius: 9pt !important; +} + +::-webkit-scrollbar-thumb { + background: var(--g18); + opacity: 0.86; + border-radius: 9pt !important; +} + +* { + box-sizing: border-box; + scroll-margin-top: calc(var(--vhead) + 4.118rem); + scroll-behavior: smooth; + scrollbar-color: var(--g18) transparent; + scrollbar-width: thin; + text-rendering: optimizeLegibility; + kerning: auto; + font-kerning: auto; + -webkit-font-feature-settings: 'kern' 1; + -moz-font-feature-settings: 'kern' 1; + font-feature-settings: 'kern' 1; + -webkit-hyphens: auto; + -moz-hyphens: auto; + hyphens: auto; + -webkit-hyphenate-after: 3; + hyphenate-after: 3; + -webkit-hyphenate-before: 3; + hyphenate-before: 3; + -webkit-hyphenate-lines: 2; + hyphenate-lines: 2; + orphans: 2; + widows: 2; +} + +body { + margin: 0 !important; + padding: unset !important; + line-height: calc(var(--baselineStretch) * 1.414); + color: var(--fg); + font-family: var(--sf), sans-serif; + font-size: var(--normalsize); + --y6a: #af7c9d; --w8u: #628618; --s8i: #ed7495; --n8e: #6c80b3; + --m4i: #355240; --y4i: #921823; --f8a: #7972b6; --s4n: #018ace; + --d3u: #654b3c; --r6a: #534b1a; --y4a: #13355b; --k8i: #ee850f; + --y6i: #00728c; --o5a: #8d2f4a; --c3u: #5b516a; --s5o: #365b75; + --s5e: #493280; --y7i: #00b1dd; --i3i: #e9142a; --t9u: #014d1f; +} + +body { + max-width: unset !important; + padding: unset !important; +} + +body > header { + position: -webkit-sticky; + position: sticky; + top: 0; + align-items: center; + justify-content: space-between; + height: var(--vhead); +} + +body > main { + min-height: var(--vbody); +} + +.marginpar, +body > main > aside { + position: relative; + float: right; + clear: right; + padding-left: var(--indent); + width: var(--marginparwidth); +} + +body > main > #main-footer { + position: relative; + margin: var(--bigskip) 1ex 1rem; + border: var(--border); + border-radius: 1ex; + background: #000; + width: calc(100% - 2ex); + color: #fff; +} + +body > footer { + display: flex !important; + position: -webkit-sticky; + position: sticky; + bottom: 0; + align-items: center; + justify-content: space-between; + z-index: 2; + height: var(--vfoot); + font-size: var(--small); +} + +#top, +.pagewidth { + padding-right: var(--void); + padding-left: var(--void); + /* width: var(--canonic); + max-width: var(--max-width); */ +} + +.textwidth { + width: var(--golden-ratio); +} + +#main-footer .pagewidth { + padding: 0 calc(var(--void) - 1ex - 1rem); + margin: 1ex 1ex 2ex; +} + +#main-footer .column > *, +#main-footer .column__item { + /* margin: 1ex 0; */ + border: 0.1pt solid transparent; +} + +#main-footer .section-title, +#menu-footer::before { + display: block; + margin: 1ex 0 0; + font-size: var(--small); +} + +#main-footer-primary, +#main-footer-secondary > * { + break-inside: avoid-column; +} + +#main-footer p { + margin: 0; + font-size: var(--small); +} + +#menu-footer a { + display: inline-flex; + position: relative; + padding: 0.62rem; + color: #fff; + font-size: var(--large); +} + +#menu-footer a .t{ + --tsf: translate(-3em); +} + +hr { + border-top: var(--border); + border-width: 1pt 0 0 0; +} + +@media only screen and (min-width: 1440px) { + + :root { + --void: calc((100vw - var(--max-width) - 1rem) / 2) !important; + --marginparwidth: 391.13320448px !important; + /* --max-width - (100% - --golden-ratio) */ + } + +} + +@media only screen and (max-width: 960px) { + + :root { + --void: calc((100vw - var(--canonic) - var(--vfoot) - var(--vhead)) / 2); + } + +} + +@media only screen and (max-width: 640px) { + + :root { + --void: var(--vfoot) !important; + --marginparwidth: 100% !important; + --canonic: 86%; + --golden-ratio: 100%; + } + + #main-footer .pagewidth { + padding-right: calc(var(--void) / 2); + padding-left: calc(var(--void) / 2); + } + +} + +@media only screen and (max-width: 540px) { + + :root { + --void: calc(var(--vfoot) / 1.414) !important; + } + + #main-footer-primary, + #main-footer-secondary { + column-span: all; + } + +} + +@media only screen and (max-width: 480px) { + + :root { + --void: calc(var(--vfoot) / 2) !important; + } + +} + +@media (prefers-color-scheme: light) { + + body { + --bg: var(--bg-light); + --mid: var(--midtone); + --fg: var(--fg-light); + --ac: var(--ac-light); + --off: #000; + } + + @media (prefers-contrast: more), + (-ms-high-contrast: active) { + + body { + --bg: var(--bg-light-more); + --mid: var(--midtone-more); + --fg: var(--fg-light-more); + --ac: var(--ac-light-more); + } + + } + + @media (prefers-contrast: less) { + + body { + --bg: var(--bg-light-less); + --mid: var(--midtone-less); + --fg: var(--fg-light-less); + --ac: var(--ac-light-less); + } + + } + +} + +@media (prefers-color-scheme: dark) { + + body { + --bg: var(--bg-dark); + --mid: var(--midtone); + --fg: var(--fg-dark); + --ac: var(--ac-dark); + --off: #fff; + } + + @media (prefers-contrast: more), + (-ms-high-contrast: active) { + + body { + --bg: var(--bg-dark-more); + --mid: var(--midtone-more); + --fg: var(--fg-dark-more); + --ac: var(--ac-dark-more); + } + + } + + @media (prefers-contrast: less) { + + body { + --bg: var(--bg-dark-less); + --mid: var(--midtone-less); + --fg: var(--fg-dark-less); + --ac: var(--ac-dark-less); + } + + } + +} \ No newline at end of file diff --git a/assets/css/layout/_default/home.css b/assets/css/layout/_default/home.css new file mode 100644 index 0000000000000000000000000000000000000000..1145fdbf4d0b3561fe2c16879ec81a827372bda7 --- /dev/null +++ b/assets/css/layout/_default/home.css @@ -0,0 +1,141 @@ +/* this style is used inline in list.html */ + +body { + margin: auto; + max-width: 2560px; +} + +body > footer.pagewidth, +body > header.pagewidth { + padding: 0 calc(1.5rem + 1ex); +} + +body > aside.carousel { + position: sticky; + position: -webkit-sticky; + left: 0; + float: left; + /* border: var(--border); + border-radius: 1ex; */ + padding: 1rem; + width: 38vw; + height: var(--vbody); +} + +body > main#home { + height: var(--vbody); + overflow-y: auto; +} + +body > main#home > aside#list-tags { + top: 0; + right: 0; + margin: 1rem auto; + width: calc(100% - var(--golden-ratio)) +} + +#home #top { + padding: 1rem; +} + +#home #list-posts { + padding: 1rem; + width: var(--golden-ratio); +} + +div[role='feed'] { + padding: 1ex; +} + +.carousel .feed-item, +#home .feed-item, +hr.ldots { + width: unset; +} + +#main-footer > .pagewidth { + padding: 0 1ex; +} + +#duckduckgo, +#i18n-menu > .on-plank, +#more-menu > .on-plank, +.pagefind-ui { + margin-right: 1rem; +} + +#hasDuckDuckGo.pagewidth { + padding-right: 1rem; +} + +#grain { + display: none; +} + +@media only screen and (max-width: 960px) { + + body > footer, + body > header { + background: var(--bg); + } + + body > aside.carousel { + float: unset; + margin: 0 1rem; + padding: 1rem 0; + width: unset; + } + + body > main#home { + height: unset; + overflow-y: unset; + } + + body > main#home > aside#list-tags { + top: var(--vhead); + } + +} + +@media only screen and (max-width: 640px) { + + #main-footer > .pagewidth { + padding: 0 calc(var(--void) / 2); + } + + body > main#home > aside#list-tags { + padding: unset; + width: var(--canonic); + } + + aside + #list-posts .feed-item > section { + flex-direction: row-reverse; + aspect-ratio: 10/3; + } + + #home #list-posts { + margin: var(--bigskip) auto; + padding: unset; + width: var(--canonic); + } + + #list-posts .section-title { + padding-left: unset; + } + + #duckduckgo, + .pagefind-ui { + margin-right: 1ex; + } + +} + +@media only screen and (max-width: 480px) { + + aside + #list-posts .feed-item > section { + flex-direction: column; + aspect-ratio: unset; + } + +} + diff --git a/assets/css/layout/_default/list.css b/assets/css/layout/_default/list.css new file mode 100644 index 0000000000000000000000000000000000000000..15112c7f646850a3a37c3c100f424d1765f620df --- /dev/null +++ b/assets/css/layout/_default/list.css @@ -0,0 +1,145 @@ +hr.ldots { + margin-left: 0; + border: none; + width: var(--golden-ratio); +} + +hr.ldots::after { + --tsf: translateY(-2.3rem); + display: block; + width: 100%; + height: 1rem; + text-align: center; + color: var(--g18s); + font-size: 3rem; + content: '…'; +} + +#list-subsection { + padding: 0 calc(1rem - 1ex); +} + +#list-subsection .carousel__viewport, +#taxonomy .carousel__viewport, +#taxonomy #list-tags ul { + padding: 0 1rem; +} + +#list-series, +#list-categories { + display: flex; + flex-direction: row-reverse; + flex-wrap: nowrap; + align-items: flex-start; +} + +#list-series .section-title, +#list-categories .section-title { + margin: var(--smallskip); + writing-mode: tb; +} + +#list-tags { + position: sticky; + position: -webkit-sticky; + top: var(--vhead); + right: var(--void); +} + +.section-title, +#list-tags > ul { + margin: var(--medskip) 0 1ex; +} + +#term section.pagewidth, +#taxonomy section.pagewidth, +#list-posts { + min-height: calc(var(--vbody) - 7.258rem); +} + +#taxonomy #list-tags { + position: unset; + float: unset; + margin: unset; + padding: 0 var(--void); + width: unset; +} + +#taxonomy #list-series, +#taxonomy #list-categories { + display: unset; +} + +#taxonomy #list-tags .section-title, +#taxonomy #list-series .section-title, +#taxonomy #list-categories .section-title { + margin: var(--bigskip) 0 var(--smallskip); + writing-mode: unset; +} + +#has-pagination { + margin-top: 1in; +} + +.section-title#series { + margin-left: auto; + width: var(--golden-ratio); +} + +.list-year.textwidth { + display: flex; + position: relative; + align-items: baseline; + margin-left: auto; +} + +.list-year > .section-title { + padding: 8pt; + width: 5rem; + text-align: right; +} + +.list-year > div { + flex: 1; +} + +.list-month > summary { + padding-left: 1rem; + list-style: none; +} + +.list-day a { + display: block; + margin: 1ex 1rem; + padding: 1ex 0; + width: 100%; + font-size: var(--normalsize); +} + +.list-day a.has-pre::before { + position: absolute; + left: -9pt; + padding: 0.25rem 0; + width: 5rem; + text-align: right; + text-transform: uppercase; + letter-spacing: .1em; + font-size: var(--footnotesize); +} + +#feed ul.rounded.invert a { + font-size: var(--footnotesize); +} + +@media only screen and (max-width: 640px) { + + body > main > aside#list-tags { + position: unset; + position: unset; + float: unset; + margin: var(--bigskip) auto; + padding: 0; + width: var(--canonic); + } + +} \ No newline at end of file diff --git a/assets/css/layout/_default/single.css b/assets/css/layout/_default/single.css new file mode 100644 index 0000000000000000000000000000000000000000..d3b6a93437f1e9bfbc2d48ed0fcae4c2e44ee7ac --- /dev/null +++ b/assets/css/layout/_default/single.css @@ -0,0 +1,344 @@ +#main-article { + margin-top: 1in; + line-height: calc(var(--baselineStretch) * 1.618); + font-family: var(--rm), serif; +} + +/* article frontmatter */ + +#main-article > header { + display: flex; + flex-direction: column; + margin:var(--vskip); + gap: 1rem; +} + +.subtitle { + opacity: 0.86; + margin: 1ex 0 0; + font-style: italic; +} + +#main-article [role=doc-credit], +#main-article [role=doc-colophon] { + font-size: var(--small); +} + +#doc-cover > img { + margin: 2rem 0; + aspect-ratio: 10 / 8; +} + +figure img, +figure svg { + width: 100%; + height: auto; + object-fit: cover; +} + +#doc-author, +#doc-author a { + color: var(--fg); + font-style: italic; +} + +/* with avatar */ +#avatar, +.author, +.mastodon-comment > footer { + display: flex; + align-items: center; + line-height: 1.272; +} + +#doc-author .has-aria-label::after { + font: 1rem var(--sf); +} + +.mastodon-comment > .author > img, +#avatar { + margin-right: 12pt; +} + +.author img { + border-radius: 50%; + width: 3rem; + height: 3rem; +} + +.author > a::after { + font-size: 0.9em; + color: var(--mid); +} + +.author > a > span { + color: var(--fg); + font-weight: bold; +} + +.author > a > span img { + width: 1em; + height: 1em; + vertical-align: text-top; +} + +header time { + font-style: italic; + -webkit-font-feature-settings:'onum' 1; + -moz-font-feature-settings:'onum' 1; + font-feature-settings:'onum' 1; + font-variant-numeric: oldstyle-nums; +} + +#page .date-has-label > time:before { + content: attr(data-time-label)' '; +} + +#page .date-has-label > time, +#keywords li { + text-transform: lowercase; +} + +.doc-publish-date::before { + text-transform: initial; +} + +#has-TableOfContents, +#comments-error { + margin: var(--medskip) 0; +} + +#has-TableOfContents ul { + list-style: none; + font-style: italic; +} + +#main-article audio { + border-radius: 2rem; +} + +#main-article audio, +#main-article section > p { + margin: 0.618pc 0; + width: var(--golden-ratio); +} + +/* article mainmatter */ + +#content hr { + display: block; + margin: 0.618pc 0; + border: 0; + border-bottom: var(--bound); +} + +#content table { + margin: 0.618pc 0; + width: 100%; + overflow-x: auto; +} + +#content figure { + clear: both; + max-width: var(--golden-ratio); + overflow: auto; +} + +#content figure.fullwidth { + max-width: none; +} + +#content p:not(:first-of-type) { + text-indent: var(--indent); +} + +#content p img { + width: calc(100% - var(--indent)); +} + +/* article backmatter */ + +#main-article > footer { + margin:var(--vskip); + border-bottom: var(--bound) ; +} + +.footnote-ref { + padding: 0 0.5ex; + font-size: var(--footnotesize); +} + +.footnotes { + font-size: var(--footnotesize); +} + +.footnotes hr { + margin: 3rem 0 0; + border-bottom: 1px solid; + width: 16.18rem; +} + +#has-timeline > p, +.footnotes ol { + margin-top: 0; + padding: 0; +} + +.footnotes li::marker { + font-feature-settings: 'sups' 1; + font-variant-position: super; +} + +#content, +#keywords, +#contentinfo { + margin: var(--vskip); + overflow-wrap: break-word; +} + +.verbose { + font: 1rem/2rem monospace; + overflow-wrap: anywhere; +} + +#colophon{ + grid-column: 1; +} + +#colophon > div { + display: flex; + margin-top: 1ex; + gap: 1rem; +} + +#qr { + padding-top: 4pt; +} + +#contribute { + grid-column: 2; + border-radius: 1ex; + background-color: var(--g18s); + padding: 1.4rem 1.4rem 1rem; + height: fit-content; + line-height: 1.618; + font-family: var(--sf); + font-size: var(--small); +} + +#contrib-menu li { + margin: 1ex 1ex 1ex 0; +} + +#contrib-menu a { + display: inline-block; + border-radius: 1ex; + background: var(--ac); + padding: 4pt 9pt 3pt 7pt; + color: var(--bg); +} + +#contentinfo ol { + position: relative; + margin-bottom: 0; + padding-left: 2.5rem; + list-style: none; + counter-reset: li; +} + +#contentinfo ol li { + margin-bottom: 1ex; + padding-bottom: 1ex; +} + +#contentinfo ol li::before { + display: inline-block; + position: absolute; + left: 0; + border-radius: 2rem; + background: var(--g18s); + padding: 4pt 7pt; + color: var(--mid); + font: 0.7em monospace; + content: counter(li); + counter-increment: li; +} + +#contentinfo ol li.see-more::before { + content: '>'; +} + +#has-timeline ol { + margin: 1ex 0 0 1rem; + border-left: 2.5pt solid var(--g18s); + padding: 1ex 0 0 1rem; +} + +#has-timeline ol li::before { + left: -1rem; + border: 4pt solid var(--bg); + background: var(--mid); + padding: 0 3pt; + font-size: 0.6em; + content: '\a0'; +} + +#TableOfContents, +.letterine { + text-transform: lowercase; + letter-spacing: 0.1em; + font-variant: small-caps; + -webkit-font-feature-settings: 'smcp' 1; + -moz-font-feature-settings: 'smcp' 1; + font-feature-settings: 'smcp' 1; +} + +.letterine::before { + display: block; + border-bottom: 2pt solid var(--ac); + content: ''; +} + +.letterine > i { + /* example + inconsistence result across browsers + */ + position: relative; + top: -0.2rem; + float: left; + background: var(--bg); + padding-right: .1em; + line-height: 0.5; + color: var(--ac); + font-size: 6em; +} + +#has-timeline .has-aria-label-top { + margin: 5pt 0; +} + +#contentinfo { + display: grid; + grid-template-columns: 6fr 4fr; + gap: var(--medskip); +} + +#has-share, +#comments { + grid-column: 1 / 3; +} + +@media screen and (max-width: 640px) { + + #contentinfo { + display: block; + } + + #contentinfo > * { + margin-bottom: var(--bigskip) ; + } + .katex-display { + overflow-x: auto; + } + +} \ No newline at end of file diff --git a/assets/css/media/print.css b/assets/css/media/print.css new file mode 100644 index 0000000000000000000000000000000000000000..b7d2cdb258c4b5329a6223f96f49c9d1642d2058 --- /dev/null +++ b/assets/css/media/print.css @@ -0,0 +1,204 @@ +@media print { + + :root { + font-size: 10pt; + } + + @page { + margin: 10vmin; + } + + body { + background: none; + padding-left: 0; + max-width: 100vw; + } + + body > header, + body > footer, + body > footer *, + body > div, + body > aside, + body > main > header, + audio, + #has-share, + #background-body, + #contribute, + #related, + #coffee-counter, + #menu-footer + { + display: none; + } + + body > main { + height: unset; + } + + body > main > #main-footer { + border: unset; + margin:var(--vskip); + padding: unset; + } + + .pagewidth, + #main-footer .pagewidth { + padding: 0; + } + + body > main > #main-footer { + background: none; + color: var(--fg); + } + + body h1:first-of-type { + margin-top: 0; + } + + /* dont work properly on firefox + h1, + section > h1, + .section-title { + page-break-before: always; + break-before: always; + + header > h1 { + page-break-before: avoid !important; + break-before: avoid !important; + } + } */ + + h1, + h2, + h3, + h4, + h5, + h6, + .section-title { + page-break-after: avoid; + break-after: avoid; + } + + table, + img, + svg, + figure, + .sidenote, + .marginnote, + #comments article, + article#feed-item { + page-break-inside: avoid; + break-inside: avoid; + } + + pre > code { + margin-left: 0; + min-width: 62%; + max-width: 100%; + white-space: pre-wrap; + word-break: break-all; + word-wrap: break-word; + } + + article #content a::after { + --tsf: unset; + -webkit-transform: var(--tsf); + -moz-transform: var(--tsf); + -ms-transform: var(--tsf); + -o-transform: var(--tsf); + transform: var(--tsf); + font: unset; + content: '\a0('attr(href)')'; + } + + #keywords a::after { + content: unset; + } + + .marginpar { + width: var(--golden-ratio); + margin-left: calc(var(--golden-ratio) * -1); + } + + .marginpar.abs { + right: 0; + width: 38%; + } + + #contentinfo { + display: block; + } +} + +/* font-size scaling = 1/sqrt(640/device-width) +@media (max-width: 640px) { + :root { + font-size: calc(var(--fontScale)*100%); + } +} + +@media (max-width: 601px) { + :root { + font-size: calc(var(--fontScale)*96.9%); + } +} + +@media (max-width: 576px) { + :root { + font-size: calc(var(--fontScale)*94.8%); + } +} + +@media (max-width: 540px) { + :root { + font-size: calc(var(--fontScale)*91.8%); + } +} + +@media (max-width: 512px) { + :root { + font-size: calc(var(--fontScale)*89.4%); + } +} + +@media (max-width: 480px) { + :root { + font-size: calc(var(--fontScale)*86.6%); + } +} + +@media (max-width: 428px) { + :root { + font-size: calc(var(--fontScale)*81.7%); + } +} + +@media (max-width: 414px) { + :root { + font-size: calc(var(--fontScale)*80.4%); + } +} + +@media (max-width: 390px) { + :root { + font-size: calc(var(--fontScale)*78%); + } +} + +@media (max-width: 375px) { + :root { + font-size: calc(var(--fontScale)*76.5%); + } +} + +@media (max-width: 360px) { + :root { + font-size: calc(var(--fontScale)*75%); + } +} + +@media (max-width: 320px) { + :root { + font-size: calc(var(--fontScale)*70.7%); + } +} */ \ No newline at end of file diff --git a/assets/css/optimize.css b/assets/css/optimize.css new file mode 100644 index 0000000000000000000000000000000000000000..e034615c5a65f3997b266d06fa59e591b2a93d95 --- /dev/null +++ b/assets/css/optimize.css @@ -0,0 +1,191 @@ +#setContrast > input:checked:focus + label, +#OpenDyslexic:checked + label #OpenDyslexicState, +#saveButton:hover, +#saveButton:focus, +#bionReadSwitch:hover + label, +#bionReadSwitch:focus + label, +#bionReadSwitch:active + label, +#bionReadSwitch:checked + label, +#join-discussion:hover, +#join-discussion:focus, +a.cta:hover, +a.cta:focus { + background: var(--ac); +} + +#has-a11y[open] > #has-a11y-summary, +#lightSwitch:hover + label span::after, +#lightSwitch:focus + label span::after, +#a11y-menu > .has-aria-label:focus, +#a11y-menu > .has-aria-label:hover, +#menu-footer a:hover, +#menu-footer a:focus, +a.replies.active, +a.reblogs.active, +#has-author-name-menu a:hover, +#has-author-name-menu a:focus, +#related a:hover, +#related a:focus { + color: var(--ac); +} + +.feed-item > hgroup > div a, +#related a { + color: var(--fg); +} + +.readingTime, +.feed-item > section > div, +.feed-item > hgroup > div, +.feed-item:hover img, +#contrib-menu a:hover, +#contrib-menu a:focus { + opacity: 0.86; +} + +main > header > menu > li > a:hover, +main > header > menu > li > a:focus, +.feed-item:hover .par, +.feed-item:focus .par, +ul.invert a:hover, +::-webkit-scrollbar-thumb:hover { + opacity: 1; +} + +main#page + footer #setBaselineStretch, +main#page + footer #useBionRead, +input[type=checkbox] + label .off, +input[type=checkbox]:checked + label .on, +#TableOfContents + nav > ul, +#TableOfContents + nav > ul > li, +.has-desc:after { + display: block; +} + +input[type=checkbox]:checked + label .off, +input[type=checkbox] + label .on, +#setBaselineStretch, +#has-breadcrumb summary, +#has-pagination summary, +#page #back, +.feed-item > footer > ul::-webkit-scrollbar, +.feed-item > hgroup > div > span::-webkit-scrollbar, +.feed-item .date-has-label .doc-publish-date, +.carousel__viewport::-webkit-scrollbar, +#logomark--dark, +#top-nav[open] > summary, +#top-nav-screen, +#has-more-menu[open] > summary > .t, +.languangeName, +a#has-i18n > img, +.list-month > summary::marker, +.list-month > summary::-webkit-details-marker, +#series ~ .list-year .has-post::after, +#content a.footnote-ref::after, +#content a.footnote-backref::after, +details.presentation > summary::-webkit-details-marker, +details.presentation > summary::marker, +td.lntd:first-child code.hljs { + display: none; +} + +#has-a11y[open] #a11y, +#OpenDyslexic:hover + label #OpenDyslexicIndicator, +#OpenDyslexic:focus + label #OpenDyslexicIndicator, +#logo #logotype__text, +.marginpar-ctrl:checked + label::before, +details[open] > .anchor:after, +details[open] .on-plank, +.l1 details[open] > ul, +.marginpar-ctrl:checked + label + .marginpar, +#has-l10n a:hover, +#has-l10n a:focus, +#top-nav a:hover, +#top-nav a:focus, +.anchor:hover, +.anchor:focus, +#has-a11y[open] > summary .icon::before, +#has-search[open] .icon::before, +details[open] > summary > .menu-icon::before, +.loading:after, +#top-nav[open] > nav { + -webkit-animation: var(--anm); + -moz-animation: var(--anm); + -o-animation: var(--anm); + animation: var(--anm); +} + +hr.ldots::after, +#to-top::before, +input + label > #lightSwitchIndicator, +.hand, +.pagination .rfill a::before, +.carousel__viewport__slide:last-child > nav a::before, +#back::before, +.feed-item:hover, +.feed-item:focus-within, +ul.carousel__viewport > li:hover, +ul.carousel__viewport > li:focus-within, +.pagination .lfill a::after, +#list-tags > nav a::after, +.carousel__viewport__slide:first-child > nav a::after, +.parent-anchor a::after, +#i18n-menu a::after, +#content a::after, +#duckduckgo .form__button, +#to-content, +.t { + -webkit-transform: var(--tsf); + -moz-transform: var(--tsf); + -ms-transform: var(--tsf); + -o-transform: var(--tsf); + transform: var(--tsf); +} + +#OpenDyslexicIndicator, +.marginpar-ctrl + label::before, +.anchor:after, +#has-share i:hover { + -webkit-transition: var(--tst); + -moz-transition: var(--tst); + -o-transition: var(--tst); + transition: var(--tst); +} + +#has-a11y[open] #a11y, +details[open] .on-plank, +.l1 details[open] > ul, +.marginpar-ctrl:checked + label + .marginpar, +#top-nav[open] > nav { + -webkit-transform-origin: var(--tso); + -moz-transform-origin: var(--tso); + -ms-transform-origin: var(--tso); + -o-transform-origin: var(--tso); + transform-origin: var(--tso); +} + +#has-share a:focus, +.form > *:focus { + outline: none !important; +} + +hgroup, +hgroup > h1, +figure, +#setOpenDyslexic > label::before, +#main-footer-secondary, +#menu-footer { + margin: 0; +} + +ul.rounded, +.list-day { + padding: 0; +} + +ul.delimiter:first-child li:first-child:before, +.feed-item > hgroup ul.delimiter:first-child li:last-child::after, +#content a.has-img::after, +#doc-author .delimiter li:last-child::after { + content: ''; +} diff --git a/assets/css/typeface-local/Cormorant.css b/assets/css/typeface-local/Cormorant.css new file mode 100644 index 0000000000000000000000000000000000000000..3d7a0135e6d0ee88a1bcd18288e7bc9e21f1dc14 --- /dev/null +++ b/assets/css/typeface-local/Cormorant.css @@ -0,0 +1,47 @@ +@font-face { + font-family: 'Cormorant'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(/css/fonts/Cormorant-Regular.woff2) format('woff2'); + size-adjust: 110%; + ascent-override: 80%; + descent-override: 28%; +} + +@font-face { + font-family: 'Cormorant'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: url(/css/fonts/Cormorant-Italic.woff2) format('woff2'); + size-adjust: 110%; + ascent-override: 80%; + descent-override: 28%; +} + +@font-face { + font-family: 'Cormorant'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(/css/fonts/Cormorant-Bold.woff2) format('woff2'); + size-adjust: 110%; + ascent-override: 80%; + descent-override: 28%; +} + +@font-face { + font-family: 'Cormorant'; + font-style: italic; + font-weight: 700; + font-display: swap; + src: url(/css/fonts/Cormorant-BoldItalic.woff2) format('woff2'); + size-adjust: 110%; + ascent-override: 80%; + descent-override: 28%; +} + +:root { + --rm: 'Cormorant'; +} \ No newline at end of file diff --git a/assets/css/typeface-local/Crimson.css b/assets/css/typeface-local/Crimson.css new file mode 100644 index 0000000000000000000000000000000000000000..48f92d3f23929c43e29f79611fe17b1a61ae1e58 --- /dev/null +++ b/assets/css/typeface-local/Crimson.css @@ -0,0 +1,43 @@ +@font-face { + font-family: 'crimson'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Crimson Roman'), + url(/css/fonts/crimson-roman-webfont.woff2) format('woff2'); + size-adjust: 95%; +} + +@font-face { + font-family: 'crimson'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: local('Crimson Italic'), + url(/css/fonts/crimson-italic-webfont.woff2) format('woff2'); + size-adjust: 95%; +} + +@font-face { + font-family: 'crimson'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: local('Crimson Bold'), + url(/css/fonts/crimson-bold-webfont.woff2) format('woff2'); + size-adjust: 95%; +} + +@font-face { + font-family: 'crimson'; + font-style: italic; + font-weight: 700; + font-display: swap; + src: local('Crimson BoldItalic'), + url(/css/fonts/crimson-bolditalic-webfont.woff2) format('woff2'); + size-adjust: 95%; +} + +:root { + --rm: 'crimson'; +} \ No newline at end of file diff --git a/assets/css/typeface-local/EBGaramond.css b/assets/css/typeface-local/EBGaramond.css new file mode 100644 index 0000000000000000000000000000000000000000..3184416f70d1c6f78215d58bca1d525c56fa1fc9 --- /dev/null +++ b/assets/css/typeface-local/EBGaramond.css @@ -0,0 +1,47 @@ +@font-face { + font-family: 'EB Garamond'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(/css/fonts/EBGaramond12-Regular.woff2) format('woff2'); + size-adjust: 102%; + ascent-override: 87%; + descent-override: 30%; +} + +@font-face { + font-family: 'EB Garamond'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: url(/css/fonts/EBGaramond12-Italic.woff2) format('woff2'); + size-adjust: 102%; + ascent-override: 87%; + descent-override: 30%; +} + +@font-face { + font-family: 'EB Garamond'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(/css/fonts/EBGaramond12-Bold.woff) format('woff'); + size-adjust: 102%; + ascent-override: 87%; + descent-override: 30%; +} + +@font-face { + font-family: 'EB Garamond'; + font-style: italic; + font-weight: 700; + font-display: swap; + src: url(/css/fonts/EBGaramond12-BoldItalic.woff) format('woff'); + size-adjust: 102%; + ascent-override: 87%; + descent-override: 30%; +} + +:root { + --rm: 'EB Garamond'; +} \ No newline at end of file diff --git a/assets/css/typeface-local/Inconsolata.css b/assets/css/typeface-local/Inconsolata.css new file mode 100644 index 0000000000000000000000000000000000000000..cceb14920b004da92eba4700283e7a1b71e1bf45 --- /dev/null +++ b/assets/css/typeface-local/Inconsolata.css @@ -0,0 +1,25 @@ +@font-face { + font-family: 'Inconsolata'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Inconsolata'), + url(/css/fonts/Inconsolata-Regular.woff2) format('woff2'); + ascent-override: 88%; + descent-override: 30%; +} + +@font-face { + font-family: 'Inconsolata'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: local('Inconsolata Bold'), + url(/css/fonts/Inconsolata-Bold.woff2) format('woff2'); + ascent-override: 88%; + descent-override: 30%; +} + +:root { + --tt: 'Inconsolata'; +} \ No newline at end of file diff --git a/assets/css/typeface-local/Inter.css b/assets/css/typeface-local/Inter.css new file mode 100644 index 0000000000000000000000000000000000000000..8ff0a9ffcb24482d76a3720c7fc19c1f146be059 --- /dev/null +++ b/assets/css/typeface-local/Inter.css @@ -0,0 +1,51 @@ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Inter'), + url(/css/fonts/Inter-Regular.woff2) format('woff2'); + size-adjust: 84%; + ascent-override: 104%; + descent-override: 36%; +} + +@font-face { + font-family: 'Inter'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: local('Inter Italic'), + url(/css/fonts/Inter-Italic.woff2) format('woff2'); + size-adjust: 84%; + ascent-override: 104%; + descent-override: 36%; +} + +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: local('Inter Bold'), + url(/css/fonts/Inter-Bold.woff2) format('woff2'); + size-adjust: 84%; + ascent-override: 104%; + descent-override: 36%; +} + +@font-face { + font-family: 'Inter'; + font-style: italic; + font-weight: 700; + font-display: swap; + src: local('Inter Bold Italic'), + url(/css/fonts/Inter-BoldItalic.woff2) format('woff2'); + size-adjust: 84%; + ascent-override: 104%; + descent-override: 36%; +} + +:root { + --sf: 'Inter'; +} \ No newline at end of file diff --git a/assets/css/typeface-local/Montserrat.css b/assets/css/typeface-local/Montserrat.css new file mode 100644 index 0000000000000000000000000000000000000000..3ce580e39b62368a4b7cf14b7c5f41d3174520c4 --- /dev/null +++ b/assets/css/typeface-local/Montserrat.css @@ -0,0 +1,51 @@ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(/css/fonts/Montserrat-Regular.woff2) format('woff2'); + size-adjust: 85%; + ascent-override: 104%; + descent-override: 36%; + line-gap-override: 50%; +} + +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: url(/css/fonts/Montserrat-Italic.woff2) format('woff2'); + size-adjust: 85%; + ascent-override: 104%; + descent-override: 36%; + line-gap-override: 50%; +} + +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(/css/fonts/Montserrat-Bold.woff2) format('woff2'); + size-adjust: 85%; + ascent-override: 104%; + descent-override: 36%; + line-gap-override: 50%; +} + +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 700; + font-display: swap; + src: url(/css/fonts/Montserrat-BoldItalic.woff2) format('woff2'); + size-adjust: 85%; + ascent-override: 104%; + descent-override: 36%; + line-gap-override: 50%; +} + +:root { + --sf: 'Montserrat'; +} \ No newline at end of file diff --git a/assets/css/typeface-local/OpenDyslexic.css b/assets/css/typeface-local/OpenDyslexic.css new file mode 100644 index 0000000000000000000000000000000000000000..9d87f34857ba6926e81251ce184f7484c098baf9 --- /dev/null +++ b/assets/css/typeface-local/OpenDyslexic.css @@ -0,0 +1,51 @@ +@font-face { + font-family: 'OpenDyslexic'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('OpenDyslexic'), + url(/css/fonts/OpenDyslexic-Regular.woff2) format('woff2'); + size-adjust: 83%; + ascent-override: 106%; + descent-override: 36%; +} + +@font-face { + font-family: 'OpenDyslexic'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: local('OpenDyslexic Italic'), + url(/css/fonts/OpenDyslexic-Italic.woff2) format('woff2'); + size-adjust: 83%; + ascent-override: 106%; + descent-override: 36%; +} + +@font-face { + font-family: 'OpenDyslexic'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: local('OpenDyslexic Bold'), + url(/css/fonts/OpenDyslexic-Bold.woff2) format('woff2'); + size-adjust: 83%; + ascent-override: 106%; + descent-override: 36%; +} + +@font-face { + font-family: 'OpenDyslexic'; + font-style: italic; + font-weight: 700; + font-display: swap; + src: local('OpenDyslexic Bold Italic'), + url(/css/fonts/OpenDyslexic-Bold-Italic.woff2) format('woff2'); + size-adjust: 83%; + ascent-override: 106%; + descent-override: 36%; +} + +:root { + --od: 'OpenDyslexic'; +} \ No newline at end of file diff --git a/assets/css/typeface-local/Rosario.css b/assets/css/typeface-local/Rosario.css new file mode 100644 index 0000000000000000000000000000000000000000..8cd791d22eab901b0d80678a89e60162236ab12a --- /dev/null +++ b/assets/css/typeface-local/Rosario.css @@ -0,0 +1,43 @@ +@font-face { + font-family: 'Rosario'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(/css/fonts/Rosario-Regular.woff2) format('woff2'); + size-adjust: 90%; + descent-override: 33%; +} + +@font-face { + font-family: 'Rosario'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: url(/css/fonts/Rosario-Italic.woff2) format('woff2'); + size-adjust: 90%; + descent-override: 33%; +} + +@font-face { + font-family: 'Rosario'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(/css/fonts/Rosario-Bold.woff2) format('woff2'); + size-adjust: 90%; + descent-override: 33%; +} + +@font-face { + font-family: 'Rosario'; + font-style: italic; + font-weight: 700; + font-display: swap; + src: url(/css/fonts/Rosario-BoldItalic.woff2) format('woff2'); + size-adjust: 90%; + descent-override: 33%; +} + +:root { + --sf: 'Rosario'; +} \ No newline at end of file diff --git a/assets/css/typeface-local/icon.css b/assets/css/typeface-local/icon.css new file mode 100644 index 0000000000000000000000000000000000000000..25e6139a52be29d0f1bff9c33e6e800aff88e48c --- /dev/null +++ b/assets/css/typeface-local/icon.css @@ -0,0 +1,184 @@ +/* Icon Fonts */ +@font-face { + font-family: 'base-ui'; + font-weight: normal; + font-style: normal; + font-display: block; + src: url('/css/fonts/base-ui.woff2') format('woff2'); +} + +/* fallback setting for websafefonts */ + +@font-face { + font-family: 'Times New Roman'; + src: local('Times New Roman'); + size-adjust: 102%; + ascent-override: 87%; + descent-override: 30%; +} + +@font-face { + font-family: 'Arial'; + src: local('Arial'); + size-adjust: 87%; + ascent-override: 101%; + descent-override: 34%; +} + +@font-face { + font-family: 'Courier New'; + src: local('Courier New'); + size-adjust: 107%; + ascent-override: 83%; + descent-override: 28%; +} + +#mastodonInstance::before, +#has-share i, +.stat a::before, +.icon { + font-family: 'base-ui' !important; + speak: never; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-font-feature-settings: 'liga'; + -moz-font-feature-settings: 'liga=1'; + -moz-font-feature-settings: 'liga'; + -ms-font-feature-settings: 'liga' 1; + font-feature-settings: 'liga'; + -webkit-font-variant-ligatures: discretionary-ligatures; + font-variant-ligatures: discretionary-ligatures; +} + +.emoji { + font-family: 'Apple Color Emoji', 'Segoe UI Emoji', NotoColorEmoji, 'Segoe UI Symbol', 'Android Emoji', EmojiSymbols; +} + +.icon.accessibility:before {content: '\e900';} +.icon.arrow:before {content: '\e902';} +.icon.circle-checked:before {content: '\e903';} +.icon.circle-unchecked:before {content: '\e904';} +.icon.copyleft:before {content: '\e906';} +#has-share .email:before, +.icon.email:before {content: '\e907';} +a.favourites::before, +.icon.heart:before {content: '\e908';} +.icon.internationalization:before {content: '\e909';} +.icon.localization:before {content: '\e90a';} +.icon.menu:before {content: '\e90b';} +#has-share .print:before, +.icon.print:before {content: '\e90c';} +.reblogs::before, +.icon.reblog:before {content: '\e90d';} +a.replies::before, +.icon.reply:before {content: '\e90e';} +.icon.reset:before {content: '\e90f';} +.icon.rss:before {content: '\e910';} +.icon.search:before {content: '\e911';} +.icon.share:before {content: '\e912';} +.icon.xmark:before {content: '\e913';} +.icon.behance:before {content: '\e914';} +.icon.bigcartel:before {content: '\e915';} +.icon.bitbucket:before {content: '\e916';} +.icon.blogger:before {content: '\e917';} +#has-share .bluesky:before, +.icon.bluesky:before {content: '\e918';} +.icon.bukalapak:before {content: '\e919';} +.icon.buymeacoffee:before {content: '\e91a';} +.icon.clubhouse:before {content: '\e91b';} +.icon.codepen:before {content: '\e91c';} +.icon.creativefabrica:before {content: '\e91d';} +.icon.dailymotion:before {content: '\e91e';} +.icon.dev:before {content: '\e91f';} +.icon.deviantart:before {content: '\e920';} +.icon.digg:before {content: '\e921';} +.icon.discord:before {content: '\e922';} +.icon.dribbble:before {content: '\e923';} +.icon.ebay:before {content: '\e924';} +.icon.etsy:before {content: '\e925';} +#has-share .facebook:before, +.icon.facebook:before {content: '\e926';} +.icon.figma:before {content: '\e927';} +.icon.flickr:before {content: '\e928';} +.icon.flipkart:before {content: '\e929';} +.icon.github:before {content: '\e92a';} +.icon.githubsponsors:before {content: '\e92b';} +.icon.gitlab:before {content: '\e92c';} +.icon.gnusocial:before {content: '\e92d';} +.icon.goodreads:before {content: '\e92e';} +.icon.googlescholar:before {content: '\e92f';} +.icon.gumroad:before {content: '\e930';} +#has-share .hackernews:before, +.icon.hackernews:before {content: '\e931';} +.icon.hashnode:before {content: '\e932';} +.icon.icon--500px:before {content: '\e933';} +.icon.instagram:before {content: '\e934';} +.icon.jsfiddle:before {content: '\e935';} +.icon.karyakarsa:before {content: '\e936';} +.icon.keybase:before {content: '\e937';} +.icon.keycdn:before {content: '\e938';} +.icon.kickstarter:before {content: '\e939';} +.icon.kofi:before {content: '\e93a';} +.icon.lazada:before {content: '\e93b';} +.icon.liberapay:before {content: '\e93c';} +#has-share .linkedin:before, +.icon.linkedin:before {content: '\e93d';} +.icon.mastodon:before {content: '\e93e';} +.icon.medium:before {content: '\e93f';} +.icon.olx:before {content: '\e940';} +.icon.opencollective:before {content: '\e941';} +.icon.openid:before {content: '\e942';} +.icon.orcid:before {content: '\e943';} +.icon.patreon:before {content: '\e944';} +.icon.paypal:before {content: '\e945';} +.icon.peertube:before {content: '\e946';} +#has-share .pinterest:before, +.icon.pinterest:before {content: '\e947';} +.icon.pleroma:before {content: '\e948';} +.icon.publons:before {content: '\e949';} +.icon.quora:before {content: '\e94a';} +#has-share .reddit:before, +.icon.reddit:before {content: '\e94b';} +.icon.researchgate:before {content: '\e94c';} +.icon.saweria:before {content: '\e94d';} +.icon.sellfy:before {content: '\e94e';} +.icon.shopee:before {content: '\e94f';} +.icon.shopify:before {content: '\e950';} +.icon.signal:before {content: '\e951';} +.icon.snapchat:before {content: '\e952';} +.icon.soundcloud:before {content: '\e953';} +.icon.stackexchange:before {content: '\e954';} +.icon.stackoverflow:before {content: '\e955';} +.icon.stripe:before {content: '\e956';} +.icon.substack:before {content: '\e957';} +#has-share .telegram:before, +.icon.telegram:before {content: '\e958';} +.icon.threads:before {content: '\e959';} +.icon.tiktok:before {content: '\e95a';} +.icon.tokopedia:before {content: '\e95b';} +#has-share .tumblr:before, +.icon.tumblr:before {content: '\e95c';} +.icon.twitch:before {content: '\e95d';} +#has-share .twitter:before, +.icon.twitter:before {content: '\e95e';} +.icon.vimeo:before {content: '\e95f';} +.icon.vine:before {content: '\e960';} +#has-share .vk:before, +.icon.vk:before {content: '\e961';} +.icon.wattpad:before {content: '\e962';} +.icon.weibo:before {content: '\e963';} +#has-share .whatsapp:before, +.icon.whatsapp:before {content: '\e964';} +.icon.wikipedia:before {content: '\e965';} +.icon.wordpress:before {content: '\e966';} +.icon.write-dot-as:before {content: '\e967';} +.icon.x:before {content: '\e968';} +#has-share .xing:before, +.icon.xing:before {content: '\e969';} +.icon.xmpp:before {content: '\e96a';} +.icon.youtube:before {content: '\e96b';} \ No newline at end of file diff --git a/assets/css/typeface/Cormorant.css b/assets/css/typeface/Cormorant.css new file mode 100644 index 0000000000000000000000000000000000000000..c5cf9c3288fba65d9d2a260eb852e39f49362288 --- /dev/null +++ b/assets/css/typeface/Cormorant.css @@ -0,0 +1,47 @@ +@font-face { + font-family: 'Cormorant'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://raw.githubusercontent.com/CatharsisFonts/Cormorant/master/fonts/webfonts/Cormorant-Regular.woff2) format('woff2'); + size-adjust: 110%; + ascent-override: 80%; + descent-override: 28%; +} + +@font-face { + font-family: 'Cormorant'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: url(https://raw.githubusercontent.com/CatharsisFonts/Cormorant/master/fonts/webfonts/Cormorant-Italic.woff2) format('woff2'); + size-adjust: 110%; + ascent-override: 80%; + descent-override: 28%; +} + +@font-face { + font-family: 'Cormorant'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(https://raw.githubusercontent.com/CatharsisFonts/Cormorant/master/fonts/webfonts/Cormorant-Bold.woff2) format('woff2'); + size-adjust: 110%; + ascent-override: 80%; + descent-override: 28%; +} + +@font-face { + font-family: 'Cormorant'; + font-style: italic; + font-weight: 700; + font-display: swap; + src: url(https://raw.githubusercontent.com/CatharsisFonts/Cormorant/master/fonts/webfonts/Cormorant-BoldItalic.woff2) format('woff2'); + size-adjust: 110%; + ascent-override: 80%; + descent-override: 28%; +} + +:root { + --rm: 'Cormorant'; +} \ No newline at end of file diff --git a/assets/css/typeface/Crimson.css b/assets/css/typeface/Crimson.css new file mode 100644 index 0000000000000000000000000000000000000000..e199a45b02452c63ff9dbbfddec7b20e33f9b319 --- /dev/null +++ b/assets/css/typeface/Crimson.css @@ -0,0 +1,43 @@ +@font-face { + font-family: 'crimson'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Crimson Roman'), + url(https://raw.githubusercontent.com/skosch/Crimson/master/Web%20Fonts/crimson-roman-webfont.woff2) format('woff2'); + size-adjust: 95%; +} + +@font-face { + font-family: 'crimson'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: local('Crimson Italic'), + url(https://raw.githubusercontent.com/skosch/Crimson/master/Web%20Fonts/crimson-italic-webfont.woff2) format('woff2'); + size-adjust: 95%; +} + +@font-face { + font-family: 'crimson'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: local('Crimson Bold'), + url(https://raw.githubusercontent.com/skosch/Crimson/master/Web%20Fonts/crimson-bold-webfont.woff2) format('woff2'); + size-adjust: 95%; +} + +@font-face { + font-family: 'crimson'; + font-style: italic; + font-weight: 700; + font-display: swap; + src: local('Crimson BoldItalic'), + url(https://raw.githubusercontent.com/skosch/Crimson/master/Web%20Fonts/crimson-bolditalic-webfont.woff2) format('woff2'); + size-adjust: 95%; +} + +:root { + --rm: 'crimson'; +} \ No newline at end of file diff --git a/assets/css/typeface/EBGaramond.css b/assets/css/typeface/EBGaramond.css new file mode 100644 index 0000000000000000000000000000000000000000..d0090225fd86bb4fe9177631d45687692b98cd23 --- /dev/null +++ b/assets/css/typeface/EBGaramond.css @@ -0,0 +1,47 @@ +@font-face { + font-family: 'EB Garamond'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://raw.githubusercontent.com/imedadel/typeface-eb-garamond-latest/master/files/EBGaramond12-Regular.woff2) format('woff2'); + size-adjust: 102%; + ascent-override: 87%; + descent-override: 30%; +} + +@font-face { + font-family: 'EB Garamond'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: url(https://raw.githubusercontent.com/imedadel/typeface-eb-garamond-latest/master/files/EBGaramond12-Italic.woff2) format('woff2'); + size-adjust: 102%; + ascent-override: 87%; + descent-override: 30%; +} + +@font-face { + font-family: 'EB Garamond'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(https://raw.githubusercontent.com/googlefonts/ebgaramond-specimen/main/docs/fonts/EBGaramond12-Bold.woff) format('woff'); + size-adjust: 102%; + ascent-override: 87%; + descent-override: 30%; +} + +@font-face { + font-family: 'EB Garamond'; + font-style: italic; + font-weight: 700; + font-display: swap; + src: url(https://raw.githubusercontent.com/googlefonts/ebgaramond-specimen/main/docs/fonts/EBGaramond12-BoldItalic.woff) format('woff'); + size-adjust: 102%; + ascent-override: 87%; + descent-override: 30%; +} + +:root { + --rm: 'EB Garamond'; +} \ No newline at end of file diff --git a/assets/css/typeface/Inconsolata.css b/assets/css/typeface/Inconsolata.css new file mode 100644 index 0000000000000000000000000000000000000000..4fcd61e6af0ebe518018a9cb246a45bc06416f03 --- /dev/null +++ b/assets/css/typeface/Inconsolata.css @@ -0,0 +1,25 @@ +@font-face { + font-family: 'Inconsolata'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Inconsolata'), + url(https://raw.githubusercontent.com/googlefonts/Inconsolata/main/fonts/webfonts/Inconsolata-Regular.woff2) format('woff2'); + ascent-override: 88%; + descent-override: 30%; +} + +@font-face { + font-family: 'Inconsolata'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: local('Inconsolata Bold'), + url(https://raw.githubusercontent.com/googlefonts/Inconsolata/main/fonts/webfonts/Inconsolata-Bold.woff2) format('woff2'); + ascent-override: 88%; + descent-override: 30%; +} + +:root { + --tt: 'Inconsolata'; +} \ No newline at end of file diff --git a/assets/css/typeface/Inter.css b/assets/css/typeface/Inter.css new file mode 100644 index 0000000000000000000000000000000000000000..04b84d84b729c4b372ad7ff0a31d484fde0c22ff --- /dev/null +++ b/assets/css/typeface/Inter.css @@ -0,0 +1,51 @@ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Inter'), + url(https://raw.githubusercontent.com/rsms/inter/master/docs/font-files/Inter-Regular.woff2) format('woff2'); + size-adjust: 84%; + ascent-override: 104%; + descent-override: 36%; +} + +@font-face { + font-family: 'Inter'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: local('Inter Italic'), + url(https://raw.githubusercontent.com/rsms/inter/master/docs/font-files/Inter-Italic.woff2) format('woff2'); + size-adjust: 84%; + ascent-override: 104%; + descent-override: 36%; +} + +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: local('Inter Bold'), + url(https://raw.githubusercontent.com/rsms/inter/master/docs/font-files/Inter-Bold.woff2) format('woff2'); + size-adjust: 84%; + ascent-override: 104%; + descent-override: 36%; +} + +@font-face { + font-family: 'Inter'; + font-style: italic; + font-weight: 700; + font-display: swap; + src: local('Inter Bold Italic'), + url(https://raw.githubusercontent.com/rsms/inter/master/docs/font-files/Inter-BoldItalic.woff2) format('woff2'); + size-adjust: 84%; + ascent-override: 104%; + descent-override: 36%; +} + +:root { + --sf: 'Inter'; +} \ No newline at end of file diff --git a/assets/css/typeface/Montserrat.css b/assets/css/typeface/Montserrat.css new file mode 100644 index 0000000000000000000000000000000000000000..33f0a7686f6e49862efe40c39677fcd064816e18 --- /dev/null +++ b/assets/css/typeface/Montserrat.css @@ -0,0 +1,51 @@ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://raw.githubusercontent.com/JulietaUla/Montserrat/master/fonts/webfonts/Montserrat-Regular.woff2) format('woff2'); + size-adjust: 85%; + ascent-override: 104%; + descent-override: 36%; + line-gap-override: 50%; +} + +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: url(https://raw.githubusercontent.com/JulietaUla/Montserrat/master/fonts/webfonts/Montserrat-Italic.woff2) format('woff2'); + size-adjust: 85%; + ascent-override: 104%; + descent-override: 36%; + line-gap-override: 50%; +} + +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(https://raw.githubusercontent.com/JulietaUla/Montserrat/master/fonts/webfonts/Montserrat-Bold.woff2) format('woff2'); + size-adjust: 85%; + ascent-override: 104%; + descent-override: 36%; + line-gap-override: 50%; +} + +@font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 700; + font-display: swap; + src: url(https://raw.githubusercontent.com/JulietaUla/Montserrat/master/fonts/webfonts/Montserrat-BoldItalic.woff2) format('woff2'); + size-adjust: 85%; + ascent-override: 104%; + descent-override: 36%; + line-gap-override: 50%; +} + +:root { + --sf: 'Montserrat'; +} \ No newline at end of file diff --git a/assets/css/typeface/OpenDyslexic.css b/assets/css/typeface/OpenDyslexic.css new file mode 100644 index 0000000000000000000000000000000000000000..7715f69e842a794a50deb38e8ab482679579e7aa --- /dev/null +++ b/assets/css/typeface/OpenDyslexic.css @@ -0,0 +1,51 @@ +@font-face { + font-family: 'OpenDyslexic'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('OpenDyslexic'), + url(https://raw.githubusercontent.com/antijingoist/OpenDyslexic/master/compiled/OpenDyslexic-Regular.woff2) format('woff2'); + size-adjust: 83%; + ascent-override: 106%; + descent-override: 36%; +} + +@font-face { + font-family: 'OpenDyslexic'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: local('OpenDyslexic Italic'), + url(https://raw.githubusercontent.com/antijingoist/OpenDyslexic/master/compiled/OpenDyslexic-Italic.woff2) format('woff2'); + size-adjust: 83%; + ascent-override: 106%; + descent-override: 36%; +} + +@font-face { + font-family: 'OpenDyslexic'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: local('OpenDyslexic Bold'), + url(https://raw.githubusercontent.com/antijingoist/OpenDyslexic/master/compiled/OpenDyslexic-Bold.woff2) format('woff2'); + size-adjust: 83%; + ascent-override: 106%; + descent-override: 36%; +} + +@font-face { + font-family: 'OpenDyslexic'; + font-style: italic; + font-weight: 700; + font-display: swap; + src: local('OpenDyslexic Bold Italic'), + url(https://raw.githubusercontent.com/antijingoist/OpenDyslexic/master/compiled/OpenDyslexic-Bold-Italic.woff2) format('woff2'); + size-adjust: 83%; + ascent-override: 106%; + descent-override: 36%; +} + +:root { + --od: 'OpenDyslexic'; +} \ No newline at end of file diff --git a/assets/css/typeface/Rosario.css b/assets/css/typeface/Rosario.css new file mode 100644 index 0000000000000000000000000000000000000000..748249d08ef01a6e0736a98b7e73e88d1e695b37 --- /dev/null +++ b/assets/css/typeface/Rosario.css @@ -0,0 +1,43 @@ +@font-face { + font-family: 'Rosario'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://raw.githubusercontent.com/Omnibus-Type/Rosario/master/fonts/webfonts/Rosario-Regular.woff2) format('woff2'); + size-adjust: 90%; + descent-override: 33%; +} + +@font-face { + font-family: 'Rosario'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: url(https://raw.githubusercontent.com/Omnibus-Type/Rosario/master/fonts/webfonts/Rosario-Italic.woff2) format('woff2'); + size-adjust: 90%; + descent-override: 33%; +} + +@font-face { + font-family: 'Rosario'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(https://raw.githubusercontent.com/Omnibus-Type/Rosario/master/fonts/webfonts/Rosario-Bold.woff2) format('woff2'); + size-adjust: 90%; + descent-override: 33%; +} + +@font-face { + font-family: 'Rosario'; + font-style: italic; + font-weight: 700; + font-display: swap; + src: url(https://raw.githubusercontent.com/Omnibus-Type/Rosario/master/fonts/webfonts/Rosario-BoldItalic.woff2) format('woff2'); + size-adjust: 90%; + descent-override: 33%; +} + +:root { + --sf: 'Rosario'; +} \ No newline at end of file diff --git a/assets/css/typeface/icon.css b/assets/css/typeface/icon.css new file mode 100644 index 0000000000000000000000000000000000000000..a500b2c8a805c87e5ba3d6c662264d306792e07a --- /dev/null +++ b/assets/css/typeface/icon.css @@ -0,0 +1,184 @@ +/* Icon Fonts */ +@font-face { + font-family: 'base-ui'; + font-weight: normal; + font-style: normal; + font-display: block; + src: url(https://raw.githubusercontent.com/foxihd/hugo-brewm/main/static/css/fonts/base-ui.woff2) format('woff2'); +} + +/* fallback setting for websafefonts */ + +@font-face { + font-family: 'Times New Roman'; + src: local('Times New Roman'); + size-adjust: 102%; + ascent-override: 87%; + descent-override: 30%; +} + +@font-face { + font-family: 'Arial'; + src: local('Arial'); + size-adjust: 87%; + ascent-override: 101%; + descent-override: 34%; +} + +@font-face { + font-family: 'Courier New'; + src: local('Courier New'); + size-adjust: 107%; + ascent-override: 83%; + descent-override: 28%; +} + +#mastodonInstance::before, +#has-share i, +.stat a::before, +.icon { + font-family: 'base-ui' !important; + speak: never; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-font-feature-settings: 'liga'; + -moz-font-feature-settings: 'liga=1'; + -moz-font-feature-settings: 'liga'; + -ms-font-feature-settings: 'liga' 1; + font-feature-settings: 'liga'; + -webkit-font-variant-ligatures: discretionary-ligatures; + font-variant-ligatures: discretionary-ligatures; +} + +.emoji { + font-family: 'Apple Color Emoji', 'Segoe UI Emoji', NotoColorEmoji, 'Segoe UI Symbol', 'Android Emoji', EmojiSymbols; +} + +.icon.accessibility:before {content: '\e900';} +.icon.arrow:before {content: '\e902';} +.icon.circle-checked:before {content: '\e903';} +.icon.circle-unchecked:before {content: '\e904';} +.icon.copyleft:before {content: '\e906';} +#has-share .email:before, +.icon.email:before {content: '\e907';} +a.favourites::before, +.icon.heart:before {content: '\e908';} +.icon.internationalization:before {content: '\e909';} +.icon.localization:before {content: '\e90a';} +.icon.menu:before {content: '\e90b';} +#has-share .print:before, +.icon.print:before {content: '\e90c';} +.reblogs::before, +.icon.reblog:before {content: '\e90d';} +a.replies::before, +.icon.reply:before {content: '\e90e';} +.icon.reset:before {content: '\e90f';} +.icon.rss:before {content: '\e910';} +.icon.search:before {content: '\e911';} +.icon.share:before {content: '\e912';} +.icon.xmark:before {content: '\e913';} +.icon.behance:before {content: '\e914';} +.icon.bigcartel:before {content: '\e915';} +.icon.bitbucket:before {content: '\e916';} +.icon.blogger:before {content: '\e917';} +#has-share .bluesky:before, +.icon.bluesky:before {content: '\e918';} +.icon.bukalapak:before {content: '\e919';} +.icon.buymeacoffee:before {content: '\e91a';} +.icon.clubhouse:before {content: '\e91b';} +.icon.codepen:before {content: '\e91c';} +.icon.creativefabrica:before {content: '\e91d';} +.icon.dailymotion:before {content: '\e91e';} +.icon.dev:before {content: '\e91f';} +.icon.deviantart:before {content: '\e920';} +.icon.digg:before {content: '\e921';} +.icon.discord:before {content: '\e922';} +.icon.dribbble:before {content: '\e923';} +.icon.ebay:before {content: '\e924';} +.icon.etsy:before {content: '\e925';} +#has-share .facebook:before, +.icon.facebook:before {content: '\e926';} +.icon.figma:before {content: '\e927';} +.icon.flickr:before {content: '\e928';} +.icon.flipkart:before {content: '\e929';} +.icon.github:before {content: '\e92a';} +.icon.githubsponsors:before {content: '\e92b';} +.icon.gitlab:before {content: '\e92c';} +.icon.gnusocial:before {content: '\e92d';} +.icon.goodreads:before {content: '\e92e';} +.icon.googlescholar:before {content: '\e92f';} +.icon.gumroad:before {content: '\e930';} +#has-share .hackernews:before, +.icon.hackernews:before {content: '\e931';} +.icon.hashnode:before {content: '\e932';} +.icon.icon--500px:before {content: '\e933';} +.icon.instagram:before {content: '\e934';} +.icon.jsfiddle:before {content: '\e935';} +.icon.karyakarsa:before {content: '\e936';} +.icon.keybase:before {content: '\e937';} +.icon.keycdn:before {content: '\e938';} +.icon.kickstarter:before {content: '\e939';} +.icon.kofi:before {content: '\e93a';} +.icon.lazada:before {content: '\e93b';} +.icon.liberapay:before {content: '\e93c';} +#has-share .linkedin:before, +.icon.linkedin:before {content: '\e93d';} +.icon.mastodon:before {content: '\e93e';} +.icon.medium:before {content: '\e93f';} +.icon.olx:before {content: '\e940';} +.icon.opencollective:before {content: '\e941';} +.icon.openid:before {content: '\e942';} +.icon.orcid:before {content: '\e943';} +.icon.patreon:before {content: '\e944';} +.icon.paypal:before {content: '\e945';} +.icon.peertube:before {content: '\e946';} +#has-share .pinterest:before, +.icon.pinterest:before {content: '\e947';} +.icon.pleroma:before {content: '\e948';} +.icon.publons:before {content: '\e949';} +.icon.quora:before {content: '\e94a';} +#has-share .reddit:before, +.icon.reddit:before {content: '\e94b';} +.icon.researchgate:before {content: '\e94c';} +.icon.saweria:before {content: '\e94d';} +.icon.sellfy:before {content: '\e94e';} +.icon.shopee:before {content: '\e94f';} +.icon.shopify:before {content: '\e950';} +.icon.signal:before {content: '\e951';} +.icon.snapchat:before {content: '\e952';} +.icon.soundcloud:before {content: '\e953';} +.icon.stackexchange:before {content: '\e954';} +.icon.stackoverflow:before {content: '\e955';} +.icon.stripe:before {content: '\e956';} +.icon.substack:before {content: '\e957';} +#has-share .telegram:before, +.icon.telegram:before {content: '\e958';} +.icon.threads:before {content: '\e959';} +.icon.tiktok:before {content: '\e95a';} +.icon.tokopedia:before {content: '\e95b';} +#has-share .tumblr:before, +.icon.tumblr:before {content: '\e95c';} +.icon.twitch:before {content: '\e95d';} +#has-share .twitter:before, +.icon.twitter:before {content: '\e95e';} +.icon.vimeo:before {content: '\e95f';} +.icon.vine:before {content: '\e960';} +#has-share .vk:before, +.icon.vk:before {content: '\e961';} +.icon.wattpad:before {content: '\e962';} +.icon.weibo:before {content: '\e963';} +#has-share .whatsapp:before, +.icon.whatsapp:before {content: '\e964';} +.icon.wikipedia:before {content: '\e965';} +.icon.wordpress:before {content: '\e966';} +.icon.write-dot-as:before {content: '\e967';} +.icon.x:before {content: '\e968';} +#has-share .xing:before, +.icon.xing:before {content: '\e969';} +.icon.xmpp:before {content: '\e96a';} +.icon.youtube:before {content: '\e96b';} \ No newline at end of file diff --git a/assets/css/typeface/websafe.css b/assets/css/typeface/websafe.css new file mode 100644 index 0000000000000000000000000000000000000000..d7538f3a074ae897bdeca5590016a1e196f691b2 --- /dev/null +++ b/assets/css/typeface/websafe.css @@ -0,0 +1,13 @@ +:root { + --rm: 'Times New Roman'; + --rmosf: 'Palatino'; + --sf: Arial; + --tt: 'Courier New'; +} + +/* :root { + --rm: Garamond, Palatino, 'Times New Roman'; + --rmosf: 'Palatino'; + --sf: Helvetica, Verdana, Arial; + --tt: Courier, Consolas, 'Courier New'; +} */ \ No newline at end of file diff --git a/assets/css/typesetting/_template.css b/assets/css/typesetting/_template.css new file mode 100644 index 0000000000000000000000000000000000000000..5b3e730bb10967f5e976f76b69cc142b4db6cee6 --- /dev/null +++ b/assets/css/typesetting/_template.css @@ -0,0 +1,306 @@ +/* font-style */ + .normalfont { + font-style: normal; + font-weight: normal; + } + + .md + .textmd, + .mdseries { + font-weight: normal; + } + + .bf, + .textbf, + .bfseries { + font-weight: bold; + } + + .up, + .textup, + .upshape { + font-style: normal; + } + + .it, + .textit, + .itshape { + font-style: italic; + } + + .sl, + .textsl, + .slshape { + --tsf: skew(-7deg, 0deg); + -webkit-transform: var(--tsf); + -moz-transform: var(--tsf); + -ms-transform: var(--tsf); + -o-transform: var(--tsf); + transform: var(--tsf); + font-style: oblique; + } + + .sw, + .textsw, + .swshape { + font-variant-alternates: swash(swsh); + font-feature-settings: 'swsh' 1; + -moz-font-feature-settings: 'swsh' 1; + -webkit-font-feature-settings: 'swsh' 1; + } + + .sc, + .ssc, + .textsc, + .scshape { + font-variant: small-caps; + font-feature-settings: 'smcp' 1; + -moz-font-feature-settings: 'smcp' 1; + -webkit-font-feature-settings: 'smcp' 1; + } + + .allsmallcaps, + .ssc { + font-variant-caps: all-small-caps; + font-feature-settings: 'c2sc' 1; + -moz-font-feature-settings: 'c2sc' 1; + -webkit-font-feature-settings: 'c2sc' 1; + letter-spacing: 0.16em; + word-spacing: 16%; + } + +/* font-family */ + .rm, + .textrm { + font-family: var(--rm), serif; + } + + .tt, + .texttt { + font-family: var(--tt), monospace; + } + + .sf, + .textsf { + font-family: var(--sf), sans-serif; + } + + .od, + .textod { + font-family: var(--od), sans-serif; + } + +/* numeral */ + .pnum, + .pl, + .po, + .textpl, + .textpo { + font-variant-numeric: proportional-nums; + font-feature-settings: 'pnum' 1; + -moz-font-feature-settings: 'pnum' 1; + -webkit-font-feature-settings: 'pnum' 1; + } + + .onum, + .po, + .to, + .textpo, + .textto { + font-variant-numeric: oldstyle-nums; + font-feature-settings:'onum' 1; + -moz-font-feature-settings:'onum' 1; + -webkit-font-feature-settings:'onum' 1; + } + + .lnum, + .tl, + .pl + .texttl, + .textpl { + font-variant-numeric: lining-nums; + font-feature-settings: 'lnum' 1; + -moz-font-feature-settings: 'lnum' 1; + -webkit-font-feature-settings: 'lnum' 1; + } + + .tnum, + .to, + .po, + .textto, + .textpo { + font-variant-numeric: tabular-nums; + font-feature-settings: 'tnum' 1, 'kern' 0; + -moz-font-feature-settings: 'tnum' 1, 'kern' 0; + -webkit-font-feature-settings: 'tnum' 1, 'kern' 0; + } + + .sz0 { + font-variant-numeric: slashed-zero; + font-feature-settings: 'zero' 1; + -moz-font-feature-settings: 'zero' 1; + -webkit-font-feature-settings: 'zero' 1; + } + + .sub, + .textsub { + font-variant-position: sub; + font-feature-settings: 'subs' 1; + } + + .sup, + .textsup { + font-variant-position: super; + font-feature-settings: 'sups' 1; + } + + .ldots { + text-overflow: ellipsis; + overflow-x: clip; + white-space: nowrap; + } + +/* presentation */ + .smallskip { + margin: var(--smallskip) 0; + } + + .medskip { + margin: var(--medskip) 0; + } + + .bigskip { + margin:var(--vskip); + } + + .hfill, + .lfill { + margin-left: auto; + } + + .hfill, + .rfill { + margin-right: auto; + } + + .vfill, + .tfill { + margin-top: auto; + } + + .vfill, + .bfill { + margin-bottom: auto; + } + + .center { + margin: auto; + align-self: center; + } + + .center, + .centering { + text-align: center; + } + + .justifying { + text-align: justify; + } + + .flushleft, + .raggedright { + text-align: left; + } + + .flushright, + .raggedleft { + text-align: right; + } + + .nomargin { + margin: 0; + } + + .nopadding { + padding: 0; + } + + .noindent { + text-indent: 0 !important; + } + + .parindent { + text-indent: var(--indent); + } + +/* break */ + .nobreak { + break-inside: avoid; + } + + .nopagebreak { + break-after: avoid-page; + page-break-after: avoid; + } + + .break { + break-after: always; + } + + .columnbreak { + break-after: column; + } + + .pagebreak { + break-after: page; + page-break-after: always; + } + + .newpage { + break-before: always; + page-break-before: always; + } + + .clearpage { + break-after: verso; + } + + .creardoublepage { + break-after: recto; + } + +/* quotation */ + q { + font-style: italic; + } + + /* enquote */ + q { + quotes: '“' '”' '‘' '’'; + } + + q.alt { + quotes: '”' '”' '’' '’'; + } + + /* guillemet */ + q.gm, + q.guillemet { + quotes: '«' '»' '‹' '›'; + } + + q.gm.alt, + q.guillemet.alt { + quotes: '»' '«' '›' '‹'; + } + + /* goosefeet */ + q.gf, + q.goosefeet { + quotes: '„' '“' '‚' '‘'; + } + + q.gf.alt, + q.goosefeet.alt { + quotes: '„' '”' '‚' '’'; + } diff --git a/assets/css/typesetting/default.css b/assets/css/typesetting/default.css new file mode 100644 index 0000000000000000000000000000000000000000..0fdad7122725c0e2200b369f23de9e1baf8286de --- /dev/null +++ b/assets/css/typesetting/default.css @@ -0,0 +1,293 @@ +:root { + --tiny: 0.618rem; + --scriptsize: 0.786rem; + --footnotesize: 1rem; + --small: 1.144rem; + --normalsize: 1.272rem; + --large: 1.414rem; + --Large: 1.618rem; + --LARGE: 2.058rem; + --huge: 2.618rem; + --Huge: 3.33rem; + --fontScale: 1; + --baselineStretch: 1; + --indent: 1.618pc; + --smallskip: 1rem; + --medskip: 1.618rem; + --bigskip: 3.14rem; + --vskip:var(--bigskip) 0; +} + +h1 + p, +h2 + p, +h3 + p, +h4 + p, +h5 + p, +h6 + p, +p * { + margin-top: 0; + padding-top: 0; + text-indent: 0 !important; +} + +blockquote { + margin: 0; + background: #ffe8aa22; + padding: 1pt var(--indent); + width: var(--golden-ratio); + font-style: italic; +} + +blockquote blockquote { + margin-bottom: var(--indent); + border-left: var(--bound); + background: none; + width: unset; +} + +blockquote cite { + font-style: italic; +} + +kbd { + /* border: 1pt solid var(--mid); */ + -webkit-transition: 0.2s; + -moz-transition: 0.2s; + -o-transition: 0.2s; + transition: 0.2s; + margin: 0 2pt; + border-radius: 0.7ex; + padding: 0.3ex 1ex; + font-size: var(--footnotesize); + box-shadow: var(--box-shadow-focus); +} + +kbd:hover { + box-shadow: var(--box-shadow-hover); +} + +kbd:has(kbd) { + border-radius: 1ex; + padding: 1ex 0.7ex; +} + +.key { + display: none; + text-transform: uppercase; +} + +.keydown .key { + display: initial !important; + font-family: var(--sf), sans-serif; + font-weight: unset; +} + +code { + border-radius: 0.25em; + background: var(--g18s); +} + +pre > code { + display: block; + border-radius: 1ex; + background: unset; + width: fit-content; + max-width: 100%; + overflow-x: auto; +} + +code, +pre > code { + line-height: 1.618; + letter-spacing: 0.05em; + font-family: var(--tt), monospace; + font-kerning: none; + font-size: 0.8em; + -webkit-font-feature-settings: 'kern' 0; + -moz-font-feature-settings: 'kern' 0; + font-feature-settings: 'kern' 0; +} + +pre > code table { + border: unset; +} + +dl, +ol, +ul { + padding-left: var(--indent); +} + +.ldots { + text-overflow: ellipsis; + overflow-x: clip; + white-space: nowrap; +} + +.lfill { + margin-left: auto; +} + +.rfill { + margin-right: auto; +} + +.sw, +.textsw, +.swshape { + font-variant-alternates: swash(swsh); + -webkit-font-feature-settings: 'swsh' 1; + -moz-font-feature-settings: 'swsh' 1; + font-feature-settings: 'swsh' 1; +} + +.up, +.textup, +.upshape { + font-style: normal; +} + +table, +thead { + border-collapse: collapse; + border: solid var(--off); + border-width: 1pt 0; +} + +thead { + background: var(--g18s); +} + +th { + padding: 2pt 0; +} + +td { + padding: 1pt 0; +} + +th + th { + border-left: 1pt dotted var(--g18s); +} + +tbody tr:nth-child(2n) { + background-color: #80808008; +} + +.carousel__viewport h2, +.carousel__viewport h3, +.hero__content h1, +.hero__content h2, +.hero__content h3, +#share > span, +#menu-footer::before, +.section-title { + vertical-align: middle; + text-transform: uppercase; + letter-spacing: 2pt; + font-weight: 700; + font-variant: small-caps; + font-style: normal; + /* font-variant-caps: all-small-caps; */ +} + +details.presentation > summary { + cursor: pointer; + list-style: none; +} + +.has-aria-label-top:before, +.has-aria-label:after { + display: block; + margin: auto; + content: attr(aria-label); +} + +.has-pre::before, +.has-post:after, +.has-desc:after { + display: inline-block; + color: var(--mid); + font-size: 0.9em; + font-weight: normal; + content: attr(aria-description); +} + +.t { + --tsf: translate(-2em); + display: inline-flex; + position: absolute; + top: 125%; + justify-content: center; + visibility: hidden; + z-index: 1; + border-radius: 1em; + background: var(--fg); + padding: 0.25em; + width: 7.5em; + text-align: center; + color: var(--bg); + font: var(--scriptsize) var(--sf), sans-serif; +} + +.t.t2 { + --tsf: unset; + display: block; + top: var(--vhead); +} + +.t::after { + position: absolute; + bottom: 100%; + left: 47.5%; + border-style: solid; + border-color: transparent transparent var(--fg) transparent; + content: ''; +} + +button:focus > .t, +.icon:hover + .t, +a:hover .t, +a:focus .t, +summary:hover > .t, +summary:focus > .t { + visibility: visible; +} + +.loading:after { + --anm: ellipsis steps(4,end) 2s infinite; + display: inline-block; + overflow: hidden; + vertical-align: bottom; + content: ''; +} + +.letterine > i { + font-style: normal; +} + +.hide { + display: none !important; +} + +ul.inline::before, +ul.delimiter::after, +ul.delimiter li:first-child:before, +ul.delimiter li:nth-last-child(2)::after { + content: '\a0'; +} + +#page .date-has-label > .doc-publish-date::after, +ul.delimiter li:after { + content: ',\a0'; +} + +ul.delimiter li:last-child:before { + content: '&\a0'; +} + +#page .doc-lastmod-date::after, +#keywords .inline li::after, +ul.delimiter li:last-child:after { + content: '.'; +} \ No newline at end of file diff --git a/assets/css/typesetting/sectioning.css b/assets/css/typesetting/sectioning.css new file mode 100644 index 0000000000000000000000000000000000000000..d77bb8c6ac90fb4b233181bbcdccb6ad2d072b9a --- /dev/null +++ b/assets/css/typesetting/sectioning.css @@ -0,0 +1,118 @@ +h1, +h2, +h3, +h4, +h5, +h6 { + line-height: calc(var(--baselineStretch) * 1); + font-weight: 400; + clear: both; +} + +h2, +h3, +h4 { + margin: var(--bigskip) 0 var(--smallskip); + font-style: italic; +} + +h1 { + margin: var(--bigskip) 0 var(--smallskip); + text-transform: capitalize; + font-size: var(--huge); + counter-reset: section; +} + +article > section { + counter-reset: section; +} + +h2 { + font-size: var(--LARGE); + counter-reset: subsection; +} + +h3 { + font-size: var(--Large); + counter-reset: subsubsection; +} + +h4 { + font-size: var(--large); + counter-reset: paragraph; +} + +h5 { + counter-reset: subparagraph; + margin: var(--smallskip) 0 0; +} + +h5, +h6 { + word-spacing: 16%; + letter-spacing: 0.16em; + font: var(--normalsize) var(--sf), sans-serif; + -webkit-font-feature-settings: 'c2sc' 1; + -moz-font-feature-settings: 'c2sc' 1; + font-feature-settings: 'c2sc' 1; + font-variant-caps: all-small-caps; +} + +h6 { + float: left; + margin: 0.2em 0.2em 0 0; +} + +/* section labeling */ + +/* h1::before { + counter-increment: chapter; +} + +h2::before { + counter-increment: section; +} + +h3::before { + counter-increment: subsection; +} + +h4::before { + counter-increment: subsubsection; +} + +h5::before { + counter-increment: paragraph; +} + +h6::before { + counter-increment: subparagraph; +} + +#content.secnum { + counter-reset: chapter; +} + +#content.secnum h1::before { + content: counter(chapter); +} + +#content.secnum h2::before { + content: counter(section) '. '; +} + +#content.secnum h3::before { + content: counter(subsection)'. '; +} + +#content.secnum h4::before { + content: counter(subsubsection)'. '; +} + +#content.secnum h5::before { + content: counter(paragraph); +} + +#content.secnum h6::before { + content: counter(subparagraph); +} */ \ No newline at end of file diff --git a/assets/css/typesetting/verbatim.css b/assets/css/typesetting/verbatim.css new file mode 100644 index 0000000000000000000000000000000000000000..1296708ae8eff3130c1f5cc46e95018d2801a19f --- /dev/null +++ b/assets/css/typesetting/verbatim.css @@ -0,0 +1,307 @@ +body.deuteranopia { + --y6a: #d17991; --w8u: #3e8620; --s8i: #ff727b; --n8e: #6f7eb5; + --m4i: #265245; --y4i: #d61906; --f8a: #8671b2; --s4n: #008ae7; + --d3u: #6d4835; --r6a: #4d4a17; --y4a: #0b3460; --k8i: #fe8500; + --y6i: #0070a0; --o5a: #bf2d37; --c3u: #635169; --s5o: #2d5a7b; + --s5e: #61317b; --y7i: #00b0fb; --i3i: #ff1202; --t9u: #014c2d; +} + +body.protanopia { + --y6a: #b095c0; --w8u: #616f00; --s8i: #eeb0df; --n8e: #6d78ae; + --m4i: #35432c; --y4i: #9a596f; --f8a: #7777bd; --s4n: #024b82; + --d3u: #645649; --r6a: #524c18; --y4a: #122448; --k8i: #efb440; + --y6i: #013c4c; --o5a: #8d5d85; --c3u: #5a5774; --s5o: #364a63; + --s5e: #494093; --y7i: #086078; --i3i: #e87aab; --t9u: #012500; +} + +body.tritanopia { + --y6a: #b98a9c; --w8u: #235e1a; --s8i: #e58795; --n8e: #958fb3; + --m4i: #304a3f; --y4i: #7e2521; --f8a: #a288b5; --s4n: #5196cd; + --d3u: #54463b; --r6a: #303b19; --y4a: #343d5a; --k8i: #83630c; + --y6i: #30728c; --o5a: #873d4a; --c3u: #695b6c; --s5o: #506175; + --s5e: #764e82; --y7i: #4bb0dc; --i3i: #c02a2b; --t9u: #00361e; +} + +body.monochrome { + --y6a: var(--fg); --w8u: var(--fg); --s8i: var(--fg); --n8e: var(--fg); + --m4i: var(--fg); --y4i: var(--fg); --f8a: var(--fg); --s4n: var(--fg); + --d3u: var(--fg); --r6a: var(--fg); --y4a: var(--fg); --k8i: var(--fg); + --y6i: var(--fg); --o5a: var(--fg); --c3u: var(--fg); --s5o: var(--fg); + --s5e: var(--fg); --y7i: var(--fg); --i3i: var(--fg); --t9u: var(--fg); +} + +@media (prefers-contrast: less) { + body.monochrome { + --y6a: #8f8f8f; --w8u: #6f6f6f; --s8i: #9c9c9c; --n8e: #808080; + --m4i: #474747; --y4i: #3e3e3e; --f8a: #7c7c7c; --s4n: #686868; + --d3u: #515151; --r6a: #484848; --y4a: #2f2f2f; --k8i: #989898; + --y6i: #535353; --o5a: #4e4e4e; --c3u: #575757; --s5o: #535353; + --s5e: #414141; --y7i: #818181; --i3i: #565656; --t9u: #313131; + } +} + +.lntable { + display: block; +} + +.highlight > pre:not(.chroma) { + background: unset !important; + color: inherit !important; +} + +.highlight > pre.chroma { + margin-left: 2rem; +} + +pre > code { + padding: 1ex 0; + /* background: var(--g18s); */ +} + +.lntd > .chroma{ + margin: 0; +} + +.lntd:first-child * { + background: unset !important; +} + +.lntd:first-child .hl { + font-weight: bold; +} + +.hljs-ln-numbers, +.lntd:first-child pre > code, +.chroma .lnt {/* LineNumbersTable */ + min-width: 2rem; + max-width: 2rem; + overflow: hidden; + vertical-align: top; + color: var(--n8e); + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-touch-callout: none; +} + +.chroma .lntd { /* LineTableTD */ + vertical-align: top; +} + +.chroma .lntable {/* LineTable */ + border: unset; + border-spacing: 0; +} + +.chroma .hl { /* LineHighlight */ + display: block; + background: var(--g18s); + width: auto; +} + +.chroma .c, /* Comment */ +.chroma .ch, /* CommentHashbang */ +.chroma .cm, /* CommentMultiline */ +.chroma .c1, /* CommentSingle */ +.chroma .cs, /* CommentSpecial */ +.chroma .cp, /* CommentPreproc */ +.chroma .cpf, /* CommentPreprocFile */ +.hljs-emphasis { + font-style: italic; +} + +.chroma .m, /* LiteralNumber */ +.chroma .mb, /* LiteralNumberBin */ +.chroma .mf, /* LiteralNumberFloat */ +.chroma .mh, /* LiteralNumberHex */ +.chroma .mi, /* LiteralNumberInteger */ +.chroma .il, /* LiteralNumberIntegerLong */ +.chroma .mo, /* LiteralNumberOct */ +.chroma .kc, /* KeywordConstant */ +.chroma .kt, /* KeywordType */ +.chroma .nt, /* NameTag */ +.hljs-strong { + /* font-weight: bold; */ +} + +.chroma .x, /* Other */ +.chroma .err, /* Error */ +.chroma .ln,/* LineNumbers */ +.chroma .o, /* Operator */ +.chroma .p, /* Punctuation */ +.chroma .w { /* TextWhitespace */ +} + +.chroma .kn {/* KeywordNamespace */ + color: var(--y4i); + font-weight: bold; +} + +.chroma .ow { /* OperatorWord */ + color: var(--y4a); +} + +.chroma .c, /* Comment */ +.chroma .ch, /* CommentHashbang */ +.chroma .cm, /* CommentMultiline */ +.chroma .c1, /* CommentSingle */ +.chroma .cs, /* CommentSpecial */ +.chroma .cp, /* CommentPreproc */ +.chroma .cpf, /* CommentPreprocFile */ +.hljs-comment, +.hljs-quote { + color: var(--i3i); +} + +.chroma .n, /* Name */ +.chroma .nc, /* NameClass */ +.chroma .nd, /* NameDecorator*/ +.chroma .ne, /* NameException */ +.chroma .fm, /* NameFunctionMagic */ +.chroma .nl, /* NameLabel */ +.chroma .nn, /* NameNamespace */ +.chroma .nx, /* NameOther */ +.chroma .py, /* NameProperty ---*/ +.chroma .nt, /* NameTag */ +.chroma .nv, /* NameVariable */ +.chroma .vc, /* NameVariableClass */ +.chroma .vg, /* NameVariableGlobal */ +.chroma .vi, /* NameVariableInstance */ +.chroma .vm, /* NameVariableMagic */ +.hljs-deletion, +.hljs-name, +.hljs-regexp, +.hljs-selector-class, +.hljs-selector-id, +.hljs-tag, +.hljs-template-variable, +.hljs-variable { + color: var(--k8i); +} + +.chroma .nb, /* NameBuiltin */ +.chroma .bp, /* NameBuiltinPseudo */ +.chroma .l, /* Literal */ +.chroma .ld, /* LiteralDate */ +.chroma .m, /* LiteralNumber */ +.chroma .mb, /* LiteralNumberBin */ +.chroma .mf, /* LiteralNumberFloat */ +.chroma .mh, /* LiteralNumberHex */ +.chroma .mi, /* LiteralNumberInteger */ +.chroma .il, /* LiteralNumberIntegerLong */ +.chroma .mo, /* LiteralNumberOct */ +.hljs-built_in, +.hljs-lfg, +.hljs-literal, +.hljs-meta, +.hljs-number, +.hljs-params, +.hljs-type { + color: var(--s8i); +} + +.chroma .na, /* NameAttribute */ +.hljs-attribute { + color: var(--y6a); +} + +.chroma .s, /* LiteralString */ +.chroma .sa, /* LiteralStringAffix */ +.chroma .sb, /* LiteralStringBacktick */ +.chroma .sc, /* LiteralStringChar */ +.chroma .dl, /* LiteralStringDelimiter */ +.chroma .sd, /* LiteralStringDoc */ +.chroma .s2, /* LiteralStringDouble */ +.chroma .se, /* LiteralStringEscape */ +.chroma .sh, /* LiteralStringHeredoc */ +.chroma .si, /* LiteralStringInterpol */ +.chroma .sx, /* LiteralStringOther */ +.chroma .sr, /* LiteralStringRegex */ +.chroma .s1, /* LiteralStringSingle */ +.chroma .ss, /* LiteralStringSymbol */ +.hljs-addition, +.hljs-bullet, +.hljs-string, +.hljs-symbol { + color: var(--y7i); +} + +.chroma .no, /* NameConstant */ +.chroma .nf, /* NameFunction */ +.chroma .ni, /* NameEntity */ +.chroma .g, /* Generic */ +.chroma .gd, /* GenericDeleted */ +.chroma .ge, /* GenericEmph */ +.chroma .gr, /* GenericError */ +.chroma .gh, /* GenericHeading */ +.chroma .gi, /* GenericInserted */ +.chroma .go, /* GenericOutput */ +.chroma .gp, /* GenericPrompt */ +.chroma .gs, /* GenericStrong */ +.chroma .gu, /* GenericSubheading */ +.chroma .gt, /* GenericTraceback */ +.chroma .gl, /* GenericUnderline */ +.hljs-section, +.hljs-title { + color: var(--w8u); +} + +.chroma .k, /* Keyword */ +.chroma .kc, /* KeywordConstant */ +.chroma .kt, /* KeywordType */ +.chroma .kd, /* KeywordDeclaration */ +.chroma .kp, /* KeywordPseudo */ +.chroma .kr, /* KeywordReserved */ +.hljs-keyword, +.hljs-selector-tag { + color: var(--s4n); +} + +@media screen and (-ms-high-contrast: active), +screen and (prefers-contrast: more) { + :root { + --y6a: var(--fg); + --w8u: var(--fg); + --s8i: var(--fg); + --n8e: var(--fg); + --m4i: var(--fg); + --y4i: var(--fg); + --f8a: var(--fg); + --s4n: var(--fg); + --d3u: var(--fg); + --r6a: var(--fg); + --y4a: var(--fg); + --k8i: var(--fg); + --y6i: var(--fg); + --o5a: var(--fg); + --c3u: var(--fg); + --s5o: var(--fg); + --s5e: var(--fg); + --y7i: var(--fg); + --i3i: var(--fg); + --t9u: var(--fg); + } + + .hljs *, + .chroma * { + background: var(--bg) !important; + color: var(--fg) !important; + } + + .hljs-keyword, + .hljs-selector-tag { + font-weight: 700; + } + +} + +@media print { + + .lntd:first-child * { + /* hide line numbering; not coupled when code break into new line */ + /* display: none; */ + } + +} \ No newline at end of file diff --git a/assets/js/accessibility.js b/assets/js/accessibility.js new file mode 100644 index 0000000000000000000000000000000000000000..8588d379ce07fe1dd180aa803ae2592f34653213 --- /dev/null +++ b/assets/js/accessibility.js @@ -0,0 +1,174 @@ +const bodySty = document.body; +const htmlSty = document.documentElement.style; + +// Enable accessibility settings when JavaScript is permitted +getElement('a11y').disabled = false; + +// Close console +const closeA11yConsole = () => getElement('has-a11y').removeAttribute('open'); + +// Color scheme and contrast functions +const matchMediaColor = () => { + lightSwitch.checked = window.matchMedia('(prefers-color-scheme: dark)').matches; + + if (window.matchMedia('(prefers-contrast: more)').matches) { + moreContrast.checked = true; + } else if (window.matchMedia('(prefers-contrast: less)').matches) { + lessContrast.checked = true; + } else { + defaultContrast.checked = true; + } +}; + +function setColor() { + const styles = { + light: { + default: '--off: #000; --fg: var(--fg-light); --mid: var(--midtone); --ac: var(--ac-light); --bg: var(--bg-light);', + less: '--off: #000; --fg: var(--fg-light-less); --mid: var(--midtone-less); --ac: var(--ac-light-less); --bg: var(--bg-light-less);', + more: '--off: #000; --fg: var(--fg-light-more); --mid: var(--midtone-more); --ac: var(--ac-light-more); --bg: var(--bg-light-more); --border: 1pt solid var(--fg); --bound: var(--border);' + }, + dark: { + default: '--off: #fff; --fg: var(--fg-dark); --mid: var(--midtone); --ac: var(--ac-dark); --bg: var(--bg-dark);', + less: '--off: #fff; --fg: var(--fg-dark-less); --mid: var(--midtone-less); --ac: var(--ac-dark-less); --bg: var(--bg-dark-less);', + more: '--off: #fff; --fg: var(--fg-dark-more); --mid: var(--midtone-more); --ac: var(--ac-dark-more); --bg: var(--bg-dark-more); --border: 1pt solid var(--fg); --bound: var(--border);' + } + }; + const scheme = lightSwitch.checked ? 'dark' : 'light'; + const logomarkDark = getElement('logomark--dark'); + if (logomarkDark) { + const logomark = getElement('logomark'); + logomark.style.display = lightSwitch.checked ? 'none' : 'inline-block'; + logomarkDark.style.display = lightSwitch.checked ? 'inline-block' : 'none'; + } + const contrast = lessContrast.checked ? 'less' : (moreContrast.checked ? 'more' : 'default'); + bodySty.setAttribute('style', styles[scheme][contrast]); +}; + +// Flash guard +addEvent(document, 'DOMContentLoaded', () => { + setTimeout(() => htmlSty.setProperty('--flashGuard', '1s ease-in 0.1s'), 99); +}); + +// Switch to keyboard-friendly mode +addEvent(document, 'keydown', (element) => { + if (element.key === 'Tab') { + document.body.classList.add('keydown'); + } + if (element.key === 'Escape') { + document.body.classList.remove('keydown'); + } +}); + +// Color palette functions +function setColorPalette() { + document.body.className = colorPalette.value; +}; + +// OpenDyslexic functions +function useOpenDyslexic() { + if (OpenDyslexic.checked) { + htmlSty.setProperty('--rm', 'OpenDyslexic'); + htmlSty.setProperty('--sf', 'OpenDyslexic'); + } else { + htmlSty.removeProperty('--rm'); + htmlSty.removeProperty('--sf'); + } + recalcLogotypeWidth(); +}; + +// Font size functions +function setFontSize() { + fontSizeState.value = fontSize.value; + htmlSty.setProperty('--fontScale', fontSize.value / 10); +}; + +// Baseline stretch functions +function setStretch() { + baselineStretchState.value = baselineStretch.value; + htmlSty.setProperty('--baselineStretch', baselineStretch.value); +}; + +// Initialize localStorage +function hasLocalStorage() { + try { + localStorage.is = 'enable'; + localStorage.removeItem('is'); + return true; + } catch(e) { + defaultContrast.checked = true; + getElement('noLocalStorage').className = ''; + return false; + }; +}; + +if (hasLocalStorage()) { + getElement('a11y-menu').className = ''; + saveButton.disabled = false; + resetButton.disabled = false; + + // Reset function + function resetA11y() { + localStorage.clear(); + matchMediaColor(); + colorPalette.reset; + fontSize.value = ''; + baselineStretch.value = ''; + OpenDyslexic.checked = false; + setTimeout(() => window.location.reload(), 100); + }; + + // Save function + function saveA11y() { + setTimeout(() => closeA11yConsole(), 618); + + localStorage.scheme = lightSwitch.checked ? 'light' : 'dark'; + + if (defaultContrast.checked) localStorage.contrast = 'default'; + if (lessContrast.checked) localStorage.contrast = 'less'; + if (moreContrast.checked) localStorage.contrast = 'more'; + + localStorage.colorPalette = colorPalette.value; + localStorage.font = OpenDyslexic.checked ? 'OpenDyslexic' : ''; + localStorage.fontSize = fontSize.value; + localStorage.stretchSize = baselineStretch.value; + }; + + // Read settings from localStorage + + if (!localStorage.getItem('scheme') && !localStorage.getItem('contrast')) { + matchMediaColor(); + } else { + lightSwitch.checked = localStorage.scheme !== 'dark'; + + if (localStorage.contrast === 'more') { + moreContrast.checked = true; + } else if (localStorage.contrast === 'less') { + lessContrast.checked = true; + } else { + defaultContrast.checked = true; + } + + setColor(); + } + + if (localStorage.getItem('colorPalette')) { + colorPalette.value = localStorage.colorPalette; + setColorPalette(); + } + + if (localStorage.font === 'OpenDyslexic') { + OpenDyslexic.setAttribute('checked', 'checked'); + useOpenDyslexic(); + } + + if (localStorage.getItem('fontSize')) { + fontSize.value = localStorage.fontSize; + setFontSize(); + } + + if (localStorage.getItem('stretchSize')) { + baselineStretch.value = localStorage.stretchSize; + setStretch(); + } + +} \ No newline at end of file diff --git a/assets/js/bionread.js b/assets/js/bionread.js new file mode 100644 index 0000000000000000000000000000000000000000..b898dc843162fbdd4ac403f61ad0a9d09e80c37e --- /dev/null +++ b/assets/js/bionread.js @@ -0,0 +1,58 @@ +// make sure the switch unchecked on reload +getElement('useBionRead').className = ''; +bionReadSwitch.checked = false; +// define the function +function bionRead() { + // define capture and restore environment variable + const bionReadMainContent = getElement('content'); + const bionReadSnapshot = getElement('bionReadSnapshot'); + + if (!bionReadMainContent || !bionReadSnapshot) { + console.error('Required elements not found'); + return; + } + + // switch conditioning + if (bionReadSwitch.checked) { + // capture snapshot + bionReadSnapshot.innerHTML = bionReadMainContent.innerHTML; + + // split words into 'anchored' and 'floated' part + const safeElements = getElements('[data-bionRead-safe]'); + safeElements.forEach(element => { + const targetElements = element.querySelectorAll('h1, h2, h3, h4, h5, p, a, li, blockquote'); + targetElements.forEach(el => { + const words = el.innerText.split(' '); + const processedWords = words.map(word => { + const length = word.length; + if (length === 1) return `${word}`; + const midPoint = Math.ceil(length / 2); + return word + .split('') + .map((char, index) => index < midPoint ? `${char}` : char) + .join(''); + }); + el.innerHTML = processedWords.join(' '); + }); + }); + + // make 'floated' text slices less contrast + htmlSty.setProperty('--fg', lightSwitch.checked ? '#333' : '#ccc'); + + // make 'anchored' text slices a bit weighted + htmlSty.setProperty('--bion', '0.028em'); + } else { + // restore snapshot + bionReadMainContent.innerHTML = bionReadSnapshot.innerHTML; + + // purge snapshot + bionReadSnapshot.innerHTML = ''; + + // restore style + htmlSty.removeProperty('--fg'); + htmlSty.removeProperty('--bion'); + + // reset color settings + setColor(); + } +} \ No newline at end of file diff --git a/assets/js/default.js b/assets/js/default.js new file mode 100644 index 0000000000000000000000000000000000000000..586ac8bab9ce6344251c9d213f9fb06f1bf9a962 --- /dev/null +++ b/assets/js/default.js @@ -0,0 +1,178 @@ +// Event listener helper function +function addEvent(element, event, handler) { + if (element?.attachEvent) { + return element.attachEvent('on' + event, handler); + } + return element?.addEventListener(event, handler, false); +} + +// DOM element getters +const getElement = id => document.getElementById(id); +const getElements = selector => document.querySelectorAll(selector); + +// Logotype width calculation +function recalcLogotypeWidth() { + const logotype = getElement('logotype'); + const logotypeText = getElement('logotype__text'); + logotype?.setAttribute('width', `${logotypeText.getBoundingClientRect().width}px`); +} + +// Viewport adaptation +function adaptViewport() { + // fix logotype when font loading delayed + document.fonts.ready.then(() => { + recalcLogotypeWidth(); + }); + if (window.innerWidth < 640) { + getElement('has-search')?.setAttribute('open', 'open'); + getElement('has-search')?.removeAttribute('name'); + getElement('has-more-menu')?.setAttribute('open', 'open'); + } else { + getElement('top-nav')?.setAttribute('open', 'open') + addEvent(visualViewport, 'resize', adaptViewport); + } +} +addEvent(window, 'DOMContentLoaded', adaptViewport); + + +// Node collapse handlers +const collapseParentNode = getElements('.js-cpn'); +const collapseGrandParentNode = getElements('.js-cgpn'); +const detailsElements = getElements('details.js-details'); + +collapseParentNode.forEach(element => { + const handler = () => element.parentNode?.removeAttribute('open'); + addEvent(element, 'click', handler); +}); + +collapseGrandParentNode.forEach(element => { + const handler = () => element.parentNode?.parentNode?.removeAttribute('open'); + addEvent(element, 'click', handler); +}); + +if (window.innerWidth > 640) { + // Details element handler for firefox based browsers which do not respect the same name attribute + detailsElements.forEach(detail => { + const handler = (e) => { + const name = detail.getAttribute('name'); + if (name) { + getElements(`details.js-details[name="${name}"]`).forEach(otherDetail => { + if (otherDetail !== detail && otherDetail.hasAttribute('open')) { + otherDetail.removeAttribute('open'); + } + }); + } + }; + addEvent(detail, 'click', handler); + }); +} + +// Share functionality +if (typeof navigatorShare !== 'undefined') { + getElement('navigatorShare')?.setAttribute( + 'href', + 'javascript:navigator.share({title: document.title, url: window.location.href})' + ); + + if (location.protocol === 'https:') { + getElement('copyPermalink')?.removeAttribute('class'); + } +} + +getElement('print-button')?.removeAttribute('class'); +getElement('back')?.removeAttribute('class'); + +// Date handling +const date = new Date(); + +// Mastodon and QR code functionality +if (typeof mastodonInstance !== 'undefined') { + getElement('has-mastodon').className = 'active'; + + const mastodonHandler = () => { + mastodonTitle.disabled = true; + mastodonPermalink.disabled = true; + mastodonText.disabled = false; + mastodon?.setAttribute('action', `${mastodonInstance.value}/share`); + }; + + addEvent(mastodonInstance, 'input', mastodonHandler); + + if (typeof QRCode !== 'undefined') { + getElement('colophon').removeAttribute('style'); + + qr?.appendChild( + QRCode({ + msg: window.location.href, + ecl: 'M', + pal: ['#000', '#fff'], + pad: 2, + dim: 96, + }) + ); + + const isoTime = date.toISOString(); + const timeStamp = getElement('time-stamp'); + timeStamp.innerHTML = isoTime; + timeStamp?.setAttribute('datetime', isoTime); + } +} + +// Digital well-being clock +const hour = date.getHours(); +const isDaytime = hour > 6 && hour < 21; + +function toggleNightElements(hidden) { + const elements = ['grain', 'dwclock']; + elements.forEach(id => { + const element = getElement(id); + element?.[hidden ? 'setAttribute' : 'removeAttribute']('hidden', 'hidden'); + }); +} + +if (isDaytime) { + toggleNightElements(true); +} else { + toggleNightElements(false); + + let clockInterval; + function updateClock() { + const minutes = date.getMinutes(); + const seconds = date.getSeconds(); + const minutesDegrees = ((minutes / 60) * 360) + ((seconds/60)*6); + const hourDegrees = ((hour / 12) * 360) + ((minutes/60)*30); + + const transforms = ['transform', 'webkitTransform', 'mozTransform', 'msTransform', 'oTransform']; + const hands = { + '#min': minutesDegrees, + '#hour': hourDegrees + }; + + Object.entries(hands).forEach(([selector, degrees]) => { + const hand = document.querySelector(selector); + transforms.forEach(transform => { + hand.style[transform] = `rotate(${degrees}deg)`; + }); + }); + } + + updateClock(); + clockInterval = setInterval(updateClock, 10000); +} + +// Overwrite browser search bar (canceled) +// addEvent(document, 'keydown', function(e) { +// if (e.ctrlKey && e.key === 'k') { +// e.preventDefault(); +// getElement('has-search')?.setAttribute('open', 'open'); +// const searchInput = document.querySelector('.pagefind-ui__search-input'); +// searchInput?.focus(); +// } +// }); + +// clashes with details handler, need workaround +addEvent(window, 'beforeprint', function() { + getElements('[name="redaction-history"]')?.forEach(e => { + e.setAttribute('open', 'open'); + }); +}); diff --git a/assets/js/fediverse.js b/assets/js/fediverse.js new file mode 100644 index 0000000000000000000000000000000000000000..b8a77a16c389631022d18d0abaca64a59ae1be0e --- /dev/null +++ b/assets/js/fediverse.js @@ -0,0 +1,186 @@ +const id = getElement('metadata-post').innerText; + +if (id) { + const host = getElement('metadata-instance').innerText; + const i18nreplies = getElement('i18n--is-replies').innerHTML; + const i18nreblogs = getElement('i18n--is-reblogs').innerHTML; + const i18nfavourites = getElement('i18n--is-favourites').innerHTML; + const style = document.createElement('style'); + style.textContent = ` + #comments > * {width: var(--golden-ratio)} + #comments noscript {margin: var(--medskip) 0} + #discussion-starter {margin-bottom: var(--medskip)} + #discussion-starter > footer {display: flex; align-items: center; justify-content: space-between} + .mastodon-comment {margin: 1rem 0 1rem calc(var(--mul) * var(--indent)); border: 1pt solid #fff4; border-left: 2pt solid var(--ac); background: #80808008; padding: 1rem 1rem 1ex; box-shadow: 0 .5pt 1pt 0 var(--g18s); overflow: auto} + .mastodon-comment .content {margin-left: 4rem; line-height: calc(var(--baselineStretch) * 1.272)} + .mastodon-comment .par a {max-width: 100%; vertical-align: bottom; white-space: break-spaces} + .mastodon-comment .attachments * {width: 100%; height: auto} + .mastodon-comment > footer {margin-top: 1rem; margin-left: 3.5rem} + .mastodon-comment > footer .stat {display: inline-flex; flex-shrink: 0; gap: 5pt} + .stat a {display: inline-flex; align-items: center; padding: 2pt; color: var(--mid); gap: 2pt} + .stat a::before {vertical-align: text-top} + a.replies.active, a.reblogs.active {color: var(--ac)} + a.favourites.active {color: var(--i3i)} + .mastodon-comment .date {margin-left: auto; padding-left: 1rem; color: var(--mid); font-size: calc(10pt * var(--fontScale))} + @media only screen and (max-width: 960px) { + .mastodon-comment .content, .mastodon-comment > footer {margin-left: 0} + } + `; + document.head.appendChild(style); + + function escapeHtml(unsafe) { + return unsafe + .replace(/&/g, "&") + .replace(//g, ">") + .replace(/"/g, """) + .replace(/'/g, "'"); + } + + let commentsLoaded = false; + + const toot_active = (toot, what) => { + const count = toot[`${what}_count`]; + return count > 0 ? 'active' : ''; + }; + + const toot_count = (toot, what) => { + const count = toot[`${what}_count`]; + return count > 0 ? count : ''; + }; + + const user_account = (account) => { + let result = `@${account.acct}`; + if (!account.acct.includes('@')) { + const domain = new URL(account.url); + result += `@${domain.hostname}`; + } + return result; + }; + + const render_toots = (toots, in_reply_to, depth) => { + const tootsToRender = toots + .filter(toot => toot.in_reply_to_id === in_reply_to) + .sort((a, b) => a.created_at.localeCompare(b.created_at)); + tootsToRender.forEach(toot => render_toot(toots, toot, depth)); + }; + + const render_toot = (toots, toot, depth) => { + toot.account.display_name = escapeHtml(toot.account.display_name); + toot.account.emojis.forEach(emoji => { + toot.account.display_name = toot.account.display_name.replace( + `:${emoji.shortcode}:`, + `Emoji ${emoji.shortcode}` + ); + }); + + const renderAttachment = attachment => { + const attachmentTypes = { + image: () => `${attachment.description}`, + video: () => ``, + gifv: () => ``, + audio: () => ``, + default: () => `${attachment.type}` + }; + + return (attachmentTypes[attachment.type] || attachmentTypes.default)(); + }; + + const mastodonComment = ` + `; + + getElement('mastodon-comments-list') + .appendChild(DOMPurify.sanitize(mastodonComment, {'RETURN_DOM_FRAGMENT': true})); + + render_toots(toots, toot.id, depth + 1); + }; + + const toot_stats = toot => ` + + ${toot_count(toot, 'replies')} + + + ${toot_count(toot, 'reblogs')} + + + ${toot_count(toot, 'favourites')} + `; + + const loadComments = async () => { + if (commentsLoaded) return; + + const commentsList = getElement('mastodon-comments-list'); + commentsList.innerHTML = getElement('i18n--is-loading').innerHTML; + + try { + const [tootResponse, contextResponse] = await Promise.all([ + fetch(`https://${host}/api/v1/statuses/${id}`), + fetch(`https://${host}/api/v1/statuses/${id}/context`) + ]); + + const [toot, data] = await Promise.all([ + tootResponse.json(), + contextResponse.json() + ]); + + getElement("mastodon-stats").innerHTML = toot_stats(toot); + + if (data.descendants?.length > 0) { + commentsList.innerHTML = ""; + render_toots(data.descendants, id, 0); + } else { + commentsList.innerHTML = getElement('i18n--no-comment').innerHTML; + } + + commentsLoaded = true; + commentsList.setAttribute('aria-busy', 'false'); + } catch (error) { + console.error('Error loading comments:', error); + commentsList.innerHTML = 'Error loading comments'; + } + }; + + const respondToVisibility = (element, callback) => { + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.intersectionRatio > 0) { + callback(); + } + }); + }, { root: null }); + + observer.observe(element); + }; + + const comments = getElement("mastodon-comments-list"); + respondToVisibility(comments, loadComments); +} \ No newline at end of file diff --git a/assets/js/qrcode.js b/assets/js/qrcode.js new file mode 100644 index 0000000000000000000000000000000000000000..aace576970218fd021ae261f5568a1ce33224494 --- /dev/null +++ b/assets/js/qrcode.js @@ -0,0 +1,314 @@ +/** https://github.com/datalog/qrcode-svg under MIT license */ +'use strict'; + +function QRCode(r) { + var n, t, o, e, a = [], + f = [], + i = Math.max, + u = Math.min, + h = Math.abs, + v = Math.ceil, + c = /^[0-9]*$/, + s = /^[A-Z0-9 $%*+.\/:-]*$/, + l = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ $%*+-./:", + g = [ + [-1, 7, 10, 15, 20, 26, 18, 20, 24, 30, 18, 20, 24, 26, 30, 22, 24, 28, 30, 28, 28, 28, 28, 30, 30, 26, 28, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30], + [-1, 10, 16, 26, 18, 24, 16, 18, 22, 22, 26, 30, 22, 22, 24, 24, 28, 28, 26, 26, 26, 26, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28], + [-1, 13, 22, 18, 26, 18, 24, 18, 22, 20, 24, 28, 26, 24, 20, 30, 24, 28, 28, 26, 30, 28, 30, 30, 30, 30, 28, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30], + [-1, 17, 28, 22, 16, 22, 28, 26, 26, 24, 28, 24, 28, 22, 24, 24, 30, 28, 28, 26, 28, 30, 24, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30] + ], + d = [ + [-1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 4, 4, 4, 4, 4, 6, 6, 6, 6, 7, 8, 8, 9, 9, 10, 12, 12, 12, 13, 14, 15, 16, 17, 18, 19, 19, 20, 21, 22, 24, 25], + [-1, 1, 1, 1, 2, 2, 4, 4, 4, 5, 5, 5, 8, 9, 9, 10, 10, 11, 13, 14, 16, 17, 17, 18, 20, 21, 23, 25, 26, 28, 29, 31, 33, 35, 37, 38, 40, 43, 45, 47, 49], + [-1, 1, 1, 2, 2, 4, 4, 6, 6, 8, 8, 8, 10, 12, 16, 12, 17, 16, 18, 21, 20, 23, 23, 25, 27, 29, 34, 34, 35, 38, 40, 43, 45, 48, 51, 53, 56, 59, 62, 65, 68], + [-1, 1, 1, 2, 4, 4, 4, 5, 6, 8, 8, 11, 11, 16, 16, 18, 16, 19, 21, 25, 25, 25, 34, 30, 32, 35, 37, 40, 42, 45, 48, 51, 54, 57, 60, 63, 66, 70, 74, 77, 81] + ], + m = { + L: [0, 1], + M: [1, 0], + Q: [2, 3], + H: [3, 2] + }, + p = function(r, n) { + for (var t = 0, o = 8; o--;) t = t << 1 ^ 285 * (t >>> 7) ^ (n >>> o & 1) * r; + return t + }, + C = function(r, n) { + for (var t = [], o = r.length, e = o; e;) + for (var a = r[o - e--] ^ t.shift(), f = n.length; f--;) t[f] ^= p(n[f], a); + return t + }, + w = function(r) { + for (var n = [function() { + return 0 == (t + o) % 2 + }, function() { + return 0 == t % 2 + }, function() { + return 0 == o % 3 + }, function() { + return 0 == (t + o) % 3 + }, function() { + return 0 == ((t / 2 | 0) + (o / 3 | 0)) % 2 + }, function() { + return 0 == t * o % 2 + t * o % 3 + }, function() { + return 0 == (t * o % 2 + t * o % 3) % 2 + }, function() { + return 0 == ((t + o) % 2 + t * o % 3) % 2 + }][r], t = e; t--;) + for (var o = e; o--;) f[t][o] || (a[t][o] ^= n()) + }, + b = function() { + for (var r = function(r, n) { + n[6] || (r += e), n.shift(), n.push(r) + }, n = function(n, o, a) { + return n && (r(o, a), o = 0), r(o += e, a), t(a) + }, t = function(r) { + var n = r[5], + t = n > 0 && r[4] == n && r[3] == 3 * n && r[2] == n && r[1] == n; + return (t && r[6] >= 4 * n && r[0] >= n ? 1 : 0) + (t && r[0] >= 4 * n && r[6] >= n ? 1 : 0) + }, o = 0, f = e * e, i = 0, u = e; u--;) { + for (var c = [0, 0, 0, 0, 0, 0, 0], s = [0, 0, 0, 0, 0, 0, 0], l = !1, g = !1, d = 0, m = 0, p = e; p--;) { + a[u][p] == l ? 5 == ++d ? o += 3 : d > 5 && o++ : (r(d, c), o += 40 * t(c), d = 1, l = a[u][p]), a[p][u] == g ? 5 == ++m ? o += 3 : m > 5 && o++ : (r(m, s), o += 40 * t(s), m = 1, g = a[p][u]); + var C = a[u][p]; + C && i++, p && u && C == a[u][p - 1] && C == a[u - 1][p] && C == a[u - 1][p - 1] && (o += 3) + } + o += 40 * n(l, d, c) + 40 * n(g, m, s) + } + return o += 10 * (v(h(20 * i - 10 * f) / f) - 1) + }, + A = function(r, n, t) { + for (; n--;) t.push(r >>> n & 1) + }, + M = function(r, n) { + return r.numBitsCharCount[(n + 7) / 17 | 0] + }, + B = function(r, n) { + return 0 != (r >>> n & 1) + }, + x = function(r, n) { + for (var t = 0, o = r.length; o--;) { + var e = r[o], + a = M(e, n); + if (1 << a <= e.numChars) return 1 / 0; + t += 4 + a + e.bitData.length + } + return t + }, + D = function(r) { + if (r < 1 || r > 40) throw "Version number out of range"; + var n = (16 * r + 128) * r + 64; + if (r >= 2) { + var t = r / 7 | 2; + n -= (25 * t - 10) * t - 55, r >= 7 && (n -= 36) + } + return n + }, + I = function(r, n) { + for (var t = 2; - 2 <= t; t--) + for (var o = 2; - 2 <= o; o--) E(r + o, n + t, 1 != i(h(o), h(t))) + }, + H = function(r, n) { + for (var t = 4; - 4 <= t; t--) + for (var o = 4; - 4 <= o; o--) { + var a = i(h(o), h(t)), + f = r + o, + u = n + t; + 0 <= f && f < e && 0 <= u && u < e && E(f, u, 2 != a && 4 != a) + } + }, + $ = function(r) { + for (var n = t[1] << 3 | r, o = n, a = 10; a--;) o = o << 1 ^ 1335 * (o >>> 9); + var f = 21522 ^ (n << 10 | o); + if (f >>> 15 != 0) throw "Assertion error"; + for (a = 0; a <= 5; a++) E(8, a, B(f, a)); + E(8, 7, B(f, 6)), E(8, 8, B(f, 7)), E(7, 8, B(f, 8)); + for (a = 9; a < 15; a++) E(14 - a, 8, B(f, a)); + for (a = 0; a < 8; a++) E(e - 1 - a, 8, B(f, a)); + for (a = 8; a < 15; a++) E(8, e - 15 + a, B(f, a)); + E(8, e - 8, 1) + }, + O = function() { + for (var r = e; r--;) E(6, r, 0 == r % 2), E(r, 6, 0 == r % 2); + for (var t = function() { + var r = []; + if (n > 1) + for (var t = 2 + (n / 7 | 0), o = 32 == n ? 26 : 2 * v((e - 13) / (2 * t - 2)); t--;) r[t] = t * o + 6; + return r + }(), o = r = t.length; o--;) + for (var a = r; a--;) 0 == a && 0 == o || 0 == a && o == r - 1 || a == r - 1 && 0 == o || I(t[a], t[o]); + H(3, 3), H(e - 4, 3), H(3, e - 4), $(0), + function() { + if (!(7 > n)) { + for (var r = n, t = 12; t--;) r = r << 1 ^ 7973 * (r >>> 11); + var o = n << 12 | r; + if (t = 18, o >>> 18 != 0) throw "Assertion error"; + for (; t--;) { + var a = e - 11 + t % 3, + f = t / 3 | 0, + i = B(o, t); + E(a, f, i), E(f, a, i) + } + } + }() + }, + Q = function(r) { + if (r.length != V(n, t)) throw "Invalid argument"; + for (var o = d[t[0]][n], e = g[t[0]][n], a = D(n) / 8 | 0, f = o - a % o, i = a / o | 0, u = [], h = function(r) { + var n = 1, + t = []; + t[r - 1] = 1; + for (var o = 0; o < r; o++) { + for (var e = 0; e < r; e++) t[e] = p(t[e], n) ^ t[e + 1]; + n = p(n, 2) + } + return t + }(e), v = 0, c = 0; v < o; v++) { + var s = r.slice(c, c + i - e + (v < f ? 0 : 1)); + c += s.length; + var l = C(s, h); + v < f && s.push(0), u.push(s.concat(l)) + } + var m = []; + for (v = 0; v < u[0].length; v++) + for (var w = 0; w < u.length; w++)(v != i - e || w >= f) && m.push(u[w][v]); + return m + }, + S = function(r) { + for (var n = [], t = (r = encodeURI(r), 0); t < r.length; t++) "%" != r.charAt(t) ? n.push(r.charCodeAt(t)) : (n.push(parseInt(r.substr(t + 1, 2), 16)), t += 2); + return n + }, + V = function(r, n) { + return (D(r) / 8 | 0) - g[n[0]][r] * d[n[0]][r] + }, + E = function(r, n, t) { + a[n][r] = t ? 1 : 0, f[n][r] = 1 + }, + R = function(r) { + for (var n = [], t = 0, o = r; t < o.length; t++) { + var e = o[t]; + A(e, 8, n) + } + return { + modeBits: 4, + numBitsCharCount: [8, 16, 16], + numChars: r.length, + bitData: n + } + }, + Z = function(r) { + if (!c.test(r)) throw "String contains non-numeric characters"; + for (var n = [], t = 0; t < r.length;) { + var o = u(r.length - t, 3); + A(parseInt(r.substr(t, o), 10), 3 * o + 1, n), t += o + } + return { + modeBits: 1, + numBitsCharCount: [10, 12, 14], + numChars: r.length, + bitData: n + } + }, + z = function(r) { + if (!s.test(r)) throw "String contains unencodable characters in alphanumeric mode"; + var n, t = []; + for (n = 0; n + 2 <= r.length; n += 2) { + var o = 45 * l.indexOf(r.charAt(n)); + o += l.indexOf(r.charAt(n + 1)), A(o, 11, t) + } + return n < r.length && A(l.indexOf(r.charAt(n)), 6, t), { + modeBits: 2, + numBitsCharCount: [9, 11, 13], + numChars: r.length, + bitData: t + } + }, + L = function(r, n, t, o) { + var e = function(r) { + return "" == r ? [] : c.test(r) ? [Z(r)] : s.test(r) ? [z(r)] : [R(S(r))] + }(r); + return U(e, n, t, o) + }, + N = function(r, i, u, h) { + t = i, o = h; + for (var v = e = 4 * (n = r) + 17; v--;) a[v] = [], f[v] = []; + if (O(), function(r) { + for (var n = 0, t = 1, o = e - 1, i = o; i > 0; i -= 2) { + 6 == i && --i; + for (var u = 0 > (t = -t) ? o : 0, h = 0; h < e; ++h) { + for (var v = i; v > i - 2; --v) f[u][v] || (a[u][v] = B(r[n >>> 3], 7 - (7 & n)), ++n); + u += t + } + } + }(Q(u)), 0 > o) { + var c = 1e9; + for (v = 8; v--;) { + w(v), $(v); + var s = b(); + c > s && (c = s, o = v), w(v) + } + } + w(o), $(o), f = [] + }, + U = function(r, n, t, o, e, a) { + if (void 0 === e && (e = 1), void 0 === a && (a = 40), void 0 === o && (o = -1), void 0 === t && (t = !0), !(1 <= e && e <= a && a <= 40) || o < -1 || o > 7) throw "Invalid value"; + for (var f = [], i = 236, h = [], v = e;;) { + var c = x(r, v); + if (c <= 8 * V(v, n)) break; + if (v >= a) throw "Data too long"; + v++ + } + if (t) + for (var s = (l = [m.H, m.Q, m.M]).length; s--;) c <= 8 * V(v, l[s]) && (n = l[s]); + for (var l = 0; l < r.length; l++) { + var g = r[l]; + A(g.modeBits, 4, f), A(g.numChars, M(g, v), f); + for (var d = 0, p = g.bitData; d < p.length; d++) f.push(p[d]) + } + if (f.length != c) throw "Assertion error"; + var C = 8 * V(v, n); + if (f.length > C) throw "Assertion error"; + if (A(0, u(4, C - f.length), f), A(0, (8 - f.length % 8) % 8, f), f.length % 8 != 0) throw "Assertion error"; + for (; f.length < C;) A(i, 8, f), i ^= 253; + for (s = f.length; s--;) h[s >>> 3] |= f[s] << 7 - (7 & s); + return N(v, n, h, o) + }; + return function() { + function n(r) { + return /^#[0-9a-f]{3}(?:[0-9a-f]{3})?$/i.test(r) + } + + function t(r, n) { + for (var t in r = document.createElementNS(s, r), n || {}) r.setAttribute(t, n[t]); + return r + } + var o, f, i, u, v, c, s = "http://www.w3.org/2000/svg", + l = "", + g = "string" == typeof r ? { + msg: r + } : r || {}, + d = g.pal || ["#000"], + p = h(g.dim) || 256, + C = [1, 0, 0, 1, c = (c = h(g.pad)) > -1 ? c : 4, c], + w = n(w = d[0]) ? w : "#000", + b = n(b = d[1]) ? b : 0, + A = g.vrb ? 0 : 1; + for (L(g.msg || "", m[g.ecl] || m.M, 0 == g.ecb ? 0 : 1, g.mtx), v = e + 2 * c, i = e; i--;) + for (u = 0, f = e; f--;) a[i][f] && (A ? (u++, a[i][f - 1] || (l += "M" + f + "," + i + "h" + u + "v1h-" + u + "v-1z", u = 0)) : l += "M" + f + "," + i + "h1v1h-1v-1z"); + return o = t("svg", { + viewBox: [0, 0, v, v].join(" "), + width: p, + height: p, + fill: w, + "shape-rendering": "crispEdges", + xmlns: s, + version: "1.1" + }), b && o.appendChild(t("path", { + fill: b, + d: "M0,0V" + v + "H" + v + "V0H0Z" + })), o.appendChild(t("path", { + transform: "matrix(" + C + ")", + d: l + })), o + }() +} \ No newline at end of file