diff options
Diffstat (limited to 'styles.css')
-rw-r--r-- | styles.css | 46 |
1 files changed, 30 insertions, 16 deletions
@@ -5,7 +5,7 @@ vars and color /* define the color pallet */ /*--primary-color: #D1F7FF;*/ --primary-color: rgb(220, 251, 254); - --secondary-color: #fcd6c2; + --secondary-color: #FAEAC0; --accent-color: #DA627D; --second-accent-color: #222E50; } @@ -27,11 +27,6 @@ body { /*color: rgb(212, 212, 212);*/ } -header { - position: relative; - overflow: hidden; -} - p { line-height: 1.2; } @@ -58,7 +53,7 @@ section format + colors */ section, header { - padding: 1.5rem 2rem 4rem 2rem; + padding: 4rem 2rem 4rem 2rem; } section:nth-child(even) { @@ -72,7 +67,7 @@ section:nth-child(odd) { .title, .title-info-flex, .edges{ text-align: left; - padding: 0 15% 1rem 15%; + padding: 0 15% 10px 15%; } .title { @@ -80,6 +75,7 @@ section:nth-child(odd) { } + h2 { text-align: center; font-size: 2rem; @@ -97,6 +93,9 @@ header color will be that blue header { background-color: var(--primary-color); + position: relative; + overflow: hidden; + padding-top: 2rem; } @@ -113,11 +112,18 @@ nav { display: flex; justify-content: space-between; align-items: center; - padding-right: 20px; + padding: 0 5vw; } -.nav-flex > a { +.nav-flex > .flex-row > a { margin-bottom: 30px; + display: block; + margin-left: 5vw; +} + +.nav-flex > .flex-row { + justify-content: space-between; + width: fit-content; } .logo-img { @@ -261,10 +267,11 @@ title area (animated text and connie's 3d model) } .video-title-wrapper { + position: relative; z-index: 1; width: clamp(25rem, 35vw, 500px); margin-bottom: 1rem; - padding-left: 50px; + left: -15px; } #video-title { @@ -305,7 +312,7 @@ h1 { .course-name { font-size: 2rem; line-height: 1; - margin: .25rem 0 1rem 0; + margin: 10px 0 1rem 0; z-index: 5; } @@ -393,7 +400,7 @@ course info section line-height: 25px; text-decoration: none; - border: 2px blue solid; + border: 3px solid #0000ff66; background-color: white; width: fit-content; @@ -412,7 +419,7 @@ full menu & ta_calendar .important-note > p { padding-left: 10px; - margin: .5rem 0 1rem 0; + margin: 0 0 1rem 0; } .embedded-iframe { @@ -473,6 +480,7 @@ convenience for helpful links align-items: start; justify-content: space-evenly; margin: 1rem auto 0 auto; + padding: 0 5%; } .helpful-link { @@ -483,10 +491,11 @@ convenience for helpful links align-items: center; justify-content: center; width: 150px; - padding: 5px 15px; + padding: 10px 20px; border-radius: 5px; border: 3px solid #0000ff66; margin: 10px 0; + background-color: white; } .helpful-link h3 { @@ -495,7 +504,8 @@ convenience for helpful links } .helpful-link:hover h3 { - color: #706881; + /*color: #706881;*/ + /*font-size: 107%;*/ } .helpful-link:hover { @@ -707,6 +717,10 @@ img { .embedded-iframe { width: 90vw; } + + .wrap-container { + justify-content: center; + } } |