diff --git a/media/pgus/css/navigation.css b/media/pgus/css/navigation.css new file mode 100644 index 0000000..f7307f2 --- /dev/null +++ b/media/pgus/css/navigation.css @@ -0,0 +1,584 @@ +/* CodeStitch Global Styles. Right now, just used by navigation */ + +:root { + /* 13px - 16px */ + --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem); + /* 31px - 49px */ + --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem); + --bodyFontSize: 1rem; + /* 60px - 100px top and bottom */ + --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem; +} + +.cs-topper { + font-size: var(--topperFontSize); + line-height: 1.2em; + text-transform: uppercase; + text-align: inherit; + letter-spacing: 0.1em; + font-weight: 700; + color: var(--primary); + margin-bottom: 0.25rem; + display: block; +} + +.cs-title { + font-size: var(--headerFontSize); + font-weight: 900; + line-height: 1.2em; + text-align: inherit; + max-width: 43.75rem; + margin: 0 0 1rem 0; + color: var(--headerColor); + position: relative; +} + +.cs-text { + font-size: var(--bodyFontSize); + line-height: 1.5em; + text-align: inherit; + width: 100%; + max-width: 40.625rem; + margin: 0; + color: var(--bodyTextColor); +} + +#cs-navigation { + & a { + font-weight: 400; + } +} + +/*-- -------------------------- --> +<--- Mobile Navigation --> +<--- -------------------------- -*/ +/* Mobile - 1023px */ +@media only screen and (max-width: 63.9375rem) { + body.cs-open { + overflow: hidden; + } + #cs-navigation { + width: 100%; + /* prevents padding and border from affecting height and width */ + box-sizing: border-box; + padding: 0.75rem 1rem; + background-color: #fff; + box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; + position: fixed; + z-index: 10000; + } + #cs-navigation:before { + content: ""; + width: 100%; + height: 0vh; + background: rgba(0, 0, 0, 0.6); + opacity: 0; + display: block; + position: absolute; + top: 100%; + right: 0; + z-index: -1100; + transition: height 0.5s, opacity 0.5s; + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); + } + #cs-navigation.cs-active:before { + height: 150vh; + opacity: 1; + } + #cs-navigation.cs-active .cs-ul-wrapper { + opacity: 1; + transform: scaleY(1); + transition-delay: 0.15s; + } + #cs-navigation.cs-active .cs-li { + opacity: 1; + transform: translateY(0); + } + #cs-navigation .cs-container { + width: 100%; + display: flex; + justify-content: flex-end; + align-items: center; + } + #cs-navigation .cs-logo { + width: 40%; + max-width: 9.125rem; + height: 100%; + margin: 0 auto 0 0; + /* prevents padding and border from affecting height and width */ + box-sizing: border-box; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + z-index: 10; + } + #cs-navigation .cs-logo img { + width: 100%; + height: 100%; + /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */ + object-fit: contain; + } + #cs-navigation .cs-toggle { + /* 44px - 48px */ + /* width: clamp(2.75rem, 6vw, 3rem); + height: clamp(2.75rem, 6vw, 3rem); */ + margin: 0 0 0 auto; + background-color: transparent; + border: none; + border-radius: 0.25rem; + display: flex; + justify-content: center; + align-items: center; + } + #cs-navigation .cs-active .cs-line1 { + top: 50%; + transform: translate(-50%, -50%) rotate(225deg); + } + #cs-navigation .cs-active .cs-line2 { + top: 50%; + transform: translate(-50%, -50%) translateY(0) rotate(-225deg); + transform-origin: center; + } + #cs-navigation .cs-active .cs-line3 { + opacity: 0; + bottom: 100%; + } + #cs-navigation .cs-box { + /* 24px - 28px */ + width: clamp(1.5rem, 2vw, 1.75rem); + /* 14px - 16px */ + height: clamp(0.875rem, 1.5vw, 1rem); + position: relative; + } + #cs-navigation .cs-line { + width: 100%; + height: 2px; + background-color: #1a1a1a; + border-radius: 2px; + position: absolute; + left: 50%; + transform: translateX(-50%); + } + #cs-navigation .cs-line1 { + top: 0; + transition: transform 0.5s, top 0.3s, left 0.3s; + animation-duration: 0.7s; + animation-timing-function: ease; + animation-direction: normal; + animation-fill-mode: forwards; + transform-origin: center; + } + #cs-navigation .cs-line2 { + top: 50%; + transform: translateX(-50%) translateY(-50%); + transition: top 0.3s, left 0.3s, transform 0.5s; + animation-duration: 0.7s; + animation-timing-function: ease; + animation-direction: normal; + animation-fill-mode: forwards; + } + #cs-navigation .cs-line3 { + bottom: 0; + transition: bottom 0.3s, opacity 0.3s; + } + #cs-navigation .cs-ul-wrapper { + width: 100%; + height: auto; + padding-bottom: 2.4em; + background-color: #fff; + box-shadow: inset rgba(0, 0, 0, 0.2) 0px 8px 24px; + opacity: 0; + position: absolute; + top: 100%; + left: 0; + z-index: -1; + overflow: hidden; + transform: scaleY(0); + transition: transform 0.4s, opacity 0.3s; + transform-origin: top; + } + #cs-navigation .cs-ul { + width: 100%; + height: auto; + max-height: 65vh; + margin: 0; + padding: 3rem 0 0 0; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + gap: 1.25rem; + overflow: auto; + } + #cs-navigation .cs-li { + text-align: center; + list-style: none; + width: 100%; + margin-right: 0; + opacity: 0; + /* transition from these values */ + transform: translateY(-4.375rem); + transition: transform 0.6s, opacity 0.9s; + } + #cs-navigation .cs-li:nth-of-type(1) { + transition-delay: 0.05s; + } + #cs-navigation .cs-li:nth-of-type(2) { + transition-delay: 0.1s; + } + #cs-navigation .cs-li:nth-of-type(3) { + transition-delay: 0.15s; + } + #cs-navigation .cs-li:nth-of-type(4) { + transition-delay: 0.2s; + } + #cs-navigation .cs-li:nth-of-type(5) { + transition-delay: 0.25s; + } + #cs-navigation .cs-li:nth-of-type(6) { + transition-delay: 0.3s; + } + #cs-navigation .cs-li:nth-of-type(7) { + transition-delay: 0.35s; + } + #cs-navigation .cs-li:nth-of-type(8) { + transition-delay: 0.4s; + } + #cs-navigation .cs-li:nth-of-type(9) { + transition-delay: 0.45s; + } + #cs-navigation .cs-li:nth-of-type(10) { + transition-delay: 0.5s; + } + #cs-navigation .cs-li:nth-of-type(11) { + transition-delay: 0.55s; + } + #cs-navigation .cs-li:nth-of-type(12) { + transition-delay: 0.6s; + } + #cs-navigation .cs-li:nth-of-type(13) { + transition-delay: 0.65s; + } + #cs-navigation .cs-li-link { + /* 16px - 24px */ + font-size: clamp(1rem, 2.5vw, 1.5rem); + line-height: 1.2em; + text-decoration: none; + margin: 0; + color: var(--headerColor); + display: inline-block; + position: relative; + } + #cs-navigation .cs-li-link:before { + /* active state underline */ + content: ""; + width: 100%; + height: 1px; + background: currentColor; + opacity: 1; + display: none; + position: absolute; + bottom: -0.125rem; + left: 0; + } + #cs-navigation .cs-li-link.cs-active:before { + display: block; + } + #cs-navigation .cs-button-solid { + display: none; + } +} +/*-- -------------------------- --> +<--- Navigation Dropdown --> +<--- -------------------------- -*/ +/* Mobile - 1023px */ +@media only screen and (max-width: 63.9375rem) { + #cs-navigation .cs-li { + text-align: center; + width: 100%; + display: block; + } + #cs-navigation .cs-dropdown { + color: var(--bodyTextColorWhite); + position: relative; + } + #cs-navigation .cs-dropdown.cs-active .cs-drop-ul { + height: auto; + margin: 0.75rem 0 0 0; + padding: 0.75rem 0; + opacity: 1; + visibility: visible; + } + #cs-navigation .cs-dropdown.cs-active .cs-drop-link { + opacity: 1; + } + #cs-navigation .cs-dropdown .cs-li-link { + position: relative; + transition: opacity 0.3s; + } + #cs-navigation .cs-drop-icon { + width: 0.9375rem; + height: auto; + position: absolute; + top: 50%; + right: -1.25rem; + transform: translateY(-50%); + } + #cs-navigation .cs-drop-ul { + width: 100%; + height: 0; + margin: 0; + padding: 0; + background-color: var(--primary); + opacity: 0; + display: flex; + visibility: hidden; + flex-direction: column; + justify-content: flex-start; + align-items: center; + gap: 0.75rem; + overflow: hidden; + transition: padding 0.3s, margin 0.3s, height 0.3s, opacity 0.3s, + visibility 0.3s; + } + #cs-navigation .cs-drop-li { + list-style: none; + } + #cs-navigation .cs-li-link.cs-drop-link { + /* 14px - 16px */ + font-size: clamp(0.875rem, 2vw, 1.25rem); + color: #fff; + } +} +/* Desktop - 1024px */ +@media only screen and (min-width: 64rem) { + #cs-navigation .cs-dropdown { + position: relative; + } + #cs-navigation .cs-dropdown:hover, + #cs-navigation .cs-dropdown:focus-within { + cursor: pointer; + } + #cs-navigation .cs-dropdown:hover .cs-drop-ul, + #cs-navigation .cs-dropdown:focus-within .cs-drop-ul { + opacity: 1; + visibility: visible; + transform: scaleY(1); + } + #cs-navigation .cs-dropdown:hover .cs-drop-li, + #cs-navigation .cs-dropdown:focus-within .cs-drop-li { + opacity: 1; + transform: translateY(0); + } + #cs-navigation .cs-drop-icon { + width: 0.9375rem; + height: auto; + display: inline-block; + } + #cs-navigation .cs-drop-ul { + min-width: 12.5rem; + margin: 0; + padding: 0; + background-color: #fff; + box-shadow: rgba(149, 157, 165, 0.2) 0px 10px 16px; + opacity: 0; + border-bottom: 5px solid var(--primary); + visibility: hidden; + /* if you have 8 or more links in your dropdown nav, uncomment the columns property to make the list into 2 even columns. Change it to 3 or 4 if you need extra columns. Then remove the transition delays on the cs-drop-li so they don't have weird scattered animations */ + position: absolute; + top: 100%; + z-index: -100; + overflow: hidden; + transform: scaleY(0); + transition: transform 0.3s, visibility 0.3s, opacity 0.3s; + transform-origin: top; + } + #cs-navigation .cs-drop-li { + font-size: 1rem; + text-decoration: none; + list-style: none; + width: 100%; + height: auto; + color: var(--bodyTextColor); + opacity: 0; + display: block; + transform: translateY(-0.625rem); + transition: opacity 0.6s, transform 0.6s; + } + #cs-navigation .cs-drop-li:nth-of-type(1) { + transition-delay: 0.05s; + } + #cs-navigation .cs-drop-li:nth-of-type(2) { + transition-delay: 0.1s; + } + #cs-navigation .cs-drop-li:nth-of-type(3) { + transition-delay: 0.15s; + } + #cs-navigation .cs-drop-li:nth-of-type(4) { + transition-delay: 0.2s; + } + #cs-navigation .cs-drop-li:nth-of-type(5) { + transition-delay: 0.25s; + } + #cs-navigation .cs-drop-li:nth-of-type(6) { + transition-delay: 0.3s; + } + #cs-navigation .cs-drop-li:nth-of-type(7) { + transition-delay: 0.35s; + } + #cs-navigation .cs-drop-li:nth-of-type(8) { + transition-delay: 0.4s; + } + #cs-navigation .cs-drop-li:nth-of-type(9) { + transition-delay: 0.45s; + } + #cs-navigation .cs-li-link.cs-drop-link { + font-size: 1rem; + line-height: 1.5em; + text-decoration: none; + white-space: nowrap; + width: 100%; + /* prevents padding and border from affecting height and width */ + box-sizing: border-box; + padding: 0.75rem; + color: var(--bodyTextColor); + display: block; + transition: color 0.3s, background-color 0.3s; + } + #cs-navigation .cs-li-link.cs-drop-link:hover, + #cs-navigation .cs-li-link.cs-drop-link:focus { + background-color: #f7f7f7; + outline: none; + } + #cs-navigation .cs-li-link.cs-drop-link:before { + display: none; + } +} +/*-- -------------------------- --> +<--- Desktop Navigation --> +<--- -------------------------- -*/ +/* Small Desktop - 1024px */ +@media only screen and (min-width: 64rem) { + #cs-navigation { + width: 100%; + /* prevents padding and border from affecting height and width */ + box-sizing: border-box; + padding: 0 1rem; + background-color: #fff; + box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; + position: fixed; + z-index: 10000; + } + #cs-navigation .cs-container { + width: 100%; + max-width: 80rem; + margin: auto; + display: flex; + justify-content: flex-end; + align-items: center; + gap: 1.5rem; + } + #cs-navigation .cs-toggle { + display: none; + } + #cs-navigation .cs-logo { + width: 18.4%; + max-width: 21.875rem; + height: 4.0625rem; + /* margin-right auto pushes everything away from it to the right */ + margin: 0 auto 0 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + z-index: 100; + } + #cs-navigation .cs-logo img { + width: 100%; + height: 100%; + /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */ + object-fit: contain; + } + #cs-navigation .cs-ul { + width: 100%; + margin: 0; + padding: 0; + display: flex; + justify-content: flex-start; + align-items: center; + /* 20px - 36px */ + gap: clamp(1.25rem, 2.6vw, 2.25rem); + } + #cs-navigation .cs-li { + list-style: none; + padding: 2rem 0; + /* prevent flexbox from squishing it */ + flex: none; + } + #cs-navigation .cs-li-link { + /* 14px - 16px */ + font-size: clamp(0.875rem, 1vw, 1rem); + line-height: 1.5em; + text-decoration: none; + margin: 0; + color: var(--bodyTextColor); + display: block; + position: relative; + } + #cs-navigation .cs-li-link:hover:before { + width: 100%; + } + #cs-navigation .cs-li-link.cs-active:before { + width: 100%; + } + #cs-navigation .cs-li-link:before { + /* active state underline */ + content: ""; + width: 0%; + height: 2px; + background: var(--primary); + opacity: 1; + display: block; + position: absolute; + bottom: 0rem; + left: 0; + transition: width 0.3s; + } + #cs-navigation .cs-button-solid { + font-size: 1rem; + font-weight: 700; + /* 46px - 56px */ + line-height: clamp(2.875em, 5.5vw, 3.5em); + text-align: center; + text-decoration: none; + min-width: 9.375rem; + margin: 0; + /* prevents padding from adding to the width */ + box-sizing: border-box; + padding: 0 1.5rem; + color: #fff; + background-color: var(--primary); + border-radius: 0.25rem; + display: inline-block; + position: relative; + z-index: 1; + } + #cs-navigation .cs-button-solid:before { + content: ""; + width: 0%; + height: 100%; + background: #000; + opacity: 1; + border-radius: 0.25rem; + position: absolute; + top: 0; + left: 0; + z-index: -1; + transition: width 0.3s; + } + #cs-navigation .cs-button-solid:hover:before { + width: 100%; + } +} diff --git a/media/pgus/css/pgus.css b/media/pgus/css/pgus.css index 5aa2377..d77cb0a 100644 --- a/media/pgus/css/pgus.css +++ b/media/pgus/css/pgus.css @@ -1,9 +1,11 @@ +@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"); +@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); + html { font-size: 16px; } :root { - /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */ --primary: #1d3461; --primaryLight: #1f487e; --secondary: hsl(38, 100%, 63%); @@ -11,18 +13,12 @@ html { --headerColor: hsl(0, 0%, 10%); --bodyTextColor: hsl(247, 15%, 35%); --bodyTextColorWhite: hsl(210, 25%, 98%); - /* 13px - 16px */ - --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem); - /* 31px - 49px */ - --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem); - --bodyFontSize: 1rem; - /* 60px - 100px top and bottom */ - --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem; } body { margin: 0; padding: 0; + font-family: "Roboto", "Gill Sans", sans-serif; } *, @@ -31,42 +27,12 @@ body { /* prevents padding from affecting height and width */ box-sizing: border-box; } -.cs-topper { - font-size: var(--topperFontSize); - line-height: 1.2em; - text-transform: uppercase; - text-align: inherit; - letter-spacing: 0.1em; - font-weight: 700; - color: var(--primary); - margin-bottom: 0.25rem; - display: block; -} - -.cs-title { - font-size: var(--headerFontSize); - font-weight: 900; - line-height: 1.2em; - text-align: inherit; - max-width: 43.75rem; - margin: 0 0 1rem 0; - color: var(--headerColor); - position: relative; -} - -.cs-text { - font-size: var(--bodyFontSize); - line-height: 1.5em; - text-align: inherit; - width: 100%; - max-width: 40.625rem; - margin: 0; - color: var(--bodyTextColor); -} +/* Styling for the swoopy hero sections */ #hero { color: var(--bodyTextColorWhite); &.large h1 { + /* TODO: Set an actual font scale */ font-size: clamp(2.5rem, 1.08rem + 7.09vw, 6.0625rem); } &.large div.inner { @@ -99,542 +65,177 @@ body { } } -#cs-navigation { - & a { - font-weight: 400; - } -} +#introduction { + padding: clamp(2rem, 1.5rem + 2.5vw, 4rem) 0; -/*-- -------------------------- --> -<--- Mobile Navigation --> -<--- -------------------------- -*/ -/* Mobile - 1023px */ -@media only screen and (max-width: 63.9375rem) { - body.cs-open { - overflow: hidden; - } - #cs-navigation { - width: 100%; - /* prevents padding and border from affecting height and width */ - box-sizing: border-box; - padding: 0.75rem 1rem; - background-color: #fff; - box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; - position: fixed; - z-index: 10000; - } - #cs-navigation:before { - content: ""; - width: 100%; - height: 0vh; - background: rgba(0, 0, 0, 0.6); - opacity: 0; - display: block; - position: absolute; - top: 100%; - right: 0; - z-index: -1100; - transition: height 0.5s, opacity 0.5s; - -webkit-backdrop-filter: blur(10px); - backdrop-filter: blur(10px); - } - #cs-navigation.cs-active:before { - height: 150vh; - opacity: 1; - } - #cs-navigation.cs-active .cs-ul-wrapper { - opacity: 1; - transform: scaleY(1); - transition-delay: 0.15s; - } - #cs-navigation.cs-active .cs-li { - opacity: 1; - transform: translateY(0); - } - #cs-navigation .cs-container { - width: 100%; - display: flex; - justify-content: flex-end; - align-items: center; - } - #cs-navigation .cs-logo { - width: 40%; - max-width: 9.125rem; - height: 100%; - margin: 0 auto 0 0; - /* prevents padding and border from affecting height and width */ - box-sizing: border-box; - padding: 0; - display: flex; - justify-content: center; - align-items: center; - z-index: 10; - } - #cs-navigation .cs-logo img { - width: 100%; - height: 100%; - /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */ - object-fit: contain; - } - #cs-navigation .cs-toggle { - /* 44px - 48px */ - /* width: clamp(2.75rem, 6vw, 3rem); - height: clamp(2.75rem, 6vw, 3rem); */ - margin: 0 0 0 auto; - background-color: transparent; - border: none; - border-radius: 0.25rem; - display: flex; - justify-content: center; - align-items: center; - } - #cs-navigation .cs-active .cs-line1 { - top: 50%; - transform: translate(-50%, -50%) rotate(225deg); - } - #cs-navigation .cs-active .cs-line2 { - top: 50%; - transform: translate(-50%, -50%) translateY(0) rotate(-225deg); - transform-origin: center; - } - #cs-navigation .cs-active .cs-line3 { - opacity: 0; - bottom: 100%; - } - #cs-navigation .cs-box { - /* 24px - 28px */ - width: clamp(1.5rem, 2vw, 1.75rem); - /* 14px - 16px */ - height: clamp(0.875rem, 1.5vw, 1rem); - position: relative; - } - #cs-navigation .cs-line { - width: 100%; - height: 2px; - background-color: #1a1a1a; - border-radius: 2px; - position: absolute; - left: 50%; - transform: translateX(-50%); - } - #cs-navigation .cs-line1 { - top: 0; - transition: transform 0.5s, top 0.3s, left 0.3s; - animation-duration: 0.7s; - animation-timing-function: ease; - animation-direction: normal; - animation-fill-mode: forwards; - transform-origin: center; - } - #cs-navigation .cs-line2 { - top: 50%; - transform: translateX(-50%) translateY(-50%); - transition: top 0.3s, left 0.3s, transform 0.5s; - animation-duration: 0.7s; - animation-timing-function: ease; - animation-direction: normal; - animation-fill-mode: forwards; - } - #cs-navigation .cs-line3 { - bottom: 0; - transition: bottom 0.3s, opacity 0.3s; - } - #cs-navigation .cs-ul-wrapper { - width: 100%; - height: auto; - padding-bottom: 2.4em; - background-color: #fff; - box-shadow: inset rgba(0, 0, 0, 0.2) 0px 8px 24px; - opacity: 0; - position: absolute; - top: 100%; - left: 0; - z-index: -1; - overflow: hidden; - transform: scaleY(0); - transition: transform 0.4s, opacity 0.3s; - transform-origin: top; - } - #cs-navigation .cs-ul { - width: 100%; - height: auto; - max-height: 65vh; - margin: 0; - padding: 3rem 0 0 0; - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: center; - gap: 1.25rem; - overflow: auto; - } - #cs-navigation .cs-li { - text-align: center; - list-style: none; - width: 100%; - margin-right: 0; - opacity: 0; - /* transition from these values */ - transform: translateY(-4.375rem); - transition: transform 0.6s, opacity 0.9s; - } - #cs-navigation .cs-li:nth-of-type(1) { - transition-delay: 0.05s; - } - #cs-navigation .cs-li:nth-of-type(2) { - transition-delay: 0.1s; - } - #cs-navigation .cs-li:nth-of-type(3) { - transition-delay: 0.15s; - } - #cs-navigation .cs-li:nth-of-type(4) { - transition-delay: 0.2s; - } - #cs-navigation .cs-li:nth-of-type(5) { - transition-delay: 0.25s; - } - #cs-navigation .cs-li:nth-of-type(6) { - transition-delay: 0.3s; - } - #cs-navigation .cs-li:nth-of-type(7) { - transition-delay: 0.35s; - } - #cs-navigation .cs-li:nth-of-type(8) { - transition-delay: 0.4s; - } - #cs-navigation .cs-li:nth-of-type(9) { - transition-delay: 0.45s; - } - #cs-navigation .cs-li:nth-of-type(10) { - transition-delay: 0.5s; - } - #cs-navigation .cs-li:nth-of-type(11) { - transition-delay: 0.55s; - } - #cs-navigation .cs-li:nth-of-type(12) { - transition-delay: 0.6s; - } - #cs-navigation .cs-li:nth-of-type(13) { - transition-delay: 0.65s; - } - #cs-navigation .cs-li-link { - /* 16px - 24px */ - font-size: clamp(1rem, 2.5vw, 1.5rem); - line-height: 1.2em; - text-decoration: none; - margin: 0; + & h2 { color: var(--headerColor); - display: inline-block; - position: relative; - } - #cs-navigation .cs-li-link:before { - /* active state underline */ - content: ""; - width: 100%; - height: 1px; - background: currentColor; - opacity: 1; - display: none; - position: absolute; - bottom: -0.125rem; - left: 0; - } - #cs-navigation .cs-li-link.cs-active:before { - display: block; - } - #cs-navigation .cs-button-solid { - display: none; + margin-bottom: 1.5rem; + font-size: 1.5rem; } -} -/*-- -------------------------- --> -<--- Navigation Dropdown --> -<--- -------------------------- -*/ -/* Mobile - 1023px */ -@media only screen and (max-width: 63.9375rem) { - #cs-navigation .cs-li { - text-align: center; - width: 100%; - display: block; - } - #cs-navigation .cs-dropdown { - color: var(--bodyTextColorWhite); - position: relative; - } - #cs-navigation .cs-dropdown.cs-active .cs-drop-ul { - height: auto; - margin: 0.75rem 0 0 0; - padding: 0.75rem 0; - opacity: 1; - visibility: visible; - } - #cs-navigation .cs-dropdown.cs-active .cs-drop-link { - opacity: 1; - } - #cs-navigation .cs-dropdown .cs-li-link { - position: relative; - transition: opacity 0.3s; - } - #cs-navigation .cs-drop-icon { - width: 0.9375rem; - height: auto; - position: absolute; - top: 50%; - right: -1.25rem; - transform: translateY(-50%); + + &.pg-row { + display: grid; + grid-template-columns: 1fr; + gap: clamp(1rem, 0.73rem + 1.36vw, 1.875rem); + + @media (min-width: 768px) { + grid-template-columns: repeat(3, 1fr); + } } - #cs-navigation .cs-drop-ul { - width: 100%; - height: 0; - margin: 0; - padding: 0; - background-color: var(--primary); - opacity: 0; + + & > * { + background: white; + border: 1px solid hsl(0, 0%, 90%); + border-radius: 0.5rem; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + padding: clamp(1.25rem, 1rem + 1.25vw, 2rem); display: flex; - visibility: hidden; flex-direction: column; - justify-content: flex-start; - align-items: center; - gap: 0.75rem; - overflow: hidden; - transition: padding 0.3s, margin 0.3s, height 0.3s, opacity 0.3s, - visibility 0.3s; - } - #cs-navigation .cs-drop-li { - list-style: none; - } - #cs-navigation .cs-li-link.cs-drop-link { - /* 14px - 16px */ - font-size: clamp(0.875rem, 2vw, 1.25rem); - color: #fff; + border-bottom: 3px solid var(--primary); + border-top: 3px solid var(--primary); + + & h3 { + color: var(--headerColor); + font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); + margin: 0 0 1rem 0; + line-height: 1.3; + padding-bottom: 0.75rem; + border-bottom: 1px solid hsl(0, 0%, 93%); + } + + & p { + color: var(--bodyTextColor); + line-height: 1.6; + margin-bottom: 0.75rem; + font-size: 0.9375rem; + + &:last-child { + margin-bottom: 0; + } + } } } -/* Desktop - 1024px */ -@media only screen and (min-width: 64rem) { - #cs-navigation .cs-dropdown { - position: relative; - } - #cs-navigation .cs-dropdown:hover, - #cs-navigation .cs-dropdown:focus-within { - cursor: pointer; - } - #cs-navigation .cs-dropdown:hover .cs-drop-ul, - #cs-navigation .cs-dropdown:focus-within .cs-drop-ul { - opacity: 1; - visibility: visible; - transform: scaleY(1); - } - #cs-navigation .cs-dropdown:hover .cs-drop-li, - #cs-navigation .cs-dropdown:focus-within .cs-drop-li { - opacity: 1; - transform: translateY(0); - } - #cs-navigation .cs-drop-icon { - width: 0.9375rem; - height: auto; - display: inline-block; - } - #cs-navigation .cs-drop-ul { - min-width: 12.5rem; - margin: 0; - padding: 0; - background-color: #fff; - box-shadow: rgba(149, 157, 165, 0.2) 0px 10px 16px; - opacity: 0; - border-bottom: 5px solid var(--primary); - visibility: hidden; - /* if you have 8 or more links in your dropdown nav, uncomment the columns property to make the list into 2 even columns. Change it to 3 or 4 if you need extra columns. Then remove the transition delays on the cs-drop-li so they don't have weird scattered animations */ - position: absolute; - top: 100%; - z-index: -100; - overflow: hidden; - transform: scaleY(0); - transition: transform 0.3s, visibility 0.3s, opacity 0.3s; - transform-origin: top; - } - #cs-navigation .cs-drop-li { - font-size: 1rem; - text-decoration: none; - list-style: none; - width: 100%; - height: auto; - color: var(--bodyTextColor); - opacity: 0; - display: block; - transform: translateY(-0.625rem); - transition: opacity 0.6s, transform 0.6s; - } - #cs-navigation .cs-drop-li:nth-of-type(1) { - transition-delay: 0.05s; - } - #cs-navigation .cs-drop-li:nth-of-type(2) { - transition-delay: 0.1s; - } - #cs-navigation .cs-drop-li:nth-of-type(3) { - transition-delay: 0.15s; - } - #cs-navigation .cs-drop-li:nth-of-type(4) { - transition-delay: 0.2s; - } - #cs-navigation .cs-drop-li:nth-of-type(5) { - transition-delay: 0.25s; - } - #cs-navigation .cs-drop-li:nth-of-type(6) { - transition-delay: 0.3s; - } - #cs-navigation .cs-drop-li:nth-of-type(7) { - transition-delay: 0.35s; - } - #cs-navigation .cs-drop-li:nth-of-type(8) { - transition-delay: 0.4s; - } - #cs-navigation .cs-drop-li:nth-of-type(9) { - transition-delay: 0.45s; + +#news { + padding: clamp(2rem, 1.5rem + 2.5vw, 4rem) 0; + + & > header { + text-align: center; + color: var(--headerColor); + margin-bottom: clamp(2rem, 1.5rem + 2.5vw, 3rem); + h2 { + font-size: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem); + } } - #cs-navigation .cs-li-link.cs-drop-link { - font-size: 1rem; - line-height: 1.5em; - text-decoration: none; - white-space: nowrap; + + & .pg-row { width: 100%; - /* prevents padding and border from affecting height and width */ - box-sizing: border-box; - padding: 0.75rem; - color: var(--bodyTextColor); - display: block; - transition: color 0.3s, background-color 0.3s; - } - #cs-navigation .cs-li-link.cs-drop-link:hover, - #cs-navigation .cs-li-link.cs-drop-link:focus { - background-color: #f7f7f7; - outline: none; - } - #cs-navigation .cs-li-link.cs-drop-link:before { - display: none; + + & > article { + display: flex; + flex-direction: column; + max-width: 108ch; + margin: auto; + + & > ul { + list-style: none; + padding: 0; + margin: 0; + > li { + display: flex; + flex-direction: column; + margin-bottom: 0.25rem; + padding-bottom: 0.25rem; + border-bottom: 3px solid var(--primary); + + &:first-child { + padding-top: 0.25rem; + border-top: 3px solid var(--primary); + } + + > .content { + display: -webkit-box; + -webkit-line-clamp: 20; + -webkit-box-orient: vertical; + overflow: hidden; + } + + > .more-link { + padding-top: 1rem; + padding-bottom: 1rem; + font-weight: 500; + } + } + } + } } } -/*-- -------------------------- --> -<--- Desktop Navigation --> -<--- -------------------------- -*/ -/* Small Desktop - 1024px */ -@media only screen and (min-width: 64rem) { - #cs-navigation { - width: 100%; - /* prevents padding and border from affecting height and width */ - box-sizing: border-box; - padding: 0 1rem; - background-color: #fff; - box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; - position: fixed; - z-index: 10000; - } - #cs-navigation .cs-container { - width: 100%; - max-width: 80rem; - margin: auto; - display: flex; - justify-content: flex-end; - align-items: center; - gap: 1.5rem; - } - #cs-navigation .cs-toggle { - display: none; - } - #cs-navigation .cs-logo { - width: 18.4%; - max-width: 21.875rem; - height: 4.0625rem; - /* margin-right auto pushes everything away from it to the right */ - margin: 0 auto 0 0; - padding: 0; - display: flex; - justify-content: center; - align-items: center; - z-index: 100; - } - #cs-navigation .cs-logo img { - width: 100%; - height: 100%; - /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */ - object-fit: contain; - } - #cs-navigation .cs-ul { - width: 100%; - margin: 0; - padding: 0; - display: flex; - justify-content: flex-start; - align-items: center; - /* 20px - 36px */ - gap: clamp(1.25rem, 2.6vw, 2.25rem); - } - #cs-navigation .cs-li { - list-style: none; - padding: 2rem 0; - /* prevent flexbox from squishing it */ - flex: none; - } - #cs-navigation .cs-li-link { - /* 14px - 16px */ - font-size: clamp(0.875rem, 1vw, 1rem); - line-height: 1.5em; - text-decoration: none; - margin: 0; - color: var(--bodyTextColor); - display: block; - position: relative; - } - #cs-navigation .cs-li-link:hover:before { - width: 100%; - } - #cs-navigation .cs-li-link.cs-active:before { - width: 100%; - } - #cs-navigation .cs-li-link:before { - /* active state underline */ - content: ""; - width: 0%; - height: 2px; - background: var(--primary); - opacity: 1; - display: block; - position: absolute; - bottom: 0rem; - left: 0; - transition: width 0.3s; - } - #cs-navigation .cs-button-solid { - font-size: 1rem; - font-weight: 700; - /* 46px - 56px */ - line-height: clamp(2.875em, 5.5vw, 3.5em); + +/* Team section */ +#team { + padding: clamp(2rem, 1.5rem + 2.5vw, 4rem) 0; + + & h2 { text-align: center; - text-decoration: none; - min-width: 9.375rem; - margin: 0; - /* prevents padding from adding to the width */ - box-sizing: border-box; - padding: 0 1.5rem; - color: #fff; - background-color: var(--primary); - border-radius: 0.25rem; - display: inline-block; - position: relative; - z-index: 1; - } - #cs-navigation .cs-button-solid:before { - content: ""; - width: 0%; - height: 100%; - background: #000; - opacity: 1; - border-radius: 0.25rem; - position: absolute; - top: 0; - left: 0; - z-index: -1; - transition: width 0.3s; + color: var(--headerColor); + margin-bottom: clamp(2rem, 1.5rem + 2.5vw, 3rem); + font-size: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem); } - #cs-navigation .cs-button-solid:hover:before { - width: 100%; + + & .pg-row { + display: grid; + grid-gap: 1rem; + grid-template-columns: repeat(auto-fit, minmax(40ch, 1fr)); + gap: 1rem; + + & > * { + flex: 1 1 clamp(20rem, 30%, 35rem); + background: white; + border: 1px solid hsl(0, 0%, 90%); + border-radius: 0.5rem; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + margin-bottom: 2rem; + padding: clamp(1.25rem, 1rem + 1.25vw, 2rem); + display: flex; + flex-direction: column; + border-top: 3px solid var(--primary); + + & header { + display: flex; + align-items: center; + gap: 1rem; + margin-bottom: 1rem; + padding-bottom: 1rem; + border-bottom: 1px solid hsl(0, 0%, 93%); + + & img { + width: 80px; + height: 80px; + border-radius: 50%; + object-fit: cover; + flex-shrink: 0; + border: 3px solid var(--primaryLight); + } + + & h3 { + color: var(--headerColor); + font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); + margin: 0; + line-height: 1.3; + } + } + + & p { + color: var(--bodyTextColor); + line-height: 1.6; + margin-bottom: 0.75rem; + font-size: 0.9375rem; + + &:last-child { + margin-bottom: 0; + } + } + } } } diff --git a/media/pgus/js/navigation.js b/media/pgus/js/navigation.js new file mode 100644 index 0000000..5f5c62a --- /dev/null +++ b/media/pgus/js/navigation.js @@ -0,0 +1,43 @@ +// Wait for DOM to be ready before running navigation code +document.addEventListener("DOMContentLoaded", function () { + // add classes for mobile navigation toggling + var CSbody = document.querySelector("body"); + const CSnavbarMenu = document.querySelector("#cs-navigation"); + const CShamburgerMenu = document.querySelector("#cs-navigation .cs-toggle"); + + // Check if navigation elements exist before adding event listeners + if (CShamburgerMenu && CSnavbarMenu && CSbody) { + CShamburgerMenu.addEventListener("click", function () { + CShamburgerMenu.classList.toggle("cs-active"); + CSnavbarMenu.classList.toggle("cs-active"); + CSbody.classList.toggle("cs-open"); + // run the function to check the aria-expanded value + ariaExpanded(); + }); + } + + // checks the value of aria expanded on the cs-ul and changes it accordingly whether it is expanded or not + function ariaExpanded() { + const csUL = document.querySelector("#cs-expanded"); + if (csUL) { + const csExpanded = csUL.getAttribute("aria-expanded"); + + if (csExpanded === "false") { + csUL.setAttribute("aria-expanded", "true"); + } else { + csUL.setAttribute("aria-expanded", "false"); + } + } + } + + // mobile nav toggle code + const dropDowns = Array.from( + document.querySelectorAll("#cs-navigation .cs-dropdown") + ); + for (const item of dropDowns) { + const onClick = () => { + item.classList.toggle("cs-active"); + }; + item.addEventListener("click", onClick); + } +}); diff --git a/media/pgus/js/pgus.js b/media/pgus/js/pgus.js index c9542c2..e69de29 100644 --- a/media/pgus/js/pgus.js +++ b/media/pgus/js/pgus.js @@ -1,43 +0,0 @@ -// Wait for DOM to be ready before running navigation code -document.addEventListener("DOMContentLoaded", function() { - // add classes for mobile navigation toggling - var CSbody = document.querySelector("body"); - const CSnavbarMenu = document.querySelector("#cs-navigation"); - const CShamburgerMenu = document.querySelector("#cs-navigation .cs-toggle"); - - // Check if navigation elements exist before adding event listeners - if (CShamburgerMenu && CSnavbarMenu && CSbody) { - CShamburgerMenu.addEventListener("click", function () { - CShamburgerMenu.classList.toggle("cs-active"); - CSnavbarMenu.classList.toggle("cs-active"); - CSbody.classList.toggle("cs-open"); - // run the function to check the aria-expanded value - ariaExpanded(); - }); - } - - // checks the value of aria expanded on the cs-ul and changes it accordingly whether it is expanded or not - function ariaExpanded() { - const csUL = document.querySelector("#cs-expanded"); - if (csUL) { - const csExpanded = csUL.getAttribute("aria-expanded"); - - if (csExpanded === "false") { - csUL.setAttribute("aria-expanded", "true"); - } else { - csUL.setAttribute("aria-expanded", "false"); - } - } - } - - // mobile nav toggle code - const dropDowns = Array.from( - document.querySelectorAll("#cs-navigation .cs-dropdown") - ); - for (const item of dropDowns) { - const onClick = () => { - item.classList.toggle("cs-active"); - }; - item.addEventListener("click", onClick); - } -}); diff --git a/template/base_new.html b/template/base_new.html new file mode 100644 index 0000000..8dae234 --- /dev/null +++ b/template/base_new.html @@ -0,0 +1,27 @@ + + + + + + PgUS - {%block title%}{%endblock%} + + + + + + + + + {%block extrahead%}{%endblock%} + + + + + + {%include "pieces/navigation.html"%} + {%block heroblock%}{%endblock%} + {%block layoutblock%}{%endblock%} + {%include 'pieces/footer.html'%} + + + \ No newline at end of file diff --git a/template/base_pgus.html b/template/base_pgus.html index bd3dce0..bd72e81 100644 --- a/template/base_pgus.html +++ b/template/base_pgus.html @@ -8,10 +8,12 @@ + + {%block extrahead%}{%endblock%} diff --git a/template/index.html b/template/index.html index 6b5c0f5..e32c395 100644 --- a/template/index.html +++ b/template/index.html @@ -1,4 +1,4 @@ -{%extends "base_pgus.html" %} +{%extends "base_new.html" %} {%load pgmarkdown%} {%block title%}Welcome{%endblock%} @@ -17,85 +17,63 @@

