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