diff --git a/src/_data/arts.json b/src/_data/arts.json index daa21d9..b7af643 100644 --- a/src/_data/arts.json +++ b/src/_data/arts.json @@ -2,52 +2,61 @@ { "artId":"ghost", "bgColor":"Bgc-$artGhost", + "height": "xxl_H45u", "showInMain": true }, { "artId":"flushed-emoji", "bgColor":"Bgc-$artFlushedEmoji", + "height": "xxl_H55u", + "showInMain": true + }, + { + "artId":"corgi", + "bgColor":"Bgc-$artCorgi", + "height": "xxl_H75u", "showInMain": true }, { "artId":"penrose-triangle", "bgColor":"Bgc-$artPenroseTriangle", + "height": "xxl_H35u", "showInMain": true }, { "artId":"exploding-head", "bgColor":"Bgc-$artExplodingHead", + "height": "xxl_H75u", "showInMain": true }, - { - "artId":"clown-emoji", - "bgColor":"Bgc-$artClownEmoji", - "showInMain": false - }, - { - "artId":"mushroom", - "bgColor":"Bgc-$artMushroom", - "showInMain": false - }, { "artId":"robot-hare", "bgColor":"Bgc-$artRobotHare", + "height": "xxl_H55u", "showInMain": true }, { - "artId":"funny-cake", - "bgColor":"Bgc-$artFunnyCake", + "artId":"clown-emoji", + "bgColor":"Bgc-$artClownEmoji", + "height": "xxl_H70u", "showInMain": false }, { "artId":"cat", "bgColor":"Bgc-$artCat", + "height": "xxl_H60u", "showInMain": false }, { - "artId":"corgi", - "bgColor":"Bgc-$artCorgi", - "showInMain": true + "artId":"mushroom", + "bgColor":"Bgc-$artMushroom", + "height": "xxl_H75u", + "showInMain": false + }, + { + "artId":"funny-cake", + "bgColor":"Bgc-$artFunnyCake", + "height": "xxl_H70u", + "showInMain": false } - ] \ No newline at end of file diff --git a/src/_includes/components/embedded/modal.ejs b/src/_includes/components/embedded/modal.ejs new file mode 100644 index 0000000..68cb441 --- /dev/null +++ b/src/_includes/components/embedded/modal.ejs @@ -0,0 +1,31 @@ +
+
+ +
+ +
+
+
+ <%- include('../link-button.ejs',{ + url: `http://play.mlut.style/?art=${it.artId}`, + text: "Open in sandbox", + variant: "brand" + }) + %> +
+ +
+
+
\ No newline at end of file diff --git a/src/_includes/components/link-button.ejs b/src/_includes/components/link-button.ejs index f1fbe75..d547b82 100644 --- a/src/_includes/components/link-button.ejs +++ b/src/_includes/components/link-button.ejs @@ -1,6 +1,6 @@ <% const css = { - buttonShape:"-Sz100p D-f Jc-c Ai-c Gap2.5u P10 Fns4u Lnh100p Lts0 Fnst-n Fnw400 Bdrd8 Ts-$shortTs Bd1;s;$brand", + buttonShape:"-Sz100p D-f Jc-c Ai-c Gap2.5u P2u xxl_P2.5u Fns4u Lnh100p Lts0 Fnst-n Fnw400 Bdrd8 Ts-$shortTs Bd1;s;$brand", } if (it.variant === 'brand') { diff --git a/src/arts.ejs b/src/arts.ejs index 6e849c4..e706a6b 100644 --- a/src/arts.ejs +++ b/src/arts.ejs @@ -2,56 +2,112 @@ layout: 'base.ejs' area: Arts --- + <% const artsPageCSS = { - card:"W100p H20gg Tsd-$shortTs @:hv_Tsd-$longTs", - artWrapper:"-Sz100p Ov-h Plcc-c Plci-c D-f", - button: "W12gg lg_W9gg Mxw50u xl_Mxw55u Ai-str" + card:"W100p H46u Ov-h Bdrd3u Bgc-$core815 Bd3;s;$brand Tf -S102p_h O50p O1_h sm_H50u md_H60u -Ts", + color: "C-$white100 C-$brand500_h C-$brand200_a -Ts" } - function setCtaLength(){ - return it.arts.length % 2 != 0 ? 'md_W50p' : '' + const position = it.arts.length % 2 != 0 ? 'md_Gc2' : 'md_Gc1/3'; + + const decorCss = { + gradientEclipse: "Ps-a_af Ct_af W90p_af Apcr1_af B-4p_af L50p_af Tf_af -Tr-50p;0_af Bdrd100p_af -Gdl180d,$core725;0,$core735;100p_af Ft_af -Blr100_af", + gradientPlanet: "Ps-a_b Ct_b W70p_b Apcr1_b T1p_b L50p_b Tf_b -Tr-50p;0_b Bdrd100p_b -Gdl180d,$core725;0,$core740;100p,$core745;100p_b Ft_b -Blr50_b" } + function toPascalCase(str) { + const camel = str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase()); + return camel[0].toUpperCase() + camel.slice(1); + } %> -
-
-

Pure CSS art

-
+
+
+ +

Pure css art

+

Created entirely with mlut utility classes

+ + +
+
<% it.arts.forEach((art, index) => {%> - -
+
+ +
<%- include(`./arts/${art.artId}.ejs`) %>
-
-
-
- <%- include(`./_includes/components/link-button.ejs`, { - url:`http://play.mlut.style/?art=${art.artId}`, - text: "Open in sandbox", - variant: "light" - }) %> -
-
- <%- include(`./_includes/components/link-button.ejs`, { - tag:"button", - text: "Share", - variant: "light" - }) %> -
+
+
+ + Open in sandbox + +
+
<% }) %> +
+ + +
+ + + + +

+ Want to see your work here?
+ Submit your CSS art +

+ +
+ +
-
- - - - -

Add your own art!

- + + + +
+
+ +
+
+
+ <%- include('_includes/components/link-button.ejs',{ + url: "http://", + text: "Open in sandbox", + variant: "brand" + }) + %> +
+
+
+ + + \ No newline at end of file diff --git a/src/assets/script/art-modal.js b/src/assets/script/art-modal.js new file mode 100644 index 0000000..59b2020 --- /dev/null +++ b/src/assets/script/art-modal.js @@ -0,0 +1,80 @@ +export class ArtModal extends HTMLElement { + constructor() { + super(); + this.overlay = null; + this.container = null; + this.contentContainer = null; + this.closeBtn = null; + this.sandboxLink = null; + this.shareBtn = null; + this._onShare = null; + this._currentArtId = null; + this._handleKeydown = (e) => { + if (e.key === 'Escape') { + this.close(); + } + }; + } + + connectedCallback() { + this.overlay = this.querySelector('.art-modal-overlay'); + this.container = this.querySelector('.modal-container'); + this.contentContainer = this.querySelector('.art-modal-content'); + this.closeBtn = this.querySelector('.art-modal-close'); + this.sandboxLink = this.querySelector('.art-modal-sandbox a'); + this.shareBtn = this.querySelector('.art-modal-share .btn'); + + if (this.overlay) { + this.overlay.addEventListener('click', (e) => { + if (e.target === this.overlay) this.close(); + }); + } + if (this.closeBtn) { + this.closeBtn.addEventListener('click', () => this.close()); + } + if (this.shareBtn) { + this.shareBtn.addEventListener('click', () => { + if (this._onShare) this._onShare(this._currentArtId); + }); + } + } + + open(artHTML, artId, bgClass, onShare) { + if (!this.contentContainer) return; + + if (this.container && this._currentBgClass) { + this.container.classList.remove(this._currentBgClass); + } + + this._currentArtId = artId; + this._onShare = onShare; + this._currentBgClass = bgClass; + + if (this.sandboxLink) { + this.sandboxLink.href = `http://play.mlut.style/?art=${artId}`; + } + + if (this.container && bgClass) { + this.container.classList.add(bgClass); + } + + this.contentContainer.innerHTML = artHTML; + this.overlay.classList.remove('O0', 'Pne'); + this.overlay.classList.add('O1', 'Pne-a'); + document.addEventListener('keydown', this._handleKeydown); + } + + close() { + if (!this.overlay) return; + + document.removeEventListener('keydown', this._handleKeydown); + this.overlay.classList.remove('O1', 'Pne-a'); + this.overlay.classList.add('O0', 'Pne'); + if (this.container && this._currentBgClass) { + this.container.classList.remove(this._currentBgClass); + } + if (this.contentContainer) this.contentContainer.innerHTML = ''; + } +} + +customElements.define('art-modal', ArtModal); \ No newline at end of file diff --git a/src/assets/script/art-panel.js b/src/assets/script/art-panel.js index c814a45..a6e4b71 100644 --- a/src/assets/script/art-panel.js +++ b/src/assets/script/art-panel.js @@ -1,34 +1,78 @@ -const hightlightCss = ["Bd1;s;$brand", "Bxsd1;1;10;2;$brand", "Zi19"] +import './art-modal.js'; + +const hightlightCss = 'Bxsd1;1;10;2;$brand'; +const modal = document.querySelector('art-modal'); export class ArtPanel extends HTMLElement { constructor() { super(); - this.link = window.location.href + this.link = window.location.href; } connectedCallback() { - if (location.hash.slice(1) === this.id){ + if (!modal) { + this.modal = document.querySelector('art-modal'); + } + this.modal = modal; + + if (location.hash.slice(1) === this.id) { this.highlightTargetArt(); } - this.button = this.querySelector(`.link-button`); - this.button.addEventListener('click', () => this.copyArtLink()) + + this.button = this.querySelector('.link-button'); + if (this.button) { + this.button.addEventListener('click', () => this.copyArtLink(this.id, this.button)); + } + + this.addEventListener('click', (e) => { + if (e.target.closest('.link-button, .sandbox-button')) return; + this.openModal(); + }); } - copyArtLink() { - const span = this.button.querySelector('.button-text') - this.link = this.link.split('#')[0] + `#${this.id}` - navigator.clipboard.writeText(this.link) - span.textContent = 'Copied!' - setTimeout(() => { - span.textContent = 'Share'; - }, 2000) + openModal() { + if (!this.modal) return; + + const artDiv = this.querySelector('.art'); + if (!artDiv) return; + const artHTML = artDiv.outerHTML; + const bgClass = this.getAttribute('data-bg-class'); + this.modal.open(artHTML, this.id, bgClass, (artId) => this.copyArtLink(artId, this.modal.shareBtn)); + } + + copyArtLink(artId, button) { + const link = window.location.href.split('#')[0] + '#' + artId; + + navigator.clipboard.writeText(link) + .then(() => { + const icon = button.querySelector('.copy-icon'); + const copyText = button.querySelector('.copy-text'); + + if (icon && copyText) { + icon.classList.add('D-n'); + copyText.classList.remove('D-n'); + setTimeout(() => { + icon.classList.remove('D-n'); + copyText.classList.add('D-n'); + }, 2000); + return; + } + + const svg = button.querySelector('svg'); + const span = button.querySelector('.button-text'); + if (svg) svg.classList.add('D-n'); + if (span) span.textContent = 'Copied!'; + setTimeout(() => { + if (svg) svg.classList.remove('D-n'); + if (span) span.textContent = 'Share'; + }, 2000); + }) + .catch(err => console.error('Copy failed', err)); } highlightTargetArt() { - this.classList.add(...hightlightCss) - setTimeout(() => { - this.classList.remove(...hightlightCss) - },5000) + this.classList.add(hightlightCss); + setTimeout(() => this.classList.remove(hightlightCss), 5000); } } diff --git a/src/assets/script/masonry-gallery.js b/src/assets/script/masonry-gallery.js new file mode 100644 index 0000000..88cb425 --- /dev/null +++ b/src/assets/script/masonry-gallery.js @@ -0,0 +1,62 @@ +class MasonryGallery extends HTMLElement { + static _libPromise = null; + + constructor() { + super(); + this._masonry = null; + } + + connectedCallback() { + MasonryGallery._loadLibrary().then(() => { + this._initMasonry(); + }); + } + + disconnectedCallback() { + if (this._masonry) { + this._masonry.destroy(); + this._masonry = null; + } + } + + static _loadLibrary() { + if (this._libPromise) return this._libPromise; + + this._libPromise = new Promise((resolve, reject) => { + if (window.Masonry) { + resolve(); + return; + } + const script = document.createElement("script"); + script.src = + "https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"; + script.onload = () => resolve(); + script.onerror = () => reject(new Error("Couldn't load Masonry")); + document.head.appendChild(script); + }); + + return this._libPromise; + } + + _initMasonry() { + const grid = this.querySelector(".masonry"); + if (!grid || !grid.querySelector(".masonry-item")) { + setTimeout(() => this._initMasonry(), 50); + return; + } + if (this._masonry) return; + + this._masonry = new Masonry(grid, { + itemSelector: ".masonry-item", + columnWidth: ".masonry-sizer", + gutter: 24, + percentPosition: true, + horizontalOrder: true, + transitionDuration: "0.3s", + stagger: 30, + resize: true, + }); + } +} + +customElements.define("masonry-gallery", MasonryGallery); diff --git a/src/assets/style/style.scss b/src/assets/style/style.scss index 2f8c2e8..09d8be5 100644 --- a/src/assets/style/style.scss +++ b/src/assets/style/style.scss @@ -1,14 +1,14 @@ @use 'mlut' with ( - $jit: ( - 'output': 'dist/assets/style/style.min.css', - 'content': ['src/**/*.ejs','src/**/*.json','src/assets/script/**/*.js'], - 'minify': true - ), + $jit: ( + 'output': 'dist/assets/style/style.min.css', + 'content': ['src/**/*.ejs','src/**/*.json','src/assets/script/**/*.js'], + 'minify': true + ), ); a { - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-touch-callout: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-touch-callout: none; } @@ -22,221 +22,249 @@ a { .btn { user-select: none; - -webkit-user-select: none; - -webkit-tap-highlight-color: transparent; + -webkit-user-select: none; + -webkit-tap-highlight-color: transparent; +} + +.masonry-sizer, +.masonry-item { + width: calc(33.333% - 1rem); + margin-bottom: 1.5rem; +} + +@media (max-width: 1400px) { + .masonry-sizer, + .masonry-item { + width: calc(50% - 1rem); + } +} + +@media (max-width: 768px) { + .masonry-sizer, + .masonry-item { + width: 100%; + } } // Светлая тема @mixin light-theme { - --ml-core200: #E4D6F0; - --ml-core201: #000; - --ml-core202: #000; - --ml-core205: #fff; - --ml-core210: #394EB6; - --ml-core215: #0B0A22; - --ml-core220: #16348C; - --ml-core221: #fff; - --ml-core225: #16348C; - --ml-core230: #fff; - --ml-core231: #000; - --ml-core300: #fff; - --ml-core350: #16348C; - --ml-core355: #e2e2e2b6; - --ml-core900: #D9D1CA; - --ml-core400: #FDF6EF; - --ml-core450: #2762f81f; - --ml-core800: #F7F2FF; - --ml-core805: #F7F2FF; - --ml-core810: #e4d6f0; - --ml-core815: #fff; - --ml-core820: #e4d6f0; - --ml-core830: #F7F2FF; - --ml-core950: #fff; - --ml-accent900: #22141A; - --ml-accent850: #394EB6; - --ml-accent800: #394EB6; - --ml-accent750: #16348C; - --ml-accent950: #D2B5D0; - --ml-accent955: #D2B5D0; - --ml-core550: #fff; - --ml-core500: #edebeb; - --ml-core700: rgba(240, 67, 140, 0.3); - --ml-core720: rgba(255, 123, 202, 0.36);//// - --ml-core730: rgba(255, 197, 111, 0.16);//// - --ml-core735: rgba(255, 197, 111, 0.4); - --ml-core750: rgb(253, 173, 245, 0.6); - --ml-core650: rgba(240, 67, 140, 0); - --ml-core600: rgba(249, 207, 103, 0); - --ml-primary800: rgba(239,246,255,1); - --ml-primary750: rgba(219,234,254,1); - --ml-primary700: rgba(219,234,254,0.5); - --ml-primary300: rgb(28,57,142); - --ml-primary400: rgb(20,71,230); - --ml-secondary800: rgba(252,231,243,1); - --ml-secondary750: rgba(252,206,232,1); - --ml-secondary700: rgba(252,206,232,0.5); - --ml-secondary650: rgba(253, 165, 213, 0.793); - --ml-secondary300: rgb(185,28,124); - --ml-secondary400: rgb(194,24,91); - --ml-tertiary800: #a3a0b9; - --ml-tertiary750: #574b4b; - --ml-tertiary760: #574b4b; - --ml-tertiary770: #000; - --ml-tertiary700: #fafaa2; - --ml-tertiary650: rgba(218,178,255,0.5); - --ml-tertiary300: rgb(89,22,139); - --ml-tertiary400: rgb(130,0,219); - --ml-wrong900: rgba(254,242,242,0.6); - --ml-wrong800: rgba(255,226,226,0.8); - --ml-wrong850: rgba(255,226,226,0.6); - --ml-wrong750: rgba(255,201,201,0.8); - --ml-correct900: rgba(224, 255, 233, 0.8); - --ml-correct800: rgba(183, 253, 207, 0.8); - --ml-correct850: rgba(183, 250, 207, 0.6); - --ml-correct750: rgba(83, 250, 141, 0.6); - --ml-overlay: rgba(255, 255, 255, 0.7); - - // arts - --ml-artGhost: #ffbcB0; - --ml-artPenroseTriangle: #77de64; - --ml-artFlushedEmoji: #bfc5ff; - --ml-artExplodingHead: #9cffe5; - --ml-artClownEmoji: #10bac3; - --ml-artMushroom: #ad8bc7; - --ml-artRobotHare: #947e4f; - --ml-artFunnyCake: #6295e3; - --ml-artCat: #dea3e3; - --ml-artCorgi: #92959c; + --ml-core200: #E4D6F0; + --ml-core201: #000; + --ml-core202: #000; + --ml-core205: #fff; + --ml-core210: #394EB6; + --ml-core215: #0B0A22; + --ml-core220: #16348C; + --ml-core221: #fff; + --ml-core225: #16348C; + --ml-core230: #fff; + --ml-core231: #000; + --ml-core300: #fff; + --ml-core350: #16348C; + --ml-core355: #e2e2e2b6; + --ml-core900: #D9D1CA; + --ml-core400: #FDF6EF; + --ml-core450: #2762f81f; + --ml-core800: #F7F2FF; + --ml-core805: #F7F2FF; + --ml-core810: #e4d6f0; + --ml-core815: #fff; + --ml-core820: #e4d6f0; + --ml-core830: #F7F2FF; + --ml-core950: #fff; + --ml-accent900: #22141A; + --ml-accent905: rgba(255, 255, 255, 0.7); + --ml-accent850: #394EB6; + --ml-accent800: #394EB6; + --ml-accent750: #16348C; + --ml-accent950: #D2B5D0; + --ml-accent955: #D2B5D0; + --ml-core550: #fff; + --ml-core500: #edebeb; + --ml-core700: rgba(240, 67, 140, 0.3); + --ml-core720: rgba(255, 123, 202, 0.36);//// + --ml-core725: rgba(255, 123, 202, 0.15); + --ml-core730: rgba(255, 197, 111, 0.16);//// + --ml-core735: rgba(255, 197, 111, 0.4); + --ml-core740: rgba(249, 207, 103, 0.00); + --ml-core745: #394EB6; + --ml-core750: rgb(253, 173, 245, 0.6); + --ml-core650: rgba(240, 67, 140, 0); + --ml-core600: rgba(249, 207, 103, 0); + --ml-primary800: rgba(239,246,255,1); + --ml-primary750: rgba(219,234,254,1); + --ml-primary700: rgba(219,234,254,0.5); + --ml-primary300: rgb(28,57,142); + --ml-primary400: rgb(20,71,230); + --ml-secondary800: rgba(252,231,243,1); + --ml-secondary750: rgba(252,206,232,1); + --ml-secondary700: rgba(252,206,232,0.5); + --ml-secondary650: rgba(253, 165, 213, 0.793); + --ml-secondary300: rgb(185,28,124); + --ml-secondary400: rgb(194,24,91); + --ml-tertiary800: #a3a0b9; + --ml-tertiary750: #574b4b; + --ml-tertiary760: #574b4b; + --ml-tertiary770: #000; + --ml-tertiary700: #fafaa2; + --ml-tertiary650: rgba(218,178,255,0.5); + --ml-tertiary300: rgb(89,22,139); + --ml-tertiary400: rgb(130,0,219); + --ml-wrong900: rgba(254,242,242,0.6); + --ml-wrong800: rgba(255,226,226,0.8); + --ml-wrong850: rgba(255,226,226,0.6); + --ml-wrong750: rgba(255,201,201,0.8); + --ml-correct900: rgba(224, 255, 233, 0.8); + --ml-correct800: rgba(183, 253, 207, 0.8); + --ml-correct850: rgba(183, 250, 207, 0.6); + --ml-correct750: rgba(83, 250, 141, 0.6); + --ml-overlay: rgba(255, 255, 255, 0.7); + + // arts + --ml-artGhost: #ffbcB0; + --ml-artPenroseTriangle: #77de64; + --ml-artFlushedEmoji: #bfc5ff; + --ml-artExplodingHead: #9cffe5; + --ml-artClownEmoji: #10bac3; + --ml-artMushroom: #ad8bc7; + --ml-artRobotHare: #947e4f; + --ml-artFunnyCake: #6295e3; + --ml-artCat: #dea3e3; + --ml-artCorgi: #92959c; } // Тёмная тема @mixin dark-theme { - --ml-core200: #151833; - --ml-core201: #16348C; - --ml-core202: #16348C; - --ml-core205: #16348C; - --ml-core210: #16348C; - --ml-core215: #D2B5D0; - --ml-core220: #81C8F1; - --ml-core221: #81C8F1; - --ml-core225: #16348C; - --ml-core230: #f0438c; - --ml-core231: #f0438c; - --ml-core300: #0B0A22; - --ml-core350: #151833; - --ml-core355: rgba(17, 24, 39, 0.8); - --ml-core900: #000; - --ml-core400: #151833; - --ml-core450: #061230; - --ml-core800: #1B173C; - --ml-core805: #0d1117; - --ml-core810: #251F53; - --ml-core815: #1B173C; - --ml-core820: #0e0d2e; - --ml-core830: #0e0d2e; - --ml-core950: #000; - --ml-accent900: #fff; - --ml-accent850: #A3A0B9; - --ml-accent750: #394EB6; - --ml-accent800: #62B7EA; - --ml-accent950: #394EB6; - --ml-accent955: #1B173C; - --ml-core550: rgba(57, 78, 182, 0.1); - --ml-core700: rgba(57, 78, 182, 0.24); - --ml-core720: rgba(255, 123, 202, 0.15);//// - --ml-core725: rgba(255, 123, 202, 0.3); - --ml-core730: rgba(255, 197, 111, 0.1);//// - --ml-core735: rgba(255, 197, 111, 0.2); - --ml-core750: #121828; - --ml-core650: rgba(57, 78, 182, 0); - --ml-core600: rgba(129, 200, 241, 0); - --ml-core500: #2e2e2e; - --ml-primary800: rgba(30,58,138,0.4); - --ml-primary750: rgba(25,60,184,0.5); - --ml-primary700: rgba(30,64,175,0.6); - --ml-primary300: rgb(190,219,255); - --ml-primary400: rgb(142,197,255); - --ml-secondary800: rgba(134,16,67,0.5); - --ml-secondary750: rgba(240,67,140,0.3); - --ml-secondary700: rgba(163,0,76,0.7); - --ml-secondary650: rgba(198,0,92); - --ml-secondary300: rgb(244,114,182); - --ml-secondary400: rgb(249,168,212); - --ml-tertiary800: #5865A2; - --ml-tertiary750: #fff; - --ml-tertiary760: #9EA2B9; - --ml-tertiary770: #fff; - --ml-tertiary700: rgba(119, 214, 255, 0.22); - --ml-tertiary650: rgba(127,34,254,0.6); - --ml-tertiary300: rgb(218,178,255); - --ml-tertiary400: rgb(233,212,255); - --ml-wrong900: rgba(130,24,26,0.4); - --ml-wrong800: rgba(159,7,18,0.6); - --ml-wrong850: rgba(159,7,18,0.5); - --ml-wrong750: rgba(193,0,7,0.7); - --ml-correct900: rgba(13,84,43,0.4); - --ml-correct800: rgba(1,102,48,0.6); - --ml-correct850: rgba(1,102,48,0.4); - --ml-correct750: rgba(0,130,54,0.6); - --ml-overlay: rgba(0, 0, 0, 0.7); - - // arts - --ml-artGhost: #450c00; - --ml-artPenroseTriangle: #726603; - --ml-artFlushedEmoji: #000942; - --ml-artExplodingHead: #003b2a; - --ml-artClownEmoji: #065054; - --ml-artMushroom: #3b244d; - --ml-artRobotHare: #6f592b; - --ml-artFunnyCake: #1f3e6e; - --ml-artCat: #a479a8; - --ml-artCorgi: #77797f; + --ml-core200: #151833; + --ml-core201: #16348C; + --ml-core202: #16348C; + --ml-core205: #16348C; + --ml-core210: #16348C; + --ml-core215: #D2B5D0; + --ml-core220: #81C8F1; + --ml-core221: #81C8F1; + --ml-core225: #16348C; + --ml-core230: #f0438c; + --ml-core231: #f0438c; + --ml-core300: #0B0A22; + --ml-core350: #151833; + --ml-core355: rgba(17, 24, 39, 0.8); + --ml-core900: #000; + --ml-core400: #151833; + --ml-core450: #061230; + --ml-core800: #1B173C; + --ml-core805: #0d1117; + --ml-core810: #251F53; + --ml-core815: #1B173C; + --ml-core820: #0e0d2e; + --ml-core830: #0e0d2e; + --ml-core950: #000; + --ml-accent900: #fff; + --ml-accent905: rgba(0, 0, 0, 0.7); + --ml-accent850: #A3A0B9; + --ml-accent750: #394EB6; + --ml-accent800: #62B7EA; + --ml-accent950: #394EB6; + --ml-accent955: #1B173C; + --ml-core550: rgba(57, 78, 182, 0.1); + --ml-core700: rgba(57, 78, 182, 0.24); + --ml-core720: rgba(255, 123, 202, 0.15);//// + --ml-core725: rgba(255, 123, 202, 0.12); + --ml-core730: rgba(255, 197, 111, 0.1);//// + --ml-core735: rgba(255, 197, 111, 0.2); + --ml-core740: rgba(249, 207, 103, 0.00); + --ml-core745: #394EB6; + --ml-core750: #121828; + --ml-core650: rgba(57, 78, 182, 0); + --ml-core600: rgba(129, 200, 241, 0); + --ml-core500: #2e2e2e; + --ml-primary800: rgba(30,58,138,0.4); + --ml-primary750: rgba(25,60,184,0.5); + --ml-primary700: rgba(30,64,175,0.6); + --ml-primary300: rgb(190,219,255); + --ml-primary400: rgb(142,197,255); + --ml-secondary800: rgba(134,16,67,0.5); + --ml-secondary750: rgba(240,67,140,0.3); + --ml-secondary700: rgba(163,0,76,0.7); + --ml-secondary650: rgba(198,0,92); + --ml-secondary300: rgb(244,114,182); + --ml-secondary400: rgb(249,168,212); + --ml-tertiary800: #5865A2; + --ml-tertiary750: #fff; + --ml-tertiary760: #9EA2B9; + --ml-tertiary770: #fff; + --ml-tertiary700: rgba(119, 214, 255, 0.22); + --ml-tertiary650: rgba(127,34,254,0.6); + --ml-tertiary300: rgb(218,178,255); + --ml-tertiary400: rgb(233,212,255); + --ml-wrong900: rgba(130,24,26,0.4); + --ml-wrong800: rgba(159,7,18,0.6); + --ml-wrong850: rgba(159,7,18,0.5); + --ml-wrong750: rgba(193,0,7,0.7); + --ml-correct900: rgba(13,84,43,0.4); + --ml-correct800: rgba(1,102,48,0.6); + --ml-correct850: rgba(1,102,48,0.4); + --ml-correct750: rgba(0,130,54,0.6); + --ml-overlay: rgba(0, 0, 0, 0.7); + + // arts + --ml-artGhost: #450c00; + --ml-artPenroseTriangle: #726603; + --ml-artFlushedEmoji: #000942; + --ml-artExplodingHead: #003b2a; + --ml-artClownEmoji: #065054; + --ml-artMushroom: #3b244d; + --ml-artRobotHare: #6f592b; + --ml-artFunnyCake: #1f3e6e; + --ml-artCat: #a479a8; + --ml-artCorgi: #77797f; } html { - --ml-core850: rgba(0,0,0,0.9); - --ml-primaryBright600: #2b7fff; - --ml-primary650: #16348C; - --ml-secondaryBright600: #f0438c; - --ml-secondaryBright650: #e91e63; - --ml-tertiaryBright600: #ad46ff; - --ml-tertiaryBright650: #8500e2; - --ml-brand: #f0438c; - --ml-brand50: rgba(240, 67, 140, 0.00); - --ml-brand100: rgba(240, 67, 140, 0.13); - --ml-brand200: rgba(201, 35, 105); - --ml-brand205: rgba(233,30,99,0.2); - --ml-brand500: rgb(230, 38, 119); - --ml-darkGray: #1f1f1f; - --ml-blueGray: rgb(236, 240, 246, 0.5); - --ml-gray200: #d1d5db; - --ml-gray350: #D2B5D0; - --ml-white100: #fff; - --ml-white150: rgba(255, 255, 255, 0.7); - --ml-white200: #F7F2FF; - --ml-white300: #E4D6F0; - --ml-yellow500: #F9CF67; - --ml-yellow510: rgb(249, 207, 103, 0.00); - --ml-activeTab: #394EB6; - // - scroll-padding-top: var(--ml-headerH); + --ml-core850: rgba(0,0,0,0.9); + --ml-primaryBright600: #2b7fff; + --ml-primary650: #16348C; + --ml-secondaryBright600: #f0438c; + --ml-secondaryBright650: #e91e63; + --ml-tertiaryBright600: #ad46ff; + --ml-tertiaryBright650: #8500e2; + --ml-brand: #f0438c; + --ml-brand50: rgba(240, 67, 140, 0.00); + --ml-brand100: rgba(240, 67, 140, 0.13); + --ml-brand200: rgba(201, 35, 105); + --ml-brand205: rgba(233,30,99,0.2); + --ml-brand500: rgb(230, 38, 119); + --ml-darkGray: #1f1f1f; + --ml-blueGray: rgb(236, 240, 246, 0.5); + --ml-gray200: #d1d5db; + --ml-gray250: rgba(228, 214, 240, 0.20); + --ml-gray350: #D2B5D0; + --ml-white100: #fff; + --ml-white150: rgba(255, 255, 255, 0.7); + --ml-white200: #F7F2FF; + --ml-white300: #E4D6F0; + --ml-yellow500: #F9CF67; + --ml-yellow510: rgb(249, 207, 103, 0.00); + --ml-activeTab: #394EB6; + // + scroll-padding-top: var(--ml-headerH); } // Базовая тёмная тема + явная тёмная html, .theme-dark { - @include dark-theme; + @include dark-theme; } // Явная светлая тема .theme-light { - @include light-theme; + @include light-theme; } // Системная светлая тема @media (prefers-color-scheme: light) { - html:not(.theme-dark):not(.theme-light) { - @include light-theme; - } + html:not(.theme-dark):not(.theme-light) { + @include light-theme; + } } diff --git a/src/index.ejs b/src/index.ejs index bfbebda..bae86f5 100644 --- a/src/index.ejs +++ b/src/index.ejs @@ -64,7 +64,7 @@ area: 'main' -
+
<% for (let decor of Object.values(decorCSSArts)) { %>
<% } %> @@ -109,7 +109,7 @@ area: 'main'
<%- include('./_includes/components/link-button.ejs',{ - url:"arts", + url:"/arts", text: "View the gallery", variant: "white" })