initial import
this is what's currently published on https://nakamochi.io/ at the time of this commit.master
commit
3fb35c0c0b
@ -0,0 +1,2 @@
|
|||||||
|
public
|
||||||
|
output
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
Copyright (c) 2023 qeles AG
|
||||||
|
|
||||||
|
This website uses parts of Pico CSS framework (https://picocss.com) distributed
|
||||||
|
according to the MIT license.
|
||||||
|
|
||||||
|
Courier Prime monospace fonts (https://quoteunquoteapps.com/courierprime/) are
|
||||||
|
designed by Alan Dague-Greene and released under OFL license.
|
||||||
|
|
||||||
|
The rest of the work, except where otherwise noted, is released under
|
||||||
|
Creative Commons Attribution-ShareAlike 4.0 International License.
|
||||||
|
To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/4.0/.
|
||||||
@ -0,0 +1,41 @@
|
|||||||
|
# https://www.getzola.org/documentation/getting-started/configuration/
|
||||||
|
base_url = "https://nakamochi.io"
|
||||||
|
# default page meta title and <title/> suffix
|
||||||
|
title = "nakamochi"
|
||||||
|
# appears in all pages metadata
|
||||||
|
description = "a simple to use bitcoin and lightning node for anyone and everyone"
|
||||||
|
default_language = "en"
|
||||||
|
|
||||||
|
output_dir = "output"
|
||||||
|
compile_sass = true
|
||||||
|
build_search_index = false
|
||||||
|
ignored_content = []
|
||||||
|
|
||||||
|
[markdown]
|
||||||
|
highlight_code = true
|
||||||
|
external_links_target_blank = false
|
||||||
|
external_links_no_follow = true
|
||||||
|
external_links_no_referrer = true
|
||||||
|
|
||||||
|
[link_checker]
|
||||||
|
skip_prefixes = []
|
||||||
|
skip_anchor_prefixes = []
|
||||||
|
internal_level = "error"
|
||||||
|
external_level = "error"
|
||||||
|
|
||||||
|
# custom variables accessible at config.extra in templates
|
||||||
|
[extra]
|
||||||
|
sitenav = [
|
||||||
|
{path = "@/source.md", en = "sources", it = "sorgenti"},
|
||||||
|
{path = "@/about.md", en = "about", it = "about"},
|
||||||
|
]
|
||||||
|
|
||||||
|
[translations]
|
||||||
|
not_found = "not found"
|
||||||
|
|
||||||
|
# language translations
|
||||||
|
[languages.de]
|
||||||
|
title = "nakamochi"
|
||||||
|
|
||||||
|
[languages.it]
|
||||||
|
title = "nakamochi"
|
||||||
@ -0,0 +1,127 @@
|
|||||||
|
---
|
||||||
|
template: "home.html"
|
||||||
|
title: "nakamochi"
|
||||||
|
extra:
|
||||||
|
landing: true
|
||||||
|
tagline: "a device for complete privacy and financial independence leveraging bitcoin and lightning networks"
|
||||||
|
---
|
||||||
|
## Motivation
|
||||||
|
|
||||||
|
Nowadays, there are many web and mobile apps providing bitcoin and lightning wallets
|
||||||
|
functionality. They are mostly known as [SPV], Simplified Payment Verification clients
|
||||||
|
which connect to a [full node]. Likewise, [hardware wallets] also typically require
|
||||||
|
a companion app which in turn connects to a full node run by someone else.
|
||||||
|
|
||||||
|
Historically, bitcoin - and especially lightning - nodes have been run by
|
||||||
|
organizations and people with knowledge in cryptography, system networks and
|
||||||
|
software engineering.
|
||||||
|
|
||||||
|
Nakamochi takes on the challenge to make such nodes usable to a broader audience.
|
||||||
|
Just like a coffee maker or a microwave oven, we believe anyone should be able
|
||||||
|
to run a node at home and reach 100% privacy and independence. Running one's own
|
||||||
|
full node also helps the whole Bitcoin network to remain decentralized.
|
||||||
|
|
||||||
|
[SPV]: https://developer.bitcoin.org/devguide/operating_modes.html#simplified-payment-verification-spv
|
||||||
|
[full node]: https://bitcoin.org/en/full-node#what-is-a-full-node
|
||||||
|
[hardware wallets]: https://bitcoin.org/en/wallets/hardware/
|
||||||
|
|
||||||
|
## The name
|
||||||
|
|
||||||
|
The name "nakamochi" comes from putting together [Satoshi Nakamoto], the founder
|
||||||
|
of Bitcoin, and a
|
||||||
|
[famous Japanese handheld digital pet](https://en.wikipedia.org/wiki/Tamagotchi)
|
||||||
|
to emphasize personal, self-hosting.
|
||||||
|
|
||||||
|
[Satoshi Nakamoto]: https://en.bitcoin.it/wiki/Satoshi_Nakamoto
|
||||||
|
|
||||||
|
## Editions
|
||||||
|
|
||||||
|
The following editions are listed in an order of increasing ease of use.
|
||||||
|
It is always a trade-off between the costs and effort oneself has to put
|
||||||
|
in and the trust into the manufacturing companies and their supply chain.
|
||||||
|
|
||||||
|
<div class="text-media-card">
|
||||||
|
<div class="card-text">
|
||||||
|
|
||||||
|
All the editions have something in common: the touch screen user interface and
|
||||||
|
automated system updates. Even at a high level of distrust one can still benefit
|
||||||
|
from the open source software and, equally important, system updates.
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<figure class="card-media screenshot">
|
||||||
|
<img src="/assets/ngui-screenshot.png" alt="nakamochi touchscreen GUI screenshot">
|
||||||
|
<figcaption>nakamochi touchscreen GUI screenshot</figcaption>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
### DIY
|
||||||
|
|
||||||
|
<div class="text-media-card">
|
||||||
|
<div class="card-text">
|
||||||
|
|
||||||
|
The [DIY version](https://git.qcode.ch/nakamochi/3d#diy-version-fff) is designed using
|
||||||
|
only off-the-shelf hardware components and 3D printed parts. It is a running system
|
||||||
|
and you can source and even replace the hardware. Everything is open source and freely
|
||||||
|
accessible for everyone. You can of course buy the whole kit from us to make things easier.
|
||||||
|
Enjoy checking out the source code, CAD designs and schematics. You can tinker here, just
|
||||||
|
be sure that the device still works after that.
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<figure class="card-media bogen">
|
||||||
|
<img src="/assets/diy-assembly.png" alt="DIY version assembly">
|
||||||
|
<figcaption>DIY version assembly</figcaption>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
### DIY+
|
||||||
|
|
||||||
|
<div class="text-media-card">
|
||||||
|
<div class="card-text">
|
||||||
|
|
||||||
|
If you want to profit from some product engineering but still want to use
|
||||||
|
off-the-shelf components, we recommend the DIY+ version. As the name tells,
|
||||||
|
the "plus" in this version improves some characteristics of the device.
|
||||||
|
|
||||||
|
For example, the previous DIY version may suffer from overheating in certain
|
||||||
|
conditions. This edition improves heat dissipation while keeping the device
|
||||||
|
completely silent, fanless.
|
||||||
|
|
||||||
|
However, this edition still requires technical knowledge in CNC machining
|
||||||
|
and 3D printing.
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="card-media">
|
||||||
|
<figure class="bogen">
|
||||||
|
<img src="/assets/diyplus-assembly.png" alt="DIY+ version assembly">
|
||||||
|
<figcaption>DIY+ version assembly</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure>
|
||||||
|
<img src="/assets/ir1166.jpg" alt="DIY+ heat dissipation">
|
||||||
|
<figcaption>DIY+ heat dissipation during initial block download</figcaption>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
### PRO
|
||||||
|
|
||||||
|
<div class="text-media-card">
|
||||||
|
<div class="card-text">
|
||||||
|
|
||||||
|
If you are mostly interested in the freedom of the Bitcoin Standard, helping
|
||||||
|
the Bitcon network to remain decentralized, and want a device that just works
|
||||||
|
without a DIY-like technical knowledge in hardware design and software engineering,
|
||||||
|
the PRO edition is the one for you.
|
||||||
|
|
||||||
|
We are taking all the knowledge and learnings from the DIY versions and designing
|
||||||
|
most of the parts ourselves here: from mechanical parts and enclosure to PCBs for
|
||||||
|
an optimal device solution where hardware and software work very well together.
|
||||||
|
All of the work is open source.
|
||||||
|
|
||||||
|
The PRO edition is still work-in-progress.
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<figure class="card-media bogen">
|
||||||
|
<img src="/assets/pro-question-mark.png" alt="PRO version in progress">
|
||||||
|
<figcaption>PRO version in progress</figcaption>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
---
|
||||||
|
title: "who we are"
|
||||||
|
---
|
||||||
|
|
||||||
|
<figure class="qlogo"><img src="/assets/qeles-logo.png" alt="qeles AG logo"></figure>
|
||||||
|
|
||||||
|
We as [qeles AG] have many years of experience in manufacturing PCBs and
|
||||||
|
hardware assembly. We want to use this knowledge to start a bottom up
|
||||||
|
approach to a concept that has mainly moved in the software world. Designing
|
||||||
|
and manufacturing a secure device, starting at the hardware level, allows
|
||||||
|
us to keep a large part of the supply chain and the manufacturing as secure
|
||||||
|
as possible in an open source device.
|
||||||
|
|
||||||
|
Knowing the manufacturing processes, bringing a portfolio of products to the
|
||||||
|
market to cater for all freedom and contribution levels and assuring security,
|
||||||
|
we believe we can offer a product for many participants.
|
||||||
|
|
||||||
|
We value privacy and security. We will use our knowledge in this field to help
|
||||||
|
people in achieving complete financial sovereignty and independence.
|
||||||
|
|
||||||
|
[qeles AG]: https://qeles.ch/
|
||||||
@ -0,0 +1,56 @@
|
|||||||
|
---
|
||||||
|
title: "design and code sources"
|
||||||
|
---
|
||||||
|
|
||||||
|
All the designs and software source code are located on our self-hosted
|
||||||
|
git repositories at [git.qcode.ch/nakamochi/](https://git.qcode.ch/nakamochi/).
|
||||||
|
We also mirror them on GitHub at [github.com/nakamochi/](https://github.com/nakamochi/)
|
||||||
|
for redundancy, broader awareness and to ease contributions.
|
||||||
|
|
||||||
|
Our self-hosted git repositories accept issues and code changes only from
|
||||||
|
existing accounts, and creating new accounts feature is disabled: we'd like
|
||||||
|
to avoid potential abuse. Nonetheless, we will happily take in any suggestions
|
||||||
|
on the GitHub mirrors.
|
||||||
|
|
||||||
|
The following are the main repositories where the development is done.
|
||||||
|
|
||||||
|
## NDG
|
||||||
|
|
||||||
|
Nakamochi daemon and GUI, the main software part. It is composed of two layers:
|
||||||
|
a background daemon and a touch-capable GUI interface.
|
||||||
|
|
||||||
|
- repository: [git.qcode.ch/nakamochi/ndg](https://git.qcode.ch/nakamochi/ndg)
|
||||||
|
- mirror: [github.com/nakamochi/ndg](https://github.com/nakamochi/ndg)
|
||||||
|
|
||||||
|
{{ screenshot(src="/assets/ngui-screenshot.png", caption="nakamochi touchscreen GUI screenshot") }}
|
||||||
|
|
||||||
|
## 3D
|
||||||
|
|
||||||
|
CAD designs of enclosures and other related mechanical parts.
|
||||||
|
|
||||||
|
- repository: [git.qcode.ch/nakamochi/3d](https://git.qcode.ch/nakamochi/3d)
|
||||||
|
- mirror: [github.com/nakamochi/3d](https://github.com/nakamochi/3d)
|
||||||
|
|
||||||
|
{{ screenshot(src="/assets/git-3d-screenshot.png", caption="nakamochi touchscreen GUI screenshot") }}
|
||||||
|
|
||||||
|
## sysupdates
|
||||||
|
|
||||||
|
Operating system tweaks and automated updates. All nodes fetch and install updates
|
||||||
|
from this repository.
|
||||||
|
|
||||||
|
- repository: [git.qcode.ch/nakamochi/sysupdates](https://git.qcode.ch/nakamochi/sysupdates)
|
||||||
|
- mirror: [github.com/nakamochi/sysupdates](https://github.com/nakamochi/sysupdates)
|
||||||
|
|
||||||
|
## PCB
|
||||||
|
|
||||||
|
<div class="text-media-card">
|
||||||
|
<div class="card-text">
|
||||||
|
|
||||||
|
PRO version custom board hardware designs. This is still upcoming. We will add links here
|
||||||
|
as soon as the repository is live.
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<figure class="card-media">
|
||||||
|
<img src="/assets/pro-question-mark.png" alt="PRO version in progress">
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,65 @@
|
|||||||
|
// navy-grey
|
||||||
|
$grey-hue: 205 !default;
|
||||||
|
$grey-50: hsl($grey-hue, 20%, 94%) !default;
|
||||||
|
$grey-100: hsl($grey-hue, 18%, 86%) !default;
|
||||||
|
$grey-200: hsl($grey-hue, 16%, 77%) !default;
|
||||||
|
$grey-300: hsl($grey-hue, 14%, 68%) !default;
|
||||||
|
$grey-400: hsl($grey-hue, 12%, 59%) !default;
|
||||||
|
$grey-500: hsl($grey-hue, 10%, 50%) !default;
|
||||||
|
$grey-600: hsl($grey-hue, 15%, 41%) !default;
|
||||||
|
$grey-700: hsl($grey-hue, 20%, 32%) !default;
|
||||||
|
$grey-800: hsl($grey-hue, 25%, 23%) !default;
|
||||||
|
$grey-900: hsl($grey-hue, 30%, 15%) !default;
|
||||||
|
|
||||||
|
// light blue
|
||||||
|
$primary-hue: 195 !default;
|
||||||
|
$primary-50: hsl($primary-hue, 90%, 94%) !default;
|
||||||
|
$primary-100: hsl($primary-hue, 88%, 86%) !default;
|
||||||
|
$primary-200: hsl($primary-hue, 86%, 77%) !default;
|
||||||
|
$primary-300: hsl($primary-hue, 84%, 68%) !default;
|
||||||
|
$primary-400: hsl($primary-hue, 82%, 59%) !default;
|
||||||
|
$primary-500: hsl($primary-hue, 80%, 50%) !default;
|
||||||
|
$primary-600: hsl($primary-hue, 85%, 41%) !default;
|
||||||
|
$primary-700: hsl($primary-hue, 90%, 32%) !default;
|
||||||
|
$primary-800: hsl($primary-hue, 95%, 23%) !default;
|
||||||
|
$primary-900: hsl($primary-hue, 100%, 15%) !default;
|
||||||
|
|
||||||
|
// black & white
|
||||||
|
$black: #000 !default;
|
||||||
|
$white: #fff !default;
|
||||||
|
|
||||||
|
// amber
|
||||||
|
$amber-50: #fff8e1 !default;
|
||||||
|
$amber-100: #ffecb3 !default;
|
||||||
|
$amber-200: #ffe082 !default;
|
||||||
|
$amber-300: #ffd54f !default;
|
||||||
|
$amber-400: #ffca28 !default;
|
||||||
|
$amber-500: #ffc107 !default;
|
||||||
|
$amber-600: #ffb300 !default;
|
||||||
|
$amber-700: #ffa000 !default;
|
||||||
|
$amber-800: #ff8f00 !default;
|
||||||
|
$amber-900: #ff6f00 !default;
|
||||||
|
|
||||||
|
// green
|
||||||
|
$green-50: #e8f5e9 !default;
|
||||||
|
$green-100: #c8e6c9 !default;
|
||||||
|
$green-200: #a5d6a7 !default;
|
||||||
|
$green-300: #81c784 !default;
|
||||||
|
$green-400: #66bb6a !default;
|
||||||
|
$green-500: #4caf50 !default;
|
||||||
|
$green-600: #43a047 !default;
|
||||||
|
$green-700: #388e3c !default;
|
||||||
|
$green-800: #2e7d32 !default;
|
||||||
|
$green-900: #1b5e20 !default;
|
||||||
|
|
||||||
|
// red
|
||||||
|
$red-50: #ffebee !default;
|
||||||
|
$red-100: #ffcdd2 !default;
|
||||||
|
$red-200: #ef9a9a !default;
|
||||||
|
$red-300: #e57373 !default;
|
||||||
|
$red-400: #ef5350 !default;
|
||||||
|
$red-500: #f44336 !default;
|
||||||
|
$red-600: #e53935 !default;
|
||||||
|
$red-700: #d32f2f !default;
|
||||||
|
$red-800: #c62828 !default;
|
||||||
|
$red-900: #b71c1c !default;
|
||||||
@ -0,0 +1,188 @@
|
|||||||
|
@import "_pico/variables"; // for $breakpoints
|
||||||
|
@import "colors";
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "courier prime code";
|
||||||
|
src: url("/assets/courierprimecode.woff2") format('woff2'),
|
||||||
|
url("/assets/courierprimecode.woff") format('woff');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: map-get($breakpoints, "md")) and (prefers-color-scheme: light) {
|
||||||
|
.bg-landing {
|
||||||
|
background-image: url("/assets/bg-landing-light.svg");
|
||||||
|
background-size: contain;
|
||||||
|
background-position: top;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: map-get($breakpoints, "md")) and (prefers-color-scheme: dark) {
|
||||||
|
.bg-landing {
|
||||||
|
background-image: url("/assets/bg-landing-dark.svg");
|
||||||
|
background-size: contain;
|
||||||
|
background-position: top;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*****************************
|
||||||
|
* language translation picker
|
||||||
|
*/
|
||||||
|
|
||||||
|
.langpicker {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.translist {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.translist > li {
|
||||||
|
font-size: 0.75em;
|
||||||
|
color: var(--muted-color);
|
||||||
|
display: inline-block;
|
||||||
|
padding: var(--nav-element-spacing-vertical) var(--nav-element-spacing-horizontal);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*************************
|
||||||
|
* main logo in the header
|
||||||
|
*/
|
||||||
|
|
||||||
|
.logonav {
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.logonav > li {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo img {
|
||||||
|
width: 64px;
|
||||||
|
min-width: 64px;
|
||||||
|
}
|
||||||
|
.logo.landing img {
|
||||||
|
width: 128px;
|
||||||
|
min-width: 128px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: map-get($breakpoints, "sm")) {
|
||||||
|
.logo-name {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mainnav {
|
||||||
|
align-items: flex-start;
|
||||||
|
align-content: flex-start;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
column-gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.mainnav > li {
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* other large-sized logos in the <main> content */
|
||||||
|
@media (min-width: map-get($breakpoints, "md")) {
|
||||||
|
.qlogo {
|
||||||
|
max-width: 500px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/********************************************
|
||||||
|
* random styles used anywhere and everywhere
|
||||||
|
*/
|
||||||
|
.top {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* top corners rounded; typically applied to images to resemble a bit
|
||||||
|
* nakamochi enclosure shape */
|
||||||
|
.bogen {
|
||||||
|
border-radius: 10px 10px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* useful for notes in footer */
|
||||||
|
.muted {
|
||||||
|
color: var(--muted-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
figure.screenshot > img, img.screenshot {
|
||||||
|
border: 1px solid $grey-700;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**********************************************************************
|
||||||
|
* media cards have text and images or videos on a side, left or right.
|
||||||
|
* on small screens, the flow is typically in a column.
|
||||||
|
* on larger screens, media is displayed on a side along the text.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* text first, media on the right or the opposite */
|
||||||
|
.text-media-card {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* place media captions closer and smaller than usual */
|
||||||
|
.card-media figcaption {
|
||||||
|
font-size: 0.75em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* align in-text header with the image part of the card */
|
||||||
|
.card-text h2:first-child,
|
||||||
|
.card-text h3:first-child,
|
||||||
|
.card-text h4:first-child {
|
||||||
|
line-height: 1;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* breakpoint at which media is placed on a side along the text. */
|
||||||
|
@media (min-width: map-get($breakpoints, "md")) {
|
||||||
|
.text-media-card {
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
column-gap: 10px;
|
||||||
|
}
|
||||||
|
.text-media-card > .card-text {
|
||||||
|
flex-grow: 1
|
||||||
|
}
|
||||||
|
.text-media-card > .card-media {
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: map-get($breakpoints, "lg")) {
|
||||||
|
.text-media-card {
|
||||||
|
column-gap: 20px;
|
||||||
|
}
|
||||||
|
.text-media-card > .card-media {
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: map-get($breakpoints, "xl")) {
|
||||||
|
.text-media-card > .card-media {
|
||||||
|
width: 350px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*************************************
|
||||||
|
* footer and other end-of-page styles
|
||||||
|
*/
|
||||||
|
footer {
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer nav [role=icon] {
|
||||||
|
width: 32px;
|
||||||
|
}
|
||||||
@ -0,0 +1,57 @@
|
|||||||
|
@import "_pico/variables";
|
||||||
|
@import "colors";
|
||||||
|
|
||||||
|
// commons styles
|
||||||
|
@import "picostyle";
|
||||||
|
|
||||||
|
// light theme by default; can be forced with data-theme="light"
|
||||||
|
@import "picolight";
|
||||||
|
|
||||||
|
// dark theme; automatically enabled if user has dark mode enabled
|
||||||
|
@import "picodark";
|
||||||
|
@media only screen and (prefers-color-scheme: dark) {
|
||||||
|
:root:not([data-theme]) {
|
||||||
|
@include dark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// dark theme forced with with data-theme="dark"
|
||||||
|
[data-theme="dark"] {
|
||||||
|
@include dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
// accent-color
|
||||||
|
progress,
|
||||||
|
[type="checkbox"],
|
||||||
|
[type="radio"],
|
||||||
|
[type="range"] {
|
||||||
|
accent-color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
@import "_pico/layout/document"; // html
|
||||||
|
@import "_pico/layout/sectioning"; // body, header, main, footer
|
||||||
|
@import "_pico/layout/container"; // .container, .container-fluid
|
||||||
|
@import "_pico/layout/section"; // section
|
||||||
|
@import "_pico/layout/grid"; // .grid
|
||||||
|
@import "_pico/layout/scroller"; // figure
|
||||||
|
|
||||||
|
@import "_pico/content/typography"; // a, headings, p, ul, blockquote, ...
|
||||||
|
@import "_pico/content/embedded"; // audio, canvas, iframe, img, svg, video
|
||||||
|
@import "_pico/content/button"; // button, a[role=button], type=button, type=submit ...
|
||||||
|
//@import "_pico/content/form"; // input, select, textarea, label, fieldset, legend
|
||||||
|
//@import "_pico/content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch
|
||||||
|
//@import "_pico/content/form-alt-input-types"; // type=color, type=date, type=file, type=search, ...
|
||||||
|
@import "_pico/content/table"; // table, tr, td, ...
|
||||||
|
@import "_pico/content/code"; // pre, code, ...
|
||||||
|
@import "_pico/content/miscs"; // hr, template, [hidden], dialog, canvas
|
||||||
|
|
||||||
|
@import "_pico/components/accordion"; // details, summary
|
||||||
|
@import "_pico/components/card"; // article
|
||||||
|
//@import "_pico/components/modal"; // dialog
|
||||||
|
@import "_pico/components/nav"; // nav
|
||||||
|
//@import "_pico/components/progress"; // progress
|
||||||
|
//@import "_pico/components/dropdown"; // dropdown
|
||||||
|
|
||||||
|
@import "_pico/utilities/loading"; // aria-busy=true
|
||||||
|
@import "_pico/utilities/tooltip"; // data-tooltip
|
||||||
|
@import "_pico/utilities/accessibility"; // -ms-touch-action, aria-*
|
||||||
|
@import "_pico/utilities/reduce-motion"; // prefers-reduced-motion
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2019-2023 Pico
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
// Output color in RGB format
|
||||||
|
@function to-rgb($color) {
|
||||||
|
@return unquote("rgb(#{red($color)}, #{green($color)}, #{blue($color)})");
|
||||||
|
}
|
||||||
@ -0,0 +1,116 @@
|
|||||||
|
/**
|
||||||
|
* Accordion (<details>)
|
||||||
|
*/
|
||||||
|
|
||||||
|
details {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: var(--spacing);
|
||||||
|
padding-bottom: var(--spacing);
|
||||||
|
border-bottom: var(--border-width) solid var(--accordion-border-color);
|
||||||
|
|
||||||
|
summary {
|
||||||
|
line-height: 1rem;
|
||||||
|
list-style-type: none;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:not([role]) {
|
||||||
|
color: var(--accordion-close-summary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $enable-transitions {
|
||||||
|
transition: color var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Reset marker
|
||||||
|
&::-webkit-details-marker {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::marker {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-moz-list-bullet {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Marker
|
||||||
|
&::after {
|
||||||
|
display: block;
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
|
||||||
|
float: right;
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
background-image: var(--icon-chevron);
|
||||||
|
background-position: right center;
|
||||||
|
background-size: 1rem auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
content: "";
|
||||||
|
|
||||||
|
@if $enable-transitions {
|
||||||
|
transition: transform var(--transition);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
|
||||||
|
&:not([role="button"]) {
|
||||||
|
color: var(--accordion-active-summary-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Type button
|
||||||
|
&[role="button"] {
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
// Marker
|
||||||
|
&::after {
|
||||||
|
height: calc(1rem * var(--line-height, 1.5));
|
||||||
|
background-image: var(--icon-chevron-button);
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $enable-classes {
|
||||||
|
// .contrast
|
||||||
|
&:not(.outline).contrast {
|
||||||
|
// Marker
|
||||||
|
&::after {
|
||||||
|
background-image: var(--icon-chevron-button-inverse);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Open
|
||||||
|
&[open] {
|
||||||
|
> summary {
|
||||||
|
margin-bottom: calc(var(--spacing));
|
||||||
|
|
||||||
|
&:not([role]) {
|
||||||
|
&:not(:focus) {
|
||||||
|
color: var(--accordion-open-summary-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
transform: rotate(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[dir="rtl"] {
|
||||||
|
details {
|
||||||
|
summary {
|
||||||
|
text-align: right;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
float: left;
|
||||||
|
background-position: left center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
/**
|
||||||
|
* Card (<article>)
|
||||||
|
*/
|
||||||
|
|
||||||
|
article {
|
||||||
|
margin: var(--block-spacing-vertical) 0;
|
||||||
|
padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
background: var(--card-background-color);
|
||||||
|
box-shadow: var(--card-box-shadow);
|
||||||
|
|
||||||
|
> header,
|
||||||
|
> footer {
|
||||||
|
margin-right: calc(var(--block-spacing-horizontal) * -1);
|
||||||
|
margin-left: calc(var(--block-spacing-horizontal) * -1);
|
||||||
|
padding: calc(var(--block-spacing-vertical) * 0.66)
|
||||||
|
var(--block-spacing-horizontal);
|
||||||
|
background-color: var(--card-sectionning-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
> header {
|
||||||
|
margin-top: calc(var(--block-spacing-vertical) * -1);
|
||||||
|
margin-bottom: var(--block-spacing-vertical);
|
||||||
|
border-bottom: var(--border-width) solid var(--card-border-color);
|
||||||
|
border-top-right-radius: var(--border-radius);
|
||||||
|
border-top-left-radius: var(--border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
> footer {
|
||||||
|
margin-top: var(--block-spacing-vertical);
|
||||||
|
margin-bottom: calc(var(--block-spacing-vertical) * -1);
|
||||||
|
border-top: var(--border-width) solid var(--card-border-color);
|
||||||
|
border-bottom-right-radius: var(--border-radius);
|
||||||
|
border-bottom-left-radius: var(--border-radius);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,213 @@
|
|||||||
|
/**
|
||||||
|
* Dropdown ([role="list"])
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Menu
|
||||||
|
details[role="list"],
|
||||||
|
li[role="list"] {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
details[role="list"] summary + ul,
|
||||||
|
li[role="list"] > ul {
|
||||||
|
display: flex;
|
||||||
|
z-index: 99;
|
||||||
|
position: absolute;
|
||||||
|
top: auto;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
flex-direction: column;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: var(--border-width) solid var(--dropdown-border-color);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
background-color: var(--dropdown-background-color);
|
||||||
|
box-shadow: var(--card-box-shadow);
|
||||||
|
color: var(--dropdown-color);
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
li {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding: calc(var(--form-element-spacing-vertical) * 0.5)
|
||||||
|
var(--form-element-spacing-horizontal);
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
&:first-of-type {
|
||||||
|
margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-of-type {
|
||||||
|
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
margin: calc(var(--form-element-spacing-vertical) * -0.5)
|
||||||
|
calc(var(--form-element-spacing-horizontal) * -1);
|
||||||
|
padding: calc(var(--form-element-spacing-vertical) * 0.5)
|
||||||
|
var(--form-element-spacing-horizontal);
|
||||||
|
overflow: hidden;
|
||||||
|
color: var(--dropdown-color);
|
||||||
|
text-decoration: none;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--dropdown-hover-background-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Marker
|
||||||
|
details[role="list"] summary,
|
||||||
|
li[role="list"] > a {
|
||||||
|
&::after {
|
||||||
|
display: block;
|
||||||
|
width: 1rem;
|
||||||
|
height: calc(1rem * var(--line-height, 1.5));
|
||||||
|
margin-inline-start: 0.5rem;
|
||||||
|
float: right;
|
||||||
|
transform: rotate(0deg);
|
||||||
|
background-position: right center;
|
||||||
|
background-size: 1rem auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Global dropdown only
|
||||||
|
details[role="list"] {
|
||||||
|
padding: 0;
|
||||||
|
border-bottom: none;
|
||||||
|
|
||||||
|
// Style <summary> as <select>
|
||||||
|
summary {
|
||||||
|
margin-bottom: 0;
|
||||||
|
|
||||||
|
&:not([role]) {
|
||||||
|
height: calc(
|
||||||
|
1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 +
|
||||||
|
var(--border-width) * 2
|
||||||
|
);
|
||||||
|
padding: var(--form-element-spacing-vertical)
|
||||||
|
var(--form-element-spacing-horizontal);
|
||||||
|
border: var(--border-width) solid var(--form-element-border-color);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
background-color: var(--form-element-background-color);
|
||||||
|
color: var(--form-element-placeholder-color);
|
||||||
|
line-height: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
@if $enable-transitions {
|
||||||
|
transition: background-color var(--transition),
|
||||||
|
border-color var(--transition), color var(--transition),
|
||||||
|
box-shadow var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active,
|
||||||
|
&:focus {
|
||||||
|
border-color: var(--form-element-active-border-color);
|
||||||
|
background-color: var(--form-element-active-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Close for details[role="list"]
|
||||||
|
&[open] summary {
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
display: block;
|
||||||
|
z-index: 1;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
background: none;
|
||||||
|
content: "";
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// All Dropdowns inside <nav>
|
||||||
|
nav details[role="list"] summary,
|
||||||
|
nav li[role="list"] a {
|
||||||
|
display: flex;
|
||||||
|
direction: ltr;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav details[role="list"] summary + ul,
|
||||||
|
nav li[role="list"] > ul {
|
||||||
|
min-width: fit-content;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
|
||||||
|
li a {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dropdowns inside <nav> as nested <details>
|
||||||
|
nav details[role="list"] {
|
||||||
|
summary,
|
||||||
|
summary:not([role]) {
|
||||||
|
height: auto;
|
||||||
|
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
|
||||||
|
}
|
||||||
|
|
||||||
|
&[open] summary {
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
summary + ul {
|
||||||
|
margin-top: var(--outline-width);
|
||||||
|
margin-inline-start: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
summary[role="link"] {
|
||||||
|
margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
|
||||||
|
line-height: var(--line-height);
|
||||||
|
|
||||||
|
+ ul {
|
||||||
|
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
|
||||||
|
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dropdowns inside a <nav> without using <details>
|
||||||
|
li[role="list"] {
|
||||||
|
// Open on hover (for mobile)
|
||||||
|
// or on active/focus (for keyboard navigation)
|
||||||
|
&:hover > ul,
|
||||||
|
a:active ~ ul,
|
||||||
|
a:focus ~ ul {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
> ul {
|
||||||
|
display: none;
|
||||||
|
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
|
||||||
|
margin-inline-start: calc(
|
||||||
|
var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
> a::after {
|
||||||
|
background-image: var(--icon-chevron);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
label > details[role="list"] {
|
||||||
|
margin-top: calc(var(--spacing) * .25);
|
||||||
|
margin-bottom: var(--spacing);
|
||||||
|
}
|
||||||
@ -0,0 +1,169 @@
|
|||||||
|
/**
|
||||||
|
* Modal (<dialog>)
|
||||||
|
*/
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--scrollbar-width: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
dialog {
|
||||||
|
display: flex;
|
||||||
|
z-index: 999;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: inherit;
|
||||||
|
min-width: 100%;
|
||||||
|
height: inherit;
|
||||||
|
min-height: 100%;
|
||||||
|
padding: var(--spacing);
|
||||||
|
border: 0;
|
||||||
|
backdrop-filter: var(--modal-overlay-backdrop-filter);
|
||||||
|
background-color: var(--modal-overlay-background-color);
|
||||||
|
color: var(--color);
|
||||||
|
|
||||||
|
// Content
|
||||||
|
article {
|
||||||
|
max-height: calc(100vh - var(--spacing) * 2);
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
@if map-get($breakpoints, "sm") {
|
||||||
|
@media (min-width: map-get($breakpoints, "sm")) {
|
||||||
|
max-width: map-get($viewports, "sm");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@if map-get($breakpoints, "md") {
|
||||||
|
@media (min-width: map-get($breakpoints, "md")) {
|
||||||
|
max-width: map-get($viewports, "md");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> header,
|
||||||
|
> footer {
|
||||||
|
padding: calc(var(--block-spacing-vertical) * 0.5)
|
||||||
|
var(--block-spacing-horizontal);
|
||||||
|
}
|
||||||
|
|
||||||
|
> header {
|
||||||
|
.close {
|
||||||
|
margin: 0;
|
||||||
|
margin-left: var(--spacing);
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> footer {
|
||||||
|
text-align: right;
|
||||||
|
|
||||||
|
[role="button"] {
|
||||||
|
margin-bottom: 0;
|
||||||
|
|
||||||
|
&:not(:first-of-type) {
|
||||||
|
margin-left: calc(var(--spacing) * 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
&:last-of-type {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Close icon
|
||||||
|
@if $enable-classes {
|
||||||
|
.close {
|
||||||
|
display: block;
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
margin-top: calc(var(--block-spacing-vertical) * -0.5);
|
||||||
|
margin-bottom: var(--typography-spacing-vertical);
|
||||||
|
margin-left: auto;
|
||||||
|
background-image: var(--icon-close);
|
||||||
|
background-position: center;
|
||||||
|
background-size: auto 1rem;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
opacity: 0.5;
|
||||||
|
|
||||||
|
@if $enable-transitions {
|
||||||
|
transition: opacity var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:is([aria-current], :hover, :active, :focus) {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Closed state
|
||||||
|
&:not([open]),
|
||||||
|
&[open="false"] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Utilities
|
||||||
|
@if $enable-classes {
|
||||||
|
.modal-is-open {
|
||||||
|
padding-right: var(--scrollbar-width, 0px);
|
||||||
|
overflow: hidden;
|
||||||
|
pointer-events: none;
|
||||||
|
touch-action: none;
|
||||||
|
|
||||||
|
dialog {
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Animations
|
||||||
|
@if ($enable-classes and $enable-transitions) {
|
||||||
|
$animation-duration: 0.2s;
|
||||||
|
|
||||||
|
:where(.modal-is-opening, .modal-is-closing) {
|
||||||
|
dialog,
|
||||||
|
dialog > article {
|
||||||
|
animation-duration: $animation-duration;
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
dialog {
|
||||||
|
animation-duration: ($animation-duration * 4);
|
||||||
|
animation-name: modal-overlay ;
|
||||||
|
|
||||||
|
> article {
|
||||||
|
animation-delay: $animation-duration;
|
||||||
|
animation-name: modal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-is-closing {
|
||||||
|
dialog,
|
||||||
|
dialog > article {
|
||||||
|
animation-delay: 0s;
|
||||||
|
animation-direction: reverse;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes modal-overlay {
|
||||||
|
from {
|
||||||
|
backdrop-filter: none;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes modal {
|
||||||
|
from {
|
||||||
|
transform: translateY(-100%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,272 @@
|
|||||||
|
/**
|
||||||
|
* Form elements
|
||||||
|
* Alternatives input types (Not Checkboxes & Radios)
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Color
|
||||||
|
[type="color"] {
|
||||||
|
// Wrapper
|
||||||
|
@mixin color-wrapper {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-color-swatch-wrapper {
|
||||||
|
@include color-wrapper;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-moz-focus-inner {
|
||||||
|
@include color-wrapper;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Swatch
|
||||||
|
@mixin color-swatch {
|
||||||
|
border: 0;
|
||||||
|
border-radius: calc(var(--border-radius) * 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-color-swatch {
|
||||||
|
@include color-swatch;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-moz-color-swatch {
|
||||||
|
@include color-swatch;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Date & Time
|
||||||
|
// :not() are needed to add Specificity and avoid !important on padding
|
||||||
|
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
||||||
|
&:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
|
||||||
|
--icon-position: 0.75rem;
|
||||||
|
--icon-width: 1rem;
|
||||||
|
padding-right: calc(var(--icon-width) + var(--icon-position));
|
||||||
|
background-image: var(--icon-date);
|
||||||
|
background-position: center right var(--icon-position);
|
||||||
|
background-size: var(--icon-width) auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Time
|
||||||
|
&[type="time"] {
|
||||||
|
background-image: var(--icon-time);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Calendar picker
|
||||||
|
[type="date"],
|
||||||
|
[type="datetime-local"],
|
||||||
|
[type="month"],
|
||||||
|
[type="time"],
|
||||||
|
[type="week"] {
|
||||||
|
&::-webkit-calendar-picker-indicator {
|
||||||
|
width: var(--icon-width);
|
||||||
|
margin-right: calc(var(--icon-width) * -1);
|
||||||
|
margin-left: var(--icon-position);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[dir="rtl"]
|
||||||
|
:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
// File
|
||||||
|
[type="file"] {
|
||||||
|
--color: var(--muted-color);
|
||||||
|
padding: calc(var(--form-element-spacing-vertical) * 0.5) 0;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
background: none;
|
||||||
|
|
||||||
|
@mixin file-selector-button {
|
||||||
|
--background-color: var(--secondary);
|
||||||
|
--border-color: var(--secondary);
|
||||||
|
--color: var(--secondary-inverse);
|
||||||
|
margin-right: calc(var(--spacing) / 2);
|
||||||
|
margin-left: 0;
|
||||||
|
margin-inline-start: 0;
|
||||||
|
margin-inline-end: calc(var(--spacing) / 2);
|
||||||
|
padding: calc(var(--form-element-spacing-vertical) * 0.5)
|
||||||
|
calc(var(--form-element-spacing-horizontal) * 0.5);
|
||||||
|
border: var(--border-width) solid var(--border-color);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
outline: none;
|
||||||
|
background-color: var(--background-color);
|
||||||
|
box-shadow: var(--box-shadow);
|
||||||
|
color: var(--color);
|
||||||
|
font-weight: var(--font-weight);
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: var(--line-height);
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
@if $enable-transitions {
|
||||||
|
transition: background-color var(--transition),
|
||||||
|
border-color var(--transition), color var(--transition),
|
||||||
|
box-shadow var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:is(:hover, :active, :focus) {
|
||||||
|
--background-color: var(--secondary-hover);
|
||||||
|
--border-color: var(--secondary-hover);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&::file-selector-button {
|
||||||
|
@include file-selector-button;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-file-upload-button {
|
||||||
|
@include file-selector-button;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-ms-browse {
|
||||||
|
@include file-selector-button;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Range
|
||||||
|
[type="range"] {
|
||||||
|
// Config
|
||||||
|
$height-track: 0.25rem;
|
||||||
|
$height-thumb: 1.25rem;
|
||||||
|
$border-thumb: 2px;
|
||||||
|
|
||||||
|
// Styles
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
width: 100%;
|
||||||
|
height: $height-thumb;
|
||||||
|
background: none;
|
||||||
|
|
||||||
|
// Slider Track
|
||||||
|
@mixin slider-track {
|
||||||
|
width: 100%;
|
||||||
|
height: $height-track;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
background-color: var(--range-border-color);
|
||||||
|
|
||||||
|
@if $enable-transitions {
|
||||||
|
transition: background-color var(--transition),
|
||||||
|
box-shadow var(--transition);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-slider-runnable-track {
|
||||||
|
@include slider-track;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-moz-range-track {
|
||||||
|
@include slider-track;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-ms-track {
|
||||||
|
@include slider-track;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Slider Thumb
|
||||||
|
@mixin slider-thumb {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
width: $height-thumb;
|
||||||
|
height: $height-thumb;
|
||||||
|
margin-top: #{(-($height-thumb * 0.5) + ($height-track * 0.5))};
|
||||||
|
border: $border-thumb solid var(--range-thumb-border-color);
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: var(--range-thumb-color);
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
@if $enable-transitions {
|
||||||
|
transition: background-color var(--transition),
|
||||||
|
transform var(--transition);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&::-webkit-slider-thumb {
|
||||||
|
@include slider-thumb;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-moz-range-thumb {
|
||||||
|
@include slider-thumb;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-ms-thumb {
|
||||||
|
@include slider-thumb;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
--range-border-color: var(--range-active-border-color);
|
||||||
|
--range-thumb-color: var(--range-thumb-hover-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
--range-thumb-color: var(--range-thumb-active-color);
|
||||||
|
|
||||||
|
// Slider Thumb
|
||||||
|
&::-webkit-slider-thumb {
|
||||||
|
transform: scale(1.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-moz-range-thumb {
|
||||||
|
transform: scale(1.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-ms-thumb {
|
||||||
|
transform: scale(1.25);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Search
|
||||||
|
// :not() are needed to add Specificity and avoid !important on padding
|
||||||
|
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
||||||
|
&[type="search"] {
|
||||||
|
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
|
||||||
|
border-radius: 5rem;
|
||||||
|
background-image: var(--icon-search);
|
||||||
|
background-position: center left 1.125rem;
|
||||||
|
background-size: 1rem auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
|
&[aria-invalid] {
|
||||||
|
@if $enable-important {
|
||||||
|
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
|
||||||
|
}
|
||||||
|
@else {
|
||||||
|
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
|
||||||
|
}
|
||||||
|
background-position: center left 1.125rem, center right 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&[aria-invalid="false"] {
|
||||||
|
background-image: var(--icon-search), var(--icon-valid);
|
||||||
|
}
|
||||||
|
|
||||||
|
&[aria-invalid="true"] {
|
||||||
|
background-image: var(--icon-search), var(--icon-invalid);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Cancel button
|
||||||
|
[type="search"] {
|
||||||
|
&::-webkit-search-cancel-button {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[dir="rtl"] {
|
||||||
|
:where(input) {
|
||||||
|
&:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
||||||
|
&[type="search"] {
|
||||||
|
background-position: center right 1.125rem;
|
||||||
|
|
||||||
|
&[aria-invalid] {
|
||||||
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,138 @@
|
|||||||
|
/**
|
||||||
|
* Form elements
|
||||||
|
* Checkboxes & Radios
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="checkbox"],
|
||||||
|
[type="radio"] {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
width: 1.25em;
|
||||||
|
height: 1.25em;
|
||||||
|
margin-top: -0.125em;
|
||||||
|
margin-right: 0.375em;
|
||||||
|
margin-left: 0;
|
||||||
|
margin-inline-start: 0;
|
||||||
|
margin-inline-end: 0.375em;
|
||||||
|
border-width: var(--border-width);
|
||||||
|
font-size: inherit;
|
||||||
|
vertical-align: middle;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&::-ms-check {
|
||||||
|
display: none; // unstyle IE checkboxes
|
||||||
|
}
|
||||||
|
|
||||||
|
&:checked,
|
||||||
|
&:checked:active,
|
||||||
|
&:checked:focus {
|
||||||
|
--background-color: var(--primary);
|
||||||
|
--border-color: var(--primary);
|
||||||
|
background-image: var(--icon-checkbox);
|
||||||
|
background-position: center;
|
||||||
|
background-size: 0.75em auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
& ~ label {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 0.375em;
|
||||||
|
margin-bottom: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Checkboxes
|
||||||
|
[type="checkbox"] {
|
||||||
|
&:indeterminate {
|
||||||
|
--background-color: var(--primary);
|
||||||
|
--border-color: var(--primary);
|
||||||
|
background-image: var(--icon-minus);
|
||||||
|
background-position: center;
|
||||||
|
background-size: 0.75em auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Radios
|
||||||
|
[type="radio"] {
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
&:checked,
|
||||||
|
&:checked:active,
|
||||||
|
&:checked:focus {
|
||||||
|
--background-color: var(--primary-inverse);
|
||||||
|
border-width: 0.35em;
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Switchs
|
||||||
|
[type="checkbox"][role="switch"] {
|
||||||
|
--background-color: var(--switch-background-color);
|
||||||
|
--border-color: var(--switch-background-color);
|
||||||
|
--color: var(--switch-color);
|
||||||
|
|
||||||
|
// Config
|
||||||
|
$switch-height: 1.25em;
|
||||||
|
$switch-width: 2.25em;
|
||||||
|
$switch-transition: 0.1s ease-in-out;
|
||||||
|
|
||||||
|
// Styles
|
||||||
|
width: $switch-width;
|
||||||
|
height: $switch-height;
|
||||||
|
border: var(--border-width) solid var(--border-color);
|
||||||
|
border-radius: $switch-height;
|
||||||
|
background-color: var(--background-color);
|
||||||
|
line-height: $switch-height;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
--background-color: var(--switch-background-color);
|
||||||
|
--border-color: var(--switch-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:checked {
|
||||||
|
--background-color: var(--switch-checked-background-color);
|
||||||
|
--border-color: var(--switch-checked-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
display: block;
|
||||||
|
width: calc(#{$switch-height} - (var(--border-width) * 2));
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: var(--color);
|
||||||
|
content: "";
|
||||||
|
|
||||||
|
@if $enable-transitions {
|
||||||
|
transition: margin $switch-transition;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:checked {
|
||||||
|
background-image: none;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
margin-left: calc(#{$switch-width * 0.5} - var(--border-width));
|
||||||
|
margin-inline-start: calc(#{$switch-width * 0.5} - var(--border-width));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Aria-invalid
|
||||||
|
[type="checkbox"],
|
||||||
|
[type="checkbox"]:checked,
|
||||||
|
[type="radio"],
|
||||||
|
[type="radio"]:checked,
|
||||||
|
[type="checkbox"][role="switch"],
|
||||||
|
[type="checkbox"][role="switch"]:checked {
|
||||||
|
|
||||||
|
&[aria-invalid="false"] {
|
||||||
|
--border-color: var(--form-element-valid-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
&[aria-invalid="true"] {
|
||||||
|
--border-color: var(--form-element-invalid-border-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,42 @@
|
|||||||
|
@if ($enable-class-container and $enable-classes) {
|
||||||
|
/**
|
||||||
|
* Container
|
||||||
|
*/
|
||||||
|
|
||||||
|
.container,
|
||||||
|
.container-fluid {
|
||||||
|
width: 100%;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
padding-right: var(--spacing);
|
||||||
|
padding-left: var(--spacing);
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
@if map-get($breakpoints, "sm") {
|
||||||
|
@media (min-width: map-get($breakpoints, "sm")) {
|
||||||
|
max-width: map-get($viewports, "sm");
|
||||||
|
padding-right: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@if map-get($breakpoints, "md") {
|
||||||
|
@media (min-width: map-get($breakpoints, "md")) {
|
||||||
|
max-width: map-get($viewports, "md");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@if map-get($breakpoints, "lg") {
|
||||||
|
@media (min-width: map-get($breakpoints, "lg")) {
|
||||||
|
max-width: map-get($viewports, "lg");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@if map-get($breakpoints, "xl") {
|
||||||
|
@media (min-width: map-get($breakpoints, "xl")) {
|
||||||
|
max-width: map-get($viewports, "xl");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
@if ($enable-classes and $enable-grid) {
|
||||||
|
/**
|
||||||
|
* Grid
|
||||||
|
* Minimal grid system with auto-layout columns
|
||||||
|
*/
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
grid-column-gap: var(--grid-spacing-horizontal);
|
||||||
|
grid-row-gap: var(--grid-spacing-vertical);
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
@if map-get($breakpoints, "lg") {
|
||||||
|
@media (min-width: map-get($breakpoints, "lg")) {
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& > * {
|
||||||
|
min-width: 0; // HACK for childs in overflow
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
/**
|
||||||
|
* Horizontal scroller (<figure>)
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Wrapper to make any content responsive across all viewports
|
||||||
|
figure {
|
||||||
|
display: block;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
overflow-x: auto;
|
||||||
|
|
||||||
|
figcaption {
|
||||||
|
padding: calc(var(--spacing) * 0.5) 0;
|
||||||
|
color: var(--muted-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
/**
|
||||||
|
* Section
|
||||||
|
* Responsive spacings for section
|
||||||
|
*/
|
||||||
|
|
||||||
|
section {
|
||||||
|
margin-bottom: var(--block-spacing-vertical);
|
||||||
|
}
|
||||||
@ -0,0 +1,105 @@
|
|||||||
|
{
|
||||||
|
"name": "@picocss/pico",
|
||||||
|
"version": "1.5.9",
|
||||||
|
"description": "Minimal CSS Framework for semantic HTML",
|
||||||
|
"author": "Lucas Larroche",
|
||||||
|
"main": "css/pico.min.css",
|
||||||
|
"homepage": "https://picocss.com",
|
||||||
|
"license": "MIT",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/picocss/pico.git"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"css",
|
||||||
|
"css-framework",
|
||||||
|
"dark-mode",
|
||||||
|
"dark-theme",
|
||||||
|
"lightweight",
|
||||||
|
"minimal",
|
||||||
|
"minimalist",
|
||||||
|
"minimalistic",
|
||||||
|
"native-html",
|
||||||
|
"scss-framework",
|
||||||
|
"semantic"
|
||||||
|
],
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/picocss/pico/issues"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"watch": "npm-run-all --parallel watch:pico watch:docs:scss watch:docs:html watch:docs:js --silent",
|
||||||
|
"build": "npm-run-all scss:sorter:pico build:pico scss:sorter:docs build:docs:css build:docs:js build:docs:html --silent",
|
||||||
|
|
||||||
|
"build:docs": "npm-run-all --parallel build:docs:css build:docs:js build:docs:html --silent",
|
||||||
|
"build:docs:css": "npm-run-all css:compile:docs css:prefix:docs css:minify:docs --silent",
|
||||||
|
"build:docs:html": "npm-run-all htmlincludes:docs --silent",
|
||||||
|
"build:docs:js": "npm-run-all js:bundle:docs:commons js:bundle:docs:customization js:babel:docs:commons js:babel:docs:customization js:babel:docs:grid js:babel:docs:modal js:minify:docs:commons js:minify:docs:customization js:minify:docs:grid js:minify:docs:modal --silent",
|
||||||
|
"build:pico": "npm-run-all css:compile:pico css:prefix:pico css:minify:pico --silent",
|
||||||
|
|
||||||
|
"css:compile:docs": "sass --style expanded --source-map --embed-sources --no-error-css docs/scss/:docs/css/",
|
||||||
|
"css:compile:pico": "sass --style expanded --source-map --embed-sources --no-error-css scss/:css/",
|
||||||
|
"css:minify:docs": "cleancss -O1 --with-rebase --source-map --source-map-inline-sources --batch --batch-suffix .min docs/css/*.css !docs/css/*.min.css",
|
||||||
|
"css:minify:pico": "cleancss -O1 --with-rebase --source-map --source-map-inline-sources --batch --batch-suffix .min css/*.css css/*/*.css !css/*.min.css !css/*/*.min.css",
|
||||||
|
"css:prefix:docs": "postcss --config css --replace docs/css/*.css !docs/css/*.min.css",
|
||||||
|
"css:prefix:pico": "postcss --config css --replace css/*.css css/*/*.css !css/*.min.css",
|
||||||
|
|
||||||
|
"htmlincludes:docs": "html-includes --src docs/src --dest docs --minify minifyJS=true --quiet",
|
||||||
|
|
||||||
|
"js:babel:docs:commons": "babel docs/js/commons.min.js --out-dir docs/js/ --presets=@babel/preset-env --quiet",
|
||||||
|
"js:babel:docs:customization": "babel docs/js/customization.min.js --out-dir docs/js/ --presets=@babel/preset-env --quiet",
|
||||||
|
"js:babel:docs:grid": "babel docs/js/grid.js --out-file docs/js/grid.min.js --presets=@babel/preset-env --quiet",
|
||||||
|
"js:babel:docs:modal": "babel docs/js/modal.js --out-file docs/js/modal.min.js --presets=@babel/preset-env --quiet",
|
||||||
|
"js:bundle:docs:commons": "rollup docs/js/commons.js --file docs/js/commons.min.js --format iife --silent",
|
||||||
|
"js:bundle:docs:customization": "rollup docs/js/customization.js --file docs/js/customization.min.js --format iife --silent",
|
||||||
|
"js:minify:docs:commons": "uglifyjs docs/js/commons.min.js --compress --mangle --output docs/js/commons.min.js",
|
||||||
|
"js:minify:docs:customization": "uglifyjs docs/js/customization.min.js --compress --mangle --output docs/js/customization.min.js",
|
||||||
|
"js:minify:docs:grid": "uglifyjs docs/js/grid.min.js --compress --mangle --output docs/js/grid.min.js",
|
||||||
|
"js:minify:docs:modal": "uglifyjs docs/js/modal.min.js --compress --mangle --output docs/js/modal.min.js",
|
||||||
|
|
||||||
|
"scss:sorter:docs": "postcss --config scss ./docs/scss/**/*.scss --replace",
|
||||||
|
"scss:sorter:pico": "postcss --config scss ./scss/**/*.scss --replace",
|
||||||
|
|
||||||
|
"prebuild:docs:html": "echo '[@picocss/pico] Create documentation pages'",
|
||||||
|
"prebuild:docs:js": "echo '[@picocss/pico] Bundle and minify documentation .js files'",
|
||||||
|
"precss:compile:docs": "echo '[@picocss/pico] Compile documentation .css file'",
|
||||||
|
"precss:compile:pico": "echo '[@picocss/pico] Compile Pico .css files'",
|
||||||
|
"precss:minify:docs": "echo '[@picocss/pico] Minify documentation .css file'",
|
||||||
|
"precss:minify:pico": "echo '[@picocss/pico] Minify Pico .css files'",
|
||||||
|
"prescss:sorter:docs": "echo '[@picocss/pico] Order documentation .scss properties'",
|
||||||
|
"prescss:sorter:pico": "echo '[@picocss/pico] Order Pico .scss properties'",
|
||||||
|
|
||||||
|
"postbuild:docs:css": "echo '\\033[32m[@picocss/pico] Documentation .css build done\\033[0m'",
|
||||||
|
"postbuild:docs:html": "echo '\\033[32m[@picocss/pico] Documentation pages done\\033[0m'",
|
||||||
|
"postbuild:docs:js": "echo '\\033[32m[@picocss/pico] Documentation .js build done\\033[0m'",
|
||||||
|
"postbuild:pico": "echo '\\033[32m[@picocss/pico] Pico library build done\\033[0m'",
|
||||||
|
|
||||||
|
"watch:docs:html": "nodemon --watch docs/src/ --ext html --exec 'npm run build:docs:html'",
|
||||||
|
"watch:docs:js": "nodemon --watch docs/js/ --ext js --ignore *.min.js --exec 'npm run build:docs:js'",
|
||||||
|
"watch:docs:scss": "nodemon --watch docs/scss/ --ext scss --exec 'npm run build:docs:css'",
|
||||||
|
"watch:pico": "nodemon --watch scss/ --ext scss --exec 'npm run build:pico'"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/cli": "^7.21.0",
|
||||||
|
"@babel/core": "^7.21.4",
|
||||||
|
"@babel/preset-env": "^7.21.4",
|
||||||
|
"autoprefixer": "^10.4.14",
|
||||||
|
"caniuse-lite": "1.0.30001476",
|
||||||
|
"clean-css-cli": "^5.6.2",
|
||||||
|
"css-declaration-sorter": "^6.4.0",
|
||||||
|
"html-includes": "^4.4.1",
|
||||||
|
"nodemon": "^2.0.22",
|
||||||
|
"npm-run-all": "^4.1.5",
|
||||||
|
"postcss": "^8.4.21",
|
||||||
|
"postcss-cli": "^10.1.0",
|
||||||
|
"postcss-scss": "^4.0.6",
|
||||||
|
"rollup": "^3.20.2",
|
||||||
|
"sass": "^1.61.0",
|
||||||
|
"uglify-js": "^3.17.4"
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
">= 0.5%",
|
||||||
|
"last 2 major versions",
|
||||||
|
"not dead",
|
||||||
|
"not ie > 0"
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -0,0 +1,58 @@
|
|||||||
|
/**
|
||||||
|
* Loading ([aria-busy=true])
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
// Cursor
|
||||||
|
[aria-busy="true"] {
|
||||||
|
cursor: progress;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Everyting except form elements
|
||||||
|
[aria-busy="true"]:not(input, select, textarea) {
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
display: inline-block;
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
border: 0.1875em solid currentColor;
|
||||||
|
border-radius: 1em;
|
||||||
|
border-right-color: transparent;
|
||||||
|
content: "";
|
||||||
|
vertical-align: text-bottom;
|
||||||
|
vertical-align: -.125em; // Visual alignment
|
||||||
|
animation: spinner 0.75s linear infinite;
|
||||||
|
opacity: var(--loading-spinner-opacity);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:empty) {
|
||||||
|
&::before {
|
||||||
|
margin-right: calc(var(--spacing) * 0.5);
|
||||||
|
margin-left: 0;
|
||||||
|
margin-inline-start: 0;
|
||||||
|
margin-inline-end: calc(var(--spacing) * 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:empty {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Buttons and links
|
||||||
|
button,
|
||||||
|
input[type="submit"],
|
||||||
|
input[type="button"],
|
||||||
|
input[type="reset"],
|
||||||
|
a {
|
||||||
|
&[aria-busy="true"] {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Animation: rotate
|
||||||
|
@keyframes spinner {
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,278 @@
|
|||||||
|
/**
|
||||||
|
* Tooltip ([data-tooltip])
|
||||||
|
*/
|
||||||
|
|
||||||
|
[data-tooltip] {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:not(a, button, input) {
|
||||||
|
border-bottom: 1px dotted;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: help;
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-placement="top"]::before,
|
||||||
|
&[data-placement="top"]::after,
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
display: block;
|
||||||
|
z-index: 99;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 100%;
|
||||||
|
left: 50%;
|
||||||
|
padding: .25rem .5rem;
|
||||||
|
overflow: hidden;
|
||||||
|
transform: translate(-50%, -.25rem);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
background: var(--tooltip-background-color);
|
||||||
|
content: attr(data-tooltip);
|
||||||
|
color: var(--tooltip-color);
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: var(--font-weight);
|
||||||
|
font-size: .875rem;
|
||||||
|
text-decoration: none;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Caret
|
||||||
|
&[data-placement="top"]::after,
|
||||||
|
&::after {
|
||||||
|
padding: 0;
|
||||||
|
transform: translate(-50%, 0rem);
|
||||||
|
border-top: .3rem solid;
|
||||||
|
border-right: .3rem solid transparent;
|
||||||
|
border-left: .3rem solid transparent;
|
||||||
|
border-radius: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
content: "";
|
||||||
|
color: var(--tooltip-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-placement="bottom"] {
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
top: 100%;
|
||||||
|
bottom: auto;
|
||||||
|
transform: translate(-50%, .25rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after{
|
||||||
|
transform: translate(-50%, -.3rem);
|
||||||
|
border: .3rem solid transparent;
|
||||||
|
border-bottom: .3rem solid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-placement="left"] {
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
top: 50%;
|
||||||
|
right: 100%;
|
||||||
|
bottom: auto;
|
||||||
|
left: auto;
|
||||||
|
transform: translate(-.25rem, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after{
|
||||||
|
transform: translate(.3rem, -50%);
|
||||||
|
border: .3rem solid transparent;
|
||||||
|
border-left: .3rem solid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-placement="right"] {
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
top: 50%;
|
||||||
|
right: auto;
|
||||||
|
bottom: auto;
|
||||||
|
left: 100%;
|
||||||
|
transform: translate(.25rem, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after{
|
||||||
|
transform: translate(-.3rem, -50%);
|
||||||
|
border: .3rem solid transparent;
|
||||||
|
border-right: .3rem solid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Display
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@if $enable-transitions {
|
||||||
|
|
||||||
|
// Animations, excluding touch devices
|
||||||
|
@media (hover: hover) and (pointer: fine) {
|
||||||
|
&[data-placement="bottom"]:focus,
|
||||||
|
&[data-placement="bottom"]:hover
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
animation-duration: .2s;
|
||||||
|
animation-name: tooltip-slide-top;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
animation-name: tooltip-caret-slide-top;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-placement="bottom"] {
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
animation-duration: .2s;
|
||||||
|
animation-name: tooltip-slide-bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
animation-name: tooltip-caret-slide-bottom;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-placement="left"] {
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
animation-duration: .2s;
|
||||||
|
animation-name: tooltip-slide-left;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
animation-name: tooltip-caret-slide-left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-placement="right"] {
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
animation-duration: .2s;
|
||||||
|
animation-name: tooltip-slide-right;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
animation-name: tooltip-caret-slide-right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes tooltip-slide-top {
|
||||||
|
from {
|
||||||
|
transform: translate(-50%, .75rem);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translate(-50%, -.25rem);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes tooltip-caret-slide-top {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translate(-50%, -.25rem);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translate(-50%, 0rem);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes tooltip-slide-bottom {
|
||||||
|
from {
|
||||||
|
transform: translate(-50%, -.75rem);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translate(-50%, .25rem);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes tooltip-caret-slide-bottom {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translate(-50%, -.5rem);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translate(-50%, -.3rem);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes tooltip-slide-left {
|
||||||
|
from {
|
||||||
|
transform: translate(.75rem, -50%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translate(-.25rem, -50%);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes tooltip-caret-slide-left {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translate(.05rem, -50%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translate(.3rem, -50%);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes tooltip-slide-right {
|
||||||
|
from {
|
||||||
|
transform: translate(-.75rem, -50%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translate(.25rem, -50%);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes tooltip-caret-slide-right {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translate(-.05rem, -50%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translate(-.3rem, -50%);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,158 @@
|
|||||||
|
@import "_pico/functions";
|
||||||
|
|
||||||
|
@mixin dark {
|
||||||
|
--background-color: #{mix($black, $grey-900, 37.5%)};
|
||||||
|
|
||||||
|
// texts colors
|
||||||
|
--color: #{$grey-200};
|
||||||
|
--h1-color: #{$grey-50};
|
||||||
|
--h2-color: #{mix($grey-100, $grey-50)};
|
||||||
|
--h3-color: #{$grey-100};
|
||||||
|
--h4-color: #{mix($grey-200, $grey-100)};
|
||||||
|
--h5-color: #{$grey-200};
|
||||||
|
--h6-color: #{mix($grey-300, $grey-200)};
|
||||||
|
|
||||||
|
// muted colors
|
||||||
|
--muted-color: #{$grey-500};
|
||||||
|
--muted-border-color: #{mix($grey-900, $grey-800, 75%)};
|
||||||
|
|
||||||
|
// primary colors
|
||||||
|
--primary: #{$primary-600};
|
||||||
|
--primary-hover: #{$primary-500};
|
||||||
|
--primary-focus: #{rgba($primary-600, 0.25)};
|
||||||
|
--primary-inverse: #{$white};
|
||||||
|
|
||||||
|
// secondary colors
|
||||||
|
--secondary: #{$grey-600};
|
||||||
|
--secondary-hover: #{$grey-500};
|
||||||
|
--secondary-focus: #{rgba($grey-500, 0.25)};
|
||||||
|
--secondary-inverse: #{$white};
|
||||||
|
|
||||||
|
// contrast colors
|
||||||
|
--contrast: #{$grey-50};
|
||||||
|
--contrast-hover: #{$white};
|
||||||
|
--contrast-focus: #{rgba($grey-500, 0.25)};
|
||||||
|
--contrast-inverse: #{$black};
|
||||||
|
|
||||||
|
// highlighted text (<mark>)
|
||||||
|
--mark-background-color: #{mix($grey-300, $amber-300)};
|
||||||
|
--mark-color: #{mix($black, $grey-900, 37.5%)};
|
||||||
|
|
||||||
|
// inserted (<ins>) and deleted (<ins>)
|
||||||
|
--ins-color: #{$green-700};
|
||||||
|
--del-color: #{$red-800};
|
||||||
|
|
||||||
|
// blockquote
|
||||||
|
--blockquote-border-color: var(--muted-border-color);
|
||||||
|
--blockquote-footer-color: var(--muted-color);
|
||||||
|
|
||||||
|
// button
|
||||||
|
// to disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
|
||||||
|
// don't use, 'none, 'false, 'null', '0', etc.
|
||||||
|
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||||
|
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||||
|
|
||||||
|
// form elements
|
||||||
|
--form-element-background-color: #{mix($black, $grey-900, 37.5%)};
|
||||||
|
--form-element-border-color: #{mix($grey-800, $grey-700)};
|
||||||
|
--form-element-color: var(--color);
|
||||||
|
--form-element-placeholder-color: var(--muted-color);
|
||||||
|
--form-element-active-background-color: var(--form-element-background-color);
|
||||||
|
--form-element-active-border-color: var(--primary);
|
||||||
|
--form-element-focus-color: var(--primary-focus);
|
||||||
|
--form-element-disabled-background-color: #{$grey-800};
|
||||||
|
--form-element-disabled-border-color: #{$grey-700};
|
||||||
|
--form-element-disabled-opacity: 0.5;
|
||||||
|
--form-element-invalid-border-color: #{$red-900};
|
||||||
|
--form-element-invalid-active-border-color: #{$red-800};
|
||||||
|
--form-element-invalid-focus-color: #{rgba($red-800, 0.25)};
|
||||||
|
--form-element-valid-border-color: #{$green-800};
|
||||||
|
--form-element-valid-active-border-color: #{$green-700};
|
||||||
|
--form-element-valid-focus-color: #{rgba($green-700, 0.25)};
|
||||||
|
|
||||||
|
// switch (input[type="checkbox"][role="switch"])
|
||||||
|
--switch-background-color: #{mix($grey-800, $grey-700)};
|
||||||
|
--switch-color: var(--primary-inverse);
|
||||||
|
--switch-checked-background-color: var(--primary);
|
||||||
|
|
||||||
|
// range (input[type="range"])
|
||||||
|
--range-border-color: #{mix($grey-900, $grey-800)};
|
||||||
|
--range-active-border-color: #{$grey-800};
|
||||||
|
--range-thumb-border-color: var(--background-color);
|
||||||
|
--range-thumb-color: var(--secondary);
|
||||||
|
--range-thumb-hover-color: var(--secondary-hover);
|
||||||
|
--range-thumb-active-color: var(--primary);
|
||||||
|
|
||||||
|
// table
|
||||||
|
--table-border-color: var(--muted-border-color);
|
||||||
|
--table-row-stripped-background-color: #{rgba($grey-500, 0.05)};
|
||||||
|
|
||||||
|
// code
|
||||||
|
--code-background-color: #{mix($black, $grey-900, 12.5%)};
|
||||||
|
--code-color: var(--muted-color);
|
||||||
|
--code-kbd-background-color: var(--contrast);
|
||||||
|
--code-kbd-color: var(--contrast-inverse);
|
||||||
|
--code-tag-color: #{hsl(330, 30%, 50%)};
|
||||||
|
--code-property-color: #{hsl(185, 30%, 50%)};
|
||||||
|
--code-value-color: #{hsl(40, 10%, 50%)};
|
||||||
|
--code-comment-color: #{mix($grey-700, $grey-600)};
|
||||||
|
|
||||||
|
// accordion (<details>)
|
||||||
|
--accordion-border-color: var(--muted-border-color);
|
||||||
|
--accordion-active-summary-color: var(--primary);
|
||||||
|
--accordion-close-summary-color: var(--color);
|
||||||
|
--accordion-open-summary-color: var(--muted-color);
|
||||||
|
|
||||||
|
// card (<article>)
|
||||||
|
$box-shadow-elevation: 1rem;
|
||||||
|
$box-shadow-blur-strengh: 6rem;
|
||||||
|
$box-shadow-opacity: 0.06;
|
||||||
|
--card-background-color: #{mix($black, $grey-900, 25%)};
|
||||||
|
--card-border-color: var(--card-background-color);
|
||||||
|
--card-box-shadow:
|
||||||
|
#{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)} #{($box-shadow-blur-strengh * 0.029)} #{rgba($black, ($box-shadow-opacity * 0.283))},
|
||||||
|
#{($box-shadow-elevation * 0.5 * 0.067)} #{($box-shadow-elevation * 0.067)} #{($box-shadow-blur-strengh * 0.067)} #{rgba($black, ($box-shadow-opacity * 0.4))},
|
||||||
|
#{($box-shadow-elevation * 0.5 * 0.125)} #{($box-shadow-elevation * 0.125)} #{($box-shadow-blur-strengh * 0.125)} #{rgba($black, ($box-shadow-opacity * 0.5))},
|
||||||
|
#{($box-shadow-elevation * 0.5 * 0.225)} #{($box-shadow-elevation * 0.225)} #{($box-shadow-blur-strengh * 0.225)} #{rgba($black, ($box-shadow-opacity * 0.6))},
|
||||||
|
#{($box-shadow-elevation * 0.5 * 0.417)} #{($box-shadow-elevation * 0.417)} #{($box-shadow-blur-strengh * 0.417)} #{rgba($black, ($box-shadow-opacity * 0.717))},
|
||||||
|
#{($box-shadow-elevation * 0.5)} #{$box-shadow-elevation} #{$box-shadow-blur-strengh} #{rgba($black, $box-shadow-opacity)},
|
||||||
|
0 0 0 0.0625rem #{rgba($black, ($box-shadow-opacity * 0.25) )};
|
||||||
|
--card-sectionning-background-color: #{mix($black, $grey-900, 12.5%)};
|
||||||
|
|
||||||
|
// dropdown (<details role="list">)
|
||||||
|
--dropdown-background-color: #{$grey-900};
|
||||||
|
--dropdown-border-color: #{mix($grey-900, $grey-800)};
|
||||||
|
--dropdown-box-shadow: var(--card-box-shadow);
|
||||||
|
--dropdown-color: var(--color);
|
||||||
|
--dropdown-hover-background-color: #{rgba(mix($grey-900, $grey-800), 0.75)};
|
||||||
|
|
||||||
|
// modal (<dialog>)
|
||||||
|
--modal-overlay-background-color: #{rgba(mix($grey-900, $grey-800), 0.8)};
|
||||||
|
|
||||||
|
// progress
|
||||||
|
--progress-background-color: #{mix($grey-900, $grey-800)};
|
||||||
|
--progress-color: var(--primary);
|
||||||
|
|
||||||
|
// loading ([aria-busy=true])
|
||||||
|
--loading-spinner-opacity: 0.5;
|
||||||
|
|
||||||
|
// tooltip ([data-tooltip])
|
||||||
|
--tooltip-background-color: var(--contrast);
|
||||||
|
--tooltip-color: var(--contrast-inverse);
|
||||||
|
|
||||||
|
// icons
|
||||||
|
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
|
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-300)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
|
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($white)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
|
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($black)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
|
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-500)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||||
|
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-300)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||||
|
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($red-900)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||||
|
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
||||||
|
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-300)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||||
|
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-300)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
|
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($green-800)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
|
|
||||||
|
// document
|
||||||
|
color-scheme: dark;
|
||||||
|
}
|
||||||
@ -0,0 +1,158 @@
|
|||||||
|
@import "_pico/functions";
|
||||||
|
|
||||||
|
[data-theme="light"],
|
||||||
|
:root:not([data-theme="dark"]) {
|
||||||
|
--background-color: #{$white};
|
||||||
|
|
||||||
|
// texts colors
|
||||||
|
--color: #{$grey-700};
|
||||||
|
--h1-color: #{$grey-900};
|
||||||
|
--h2-color: #{mix($grey-900, $grey-800)};
|
||||||
|
--h3-color: #{$grey-800};
|
||||||
|
--h4-color: #{mix($grey-800, $grey-700)};
|
||||||
|
--h5-color: #{$grey-700};
|
||||||
|
--h6-color: #{mix($grey-700, $grey-600)};
|
||||||
|
|
||||||
|
// muted colors
|
||||||
|
--muted-color: #{$grey-500};
|
||||||
|
--muted-border-color: #{$grey-50};
|
||||||
|
|
||||||
|
// primary colors
|
||||||
|
--primary: #{$primary-600};
|
||||||
|
--primary-hover: #{$primary-700};
|
||||||
|
--primary-focus: #{rgba($primary-600, 0.125)};
|
||||||
|
--primary-inverse: #{$white};
|
||||||
|
|
||||||
|
// secondary colors
|
||||||
|
--secondary: #{$grey-600};
|
||||||
|
--secondary-hover: #{$grey-700};
|
||||||
|
--secondary-focus: #{rgba($grey-600, 0.125)};
|
||||||
|
--secondary-inverse: #{$white};
|
||||||
|
|
||||||
|
// contrast colors
|
||||||
|
--contrast: #{$grey-900};
|
||||||
|
--contrast-hover: #{$black};
|
||||||
|
--contrast-focus: #{rgba($grey-600, 0.125)};
|
||||||
|
--contrast-inverse: #{$white};
|
||||||
|
|
||||||
|
// highlighted text (<mark>)
|
||||||
|
--mark-background-color: #{mix($amber-100, $amber-50)};
|
||||||
|
--mark-color: #{mix($grey-900, $amber-900, 75%)};
|
||||||
|
|
||||||
|
// inserted (<ins>) and deleted (<ins>)
|
||||||
|
--ins-color: #{$green-700};
|
||||||
|
--del-color: #{$red-800};
|
||||||
|
|
||||||
|
// blockquote
|
||||||
|
--blockquote-border-color: var(--muted-border-color);
|
||||||
|
--blockquote-footer-color: var(--muted-color);
|
||||||
|
|
||||||
|
// button
|
||||||
|
// to disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
|
||||||
|
// don't use, 'none, 'false, 'null', '0', etc.
|
||||||
|
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||||
|
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||||
|
|
||||||
|
// form elements
|
||||||
|
--form-element-background-color: transparent;
|
||||||
|
--form-element-border-color: #{$grey-300};
|
||||||
|
--form-element-color: var(--color);
|
||||||
|
--form-element-placeholder-color: var(--muted-color);
|
||||||
|
--form-element-active-background-color: transparent;
|
||||||
|
--form-element-active-border-color: var(--primary);
|
||||||
|
--form-element-focus-color: var(--primary-focus);
|
||||||
|
--form-element-disabled-background-color: #{$grey-100};
|
||||||
|
--form-element-disabled-border-color: #{$grey-300};
|
||||||
|
--form-element-disabled-opacity: 0.5;
|
||||||
|
--form-element-invalid-border-color: #{$red-800};
|
||||||
|
--form-element-invalid-active-border-color: #{$red-700};
|
||||||
|
--form-element-invalid-focus-color: #{rgba($red-700, 0.125)};
|
||||||
|
--form-element-valid-border-color: #{$green-700};
|
||||||
|
--form-element-valid-active-border-color: #{$green-600};
|
||||||
|
--form-element-valid-focus-color: #{rgba($green-600, 0.125)};
|
||||||
|
|
||||||
|
// switch (input[type="checkbox"][role="switch"])
|
||||||
|
--switch-background-color: #{$grey-200};
|
||||||
|
--switch-color: var(--primary-inverse);
|
||||||
|
--switch-checked-background-color: var(--primary);
|
||||||
|
|
||||||
|
// range (input[type="range"])
|
||||||
|
--range-border-color: #{$grey-100};
|
||||||
|
--range-active-border-color: #{$grey-200};
|
||||||
|
--range-thumb-border-color: var(--background-color);
|
||||||
|
--range-thumb-color: var(--secondary);
|
||||||
|
--range-thumb-hover-color: var(--secondary-hover);
|
||||||
|
--range-thumb-active-color: var(--primary);
|
||||||
|
|
||||||
|
// table
|
||||||
|
--table-border-color: var(--muted-border-color);
|
||||||
|
--table-row-stripped-background-color: #{mix($grey-50, $white)};
|
||||||
|
|
||||||
|
// code
|
||||||
|
--code-background-color: #{$grey-50};
|
||||||
|
--code-color: var(--muted-color);
|
||||||
|
--code-kbd-background-color: var(--contrast);
|
||||||
|
--code-kbd-color: var(--contrast-inverse);
|
||||||
|
--code-tag-color: #{hsl(330, 40%, 50%)};
|
||||||
|
--code-property-color: #{hsl(185, 40%, 40%)};
|
||||||
|
--code-value-color: #{hsl(40, 20%, 50%)};
|
||||||
|
--code-comment-color: #{$grey-300};
|
||||||
|
|
||||||
|
// accordion (<details>)
|
||||||
|
--accordion-border-color: var(--muted-border-color);
|
||||||
|
--accordion-close-summary-color: var(--color);
|
||||||
|
--accordion-open-summary-color: var(--muted-color);
|
||||||
|
|
||||||
|
// card (<article>)
|
||||||
|
$box-shadow-elevation: 1rem;
|
||||||
|
$box-shadow-blur-strengh: 6rem;
|
||||||
|
$box-shadow-opacity: 0.06;
|
||||||
|
--card-background-color: var(--background-color);
|
||||||
|
--card-border-color: var(--muted-border-color);
|
||||||
|
--card-box-shadow:
|
||||||
|
#{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)} #{($box-shadow-blur-strengh * 0.029)} #{rgba($grey-900, ($box-shadow-opacity * 0.283))},
|
||||||
|
#{($box-shadow-elevation * 0.5 * 0.067)} #{($box-shadow-elevation * 0.067)} #{($box-shadow-blur-strengh * 0.067)} #{rgba($grey-900, ($box-shadow-opacity * 0.4))},
|
||||||
|
#{($box-shadow-elevation * 0.5 * 0.125)} #{($box-shadow-elevation * 0.125)} #{($box-shadow-blur-strengh * 0.125)} #{rgba($grey-900, ($box-shadow-opacity * 0.5))},
|
||||||
|
#{($box-shadow-elevation * 0.5 * 0.225)} #{($box-shadow-elevation * 0.225)} #{($box-shadow-blur-strengh * 0.225)} #{rgba($grey-900, ($box-shadow-opacity * 0.6))},
|
||||||
|
#{($box-shadow-elevation * 0.5 * 0.417)} #{($box-shadow-elevation * 0.417)} #{($box-shadow-blur-strengh * 0.417)} #{rgba($grey-900, ($box-shadow-opacity * 0.717))},
|
||||||
|
#{($box-shadow-elevation * 0.5)} #{$box-shadow-elevation} #{$box-shadow-blur-strengh} #{rgba($grey-900, $box-shadow-opacity)},
|
||||||
|
0 0 0 0.0625rem #{rgba($grey-900, ($box-shadow-opacity * 0.25) )};
|
||||||
|
--card-sectionning-background-color: #{mix($grey-50, $white, 25%)};
|
||||||
|
|
||||||
|
// dropdown (<details role="list">)
|
||||||
|
--dropdown-background-color: #{mix($grey-50, $white, 25%)};
|
||||||
|
--dropdown-border-color: #{mix($grey-100, $grey-50)};
|
||||||
|
--dropdown-box-shadow: var(--card-box-shadow);
|
||||||
|
--dropdown-color: var(--color);
|
||||||
|
--dropdown-hover-background-color: #{$grey-50};
|
||||||
|
|
||||||
|
// modal (<dialog>)
|
||||||
|
--modal-overlay-background-color: #{rgba($grey-100, 0.7)};
|
||||||
|
|
||||||
|
// progress
|
||||||
|
--progress-background-color: #{$grey-100};
|
||||||
|
--progress-color: var(--primary);
|
||||||
|
|
||||||
|
// loading ([aria-busy=true])
|
||||||
|
--loading-spinner-opacity: 0.5;
|
||||||
|
|
||||||
|
// tooltip ([data-tooltip])
|
||||||
|
--tooltip-background-color: var(--contrast);
|
||||||
|
--tooltip-color: var(--contrast-inverse);
|
||||||
|
|
||||||
|
// icons
|
||||||
|
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
|
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-700)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
|
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($white)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
|
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($white)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
|
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-500)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||||
|
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-700)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||||
|
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($red-800)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||||
|
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
||||||
|
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-700)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||||
|
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-700)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
|
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($green-700)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
|
|
||||||
|
// document
|
||||||
|
color-scheme: light;
|
||||||
|
}
|
||||||
@ -0,0 +1,251 @@
|
|||||||
|
// common pico theme styles
|
||||||
|
:root {
|
||||||
|
// font face defined in custom.scss
|
||||||
|
--font-family: "courier prime code", sans-serif;
|
||||||
|
// pico default theme:
|
||||||
|
//--font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
|
||||||
|
// "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
|
||||||
|
// "Segoe UI Symbol", "Noto Color Emoji";
|
||||||
|
--line-height: 1.5;
|
||||||
|
--font-weight: 400;
|
||||||
|
--font-size: 20px;
|
||||||
|
|
||||||
|
// responsive typography
|
||||||
|
@if $enable-responsive-typography {
|
||||||
|
@if map-get($breakpoints, "sm") {
|
||||||
|
@media (min-width: map-get($breakpoints, "sm")) {
|
||||||
|
--font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@if map-get($breakpoints, "md") {
|
||||||
|
@media (min-width: map-get($breakpoints, "md")) {
|
||||||
|
--font-size: 21px;
|
||||||
|
--line-height: 1.4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@if map-get($breakpoints, "lg") {
|
||||||
|
@media (min-width: map-get($breakpoints, "lg")) {
|
||||||
|
--font-size: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//@if map-get($breakpoints, "xl") {
|
||||||
|
// @media (min-width: map-get($breakpoints, "xl")) {
|
||||||
|
// --font-size: 22px;
|
||||||
|
// }
|
||||||
|
//}
|
||||||
|
}
|
||||||
|
|
||||||
|
// borders
|
||||||
|
--border-radius: 0.25rem;
|
||||||
|
--border-width: 1px;
|
||||||
|
--outline-width: 3px;
|
||||||
|
|
||||||
|
// spacings
|
||||||
|
--spacing: 1rem;
|
||||||
|
|
||||||
|
// spacings for typography elements
|
||||||
|
--typography-spacing-vertical: 1.5rem;
|
||||||
|
|
||||||
|
// spacings for body > header, body > main, body > footer, section, article
|
||||||
|
--block-spacing-vertical: calc(var(--spacing) * 2);
|
||||||
|
--block-spacing-horizontal: var(--spacing);
|
||||||
|
|
||||||
|
@if ($enable-classes and $enable-grid) {
|
||||||
|
--grid-spacing-vertical: 0;
|
||||||
|
--grid-spacing-horizontal: var(--spacing);
|
||||||
|
}
|
||||||
|
|
||||||
|
// spacings for form elements and button
|
||||||
|
--form-element-spacing-vertical: 0.75rem;
|
||||||
|
--form-element-spacing-horizontal: 1rem;
|
||||||
|
|
||||||
|
// spacings for nav component
|
||||||
|
--nav-element-spacing-vertical: 1rem;
|
||||||
|
--nav-element-spacing-horizontal: 0.5rem;
|
||||||
|
--nav-link-spacing-vertical: 0.5rem;
|
||||||
|
--nav-link-spacing-horizontal: 0.5rem;
|
||||||
|
|
||||||
|
// font weight for form labels & fieldsets legend
|
||||||
|
--form-label-font-weight: var(--font-weight);
|
||||||
|
|
||||||
|
// transitions
|
||||||
|
--transition: 0.2s ease-in-out;
|
||||||
|
|
||||||
|
// modal (<dialog>)
|
||||||
|
--modal-overlay-backdrop-filter: blur(0.25rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
// responsives spacings
|
||||||
|
@if $enable-responsive-spacings {
|
||||||
|
// Sectioning
|
||||||
|
#{$semantic-root-element} > header,
|
||||||
|
#{$semantic-root-element} > main,
|
||||||
|
#{$semantic-root-element} > footer,
|
||||||
|
section {
|
||||||
|
@if map-get($breakpoints, "sm") {
|
||||||
|
@media (min-width: map-get($breakpoints, "sm")) {
|
||||||
|
--block-spacing-vertical: calc(var(--spacing) * 2.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@if map-get($breakpoints, "md") {
|
||||||
|
@media (min-width: map-get($breakpoints, "md")) {
|
||||||
|
--block-spacing-vertical: calc(var(--spacing) * 3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@if map-get($breakpoints, "lg") {
|
||||||
|
@media (min-width: map-get($breakpoints, "lg")) {
|
||||||
|
--block-spacing-vertical: calc(var(--spacing) * 3.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@if map-get($breakpoints, "xl") {
|
||||||
|
@media (min-width: map-get($breakpoints, "xl")) {
|
||||||
|
--block-spacing-vertical: calc(var(--spacing) * 4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// card (<article>)
|
||||||
|
article {
|
||||||
|
@if map-get($breakpoints, "sm") {
|
||||||
|
@media (min-width: map-get($breakpoints, "sm")) {
|
||||||
|
--block-spacing-horizontal: calc(var(--spacing) * 1.25);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@if map-get($breakpoints, "md") {
|
||||||
|
@media (min-width: map-get($breakpoints, "md")) {
|
||||||
|
--block-spacing-horizontal: calc(var(--spacing) * 1.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@if map-get($breakpoints, "lg") {
|
||||||
|
@media (min-width: map-get($breakpoints, "lg")) {
|
||||||
|
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@if map-get($breakpoints, "xl") {
|
||||||
|
@media (min-width: map-get($breakpoints, "xl")) {
|
||||||
|
--block-spacing-horizontal: calc(var(--spacing) * 2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// modal
|
||||||
|
dialog > article {
|
||||||
|
|
||||||
|
--block-spacing-vertical: calc(var(--spacing) * 2);
|
||||||
|
--block-spacing-horizontal: var(--spacing);
|
||||||
|
|
||||||
|
@if map-get($breakpoints, "sm") {
|
||||||
|
@media (min-width: map-get($breakpoints, "sm")) {
|
||||||
|
--block-spacing-vertical: calc(var(--spacing) * 2.5);
|
||||||
|
--block-spacing-horizontal: calc(var(--spacing) * 1.25);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@if map-get($breakpoints, "md") {
|
||||||
|
@media (min-width: map-get($breakpoints, "md")) {
|
||||||
|
--block-spacing-vertical: calc(var(--spacing) * 3);
|
||||||
|
--block-spacing-horizontal: calc(var(--spacing) * 1.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// link
|
||||||
|
a {
|
||||||
|
--text-decoration: none;
|
||||||
|
|
||||||
|
// Secondary & Contrast
|
||||||
|
@if $enable-classes {
|
||||||
|
&.secondary,
|
||||||
|
&.contrast {
|
||||||
|
--text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// small
|
||||||
|
small {
|
||||||
|
--font-size: 0.875em;
|
||||||
|
}
|
||||||
|
|
||||||
|
// headings
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
--font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
--font-size: 2rem;
|
||||||
|
--typography-spacing-vertical: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
--font-size: 1.75rem;
|
||||||
|
--typography-spacing-vertical: 2.625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
--font-size: 1.5rem;
|
||||||
|
--typography-spacing-vertical: 2.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
--font-size: 1.25rem;
|
||||||
|
--typography-spacing-vertical: 1.874rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
--font-size: 1.125rem;
|
||||||
|
--typography-spacing-vertical: 1.6875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// forms elements
|
||||||
|
[type="checkbox"],
|
||||||
|
[type="radio"] {
|
||||||
|
--border-width: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
[type="checkbox"][role="switch"] {
|
||||||
|
--border-width: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// table
|
||||||
|
thead,
|
||||||
|
tfoot {
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
--border-width: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:not(thead, tfoot) > * > td {
|
||||||
|
--font-size: 0.875em;
|
||||||
|
}
|
||||||
|
|
||||||
|
// code
|
||||||
|
pre,
|
||||||
|
code,
|
||||||
|
kbd,
|
||||||
|
samp {
|
||||||
|
// font face defined in custom.scss
|
||||||
|
--font-family: "courier prime code", "Menlo", "Consolas", "Roboto Mono", "Noto Mono",
|
||||||
|
"Liberation Mono", monospace;
|
||||||
|
// pico default theme:
|
||||||
|
//--font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace",
|
||||||
|
// "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace,
|
||||||
|
// "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||||
|
}
|
||||||
|
|
||||||
|
kbd {
|
||||||
|
--font-weight: bolder;
|
||||||
|
}
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@import "../custom";
|
||||||
|
@import "../pico";
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
@ -0,0 +1,233 @@
|
|||||||
|
<svg width="297mm" height="210mm" version="1.1" viewBox="0 0 297 210" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<style>.measure-arrow
|
||||||
|
{
|
||||||
|
}
|
||||||
|
.measure-label
|
||||||
|
{
|
||||||
|
|
||||||
|
}
|
||||||
|
.measure-line
|
||||||
|
{
|
||||||
|
}</style>
|
||||||
|
<defs>
|
||||||
|
<filter id="filter23020" x="-.0065432" y="-.010843" width="1.0154" height="1.0218" color-interpolation-filters="sRGB">
|
||||||
|
<feGaussianBlur stdDeviation="0.091856593"/>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
<g fill-rule="evenodd" filter="url(#filter23020)" font-family="'Sans Serif'" font-size="31.75px" font-weight="400" opacity=".6" stroke="#000" stroke-linejoin="bevel">
|
||||||
|
<g fill-opacity="0" stroke-linecap="square">
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m689.09-345.54-46.372 400.65-1.035 6.9362-1.5 6.9198-1.967 6.8932-2.437 6.8563-2.906 6.8089-3.377 6.7509-3.846 6.6819-4.315 6.603-4.78 6.513-5.243 6.412-5.701 6.3-6.154 6.178-6.603 6.044-7.043 5.9-802.44 551.37-3.157 1.954-3.405 1.696-3.608 1.415-3.765 1.116-3.873 0.801-3.932 0.477-3.94 0.145-3.896-0.188-3.803-0.518-3.66-0.842-3.469-1.155-3.236-1.451-2.96-1.729-2.647-1.985-436.27-370.23c-2.385-2.025-3.916-4.491-4.461-7.166l-85.575-421.04-0.16-1.347 0.059-1.376 0.278-1.395 0.495-1.407 0.708-1.409 0.916-1.401 1.117-1.384 1.311-1.358 1.495-1.325 1.671-1.281 1.834-1.231 1.986-1.172 2.125-1.106 2.249-1.032 861.89-371.28 48.004-15.222 52.718-11.28 56.097-7.145 58.133-2.889 58.815 1.424 58.127 5.732 56.046 9.967 52.549 14.056 47.614 17.916 41.234 21.449 33.432 24.54 24.272 27.068 13.886 28.891 2.487 29.875" fill-rule="evenodd" stroke="#000" vector-effect="non-scaling-stroke"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m628.94-263.86 7.59-5.29 7.1-5.413 6.603-5.525 6.1-5.628 5.593-5.722 5.081-5.805 4.567-5.879 4.05-5.943 3.532-5.998 3.016-6.042 2.499-6.078 1.983-6.104 1.472-6.121 0.963-6.128-2.487-29.875-13.886-28.891-24.272-27.068-33.432-24.54-41.234-21.449-47.614-17.916-52.549-14.056-56.046-9.967-58.127-5.732-58.815-1.424-58.133 2.889-56.097 7.145-52.718 11.28-48.004 15.222-861.89 371.28-2.249 1.032-2.125 1.106-1.986 1.172-1.834 1.231-1.671 1.281-1.495 1.325-1.311 1.358-1.117 1.384-0.916 1.401-0.708 1.409-0.495 1.407-0.278 1.395-0.059 1.376 0.16 1.347c0.491 2.4092 2.077 4.6251 4.62 6.4381l473.32 337.17 2.926 1.837 3.283 1.597 3.597 1.336 3.867 1.058 4.086 0.766 4.252 0.462 4.364 0.154 4.419-0.158 4.417-0.467 4.356-0.77 4.24-1.062 4.069-1.342 3.846-1.601 3.573-1.842 888-507.02" fill-rule="evenodd" stroke="#000" vector-effect="non-scaling-stroke"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m64.623-468.78-804.13 348.92-2.205 1.019-2.082 1.091-1.945 1.156-1.797 1.213-1.635 1.263-1.465 1.306-1.285 1.339-1.095 1.365-0.898 1.382-0.696 1.391-0.488 1.39-0.278 1.381-0.064 1.362 0.151 1.335c0.487 2.4917 2.135 4.7859 4.794 6.6524l6.509 4.5673 436.99 306.64 2.897 1.792 3.249 1.558 3.559 1.303 3.824 1.031 4.04 0.746 4.203 0.45 4.312 0.148 4.366-0.156 4.362-0.457 4.302-0.753 4.187-1.039 4.017-1.31 3.795-1.565 3.525-1.799 826.36-467.19 1.117-0.632c1.962-1.115 3.533-2.391 4.645-3.77 1.098-1.383 1.735-2.865 1.887-4.383l0.023-1.025-0.124-1.03-0.271-1.03-0.415-1.026-0.559-1.017-0.698-1.003-0.835-0.984-0.967-0.961-1.095-0.933-1.217-0.901-1.333-0.865-1.443-0.825-1.547-0.781-1.643-0.734-466.62-196.01-2.26-0.845-2.4705-0.729-2.6498-0.603-2.7965-0.47-2.9083-0.33-2.9845-0.188-3.0238-0.043-3.026 0.102-2.9909 0.247-2.919 0.388-2.8113 0.525-2.6687 0.655-2.4931 0.777-2.2865 0.89" fill-rule="evenodd" stroke="#000" vector-effect="non-scaling-stroke"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m568.68-263.8 6.264 2.646-853.5 480.13-468.64-326.25 9.316-4.06 802.61-349.85 18.101-7.89 20.135 8.507 465.71 196.78" fill-rule="evenodd" stroke="#000" vector-effect="non-scaling-stroke"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-216.63 698.28 802.44-551.37 43.13-410.77-888 507.02 42.423 455.12" fill-rule="evenodd" stroke="#000" vector-effect="non-scaling-stroke"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m452.34-277.6 0.476-0.256-378.25-163.29-742.7 328.7 361.08 243.27 759.39-408.43" fill-rule="evenodd" stroke="#000" vector-effect="non-scaling-stroke"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m452.34-277.6-377.77-163.13-742.48 328.44 360.86 243.12 759.39-408.43" fill-rule="evenodd" stroke="#000" vector-effect="non-scaling-stroke"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-702.25 327.78 436.27 370.23-48.367-454.82-473.32-337.17 85.416 421.77" fill-rule="evenodd" stroke="#000" vector-effect="non-scaling-stroke"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-265.98 698.01 2.647 1.985 2.96 1.729 3.236 1.451 3.469 1.155 3.66 0.842 3.803 0.518 3.896 0.188 3.94-0.145 3.932-0.477 3.873-0.801 3.765-1.116 3.608-1.415 3.405-1.696 3.157-1.954-42.423-455.12-3.573 1.842-3.846 1.601-4.069 1.342-4.24 1.062-4.356 0.77-4.417 0.467-4.419 0.158-4.364-0.154-4.252-0.462-4.086-0.766-3.867-1.058-3.597-1.336-3.283-1.597-2.926-1.837 48.367 454.82" fill-rule="evenodd" stroke="#000" vector-effect="non-scaling-stroke"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m585.82 146.9 43.13-410.77 7.59-5.29 7.1-5.413 6.603-5.525 6.1-5.628 5.593-5.722 5.081-5.805 4.567-5.879 4.05-5.943 3.532-5.998 3.016-6.042 2.499-6.078 1.983-6.104 1.472-6.121 0.963-6.128-46.372 400.65-1.035 6.9362-1.5 6.9198-1.967 6.8932-2.437 6.8563-2.906 6.8089-3.377 6.7509-3.846 6.6819-4.315 6.603-4.78 6.513-5.243 6.412-5.701 6.3-6.154 6.178-6.603 6.044-7.043 5.9" fill-rule="evenodd" stroke="#000" vector-effect="non-scaling-stroke"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m574.94-261.16-0.928 9.912-826.36 467.19-3.525 1.799-3.795 1.565-4.017 1.31-4.187 1.039-4.302 0.753-4.362 0.457-4.366 0.156-4.312-0.148-4.203-0.45-4.04-0.746-3.824-1.031-3.559-1.303-3.249-1.558-2.897-1.792-436.99-306.64-3.213-16.64 468.64 326.25 0.389 3.99-0.389-3.99 853.5-480.13" fill-rule="evenodd" stroke="#000" vector-effect="non-scaling-stroke"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-737.88-111.34 802.61-349.85-0.1061-7.58-804.13 348.92 1.624 8.513" fill-rule="evenodd" stroke="#000" vector-effect="non-scaling-stroke"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m102.96-460.58 465.71 196.78 0.861-9.342-466.62-196.01 0.053 8.573" fill-rule="evenodd" stroke="#000" vector-effect="non-scaling-stroke"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-706.72 320.62c0.545 2.675 2.076 5.141 4.461 7.166l-85.416-421.77c-2.543-1.813-4.129-4.0289-4.62-6.4381l85.575 421.04" fill-rule="evenodd" stroke="#000" vector-effect="non-scaling-stroke"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m74.568-441.15 5e-3 0.418-742.71 328.28 742.7-328.7" fill-rule="evenodd" stroke="#000" vector-effect="non-scaling-stroke"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m64.729-461.2 18.101-7.89 20.135 8.507-0.053-8.573-2.26-0.845-2.4705-0.729-2.6498-0.603-2.7965-0.47-2.9083-0.33-2.9845-0.188-3.0238-0.043-3.026 0.102-2.9909 0.247-2.919 0.388-2.8113 0.525-2.6687 0.655-2.4931 0.777-2.2865 0.89 0.1061 7.58" fill-rule="evenodd" stroke="#000" vector-effect="non-scaling-stroke"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-747.19-107.28 9.316-4.06-1.624-8.513-2.205 1.019-2.082 1.091-1.945 1.156-1.797 1.213-1.635 1.263-1.465 1.306-1.285 1.339-1.095 1.365-0.898 1.382-0.696 1.391-0.488 1.39-0.278 1.381-0.064 1.362 0.151 1.335c0.487 2.4917 2.135 4.7859 4.794 6.6524l6.509 4.5673-3.213-16.64" fill-rule="evenodd" stroke="#000" vector-effect="non-scaling-stroke"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m452.34-277.6 0.476-0.256-378.24-163.08 377.77 163.34" fill-rule="evenodd" stroke="#000" vector-effect="non-scaling-stroke"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m568.68-263.8 6.264 2.646-0.928 9.912 1.117-0.632c1.962-1.115 3.533-2.391 4.645-3.77 1.098-1.383 1.735-2.865 1.887-4.383l0.023-1.025-0.124-1.03-0.271-1.03-0.415-1.026-0.559-1.017-0.698-1.003-0.835-0.984-0.967-0.961-1.095-0.933-1.217-0.901-1.333-0.865-1.443-0.825-1.547-0.781-1.643-0.734-0.861 9.342" fill-rule="evenodd" stroke="#000" vector-effect="non-scaling-stroke"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g fill="none" stroke-linecap="round">
|
||||||
|
<g stroke-width="7">
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m64.623-468.78-804.13 348.92" fill-rule="evenodd" stroke="#000"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m64.623-468.78 2.2865-0.89 2.4931-0.777 2.6687-0.655 2.8113-0.525 2.919-0.388 2.9909-0.247 3.026-0.102 3.0238 0.043 2.9845 0.188 2.9083 0.33 2.7965 0.47 2.6498 0.603 2.4705 0.729 2.26 0.845" fill-rule="evenodd" stroke="#000"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-739.5-119.86-2.205 1.019-2.082 1.091-1.945 1.156-1.797 1.213-1.635 1.263-1.465 1.306-1.285 1.339-1.095 1.365-0.898 1.382-0.696 1.391-0.488 1.39-0.278 1.381-0.064 1.362 0.151 1.335" fill-rule="evenodd" stroke="#000"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-755.28-101.86c0.487 2.4917 2.135 4.7859 4.794 6.6524" fill-rule="evenodd" stroke="#000"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m569.54-273.14-466.62-196.01" fill-rule="evenodd" stroke="#000"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-750.49-95.21 443.5 311.2" fill-rule="evenodd" stroke="#000"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m575.13-251.88c1.962-1.115 3.533-2.391 4.645-3.77 1.098-1.383 1.735-2.865 1.887-4.383" fill-rule="evenodd" stroke="#000"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m581.66-260.03 0.023-1.025-0.124-1.03-0.271-1.03-0.415-1.026-0.559-1.017-0.698-1.003-0.835-0.984-0.967-0.961-1.095-0.933-1.217-0.901-1.333-0.865-1.443-0.825-1.547-0.781-1.643-0.734" fill-rule="evenodd" stroke="#000"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-306.99 215.99 2.897 1.792 3.249 1.558 3.559 1.303 3.824 1.031 4.04 0.746 4.203 0.45 4.312 0.148 4.366-0.156 4.362-0.457 4.302-0.753 4.187-1.039 4.017-1.31 3.795-1.565 3.525-1.799" fill-rule="evenodd" stroke="#000"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-252.35 215.94 827.48-467.82" fill-rule="evenodd" stroke="#000"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)" stroke-width="16.735">
|
||||||
|
<path d="m85.68-489.92-861.89 371.28" fill-rule="evenodd" stroke="#000" stroke-width="16.735"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)" stroke-width="16.735">
|
||||||
|
<path d="m-776.21-118.65-2.249 1.032-2.125 1.106-1.986 1.172-1.834 1.231-1.671 1.281-1.495 1.325-1.311 1.358-1.117 1.384-0.916 1.401-0.708 1.409-0.495 1.407-0.278 1.395-0.059 1.376 0.16 1.347" fill-rule="evenodd" stroke="#000" stroke-width="16.735"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)" stroke-width="7">
|
||||||
|
<path d="m-792.29-100.42c0.491 2.4092 2.077 4.6251 4.62 6.4381" fill-rule="evenodd" stroke="#000"/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<g stroke-width="23.642">
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-787.67-93.985 473.32 337.17" fill-rule="evenodd" stroke="#000" stroke-width="23.642"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-314.35 243.19 2.926 1.837 3.283 1.597 3.597 1.336 3.867 1.058 4.086 0.766 4.252 0.462 4.364 0.154 4.419-0.158 4.417-0.467 4.356-0.77 4.24-1.062 4.069-1.342 3.846-1.601 3.573-1.842" fill-rule="evenodd" stroke="#000" stroke-width="23.642"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-259.05 243.16 888-507.02" fill-rule="evenodd" stroke="#000" stroke-width="23.642"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)" stroke-width="16.735">
|
||||||
|
<path d="m628.94-263.86 7.59-5.29 7.1-5.413 6.603-5.525 6.1-5.628 5.593-5.722 5.081-5.805 4.567-5.879 4.05-5.943 3.532-5.998 3.016-6.042 2.499-6.078 1.983-6.104 1.472-6.121 0.963-6.128" fill-rule="evenodd" stroke="#000" stroke-width="16.735"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)" stroke-width="23.642">
|
||||||
|
<path d="m689.09-345.54c1.0337-28.608-10.861-56.249-31.613-75.813-38.017-39.631-90.98-60.852-142.52-77.03-123.47-34.737-256.26-37.263-380.85-6.6241-16.358 4.3132-32.202 10.316-48.423 15.085" fill-rule="evenodd" stroke="#000" stroke-width="23.642"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)" stroke-width="7">
|
||||||
|
<path d="m-706.72 320.62c0.545 2.675 2.076 5.141 4.461 7.166" fill-rule="evenodd" stroke="#000"/>
|
||||||
|
</g>
|
||||||
|
<g stroke-width="23.642">
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m585.82 146.9 7.043-5.9 6.603-6.044 6.154-6.178 5.701-6.3 5.243-6.412 4.78-6.513 4.315-6.603 3.846-6.6819 3.377-6.7509 2.906-6.8089 2.437-6.8563 1.967-6.8932 1.5-6.9198 1.035-6.9362" fill-rule="evenodd" stroke="#000" stroke-width="23.642"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-702.25 327.78 436.27 370.23" fill-rule="evenodd" stroke="#000" stroke-width="23.642"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-216.63 698.28 802.44-551.37" fill-rule="evenodd" stroke="#000" stroke-width="23.642"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-265.98 698.01 2.647 1.985 2.96 1.729 3.236 1.451 3.469 1.155 3.66 0.842 3.803 0.518 3.896 0.188 3.94-0.145 3.932-0.477 3.873-0.801 3.765-1.116 3.608-1.415 3.405-1.696 3.157-1.954" fill-rule="evenodd" stroke="#000" stroke-width="23.642"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g stroke-width="7">
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m585.82 146.9 43.13-410.77" fill-rule="evenodd" stroke="#000"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m574.94-261.16-853.5 480.13" fill-rule="evenodd" stroke="#000"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m574.94-261.16-0.928 9.912" fill-rule="evenodd" stroke="#000"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-278.56 218.97 0.389 3.99" fill-rule="evenodd" stroke="#000"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-278.56 218.97-468.64-326.25" fill-rule="evenodd" stroke="#000"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-747.19-107.28 830.02-361.8" fill-rule="evenodd" stroke="#000"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m82.83-469.08 492.11 207.93" fill-rule="evenodd" stroke="#000"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-668.36-112.6 361.31 243.42" fill-rule="evenodd" stroke="#000"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-307.05 130.83 759.87-408.69" fill-rule="evenodd" stroke="#000"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m452.82-277.86-378.25-163.29" fill-rule="evenodd" stroke="#000"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m74.568-441.15-742.93 328.55" fill-rule="evenodd" stroke="#000"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-747.19-107.28 3.213 16.64" fill-rule="evenodd" stroke="#000"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m74.568-441.15 5e-3 0.418" fill-rule="evenodd" stroke="#000"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m74.574-440.73-742.48 328.44" fill-rule="evenodd" stroke="#000"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m452.34-277.6-377.77-163.13" fill-rule="evenodd" stroke="#000"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-706.72 320.62-85.575-421.04" fill-rule="evenodd" stroke="#000"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)" stroke-width="23.642">
|
||||||
|
<path d="m689.09-345.54-46.372 400.65" fill-rule="evenodd" stroke="#000" stroke-width="23.642"/>
|
||||||
|
</g>
|
||||||
|
<g stroke-width="7">
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m64.729-461.2-0.1061-7.58" fill-rule="evenodd" stroke="#000"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-737.88-111.34-1.624-8.513" fill-rule="evenodd" stroke="#000"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m102.96-460.58-0.053-8.573" fill-rule="evenodd" stroke="#000"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m568.68-263.8 0.861-9.342" fill-rule="evenodd" stroke="#000"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)" stroke-width="23.642">
|
||||||
|
<path d="m-702.25 327.78-85.416-421.77" fill-rule="evenodd" stroke="#000" stroke-width="23.642"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)" stroke-width="7">
|
||||||
|
<path d="m-265.98 698.01-48.367-454.82" fill-rule="evenodd" stroke="#000"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)" stroke-width="7">
|
||||||
|
<path d="m-216.63 698.28-42.423-455.12" fill-rule="evenodd" stroke="#000"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 18 KiB |
@ -0,0 +1,233 @@
|
|||||||
|
<svg width="297mm" height="210mm" version="1.1" viewBox="0 0 297 210" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<style>.measure-arrow
|
||||||
|
{
|
||||||
|
}
|
||||||
|
.measure-label
|
||||||
|
{
|
||||||
|
|
||||||
|
}
|
||||||
|
.measure-line
|
||||||
|
{
|
||||||
|
}</style>
|
||||||
|
<defs>
|
||||||
|
<filter id="filter23020" x="-.0065432" y="-.010843" width="1.0154" height="1.0218" color-interpolation-filters="sRGB">
|
||||||
|
<feGaussianBlur stdDeviation="0.091856593"/>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
<g fill-rule="evenodd" filter="url(#filter23020)" font-family="'Sans Serif'" font-size="31.75px" font-weight="400" opacity=".6" stroke="#f0f0f0" stroke-linejoin="bevel">
|
||||||
|
<g fill-opacity="0" stroke-linecap="square">
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m689.09-345.54-46.372 400.65-1.035 6.9362-1.5 6.9198-1.967 6.8932-2.437 6.8563-2.906 6.8089-3.377 6.7509-3.846 6.6819-4.315 6.603-4.78 6.513-5.243 6.412-5.701 6.3-6.154 6.178-6.603 6.044-7.043 5.9-802.44 551.37-3.157 1.954-3.405 1.696-3.608 1.415-3.765 1.116-3.873 0.801-3.932 0.477-3.94 0.145-3.896-0.188-3.803-0.518-3.66-0.842-3.469-1.155-3.236-1.451-2.96-1.729-2.647-1.985-436.27-370.23c-2.385-2.025-3.916-4.491-4.461-7.166l-85.575-421.04-0.16-1.347 0.059-1.376 0.278-1.395 0.495-1.407 0.708-1.409 0.916-1.401 1.117-1.384 1.311-1.358 1.495-1.325 1.671-1.281 1.834-1.231 1.986-1.172 2.125-1.106 2.249-1.032 861.89-371.28 48.004-15.222 52.718-11.28 56.097-7.145 58.133-2.889 58.815 1.424 58.127 5.732 56.046 9.967 52.549 14.056 47.614 17.916 41.234 21.449 33.432 24.54 24.272 27.068 13.886 28.891 2.487 29.875" fill-rule="evenodd" stroke="#f0f0f0" vector-effect="non-scaling-stroke"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m628.94-263.86 7.59-5.29 7.1-5.413 6.603-5.525 6.1-5.628 5.593-5.722 5.081-5.805 4.567-5.879 4.05-5.943 3.532-5.998 3.016-6.042 2.499-6.078 1.983-6.104 1.472-6.121 0.963-6.128-2.487-29.875-13.886-28.891-24.272-27.068-33.432-24.54-41.234-21.449-47.614-17.916-52.549-14.056-56.046-9.967-58.127-5.732-58.815-1.424-58.133 2.889-56.097 7.145-52.718 11.28-48.004 15.222-861.89 371.28-2.249 1.032-2.125 1.106-1.986 1.172-1.834 1.231-1.671 1.281-1.495 1.325-1.311 1.358-1.117 1.384-0.916 1.401-0.708 1.409-0.495 1.407-0.278 1.395-0.059 1.376 0.16 1.347c0.491 2.4092 2.077 4.6251 4.62 6.4381l473.32 337.17 2.926 1.837 3.283 1.597 3.597 1.336 3.867 1.058 4.086 0.766 4.252 0.462 4.364 0.154 4.419-0.158 4.417-0.467 4.356-0.77 4.24-1.062 4.069-1.342 3.846-1.601 3.573-1.842 888-507.02" fill-rule="evenodd" stroke="#f0f0f0" vector-effect="non-scaling-stroke"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m64.623-468.78-804.13 348.92-2.205 1.019-2.082 1.091-1.945 1.156-1.797 1.213-1.635 1.263-1.465 1.306-1.285 1.339-1.095 1.365-0.898 1.382-0.696 1.391-0.488 1.39-0.278 1.381-0.064 1.362 0.151 1.335c0.487 2.4917 2.135 4.7859 4.794 6.6524l6.509 4.5673 436.99 306.64 2.897 1.792 3.249 1.558 3.559 1.303 3.824 1.031 4.04 0.746 4.203 0.45 4.312 0.148 4.366-0.156 4.362-0.457 4.302-0.753 4.187-1.039 4.017-1.31 3.795-1.565 3.525-1.799 826.36-467.19 1.117-0.632c1.962-1.115 3.533-2.391 4.645-3.77 1.098-1.383 1.735-2.865 1.887-4.383l0.023-1.025-0.124-1.03-0.271-1.03-0.415-1.026-0.559-1.017-0.698-1.003-0.835-0.984-0.967-0.961-1.095-0.933-1.217-0.901-1.333-0.865-1.443-0.825-1.547-0.781-1.643-0.734-466.62-196.01-2.26-0.845-2.4705-0.729-2.6498-0.603-2.7965-0.47-2.9083-0.33-2.9845-0.188-3.0238-0.043-3.026 0.102-2.9909 0.247-2.919 0.388-2.8113 0.525-2.6687 0.655-2.4931 0.777-2.2865 0.89" fill-rule="evenodd" stroke="#f0f0f0" vector-effect="non-scaling-stroke"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m568.68-263.8 6.264 2.646-853.5 480.13-468.64-326.25 9.316-4.06 802.61-349.85 18.101-7.89 20.135 8.507 465.71 196.78" fill-rule="evenodd" stroke="#f0f0f0" vector-effect="non-scaling-stroke"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-216.63 698.28 802.44-551.37 43.13-410.77-888 507.02 42.423 455.12" fill-rule="evenodd" stroke="#f0f0f0" vector-effect="non-scaling-stroke"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m452.34-277.6 0.476-0.256-378.25-163.29-742.7 328.7 361.08 243.27 759.39-408.43" fill-rule="evenodd" stroke="#f0f0f0" vector-effect="non-scaling-stroke"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m452.34-277.6-377.77-163.13-742.48 328.44 360.86 243.12 759.39-408.43" fill-rule="evenodd" stroke="#f0f0f0" vector-effect="non-scaling-stroke"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-702.25 327.78 436.27 370.23-48.367-454.82-473.32-337.17 85.416 421.77" fill-rule="evenodd" stroke="#f0f0f0" vector-effect="non-scaling-stroke"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-265.98 698.01 2.647 1.985 2.96 1.729 3.236 1.451 3.469 1.155 3.66 0.842 3.803 0.518 3.896 0.188 3.94-0.145 3.932-0.477 3.873-0.801 3.765-1.116 3.608-1.415 3.405-1.696 3.157-1.954-42.423-455.12-3.573 1.842-3.846 1.601-4.069 1.342-4.24 1.062-4.356 0.77-4.417 0.467-4.419 0.158-4.364-0.154-4.252-0.462-4.086-0.766-3.867-1.058-3.597-1.336-3.283-1.597-2.926-1.837 48.367 454.82" fill-rule="evenodd" stroke="#f0f0f0" vector-effect="non-scaling-stroke"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m585.82 146.9 43.13-410.77 7.59-5.29 7.1-5.413 6.603-5.525 6.1-5.628 5.593-5.722 5.081-5.805 4.567-5.879 4.05-5.943 3.532-5.998 3.016-6.042 2.499-6.078 1.983-6.104 1.472-6.121 0.963-6.128-46.372 400.65-1.035 6.9362-1.5 6.9198-1.967 6.8932-2.437 6.8563-2.906 6.8089-3.377 6.7509-3.846 6.6819-4.315 6.603-4.78 6.513-5.243 6.412-5.701 6.3-6.154 6.178-6.603 6.044-7.043 5.9" fill-rule="evenodd" stroke="#f0f0f0" vector-effect="non-scaling-stroke"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m574.94-261.16-0.928 9.912-826.36 467.19-3.525 1.799-3.795 1.565-4.017 1.31-4.187 1.039-4.302 0.753-4.362 0.457-4.366 0.156-4.312-0.148-4.203-0.45-4.04-0.746-3.824-1.031-3.559-1.303-3.249-1.558-2.897-1.792-436.99-306.64-3.213-16.64 468.64 326.25 0.389 3.99-0.389-3.99 853.5-480.13" fill-rule="evenodd" stroke="#f0f0f0" vector-effect="non-scaling-stroke"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-737.88-111.34 802.61-349.85-0.1061-7.58-804.13 348.92 1.624 8.513" fill-rule="evenodd" stroke="#f0f0f0" vector-effect="non-scaling-stroke"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m102.96-460.58 465.71 196.78 0.861-9.342-466.62-196.01 0.053 8.573" fill-rule="evenodd" stroke="#f0f0f0" vector-effect="non-scaling-stroke"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-706.72 320.62c0.545 2.675 2.076 5.141 4.461 7.166l-85.416-421.77c-2.543-1.813-4.129-4.0289-4.62-6.4381l85.575 421.04" fill-rule="evenodd" stroke="#f0f0f0" vector-effect="non-scaling-stroke"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m74.568-441.15 5e-3 0.418-742.71 328.28 742.7-328.7" fill-rule="evenodd" stroke="#f0f0f0" vector-effect="non-scaling-stroke"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m64.729-461.2 18.101-7.89 20.135 8.507-0.053-8.573-2.26-0.845-2.4705-0.729-2.6498-0.603-2.7965-0.47-2.9083-0.33-2.9845-0.188-3.0238-0.043-3.026 0.102-2.9909 0.247-2.919 0.388-2.8113 0.525-2.6687 0.655-2.4931 0.777-2.2865 0.89 0.1061 7.58" fill-rule="evenodd" stroke="#f0f0f0" vector-effect="non-scaling-stroke"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-747.19-107.28 9.316-4.06-1.624-8.513-2.205 1.019-2.082 1.091-1.945 1.156-1.797 1.213-1.635 1.263-1.465 1.306-1.285 1.339-1.095 1.365-0.898 1.382-0.696 1.391-0.488 1.39-0.278 1.381-0.064 1.362 0.151 1.335c0.487 2.4917 2.135 4.7859 4.794 6.6524l6.509 4.5673-3.213-16.64" fill-rule="evenodd" stroke="#f0f0f0" vector-effect="non-scaling-stroke"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m452.34-277.6 0.476-0.256-378.24-163.08 377.77 163.34" fill-rule="evenodd" stroke="#f0f0f0" vector-effect="non-scaling-stroke"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m568.68-263.8 6.264 2.646-0.928 9.912 1.117-0.632c1.962-1.115 3.533-2.391 4.645-3.77 1.098-1.383 1.735-2.865 1.887-4.383l0.023-1.025-0.124-1.03-0.271-1.03-0.415-1.026-0.559-1.017-0.698-1.003-0.835-0.984-0.967-0.961-1.095-0.933-1.217-0.901-1.333-0.865-1.443-0.825-1.547-0.781-1.643-0.734-0.861 9.342" fill-rule="evenodd" stroke="#f0f0f0" vector-effect="non-scaling-stroke"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g fill="none" stroke-linecap="round">
|
||||||
|
<g stroke-width="7">
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m64.623-468.78-804.13 348.92" fill-rule="evenodd" stroke="#f0f0f0"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m64.623-468.78 2.2865-0.89 2.4931-0.777 2.6687-0.655 2.8113-0.525 2.919-0.388 2.9909-0.247 3.026-0.102 3.0238 0.043 2.9845 0.188 2.9083 0.33 2.7965 0.47 2.6498 0.603 2.4705 0.729 2.26 0.845" fill-rule="evenodd" stroke="#f0f0f0"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-739.5-119.86-2.205 1.019-2.082 1.091-1.945 1.156-1.797 1.213-1.635 1.263-1.465 1.306-1.285 1.339-1.095 1.365-0.898 1.382-0.696 1.391-0.488 1.39-0.278 1.381-0.064 1.362 0.151 1.335" fill-rule="evenodd" stroke="#f0f0f0"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-755.28-101.86c0.487 2.4917 2.135 4.7859 4.794 6.6524" fill-rule="evenodd" stroke="#f0f0f0"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m569.54-273.14-466.62-196.01" fill-rule="evenodd" stroke="#f0f0f0"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-750.49-95.21 443.5 311.2" fill-rule="evenodd" stroke="#f0f0f0"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m575.13-251.88c1.962-1.115 3.533-2.391 4.645-3.77 1.098-1.383 1.735-2.865 1.887-4.383" fill-rule="evenodd" stroke="#f0f0f0"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m581.66-260.03 0.023-1.025-0.124-1.03-0.271-1.03-0.415-1.026-0.559-1.017-0.698-1.003-0.835-0.984-0.967-0.961-1.095-0.933-1.217-0.901-1.333-0.865-1.443-0.825-1.547-0.781-1.643-0.734" fill-rule="evenodd" stroke="#f0f0f0"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-306.99 215.99 2.897 1.792 3.249 1.558 3.559 1.303 3.824 1.031 4.04 0.746 4.203 0.45 4.312 0.148 4.366-0.156 4.362-0.457 4.302-0.753 4.187-1.039 4.017-1.31 3.795-1.565 3.525-1.799" fill-rule="evenodd" stroke="#f0f0f0"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-252.35 215.94 827.48-467.82" fill-rule="evenodd" stroke="#f0f0f0"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)" stroke-width="16.735">
|
||||||
|
<path d="m85.68-489.92-861.89 371.28" fill-rule="evenodd" stroke="#f0f0f0" stroke-width="16.735"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)" stroke-width="16.735">
|
||||||
|
<path d="m-776.21-118.65-2.249 1.032-2.125 1.106-1.986 1.172-1.834 1.231-1.671 1.281-1.495 1.325-1.311 1.358-1.117 1.384-0.916 1.401-0.708 1.409-0.495 1.407-0.278 1.395-0.059 1.376 0.16 1.347" fill-rule="evenodd" stroke="#f0f0f0" stroke-width="16.735"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)" stroke-width="7">
|
||||||
|
<path d="m-792.29-100.42c0.491 2.4092 2.077 4.6251 4.62 6.4381" fill-rule="evenodd" stroke="#f0f0f0"/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<g stroke-width="23.642">
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-787.67-93.985 473.32 337.17" fill-rule="evenodd" stroke="#f0f0f0" stroke-width="23.642"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-314.35 243.19 2.926 1.837 3.283 1.597 3.597 1.336 3.867 1.058 4.086 0.766 4.252 0.462 4.364 0.154 4.419-0.158 4.417-0.467 4.356-0.77 4.24-1.062 4.069-1.342 3.846-1.601 3.573-1.842" fill-rule="evenodd" stroke="#f0f0f0" stroke-width="23.642"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-259.05 243.16 888-507.02" fill-rule="evenodd" stroke="#f0f0f0" stroke-width="23.642"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)" stroke-width="16.735">
|
||||||
|
<path d="m628.94-263.86 7.59-5.29 7.1-5.413 6.603-5.525 6.1-5.628 5.593-5.722 5.081-5.805 4.567-5.879 4.05-5.943 3.532-5.998 3.016-6.042 2.499-6.078 1.983-6.104 1.472-6.121 0.963-6.128" fill-rule="evenodd" stroke="#f0f0f0" stroke-width="16.735"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)" stroke-width="23.642">
|
||||||
|
<path d="m689.09-345.54c1.0337-28.608-10.861-56.249-31.613-75.813-38.017-39.631-90.98-60.852-142.52-77.03-123.47-34.737-256.26-37.263-380.85-6.6241-16.358 4.3132-32.202 10.316-48.423 15.085" fill-rule="evenodd" stroke="#f0f0f0" stroke-width="23.642"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)" stroke-width="7">
|
||||||
|
<path d="m-706.72 320.62c0.545 2.675 2.076 5.141 4.461 7.166" fill-rule="evenodd" stroke="#f0f0f0"/>
|
||||||
|
</g>
|
||||||
|
<g stroke-width="23.642">
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m585.82 146.9 7.043-5.9 6.603-6.044 6.154-6.178 5.701-6.3 5.243-6.412 4.78-6.513 4.315-6.603 3.846-6.6819 3.377-6.7509 2.906-6.8089 2.437-6.8563 1.967-6.8932 1.5-6.9198 1.035-6.9362" fill-rule="evenodd" stroke="#f0f0f0" stroke-width="23.642"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-702.25 327.78 436.27 370.23" fill-rule="evenodd" stroke="#f0f0f0" stroke-width="23.642"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-216.63 698.28 802.44-551.37" fill-rule="evenodd" stroke="#f0f0f0" stroke-width="23.642"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-265.98 698.01 2.647 1.985 2.96 1.729 3.236 1.451 3.469 1.155 3.66 0.842 3.803 0.518 3.896 0.188 3.94-0.145 3.932-0.477 3.873-0.801 3.765-1.116 3.608-1.415 3.405-1.696 3.157-1.954" fill-rule="evenodd" stroke="#f0f0f0" stroke-width="23.642"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g stroke-width="7">
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m585.82 146.9 43.13-410.77" fill-rule="evenodd" stroke="#f0f0f0"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m574.94-261.16-853.5 480.13" fill-rule="evenodd" stroke="#f0f0f0"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m574.94-261.16-0.928 9.912" fill-rule="evenodd" stroke="#f0f0f0"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-278.56 218.97 0.389 3.99" fill-rule="evenodd" stroke="#f0f0f0"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-278.56 218.97-468.64-326.25" fill-rule="evenodd" stroke="#f0f0f0"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-747.19-107.28 830.02-361.8" fill-rule="evenodd" stroke="#f0f0f0"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m82.83-469.08 492.11 207.93" fill-rule="evenodd" stroke="#f0f0f0"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-668.36-112.6 361.31 243.42" fill-rule="evenodd" stroke="#f0f0f0"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-307.05 130.83 759.87-408.69" fill-rule="evenodd" stroke="#f0f0f0"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m452.82-277.86-378.25-163.29" fill-rule="evenodd" stroke="#f0f0f0"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m74.568-441.15-742.93 328.55" fill-rule="evenodd" stroke="#f0f0f0"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-747.19-107.28 3.213 16.64" fill-rule="evenodd" stroke="#f0f0f0"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m74.568-441.15 5e-3 0.418" fill-rule="evenodd" stroke="#f0f0f0"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m74.574-440.73-742.48 328.44" fill-rule="evenodd" stroke="#f0f0f0"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m452.34-277.6-377.77-163.13" fill-rule="evenodd" stroke="#f0f0f0"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-706.72 320.62-85.575-421.04" fill-rule="evenodd" stroke="#f0f0f0"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)" stroke-width="23.642">
|
||||||
|
<path d="m689.09-345.54-46.372 400.65" fill-rule="evenodd" stroke="#f0f0f0" stroke-width="23.642"/>
|
||||||
|
</g>
|
||||||
|
<g stroke-width="7">
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m64.729-461.2-0.1061-7.58" fill-rule="evenodd" stroke="#f0f0f0"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m-737.88-111.34-1.624-8.513" fill-rule="evenodd" stroke="#f0f0f0"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m102.96-460.58-0.053-8.573" fill-rule="evenodd" stroke="#f0f0f0"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)">
|
||||||
|
<path d="m568.68-263.8 0.861-9.342" fill-rule="evenodd" stroke="#f0f0f0"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)" stroke-width="23.642">
|
||||||
|
<path d="m-702.25 327.78-85.416-421.77" fill-rule="evenodd" stroke="#f0f0f0" stroke-width="23.642"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)" stroke-width="7">
|
||||||
|
<path d="m-265.98 698.01-48.367-454.82" fill-rule="evenodd" stroke="#f0f0f0"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(.16521 0 0 .13265 151.49 93.253)" stroke-width="7">
|
||||||
|
<path d="m-216.63 698.28-42.423-455.12" fill-rule="evenodd" stroke="#f0f0f0"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 170 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg width="612" height="612" version="1.1" viewBox="0 0 612 612" xmlns="http://www.w3.org/2000/svg"><title>nakamochi logo</title><rect x="25.614" y="25.614" width="560.77" height="560.77" fill="#f7931a" stroke="#f7931a" stroke-width="51.229"/><path d="m391.05 274.39v147.62h-36.238c-0.10955-45.856 0.22212-91.719-0.17054-137.57-0.63333-13.457-3.7204-27.441-11.263-38.726-5.7502-7.9783-13.757-14.306-23.321-16.921-11.544-2.9368-24.175-2.4527-35.071 2.6744-8.1663 3.832-14.622 10.959-19.255 18.61-10.667 20.901-8.1825 44.791-8.4971 67.465v104.47h-36.238v-147.62c-0.67305-37.646 27.262-73.024 63.777-81.735 35.897-9.787 76.841 7.2086 95.011 39.728 7.3788 12.684 11.295 27.334 11.265 42.006" fill="#fff"/></svg>
|
||||||
|
After Width: | Height: | Size: 709 B |
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 196 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 499 B |
Binary file not shown.
|
After Width: | Height: | Size: 602 B |
@ -0,0 +1,22 @@
|
|||||||
|
{%- extends "layout.html" %}
|
||||||
|
{%- set_global landing = true -%}
|
||||||
|
{%- set_global current_url = "/404" -%}
|
||||||
|
{%- block meta_title %}{{ trans(key="not_found") ~ " | " ~ config.title }}{% endblock meta_title %}
|
||||||
|
{%- block multilang %}{{ nav_macro::lang_picker(transarr=[]) }}{% endblock multilang %}
|
||||||
|
|
||||||
|
{%- block header %}
|
||||||
|
<nav>
|
||||||
|
<ul class="logonav">
|
||||||
|
<li class="logo">
|
||||||
|
<a href="{{get_url(path='/', lang=lang)}}"><img src="/assets/nakamochi-bogen.svg" alt="nakamochi logo"></a>
|
||||||
|
</li>
|
||||||
|
<li class="logo-name">nakamochi</li>
|
||||||
|
</ul>
|
||||||
|
{{- nav_macro::main_nav() }}
|
||||||
|
</nav>
|
||||||
|
<h1>{{ trans(key="not_found") }}</h1>
|
||||||
|
{%- endblock header %}
|
||||||
|
|
||||||
|
{%- block main %}
|
||||||
|
<img src="/assets/pro-question-mark.png">
|
||||||
|
{%- endblock main %}
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
{%- extends "layout.html" %}
|
||||||
|
{%- block meta_title %}{{ section.title }}{% endblock meta_title %}
|
||||||
|
{%- block multilang %}{{ nav_macro::lang_picker(transarr=section.translations) }}{% endblock multilang %}
|
||||||
|
|
||||||
|
{%- block header %}
|
||||||
|
<nav>
|
||||||
|
<ul class="logonav">
|
||||||
|
<li class="logo landing"><img src="/assets/nakamochi-bogen.svg" alt="nakamochi logo"></li>
|
||||||
|
</ul>
|
||||||
|
{{- nav_macro::main_nav() }}
|
||||||
|
</nav>
|
||||||
|
<hgroup>
|
||||||
|
<h1>{{ section.title }}</h1>
|
||||||
|
<h2>{{ section.extra.tagline }}</h2>
|
||||||
|
</hgroup>
|
||||||
|
{%- endblock header %}
|
||||||
|
|
||||||
|
{%- block main %}
|
||||||
|
{{ section.content | safe }}
|
||||||
|
{%- endblock main %}
|
||||||
@ -0,0 +1,55 @@
|
|||||||
|
{%- import "nav.html" as nav_macro -%}
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="{{lang}}">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="{{ config.description }}">
|
||||||
|
<title>{% block meta_title %}{{ config.title }}{% endblock %}</title>
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
||||||
|
{%- if current_url is defined -%}
|
||||||
|
<link rel="canonical" href="{{current_url|safe}}">
|
||||||
|
{%- endif -%}
|
||||||
|
<link rel="stylesheet" href="/css/bundle.css">
|
||||||
|
</head>
|
||||||
|
{%- set landing = false %}
|
||||||
|
{%- if section.extra.landing is defined %}{% set landing = section.extra.landing %}
|
||||||
|
{%- elif page.extra.landing is defined %}{% set landing = page.extra.landing %}
|
||||||
|
{%- endif %}
|
||||||
|
<body {%- if landing %} class="bg-landing"{% endif %}>
|
||||||
|
<div class="container langpicker">
|
||||||
|
{%- block multilang %}{% endblock multilang -%}
|
||||||
|
</div>
|
||||||
|
<header class="container top">
|
||||||
|
{%- block header %}{%- endblock header %}
|
||||||
|
</header>
|
||||||
|
<main class="container top">
|
||||||
|
{%- block main %}{% endblock main -%}
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="container">
|
||||||
|
<hr/>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="https://git.qcode.ch/nakamochi/" target="_blank">
|
||||||
|
<svg role="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>sources</title><path d="M23.546 10.93L13.067.452c-.604-.603-1.582-.603-2.188 0L8.708 2.627l2.76 2.76c.645-.215 1.379-.07 1.889.441.516.515.658 1.258.438 1.9l2.658 2.66c.645-.223 1.387-.078 1.9.435.721.72.721 1.884 0 2.604-.719.719-1.881.719-2.6 0-.539-.541-.674-1.337-.404-1.996L12.86 8.955v6.525c.176.086.342.203.488.348.713.721.713 1.883 0 2.6-.719.721-1.889.721-2.609 0-.719-.719-.719-1.879 0-2.598.182-.18.387-.316.605-.406V8.835c-.217-.091-.424-.222-.6-.401-.545-.545-.676-1.342-.396-2.009L7.636 3.7.45 10.881c-.6.605-.6 1.584 0 2.189l10.48 10.477c.604.604 1.582.604 2.186 0l10.43-10.43c.605-.603.605-1.582 0-2.187"/></svg>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://github.com/nakamochi/" target="_blank" rel="noreferrer noopener">
|
||||||
|
<svg role="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub mirrors</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<p><small class="muted">
|
||||||
|
<a href="https://qeles.ch" target="_blank">qeles AG</a> •
|
||||||
|
except where otherwise noted, content on this site is licensed under a
|
||||||
|
<a href="https://creativecommons.org/licenses/by/4.0/" rel="license noreferrer noopener">CC BY 4.0</a> license.
|
||||||
|
</small></p>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,37 @@
|
|||||||
|
{%- macro main_nav() %}
|
||||||
|
<ul class="mainnav">
|
||||||
|
{%- for item in config.extra.sitenav -%}
|
||||||
|
{%- set url = get_url(path=item.path, lang=lang) -%}
|
||||||
|
{%- set is_curr_url = false -%}
|
||||||
|
{%- if current_url is defined -%}
|
||||||
|
{%- set is_curr_url = url == current_url -%}
|
||||||
|
{%- endif -%}
|
||||||
|
{%- if is_curr_url %}
|
||||||
|
<li class="muted">{{item[lang]}}</li>
|
||||||
|
{%- else %}
|
||||||
|
<li><a href="{{url|safe}}">{{item[lang]}}</a></li>
|
||||||
|
{%- endif %}
|
||||||
|
{%- endfor %}
|
||||||
|
</ul>
|
||||||
|
{%- endmacro -%}
|
||||||
|
|
||||||
|
{%- macro lang_picker(transarr) -%}
|
||||||
|
{%- set currlang = lang -%}
|
||||||
|
{%- set translations = [] -%}
|
||||||
|
{%- for t in transarr -%}
|
||||||
|
{%- if t.title -%}
|
||||||
|
{%- set_global translations = translations | concat(with=t) -%}
|
||||||
|
{%- endif -%}
|
||||||
|
{%- endfor -%}
|
||||||
|
<ul class="translist">
|
||||||
|
{%- for t in translations -%}
|
||||||
|
{%- if t.lang != currlang -%}
|
||||||
|
<li><a href="{{t.permalink|safe}}" hreflang="{{t.lang}}" title="{{t.title}}">{{t.lang|upper}}</a></li>
|
||||||
|
{%- else -%}
|
||||||
|
<li>{{t.lang|upper}}</li>
|
||||||
|
{%- endif -%}
|
||||||
|
{%- else -%}
|
||||||
|
<!-- no translations -->
|
||||||
|
{%- endfor -%}
|
||||||
|
</ul>
|
||||||
|
{%- endmacro -%}
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
{%- extends "layout.html" %}
|
||||||
|
{%- block meta_title %}{{ page.title ~ " | " ~ config.title }}{% endblock meta_title %}
|
||||||
|
{%- block multilang %}{{ nav_macro::lang_picker(transarr=page.translations) }}{% endblock multilang %}
|
||||||
|
|
||||||
|
{%- block header %}
|
||||||
|
<nav>
|
||||||
|
<ul class="logonav">
|
||||||
|
<li class="logo">
|
||||||
|
<a href="{{get_url(path='/', lang=lang)}}"><img src="/assets/nakamochi-bogen.svg" alt="nakamochi logo"></a>
|
||||||
|
</li>
|
||||||
|
<li class="logo-name">nakamochi</li>
|
||||||
|
</ul>
|
||||||
|
{{- nav_macro::main_nav() }}
|
||||||
|
</nav>
|
||||||
|
<h1>{{ page.title }}</h1>
|
||||||
|
{%- endblock header %}
|
||||||
|
|
||||||
|
{%- block main %}
|
||||||
|
{{ page.content | safe }}
|
||||||
|
{%- endblock main %}
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
<figure class="screenshot">
|
||||||
|
<img src="{{src|safe}}" alt="{{caption}}">
|
||||||
|
<figcaption>{{caption}}</figcaption>
|
||||||
|
</figure>
|
||||||
Reference in New Issue