diff --git a/src/assets/img/decor.svg b/src/assets/img/decor.svg
new file mode 100644
index 0000000..44a8a5e
--- /dev/null
+++ b/src/assets/img/decor.svg
@@ -0,0 +1,36 @@
+
\ No newline at end of file
diff --git a/src/assets/img/icons.svg b/src/assets/img/icons.svg
index b76dc7c..e95e5a9 100644
--- a/src/assets/img/icons.svg
+++ b/src/assets/img/icons.svg
@@ -52,4 +52,7 @@
+
+
+
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..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/style/style.scss b/src/assets/style/style.scss
index a273de1..53acda4 100644
--- a/src/assets/style/style.scss
+++ b/src/assets/style/style.scss
@@ -29,46 +29,48 @@ html{
--ml-heroPadding: calc(var(--ml-headerH) + 10px);
--ml-core850:rgba(0,0,0,0.9);
--ml-primaryBright600:#2b7fff;
- --ml-primaryBright650:#155dfc;
+ --ml-primary650:#16348C;
--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-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:#cacacaa0;
+ --ml-white100: #fff;
+ --ml-white200: #F7F2FF;
+ --ml-white300: #E4D6F0;
+ --ml-yellow500: #F9CF67;
}
@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-core300:#0B0A22;
+ --ml-core350: #151833;
+ --ml-core900:#000;
+ --ml-core400:#151833;
--ml-core450:#061230;
- --ml-core800:rgba(17,24,39,0.8);
- --ml-core900:rgb(17,24,39);
+ --ml-core800:#1B173C;
--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-accent850:#A3A0B9;
+ --ml-accent750:#394EB6;
+ --ml-accent800:#62B7EA;
+ --ml-core550:rgba(57, 78, 182, 0.1);
+ --ml-core700:rgba(57, 78, 182, 0.24);
--ml-core750:#121828;
- --ml-core650:#251942;
- --ml-core600:#321933;
+ --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-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);
@@ -108,28 +110,26 @@ html{
@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-core300:#fff;
+ --ml-core350: #16348C;
+ --ml-core900:#D9D1CA;
+ --ml-core400:#FDF6EF;
--ml-core450:#2762f81f;
- --ml-core800:rgb(255, 255, 255, 0.9);
- --ml-core900:rgb(255, 255, 255);
+ --ml-core800:#F7F2FF;
--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-accent900:#22141A;
+ --ml-accent850:#394EB6;
+ --ml-accent800:#394EB6;
+ --ml-accent750:#16348C;
--ml-core550:#fff;
--ml-core500:#edebeb;
- --ml-core700:rgba(242, 243, 246, 0.912);
+ --ml-core700:rgba(240, 67, 140, 0.3);
--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-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-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);
diff --git a/src/index-redesign.ejs b/src/index-redesign.ejs
new file mode 100644
index 0000000..d81fd49
--- /dev/null
+++ b/src/index-redesign.ejs
@@ -0,0 +1,122 @@
+---
+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 %>
+
+
+
+
+
diff --git a/src/layouts/redesign-base.ejs b/src/layouts/redesign-base.ejs
new file mode 100644
index 0000000..d70e00f
--- /dev/null
+++ b/src/layouts/redesign-base.ejs
@@ -0,0 +1,43 @@
+<%
+let cssHeaderLogoVisibility = "Vs-v O1"
+if (it.area === "main"){
+ cssHeaderLogoVisibility = "Vs-h O0"
+}
+
+%>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
mlut - make CSS exciting again!
+
+
+ <%- include('../_includes/redesign/header/header.ejs',{
+ cssHeaderLogoVisibility: cssHeaderLogoVisibility
+ }) %>
+
+ <%- it.content %>
+
+
+ <%- include('../_includes/footer.ejs') %>
+
+
+
+
+
+
+
+
+
+ <%# Menu %>
+