diff --git a/index.html b/index.html index 269e1a2..81e0bc7 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,7 @@

mlut tutorials

diff --git a/states/-1/img/json.jpg b/states/-1/img/json.jpg new file mode 100644 index 0000000..7989787 Binary files /dev/null and b/states/-1/img/json.jpg differ diff --git a/states/-1/img/sprite.svg b/states/-1/img/sprite.svg new file mode 100644 index 0000000..49884ee --- /dev/null +++ b/states/-1/img/sprite.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/states/-1/img/wallpaper.jpg b/states/-1/img/wallpaper.jpg new file mode 100644 index 0000000..3258efd Binary files /dev/null and b/states/-1/img/wallpaper.jpg differ diff --git a/states/-1/index.html b/states/-1/index.html new file mode 100644 index 0000000..4dc7b01 --- /dev/null +++ b/states/-1/index.html @@ -0,0 +1,124 @@ + + + + + + + Document + + + +
+ +
+ + +
+
+ + +
+ +
+ + +
+ Edit profile +
+ +
+ + +
+
+
+ + + +
+ + +
+ + wallpaper +
+ + + + + + + +
+
+ +
+ + profile-photo + +
+ + +
+
+ + +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+
+ +
+
+
+ + \ No newline at end of file diff --git a/states/-1/style.css b/states/-1/style.css new file mode 100644 index 0000000..5f3409d --- /dev/null +++ b/states/-1/style.css @@ -0,0 +1,452 @@ +/* +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; +} + +.Mxw600 { + max-width: 600px; +} + +.W90p { + width: 90%; +} + +.H160u { + height: 40rem; +} + +.Mxh90vh { + max-height: 90vh; +} + +.Bgc-black { + background-color: black; +} + +.T5p { + top: 5%; +} + +.Bdrd5u { + border-radius: 1.25rem; +} + +.Ovy-s { + overflow-y: scroll; +} + +.P0\;0\;5u { + padding: 0px 0px 1.25rem; +} + +.P2u\;3u { + padding: 0.5rem 0.75rem; +} + +.H-\$headerH { + height: var(--ml-headerH); +} + +.Ps-f { + position: fixed; +} + +.Bgc\#000\*50p { + background-color: rgba(0, 0, 0, 0.5); +} + +.-Bdtrd5u { + border-top-right-radius: 1.25rem; + border-top-left-radius: 1.25rem; +} + +.Zi20 { + z-index: 20; +} + +.Ai-str { + align-items: stretch; +} + +.Jc-fs { + justify-content: flex-start; +} + +.-Sz100p { + width: 100%; + height: 100%; +} + +.W10p { + width: 10%; +} + +.H100p { + height: 100%; +} + +.Bd-n { + border: none; +} + +.Bgc-tp { + background-color: transparent; +} + +.Bgc-\$secondary900_h:hover { + background-color: var(--ml-secondary900); +} + +.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; +} + +.Fnw700 { + font-weight: 700; +} + +.Fns6u { + font-size: 1.5rem; +} + +.P0\.5u\;0 { + padding: 0.125rem 0px; +} + +.Ml-a { + margin-left: auto; +} + +.Bgc-\$accent900 { + background-color: var(--ml-accent900); +} + +.Bgc-\$secondary850_h:hover { + background-color: var(--ml-secondary850); +} + +.C-\$accent850 { + color: var(--ml-accent850); +} + +.W18u { + width: 4.5rem; +} + +.Bdrd10u { + border-radius: 2.5rem; +} + +.Fnw600 { + font-weight: 600; +} + +.Lnh100p { + line-height: 100%; +} + +.P0 { + padding: 0px; +} + +.Ps { + position: relative; +} + +.Mt-\$headerH { + margin-top: var(--ml-headerH); +} + +.H50u { + height: 12.5rem; +} + +.Ov-h { + overflow: hidden; +} + +.Mb20u { + margin-bottom: 5rem; +} + +.P0\;1 { + padding: 0px 1px; +} + +.Zi2 { + z-index: 2; +} + +.T0 { + top: 0px; +} + +.L0 { + left: 0px; +} + +.Gap5u { + gap: 1.25rem; +} + +.Bgc-\$secondary200_h:hover { + background-color: var(--ml-secondary200); +} + +.Bgc-\$secondary400 { + background-color: var(--ml-secondary400); +} + +.Bgc-\$secondary300_h:hover { + background-color: var(--ml-secondary300); +} + +.P2u { + padding: 0.5rem; +} + +.O0 { + opacity: 0; +} + +.-Ctx-wallpaper:hover .\^wallpaper\:h\:_O1 { + opacity: 1; +} + +.Zi10 { + z-index: 10; +} + +.H30u { + height: 7.5rem; +} + +.D-ib { + display: inline-block; +} + +.Bd2\;s\;black { + border: 2px solid black; +} + +.T38u { + top: 9.5rem; +} + +.L5u { + left: 1.25rem; +} + +.Mxw100p { + max-width: 100%; +} + +.Bgc-\$secondary200 { + background-color: var(--ml-secondary200); +} + +.O1_h:hover { + opacity: 1; +} + +.-Ts_\:input\,\:textarea input, .-Ts_\:input\,\:textarea textarea { + transition-duration: 0.3s; + transition-property: background-color, border-color, color, fill, stroke, backdrop-filter, box-shadow, filter, opacity, transform; +} + +.C-\$accent500_\:input\,\:textarea input, .C-\$accent500_\:input\,\:textarea textarea { + color: var(--ml-accent500); +} + +.Mb5u { + margin-bottom: 1.25rem; +} + +.P0\;5u { + padding: 0px 1.25rem; +} + +.Bd1\;s\;\$accent600 { + border: 1px solid var(--ml-accent600); +} + +.Bdc-\$accent200_fw:focus-within { + border-color: var(--ml-accent200); +} + +.C-\$accent600 { + color: var(--ml-accent600); +} + +.Bdrd2u { + border-radius: 0.5rem; +} + +.Ct-\'\;\'\;\'\*\'_af::after { + content: ' ' '*'; +} + +.C-\$accent300_fw\:af:focus-within::after { + color: var(--ml-accent300); +} + +.Ps-a_af::after { + position: absolute; +} + +.T2u_af::after { + top: 0.5rem; +} + +.R2u_af::after { + right: 0.5rem; +} + +.Bdc-\$accent400_\!fw\:h:not(:focus-within):hover { + border-color: var(--ml-accent400); +} + +.Mb1u { + margin-bottom: 0.25rem; +} + +.-Ctx:focus-within .\^\:fw\:_C-\$accent200 { + color: var(--ml-accent200); +} + +.Ol-n_f:focus { + outline: none; +} + +.-Ctx:focus-within .\^\:fw\:_C-\$accent900 { + color: var(--ml-accent900); +} + +.Rs-n { + resize: none; +} \ No newline at end of file diff --git a/states/0/img/json.jpg b/states/0/img/json.jpg new file mode 100644 index 0000000..7989787 Binary files /dev/null and b/states/0/img/json.jpg differ diff --git a/states/0/img/sprite.svg b/states/0/img/sprite.svg new file mode 100644 index 0000000..49884ee --- /dev/null +++ b/states/0/img/sprite.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/states/0/img/wallpaper.jpg b/states/0/img/wallpaper.jpg new file mode 100644 index 0000000..3258efd Binary files /dev/null and b/states/0/img/wallpaper.jpg differ diff --git a/states/0/index.html b/states/0/index.html new file mode 100644 index 0000000..e5e7d5a --- /dev/null +++ b/states/0/index.html @@ -0,0 +1,124 @@ + + + + + + + Document + + + +
+ +
+ + +
+
+ + +
+ +
+ + +
+ Edit profile +
+ +
+ + +
+
+
+ + + +
+ + +
+ + wallpaper +
+ + + + + + + +
+
+ +
+ + profile-photo + +
+ + +
+
+ + +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+
+ +
+
+
+ + \ No newline at end of file diff --git a/states/0/style.css b/states/0/style.css new file mode 100644 index 0000000..50c3c69 --- /dev/null +++ b/states/0/style.css @@ -0,0 +1,274 @@ +/* +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); +} + +.-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; +} + +.Mxw600 { + max-width: 600px; +} + +.W90p { + width: 90%; +} + +.H160u { + height: 40rem; +} + +.Mxh90vh { + max-height: 90vh; +} + +.Bgc-black { + background-color: black; +} + +.T5p { + top: 5%; +} + +.P0\;0\;5u { + padding: 0px 0px 1.25rem; +} + +.H-\$headerHMxw600 { + height: var(--ml-headerHMxw600); +} + +.Ai-str { + align-items: stretch; +} + +.Jc-fs { + justify-content: flex-start; +} + +.-Sz100p { + width: 100%; + height: 100%; +} + +.W10p { + width: 10%; +} + +.H100p { + height: 100%; +} + +.Bd-n { + border: none; +} + +.Bgc-tp { + background-color: transparent; +} + +.Apcr1 { + aspect-ratio: 1; +} + +.D { + display: block; +} + +.-Sz26 { + width: 26px; + height: 26px; +} + +.Us-n { + user-select: none; +} + +.Va-b { + vertical-align: bottom; +} + +.P0\.5u\;0 { + padding: 0.125rem 0px; +} + +.Ml-a { + margin-left: auto; +} + +.C-\$accent850 { + color: var(--ml-accent850); +} + +.Lnh100p { + line-height: 100%; +} + +.P0 { + padding: 0px; +} + +.Ps { + position: relative; +} + +.Mt-\$headerH { + margin-top: var(--ml-headerH); +} + +.H50u { + height: 12.5rem; +} + +.Ov-h { + overflow: hidden; +} + +.P0\;1 { + padding: 0px 1px; +} + +.Zi2 { + z-index: 2; +} + +.T0 { + top: 0px; +} + +.L0 { + left: 0px; +} + +.Bgc-\$secondary400 { + background-color: var(--ml-secondary400); +} + +.Bdrd100p { + border-radius: 100%; +} + +.P2u { + padding: 0.5rem; +} + +.H30u { + height: 7.5rem; +} + +.Mxw100p { + max-width: 100%; +} + +.Bgc-\$secondary200 { + background-color: var(--ml-secondary200); +} + +.-Ts { + transition-duration: 0.3s; + transition-property: background-color, border-color, color, fill, stroke, backdrop-filter, box-shadow, filter, opacity, transform; +} + +.Bd1\;s\;\$accent600 { + border: 1px solid var(--ml-accent600); +} + +.Mb1u { + margin-bottom: 0.25rem; +} + +.-Ctx:focus-within .\^\:fw\:_C-\$accent200 { + color: var(--ml-accent200); +} \ No newline at end of file diff --git a/style.scss b/style.scss index 27c99e5..912dea7 100644 --- a/style.scss +++ b/style.scss @@ -1,3 +1,37 @@ @use '@mlut/core/tools'; @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