United States PostgreSQL Association

{%block layoutblock%} -
-
-
-
-

Who We Are

-
+
+
+
+

Who We Are

The United States PostgreSQL Association, affectionately known as PgUS, is a IRS 501(c)(3) public charity. Our purpose is to support the growth and education of PostgreSQL, the world's most advanced open source database.

- + More
-
-
-

Membership

-
+
+

Membership

Are you interested in PostgreSQL growth and education? Do you support PostgreSQL and want to help? By becoming a member you will be helping to support our mission and be able to influence what we do.

- + More
-
-
-

Upcoming Events

-
+
+

Upcoming Events

- + More
-
-
-
+
- -
-
-

News

-

- Latest PgUS News -

-
-
-
+ +
+ +
+

News

+

+ Latest PgUS News +

+
+
-
-

{{news.0.title}}

-
-

- {{news.0.summary|markdown}} -

-
-
-
-
-
-

Recent News Posts

-
-
    +
      {%for newsitem in news %} -
    • {{newsitem.summary|markdown}}
      • +
    • +

      {{newsitem.title}}

      +
      + {{newsitem.summary|markdown}} +
      + Read More +
      • {%endfor%}
-
-
-
+ -{%include "pieces/team_info.html"%} + {%include "pieces/team_info.html"%} + {%endblock%} \ No newline at end of file diff --git a/template/pages/diversity.html b/template/pages/diversity.html index fe7c775..cf6c851 100644 --- a/template/pages/diversity.html +++ b/template/pages/diversity.html @@ -70,10 +70,11 @@

