From 71bfabb32f190efe9c31e7268bc1782e4c2e9e57 Mon Sep 17 00:00:00 2001 From: sxpphickat Date: Tue, 28 Nov 2023 21:02:43 -0300 Subject: [PATCH 1/7] =?UTF-8?q?feat(front):=20=E2=9C=A8=20index.html=20bas?= =?UTF-8?q?e?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 79 +++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 75 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index c07670f..250afdf 100644 --- a/index.html +++ b/index.html @@ -5,14 +5,85 @@ - + - + - -

Hello, world

+
+ +
+

Lored's Markdown

+
+ + + + + +
+ + +
+ +
+ + +
+ +
+ + +
+ + + +
+ +
+ +
+
+
+ +
+
+
+ +
+
+
+
+ +
+ + +
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+ +
+
+
+
From 14a32d750cc5113ddcf4df22fcb17f8fccdc0605 Mon Sep 17 00:00:00 2001 From: sxpphickat Date: Tue, 28 Nov 2023 21:04:21 -0300 Subject: [PATCH 2/7] =?UTF-8?q?feat(front):=20=E2=9C=A8=20style.css=20base?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/css/style.css | 145 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 145 insertions(+) create mode 100644 src/css/style.css diff --git a/src/css/style.css b/src/css/style.css new file mode 100644 index 0000000..3dfe301 --- /dev/null +++ b/src/css/style.css @@ -0,0 +1,145 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); + + +:root { + --banner-color: #b1b1b1; + --banner-bgc: #000; + --options-bgc: #111; +} + +html, body { + font-family: 'Roboto', sans-serif; + height: 100%; + margin: 0; + padding: 0; +} + +body { + min-height: 100%; +} + + +.container { + background-color: var(--banner-bgc); + display: grid; + height: 100%; + grid-template-columns: 50% 50%; +} + +.banner { + background-color: var(--banner-color); + height: 100px; + width: 300px; + align-self: center; + justify-self: center; + border-radius: 20px; +} + +.options { + background-color: var(--options-bgc); + color: white; + padding: 70px; +} + +input::placeholder { + color: #1e1e1e; +} + +label { + color: #3c3c3c; + font-size: 1.5rem; +} + +.txt-input { + background: #3c3c3c; + border-style: none; + height: 3rem; + color: black; + border-radius: 50px; + width: 300px; + + padding-left: 20px; + padding-right: 20px; + font-size: 1.5rem; + color: #fff; + font-weight: 900; +} + +input { + margin-right: 70px; +} + +.options-grid-container { + display: grid; + grid-template-columns: 50% 50%; + align-items: center; + row-gap: 30px; +} + +#layout { + color: #1e1e1e; +} + + +option { + border-radius: 10px; +} + +input[type="radio"], input[type="checkbox"] { + -webkit-appearance: none; + appearance: none; + margin: 0; + background-color: #3c3c3c; + font: inherit; + color: currentColor; + width:2rem; + height: 2rem; + border-radius: 50%; + +} + +input[type="radio"]:checked, input[type="checkbox"]:checked { + background-color: #fff; +} + + + +label { + align-self: center; +} + +.center-txt-vertically { + display: flex; + align-items: center; + gap: 10px; +} + +.list-of-items { + display: grid; + align-items: start; + justify-content: start; + gap: 10px; +} + +.span-2 { + grid-column: 1 / -1; +} + +.style-layout { + display: grid; + gap: 15px; +} + +.style-layout > input[type="color"] { + margin: 0; + background: none; + border: none; + justify-self: start; + height: 3rem; + width: 300px; + border-radius: 50px; +} + +.container > div { + row-gap: 100 px; +} \ No newline at end of file From 0ad8ba8ef849dd1d8a49cabd922e25fab6d92a0c Mon Sep 17 00:00:00 2001 From: sxpphickat Date: Fri, 1 Dec 2023 10:35:17 -0300 Subject: [PATCH 3/7] =?UTF-8?q?refactor(front):=20=E2=99=BB=EF=B8=8F=20cha?= =?UTF-8?q?nge=20main=20design?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/css/style.css | 67 +++++++++++++++++++++++++++++++++++++---------- 1 file changed, 53 insertions(+), 14 deletions(-) diff --git a/src/css/style.css b/src/css/style.css index 3dfe301..25b9346 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -4,7 +4,7 @@ :root { --banner-color: #b1b1b1; --banner-bgc: #000; - --options-bgc: #111; + --options-bgc: #0a0a0a; } html, body { @@ -32,7 +32,8 @@ body { width: 300px; align-self: center; justify-self: center; - border-radius: 20px; + border-radius: 20px; + box-shadow: 0px 10px 20px 10px rgb(58, 58, 58); } .options { @@ -42,27 +43,47 @@ body { } input::placeholder { - color: #1e1e1e; + color:#404040; + text-shadow: none; + } + + label { color: #3c3c3c; font-size: 1.5rem; } -.txt-input { - background: #3c3c3c; - border-style: none; +h1 { + font-size: 2.5rem; +} + +h1, input { + text-shadow: 0 0 5px #fff; +} + + +.txt-input, select { + background: #0a0a0a; + border: solid 1px #404040; height: 3rem; color: black; - border-radius: 50px; + border-radius: 6px; width: 300px; padding-left: 20px; padding-right: 20px; font-size: 1.5rem; color: #fff; - font-weight: 900; + font-weight: 400; + transition: all .2s ease-in-out; +} + +input:focus, select:focus { + outline: none !important; + border: solid 1px #a3a3a3 ; + box-shadow: 0px 0px 0px 4px #3f3f46; } input { @@ -77,7 +98,7 @@ input { } #layout { - color: #1e1e1e; + color: #404040; } @@ -98,11 +119,21 @@ input[type="radio"], input[type="checkbox"] { } -input[type="radio"]:checked, input[type="checkbox"]:checked { - background-color: #fff; +input[type="radio"]:focus, input[type="checkbox"]:focus { + border-style: none; + box-shadow: none; } +input[type="radio"]:checked, input[type="checkbox"]:checked { + background-color: #fff; + transition: all .5s ease-out; + box-shadow: 0 0 10px 5px rgb(100, 100, 100); +} +input[type="radio"]:not(:checked), input[type="checkbox"]:not(:checked) { + transition: all .5s ease-out; + box-shadow: none; +} label { align-self: center; @@ -133,13 +164,21 @@ label { .style-layout > input[type="color"] { margin: 0; background: none; - border: none; justify-self: start; height: 3rem; width: 300px; - border-radius: 50px; + border-radius: 6px; + border: solid 1px #404040; + } +.style-layout > input[type="color"]:focus { + outline: none !important; + border: solid 1px #a3a3a3 ; + box-shadow: 0px 0px 0px 4px #3f3f46; +} + + .container > div { row-gap: 100 px; -} \ No newline at end of file +} From 157cc4bb7da53d9fbae256eb8f2c8e543c8a8176 Mon Sep 17 00:00:00 2001 From: sxpphickat Date: Fri, 1 Dec 2023 12:42:25 -0300 Subject: [PATCH 4/7] =?UTF-8?q?feat(front):=20=E2=9C=A8=20responsive=20des?= =?UTF-8?q?ign?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/css/style.css | 30 +++++++++++++++++++----------- 1 file changed, 19 insertions(+), 11 deletions(-) diff --git a/src/css/style.css b/src/css/style.css index 25b9346..06efe3e 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1,6 +1,5 @@ @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); - :root { --banner-color: #b1b1b1; --banner-bgc: #000; @@ -23,7 +22,20 @@ body { background-color: var(--banner-bgc); display: grid; height: 100%; - grid-template-columns: 50% 50%; + grid-template-columns: repeat(2, 50%); +} + +@media only screen and (max-width: 800px) { + .container { + grid-template-columns: 100%; + } + .options-grid-container { + justify-items: center; + } + .options { + display: grid; + justify-content: center; + } } .banner { @@ -34,12 +46,14 @@ body { justify-self: center; border-radius: 20px; box-shadow: 0px 10px 20px 10px rgb(58, 58, 58); + margin: 40px; } .options { background-color: var(--options-bgc); color: white; padding: 70px; + overflow: auto; } input::placeholder { @@ -48,8 +62,6 @@ input::placeholder { } - - label { color: #3c3c3c; font-size: 1.5rem; @@ -63,7 +75,6 @@ h1, input { text-shadow: 0 0 5px #fff; } - .txt-input, select { background: #0a0a0a; border: solid 1px #404040; @@ -86,14 +97,11 @@ input:focus, select:focus { box-shadow: 0px 0px 0px 4px #3f3f46; } -input { - margin-right: 70px; -} - .options-grid-container { display: grid; - grid-template-columns: 50% 50%; - align-items: center; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); +/* grid-template-columns: 50% 50%; + */ align-items: center; row-gap: 30px; } From edd8c7edd1420c1da575193779df2b9211246fa7 Mon Sep 17 00:00:00 2001 From: sxpphickat Date: Fri, 1 Dec 2023 14:20:15 -0300 Subject: [PATCH 5/7] =?UTF-8?q?fix(front):=20=F0=9F=90=9B=20layout=20and?= =?UTF-8?q?=20background=20input=20sizes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/css/style.css | 38 ++++++++++++++++++++------------------ 1 file changed, 20 insertions(+), 18 deletions(-) diff --git a/src/css/style.css b/src/css/style.css index 06efe3e..959769d 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -25,18 +25,6 @@ body { grid-template-columns: repeat(2, 50%); } -@media only screen and (max-width: 800px) { - .container { - grid-template-columns: 100%; - } - .options-grid-container { - justify-items: center; - } - .options { - display: grid; - justify-content: center; - } -} .banner { background-color: var(--banner-color); @@ -81,10 +69,10 @@ h1, input { height: 3rem; color: black; border-radius: 6px; - width: 300px; + width: 18rem; - padding-left: 20px; - padding-right: 20px; + padding-left: 1rem; + padding-right: 1rem; font-size: 1.5rem; color: #fff; font-weight: 400; @@ -100,13 +88,13 @@ input:focus, select:focus { .options-grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); -/* grid-template-columns: 50% 50%; - */ align-items: center; + align-items: center; row-gap: 30px; } #layout { color: #404040; + width: calc(20rem + 2px); } @@ -174,7 +162,7 @@ label { background: none; justify-self: start; height: 3rem; - width: 300px; + width: calc(20rem + 2px); border-radius: 6px; border: solid 1px #404040; @@ -190,3 +178,17 @@ label { .container > div { row-gap: 100 px; } + +@media only screen and (max-width: 800px) { + .container { + grid-template-columns: 100%; + } + .options-grid-container { + justify-items: center; + } + .options { + display: grid; + justify-content: center; + overflow-x: hidden; + } +} From 9d17f06732f32a227fac01691c65901c87a5346d Mon Sep 17 00:00:00 2001 From: sxpphickat Date: Wed, 6 Dec 2023 09:35:07 -0300 Subject: [PATCH 6/7] =?UTF-8?q?fix(front):=20=F0=9F=90=9B=20aligning=20ite?= =?UTF-8?q?ms=20better?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 123 ++++++++++++++++++++++------------------------ src/css/style.css | 71 +++++++++++++------------- 2 files changed, 94 insertions(+), 100 deletions(-) diff --git a/index.html b/index.html index 250afdf..e6acabf 100644 --- a/index.html +++ b/index.html @@ -15,73 +15,70 @@ -
-

Lored's Markdown

-
- - - - - -
- - -
- -
- - -
- -
- - -
- - - -
- -
- -
+
+
+

Lored's Markdown

+ + + + + + +
+ + +
+ + +
-
- -
+
+ +
-
- -
+ + +
+ +
+ +
+
+
+ +
+
+
+ +
+
+
-
-
- -
- - -
- -
+
+ +
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
-
- -
-
-
- -
-
-
- -
-
- -
- + +
diff --git a/src/css/style.css b/src/css/style.css index 959769d..601bcd7 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -4,6 +4,9 @@ --banner-color: #b1b1b1; --banner-bgc: #000; --options-bgc: #0a0a0a; + --border-color: #404040; + --dark-txt-color: #404040; + --light-txt-color: #ffffff; } html, body { @@ -38,20 +41,19 @@ body { } .options { - background-color: var(--options-bgc); + /* background-color: var(--options-bgc); */ color: white; padding: 70px; - overflow: auto; -} +/* overflow: auto; + */} input::placeholder { - color:#404040; + color: var(--dark-txt-color); text-shadow: none; - } label { - color: #3c3c3c; + color: var(--dark-txt-color); font-size: 1.5rem; } @@ -63,23 +65,23 @@ h1, input { text-shadow: 0 0 5px #fff; } -.txt-input, select { - background: #0a0a0a; - border: solid 1px #404040; +.txt-input, select, .style-layout > input[type="color"] { + background: var(--options-bgc); + border: solid 1px var(--border-color); height: 3rem; - color: black; border-radius: 6px; - width: 18rem; + width: 20rem; padding-left: 1rem; padding-right: 1rem; font-size: 1.5rem; - color: #fff; + color: var(--light-txt-color); font-weight: 400; transition: all .2s ease-in-out; + box-sizing: border-box; } -input:focus, select:focus { +input:focus, select:focus, .style-layout > input[type="color"]:focus { outline: none !important; border: solid 1px #a3a3a3 ; box-shadow: 0px 0px 0px 4px #3f3f46; @@ -88,13 +90,12 @@ input:focus, select:focus { .options-grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); - align-items: center; + align-items: start; row-gap: 30px; } #layout { - color: #404040; - width: calc(20rem + 2px); + color: var(--dark-txt-color); } @@ -115,6 +116,8 @@ input[type="radio"], input[type="checkbox"] { } +/*checkbox*/ + input[type="radio"]:focus, input[type="checkbox"]:focus { border-style: none; box-shadow: none; @@ -148,35 +151,21 @@ label { gap: 10px; } -.span-2 { +.span-all { grid-column: 1 / -1; } +#bg-img-link { + align-self: center; +} + .style-layout { display: grid; gap: 15px; } -.style-layout > input[type="color"] { - margin: 0; - background: none; - justify-self: start; - height: 3rem; - width: calc(20rem + 2px); - border-radius: 6px; - border: solid 1px #404040; - -} - -.style-layout > input[type="color"]:focus { - outline: none !important; - border: solid 1px #a3a3a3 ; - box-shadow: 0px 0px 0px 4px #3f3f46; -} - - -.container > div { - row-gap: 100 px; + .style-layout > input[type="color"] { + padding: 0; } @media only screen and (max-width: 800px) { @@ -192,3 +181,11 @@ label { overflow-x: hidden; } } + +.centralize-verticaly { + display: grid; + align-content: center; + background-color: var(--options-bgc); + overflow: auto; + overflow-x: hidden; +} \ No newline at end of file From 31bca044eae556dbac46a7070cfeed3faeb82185 Mon Sep 17 00:00:00 2001 From: sxpphickat Date: Thu, 7 Dec 2023 18:33:04 -0300 Subject: [PATCH 7/7] =?UTF-8?q?fix(front):=20=F0=9F=90=9B=20wrapping=20rep?= =?UTF-8?q?o=20infos?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 34 ++++++++++++++++++---------------- src/css/style.css | 31 +++++++++++++++++-------------- 2 files changed, 35 insertions(+), 30 deletions(-) diff --git a/index.html b/index.html index e6acabf..c12a7c4 100644 --- a/index.html +++ b/index.html @@ -40,22 +40,25 @@
- -
- -
- -
+
+ + +
+ +
+ +
+
+
+ +
+
+
+ +
+
+
-
- -
-
-
- -
-
-
@@ -75,7 +78,6 @@
-
diff --git a/src/css/style.css b/src/css/style.css index 601bcd7..b7102e6 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -44,8 +44,9 @@ body { /* background-color: var(--options-bgc); */ color: white; padding: 70px; -/* overflow: auto; - */} + overflow: auto; + overflow-x: hidden; +} input::placeholder { color: var(--dark-txt-color); @@ -55,6 +56,7 @@ input::placeholder { label { color: var(--dark-txt-color); font-size: 1.5rem; + align-self: center; } h1 { @@ -98,11 +100,6 @@ input:focus, select:focus, .style-layout > input[type="color"]:focus { color: var(--dark-txt-color); } - -option { - border-radius: 10px; -} - input[type="radio"], input[type="checkbox"] { -webkit-appearance: none; appearance: none; @@ -116,8 +113,6 @@ input[type="radio"], input[type="checkbox"] { } -/*checkbox*/ - input[type="radio"]:focus, input[type="checkbox"]:focus { border-style: none; box-shadow: none; @@ -134,10 +129,6 @@ input[type="radio"]:not(:checked), input[type="checkbox"]:not(:checked) { box-shadow: none; } -label { - align-self: center; -} - .center-txt-vertically { display: flex; align-items: center; @@ -159,7 +150,7 @@ label { align-self: center; } -.style-layout { +.style-layout, .repo-wrapper { display: grid; gap: 15px; } @@ -188,4 +179,16 @@ label { background-color: var(--options-bgc); overflow: auto; overflow-x: hidden; +} + +.repo-wrapper { + border: solid 1px var(--dark-txt-color); + border-radius: 6px; + padding: 1rem; + width: 20rem; + box-sizing: border-box; +} + +.repo-wrapper > input { + width: 100%; } \ No newline at end of file