diff --git a/styles.css b/styles.css index 8768a29bc7add859158c40bfecc4da26a834754a..9c82ed1f446f1ddc06bd32a1e5e82183285e4d87 100644 --- a/styles.css +++ b/styles.css @@ -95,7 +95,7 @@ section { /* Creates border present between all sections */ - border-bottom: var(--main-dark) 0.25rem solid; + border-bottom: var(--main-dark) .25rem solid; } footer { @@ -111,11 +111,13 @@ } h1, h2, h3, h4, h5, h6 { + margin-bottom: .5em; + font-family: "Poppins", sans-serif; } h2 { - font-size: clamp(3rem, 2.8194rem + 0.8027vw, 3.3331rem); + font-size: clamp(1.75rem, 0.8917rem + 3.8147vw, 3.3331rem); } p { @@ -144,7 +146,7 @@ /* Creates border present around majority of images */ border: var(--main-dark) solid; - border-width: 0.3rem 0.45rem 0.45rem 0.3rem; + border-width: .3rem .45rem .45rem .3rem; object-fit: cover; } @@ -165,7 +167,7 @@ height: 1em; width: 1em; - margin-right: 0.5em; + margin-right: .5em; background-color: #fff; @@ -226,10 +228,10 @@ display: inline-block; - margin-left: 0.5em; + margin-left: .5em; - height: 0.5em; - width: 0.5em; + height: .5em; + width: .5em; transform: translateY(-50%); } @@ -274,13 +276,13 @@ /** Main Site Buttons **/ .btn--primary { - box-shadow: 0.25rem 0.25rem 0 white; + box-shadow: .25rem .25rem 0 white; background-color: var(--accent-pink); font-family: "Poppins", sans-serif; - transition: all 0.25s; + transition: all .25s; text-transform: uppercase; } @@ -297,8 +299,8 @@ content: ""; position: absolute; - transition: all 0.025s; - transform: scale(0.85); + transition: all .025s; + transform: scale(.85); } .btn--primary:active::after { @@ -306,8 +308,8 @@ width: 110%; max-width: 15rem; min-width: 9rem; - border: 0.25rem solid var(--accent-pink-lighter); - border-radius: 0.2rem; + border: .25rem solid var(--accent-pink-lighter); + border-radius: .2rem; transform: scale(1); } @@ -315,7 +317,7 @@ /* Modifiers for blue button */ .btn--primary.blue { background-color: var(--accent-blue); - box-shadow: 0.25rem 0.25rem 0 var(--main-dark); + box-shadow: .25rem .25rem 0 var(--main-dark); color: var(--main-dark); } @@ -329,7 +331,7 @@ } .btn--primary.blue:active::after { - border: 0.25rem solid var(--accent-blue-lighter); + border: .25rem solid var(--accent-blue-lighter); } /** Twitter Button **/ @@ -456,7 +458,7 @@ background-color: white; - box-shadow: 3px 5px 19px 0px rgba(0, 0, 0, 0.41); + box-shadow: 3px 5px 19px 0px rgba(0, 0, 0, .41); } /*** Homepage Styles ***/ @@ -484,12 +486,13 @@ margin: 0; } - #home .hero article > img { - max-width: 25rem; - width: 100%; + /* Control size of logo on homepage */ + #home .hero article > img { + max-width: 25rem; + width: 100%; - margin: 0 auto; - } + margin: 0 auto; + } #home .hero article div:last-of-type { flex-wrap: wrap; @@ -510,6 +513,27 @@ object-fit: initial; } + /** About Section **/ + #home__about { + background-color: var(--section-blue); + + color: white; + } + + .grid-2x2 { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, min-content); + grid-gap: 1em; + } + + .grid-2x2 img { + width: 100%; + /* This trick makes the image height correspond to the text height instead of vice versa */ + height: 0; + min-height: 100%; + } + /* 64em == 1024px */ @media only screen and (min-width: 64em) { @@ -522,6 +546,10 @@ /* 37.5625em == 601px */ @media only screen and (max-width: 37.5625em) { + /*** Global Styles -- Tablet ***/ + h2 { + text-align: center; + } /*** Reusable Styles -- Tablet ***/ /** Hero **/ /* USAGE: index.html && about.html */ @@ -585,6 +613,22 @@ padding-bottom: 0; } + + /** About Section **/ + .grid-2x2 { + grid-template-columns: 1fr; + grid-template-rows: repeat(3, auto); + grid-gap: 0; + } + + .grid-2x2 img:first-of-type { + order: 3; + height: 100%; + } + + .grid-2x2 img:last-of-type { + display: none; + } } /* 22.5em == 360px */