diff --git a/style.scss b/style.scss index 27c99e5..ef466a2 100644 --- a/style.scss +++ b/style.scss @@ -1,3 +1,38 @@ @use '@mlut/core/tools'; +@use '@mlut/core/dist/sass/css/styles/variables'; @use '@mlut/core/dist/sass/css/helpers/btn'; @use '@mlut/core/dist/sass/addons/demo-theme'; + +html { + box-sizing: border-box; + --ml-accent500: rgba(231, 233, 234, 0.5); + --ml-accent900: #e7e9ea; + --ml-accent850: #0f1419; + --ml-accent600: #333639; + --ml-accent200: #1d9bf0; + --ml-accent300: #fa4646; + --ml-accent400: #6bc4ff; + --ml-secondary900: #4a4a4a; + --ml-secondary850: #bdbdbd; + --ml-secondary400: rgba(0,0,0,0.40); + --ml-secondary300: rgba(0,0,0,0.20); + --ml-secondary200: rgba(0,0,0,0.10); +} + +*, +*::before, +*::after { + box-sizing: inherit; +} + +button, +input, +textarea { + font-family: inherit; + font-size: 100%; + margin: 0; +} + +div { + scrollbar-width: none; +} \ No newline at end of file diff --git a/values/-1/img/json.jpg b/values/-1/img/json.jpg new file mode 100644 index 0000000..7989787 Binary files /dev/null and b/values/-1/img/json.jpg differ diff --git a/values/-1/img/sprite.svg b/values/-1/img/sprite.svg new file mode 100644 index 0000000..193994a --- /dev/null +++ b/values/-1/img/sprite.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/values/-1/img/wallpaper.jpg b/values/-1/img/wallpaper.jpg new file mode 100644 index 0000000..3258efd Binary files /dev/null and b/values/-1/img/wallpaper.jpg differ diff --git a/values/-1/index.html b/values/-1/index.html new file mode 100644 index 0000000..61fbe51 --- /dev/null +++ b/values/-1/index.html @@ -0,0 +1,152 @@ + + + + + + + Document + + + +
+ +
+ + +
+
+ +
+ +
+ + +
+ Json Statement + 777 posts +
+ +
+ +
+
+
+ + + +
+ + +
+ + wallpaper +
+
+ + +
+
+ + profile-photo +
+
+ + +
+
+ + + +
+ +
Json Statement
+
@json_statement
+ +

A professional Frontend dev and killer-feature maker with 20 years of experience.

+ + +
+ + + mlut.style + + + + Joined May 2023 + + +
+ + +
+ + 73 Following + + + 75433 Followers + +
+
+ + +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+ + \ No newline at end of file diff --git a/values/-1/style.css b/values/-1/style.css new file mode 100644 index 0000000..876e1fc --- /dev/null +++ b/values/-1/style.css @@ -0,0 +1,573 @@ +/* +CSS variables + +Global CSS custom properties which used in mlut. + +--ml-gg = 0.75rem - [grid gutter](section-concepts.html#kssref-concepts-custom_unit-gg). +--ml-gscc = 12 - number of columns in the grid system. Sets by [$gs-columns](section-settings.html#kssref-settings-gs). Available only with `$legacy-grid-system` flag enabled + +Styleguide: css_lib.styles.css_vars +*/ +:root { + --ml-gg: 0.75rem; +} +@media (min-width: 992px) { + :root { + --ml-gg: 1rem; + } +} + +/* +Btn + +Helper for creating buttons. Prepares any element to styling as a button. + +Markup: ../../../docs/examples/css_lib-helpers/btn/btn.html + +Styleguide: css_lib.helpers.btn +*/ +.btn { + display: inline-block; + margin: 0; + padding: 0; + line-height: inherit; + text-align: center; + text-decoration: none; + vertical-align: middle; + background: none; + border: 0; + cursor: pointer; +} + +html { + box-sizing: border-box; + --ml-accent500: rgba(231, 233, 234, 0.5); + --ml-accent900: #e7e9ea; + --ml-accent850: #0f1419; + --ml-accent600: #333639; + --ml-accent200: #1d9bf0; + --ml-accent300: #fa4646; + --ml-accent400: #6bc4ff; + --ml-secondary900: #4a4a4a; + --ml-secondary850: #bdbdbd; + --ml-secondary400: rgba(0,0,0,0.40); + --ml-secondary300: rgba(0,0,0,0.20); + --ml-secondary200: rgba(0,0,0,0.10); +} + +*, +*::before, +*::after { + box-sizing: inherit; +} + +button, +input, +textarea { + font-family: inherit; + font-size: 100%; + margin: 0; +} + +div { + scrollbar-width: none; +} + +.Bgc-white { + background-color: white; +} + +.C-\$accent900 { + color: var(--ml-accent900); +} + +.Fnf-mUss { + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +} + +.-HeaderH13u { + --ml-headerH: 3.25rem; +} + +.M0 { + margin: 0px; +} + +.Ps-a { + position: absolute; +} + +.W100p { + width: 100%; +} + +.H100vh { + height: 100vh; +} + +.Bgc-grey { + background-color: grey; +} + +.D-f { + display: flex; +} + +.Jc-c { + justify-content: center; +} + +.Ai-c { + align-items: center; +} + +.Mxw38gg { + max-width: calc(var(--ml-gg) * 38); +} + +.-Sz100p { + width: 100%; + height: 100%; +} + +.Bgc-black { + background-color: black; +} + +.Ovy-s { + overflow-y: scroll; +} + +.P0\;0\;5u { + padding: 0px 0px 1.25rem; +} + +.Ctnn-form { + container-name: form; +} + +.Ctnt-is { + container-type: inline-size; +} + +.P0\;2u { + padding: 0px 0.5rem; +} + +.H-\$headerH { + height: var(--ml-headerH); +} + +.Ps-f { + position: fixed; +} + +.Bgc\#000\*0\.5 { + background-color: rgba(0, 0, 0, 0.5); +} + +.Zi20 { + z-index: 20; +} + +.Ai-str { + align-items: stretch; +} + +.Jc-fs { + justify-content: flex-start; +} + +.W10p { + width: 10%; +} + +.Mnw10u { + min-width: 2.5rem; +} + +.Bd-n { + border: none; +} + +.Bgc-tp { + background-color: transparent; +} + +.W80p { + width: 80%; +} + +.Apcr1 { + aspect-ratio: 1; +} + +.D { + display: block; +} + +.Bdrd100p { + border-radius: 100%; +} + +.-Ts { + transition-duration: 0.3s; + transition-property: background-color, border-color, color, fill, stroke, backdrop-filter, box-shadow, filter, opacity, transform; +} + +.-Sz26 { + width: 26px; + height: 26px; +} + +.Us-n { + user-select: none; +} + +.Va-b { + vertical-align: bottom; +} + +.W90p { + width: 90%; +} + +.P1u\;0 { + padding: 0.25rem 0px; +} + +.H100p { + height: 100%; +} + +.Fld-c { + flex-direction: column; +} + +.Ai-fs { + align-items: flex-start; +} + +.Jc-sa { + justify-content: space-around; +} + +.Fnw700 { + font-weight: 700; +} + +.Fns4u { + font-size: 1rem; +} + +.Fns3\.5u { + font-size: 0.875rem; +} + +.Fnw500 { + font-weight: 500; +} + +.C-\$secondary900 { + color: var(--ml-secondary900); +} + +.Jc-fe { + justify-content: flex-end; +} + +.-Sz24 { + width: 24px; + height: 24px; +} + +.P0 { + padding: 0px; +} + +.Ps { + position: relative; +} + +.Mt-\$headerH { + margin-top: var(--ml-headerH); +} + +.H35u { + height: 8.75rem; +} + +.Ov-h { + overflow: hidden; +} + +.P0\;1 { + padding: 0px 1px; +} + +.T0 { + top: 0px; +} + +.L0 { + left: 0px; +} + +.-Gdl180d\,\$secondary400\,tp { + background-image: linear-gradient(180deg, var(--ml-secondary400), transparent); +} + +.H10p { + height: 10%; +} + +.P3u\;5u { + padding: 0.75rem 1.25rem; +} + +.Jc-sb { + justify-content: space-between; +} + +.D-ib { + display: inline-block; +} + +.W25u { + width: 6.25rem; +} + +.Mxw100p { + max-width: 100%; +} + +.B0 { + bottom: 0px; +} + +.P0\.5u\;0 { + padding: 0.125rem 0px; +} + +.Ml-a { + margin-left: auto; +} + +.Bd1\;s\;\#fff\*\.5 { + border: 1px solid rgba(255, 255, 255, 0.5); +} + +.C-ih { + color: inherit; +} + +.P2u\;4u { + padding: 0.5rem 1rem; +} + +.Bdrd10u { + border-radius: 2.5rem; +} + +.Fnw600 { + font-weight: 600; +} + +.Tsp-bgc { + transition-property: background-color; +} + +.Lnh100p { + line-height: 100%; +} + +.P0\;5u { + padding: 0px 1.25rem; +} + +.M0\;0\;5u { + margin: 0px 0px 1.25rem; +} + +.Fns5u { + font-size: 1.25rem; +} + +.M0\;0\;2u { + margin: 0px 0px 0.5rem; +} + +.M0\;0\;3u { + margin: 0px 0px 0.75rem; +} + +.Gap4u { + gap: 1rem; +} + +.C-\$accent200 { + color: var(--ml-accent200); +} + +.Txd-n { + text-decoration: none; +} + +.Gap1u { + gap: 0.25rem; +} + +.-Sz20 { + width: 20px; + height: 20px; +} + +.C\#fff\*\.4 { + color: rgba(255, 255, 255, 0.4); +} + +.Tsp-c\,tf { + transition-property: color, transform; +} + +.-Ctx:hover .\^\:h_C-\$accent200 { + color: var(--ml-accent200); +} + +.Tf { + transform: translateX(var(--ml-trx)) translateY(var(--ml-try)) scaleX(var(--ml-sx)) scaleY(var(--ml-sy)) rotate(var(--ml-rt)) skewX(var(--ml-skx)) skewY(var(--ml-sky)); + --ml-trx: 0; + --ml-try: 0; + --ml-sx: 1; + --ml-sy: 1; + --ml-rt: 0; + --ml-skx: 0; + --ml-sky: 0; +} + +.-Ctx:hover .\^\:h_-Rt-90d { + --ml-rt: -90deg; +} + +.-Ctx:active .\^\:a_C-\$accent200 { + color: var(--ml-accent200); +} + +.-Ctx:active .\^\:a_-Rt-90d { + --ml-rt: -90deg; +} + +.Fns100p { + font-size: 100%; +} + +.-Ctx:hover .\^\:h_Txd-u { + text-decoration: underline; +} + +.-Sz23 { + width: 23px; + height: 23px; +} + +.Txd-u_h:hover { + text-decoration: underline; +} + +.Ovx-s { + overflow-x: scroll; +} + +.Ps-r { + position: relative; +} + +.Bdb1\;s\;\#fff\*\.2 { + border-bottom: 1px solid rgba(255, 255, 255, 0.2); +} + +.Txa-c { + text-align: center; +} + +.P0\;3u { + padding: 0px 0.75rem; +} + +.Gap2\.5u { + gap: 0.625rem; +} + +.P3u\;2u { + padding: 0.75rem 0.5rem; +} + +.Fls0 { + flex-shrink: 0; +} + +.-D-vh { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + white-space: nowrap; + border: 0; + clip: rect(0 0 0 0); +} + +.M-a { + margin: auto; +} + +.-Ctx:checked + .\^\:c\:\+_Bdb2\;s\;\$accent200 { + border-bottom: 2px solid var(--ml-accent200); +} + +@media (min-width: 768px) { + .md_Fns5u { + font-size: 1.25rem; + } +} +@media (min-width: 768px) { + .md_H50u { + height: 12.5rem; + } +} +@media (min-width: 768px) { + .md_W40u { + width: 10rem; + } +} +@container form (min-width: 600px) { + .\@c\:form\:w\>\=600_P0\;3u { + padding: 0px 0.75rem; + } +} +@media (hover) { + .\@\:hv_Bgc-\$secondary900_h:hover { + background-color: var(--ml-secondary900); + } +} +@media (hover: none) { + .\@\:hv-n_Bgc-\$secondary900_a:active { + background-color: var(--ml-secondary900); + } +} +@container form (max-width: 539px) { + .\@c\:form\:w\<540_P1u\;0 { + padding: 0.25rem 0px; + } +} +@media (hover) { + .\@\:hv_Bgc\#fff\*\.1_h:hover { + background-color: rgba(255, 255, 255, 0.1); + } +} +@media (hover: none) { + .\@\:hv-n_Bgc\#fff\*\.1_a:active { + background-color: rgba(255, 255, 255, 0.1); + } +} \ No newline at end of file diff --git a/values/0/img/json.jpg b/values/0/img/json.jpg new file mode 100644 index 0000000..7989787 Binary files /dev/null and b/values/0/img/json.jpg differ diff --git a/values/0/img/sprite.svg b/values/0/img/sprite.svg new file mode 100644 index 0000000..193994a --- /dev/null +++ b/values/0/img/sprite.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/values/0/img/wallpaper.jpg b/values/0/img/wallpaper.jpg new file mode 100644 index 0000000..3258efd Binary files /dev/null and b/values/0/img/wallpaper.jpg differ diff --git a/values/0/index.html b/values/0/index.html new file mode 100644 index 0000000..fa33530 --- /dev/null +++ b/values/0/index.html @@ -0,0 +1,152 @@ + + + + + + + Document + + + +
+ +
+ + +
+
+ +
+ +
+ + +
+ Json Statement + 777 posts +
+ +
+ +
+
+
+ + + +
+ + +
+ + wallpaper +
+
+ + +
+
+ + profile-photo +
+
+ + +
+
+ + + +
+ +
Json Statement
+
@json_statement
+ +

A professional Frontend dev and killer-feature maker with 20 years of experience.

+ + +
+ + + mlut.style + + + + Joined May 2023 + + +
+ + +
+ + 73 Following + + + Followers + +
+
+ + +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+ + \ No newline at end of file diff --git a/values/0/style.css b/values/0/style.css new file mode 100644 index 0000000..26f03ae --- /dev/null +++ b/values/0/style.css @@ -0,0 +1,331 @@ +/* +CSS variables + +Global CSS custom properties which used in mlut. + +--ml-gg = 0.75rem - [grid gutter](section-concepts.html#kssref-concepts-custom_unit-gg). +--ml-gscc = 12 - number of columns in the grid system. Sets by [$gs-columns](section-settings.html#kssref-settings-gs). Available only with `$legacy-grid-system` flag enabled + +Styleguide: css_lib.styles.css_vars +*/ +:root { + --ml-gg: 0.75rem; +} +@media (min-width: 992px) { + :root { + --ml-gg: 1rem; + } +} + +/* +Btn + +Helper for creating buttons. Prepares any element to styling as a button. + +Markup: ../../../docs/examples/css_lib-helpers/btn/btn.html + +Styleguide: css_lib.helpers.btn +*/ +.btn { + display: inline-block; + margin: 0; + padding: 0; + line-height: inherit; + text-align: center; + text-decoration: none; + vertical-align: middle; + background: none; + border: 0; + cursor: pointer; +} + +html { + box-sizing: border-box; + --ml-accent500: rgba(231, 233, 234, 0.5); + --ml-accent900: #e7e9ea; + --ml-accent850: #0f1419; + --ml-accent600: #333639; + --ml-accent200: #1d9bf0; + --ml-accent300: #fa4646; + --ml-accent400: #6bc4ff; + --ml-secondary900: #4a4a4a; + --ml-secondary850: #bdbdbd; + --ml-secondary400: rgba(0,0,0,0.40); + --ml-secondary300: rgba(0,0,0,0.20); + --ml-secondary200: rgba(0,0,0,0.10); +} + +*, +*::before, +*::after { + box-sizing: inherit; +} + +button, +input, +textarea { + font-family: inherit; + font-size: 100%; + margin: 0; +} + +div { + scrollbar-width: none; +} + +.Bgc-white { + background-color: white; +} + +.C-\$accent900 { + color: var(--ml-accent900); +} + +.Fnf-mUss { + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +} + +.-HeaderH13u { + --ml-headerH: 3.25rem; +} + +.M0 { + margin: 0px; +} + +.Ps-a { + position: absolute; +} + +.W100p { + width: 100%; +} + +.H100vh { + height: 100vh; +} + +.Bgc-grey { + background-color: grey; +} + +.D-f { + display: flex; +} + +.Jc-c { + justify-content: center; +} + +.Ai-c { + align-items: center; +} + +.Mxw38gg { + max-width: calc(var(--ml-gg) * 38); +} + +.-Sz100p { + width: 100%; + height: 100%; +} + +.Bgc-black { + background-color: black; +} + +.Ovy-s { + overflow-y: scroll; +} + +.P0\;0\;5u { + padding: 0px 0px 1.25rem; +} + +.Ctnn-form { + container-name: form; +} + +.Ctnt-is { + container-type: inline-size; +} + +.H-\$headerH { + height: var(--ml-headerH); +} + +.Ps-f { + position: fixed; +} + +.Bgc\#000\*0\.5 { + background-color: rgba(0, 0, 0, 0.5); +} + +.Zi20 { + z-index: 20; +} + +.Ai-str { + align-items: stretch; +} + +.Jc-fs { + justify-content: flex-start; +} + +.W10p { + width: 10%; +} + +.Bd-n { + border: none; +} + +.-Sz26 { + width: 26px; + height: 26px; +} + +.Us-n { + user-select: none; +} + +.Va-b { + vertical-align: bottom; +} + +.W90p { + width: 90%; +} + +.H100p { + height: 100%; +} + +.-Sz24 { + width: 24px; + height: 24px; +} + +.P0 { + padding: 0px; +} + +.Mt-\$headerH { + margin-top: var(--ml-headerH); +} + +.Ps { + position: relative; +} + +.D { + display: block; +} + +.P0\;1 { + padding: 0px 1px; +} + +.H10p { + height: 10%; +} + +.D-ib { + display: inline-block; +} + +.W25u { + width: 6.25rem; +} + +.Apcr1 { + aspect-ratio: 1; +} + +.Mxw100p { + max-width: 100%; +} + +.P0\.5u\;0 { + padding: 0.125rem 0px; +} + +.C-ih { + color: inherit; +} + +.P2u\;4u { + padding: 0.5rem 1rem; +} + +.Bdrd10u { + border-radius: 2.5rem; +} + +.Fnw600 { + font-weight: 600; +} + +.Tsp-bgc { + transition-property: background-color; +} + +.-Ts { + transition-duration: 0.3s; + transition-property: background-color, border-color, color, fill, stroke, backdrop-filter, box-shadow, filter, opacity, transform; +} + +.Lnh100p { + line-height: 100%; +} + +.Fnw700 { + font-weight: 700; +} + +.Fns5u { + font-size: 1.25rem; +} + +.Fns4u { + font-size: 1rem; +} + +.Gap4u { + gap: 1rem; +} + +.M0\;0\;2u { + margin: 0px 0px 0.5rem; +} + +.Gap1u { + gap: 0.25rem; +} + +.-Sz20 { + width: 20px; + height: 20px; +} + +.Fns100p { + font-size: 100%; +} + +.-Sz23 { + width: 23px; + height: 23px; +} + +@media (min-width: 768px) { + .md_W40u { + width: 10rem; + } +} +@media (min-width: 768px) { + .md_Fns5u { + font-size: 1.25rem; + } +} \ No newline at end of file