🔀 Merge branch 'release/v1.4.0'
This commit is contained in:
commit
dfa2950923
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
|
@ -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%);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
|
|
@ -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 });
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
|
|
@ -7,4 +7,4 @@ module:
|
|||
- source: assets
|
||||
target: assets/va
|
||||
- source: layouts/partials
|
||||
target: layouts/partials/va
|
||||
target: layouts/partials/va
|
||||
|
|
2
go.mod
2
go.mod
|
@ -1,3 +1,3 @@
|
|||
module gitlab.com/toby3d/va
|
||||
module source.toby3d.me/toby3d/va
|
||||
|
||||
go 1.16
|
||||
|
|
|
@ -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 -}}
|
|
@ -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 -}}
|
|
@ -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 -}}
|
||||
|
|
|
@ -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 -}}
|
||||
|
|
|
@ -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:
|
||||
|
|
Loading…
Reference in New Issue