Diversity Scholarship

Diversity Committee

Quan-ha Le
- Samay Sharma
- Stacey Haysler
- Sunita Inderjit
Emma Saroyan
+ Ezra Yendau
+ Selenge Tulga
+ Jay Miller
+ Bob Pacheco

diff --git a/template/pieces/footer.html b/template/pieces/footer.html index c481697..4627e2f 100644 --- a/template/pieces/footer.html +++ b/template/pieces/footer.html @@ -35,6 +35,22 @@ order: 1; justify-content: start; } + + .fa-twitter { + color: #55acee; + } + + .fa-bluesky { + color: #87CEEB; + } + + .fa-mastodon { + color: #6364FF; + } + + .fa-github { + color: #333; + } } } diff --git a/template/pieces/team_info.html b/template/pieces/team_info.html index 14494be..a9716f2 100644 --- a/template/pieces/team_info.html +++ b/template/pieces/team_info.html @@ -1,34 +1,16 @@ -
-
-

PgUS Board

-
-
- -
-
+
+ +

PgUS Board

+
+
+
Stacey Haysler -
-

Stacey Haysler - President

+ +

Stacey Haysler

+

President

+ +

Stacey Haysler is the CFO and COO of PostgreSQL Experts, Inc. She first became involved in the Postgres community in 2010, and @@ -48,12 +30,15 @@

Stacey Haysler - President

+
-
-
+
Mark Wong -
-

Mark Wong - Treasurer

+ +

Mark Wong

+

Treasurer

+ +

Mark Wong is currently employed by EDB and is a PostgreSQL Major Contributor. His background is in database systems @@ -67,12 +52,14 @@

Mark Wong - Treasurer

- -
-
+
+
Jonathan Katz -
-

Jonathan Katz - Director

+ +

Jonathan Katz

+

Director

+ +

Jonathan S. Katz is a Principal Product Manager - Technical at Amazon on the Amazon RDS team. Jonathan is also a Core Team @@ -81,7 +68,6 @@

Jonathan Katz - Director

member for the nonprofit PostgreSQL Community Association of Canada.

-

Prior to Amazon, Jonathan was VP of Platform Engineering at Crunchy Data. Before that he was CTO at VenueBook and VP of @@ -89,47 +75,51 @@

Jonathan Katz - Director

robust platforms using or delivering PostgreSQL, taking advantage of its many features, from complex data types to its ability to stream logical changes. - +

Jonathan graduated from Tufts University with a B.S. in Computer Science and a B.A. in Mathematics. Current term runs through April 30, 2026.

- - - -
-
+
+
Michael Brewer -
-

Michael Brewer - Secretary

+ +

Michael Brewer

+

Secretary

+ +

Michael Brewer is a Web Developer Principal in the Franklin College Office of Information Technology at The University of Georgia. Michael's responsibilities include developing applications for intranet and internet use, creating and managing databases, and desktop and network support. One of the applications he developed won a national award for innovation in advising technology. He is one - of the founding board members of the United States PostgreSQL Association. Current term runs through April 30, - 2026. + of the founding board members of the United States PostgreSQL Association. Current term runs through April + 30, 2026.

+
-
-
+
Elizabeth Christensen -
-

Elizabeth Garrett Christensen - Director

+ +

Elizabeth Garrett Christensen

+

Director

+ +

Elizabeth Garrett Christensen works on Postgres educational content at Snowflake. She writes blogs, tutorials, and product documentation while also assisting with Postgres product development. Elizabeth - organizes the global PostGIS Day and hosts a local Kansas City Postgres User Group. Elizabeth enjoys speaking + organizes the global PostGIS Day and hosts a local Kansas City Postgres User Group. Elizabeth enjoys + speaking at Postgres events, open source events, and developer conferences primarily for users new to Postgres or in non-traditional technical roles. Elizabeth has a B.A. in Archeology from the University of Texas and a background in academic publishing software and open-source software. Current term runs through April 30, 2027.

-
+
\ No newline at end of file