1
0
Fork 0

🔀 Merge branch 'release/v1.4.0'

This commit is contained in:
Maxim Lebedev 2022-02-25 02:32:23 +05:00
commit dfa2950923
Signed by: toby3d
GPG Key ID: 1F14E25B7C119FC5
18 changed files with 103 additions and 197 deletions

View File

@ -1,10 +1,9 @@
.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);
margin-inline: auto;
max-inline-size: var(--center-max);
padding-inline-end: var(--center-gutters);
padding-inline-start: var(--center-gutters);
}
.center_text {

View File

@ -1,24 +1,22 @@
.cover {
display: flex;
flex-direction: column;
min-height: var(--cover-min-height);
min-block-size: var(--cover-min-height);
padding: var(--cover-space);
}
.cover > * {
margin-bottom: var(--cover-space);
margin-top: var(--cover-space);
margin-block: var(--cover-space);
}
.cover > :first-child:not(.cover__center) {
margin-top: 0;
margin-inline-start: 0;
}
.cover > :last-child:not(.cover__center) {
margin-bottom: 0;
margin-inline-end: 0;
}
.cover > .cover__center {
margin-bottom: auto;
margin-top: auto;
margin-block: auto;
}

View File

@ -1,30 +1,14 @@
.frame {
padding-bottom: calc(var(--frame-numerator) / var(--frame-denominator) * 100%);
position: relative;
}
.frame > * {
align-items: center;
bottom: 0;
aspect-ratio: var(--frame-denominator) / var(--frame-numerator);
display: flex;
justify-content: center;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
}
.frame > img,
.frame > video {
height: 100%;
block-size: 100%;
inline-size: 100%;
object-fit: cover;
width: 100%;
}
@supports(aspect-ratio: var(--frame-denominator) / var(--frame-numerator)) {
.frame {
aspect-ratio: var(--frame-denominator) / var(--frame-numerator);
padding-bottom: var(--off);
}
}

View File

@ -57,61 +57,6 @@ input[type='email'] {
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 !important;
@ -126,27 +71,6 @@ button[disabled],
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;
@ -167,19 +91,4 @@ button[disabled],
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%);
}
}

View File

