commit 6695f11e84ee3ddd1c651e74524463d2847889c4 Author: Maxim Lebedev Date: Tue Jun 8 19:43:43 2021 +0500 :tada: Initial commit diff --git a/LICENSE.md b/LICENSE.md new file mode 100644 index 0000000..8a43c23 --- /dev/null +++ b/LICENSE.md @@ -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. diff --git a/README.md b/README.md new file mode 100644 index 0000000..0d59698 --- /dev/null +++ b/README.md @@ -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 `` (as early as possible to speed up loading) and `` (preferably as close as possible to the closing tag): + +```html + + {{ partialCached "va/head" . }} + + + ... + {{ partialCached "va/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 +

+ ... + +``` + +Advanced example: + +```html + +``` + +### Docs +Coming soon. diff --git a/assets/css/box.css b/assets/css/box.css new file mode 100644 index 0000000..25fd373 --- /dev/null +++ b/assets/css/box.css @@ -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); +} diff --git a/assets/css/center.css b/assets/css/center.css new file mode 100644 index 0000000..99b9111 --- /dev/null +++ b/assets/css/center.css @@ -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; +} diff --git a/assets/css/cluster.css b/assets/css/cluster.css new file mode 100644 index 0000000..ebf1616 --- /dev/null +++ b/assets/css/cluster.css @@ -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); +} diff --git a/assets/css/cover.css b/assets/css/cover.css new file mode 100644 index 0000000..685f44a --- /dev/null +++ b/assets/css/cover.css @@ -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; +} diff --git a/assets/css/frame.css b/assets/css/frame.css new file mode 100644 index 0000000..32453b2 --- /dev/null +++ b/assets/css/frame.css @@ -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%; +} diff --git a/assets/css/general.css b/assets/css/general.css new file mode 100644 index 0000000..a95bae5 --- /dev/null +++ b/assets/css/general.css @@ -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%); + } +} diff --git a/assets/css/grid.css b/assets/css/grid.css new file mode 100644 index 0000000..c42ac28 --- /dev/null +++ b/assets/css/grid.css @@ -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)); + } +} diff --git a/assets/css/icon.css b/assets/css/icon.css new file mode 100644 index 0000000..9c7f149 --- /dev/null +++ b/assets/css/icon.css @@ -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); +} diff --git a/assets/css/image.css b/assets/css/image.css new file mode 100644 index 0000000..aa6d01d --- /dev/null +++ b/assets/css/image.css @@ -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; +} diff --git a/assets/css/imposter.css b/assets/css/imposter.css new file mode 100644 index 0000000..2203cf1 --- /dev/null +++ b/assets/css/imposter.css @@ -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; +} diff --git a/assets/css/reel.css b/assets/css/reel.css new file mode 100644 index 0000000..830944f --- /dev/null +++ b/assets/css/reel.css @@ -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); +} diff --git a/assets/css/reset.css b/assets/css/reset.css new file mode 100644 index 0000000..a635739 --- /dev/null +++ b/assets/css/reset.css @@ -0,0 +1,10 @@ +*:not(svg|*) { + all: unset; + display: revert; +} + +*, +:before, +:after{ + box-sizing: border-box; +} diff --git a/assets/css/sidebar.css b/assets/css/sidebar.css new file mode 100644 index 0000000..d73275d --- /dev/null +++ b/assets/css/sidebar.css @@ -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)); +} diff --git a/assets/css/stack.css b/assets/css/stack.css new file mode 100644 index 0000000..b0230d6 --- /dev/null +++ b/assets/css/stack.css @@ -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); +} diff --git a/assets/css/switcher.css b/assets/css/switcher.css new file mode 100644 index 0000000..6f05fd7 --- /dev/null +++ b/assets/css/switcher.css @@ -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%; +} diff --git a/assets/css/typography.css b/assets/css/typography.css new file mode 100644 index 0000000..ad01deb --- /dev/null +++ b/assets/css/typography.css @@ -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; +} diff --git a/assets/css/variables.css b/assets/css/variables.css new file mode 100644 index 0000000..1ff99a3 --- /dev/null +++ b/assets/css/variables.css @@ -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%; + } +} diff --git a/assets/js/cover.js b/assets/js/cover.js new file mode 100644 index 0000000..4406fce --- /dev/null +++ b/assets/js/cover.js @@ -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)); + } +})(); diff --git a/assets/js/reel.js b/assets/js/reel.js new file mode 100644 index 0000000..a912b40 --- /dev/null +++ b/assets/js/reel.js @@ -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}); + } + } +})(); diff --git a/config.yaml b/config.yaml new file mode 100644 index 0000000..f4c05e6 --- /dev/null +++ b/config.yaml @@ -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 \ No newline at end of file diff --git a/go.mod b/go.mod new file mode 100644 index 0000000..fb2a571 --- /dev/null +++ b/go.mod @@ -0,0 +1,3 @@ +module gitlab.com/toby3d/va + +go 1.16 diff --git a/layouts/partials/body.html b/layouts/partials/body.html new file mode 100644 index 0000000..37ceffc --- /dev/null +++ b/layouts/partials/body.html @@ -0,0 +1,2 @@ +{{- $script := partialCached "va/script" . | fingerprint "sha512" -}} + diff --git a/layouts/partials/head.html b/layouts/partials/head.html new file mode 100644 index 0000000..c65e106 --- /dev/null +++ b/layouts/partials/head.html @@ -0,0 +1,4 @@ +{{- $style := partialCached "va/style" . | fingerprint "sha512" -}} + +{{- $script := partialCached "va/script" . | fingerprint "sha512" -}} + diff --git a/layouts/partials/script.html b/layouts/partials/script.html new file mode 100644 index 0000000..ad06bd1 --- /dev/null +++ b/layouts/partials/script.html @@ -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 -}} diff --git a/layouts/partials/style.html b/layouts/partials/style.html new file mode 100644 index 0000000..2b2747b --- /dev/null +++ b/layouts/partials/style.html @@ -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 -}} diff --git a/theme.yaml b/theme.yaml new file mode 100644 index 0000000..38070e3 --- /dev/null +++ b/theme.yaml @@ -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/"