From a99235e18006dedc3c1d06f16b8e86fcb0445a6d Mon Sep 17 00:00:00 2001 From: Oleg Ostapchuk Date: Tue, 21 Jul 2026 00:40:00 +0300 Subject: [PATCH 1/3] feat(arts-page): add arts page and fix hero frame --- src/_data/arts.json | 11 +- src/_data/navLinks.json | 2 +- src/_includes/components/embedded/modal.ejs | 31 ++ src/arts-redesign.ejs | 78 ++++ src/assets/script/art-modal.js | 66 ++++ src/assets/script/art-panel.js | 41 +- src/assets/style/style.scss | 401 ++++++++++---------- src/index.ejs | 4 +- 8 files changed, 419 insertions(+), 215 deletions(-) create mode 100644 src/_includes/components/embedded/modal.ejs create mode 100644 src/arts-redesign.ejs create mode 100644 src/assets/script/art-modal.js diff --git a/src/_data/arts.json b/src/_data/arts.json index daa21d9..f92df3c 100644 --- a/src/_data/arts.json +++ b/src/_data/arts.json @@ -2,52 +2,61 @@ { "artId":"ghost", "bgColor":"Bgc-$artGhost", + "gridPosition": "xxl_Gc1/4 xxl_Gr3/5", "showInMain": true }, { "artId":"flushed-emoji", "bgColor":"Bgc-$artFlushedEmoji", + "gridPosition": "xxl_Gc10/13 xxl_Gr4/7", "showInMain": true }, { "artId":"penrose-triangle", "bgColor":"Bgc-$artPenroseTriangle", + "gridPosition": "xxl_Gc10/13 xxl_Gr7/9", "showInMain": true }, { "artId":"exploding-head", "bgColor":"Bgc-$artExplodingHead", + "gridPosition": "xxl_Gc1/4 xxl_Gr1/3", "showInMain": true }, { "artId":"clown-emoji", "bgColor":"Bgc-$artClownEmoji", + "gridPosition": "xxl_Gc10/13 xxl_Gr1/4", "showInMain": false }, { "artId":"mushroom", "bgColor":"Bgc-$artMushroom", + "gridPosition": "xxl_Gc1/7 xxl_Gr5/9", "showInMain": false }, { "artId":"robot-hare", "bgColor":"Bgc-$artRobotHare", + "gridPosition": "xxl_Gc7/10 xxl_Gr5/9", "showInMain": true }, { "artId":"funny-cake", "bgColor":"Bgc-$artFunnyCake", + "gridPosition": "xxl_Gc1/9 xxl_Gr9/13", "showInMain": false }, { "artId":"cat", "bgColor":"Bgc-$artCat", + "gridPosition": "xxl_Gc4/10 xxl_Gr1/5", "showInMain": false }, { "artId":"corgi", "bgColor":"Bgc-$artCorgi", + "gridPosition": "xxl_Gc9/13 xxl_Gr9/13", "showInMain": true } - ] \ No newline at end of file diff --git a/src/_data/navLinks.json b/src/_data/navLinks.json index cd663bc..828356c 100644 --- a/src/_data/navLinks.json +++ b/src/_data/navLinks.json @@ -8,7 +8,7 @@ "text":"Comparison" }, { - "link":"/arts", + "link":"/arts-redesign", "text":"Art" }, { 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/arts-redesign.ejs b/src/arts-redesign.ejs new file mode 100644 index 0000000..e38860d --- /dev/null +++ b/src/arts-redesign.ejs @@ -0,0 +1,78 @@ +--- +layout: 'base.ejs' +area: Arts +--- + +<% + const artsPageCSS = { + card:"W100p H46u Ov-h Bdrd12 Bgc-$core815 Bd3;s;$brand O0.5 O1_h sm_H50u md_H60u xxl_H-a -Ts", + artWrapper:"-Sz100p Ov-h Plcc-c Plci-c D-f", + button: "W12gg lg_W9gg Mxw50u xl_Mxw55u Ai-str", + color: "C-$brand C-$brand500_h C-$brand200_a -Ts" + } + + function setCtaLength(){ + return 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" + } + +%> + +
+
+ +

Pure css art

+

Created entirely with mlut utility classes

+ +
+ <% it.arts.forEach((art, index) => {%> + +
+ <%- include(`./arts/${art.artId}.ejs`) %> +
+
+
+ + Open in sandbox + + +
+
+ + <% }) %> + +
+ + + + +

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

+ +
+
+ +
+ + + + \ 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..ae5664c --- /dev/null +++ b/src/assets/script/art-modal.js @@ -0,0 +1,66 @@ +export class ArtModal { + + constructor() { + this.template = document.getElementById("art-card"); + if (!this.template) return; + + const clone = this.template.content.cloneNode(true); + this.overlay = clone.querySelector(".art-modal-overlay"); + this.contentContainer = clone.querySelector(".art-modal-content"); + this.closeBtn = clone.querySelector(".art-modal-close"); + this.sandboxLink = clone.querySelector(".art-modal-sandbox a"); + this.shareBtn = clone.querySelector(".art-modal-share"); + + this.overlay.addEventListener("click", (e) => { + if (e.target === this.overlay) this.close(); + }); + this.closeBtn.addEventListener("click", () => this.close()); + this.shareBtn.addEventListener("click", () => this.copyArtLink()); + + document.body.appendChild(clone); + } + + copyArtLink() { + if (!this.currentArtId) return; + + const link = window.location.href.split("#")[0] + "#" + this.currentArtId; + navigator.clipboard + .writeText(link) + .then(() => { + const span = this.shareBtn.querySelector(".button-text"); + const svg = this.shareBtn.querySelector("svg"); + + if (span) span.textContent = "Copied!"; + if (svg) svg.classList.add("D-n"); + + setTimeout(() => { + if (span) span.textContent = "Share"; + if (svg) svg.classList.remove("D-n"); + }, 2000); + }) + .catch((err) => console.error("Copy failed", err)); + } + + open(artElement, artId) { + if (!this.contentContainer) return; + this.currentArtId = artId; + if (this.sandboxLink) { + this.sandboxLink.href = `http://play.mlut.style/?art=${artId}`; + } + const artClone = artElement.querySelector(".art").cloneNode(true); + this.contentContainer.textContent = ""; + this.contentContainer.appendChild(artClone); + this.overlay.classList.remove("O0", "Pne"); + this.overlay.classList.add("O1", "Pne-a"); + } + + close() { + if (this.overlay) { + this.overlay.classList.remove("O1", "Pne-a"); + this.overlay.classList.add("O0", "Pne"); + if (this.contentContainer) this.contentContainer.textContent = ""; + } + } +} + +export const artModal = new 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..2eab93e 100644 --- a/src/assets/script/art-panel.js +++ b/src/assets/script/art-panel.js @@ -1,35 +1,48 @@ -const hightlightCss = ["Bd1;s;$brand", "Bxsd1;1;10;2;$brand", "Zi19"] +import { artModal } from "./art-modal.js"; + +const hightlightCss = "Bxsd1;1;10;2;$brand"; 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 (location.hash.slice(1) === this.id) { this.highlightTargetArt(); } this.button = this.querySelector(`.link-button`); - this.button.addEventListener('click', () => this.copyArtLink()) + this.button.addEventListener("click", () => this.copyArtLink()); + this.addEventListener("click", (e) => { + if (e.target.closest(".link-button, a")) return; + artModal.open(this, this.id); + }); } copyArtLink() { - const span = this.button.querySelector('.button-text') - this.link = this.link.split('#')[0] + `#${this.id}` - navigator.clipboard.writeText(this.link) - span.textContent = 'Copied!' + const icon = this.button.querySelector(".copy-icon"); + const text = this.button.querySelector(".copy-text"); + if (!icon || !text) return; + + this.link = this.link.split("#")[0] + `#${this.id}`; + navigator.clipboard.writeText(this.link); + + icon.classList.add("D-n"); + text.classList.remove("D-n"); + setTimeout(() => { - span.textContent = 'Share'; - }, 2000) + icon.classList.remove("D-n"); + text.classList.add("D-n"); + }, 2000); } highlightTargetArt() { - this.classList.add(...hightlightCss) + this.classList.add(hightlightCss); setTimeout(() => { - this.classList.remove(...hightlightCss) - },5000) + this.classList.remove(hightlightCss); + }, 5000); } } -customElements.define('art-panel', ArtPanel); \ No newline at end of file +customElements.define("art-panel", ArtPanel); \ No newline at end of file diff --git a/src/assets/style/style.scss b/src/assets/style/style.scss index 2f8c2e8..fef01d0 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,228 @@ a { .btn { user-select: none; - -webkit-user-select: none; - -webkit-tap-highlight-color: transparent; + -webkit-user-select: none; + -webkit-tap-highlight-color: transparent; } // Светлая тема @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); + --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; + // 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); + --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; + // 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-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..11f168b 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-redesign", text: "View the gallery", variant: "white" }) From af19071dd4162a04ff421fcaf85c319556f4087b Mon Sep 17 00:00:00 2001 From: Oleg Ostapchuk Date: Fri, 24 Jul 2026 14:41:46 +0300 Subject: [PATCH 2/3] fix(arts-page): corrections after review --- src/_data/arts.json | 50 ++++++++--------- src/_data/navLinks.json | 2 +- src/arts-redesign.ejs | 78 -------------------------- src/arts.ejs | 106 +++++++++++++++++++++--------------- src/assets/style/style.scss | 1 + src/index.ejs | 2 +- 6 files changed, 89 insertions(+), 150 deletions(-) delete mode 100644 src/arts-redesign.ejs diff --git a/src/_data/arts.json b/src/_data/arts.json index f92df3c..53ad1e7 100644 --- a/src/_data/arts.json +++ b/src/_data/arts.json @@ -2,61 +2,61 @@ { "artId":"ghost", "bgColor":"Bgc-$artGhost", - "gridPosition": "xxl_Gc1/4 xxl_Gr3/5", + "gridSpan": "xxl_Gc-s4 xxl_Gr-s3", "showInMain": true }, { "artId":"flushed-emoji", "bgColor":"Bgc-$artFlushedEmoji", - "gridPosition": "xxl_Gc10/13 xxl_Gr4/7", + "gridSpan": "xxl_Gc-s3 xxl_Gr-s4", + "showInMain": true + }, + { + "artId":"corgi", + "bgColor":"Bgc-$artCorgi", + "gridSpan": "xxl_Gc-s5 xxl_Gr-s4", "showInMain": true }, { "artId":"penrose-triangle", "bgColor":"Bgc-$artPenroseTriangle", - "gridPosition": "xxl_Gc10/13 xxl_Gr7/9", + "gridSpan": "xxl_Gc-s4 xxl_Gr-s2", "showInMain": true }, { "artId":"exploding-head", "bgColor":"Bgc-$artExplodingHead", - "gridPosition": "xxl_Gc1/4 xxl_Gr1/3", + "gridSpan": "xxl_Gc-s5 xxl_Gr-s5", "showInMain": true }, - { - "artId":"clown-emoji", - "bgColor":"Bgc-$artClownEmoji", - "gridPosition": "xxl_Gc10/13 xxl_Gr1/4", - "showInMain": false - }, - { - "artId":"mushroom", - "bgColor":"Bgc-$artMushroom", - "gridPosition": "xxl_Gc1/7 xxl_Gr5/9", - "showInMain": false - }, { "artId":"robot-hare", "bgColor":"Bgc-$artRobotHare", - "gridPosition": "xxl_Gc7/10 xxl_Gr5/9", + "gridSpan": "xxl_Gc-s3 xxl_Gr-s5", "showInMain": true }, { - "artId":"funny-cake", - "bgColor":"Bgc-$artFunnyCake", - "gridPosition": "xxl_Gc1/9 xxl_Gr9/13", + "artId":"clown-emoji", + "bgColor":"Bgc-$artClownEmoji", + "gridSpan": "xxl_Gc-s4 xxl_Gr-s4", "showInMain": false }, { "artId":"cat", "bgColor":"Bgc-$artCat", - "gridPosition": "xxl_Gc4/10 xxl_Gr1/5", + "gridSpan": "xxl_Gc-s6 xxl_Gr-s4", "showInMain": false }, { - "artId":"corgi", - "bgColor":"Bgc-$artCorgi", - "gridPosition": "xxl_Gc9/13 xxl_Gr9/13", - "showInMain": true + "artId":"mushroom", + "bgColor":"Bgc-$artMushroom", + "gridSpan": "xxl_Gc-s7 xxl_Gr-s4", + "showInMain": false + }, + { + "artId":"funny-cake", + "bgColor":"Bgc-$artFunnyCake", + "gridSpan": "xxl_Gc-s6 xxl_Gr-s4", + "showInMain": false } ] \ No newline at end of file diff --git a/src/_data/navLinks.json b/src/_data/navLinks.json index 828356c..cd663bc 100644 --- a/src/_data/navLinks.json +++ b/src/_data/navLinks.json @@ -8,7 +8,7 @@ "text":"Comparison" }, { - "link":"/arts-redesign", + "link":"/arts", "text":"Art" }, { diff --git a/src/arts-redesign.ejs b/src/arts-redesign.ejs deleted file mode 100644 index e38860d..0000000 --- a/src/arts-redesign.ejs +++ /dev/null @@ -1,78 +0,0 @@ ---- -layout: 'base.ejs' -area: Arts ---- - -<% - const artsPageCSS = { - card:"W100p H46u Ov-h Bdrd12 Bgc-$core815 Bd3;s;$brand O0.5 O1_h sm_H50u md_H60u xxl_H-a -Ts", - artWrapper:"-Sz100p Ov-h Plcc-c Plci-c D-f", - button: "W12gg lg_W9gg Mxw50u xl_Mxw55u Ai-str", - color: "C-$brand C-$brand500_h C-$brand200_a -Ts" - } - - function setCtaLength(){ - return 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" - } - -%> - -
-
- -

Pure css art

-

Created entirely with mlut utility classes

- -
- <% it.arts.forEach((art, index) => {%> - -
- <%- include(`./arts/${art.artId}.ejs`) %> -
-
-
- - Open in sandbox - - -
-
- - <% }) %> - -
- - - - -

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

- -
-
- -
- - - - \ No newline at end of file diff --git a/src/arts.ejs b/src/arts.ejs index 6e849c4..84c65a5 100644 --- a/src/arts.ejs +++ b/src/arts.ejs @@ -2,56 +2,72 @@ 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 -S104p_h O50p O1_h sm_H50u md_H60u xxl_H-a -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" + } %> -
-
-

Pure CSS art

- -
- <% 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" - }) %> -
-
+ +
+
+ +

Pure css art

+

Created entirely with mlut utility classes

+ +
+ <% it.arts.forEach((art, index) => {%> + +
+ <%- include(`./arts/${art.artId}.ejs`) %> +
+
+
+ + Open in sandbox + +
- - <% }) %> - -
- - - - -

Add your own art!

- -
+
+ + <% }) %> + +
+ + + + +

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

