🎉 Initial commit
This commit is contained in:
commit
6695f11e84
GPG key ID:
1F14E25B7C119FC5
28 changed files with 914 additions and 0 deletions
20
LICENSE.md
Normal file
20
LICENSE.md
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
# MIT License
|
||||
Copyright (c) 2021 Maxim Lebedev
|
||||
|
||||
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.
|
||||
65
README.md
Normal file
65
README.md
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
# VA
|
||||
> Dead simple responsive-flexible-adaptive CSS framework for [Hugo](https://gohugo.io/) websites
|
||||
|
||||
## Install
|
||||
### Config
|
||||
[Import module](https://gohugo.io/hugo-modules/use-modules/#use-a-module-for-a-theme) in your site
|
||||
configuration:
|
||||
|
||||
```yaml
|
||||
imports:
|
||||
- path: gitlab.com/toby3d/va
|
||||
```
|
||||
|
||||
### Templates
|
||||
Inject cached partials in your `<head>` (as early as possible to speed up loading) and `<body>` (preferably as close as possible to the closing tag):
|
||||
|
||||
```html
|
||||
<head>
|
||||
{{ partialCached "va/head" . }}
|
||||
</head>
|
||||
<body>
|
||||
...
|
||||
{{ partialCached "va/body" . }}
|
||||
</body>
|
||||
```
|
||||
|
||||
...And that's it!
|
||||
|
||||
## Usage
|
||||
Use the classes from the attached styles for the layout of your templates.
|
||||
|
||||
### Methodologies
|
||||
I use [CUBE CSS](https://cube.fyi/) for class readability with brackets and class sorting and [BEM](https://bem.info/) to reduce code coherence and ease of debugging.
|
||||
|
||||
### Blocks
|
||||
See [Every Layout](https://every-layout.dev/) (and buy the book, it's great!).
|
||||
|
||||
### Exceptions
|
||||
Use variables for changing some values and implement exceptions.
|
||||
|
||||
Easy example:
|
||||
|
||||
```html
|
||||
<figure class="frame" style="--frame-denominator: 1; --frame-numerator: 1">
|
||||
...
|
||||
</figure>
|
||||
```
|
||||
|
||||
Advanced example:
|
||||
|
||||
```html
|
||||
<div class="[ sidebar sidebar_side_left sidebar_no-stretch ][ stack center ]" style="--sidebar-side-width: 25%; --sidebar-content-min: 70%; --center-gutters: var(--s0); --center-max: calc(var(--measure) * 1.5)">
|
||||
<div>
|
||||
<aside>
|
||||
...
|
||||
</aside>
|
||||
<article>
|
||||
...
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Docs
|
||||
Coming soon.
|
||||
15
assets/css/box.css
Normal file
15
assets/css/box.css
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
.box {
|
||||
padding: var(--box-padding);
|
||||
border-width: var(--border-thin);
|
||||
border-style: solid;
|
||||
border-color: currentColor;
|
||||
}
|
||||
|
||||
.box * {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.box[data-state='invert'] {
|
||||
background-color: var(--color);
|
||||
color: var(--background-color);
|
||||
}
|
||||
18
assets/css/center.css
Normal file
18
assets/css/center.css
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
.center {
|
||||
box-sizing: content-box;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: var(--center-max);
|
||||
padding-left: var(--center-gutters);
|
||||
padding-right: var(--center-gutters);
|
||||
}
|
||||
|
||||
.center_text {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.center_intrinsic {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
15
assets/css/cluster.css
Normal file
15
assets/css/cluster.css
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
.cluster {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.cluster > * {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: var(--cluster-justify);
|
||||
align-items: var(--cluster-align);
|
||||
margin: calc(var(--cluster-space) / 2 * -1);
|
||||
}
|
||||
|
||||
.cluster > * > * {
|
||||
margin: calc(var(--cluster-space) / 2);
|
||||
}
|
||||
24
assets/css/cover.css
Normal file
24
assets/css/cover.css
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
.cover {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: var(--cover-min-height);
|
||||
padding: var(--cover-space);
|
||||
}
|
||||
|
||||
.cover > * {
|
||||
margin-top: var(--cover-space);
|
||||
margin-bottom: var(--cover-space);
|
||||
}
|
||||
|
||||
.cover > :first-child:not(.cover__main) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.cover > :last-child:not(.cover__main) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cover > .cover__main {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
31
assets/css/frame.css
Normal file
31
assets/css/frame.css
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
.frame {
|
||||
padding-bottom: calc(var(--frame-numerator) / var(--frame-denominator) * 100%);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@supports(aspect-ratio: var(--frame-denominator) / var(--frame-numerator)) {
|
||||
.frame {
|
||||
aspect-ratio: var(--frame-denominator) / var(--frame-numerator);
|
||||
padding-bottom: var(--off);
|
||||
}
|
||||
}
|
||||
|
||||
.frame > * {
|
||||
align-items: center;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.frame > img,
|
||||
.frame > video,
|
||||
.frame > iframe {
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
}
|
||||
185
assets/css/general.css
Normal file
185
assets/css/general.css
Normal file
|
|
@ -0,0 +1,185 @@
|
|||
*,
|
||||
:before,
|
||||
:after {
|
||||
background-color: transparent;
|
||||
border: 0 solid;
|
||||
box-sizing: border-box;
|
||||
color: inherit;
|
||||
font-family: inherit;
|
||||
margin: 0;
|
||||
overflow-wrap: break-word;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:focus,
|
||||
:focus-visible {
|
||||
outline-color: var(--color);
|
||||
outline-offset: var(--border-thin);
|
||||
outline-style: dotted;
|
||||
outline-width: var(--border-thin);
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
div,
|
||||
header,
|
||||
nav,
|
||||
main,
|
||||
footer {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
nav,
|
||||
main,
|
||||
header,
|
||||
footer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
kbd:not(.unstyled) {
|
||||
background-color: hsl(0, 0%, var(--l-90));
|
||||
border-color: hsl(0, 0%, var(--l-70));
|
||||
border-radius: var(--border-thin);
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
color: hsl(0, 0%, var(--l-20));
|
||||
font-size: 0.85em;
|
||||
padding: var(--border-thin) var(--border-thick);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
select {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type='email'] {
|
||||
border-width: var(--border-thin);
|
||||
padding: var(--s-3) var(--s0);
|
||||
}
|
||||
|
||||
/* NOTE(toby3d): See https://ishadeed.com/article/styling-the-good-old-button/ */
|
||||
button,
|
||||
.button {
|
||||
align-items: center;
|
||||
appearance: button;
|
||||
background-color: var(--background-color);
|
||||
border-color: var(--background-color);
|
||||
border-width: var(--border-thin);
|
||||
color: currentColor;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
min-width: var(--s5);
|
||||
overflow: visible;
|
||||
padding: var(--s-3) var(--s1);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-transform: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
button.with-icon:not(.icon_side_left):not(.icon_side_right),
|
||||
.button.with-icon:not(.icon_side_left):not(.icon_side_right) {
|
||||
padding: var(--s1);
|
||||
}
|
||||
|
||||
button[data-state='invert'],
|
||||
.button[data-state='invert'] {
|
||||
filter: invert(100%);
|
||||
}
|
||||
|
||||
/* NOTE(toby3d): See https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7 */
|
||||
button:hover,
|
||||
.button:hover {
|
||||
/* TODO(toby3d) */
|
||||
}
|
||||
|
||||
button:focus,
|
||||
.button:focus {
|
||||
box-shadow: 0 0 var(--s-1) var(--background-color);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button:active,
|
||||
.button:active {
|
||||
/* TODO(toby3d) */
|
||||
}
|
||||
|
||||
button[disabled],
|
||||
.button[disabled] {
|
||||
background-color: hsl(0, 0%, var(--l-30));
|
||||
color: hsl(0, 0%, var(--l-75));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
[hidden],
|
||||
.display_none {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[hidden] + *,
|
||||
.display_none + * {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
[tabindex="-1"]:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.page {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
background-color: var(--background-color);
|
||||
overscroll-behavior: contain;
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-color: var(--thumb-color) var(--track-color);
|
||||
scrollbar-width: var(--border-thick);
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.page__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.body__main {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
/* NOTE(toby3d): https://allyjs.io/tutorials/hiding-elements.html#how-to-hide-elements-visually */
|
||||
.visually-hidden:not(:focus-visible):not(:active) {
|
||||
border: 0;
|
||||
clip-path: inset(100%);
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation-duration: 0.01ms;
|
||||
animation-iteration-count: 1;
|
||||
transition-duration: 0.01ms;
|
||||
}
|
||||
|
||||
.page {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.page {
|
||||
scrollbar-color: var(--track-color) var(--thumb-color);
|
||||
}
|
||||
|
||||
button,
|
||||
.button {
|
||||
filter: invert(100%);
|
||||
}
|
||||
}
|
||||
14
assets/css/grid.css
Normal file
14
assets/css/grid.css
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
.grid {
|
||||
display: grid;
|
||||
grid-gap: var(--grid-space);
|
||||
}
|
||||
|
||||
.grid_rows_masonry {
|
||||
grid-template-rows: masonry;
|
||||
}
|
||||
|
||||
@supports (width: min(var(--grid-min), 100%)) {
|
||||
.grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min), 100%), 1fr));
|
||||
}
|
||||
}
|
||||
19
assets/css/icon.css
Normal file
19
assets/css/icon.css
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
.icon {
|
||||
width: 0.75em;
|
||||
width: 1cap;
|
||||
height: 0.75em;
|
||||
height: 1cap;
|
||||
}
|
||||
|
||||
.with-icon {
|
||||
align-items: baseline;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.with-icon.icon_side_left > .icon {
|
||||
margin-inline-end: var(--icon-space);
|
||||
}
|
||||
|
||||
.with-icon.icon_side_right > .icon {
|
||||
margin-inline-start: var(--icon-space);
|
||||
}
|
||||
33
assets/css/image.css
Normal file
33
assets/css/image.css
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
img {
|
||||
background-color: transparent;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
img,
|
||||
picture {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
img[width] {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
img[width][height] {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
img[src$=".svg"] {
|
||||
height: auto;
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* TODO(toby3d): visually find img tags without alt attribute */
|
||||
img:not([alt]) {
|
||||
filter: blur(var(--border-thick));
|
||||
}
|
||||
|
||||
main img {
|
||||
content-visibility: auto;
|
||||
}
|
||||
16
assets/css/imposter.css
Normal file
16
assets/css/imposter.css
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
.imposter {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.imposter_container {
|
||||
overflow: auto;
|
||||
max-width: calc(100% - (var(--imposter-margin) * 2));
|
||||
max-height: calc(100% - (var(--imposter-margin) * 2));
|
||||
}
|
||||
|
||||
.imposter_fixed {
|
||||
position: fixed;
|
||||
}
|
||||
41
assets/css/reel.css
Normal file
41
assets/css/reel.css
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
.reel {
|
||||
display: flex;
|
||||
height: var(--reel-height);
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.reel::-webkit-scrollbar {
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.reel::-webkit-scrollbar-track {
|
||||
background-color: var(--track-color);
|
||||
}
|
||||
|
||||
.reel::-webkit-scrollbar-thumb {
|
||||
background-color: var(--track-color);
|
||||
background-image: linear-gradient(var(--track-color) 0,
|
||||
var(--track-color) 0.25rem,
|
||||
var(--thumb-color) 0.25rem,
|
||||
var(--thumb-color) 0.75rem,
|
||||
var(--track-color) 0.75rem);
|
||||
}
|
||||
|
||||
.reel > * {
|
||||
flex: 0 0 var(--reel-item-width);
|
||||
}
|
||||
|
||||
.reel > img {
|
||||
flex-basis: auto;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.reel > * + * {
|
||||
margin-left: var(--reel-space);
|
||||
}
|
||||
|
||||
.js-reel_overflowing {
|
||||
padding-bottom: var(--reel-space);
|
||||
}
|
||||
10
assets/css/reset.css
Normal file
10
assets/css/reset.css
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
*:not(svg|*) {
|
||||
all: unset;
|
||||
display: revert;
|
||||
}
|
||||
|
||||
*,
|
||||
:before,
|
||||
:after{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
26
assets/css/sidebar.css
Normal file
26
assets/css/sidebar.css
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
.sidebar {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.sidebar > * {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: calc(var(--sidebar-space) / 2 * -1);
|
||||
}
|
||||
|
||||
.sidebar > * > * {
|
||||
flex-basis: var(--sidebar-side-width);
|
||||
flex-grow: 1;
|
||||
margin: calc(var(--sidebar-space) / 2);
|
||||
}
|
||||
|
||||
.sidebar_no-stretch > * {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.sidebar_side_left > * > :last-child,
|
||||
.sidebar_side_right > * > :first-child {
|
||||
flex-basis: 0;
|
||||
flex-grow: 999;
|
||||
min-width: calc(var(--sidebar-content-min) - var(--sidebar-space));
|
||||
}
|
||||
16
assets/css/stack.css
Normal file
16
assets/css/stack.css
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
.stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.stack:not(.stack_recursive) > *,
|
||||
.stack.stack_recursive * {
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.stack:not(.stack_recursive) > * + *,
|
||||
.stack.stack_recursive * + * {
|
||||
margin-top: var(--stack-space);
|
||||
}
|
||||
18
assets/css/switcher.css
Normal file
18
assets/css/switcher.css
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
.switcher > * {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: calc((var(--switcher-space) / 2) * -1);
|
||||
}
|
||||
|
||||
.switcher > * > * {
|
||||
flex-basis: calc((var(--switcher-threshold) - (100% - var(--switcher-space))) * 999);
|
||||
flex-grow: 1;
|
||||
margin: calc(var(--switcher-space) / 2);
|
||||
}
|
||||
|
||||
.switcher_limit_2 > * > :nth-last-child(n+3),
|
||||
.switcher_limit_2 > * > :nth-last-child(n+3) ~ *,
|
||||
.switcher_limit_3 > * > :nth-last-child(n+4),
|
||||
.switcher_limit_3 > * > :nth-last-child(n+4) ~ * {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
116
assets/css/typography.css
Normal file
116
assets/css/typography.css
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
article {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
line-height: var(--line-height-small);
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: var(--s3);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--s2);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--s1);
|
||||
}
|
||||
|
||||
b,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
strong,
|
||||
.font-weight_bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
blockquote > q {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
:any-link {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
text-decoration-skip-ink: auto;
|
||||
transition-duration: 200ms;
|
||||
transition-property: text-decoration-color;
|
||||
transition-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1);
|
||||
}
|
||||
|
||||
:any-link:hover {
|
||||
text-decoration-color: transparent;
|
||||
}
|
||||
|
||||
abbr {
|
||||
text-decoration: underline;
|
||||
text-decoration-style: dotted;
|
||||
}
|
||||
|
||||
wbr:before {
|
||||
content: "\200B";
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
q {
|
||||
quotes: '«' '»';
|
||||
}
|
||||
|
||||
ul:not([class]),
|
||||
ol:not([class]) {
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: '一 ';
|
||||
}
|
||||
|
||||
ul[class],
|
||||
ol[class] {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.page {
|
||||
color: var(--color);
|
||||
font-display: optional;
|
||||
font-family: system-ui,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
Segoe UI,
|
||||
Roboto,
|
||||
Helvetica,
|
||||
Arial,
|
||||
sans-serif,
|
||||
Apple Color Emoji,
|
||||
Segoe UI Emoji;
|
||||
font-size: calc(1rem + 0.333vw);
|
||||
}
|
||||
|
||||
.page__body {
|
||||
line-height: var(--line-height);
|
||||
text-rendering: optimizeSpeed;
|
||||
}
|
||||
128
assets/css/variables.css
Normal file
128
assets/css/variables.css
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
:root {
|
||||
/* NOTE(toby3d): Booleans */
|
||||
--on: initial;
|
||||
--off: ;
|
||||
|
||||
--measure: 65ch;
|
||||
--ratio: 1.4;
|
||||
|
||||
/* NOTE(toby3d): Sizes */
|
||||
--s-5: calc(var(--s-4) / var(--ratio));
|
||||
--s-4: calc(var(--s-3) / var(--ratio));
|
||||
--s-3: calc(var(--s-2) / var(--ratio));
|
||||
--s-2: calc(var(--s-1) / var(--ratio));
|
||||
--s-1: calc(var(--s0) / var(--ratio));
|
||||
--s0: 1rem;
|
||||
--s1: calc(var(--s0) * var(--ratio));
|
||||
--s2: calc(var(--s1) * var(--ratio));
|
||||
--s3: calc(var(--s2) * var(--ratio));
|
||||
--s4: calc(var(--s3) * var(--ratio));
|
||||
--s5: calc(var(--s4) * var(--ratio));
|
||||
|
||||
/* NOTE(toby3d): Border width */
|
||||
--border-thick: var(--s-2);
|
||||
--border-thin: var(--s-5);
|
||||
|
||||
/* NOTE(toby3d): Line heights */
|
||||
--line-height-small: calc(var(--ratio) * 0.8);
|
||||
--line-height: var(--ratio);
|
||||
|
||||
/* NOTE(toby3d): Lightness values of LCH */
|
||||
--l-0: 0%;
|
||||
--l-5: 5%;
|
||||
--l-10: 10%;
|
||||
--l-15: 15%;
|
||||
--l-20: 20%;
|
||||
--l-25: 25%;
|
||||
--l-30: 30%;
|
||||
--l-35: 35%;
|
||||
--l-40: 40%;
|
||||
--l-45: 45%;
|
||||
--l-50: 50%;
|
||||
--l-55: 55%;
|
||||
--l-60: 60%;
|
||||
--l-65: 65%;
|
||||
--l-70: 70%;
|
||||
--l-75: 75%;
|
||||
--l-80: 80%;
|
||||
--l-85: 85%;
|
||||
--l-90: 90%;
|
||||
--l-95: 95%;
|
||||
--l-100: 100%;
|
||||
|
||||
/* NOTE(toby3d): Colors */
|
||||
--background-color: hsl(0, 0%, var(--l-100));
|
||||
--color: hsl(0, 0%, var(--l-0));
|
||||
--thumb-color: hsl(0, 0%, 25%);
|
||||
--track-color: hsl(0, 0%, 75%);
|
||||
|
||||
/* NOTE(toby3d): Every Layout */
|
||||
--box-border-width: var(--border-thin);
|
||||
--box-padding: var(--s1);
|
||||
|
||||
--center-gutters: var(--off);
|
||||
--center-max: var(--measure);
|
||||
|
||||
--cluster-align: center;
|
||||
--cluster-justify: center;
|
||||
--cluster-space: var(--s0);
|
||||
|
||||
--cover-min-height: 0;
|
||||
--cover-space: 0;
|
||||
|
||||
--frame-denominator: 16;
|
||||
--frame-numerator: 9;
|
||||
|
||||
--grid-min: 250px;
|
||||
--grid-space: var(--s1);
|
||||
|
||||
--icon-space: var(--s0);
|
||||
|
||||
--reel-height: auto;
|
||||
--reel-item-width: auto;
|
||||
--reel-space: var(--s0);
|
||||
|
||||
--sidebar-content-min: 50%;
|
||||
--sidebar-side-width: var(--off);
|
||||
--sidebar-space: var(--s1);
|
||||
|
||||
--stack-space: var(--s1);
|
||||
|
||||
--imposter-margin: 0px;
|
||||
|
||||
--switcher-threshold: var(--measure);
|
||||
--switcher-space: var(--s1);
|
||||
}
|
||||
|
||||
@supports (background-color: lch(100% 0 0)) and (color: lch(0% 0 0)) {
|
||||
:root {
|
||||
--background-color: lch(var(--l-100) 0 0);
|
||||
--color: lch(var(--l-0) 0 0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--l-0: 100%;
|
||||
--l-5: 95%;
|
||||
--l-10: 90%;
|
||||
--l-15: 85%;
|
||||
--l-20: 80%;
|
||||
--l-25: 75%;
|
||||
--l-30: 70%;
|
||||
--l-35: 65%;
|
||||
--l-40: 60%;
|
||||
--l-45: 55%;
|
||||
--l-50: 50%;
|
||||
--l-55: 45%;
|
||||
--l-60: 40%;
|
||||
--l-65: 35%;
|
||||
--l-70: 30%;
|
||||
--l-75: 25%;
|
||||
--l-80: 20%;
|
||||
--l-85: 15%;
|
||||
--l-90: 10%;
|
||||
--l-95: 5%;
|
||||
--l-100: 0%;
|
||||
}
|
||||
}
|
||||
16
assets/js/cover.js
Normal file
16
assets/js/cover.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
(function() {
|
||||
const className = 'cover';
|
||||
const covers = Array.from(document.querySelectorAll(`.${className}`));
|
||||
const toggleVisibleData = (entries, observer) => {
|
||||
entries.forEach(entry => {
|
||||
entry.target.setAttribute('data-visible', entry.isIntersecting);
|
||||
});
|
||||
};
|
||||
|
||||
if ('IntersectionObserver' in window) {
|
||||
covers.forEach(t => t.setAttribute('data-observe', ''));
|
||||
|
||||
const observer = new IntersectionObserver(toggleVisibleData);
|
||||
covers.forEach(t => observer.observe(t));
|
||||
}
|
||||
})();
|
||||
21
assets/js/reel.js
Normal file
21
assets/js/reel.js
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
(function() {
|
||||
const className = 'reel';
|
||||
const reels = Array.from(document.querySelectorAll(`.${className}`));
|
||||
const toggleOverflowClass = (elem) => {
|
||||
elem.classList.toggle('js-reel_overflowing', elem.scrollWidth > elem.clientWidth);
|
||||
};
|
||||
|
||||
for (let reel of reels) {
|
||||
if ('ResizeObserver' in window) {
|
||||
new ResizeObserver(entries => {
|
||||
toggleOverflowClass(entries[0].target);
|
||||
}).observe(reel);
|
||||
}
|
||||
|
||||
if ('MutationObserver' in window) {
|
||||
new MutationObserver(entries => {
|
||||
toggleOverflowClass(entries[0].target);
|
||||
}).observe(reel, {childList: true});
|
||||
}
|
||||
}
|
||||
})();
|
||||
10
config.yaml
Normal file
10
config.yaml
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
module:
|
||||
hugoVersion:
|
||||
extended: false
|
||||
min: "0.81.0"
|
||||
mounts:
|
||||
- source: assets
|
||||
target: assets/va
|
||||
- source: layouts/partials
|
||||
target: layouts/partials/va
|
||||
3
go.mod
Normal file
3
go.mod
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
module gitlab.com/toby3d/va
|
||||
|
||||
go 1.16
|
||||
2
layouts/partials/body.html
Normal file
2
layouts/partials/body.html
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
{{- $script := partialCached "va/script" . | fingerprint "sha512" -}}
|
||||
<script src="{{ $script.RelPermalink | absURL }}" async defer></script>
|
||||
4
layouts/partials/head.html
Normal file
4
layouts/partials/head.html
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
{{- $style := partialCached "va/style" . | fingerprint "sha512" -}}
|
||||
<link rel="preload stylesheet" as="style" href="{{ $style.RelPermalink | absURL }}" type="text/css" integrity="{{ $style.Data.Integrity }}" importance="high">
|
||||
{{- $script := partialCached "va/script" . | fingerprint "sha512" -}}
|
||||
<link rel="preload" as="script" href="{{ $script.RelPermalink | absURL }}" type="text/javascript" integrity="{{ $script.Data.Integrity }}" importance="high">
|
||||
12
layouts/partials/script.html
Normal file
12
layouts/partials/script.html
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
{{- $scripts := slice -}}
|
||||
{{- range $index, $name := slice
|
||||
"cover"
|
||||
"reel"
|
||||
-}}
|
||||
{{- $scripts = $scripts | append (resources.Get (printf "va/js/%s.js" $name)) -}}
|
||||
{{- end -}}
|
||||
{{- $script := $scripts | resources.Concat "va.js" -}}
|
||||
{{- if ne $.Site.IsServer true -}}
|
||||
{{- $script = $script | minify -}}
|
||||
{{- end -}}
|
||||
{{- return $script -}}
|
||||
26
layouts/partials/style.html
Normal file
26
layouts/partials/style.html
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
{{- $styles := slice -}}
|
||||
{{- range $index, $name := slice
|
||||
"variables"
|
||||
"general"
|
||||
"image"
|
||||
"typography"
|
||||
"switcher"
|
||||
"center"
|
||||
"cover"
|
||||
"stack"
|
||||
"box"
|
||||
"grid"
|
||||
"sidebar"
|
||||
"cluster"
|
||||
"frame"
|
||||
"reel"
|
||||
"imposter"
|
||||
"icon"
|
||||
-}}
|
||||
{{- $styles = $styles | append (resources.Get (printf "va/css/%s.css" $name)) -}}
|
||||
{{- end -}}
|
||||
{{- $style := $styles | resources.Concat "va.css" -}}
|
||||
{{- if ne $.Site.IsServer true -}}
|
||||
{{- $style = $style | minify -}}
|
||||
{{- end -}}
|
||||
{{- return $style -}}
|
||||
10
theme.yaml
Normal file
10
theme.yaml
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
name: "VA"
|
||||
description: "Dead simple responsive-flexible-adaptive CSS framework"
|
||||
license: "MIT"
|
||||
licenselink: "https://github.com/toby3d/va/blob/master/LICENSE"
|
||||
homepage: "https://toby3d.me/"
|
||||
min_version: "0.81.0"
|
||||
author:
|
||||
name: "Maxim Lebedev"
|
||||
homepage: "https://toby3d.me/"
|
||||
Loading…
Reference in a new issue