diff --git a/src/_data/arts.json b/src/_data/arts.json index b018c33..e2c0cba 100644 --- a/src/_data/arts.json +++ b/src/_data/arts.json @@ -1,38 +1,47 @@ [ { "artId":"ghost", - "bgColor":"Bgc-$artGhost" + "bgColor":"Bgc-$artGhost", + "showInMain": true }, { "artId":"flushed-emoji", - "bgColor":"Bgc-$artFlushedEmoji" + "bgColor":"Bgc-$artFlushedEmoji", + "showInMain": true }, { "artId":"penrose-triangle", - "bgColor":"Bgc-$artPenroseTriangle" + "bgColor":"Bgc-$artPenroseTriangle", + "showInMain": true }, { "artId":"exploding-head", - "bgColor":"Bgc-$artExplodingHead" + "bgColor":"Bgc-$artExplodingHead", + "showInMain": true }, { "artId":"clown-emoji", - "bgColor":"Bgc-$artClownEmoji" + "bgColor":"Bgc-$artClownEmoji", + "showInMain": false }, { "artId":"mushroom", - "bgColor":"Bgc-$artMushroom" + "bgColor":"Bgc-$artMushroom", + "showInMain": true }, { "artId":"robot-hare", - "bgColor":"Bgc-$artRobotHare" + "bgColor":"Bgc-$artRobotHare", + "showInMain": true }, { "artId":"funny-cake", - "bgColor":"Bgc-$artFunnyCake" + "bgColor":"Bgc-$artFunnyCake", + "showInMain": false }, { "artId":"cat", - "bgColor":"Bgc-$artCat" + "bgColor":"Bgc-$artCat", + "showInMain": false } ] \ No newline at end of file diff --git a/src/_data/extLinks.json b/src/_data/extLinks.json index c67127c..f6b6530 100644 --- a/src/_data/extLinks.json +++ b/src/_data/extLinks.json @@ -8,10 +8,5 @@ "name":"Github", "icon":"github", "link":"https://github.com/mlutcss/mlut" - }, - { - "name":"Documentation", - "icon":"book", - "link":"https://docs.mlut.style/" } ] diff --git a/src/_data/features.json b/src/_data/features.json index 861586e..951eddc 100644 --- a/src/_data/features.json +++ b/src/_data/features.json @@ -1,32 +1,17 @@ [ - { - "title": "Short and consistent naming ", - "text": "The abbreviations are based on the popularity of CSS properties and are compiled according to a single algorithm. If you know CSS, you almost know mlut", - "img": "lightning", - "bg": "-Gdl120d,$primary800,$primary750", - "bgH":"-Gdl120d,$primary700,$primary650_h", - "imgBg": "-Gdl120d,$primaryBright600,$primaryBright650", - "headC":"C-$primary300", - "textC":"C-$primary400" - }, - { - "title": "Rich and native syntax", - "text": "It is like Vim for CSS. Conveniently create complex styles with a powerful syntax that is conceptually close to CSS", - "img": "angled-brackets", - "bg": "-Gdl120d,$secondary800,$secondary750", - "bgH":"-Gdl120d,$secondary700,$secondary650_h", - "imgBg": "-Gdl120d,$secondaryBright600,$secondaryBright650", - "headC":"C-$secondary300", - "textC":"C-$secondary400" - }, - { - "title": "Written in Sass", - "text": "Leverage the full power of the preprocessor in your handwritten CSS and easily link it to utility classes", - "img": "sass", - "bg": "-Gdl120d,$tertiary800,$tertiary750", - "bgH":"-Gdl120d,$tertiary700,$tertiary650_h", - "imgBg": "-Gdl120d,$tertiaryBright600,$tertiaryBright650", - "headC":"C-$tertiary300", - "textC":"C-$tertiary400" - } + { + "title": "Rich syntax", + "text": "Powerful, Vim-like syntax for complex styles. Achieve more with less code while staying conceptually close to native CSS logic.", + "img": "curly-braces" + }, + { + "title": "Easy naming", + "text": "Abbreviations are generated by a single algorithm based on CSS property popularity. If you know CSS, you already know mlut.", + "img": "ease-name" + }, + { + "title": "Sass availability", + "text": "Full Sass power at your fingertips. Easily integrate preprocessor logic with utility classes for maximum flexibility.", + "img": "sass-availability" + } ] diff --git a/src/_data/navLinks.json b/src/_data/navLinks.json index 1bfd6cf..9e52a91 100644 --- a/src/_data/navLinks.json +++ b/src/_data/navLinks.json @@ -1,16 +1,24 @@ [ { - "link":"/#features", + "link":"/redesign-preview/#key-features", "text":"Features" }, { - "link":"/#comparison", + "link":"/redesign-preview/#comparison", "text":"Comparison" }, { - "link":"/arts", + "link":"#0", "text":"Art" }, + { + "link":"#0", + "text":"Showcase" + }, + { + "link":"https://docs.mlut.style/", + "text":"Docs" + }, { "link":"https://play.mlut.style/", "text":"Sandbox" diff --git a/src/_includes/components/code-block.ejs b/src/_includes/components/code-block.ejs index cdb304d..f482135 100644 --- a/src/_includes/components/code-block.ejs +++ b/src/_includes/components/code-block.ejs @@ -1,6 +1,6 @@ <% if(it.src) {%> -
- 
<%- include(it.src)%>
+
+ 
<%- include(it.src)%>
<% } else {%>

Invalid source

diff --git a/src/_includes/components/link-button.ejs b/src/_includes/components/link-button.ejs index 6ee7847..d88491c 100644 --- a/src/_includes/components/link-button.ejs +++ b/src/_includes/components/link-button.ejs @@ -1,20 +1,14 @@ <% const css = { - buttonShape:"-Sz100p D-f Jc-c Ai-c P1u;3u Fns0.8r Bdrd1u Ts-$shortTs Bd1;s;$brand", - contentContainer: "D-f Jc-c Ai-c Fld-r Gap3u Fns1.1r ", - iconContainer: "D Apcr1 W0.9r", - icon:"D W100p Mxw25u Apcr1 Stw2", - span:"D Fns0.9r " + buttonShape:"-Sz100p D-f Jc-c Ai-c P10 Fns4u Lnh100p Lts0 Fnst-n Fnw400 Bdrd8 Ts-$shortTs Bd1;s;$brand", } - href=`href=${it.url}` - - if (it.variant === 'dark'){ - css.buttonColors = "Bgc-n C-$brand Bgc-$brand200_h"; - css.svgColors = "Fi-n St-$brand"; + if (it.variant === 'brand') { + css.buttonColors = "Bgc-$brand Bgc-$brand500_h Bgc-$brand200_a"; + css.textColor = "C#fff"; } else { - css.buttonColors = "Bgc-$brand Bgc-$brand500_h C#fff"; - css.svgColors = " Fi-$brand St#fff"; + css.buttonColors = "Bgc-$white100 Bgc-$white200_h Bgc-$white300_a"; + css.textColor = "C#22141A"; } if (!it.tag) { @@ -23,27 +17,6 @@ href = '' } %> -<<%= it.tag %> <%= href %> - class="btn <%= css.buttonShape %> <%= css.buttonColors %>"> - <% if (it.icon) {%> -
-
- - - -
- - <%= it.text %> - -
- <% } else { %> -
- - <%= it.text %> - -
- <% } %> -> - +<<%= it.tag %> class="btn <%= css.buttonShape %> <%= css.buttonColors %> <%= css.textColor %>" href="<%= it.url %>"> + <%= it.text %> +> \ No newline at end of file diff --git a/src/_includes/components/sm-link.ejs b/src/_includes/components/sm-link.ejs index 64308a0..69080ef 100644 --- a/src/_includes/components/sm-link.ejs +++ b/src/_includes/components/sm-link.ejs @@ -1,24 +1,23 @@ -<% if (it.icon != 'github') {%> - -<% } else { %> - -<% } %> \ No newline at end of file +<% + if(it.name === "X") { + css.width = "24", + css.height = "24" + } else { + css.width = "26", + css.height = "26" + } +%> + + \ No newline at end of file diff --git a/src/_includes/footer.ejs b/src/_includes/footer.ejs index e5c375e..1748b47 100644 --- a/src/_includes/footer.ejs +++ b/src/_includes/footer.ejs @@ -1,80 +1,84 @@ <% - const universalMargin = "M0;0;5u" - const css = { - linkSect:`${universalMargin} P0;5u W49p md_W30p D-f Fld-r Flw-w Jc-fs md_Jc-c Ai-fs md_Ai-fs md_P0;3u `, - ul:` ${universalMargin} P0 Lsst-n W70p`, - li:"M0;0;2u", - link:"Txd-n C-$gray200 C-$brand_h Tsd-$shortTs", - universalMargin:"M0;0;5u" - } + const css = { + buttons: "btn D-f Ai-c Gap12 Mnh32 C-$accent900", + square: "Ps-a_af Ct_af W40p_af Apcr1_af T115p_af L50_af Bgc-$yellow500_af Bdrd0.5u_af", + twoArc: "Ps-a_af Ct_af W100p_af Apcr1_af T15p_af L1p_af Bdrd100p_af Bd1u;s;tp_af Bdtc-$brand_af Tf_af -Rt-20d_af Ps-a_b Ct_b W100p_b Apcr1_b T-30p_b L-74p_b Bdrd100p_b Bd1u;s;tp_b Bdbc-$brand_b Tf_b -Rt-15d_b" + } %> - + + \ No newline at end of file diff --git a/src/_includes/header/burger.ejs b/src/_includes/header/burger.ejs index bbb75bf..13b4795 100644 --- a/src/_includes/header/burger.ejs +++ b/src/_includes/header/burger.ejs @@ -1,12 +1,21 @@ -
- - - <%# Desktop links %> -
- <% for (let extLink of it.extLinks.filter((el) => el.name !== 'Documentation')) { %> - <%- include('../components/sm-link.ejs',{ - icon:`${extLink.icon}`, - link:`${extLink.link}` - }) %> - <% } %> -
- <%- include('../components/link-button.ejs',{ - url:"https://docs.mlut.style/", - text: "Docs", - icon: "", - variant:"" - }) %> +
+
+
-
- + + \ No newline at end of file diff --git a/src/_includes/redesign/components/card.ejs b/src/_includes/redesign/components/card.ejs new file mode 100644 index 0000000..4feff8e --- /dev/null +++ b/src/_includes/redesign/components/card.ejs @@ -0,0 +1,66 @@ + +<% + const card = it.item; + let styles; + if (card.title === "Rich syntax") { + styles = { + sizeSVG: "W34 H27 lg_W37 lg_H30", + padding: "P4u lg_P36;40", + gridPosition: "lg_Gc1 lg_Grs1 lg_Gre3 lg_As-st" + } + }; + if (card.title === "Easy naming") { + styles = { + sizeSVG: "W30 H30 lg_W32 lg_H32", + padding: "P4u lg_P16;20", + gridPosition: "lg_Gc2" + } + }; + if (card.title === "Sass availability") { + styles = { + sizeSVG: "W36 H27 lg_W40 lg_H30", + padding: "P4u lg_P16;20", + gridPosition: "lg_Gc2" + } + }; +%> + + +
  • +
    +
    +
    + + + +
    +

    <%= card.title %>

    +
    +

    <%= card.text %>

    +
    + <% if (card.title === "Rich syntax") { %> +
    +
    + mlut syntax +
    +
    + Standard CSS +
    + + @:ah_01_h + +
    + + + +
    + + @media (any-hover) { + .\@\:ah_01_h:hover { + opacity: 1 + } + } + +
    + <% } %> +
    • diff --git a/src/arts/exploding-head.ejs b/src/arts/exploding-head.ejs index 08f6c4d..7f4d89c 100644 --- a/src/arts/exploding-head.ejs +++ b/src/arts/exploding-head.ejs @@ -9,7 +9,8 @@ artLayer: "W100p Apcr1 Bdrd100p Ps-a" } %> -
    + +
    diff --git a/src/arts/mushroom.ejs b/src/arts/mushroom.ejs index 80dd8f5..de6443d 100644 --- a/src/arts/mushroom.ejs +++ b/src/arts/mushroom.ejs @@ -12,7 +12,7 @@
    -
    +
    diff --git a/src/assets/img/decor.svg b/src/assets/img/decor.svg new file mode 100644 index 0000000..7dd8697 --- /dev/null +++ b/src/assets/img/decor.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/img/icons.svg b/src/assets/img/icons.svg index b76dc7c..cb2922d 100644 --- a/src/assets/img/icons.svg +++ b/src/assets/img/icons.svg @@ -48,8 +48,44 @@ + // Redesign + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/logo.svg b/src/assets/img/logo.svg new file mode 100644 index 0000000..34df4a9 --- /dev/null +++ b/src/assets/img/logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/img/marker.svg b/src/assets/img/marker.svg new file mode 100644 index 0000000..b482d40 --- /dev/null +++ b/src/assets/img/marker.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/script/art-slider.js b/src/assets/script/art-slider.js new file mode 100644 index 0000000..d45403a --- /dev/null +++ b/src/assets/script/art-slider.js @@ -0,0 +1,37 @@ +import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.mjs'; + +const swiperCss = "https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css"; +if (!document.querySelector(`link[href*="swiper-bundle.min.css"]`)) { + const link = document.createElement('link'); + link.rel = 'stylesheet'; + link.href = swiperCss; + document.head.appendChild(link); +} + +class ArtsSlider extends HTMLElement { + constructor() { + super(); + } + + connectedCallback() { + const swiperContainer = this.querySelector('.swiper'); + if (!swiperContainer) return; + + this.swiper = new Swiper(swiperContainer, { + navigation: { + nextEl: '.next', + prevEl: '.prev' + }, + loop: true, + speed: 300, + effect: 'fade', + fadeEffect: { crossFade: true }, + simulateTouch: false, + allowTouchMove: true, + autoplay: true, + grabCursor: false + }); + } +} + +customElements.define('arts-slider', ArtsSlider); \ No newline at end of file diff --git a/src/assets/script/copyCode-toggleInstall.js b/src/assets/script/copyCode-toggleInstall.js new file mode 100644 index 0000000..e1319a9 --- /dev/null +++ b/src/assets/script/copyCode-toggleInstall.js @@ -0,0 +1,58 @@ +class CopyCode extends HTMLElement { + constructor() { + super(); + } + + connectedCallback() { + const button = this.querySelector(".copy-btn"); + const codeSlot = this.querySelector("code"); + if (!button || !codeSlot) return; + + button.addEventListener("click", async () => { + const text = codeSlot.textContent.trim(); + try { + await navigator.clipboard.writeText(text); + } catch (err) { + const textarea = document.createElement("textarea"); + textarea.value = text; + document.body.appendChild(textarea); + textarea.select(); + document.execCommand("copy"); + document.body.removeChild(textarea); + } + }); + } +} + + + +class ToggleTab extends HTMLElement { + constructor() { + super(); + } + + connectedCallback() { + const tabs = this.querySelectorAll(".tab"); + const extraSteps = this.querySelectorAll(".extra-step"); + + tabs.forEach((tab) => { + tab.addEventListener("click", () => { + + tabs.forEach((t) => t.classList.remove("Bdbc#394EB6")); + + tab.classList.add("Bdbc#394EB6"); + + const tabType = tab.dataset.tab; + if (tabType === "sass") { + extraSteps.forEach((step) => step.classList.remove("D-n")); + } else { + extraSteps.forEach((step) => step.classList.add("D-n")); + } + }); + }); + } +} + + +customElements.define("copy-code", CopyCode); +customElements.define("toggle-tab", ToggleTab); diff --git a/src/assets/script/theme-switcher.js b/src/assets/script/theme-switcher.js new file mode 100644 index 0000000..db2f316 --- /dev/null +++ b/src/assets/script/theme-switcher.js @@ -0,0 +1,69 @@ +class ThemeSwitcher extends HTMLElement { + constructor() { + super(); + + const theme = localStorage.getItem('theme'); + if (theme) { + this.applyTheme(theme); + } + } + + connectedCallback() { + const buttons = this.querySelectorAll('[data-theme]'); + if (buttons.length === 0) return; + + const currentTheme = this.getCurrentTheme(); + this.setActiveButton(buttons, currentTheme); + + buttons.forEach(button => { + button.addEventListener('click', () => { + const chosenTheme = button.dataset.theme; + if (chosenTheme) { + this.setTheme(chosenTheme); + this.setActiveButton(buttons, chosenTheme); + } + }); + }); + } + + applyTheme(theme) { + const html = document.documentElement; + html.classList.remove('theme-dark', 'theme-light'); + if (theme === 'dark' || theme === 'light') { + html.classList.add(`theme-${theme}`); + } + } + + setTheme(theme) { + this.applyTheme(theme); + localStorage.setItem('theme', theme); + } + + getCurrentTheme() { + const html = document.documentElement; + if (html.classList.contains('theme-dark')) return 'dark'; + if (html.classList.contains('theme-light')) return 'light'; + return 'auto'; + } + + setActiveButton(buttons, theme) { + buttons.forEach(button => { + const svg = button.querySelector('svg'); + if (svg) { + svg.classList.remove('C-$brand'); + } + button.removeAttribute('disabled'); + }); + + const activeBtn = Array.from(buttons).find(btn => btn.dataset.theme === theme); + if (activeBtn) { + const activeSvg = activeBtn.querySelector('svg'); + if (activeSvg) { + activeSvg.classList.add('C-$brand'); + } + activeBtn.setAttribute('disabled', 'true'); + } + } +} + +customElements.define('theme-switcher', ThemeSwitcher); \ No newline at end of file diff --git a/src/assets/style/style.scss b/src/assets/style/style.scss index a273de1..2355422 100644 --- a/src/assets/style/style.scss +++ b/src/assets/style/style.scss @@ -16,6 +16,7 @@ a { width:100%; font-size:1.2em; border-radius:8px; + height: 100%; } @@ -25,144 +26,200 @@ a { -webkit-tap-highlight-color: transparent; } -html{ - --ml-heroPadding: calc(var(--ml-headerH) + 10px); - --ml-core850:rgba(0,0,0,0.9); - --ml-primaryBright600:#2b7fff; - --ml-primaryBright650:#155dfc; - --ml-secondaryBright600:#f0438c; - --ml-secondaryBright650:#e91e63; - --ml-tertiaryBright600:#ad46ff; - --ml-tertiaryBright650:#8500e2; - --ml-brand:#f0438c; - --ml-brand200:rgba(233,30,99,0.2); - --ml-brand500:rgb(233,30,99); - --ml-darkGray:#1f1f1f; - --ml-blueGray:rgb(236, 240, 246,0.5); - --ml-gray200:#d1d5db; - --ml-gray350:#cacacaa0; +// Светлая тема +@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-core900: #D9D1CA; + --ml-core400: #FDF6EF; + --ml-core450: #2762f81f; + --ml-core800: #F7F2FF; + --ml-core810: #e4d6f0; + --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-core550: #fff; + --ml-core500: #edebeb; + --ml-core700: rgba(240, 67, 140, 0.3); + --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); + + // 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; } +// Тёмная тема +@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-core900: #000; + --ml-core400: #151833; + --ml-core450: #061230; + --ml-core800: #1B173C; + --ml-core810: #251F53; + --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-core550: rgba(57, 78, 182, 0.1); + --ml-core700: rgba(57, 78, 182, 0.24); + --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); + + // 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; +} -@media (prefers-color-scheme: dark){ - html{ - --ml-core300:rgba(32, 40, 57, 0.8); - --ml-core350: rgba(17,24,39,0.8); - --ml-core900:rgb(17,24,39); - --ml-core400:#121828; - --ml-core450:#061230; - --ml-core800:rgba(17,24,39,0.8); - --ml-core900:rgb(17,24,39); - --ml-core950:#000; - --ml-accent900:#fff; - --ml-accent850:rgb(209,213,219,1); - --ml-accent750:rgb(209,213,219,0.3); - --ml-accent800:#d1d5db; - --ml-core550:#1f2937; - --ml-core700:#111827; - --ml-core750:#121828; - --ml-core650:#251942; - --ml-core600:#321933; - --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-primary650:rgba(20,71,230,0.7); - --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:rgba(89,22,139,0.4); - --ml-tertiary750:rgba(110,17,176,0.4); - --ml-tertiary700:rgba(110,17,176,0.6); - --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); - // 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; - } +html { + --ml-heroPadding: calc(var(--ml-headerH) + 10px); + --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-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-white200: #F7F2FF; + --ml-white300: #E4D6F0; + --ml-yellow500: #F9CF67; + --ml-yellow510: rgb(249, 207, 103, 0.00); } -@media (prefers-color-scheme: light){ - html{ - --ml-core300:#ffedca80; - --ml-core350: #e2e2e2b6; - --ml-core900:rgb(255, 255, 255); - --ml-core400:rgba(244, 198, 248, 0.55); - --ml-core450:#2762f81f; - --ml-core800:rgb(255, 255, 255, 0.9); - --ml-core900:rgb(255, 255, 255); - --ml-core950:#fff; - --ml-accent900:rgb(17,24,39); - --ml-accent850:rgb(41,42,51,1); - --ml-accent800:rgba(17,24,39,0.6); - --ml-accent750:rgba(41, 42, 51, 0.164); - --ml-core550:#fff; - --ml-core500:#edebeb; - --ml-core700:rgba(242, 243, 246, 0.912); - --ml-core750:rgb(253, 173, 245, 0.6); - --ml-core650:rgba(218,178,255,0.3); - --ml-core600:rgba(142,197,255,0.6); - --ml-primary800:rgba(239,246,255,1); - --ml-primary750:rgba(219,234,254,1); - --ml-primary700:rgba(219,234,254,0.5); - --ml-primary650:rgba(190,219,255,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:rgba(243,232,255,1); - --ml-tertiary750:rgba(233,212,255,1); - --ml-tertiary700:rgba(233,212,255,0.5); - --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); - // 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; - } +// Базовая светлая тема +html { + @include light-theme; +} +// Явная светлая тема +html.theme-light { + @include light-theme; } +// Явная тёмная тема +html.theme-dark { + @include dark-theme; +} + +// Системная тёмная тема +@media (prefers-color-scheme: dark) { + html:not(.theme-light):not(.theme-dark) { + @include dark-theme; + } +} diff --git a/src/index-redesign.ejs b/src/index-redesign.ejs new file mode 100644 index 0000000..275a89e --- /dev/null +++ b/src/index-redesign.ejs @@ -0,0 +1,507 @@ +--- +layout: redesign-base +permalink: /redesign-preview/ +--- + +<% + const filteredArts = it.arts.filter(art => art.showInMain === true); + + const heroCSS = { + gradient: "Ps-a W80p md_W45p Apcr1 T14p L50p Tf -Tr-50p;0 Bdrd100p -Gdl180d,$core700;0,$core600;100p,$core700;100p Ft -Blr50", + vertical: "Ps-a_af Ct_af T0_af L50p_af W85p_af Apcr2/3_af Bgc-tp_af Tf_af -Tr-50p;0_af -Gdrl90d,$core800;0;1,tp;1;86,$core800;86;87,tp;87;107_af", + horizontal: "Ps-a_b Ct_b T-8_b L50p_b W85p_b Apcr2/3_b Bgc-tp_b Tf_b -Tr-50p;0_b -Gdrl180d,$core800;0;1,tp;1;86,$core800;86;87,tp;87;107_b Zi1_b", + dradientDescTop: "Ps-a_af Ct_af W40p_af Apcr1_af T5p_af R0_af Bdrd100p_af -Gdl180d,$core700;0,$core600;100p,$core700;100p_af Ft_af -Blr50_af", + dradientDescBot: "Ps-a_b Ct_b W30p_b Apcr1_b B-5p_b L0_b Bdrd100p_b -Gdl180d,$core700;0,$core600;100p,$core700;100p_b Ft_b -Blr40_b" + } + const decorCSSArts = { + squareFrame: "Ps-a W16 Apcr1 T-68 L212 Bdrd1u Bgc-$brand Ps-a_af Ct_af W21_af Apcr1_af T50p_af L-70p_af Bd1u;s;$primary650_af Bdrd1u_af", + triangle: "Ps-a T-39 L137 W57 Apcr1 Bdrd2u Bgc-$yellow500 Tf -Rt45d Zi-1 Ps-a_af Ct_af W20p_af Apcr1_af T45p_af L-16p_af Tf_af -Rt-45d_af Bdrd0.5u_af Bgc-$accent800_af", + squareDotArc: "Ps-a W35 Apcr1 md_T26p lg_T33p L13p Bgc-$accent800 -Gdrl90d,tp;0;2,$core800;2;8 Ps-a_af Ct_af -Sz100p_af T0_af L0_af -Gdrl0d,tp;0;2,$core800;2;8_af Ps-a_b Ct_b -Sz130p_b L-34p_b T-140p_b Bd1u;s;tp_b Bdrd100p_b Bdtc-$accent800_b Tf_b -Rt40d_b", + rectangleArc: "Ps-a W84 H20 md_B10p lg_B-4p L11p Bgc-$yellow500 Tf -Rt-30d Bdrd0.5u Zi-1 Ps-a_af Ct_af W50p_af Apcr1_af T85p_af L15p_af Bd1u;s;tp_af Bdrd100p_af Bdtc-$brand_af Tf_af -Rt20d_af", + circle: "Ps-a W100 Apcr1 md_T60p lg_T72p R15p Bgc-tp Bd0.75u;s;$accent800 Bdrd100p Zi-1", + square: "Ps-a W48 Apcr1 md_T54p lg_T66p R14p Bgc-$brand Tf -Rt17d Zi-2 Ps-a_af,b Ct_af,b -Sz104p_af,b T50p_af,b L50p_af,b Tf_af,b -Tr-50p;-50p_af,b -Gdrl90d,tp;0;6,$core800;6;21_b -Gdrl0d,tp;0;6,$core800;6;21_af", + arc: "Ps-a W60 H79 T0 R14p Bgc-tp Bdrd50p Bdl2u;s;$brand Bdt2u;s;tp Tf -Rt-39d Zi-1" + } + const decorCSS = { + twoSquares: "Ps-a W14 Apcr1 lg_T10p xl_T13p L10p Bdrd0.5u Bgc-$brand Ps-a_af Ct_af W9_af Apcr1_af T240p_af R-200p_af Bgc-$yellow500_af Bdrd0.5u_af", + squareDot: "Ps-a W28 Apcr1 L25.5p T12p Bgc-$accent750 -Gdrl90d,tp;0;2,$core800;2;8 Ps-a_af Ct_af -Sz100p_af T0_af L0_af -Gdrl0d,tp;0;2,$core800;2;8_af", + twoArt: "Ps-a W22 Apcr1 L22p T5p Bd1u;s;tp Bdrd100p Bdtc-$yellow500 Bdrc-$yellow500 Tf -Rt-34d Ps-a_af Ct_af W22_af Apcr1_af T45p_af L75p_af Bd1u;s;tp_af Bdrd100p_af Bdbc-$yellow500_af Bdlc-$yellow500_af", + rectangle: "Ps-a W100 H7 L25p T43p Bgc-$yellow500 Bdrd8;100p;100p;8 Tf -Rt-4d Zi-1", + squareDotFigure: "Ps-a W30 Apcr1 L44p lg_B4p xl_B12p Bgc-$accent750 -Gdrl90d,tp;0;4,$core800;4;12 Ps-a_af Ct_af -Sz100p_af T0_af L0_af -Gdrl0d,tp;0;4,$core800;4;12_af" + } +%> + +<%# Hero-section %> + +
    + +
    +
    +
    +
    + <% for (let decor of Object.values(decorCSS)) { %> +
    + <% } %> + + + + + + + + +
    + + Make CSS exciting again! + +
    + + +
    + <% for (let decor of Object.values(decorCSSArts)) { %> +
    + <% } %> + + + + + +
    +
    +
    +
    + <% if (filteredArts.length) { %> + <% for (let art of filteredArts) { %> +
    <%- include(`./arts/${art.artId}.ejs`) %>
    + <% } %> + <% } else { %> +
    there are no arts
    + <% } %> +
    +
    +
    +
    + +     + Yes, this is pure CSS +
    + +
    +

    Tailwind CSS alternative for custom websites and creative coding

    +
    + +
    +
    + <%- include('./_includes/components/link-button.ejs',{ + url:"https://docs.mlut.style/", + text: "Get started", + variant: "brand" + }) + %> +
    +
    + <%- include('./_includes/components/link-button.ejs',{ + url:"#0", + text: "View the gallery", + variant: "white" + }) + %> +
    +
    +
    + + + + +<% + const decorFeatures = { + twoSquares: "Ps-a W14 Apcr1 T3p L10p Bdrd0.5u Bgc-$brand Ps-a_af Ct_af W9_af Apcr1_af T150p_af R-115p_af Bgc-$yellow500_af Bdrd0.5u_af", + trianglePink: "Ps-a -Sz40 B3p xl_B8p L80p xl_L86p Bdb36;s;$brand Bdl20;s;tp Bdr20;s;tp Tf -Rt-25deg", + triangleYellow: "Ps-a -Sz54 T22p L78p Bdb50;s;$yellow500 Bdl27;s;tp Bdr27;s;tp Tf -Rt22deg", + squareFrame: "Ps-a W16 Apcr1 B10p L50p Bdrd1u Bgc-$brand Ps-a_af Ct_af W21_af Apcr1_af T50p_af L-70p_af Bd1u;s;$primary650_af Bdrd1u_af", + stick: "Ps-a T35p L76p W175 H2 Bgc-$core205 Tf -Rt-50d" + } + const groupDecor = { + twoCircle: "Ps-a_af Ct_af T49p_af L67p_af -Sz51_af Bdrd100p_af Bgc#394EB6_af Ps-a_b Ct_b T60p_b R10p_b -Sz82_b Bdrd100p_b Bgc#16348C_b", + twoSticks: "Ps-a_af Ct_af T81p_af L-17p_af W162_af H6_af Bdrd4_af Bgc-$core202_af Ps-a_b Ct_b T49p_b L-86p_b W280_b H3_b Bdrd50p_b Bgc-$core231_b Tf_b -Rt-19d_b", + circle: "Ps-a_af Ct_af T-124p_af L-44p_af -Sz40_af Bdrd100p_af Bgc-$core221_af" + } +%> + + +<%# Key Features %> + +
    + <%# decor %> +
    +
    +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + +

    Key features

    +

    This is a framework for enthusiasts who are as passionate about CSS and front-end development as we are!

    + +
      + <% for (let card of it.features) { %> + <%- include('./_includes/redesign/components/card.ejs', {item: card}) %> + <% } %> +
    +
    + + +<% + const comparisonCss = { + marker: "Ps-a_b Ct_b L0_b T0.25u_b -Sz16_b Msi-url('/assets/img/marker.svg')_b Mss8_b Msr-nr_b Msp-c_b", + gradientEclipse: "Ps-a_af Ct_af W100p_af Apcr3/4_af T0_af L0_af Bdrd100p_af -Gdl180d,$yellow510;0,$brand100;100p_af Ft_af -Blr100_af", + gradientRectangle: "Ps-a_b Ct_b W50p_b Apcr1/2_b B0_b L50p_b Tf_b -Tr-50p;0_b -Gdl180d,$core550;0,$brand100;100p_b Ft_b -Blr100_b" + } + const decorCss = { + squareDot: "Ps-a W38 Apcr1 T3.8p L13p Bgc-$yellow500 -Gdrl0d,tp;0;3,$core800;3;8 Ps-a_af Ct_af W100p_af Apcr1_af T0_af L0_af -Gdrl90d,tp;0;3,$core800;3;8_af", + squareFrame: "Ps-a W16 Apcr1 B-1p L93p Bdrd1u Bgc-$brand Ps-a_af Ct_af W21_af Apcr1_af T50p_af L-70p_af Bd1u;s;$primary650_af Bdrd1u_af", + triangle: "Ps-a Zi-1 B-6p xl_B58p L10p xl_L93p W88 H74 Bdl88;s;$yellow500 Bdt37;s;tp Bdb37;s;tp Tf -Rt-10d Ps-a_af Ct_af W44_af H36_af T-16_af L-74_af Bdl50;s;$core800_af Bdt18;s;tp_af Bdb18;s;tp_af", + twoArc: "Ps-a_af Ct_af W100p_af Apcr1_af T15p_af L71p_af Bdrd100p_af Bd1u;s;tp_af Bdtc-$brand_af Tf_af -Rt-20d_af Ps-a_b Ct_b W100p_b Apcr1_b T-32p_b L0p_b Bdrd100p_b Bd1u;s;tp_b Bdbc-$brand_b Tf_b -Rt-15d_b", + frameSquare: "Ps-a W36 Apcr1 Bdrd1u Ps-a_af Ct_af W41_af Apcr1_af T50p_af L-70p_af Bdrd1u_af", + twoCircle: "Ps-a T57p L72p W45 Apcr1 Bdrd100p Bgc-$core210 Ps-a_af Ct_af T39p_af L-84p_af W125p_af Apcr1_af Bdrd100p_af Bgc-$yellow500_af", + arrows: "Ps-a T73p L-2p W252 H10 Bgc-$core215 Bdrd100p;8;8;100p Tf -Rt24d Ps-a_af Ct_af T-600p_af L22p_af W252_af H5_af Bgc-$brand_af Tf_af -Rt-90d_af Ps-a_b Ct_b W16_b Apcr1_b T500p_b L50p_b Bdrd2_b Bgc-$core220_b", + circleSquare: "Ps-a_af Ct_af T-160p_af L250p_af W52_af Apcr1_af Bdrd100p_af Bd8;s;#394EB6_af Ps-a_b Ct_b T-300p_b L600p_b W27_b Apcr1_b Bdrd4_b Bgc-$brand_b Tf_b -Rt-30d_b", + twoCircleTop: "Ps-a_af Ct_af T10p_af L45p_af W42_af Apcr1_af Bdrd100p_af Bgc#394EB6_af Ps-a_b Ct_b T50p_b R-10p_b W34_b Apcr1_b Bdrd100p_b Bgc#16348C_b", + circle: "Ps-a_af Ct_af W36_af Apcr1_af Bdrd100p_af", + twoSquare: "Ps-a T75p L86p W24 Apcr1 Bdrd6 Bgc-$core225 Ps-a_af Ct_af T125p_af L-70p_af W18_af Apcr1_af Bdrd4_af Bgc-$core230_af Zi2_af" + } +%> + +<%# Comparison %> + +
    +
    + +

    Why choose mlut?

    + + <%# Strong naming %> + +

    Strong naming

    +
    + + <%# Tailwind card %> +
    +

    Tailwind CSS

    +
      +
    • + justify-*: content, items or self? +
      • +
    • + flex => display: flex, but flex-auto => flex:1 1 auto +
      • +
    • + bg-none => reset all backgrounds? Nope, only background-image +
      • +
    +
    + + <%# Tachyons card %> +
    +

    Tachyons

    +
      +
    • + br-0 => border-right-width: 0,but br1 => border-radius: .125rem +
      • +
    • + normal: line-height, font-weight or letter-spacing? +
      • +
    • + b => bottom, border, or display: block? No, it is font-weight: bold +
      • +
    +
    + + <%# mlut card %> +
    +

    mlut

    +
      +
    • + Jc-c => justify-content: center and Js-c => justify-self: center +
      • +
    • + Bdr => border-right: 1px solid and Bdrd1 => border-radius: 1px +
      • +
    +
    + +
    +
    + + <%# Shorter class names and convenient syntax %> +
    + +

    Shorter class names and convenient syntax

    + +
    + + <%# Shorter class names %> + +

    Shorter class names

    +
    + + <%# Tailwind card %> +
    +

    Tailwind CSS

    +
    + <%- include('./_includes/components/code-block.ejs',{ + src: "./code-samples/tw1.ejs", + lang: "html", + })%> +
    +
    + + <%# mlut card %> +
    +

    mlut

    +
    + <%- include('./_includes/components/code-block.ejs',{ + src: "./code-samples/mlut1.ejs", + lang: "html", + })%> +
    +
    + +
    +
    + + <%# Convenient syntax %> + +

    Convenient syntax

    +
    + + <%# Tachyons card %> +
    +

    Tachyons

    +
      +
    • + [@media(any-hover:hover){&:hover}]:opacity-100> +
      • +
    • + text-[length:var(--myVar,1.3rem)]> +
      • +
    • + supports-[margin:1svw]:ml-[1svw] +
      • +
    +
    + + <%# mlut card %> +
    +

    mlut

    +
      +
    • + @:ah_O1_h +
      • +
    • + Fns-$myVar?1.3> +
      • +
    • + @s_Ml1svw> +
      • +
    +
    +
    +
    +
    + + <%# Compactness comparison%> + +

    See how much more code you need in handwritten CSS to reproduce the same styles written in mlut

    +

    Almost all power of CSS in one utility class

    +
    + + <%# Handwritten CSS card%> +
    +

    Handwritten CSS

    +
    + <%- include('./_includes/components/code-block',{ + src: "./code-samples/regcss1.ejs", + lang: "html", + }) %> +
    +
    + + <%# mlut card %> +
    +

    mlut

    +
    + <%- include('./_includes/components/code-block',{ + src: "./code-samples/mlut2.ejs", + lang: "html", + }) %> +
    +
    +
    + + <%# decor %> +
    +
    + + + +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    + + + +
    + +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    + + +<% + const installationCSS = { + button: "btn W100p Fnw600 Fnst-n Lnh100p Lts0 C-$accent900 P2.5u Txa-s Bdb0.375u Bdbs-s", + installStep:"Fns4u Fnst-n Fnw300 Lnh150p Lts0 C-$accent900 D-ib Coi-step Ct-counter(step);'.'_b D-ib_b C-$accent900_b Mr6_b", + vertical: "Ps-a_af Ct_af T0_af L50p_af W85p_af H100p_af Bgc-tp_af Tf_af -Tr-50p;0_af -Gdrl90d,$core820;0;1,tp;1;86,$core820;86;87,tp;87;107_af", + horizontal: "Ps-a_b Ct_b T-8_b L50p_b W85p_b H100p_b Bgc-tp_b Tf_b -Tr-50p;0_b -Gdrl180d,$core820;0;1,tp;1;86,$core820;86;87,tp;87;107_b Zi1_b", + squareY: "Ps-a_af Ct_af W40p_af Apcr1_af T-125p_af L210_af Bgc-$yellow500_af Bdrd0.5u_af", + squareB: "Ps-a_af Ct_af W55p_af Apcr1_af T265p_af L87_af Bgc#16348C_af Bdrd0.5u_af", + twoSquares: "Ps-a W14 Apcr1 lg_T10p xl_T13p L10p Bdrd0.5u Bgc-$brand Ps-a_af Ct_af W9_af Apcr1_af T240p_af R-200p_af Bgc-$yellow500_af Bdrd0.5u_af" + } +%> + + +<%# Installation %> + +
    +
    + +

    Installation

    + + +
    + + +
    + +
      +
    • + Install via NPM + + <%- include('./_includes/components/code-block',{ + src: "./code-samples/install1.ejs", + lang: "bash", + }) %> + + +
      • +
    • + And run + + <%- include('./_includes/components/code-block',{ + src: "./code-samples/install2.ejs", + lang: "bash", + }) %> + + +
      • +
    • + Add configuration if you need + + <%- include('./_includes/components/code-block',{ + src: "./code-samples/install4.ejs", + lang: "scss", + }) %> + + +
      • +
    • + And run + + <%- include('./_includes/components/code-block',{ + src: "./code-samples/install5.ejs", + lang: "bash", + }) %> + + +
      • +
    +     + +
    + <%- include('./_includes/components/link-button.ejs',{ + url:"https://docs.mlut.style/section-start.html", + text: "Try now", + variant: "brand" + }) + %> +
    + +
    +
    +
    + + +
    + + diff --git a/src/layouts/redesign-base.ejs b/src/layouts/redesign-base.ejs new file mode 100644 index 0000000..7e7fa8c --- /dev/null +++ b/src/layouts/redesign-base.ejs @@ -0,0 +1,45 @@ +<% +let cssHeaderLogoVisibility = "Vs-v O1" +if (it.area === "main"){ + cssHeaderLogoVisibility = "Vs-h O0" +} + +%> + + + + + + + + + + + + + + + + mlut - make CSS exciting again! + + + <%- include('../_includes/header/header.ejs',{ + cssHeaderLogoVisibility: cssHeaderLogoVisibility + }) %> +
    + <%- it.content %> +
    + + <%- include('../_includes/footer.ejs') %> + + + + + + +