+
+
+ +
+ + + + \ No newline at end of file diff --git a/src/assets/style/style.scss b/src/assets/style/style.scss index fef01d0..8872a83 100644 --- a/src/assets/style/style.scss +++ b/src/assets/style/style.scss @@ -218,6 +218,7 @@ html { --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); diff --git a/src/index.ejs b/src/index.ejs index 11f168b..bae86f5 100644 --- a/src/index.ejs +++ b/src/index.ejs @@ -109,7 +109,7 @@ area: 'main'
<%- include('./_includes/components/link-button.ejs',{ - url:"/arts-redesign", + url:"/arts", text: "View the gallery", variant: "white" }) From 0ab73d19ef5422a4fb96584a00a4bfa07b03a457 Mon Sep 17 00:00:00 2001 From: Oleg Ostapchuk Date: Fri, 24 Jul 2026 16:51:52 +0300 Subject: [PATCH 3/3] refactor(arts-page): reorganize gallery structure and layout --- src/_data/arts.json | 20 ++++++++++---------- src/arts.ejs | 11 ++++++----- src/assets/style/style.scss | 10 ++++++++++ 3 files changed, 26 insertions(+), 15 deletions(-) diff --git a/src/_data/arts.json b/src/_data/arts.json index 53ad1e7..ae76216 100644 --- a/src/_data/arts.json +++ b/src/_data/arts.json @@ -2,61 +2,61 @@ { "artId":"ghost", "bgColor":"Bgc-$artGhost", - "gridSpan": "xxl_Gc-s4 xxl_Gr-s3", + "height": "xxl_H45u", "showInMain": true }, { "artId":"flushed-emoji", "bgColor":"Bgc-$artFlushedEmoji", - "gridSpan": "xxl_Gc-s3 xxl_Gr-s4", + "height": "xxl_H45u", "showInMain": true }, { "artId":"corgi", "bgColor":"Bgc-$artCorgi", - "gridSpan": "xxl_Gc-s5 xxl_Gr-s4", + "height": "xxl_H75u", "showInMain": true }, { "artId":"penrose-triangle", "bgColor":"Bgc-$artPenroseTriangle", - "gridSpan": "xxl_Gc-s4 xxl_Gr-s2", + "height": "xxl_H35u", "showInMain": true }, { "artId":"exploding-head", "bgColor":"Bgc-$artExplodingHead", - "gridSpan": "xxl_Gc-s5 xxl_Gr-s5", + "height": "xxl_H75u", "showInMain": true }, { "artId":"robot-hare", "bgColor":"Bgc-$artRobotHare", - "gridSpan": "xxl_Gc-s3 xxl_Gr-s5", + "height": "xxl_H55u", "showInMain": true }, { "artId":"clown-emoji", "bgColor":"Bgc-$artClownEmoji", - "gridSpan": "xxl_Gc-s4 xxl_Gr-s4", + "height": "xxl_H70u", "showInMain": false }, { "artId":"cat", "bgColor":"Bgc-$artCat", - "gridSpan": "xxl_Gc-s6 xxl_Gr-s4", + "height": "xxl_H60u", "showInMain": false }, { "artId":"mushroom", "bgColor":"Bgc-$artMushroom", - "gridSpan": "xxl_Gc-s7 xxl_Gr-s4", + "height": "xxl_H75u", "showInMain": false }, { "artId":"funny-cake", "bgColor":"Bgc-$artFunnyCake", - "gridSpan": "xxl_Gc-s6 xxl_Gr-s4", + "height": "xxl_H70u", "showInMain": false } ] \ No newline at end of file diff --git a/src/arts.ejs b/src/arts.ejs index 84c65a5..f64bd0e 100644 --- a/src/arts.ejs +++ b/src/arts.ejs @@ -5,7 +5,7 @@ area: Arts <% const artsPageCSS = { - card:"W100p H46u Ov-h Bdrd3u Bgc-$core815 Bd3;s;$brand Tf -S104p_h O50p O1_h sm_H50u md_H60u xxl_H-a -Ts", + card:"W100p H46u Ov-h Bdrd3u Bgc-$core815 Bd3;s;$brand Tf -S104p_h O50p O1_h sm_H50u md_H60u -Ts", color: "C-$white100 C-$brand500_h C-$brand200_a -Ts" } @@ -23,9 +23,9 @@ area: Arts

Pure css art

Created entirely with mlut utility classes

-
+
<% it.arts.forEach((art, index) => {%> - +
<%- include(`./arts/${art.artId}.ejs`) %>
@@ -47,8 +47,10 @@ area: Arts
<% }) %> +
-
+ +
-
diff --git a/src/assets/style/style.scss b/src/assets/style/style.scss index 8872a83..9a5f048 100644 --- a/src/assets/style/style.scss +++ b/src/assets/style/style.scss @@ -26,6 +26,16 @@ a { -webkit-tap-highlight-color: transparent; } +@media (min-width: 1401px) { + .masonry { + column-count: 3; + } + .breakIns { + break-inside: avoid; + margin-bottom: 1.5rem; + } +} + // Светлая тема @mixin light-theme { --ml-core200: #E4D6F0;