diff --git a/src/App.module.css b/src/App.module.css index a759ea3..4773fed 100644 --- a/src/App.module.css +++ b/src/App.module.css @@ -2,13 +2,25 @@ background-color: var(--clr-primary-light); color: var(--clr-primary-dark); text-align: center; - min-height: 100dvh; + height: 100dvh; } .Main { padding-top: 80px; } +.FillerImage { + object-fit: cover; + height: 100%; + width: 100%; +} + +/* .Image { + height: 40vh; + max-width: 100%; + object-fit: contain; +} */ + a { color: var(--clr-accent-light); transition: color ease-in-out 0.3s; @@ -24,4 +36,33 @@ a:hover { a:hover i { color: var(--clr-accent-dark); transition: color ease-in-out 0.3s; -} \ No newline at end of file +} + +input[type="file"] { + display: none; +} + +i:hover { + cursor: pointer; + transition: color ease-in-out 0.3s; + color: var(--clr-accent-dark); +} + +figure { + text-align: center; + display: inline-block; +} + +/* scrollbar */ +*::-webkit-scrollbar { + width: 5px; +} +*::-webkit-scrollbar-track { + background: var(--clr-primary-light); +} +*::-webkit-scrollbar-thumb { + background: var(--clr-accent-light); +} +*::-webkit-scrollbar-thumb:hover { + background: var(--clr-accent-dark); +} diff --git a/src/index.css b/src/index.css index 4d2f4c7..a113d8c 100644 --- a/src/index.css +++ b/src/index.css @@ -5,7 +5,7 @@ --clr-natural-light: rgb(255, 250, 243); - --clr-accent-pink: rgb(160 108 131); + --clr-accent-pink: rgb(196, 104, 145); --clr-accent-light: rgb(149, 164, 170); --clr-accent-dark: rgb(72 102 113); } diff --git a/src/styles/Button.module.css b/src/styles/Button.module.css new file mode 100644 index 0000000..86e5e2c --- /dev/null +++ b/src/styles/Button.module.css @@ -0,0 +1,69 @@ +.Button { + font-size: 0.8rem; + align-self: center; + border-radius: 100px; + border-color: transparent; + padding: 4px 10px; + margin-left: 2px; + margin-right: 2px; + min-width: 75px; + } + + .Button:hover { + opacity: 0.8; + border-color: transparent; + cursor: pointer; + } + + .Button:hover:active { + background-color: var(--clr-accent-dark) !important; + } + + .Button:active { + background-color: var(--clr-accent-dark) !important; + } + + .Button:focus { + background-color: var(--clr-accent-dark); + } + + .Wide { + padding: 10px 50px; + width: 100%; + } + + .Blue, + .BlueOutline:hover, + .Bright:hover { + background-color: var(--clr-accent-dark); + color: #ffffff; + } + + .BlueOutline, + .Blue:hover { + /* border: 1px solid #2142b2; */ + background-color: #ffffff; + color: var(--clr-accent-dark); + } + + .Black, + .BlackOutline:hover { + /* background-color: #242a3d; + color: white; */ + background-color: #242a3d; + color: aliceblue; + } + + .Black:hover, + .BlackOutline { + /* background-color: #dadadf; + color: #242a3d; + border-color: #242a3d; */ + background-color: aliceblue; + color: #242a3d; + } + + .Bright { + background-color: var(--clr-accent-dark); + color: var(--clr-primary-light); + } \ No newline at end of file diff --git a/src/styles/SignInUpForm.module.css b/src/styles/SignInUpForm.module.css new file mode 100644 index 0000000..683ee10 --- /dev/null +++ b/src/styles/SignInUpForm.module.css @@ -0,0 +1,48 @@ +.Row { + height: calc(100vh - 81px); + } + .Input { + background: var(--clr-primary-light); + border: 1px solid var(--clr-accent-light); + box-sizing: border-box; + border-radius: 50px; + color: var(--clr-accent-dark); + text-align: center; + padding: 8px; + } + + .Header { + font-style: normal; + font-weight: bold; + font-size: 24px; + line-height: 19px; + text-align: center; + letter-spacing: 0.2em; + text-transform: uppercase; + color: var(--clr-accent-dark); + margin-bottom: 30px; + } + + .Link { + text-decoration: none; + text-align: center; + display: block; + margin: auto; + } + + .Link span { + color: var(--clr-accent-pink); + font-weight: 500; + } + + .Container { + padding: 30px 10px; + } + + /* .SignInCol { + height: 320px; + } + + .SignUpCol { + height: 375px; + } */ \ No newline at end of file