@ -9,11 +9,11 @@ picture {
max-width: 100%;
}
img[width] {
img:not(.icon)[width] {
width: auto;
}
img[width][height] {
img:not(.icon)[width][height] {
height: auto;
}

View File

@ -1,14 +1,14 @@
.imposter {
inset-block-start: 50%;
inset-inline-start: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.imposter_container {
max-block-size: calc(100% - (var(--imposter-margin) * 2));
max-inline-size: calc(100% - (var(--imposter-margin) * 2));
overflow: auto;
max-width: calc(100% - (var(--imposter-margin) * 2));
max-height: calc(100% - (var(--imposter-margin) * 2));
}
.imposter_fixed {

View File

@ -1,6 +1,6 @@
.reel {
display: flex;
height: var(--reel-height);
block-size: var(--reel-height);
overflow-x: auto;
overflow-y: hidden;
scrollbar-color: var(--thumb-color) var(--track-color);
@ -29,14 +29,14 @@
.reel > img {
flex-basis: auto;
height: 100%;
block-size: 100%;
width: auto;
}
.reel > * + * {
margin-left: var(--reel-space);
margin-inline-start: var(--reel-space);
}
.js-reel_overflowing {
padding-bottom: var(--reel-space);
padding-block-end: var(--reel-space);
}

View File

@ -6,11 +6,10 @@
.stack:not(.stack_recursive) > *,
.stack.stack_recursive * {
margin-bottom: 0;
margin-top: 0;
margin-block: 0;
}
.stack:not(.stack_recursive) > * + *,
.stack.stack_recursive * + * {
margin-top: var(--stack-space);
margin-block-start: var(--stack-space);
}

View File

@ -6,29 +6,24 @@ h1,
h2,
h3,
h4 {
line-height: var(--line-height-small);
hyphens: auto;
line-height: var(--line-height-small);
}
h1 {
font-size: var(--s3);
}
h2 {
font-size: var(--s2);
}
h3 {
h2 {
font-size: var(--s1);
}
h3 {
font-size: var(--s0);
}
b,
h1,
h2,
h3,
h4,
h5,
h6,
strong,
.font-weight_bold {
font-weight: bold;
@ -41,26 +36,31 @@ select {
font: inherit;
}
figcaption,
blockquote > q {
font-style: italic;
}
:any-link {
color: hsl(240, var(--l-100), var(--l-50));
cursor: pointer;
text-decoration: underline;
text-decoration-color: hsl(240, var(--l-100), var(--l-50));
text-decoration-skip-ink: auto;
text-decoration: underline;
transition-duration: var(--speed-medium);
transition-property: text-decoration-color;
transition-property: color,
text-decoration-color;
transition-timing-function: var(--easing-standard);
}
:any-link:hover {
text-decoration-color: transparent;
color: hsl(355, var(--l-100), var(--l-45));
text-decoration-color: hsl(355, var(--l-100), var(--l-45));
}
abbr {
text-decoration: underline;
text-decoration-style: dotted;
text-decoration: underline;
}
wbr:before {
@ -76,9 +76,9 @@ q {
quotes: '«' '»';
}
ul:not([class]),
ol:not([class]) {
margin-left: 2em;
label,
figcaption {
font-size: var(--s-1);
}
ul {
@ -94,23 +94,33 @@ table {
border-collapse: collapse;
}
.page {
hr {
border: none;
height: 1px;
background: hsl(0, 0%, var(--l-20));
background-image: linear-gradient(to right,
hsl(0, 0%, var(--l-80)),
hsl(0, 0%, var(--l-20)),
hsl(0, 0%, var(--l-80)));
}
html {
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;
-apple-system,
BlinkMacSystemFont,
Segoe UI,
Roboto,
Helvetica,
Arial,
sans-serif,
Apple Color Emoji,
Segoe UI Emoji;
font-size: calc(1rem + 0.333vw);
}
.page__body {
body {
line-height: var(--line-height);
text-rendering: optimizeSpeed;
}

View File

@ -1,4 +1,4 @@
(function() {
(function () {
const className = 'js-cover';
const covers = Array.from(document.querySelectorAll(`.${className}`));
const toggleVisibleData = (entries, observer) => {
@ -8,9 +8,11 @@
};
if ('IntersectionObserver' in window) {
covers.forEach(t => t.setAttribute('data-observe', ''));
const observer = new IntersectionObserver(toggleVisibleData);
covers.forEach(t => observer.observe(t));
covers.forEach(t => {
t.setAttribute('data-observe', '');
observer.observe(t);
});
}
})();

View File

@ -1,7 +1,7 @@
(function() {
(function () {
const className = 'js-reel';
const reels = Array.from(document.querySelectorAll(`.${className}`));
const toggleOverflowClass = (elem) => {
const toggleOverflowClass = elem => {
elem.classList.toggle('js-reel_overflowing', elem.scrollWidth > elem.clientWidth);
};
@ -15,7 +15,7 @@
if ('MutationObserver' in window) {
new MutationObserver(entries => {
toggleOverflowClass(entries[0].target);
}).observe(reel, {childList: true});
}).observe(reel, { childList: true });
}
}
})();

View File

@ -7,4 +7,4 @@ module:
- source: assets
target: assets/va
- source: layouts/partials
target: layouts/partials/va
target: layouts/partials/va

2
go.mod
View File

@ -1,3 +1,3 @@
module gitlab.com/toby3d/va
module source.toby3d.me/toby3d/va
go 1.16

View File

@ -1,10 +1,9 @@
{{- with partialCached "va/script" . -}}
<script
async
crossorigin="anonymous"
defer
integrity="{{ .Data.Integrity }}"
<script type="{{ .MediaType.String }}"
src="{{ .RelPermalink }}"
type="{{ .MediaType.String }}">
integrity="{{ . }}"
crossorigin="anonymous"
async
defer>
</script>
{{ end }}
{{- end -}}

View File

@ -1,22 +1,20 @@
{{ with partialCached "va/style" . }}
<link
{{- with partialCached "va/style" . -}}
<link rel="preload stylesheet"
as="style"
crossorigin="anonymous"
href="{{ .RelPermalink }}"
importance="high"
integrity="{{ .Data.Integrity }}"
referrerpolicy="no-referrer-when-downgrade"
rel="preload stylesheet"
type="{{ .MediaType.String }}">
{{ end }}
{{ with partialCached "va/script" . }}
<link
type="{{ .MediaType.String }}"
importance="high"
crossorigin="anonymous"
referrerpolicy="no-referrer-when-downgrade">
{{- end -}}
{{- with partialCached "va/script" . -}}
<link rel="preload"
as="script"
crossorigin="anonymous"
href="{{ .RelPermalink }}"
importance="high"
integrity="{{ .Data.Integrity }}"
referrerpolicy="no-referrer-when-downgrade"
rel="preload"
type="{{ .MediaType.String }}">
{{ end }}
type="{{ .MediaType.String }}"
importance="high"
crossorigin="anonymous"
referrerpolicy="no-referrer-when-downgrade">
{{- end -}}

View File

@ -1,12 +1,16 @@
{{- $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" | js.Build "va.js" -}}
{{- if hugo.IsProduction -}}
{{- $script = $script | minify | fingerprint "sha512" -}}
{{- end -}}
{{- return $script -}}

View File

@ -1,4 +1,5 @@
{{- $styles := slice -}}
{{- range $index, $name := slice
"reset"
"variables"
@ -20,8 +21,11 @@
-}}
{{- $styles = $styles | append (resources.Get (printf "va/css/%s.css" $name)) -}}
{{- end -}}
{{- $style := $styles | resources.Concat "va.css" -}}
{{- if hugo.IsProduction -}}
{{- $style = $style | minify | fingerprint "sha512" -}}
{{- end -}}
{{- return $style -}}

View File

@ -2,7 +2,7 @@
name: "VA"
description: "Dead simple responsive-flexible-adaptive CSS framework"
license: "MIT"
licenselink: "https://github.com/toby3d/va/blob/master/LICENSE"
licenselink: "https://source.toby3d.me/toby3d/va/blob/master/LICENSE"
homepage: "https://toby3d.me/"
min_version: "0.81.0"
author: