From 1b318ca372a3f49788d521d4991c3b7d5202a2c8 Mon Sep 17 00:00:00 2001 From: Kevin Date: Wed, 24 Dec 2025 17:36:34 +0100 Subject: [PATCH 01/16] Testing new homepage (#56) * Splitting out CodeStitch navigation * New containerless, no-main.css layout Updated Team Info Happy with Team section, finally Intro spacing Introduction cards Basic news styling Update tenure --------- Co-authored-by: Kevin Rocker --- media/pgus/css/navigation.css | 584 +++++++++++++++++++++++++++ media/pgus/css/pgus.css | 696 +++++++-------------------------- media/pgus/js/navigation.js | 43 ++ media/pgus/js/pgus.js | 43 -- template/base_new.html | 27 ++ template/base_pgus.html | 2 + template/index.html | 82 ++-- template/pieces/team_info.html | 100 +++-- 8 files changed, 864 insertions(+), 713 deletions(-) create mode 100644 media/pgus/css/navigation.css create mode 100644 media/pgus/js/navigation.js create mode 100644 template/base_new.html 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..ffbc313 100644 --- a/media/pgus/css/pgus.css +++ b/media/pgus/css/pgus.css @@ -3,7 +3,6 @@ html { } :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,13 +10,6 @@ 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 { @@ -31,42 +23,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 +61,148 @@ 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; - } -} -/*-- -------------------------- --> -<--- 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; + margin-bottom: 1.5rem; + font-size: 1.5rem; } - #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; - } - #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; + +#news { + padding: clamp(2rem, 1.5rem + 2.5vw, 4rem) 0; + + & > header { + text-align: center; + padding-bottom: 2rem; } - #cs-navigation .cs-li-link.cs-drop-link:before { - display: none; + + & .pg-row { + display: grid; + grid-template-columns: 1fr; + grid-template-columns: repeat(auto-fit, minmax(70ch, 1fr)); + + & > article { + display: flex; + flex-direction: column; + + & ul { + list-style: none; + padding: 0; + margin: 0; + } + } } } -/*-- -------------------------- --> -<--- 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..5af9d63 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,65 @@

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}} -

+

{{news.0.title}}

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

Recent News Posts

-
    - {%for newsitem in news %} +
      + {%for newsitem in news|slice:"1:5" %}
    • {{newsitem.summary|markdown}}
      • {%endfor%}
-
-
-
+ -{%include "pieces/team_info.html"%} + {%include "pieces/team_info.html"%} + {%endblock%} \ No newline at end of file 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 From 683e75efb175df6f6de26b77d84f00796b8438a8 Mon Sep 17 00:00:00 2001 From: Kevin Rocker Date: Wed, 24 Dec 2025 17:44:00 +0100 Subject: [PATCH 02/16] Add titles, update font --- media/pgus/css/pgus.css | 1 + template/index.html | 5 ++++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/media/pgus/css/pgus.css b/media/pgus/css/pgus.css index ffbc313..82a84b2 100644 --- a/media/pgus/css/pgus.css +++ b/media/pgus/css/pgus.css @@ -15,6 +15,7 @@ html { body { margin: 0; padding: 0; + font-family: "Gill Sans", sans-serif; } *, diff --git a/template/index.html b/template/index.html index 5af9d63..e6ff4d9 100644 --- a/template/index.html +++ b/template/index.html @@ -69,7 +69,10 @@

Recent News Posts

    {%for newsitem in news|slice:"1:5" %} -
  • {{newsitem.summary|markdown}}
    • +
  • +

    {{newsitem.title}}

    + {{newsitem.summary|markdown}} +
    • {%endfor%}
From cdf701727ba3776836b9f38730560771f928ec4a Mon Sep 17 00:00:00 2001 From: Kevin Rocker Date: Wed, 24 Dec 2025 17:48:12 +0100 Subject: [PATCH 03/16] Adding news titles and links --- template/index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/template/index.html b/template/index.html index e6ff4d9..1ecea0f 100644 --- a/template/index.html +++ b/template/index.html @@ -59,8 +59,8 @@

-

{{news.0.title}}

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

{{news.0.title}}

+ {{news.0.summaryhtml}}
@@ -70,8 +70,8 @@

Recent News Posts

    {%for newsitem in news|slice:"1:5" %}
  • -

    {{newsitem.title}}

    - {{newsitem.summary|markdown}} +

    {{newsitem.title}}

    + {{newsitem.summaryhtml}}
    • {%endfor%}
From 2add3a4e535805ec6dded153059bc09bc3feffd1 Mon Sep 17 00:00:00 2001 From: Kevin Rocker Date: Wed, 24 Dec 2025 17:49:22 +0100 Subject: [PATCH 04/16] Okay we'll use markdown --- media/pgus/css/pgus.css | 5 +++++ template/index.html | 4 ++-- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/media/pgus/css/pgus.css b/media/pgus/css/pgus.css index 82a84b2..11cf014 100644 --- a/media/pgus/css/pgus.css +++ b/media/pgus/css/pgus.css @@ -135,6 +135,11 @@ body { list-style: none; padding: 0; margin: 0; + li { + margin-bottom: 0.25rem; + padding-bottom: 0.25rem; + border-bottom: 3px solid var(--primary); + } } } } diff --git a/template/index.html b/template/index.html index 1ecea0f..981260b 100644 --- a/template/index.html +++ b/template/index.html @@ -60,7 +60,7 @@

@@ -71,7 +71,7 @@

Recent News Posts

{%for newsitem in news|slice:"1:5" %}

  • {{newsitem.title}}

    - {{newsitem.summaryhtml}} + {{newsitem.summary|markdown}}
    • {%endfor%} From 4237e84033df5df8feb4fac4ab7cb78b4bd542b8 Mon Sep 17 00:00:00 2001 From: Kevin Rocker Date: Wed, 24 Dec 2025 17:51:56 +0100 Subject: [PATCH 05/16] Direct children only --- media/pgus/css/pgus.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/media/pgus/css/pgus.css b/media/pgus/css/pgus.css index 11cf014..5d7f30d 100644 --- a/media/pgus/css/pgus.css +++ b/media/pgus/css/pgus.css @@ -135,7 +135,7 @@ body { list-style: none; padding: 0; margin: 0; - li { + > li { margin-bottom: 0.25rem; padding-bottom: 0.25rem; border-bottom: 3px solid var(--primary); From 327a9467c8aa96c48bc11fb0738dea83a5e62815 Mon Sep 17 00:00:00 2001 From: Kevin Rocker Date: Wed, 24 Dec 2025 17:52:53 +0100 Subject: [PATCH 06/16] Fix --- media/pgus/css/pgus.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/media/pgus/css/pgus.css b/media/pgus/css/pgus.css index 5d7f30d..88cd785 100644 --- a/media/pgus/css/pgus.css +++ b/media/pgus/css/pgus.css @@ -131,7 +131,7 @@ body { display: flex; flex-direction: column; - & ul { + & > ul { list-style: none; padding: 0; margin: 0; From 27589b62de35530b081f1cb7b2e81527dde3a8f6 Mon Sep 17 00:00:00 2001 From: Kevin Rocker Date: Wed, 24 Dec 2025 17:56:58 +0100 Subject: [PATCH 07/16] Centering news, one column --- media/pgus/css/pgus.css | 4 ---- template/index.html | 12 ++---------- 2 files changed, 2 insertions(+), 14 deletions(-) diff --git a/media/pgus/css/pgus.css b/media/pgus/css/pgus.css index 88cd785..e0ef97f 100644 --- a/media/pgus/css/pgus.css +++ b/media/pgus/css/pgus.css @@ -123,10 +123,6 @@ body { } & .pg-row { - display: grid; - grid-template-columns: 1fr; - grid-template-columns: repeat(auto-fit, minmax(70ch, 1fr)); - & > article { display: flex; flex-direction: column; diff --git a/template/index.html b/template/index.html index 981260b..f1b0235 100644 --- a/template/index.html +++ b/template/index.html @@ -59,18 +59,10 @@

    - -
    -
    -

    Recent News Posts

    -
      - {%for newsitem in news|slice:"1:5" %} + {%for newsitem in news %}
    • -

      {{newsitem.title}}

      +

      {{newsitem.title}}

      {{newsitem.summary|markdown}}
      • {%endfor%} From 665f069b48cd4c88706c60d1cb3bb204b218164c Mon Sep 17 00:00:00 2001 From: Kevin Rocker Date: Wed, 24 Dec 2025 18:00:18 +0100 Subject: [PATCH 08/16] Tweaking news column width, truncating articles --- media/pgus/css/pgus.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/media/pgus/css/pgus.css b/media/pgus/css/pgus.css index e0ef97f..df252ec 100644 --- a/media/pgus/css/pgus.css +++ b/media/pgus/css/pgus.css @@ -126,6 +126,8 @@ body { & > article { display: flex; flex-direction: column; + max-width: 72ch; + justify-content: space-around; & > ul { list-style: none; @@ -135,6 +137,10 @@ body { margin-bottom: 0.25rem; padding-bottom: 0.25rem; border-bottom: 3px solid var(--primary); + display: -webkit-box; + -webkit-line-clamp: 20; + -webkit-box-orient: vertical; + overflow: hidden; } } } From d3e8757464e6e50af7e3924f5520fcbdcbb73037 Mon Sep 17 00:00:00 2001 From: Kevin Rocker Date: Wed, 24 Dec 2025 18:04:38 +0100 Subject: [PATCH 09/16] Centering the column --- media/pgus/css/pgus.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/media/pgus/css/pgus.css b/media/pgus/css/pgus.css index df252ec..98c5bdd 100644 --- a/media/pgus/css/pgus.css +++ b/media/pgus/css/pgus.css @@ -123,11 +123,13 @@ body { } & .pg-row { + width: 100%; + & > article { display: flex; flex-direction: column; - max-width: 72ch; - justify-content: space-around; + max-width: 108ch; + margin: auto; & > ul { list-style: none; From d13dc54ab959d3ae219bf525b42943f4ded17a80 Mon Sep 17 00:00:00 2001 From: Kevin Rocker Date: Wed, 24 Dec 2025 18:07:25 +0100 Subject: [PATCH 10/16] More link --- media/pgus/css/pgus.css | 6 ++++++ template/index.html | 1 + 2 files changed, 7 insertions(+) diff --git a/media/pgus/css/pgus.css b/media/pgus/css/pgus.css index 98c5bdd..7d1d11c 100644 --- a/media/pgus/css/pgus.css +++ b/media/pgus/css/pgus.css @@ -143,6 +143,12 @@ body { -webkit-line-clamp: 20; -webkit-box-orient: vertical; overflow: hidden; + + > .more-link { + padding-top: 1rem; + padding-bottom: 1rem; + font-weight: 500; + } } } } diff --git a/template/index.html b/template/index.html index f1b0235..2333046 100644 --- a/template/index.html +++ b/template/index.html @@ -64,6 +64,7 @@

    • {{newsitem.title}}

      {{newsitem.summary|markdown}} + More
      • {%endfor%}

    From 7193c978ae15a620411d084da7d13f5530ec08f7 Mon Sep 17 00:00:00 2001 From: Kevin Rocker Date: Wed, 24 Dec 2025 18:08:39 +0100 Subject: [PATCH 11/16] Testing the more button and overflow --- media/pgus/css/pgus.css | 11 +++++++---- template/index.html | 4 +++- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/media/pgus/css/pgus.css b/media/pgus/css/pgus.css index 7d1d11c..b742100 100644 --- a/media/pgus/css/pgus.css +++ b/media/pgus/css/pgus.css @@ -139,10 +139,13 @@ body { margin-bottom: 0.25rem; padding-bottom: 0.25rem; border-bottom: 3px solid var(--primary); - display: -webkit-box; - -webkit-line-clamp: 20; - -webkit-box-orient: vertical; - overflow: hidden; + + > .content { + display: -webkit-box; + -webkit-line-clamp: 20; + -webkit-box-orient: vertical; + overflow: hidden; + } > .more-link { padding-top: 1rem; diff --git a/template/index.html b/template/index.html index 2333046..95b82db 100644 --- a/template/index.html +++ b/template/index.html @@ -63,7 +63,9 @@

    {%for newsitem in news %}

  • {{newsitem.title}}

    - {{newsitem.summary|markdown}} +
    + {{newsitem.summary|markdown}} +
    More
    • {%endfor%} From ef5cf3e56211f132cacca8fa8f7a0f2c40481b2b Mon Sep 17 00:00:00 2001 From: Kevin Rocker Date: Wed, 24 Dec 2025 23:23:46 +0100 Subject: [PATCH 12/16] Update font and more link --- media/pgus/css/pgus.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/media/pgus/css/pgus.css b/media/pgus/css/pgus.css index b742100..45ae48b 100644 --- a/media/pgus/css/pgus.css +++ b/media/pgus/css/pgus.css @@ -1,3 +1,5 @@ +@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; } @@ -15,7 +17,7 @@ html { body { margin: 0; padding: 0; - font-family: "Gill Sans", sans-serif; + font-family: "Roboto", "Gill Sans", sans-serif; } *, @@ -151,6 +153,8 @@ body { padding-top: 1rem; padding-bottom: 1rem; font-weight: 500; + display: block; + float: right; } } } From bbcaa28b880087bdc3ffa577fb7755dd82cca8e8 Mon Sep 17 00:00:00 2001 From: Kevin Rocker Date: Wed, 24 Dec 2025 23:25:59 +0100 Subject: [PATCH 13/16] Flex layout --- media/pgus/css/pgus.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/media/pgus/css/pgus.css b/media/pgus/css/pgus.css index 45ae48b..ba924f9 100644 --- a/media/pgus/css/pgus.css +++ b/media/pgus/css/pgus.css @@ -138,6 +138,8 @@ body { padding: 0; margin: 0; > li { + display: flex; + flex-direction: column; margin-bottom: 0.25rem; padding-bottom: 0.25rem; border-bottom: 3px solid var(--primary); @@ -153,8 +155,7 @@ body { padding-top: 1rem; padding-bottom: 1rem; font-weight: 500; - display: block; - float: right; + align-self: flex-end; } } } From ea261ee60993f8216060c71c009d6395865b248b Mon Sep 17 00:00:00 2001 From: Kevin Rocker Date: Wed, 24 Dec 2025 23:45:32 +0100 Subject: [PATCH 14/16] Update font size --- media/pgus/css/pgus.css | 7 +++++-- template/index.html | 2 +- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/media/pgus/css/pgus.css b/media/pgus/css/pgus.css index ba924f9..3af73e9 100644 --- a/media/pgus/css/pgus.css +++ b/media/pgus/css/pgus.css @@ -121,7 +121,11 @@ body { & > header { text-align: center; - padding-bottom: 2rem; + color: var(--headerColor); + margin-bottom: clamp(2rem, 1.5rem + 2.5vw, 3rem); + h2 { + font-size: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem); + } } & .pg-row { @@ -155,7 +159,6 @@ body { padding-top: 1rem; padding-bottom: 1rem; font-weight: 500; - align-self: flex-end; } } } diff --git a/template/index.html b/template/index.html index 95b82db..e32c395 100644 --- a/template/index.html +++ b/template/index.html @@ -66,7 +66,7 @@

    {{newsitem.title}}

    {{newsitem.summary|markdown}}
    - More + Read More {%endfor%} From 6aaa15655e2dd61a9d10b08252a9a9ece7cc049e Mon Sep 17 00:00:00 2001 From: Kevin Rocker Date: Wed, 24 Dec 2025 23:57:22 +0100 Subject: [PATCH 15/16] Top border on first news element --- media/pgus/css/pgus.css | 5 +++++ template/pieces/footer.html | 16 ++++++++++++++++ 2 files changed, 21 insertions(+) diff --git a/media/pgus/css/pgus.css b/media/pgus/css/pgus.css index 3af73e9..6002b04 100644 --- a/media/pgus/css/pgus.css +++ b/media/pgus/css/pgus.css @@ -148,6 +148,11 @@ body { 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; 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; + } } } From 876db687fc1d31a70d038eb2d4224af92d93bfd7 Mon Sep 17 00:00:00 2001 From: Kevin Rocker Date: Thu, 25 Dec 2025 00:04:25 +0100 Subject: [PATCH 16/16] Add font-awesome --- media/pgus/css/pgus.css | 1 + 1 file changed, 1 insertion(+) diff --git a/media/pgus/css/pgus.css b/media/pgus/css/pgus.css index 6002b04..d77cb0a 100644 --- a/media/pgus/css/pgus.css +++ b/media/pgus/css/pgus.css @@ -1,3 +1,4 @@ +@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 {