diff --git a/src/_data/arts.json b/src/_data/arts.json index 4d3607e..daa21d9 100644 --- a/src/_data/arts.json +++ b/src/_data/arts.json @@ -1,43 +1,53 @@ [ { "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": false }, { "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 }, { "artId":"corgi", - "bgColor":"Bgc-$artCorgi" + "bgColor":"Bgc-$artCorgi", + "showInMain": true } ] \ 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..16c06e3 100644 --- a/src/_data/features.json +++ b/src/_data/features.json @@ -1,32 +1,27 @@ [ - { - "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", + "sizeSVG": "W34 H27 lg_W37 lg_H30", + "padding": "P4u lg_P36;40", + "gridPosition": "lg_Gc1 lg_Grs1 lg_Gre3 lg_As-st", + "extraContent": "rich-syntax" + }, + { + "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", + "sizeSVG": "W30 H30 lg_W32 lg_H32", + "padding": "P4u lg_P16;20", + "gridPosition": "lg_Gc2" + }, + { + "title": "Sass availability", + "text": "Full Sass power at your fingertips. Easily integrate preprocessor logic with utility classes for maximum flexibility.", + "img": "sass-availability", + "sizeSVG": "W36 H27 lg_W40 lg_H30", + "padding": "P4u lg_P16;20", + "gridPosition": "lg_Gc2" + } ] diff --git a/src/_data/navLinks.json b/src/_data/navLinks.json index 1bfd6cf..cd663bc 100644 --- a/src/_data/navLinks.json +++ b/src/_data/navLinks.json @@ -1,6 +1,6 @@ [ { - "link":"/#features", + "link":"/#key-features", "text":"Features" }, { @@ -11,6 +11,10 @@ "link":"/arts", "text":"Art" }, + { + "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..741943c 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/embedded/rich-syntax.ejs b/src/_includes/components/embedded/rich-syntax.ejs new file mode 100644 index 0000000..9507f3a --- /dev/null +++ b/src/_includes/components/embedded/rich-syntax.ejs @@ -0,0 +1,31 @@ +
+
+
+ mlut syntax +
+
+ + @:ah_01_h + +
+
+
+ + + +
+
+
+ CSS +
+
+ + @media (any-hover) { + .\@\:ah_01_h:hover { + opacity: 1 + } + } + +
+
+
\ No newline at end of file diff --git a/src/_includes/components/link-button.ejs b/src/_includes/components/link-button.ejs index 6ee7847..dbc7f39 100644 --- a/src/_includes/components/link-button.ejs +++ b/src/_includes/components/link-button.ejs @@ -1,49 +1,25 @@ <% - 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 " + const css = { + 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) { - it.tag = 'a' - } else { - href = '' - } + const isLink = it.url && it.url !== '#0'; + const tag = isLink ? 'a' : 'button'; + const className = it.className || ''; %> -<<%= it.tag %> <%= href %> - class="btn <%= css.buttonShape %> <%= css.buttonColors %>"> - <% if (it.icon) {%> -
-
- - - -
- - <%= it.text %> - -
- <% } else { %> -
- - <%= it.text %> - -
- <% } %> -> +<<%= tag %> + class="btn <%= css.buttonShape %> <%= css.buttonColors %> <%= css.textColor %> <%= className %>" + <%= isLink ? `href="${it.url}"` : '' %> + <%= tag === 'button' ? 'type="button"' : '' %> +> + <%= 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..85401c9 100644 --- a/src/_includes/footer.ejs +++ b/src/_includes/footer.ejs @@ -1,80 +1,109 @@ <% - 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" + buttons: "btn D-f Ai-c P2.5u;3u xl_P2.5u;5u Gap12 C-$accent900 C-$brand_h -Ts", + 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-32p_b L-70p_b Bdrd100p_b Bd1u;s;tp_b Bdbc-$brand_b Tf_b -Rt-15d_b", + badge: "Tf -S102p_h -Ts" } %> - + + \ No newline at end of file diff --git a/src/_includes/header/burger.ejs b/src/_includes/header/burger.ejs index bbb75bf..7a3433d 100644 --- a/src/_includes/header/burger.ejs +++ b/src/_includes/header/burger.ejs @@ -1,12 +1,19 @@ - -
- - - <%# 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..204fe2e --- /dev/null +++ b/src/_includes/redesign/components/card.ejs @@ -0,0 +1,22 @@ + +<% + const card = it.item; +%> + + +
  • +
    +
    +
    + + + +
    +

    <%= card.title %>

    +
    +

    <%= card.text %>

    +
    + <% if (card.extraContent) { %> + <%- include(`../../components/embedded/${card.extraContent}.ejs`) %> + <% } %> +
    • diff --git a/src/arts.ejs b/src/arts.ejs index 259d0d7..6e849c4 100644 --- a/src/arts.ejs +++ b/src/arts.ejs @@ -24,7 +24,7 @@ area: Arts
    <%- include(`./arts/${art.artId}.ejs`) %>
    -
    +
    <%- include(`./_includes/components/link-button.ejs`, { @@ -47,7 +47,7 @@ area: Arts
    + class="-Sz100p Bd1u;d;$brand205 Bdc-$brand_a @:hv_Bdc-$brand205 @:hv_^:h_Bdc-$brand Bdrd5u Tsd-ih D-f Fld-c Jc-c Ai-c C-$brand Txd-n"> diff --git a/src/arts/corgi.ejs b/src/arts/corgi.ejs index 5372c33..93c20b7 100644 --- a/src/arts/corgi.ejs +++ b/src/arts/corgi.ejs @@ -37,7 +37,7 @@
    <% } %>
    -
    +
    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/badge/Microlaunch.svg b/src/assets/img/badge/Microlaunch.svg new file mode 100644 index 0000000..7f70590 --- /dev/null +++ b/src/assets/img/badge/Microlaunch.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/badge/Radar.svg b/src/assets/img/badge/Radar.svg new file mode 100644 index 0000000..a391b31 --- /dev/null +++ b/src/assets/img/badge/Radar.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/badge/TinyLaunch.svg b/src/assets/img/badge/TinyLaunch.svg new file mode 100644 index 0000000..c32ae8a --- /dev/null +++ b/src/assets/img/badge/TinyLaunch.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + 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/script/art-slider.js b/src/assets/script/art-slider.js new file mode 100644 index 0000000..b1e7d79 --- /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/copy-code.js b/src/assets/script/copy-code.js new file mode 100644 index 0000000..d360dfd --- /dev/null +++ b/src/assets/script/copy-code.js @@ -0,0 +1,25 @@ +class CopyCode extends HTMLElement { + constructor() { + super(); + } + + connectedCallback() { + const button = this.querySelector('.copy-btn'); + const pre = this.querySelector('pre'); + if (!button || !pre) return; + + button.addEventListener('click', () => { + const text = pre.textContent.trim(); + navigator.clipboard.writeText(text).catch(() => { + const textarea = document.createElement('textarea'); + textarea.value = text; + document.body.appendChild(textarea); + textarea.select(); + document.execCommand('copy'); + document.body.removeChild(textarea); + }); + }); + } +} + +customElements.define('copy-code', CopyCode); \ No newline at end of file diff --git a/src/assets/script/nav-links.js b/src/assets/script/nav-links.js new file mode 100644 index 0000000..33f4017 --- /dev/null +++ b/src/assets/script/nav-links.js @@ -0,0 +1,19 @@ +class NavLinks extends HTMLElement { + constructor() { + super(); + } + + connectedCallback() { + const burger = this.querySelector('#menu-toggle'); + if (!burger) return; + + this.addEventListener('click', (e) => { + const link = e.target.closest('a'); + if (link) { + burger.checked = false; + } + }); + } +} + +customElements.define('nav-links', NavLinks); \ No newline at end of file diff --git a/src/assets/script/theme-switcher.js b/src/assets/script/theme-switcher.js new file mode 100644 index 0000000..2671c5c --- /dev/null +++ b/src/assets/script/theme-switcher.js @@ -0,0 +1,47 @@ +class ThemeSwitcher extends HTMLElement { + constructor() { + super(); + this._theme = localStorage.getItem('mlut-theme') || 'auto'; + this.applyTheme(this._theme); + } + + connectedCallback() { + this._activeClass = this.getAttribute('active-btn-css') || ''; + this._buttons = [...this.querySelectorAll('[data-theme]')]; + if (this._buttons.length === 0) return; + + this._updateActiveButton(this._theme); + + this.addEventListener('click', (e) => { + const button = e.target.closest('[data-theme]'); + if (!button || !button.dataset.theme) return; + this.setTheme(button.dataset.theme); + }); + } + + 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) { + if (theme === this._theme) return; + this._theme = theme; + localStorage.setItem('mlut-theme', theme); + this.applyTheme(theme); + this._updateActiveButton(theme); + } + + _updateActiveButton(theme) { + this._buttons.forEach((btn) => { + const isActive = btn.dataset.theme === theme; + btn.classList.toggle(this._activeClass, isActive); + btn.disabled = isActive; + }); + } +} + +customElements.define('theme-switcher', ThemeSwitcher); diff --git a/src/assets/script/toggle-install.js b/src/assets/script/toggle-install.js new file mode 100644 index 0000000..61faae9 --- /dev/null +++ b/src/assets/script/toggle-install.js @@ -0,0 +1,29 @@ +class ToggleTab extends HTMLElement { + constructor() { + super(); + } + + connectedCallback() { + const activeClass = this.getAttribute('active-tab-css') || ''; + const tabs = this.querySelectorAll('.tab'); + const extraSteps = this.querySelectorAll('.extra-step'); + + if (!tabs.length || !extraSteps.length) return; + + this.addEventListener('click', (e) => { + const tab = e.target.closest('.tab'); + if (!tab) return; + + tabs.forEach((t) => t.classList.remove(activeClass)); + tab.classList.add(activeClass); + 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('toggle-tab', ToggleTab); diff --git a/src/assets/script/toggleLogo.js b/src/assets/script/toggleLogo.js index 7fbc9f0..47b578b 100644 --- a/src/assets/script/toggleLogo.js +++ b/src/assets/script/toggleLogo.js @@ -1,4 +1,4 @@ -const hero = document.querySelector('#hero-page'); +const footer = document.querySelector('#footer'); const logo = document.querySelector('#header-logo'); function handleIntersect(entries, observer){ @@ -24,9 +24,9 @@ function createObserver(){ }; const observer = new IntersectionObserver(handleIntersect, options); - observer.observe(hero); + observer.observe(footer); }; -if (hero) { +if (footer) { createObserver(); } \ No newline at end of file diff --git a/src/assets/style/style.scss b/src/assets/style/style.scss index cb3af3e..26370ef 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,146 +26,210 @@ 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-core355: #e2e2e2b6; + --ml-core900: #D9D1CA; + --ml-core400: #FDF6EF; + --ml-core450: #2762f81f; + --ml-core800: #F7F2FF; + --ml-core805: #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-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-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; + --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-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-core730: rgba(255, 197, 111, 0.1);//// + --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); -@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; - --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-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-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-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); +} + -@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; - --ml-artCorgi: #92959c; - } +// Базовая тёмная тема + явная тёмная +html, .theme-dark { + @include dark-theme; +} +// Явная светлая тема +.theme-light { + @include light-theme; } +// Системная светлая тема +@media (prefers-color-scheme: light) { + html:not(.theme-dark):not(.theme-light) { + @include light-theme; + } +} diff --git a/src/index-old.ejs b/src/index-old.ejs new file mode 100644 index 0000000..59298cb --- /dev/null +++ b/src/index-old.ejs @@ -0,0 +1,420 @@ + +<% + const sectionHeader = "Txa-c M0;0;5u Fns7u C-$accent900" + const heroCSS = { + universalMargin:"M0;0;5u" + } +%> +<%# Hero-section %> + +
    + +
    + + mlut logo + + + + Make CSS exciting again! + + +

    + Tailwind CSS alternative for custom websites and creative coding +

    + +
    + <%- include('./_includes/components/link-button.ejs',{ + url:"https://docs.mlut.style/", + text: "Get started", + icon: "book", + variant: "light" + }) + %> +
    +
    +
    + +<%# Arts section %> + +
    +
    +

    + When creativity meets productivity +

    + +

    + Yes, this is pure CSS art using utility classes! With mlut it is possible. +

    + +
    + + <%# arts %> + +
    + + <%- include(`./arts/exploding-head.ejs`)%> +
    + +
    + +
    + <%- include('./_includes/components/link-button.ejs',{ + url:"/arts", + text: "More arts", + }) + %> +
    + +
    + +<%# Features section %> + +
    + +
    +

    + Key features +

    + +

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

    + + <%# Feature cards %> + +
      + <% + for (let card of it.features) { + %> + <%- include('./_includes/components/card.ejs', { + title: card.title, + text: card.text, + img: card.img, + bg: card.bg, + bgH: card.bgH, + imgBg: card.imgBg, + headC: card.headC, + textC: card.textC + }) %> + + <% } %> +
    + +
    + <%- include('./_includes/components/link-button.ejs',{ + url: "https://docs.mlut.style/", + text: "Learn more", + icon: "right-triangle" + }) + %> +
    + +
    + +<% + + const card = "Mxw45gg P2u lg_P2u;5u Tsd-$longTs Tf -S105p_h Bdrd2u Bd1;s;$accent850" + + const examplesCSS = { + h3: "C-$brand Txa-c W90p Fns6u M0;a;5u", + subsection:"W100p M0;0;10u", + subsectionDescription:"M0;a;5u P0;5u C-$accent850 Mxw62ch md_W80p Txa-c", + subsectionContent:"D-f Fld-r Jc-c Flw-w Gap5u W90p M0;a;9u", + wrongCard: "-Gdl120d,$wrong900,$wrong800 -Gdl120d,$wrong850,$wrong750_h", + correctCard: "-Gdl120d,$correct900,$correct800 -Gdl120d,$correct850,$correct750_h", + cardHeader: "C-$accent900 M0;0;3u", + syntCardPoint:"Ps-r D W100p Mb2u P0;5u Lnh1.6 C-red_b Fns3u_b D-ib_b Ps-a_b T0_b L0_b", + syntCardList:"M0;0;1u P0;1u Fns3.2u Lsst-n Flg1", + syntCardHead:"Flg0 Pt3u W100p Mb1u", + exampleCard:`${card} W100p`, + ergonomicCard:`${card} W100p md_W-a `, + complexSyntCard:`${card} W100p md_W45p lg_W40p`, + compactCard:"D-f Mxw35gg Fld-c Jc-c Ai-s Gap5u W100p md_W45p ", + compactCode:"W100p P3u;2u Tsd-$longTs Tf -S105p_h Bdrd2u Bd1;s;$accent850", + + compactH4:"M0;0;3u C-$accent900", + installLi:"Ps-r M0;0;8u P0;5u C-$brand_m", + codeWord: "C-$accent900 Bgc-$accent750 Bdrd1u Fnf-mUm P0.2u;1u", + installStep:"Fnw-b C-$accent850 M0;0;2u D-ib Coi-step Ct-counter(step);'.'_b D-ib_b C-$brand_b" + } +%> + +
    + +
    +

    + Why choose mlut? +

    + +

    + Compare it with other solutions +

    + + <%# Naming conventions part%> + +
    + +

    + Strong naming conventions +

    + +
    + + <%# 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 +
      • +
        +
    + +
    +
    + + <%# Ergonomics comparison %> + +
    + +

    + Great ergonomics +

    +

    + 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 for complex values, states and at-rules. +

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

    + Tailwind CSS +

    +
    + +
      +
    • + [@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%> + +
    + +

    + Almost all power of CSS in one utility class +

    +

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

    + +
    + + <%# mlut card %> + + +
    +
    +

    mlut

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

    Handwritten CSS

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

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

      + Or with Sass config and base styles +

      +
      • +
    • +

      Create input file

      + <%- include('./_includes/components/code-block',{ + src: "./code-samples/install3.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", + icon: "right-triangle" + }) + %> +
    +
    diff --git a/src/index.ejs b/src/index.ejs index aac85e1..9f16264 100644 --- a/src/index.ejs +++ b/src/index.ejs @@ -2,249 +2,272 @@ layout: 'base.ejs' area: 'main' --- + <% - const sectionHeader = "Txa-c M0;0;5u Fns7u C-$accent900" + const filteredArts = it.arts.filter(art => art.showInMain === true); + const heroCSS = { - universalMargin:"M0;0;5u" + 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-70 L100 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 L8 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 T33p L-22p 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 B-4p L-30p 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 T72p R-27p Bgc-tp Bd0.75u;s;$accent800 Bdrd100p Zi-1", + square: "Ps-a W48 Apcr1 T66p R-27p 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 R-27p Bgc-tp Bdrd50p Bdl2u;s;$brand Bdt2u;s;tp Tf -Rt-39d Zi-1" + } + const decorCSS = { + twoSquares: "Ps-a W14 Apcr1 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", + twoArc: "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 T44p Bgc-$yellow500 Bdrd8;100p;100p;8 Tf -Rt-4d Zi-1", + squareDotFigure: "Ps-a W30 Apcr1 L44p 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 %> -
    - -
    - - mlut logo +<%# 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 -

    +
    +

    Tailwind CSS alternative for custom websites and creative coding

    +
    -
    - <%- include('./_includes/components/link-button.ejs',{ +
    +
    + <%- include('./_includes/components/link-button.ejs',{ url:"https://docs.mlut.style/", text: "Get started", - icon: "book", - variant: "light" - }) - %> + variant: "brand" + }) + %> +
    +
    + <%- include('./_includes/components/link-button.ejs',{ + url:"#0", + text: "View the gallery", + variant: "white" + }) + %>
    -<%# Arts section %> -
    -
    -

    - When creativity meets productivity -

    + -

    - Yes, this is pure CSS art using utility classes! With mlut it is possible. -

    - -
    - - <%# arts %> +<% + 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 -Sz48 B3p xl_B8p L80p xl_L86p Bdb40;s;$brand Bdl24;s;tp Bdr24;s;tp Tf -Rt25deg", + 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" + } +%> -
    - <%- include(`./arts/exploding-head.ejs`)%> -
    +<%# Key Features %> +
    + <%# decor %> +
    +
    +
    +
    +
    + + +
    - -
    - <%- include('./_includes/components/link-button.ejs',{ - url:"/arts", - text: "More arts", - }) - %> -
    - +
    +
    +
    +
    +
    +
    +
    +
    + + + + +

    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}) %> + <% } %> +
    -<%# Features section %> - -
    - -
    -

    - Key features -

    - -

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

    - - <%# Feature cards %> - -
      - <% - for (let card of it.features) { - %> - <%- include('./_includes/components/card.ejs', { - title: card.title, - text: card.text, - img: card.img, - bg: card.bg, - bgH: card.bgH, - imgBg: card.imgBg, - headC: card.headC, - textC: card.textC - }) %> - - <% } %> -
    - -
    - <%- include('./_includes/components/link-button.ejs',{ - url: "https://docs.mlut.style/", - text: "Learn more", - icon: "right-triangle" - }) - %> -
    - -
    <% - - const card = "Mxw45gg P2u lg_P2u;5u Tsd-$longTs Tf -S105p_h Bdrd2u Bd1;s;$accent850" - - const examplesCSS = { - h3: "C-$brand Txa-c W90p Fns6u M0;a;5u", - subsection:"W100p M0;0;10u", - subsectionDescription:"M0;a;5u P0;5u C-$accent850 Mxw62ch md_W80p Txa-c", - subsectionContent:"D-f Fld-r Jc-c Flw-w Gap5u W90p M0;a;9u", - wrongCard: "-Gdl120d,$wrong900,$wrong800 -Gdl120d,$wrong850,$wrong750_h", - correctCard: "-Gdl120d,$correct900,$correct800 -Gdl120d,$correct850,$correct750_h", - cardHeader: "C-$accent900 M0;0;3u", - syntCardPoint:"Ps-r D W100p Mb2u P0;5u Lnh1.6 C-red_b Fns3u_b D-ib_b Ps-a_b T0_b L0_b", - syntCardList:"M0;0;1u P0;1u Fns3.2u Lsst-n Flg1", - syntCardHead:"Flg0 Pt3u W100p Mb1u", - exampleCard:`${card} W100p`, - ergonomicCard:`${card} W100p md_W-a `, - complexSyntCard:`${card} W100p md_W45p lg_W40p`, - compactCard:"D-f Mxw35gg Fld-c Jc-c Ai-s Gap5u W100p md_W45p ", - compactCode:"W100p P3u;2u Tsd-$longTs Tf -S105p_h Bdrd2u Bd1;s;$accent850", - - compactH4:"M0;0;3u C-$accent900", - installLi:"Ps-r M0;0;8u P0;5u C-$brand_m", - codeWord: "C-$accent900 Bgc-$accent750 Bdrd1u Fnf-mUm P0.2u;1u", - installStep:"Fnw-b C-$accent850 M0;0;2u D-ib Coi-step Ct-counter(step);'.'_b D-ib_b C-$brand_b" + const comparisonCss = { + marker: "Ps-a_b Ct_b L4_b T6_b -Sz8_b Bdrd100p_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 L-7p_b Bdrd100p_b Bd1u;s;tp_b Bdbc-$brand_b Tf_b -Rt-15d_b", + frameSquare: "Ps-a Apcr1 Bdrd1u Ps-a_af Ct_af W110p_af Apcr1_af T50p_af L-70p_af Bdrd1u_af", + twoCircle: "Ps-a B20p L74p W20p 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 B15p L-2p W102p H1u lg_H2u Bgc-$core215 Bdrd100p;8;8;100p Tf -Rt24d Ps-a_af Ct_af B12u_af lg_B16u_af L22p_af W100p_af H0.5u_af lg_H0.75u_af Bgc-$brand_af Tf_af -Rt-90d_af Ps-a_b Ct_b W7p_b Apcr1_b B-8u_b L50p_b Bdrd2_b Bgc-$core220_b", + circleSquare: "Ps-a_af Ct_af T-20p_af L40p_af W20p_af Apcr1_af Bdrd100p_af Bd2u;s;#394EB6_af Ps-a_b Ct_b T-20p_b L100p_b W12p_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 T68p xxl_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" } %> -
    - -
    -

    - Why choose mlut? -

    - -

    - Compare it with other solutions -

    - - <%# Naming conventions part%> - -
    - -

    - Strong naming conventions -

    - -
    - - <%# 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 -
      • -
        -
    - -
    -
    - - <%# Ergonomics comparison %> - -
    - -

    - Great ergonomics -

    -

    - Shorter class names -

    -
    +<%# 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 -

    +
    +

    Tailwind CSS

    +
    <%- include('./_includes/components/code-block.ejs',{ src: "./code-samples/tw1.ejs", lang: "html", @@ -253,10 +276,9 @@ area: 'main'
    <%# mlut card %> - -
    -
    -

    mlut

    +
    +

    mlut

    +
    <%- include('./_includes/components/code-block.ejs',{ src: "./code-samples/mlut1.ejs", lang: "html", @@ -264,160 +286,230 @@ area: 'main'
    +
    -

    - Convenient syntax for complex values, states and at-rules. -

    + <%# Convenient syntax %> -
    +

    Convenient syntax

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

    - Tailwind CSS -

    -
    - -
      -
    • - [@media(any-hover:hover){&:hover}]:opacity-100 +
      +

      Tailwind

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

      mlut

      -
      - -
        -
      • - @:ah_O1_h +
        +

        mlut

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

    - Almost all power of CSS in one utility class -

    -

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

    - -
    - - <%# mlut card %> - +

    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

    +
    -
    -
    -

    mlut

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

    Handwritten CSS

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

    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 %> +
    +
    + + + +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    + + + +
    + +
    +
    +
    +
    +
    +
    +
    + + +
    - <%# Installation part %> -
    -

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

      - Or with Sass config and base styles -

      +<% + const installationCSS = { + button: "btn Ps W100p Fnw600 Fnst-n Lnh100p Lts0 C-$accent900 C-$brand_a md_C-$brand_h md_Lts2p_h md_Ts-lts;0.5s,c;0.5s P2.5u Txa-s Ps-a_af Ct_af W100p_af H1_af L0_af B-2_af Bgc-$gray350_af Tf_af -Sy300p_h:af -Ts_af", + 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 T26 xl_T66 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

      + + +
      +

      Installation type

      + + +
      + +
        +
      • + Install via NPM + + <%- include('./_includes/components/code-block',{ + src: "./code-samples/install1.ejs", + lang: "bash", + }) %> + +
        • -
      • -

        Create input file

        - <%- include('./_includes/components/code-block',{ - src: "./code-samples/install3.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", - }) %> +
      • + 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", - }) %> +
      • + 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", - icon: "right-triangle" + url:"https://docs.mlut.style/section-start.html", + text: "Try now", + variant: "brand" }) %>
    + +
    +
    +
    +
    + + + diff --git a/src/layouts/base.ejs b/src/layouts/base.ejs index f4b28c3..28bc74c 100644 --- a/src/layouts/base.ejs +++ b/src/layouts/base.ejs @@ -8,28 +8,34 @@ if (it.area === "main"){ + -HeaderH10.5u -HeaderFns16 -ShortTs0.2s + md_-HeaderH23u lg_-HeaderH21u xl_-HeaderH22u md_-SideH90vh + Scb-s"> - - - + + + + - mlut - make CSS exciting again! + + + + + + mlut - make CSS exciting again! - - <%- include('../_includes/header/header.ejs',{ + + <%- include('../_includes/header/header.ejs',{ cssHeaderLogoVisibility: cssHeaderLogoVisibility }) %> -
    - <%- it.content %> -
    +
    + <%- it.content %> +
    - <%- include('../_includes/footer.ejs') %> + <%- include('../_includes/footer.ejs') %>