From 31dc056d615095cd39555b82ac6f287610813dec Mon Sep 17 00:00:00 2001 From: Neko Ayaka Date: Fri, 17 Nov 2023 11:26:04 +0800 Subject: [PATCH] Fix varies of style issues for community page 1. Fixed overflowed line through of headings, use a better solution to achieve the same effect 2. Adjusted the font size of headings when in smaller screens, it was way too big for mobile devices and reduces readability 3. Added paddings for the Recent News section, it used to have no paddings and looks weird 4. Adjusted the navigation anchor links for sections, the button style was way too big and not harmony with the rest of the design pattern 5. Added comments for blocks 6. Make it more consistent for paddings, margins and other styles for each of the sections 7. Fixed the entangled styles with the size of view ports, make it more smoother when resizes 8. Remove hard-coded paddings and margins 9. Fixed incorrect vw unit usages, center navigation items, linted function calls 10. Added some small animation transitions for the smoother experience Signed-off-by: Neko Ayaka --- static/css/community.css | 221 ++++++++++++++++++++++++--------------- 1 file changed, 134 insertions(+), 87 deletions(-) diff --git a/static/css/community.css b/static/css/community.css index 2cec5a21dd..2ed9c36491 100644 --- a/static/css/community.css +++ b/static/css/community.css @@ -6,6 +6,7 @@ body.cid-community #banner { max-height: min(calc(2.5vw + min(24em, calc(2 * 293px))), 50vh); object-fit: cover; overflow: clip; + min-height: 240px; } body.cid-community .community-section #h2 { @@ -17,53 +18,83 @@ body.cid-community .community-section #h2 { text-transform: uppercase; } +/* ------------------------------------- + * Line through styles of Headings + ------------------------------------- */ +body.cid-community .community-section h2 { + text-align: center; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + white-space: nowrap; + margin-bottom: 2rem; +} + body.cid-community .community-section h2:before, body.cid-community .community-section h2:after { - background-color: #aaaaaa; + background-color: #aaa; content: ""; display: inline-block; height: 1px; position: relative; vertical-align: middle; - width: 35%; + width: 100%; } body.cid-community .community-section h2:before { - right: 0.5em; - margin-left: -50%; + margin-right: 0.5em; } body.cid-community .community-section h2:after { - left: 0.5em; - margin-right: -50%; -} - -body.cid-community .community-section, body.cid-community #navigation-items { - max-width: min(85vw,100em); - margin-left: auto; - margin-right: auto; + margin-left: 0.5em; } +/* ------------------------------------- + * Containers and blocks of sections + ------------------------------------- */ body.cid-community .community-section { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + align-content: space-between; + + min-height: 24em; + margin-top: 1em; margin-bottom: 1em; - padding: 0.5em 0; - justify-content: space-evenly; - align-items: baseline; - align-content: space-between; - min-height: 10em; + padding: 60px; + text-align: center; /* overridden for paragraphs */ } body.cid-community .community-section:first-child { - padding-top: max(3vh,1.5em); + padding-top: max(3vh, 1.5em); +} + +body.cid-community .community-section > * { + max-width: 1200px; +} + +/* ------------------------------------- + * Containers and blocks of sections: Navigation + ------------------------------------- */ +body.cid-community .community-section, body.cid-community #navigation-items { + margin-left: auto; + margin-right: auto; } body.cid-community #navigation-items { - padding: 0.25em; + /* + Padding on two sides = (total width - max width) / 2 + + If padding on two sides smaller then 60px, then use 60px, + otherwise uses the calculated value for padding. + */ + padding: 8px max(calc((100% - 1200px)/2), 60px); width: 100%; - max-width: initial; margin-top: 2.5em; margin-bottom: 2.5em; @@ -75,12 +106,7 @@ body.cid-community #navigation-items { display: flex; flex-direction: row; flex-wrap: wrap; -} - -/* Allow fallback if calc() fails */ -body.cid-community #navigation-items { - padding-left: calc((100vw - min(85vw,120em))/2); - padding-right: calc((100vw - min(85vw,120em))/2); + justify-content: center; } body.cid-community #navigation-items .community-nav-item { @@ -103,11 +129,18 @@ body.cid-community #navigation-items .community-nav-item { min-height: 2em; } +body.cid-community #navigation-items .community-nav-item a { + transition: color 0.2s ease; +} + body.cid-community .community-section > p:not(.community-simple) { line-height: 1.5em; text-align: initial; } +/* ------------------------------------- + * Containers and blocks of sections - Introduction + ------------------------------------- */ body.cid-community .community-section#introduction, body.cid-community .community-section#introduction > p { line-height: 1.75em; @@ -115,13 +148,19 @@ body.cid-community .community-section#introduction > p { letter-spacing: 0.04em; } +body.cid-community .community-section#introduction { + padding: 0 60px; + min-height: unset; +} + +/* ------------------------------------- + * Containers and blocks of sections - Conference gallery + ------------------------------------- */ body.cid-community #gallery { - display: flex; max-width: 100%; + display: flex; + flex-direction: row; gap: 0.75rem; - justify-content: center; - margin-left: auto; - margin-right: auto; } body.cid-community #gallery img { @@ -136,12 +175,11 @@ body.cid-community #gallery img.community-gallery-mobile { display: none; } - - - +/* ------------------------------------- + * Containers and blocks of sections - Events + ------------------------------------- */ body.cid-community .community-section#events { width: 100%; - max-width: initial; margin-bottom: 0; /* no events @@ -153,54 +191,53 @@ body.cid-community .community-section#events { display: none; } +/* ------------------------------------- + * Containers and blocks of sections - Community Values + ------------------------------------- */ body.cid-community .community-section#values { width: 100%; - max-width: initial; - background-image: url('/images/community/event-bg.jpg'); color: #fff; - padding: 2em; - margin-top: 3em; -} -body.cid-community .community-section#values { - padding-left: calc((100vw - min(75vw,120em))/2); - padding-right: calc((100vw - min(75vw,120em))/2); + background-image: url('/images/community/event-bg.jpg'); } +/* ------------------------------------- + * Containers and blocks of sections - Meetups + ------------------------------------- */ body.cid-community .community-section#meetups { width: 100%; - max-width: initial; + min-height: min(24em,50vh); margin-top: 0; - + color: #fff; background: url('/images/community/kubernetes-community-final.jpg'), url('/images/community/kubernetes-community-column.png'); background-position: 80% center, left center; background-repeat: no-repeat, repeat; background-size: auto 100%, cover; - color: #fff; - /* fallback in case calc() fails */ - padding: 5vw; - padding-bottom: 1em; - min-height: min(24em,50vh); } -body.cid-community .community-section#meetups { - padding-left: calc((100vw - min(75vw,100em))/2); - padding-right: calc((100vw - min(75vw,100em))/2); +/* ------------------------------------- + * Containers and blocks of sections - News + ------------------------------------- */ +body.cid-community .community-section#news { + padding: 12px 12px; } body.cid-community a.community-cta-button { - appearance: button; - display: inline-block; - margin: 0.75em auto 0 auto; /* gap before button */ + display: inline-flex; + justify-content: center; + align-items: center; - background-color: #0662EE; - color: white; - - border-radius: 6px; - padding: 0.75em; min-height: 3em; min-width: max(5vw, 9em); + margin: 0.75em auto 0 auto; /* gap before button */ + padding: 0.75em 1.5em; + + color: white; + background-color: #0662EE; + border-radius: 6px; text-align: center; + appearance: button; + transition: background-color 0.2s ease; } body.cid-community a.community-cta-button:hover { background-color: #2357b0; } @@ -228,32 +265,26 @@ body.cid-community .fullbutton { font-weight: bold; } +/* ------------------------------------- + * Containers and blocks of sections - Videos + ------------------------------------- */ body.cid-community #videos { width: 100%; - max-width: initial; - padding: 0.5em 5vw 5% 5vw; /* fallback in case calc() fails */ background-color: #eeeeee; - margin-top: 4em; -} - -body.cid-community #videos { - padding-left: calc((100vw - min(95vw,160em))/2); - padding-right: calc((100vw - min(95vw,160em))/2); } body.cid-community #videos .container { display: flex; - flex-wrap: wrap; - gap: max(12px,2em); - max-width: 95vw; justify-content: center; + flex-wrap: wrap; + gap: max(12px, 2em); margin-left: auto; margin-right: auto; } body.cid-community .video { - width: min(80vw,max(31%, 24em)); + width: min(80vw, max(31%, 24em)); flex-basis: 31%; flex-shrink: 1; } @@ -281,15 +312,13 @@ body.cid-community .video iframe { aspect-ratio: 16 / 9; } -body.cid-community #resources { - margin-top: 5%; - margin-bottom: 3%; -} - +/* ------------------------------------- + * Containers and blocks of sections - Discussions + ------------------------------------- */ body.cid-community #resources .container { width: 100%; display: flex; - flex-wrap: none; + flex-wrap: nowrap; gap: 2em; justify-content: center; margin-left: auto; @@ -312,6 +341,7 @@ body.cid-community #resources .container > .community-resource img { body.cid-community #resources .container > .community-resource a { text-transform: uppercase; + transition: color 0.2s ease; } body.cid-community .resourcebox { @@ -319,9 +349,6 @@ body.cid-community .resourcebox { min-height: 370px; } - - - body.cid-community .community-section.community-frame { width: 100%; } @@ -376,7 +403,8 @@ body.cid-community #cncf-code-of-conduct h2:after { body.cid-community #navigation-items { justify-content: flex-start; text-align: left; - gap: min(2px,0.125em); + gap: min(2px, 0.125em); + padding: 8px 30px; } body.cid-community #navigation-items div.community-nav-item { width: 100%; @@ -390,6 +418,8 @@ body.cid-community #cncf-code-of-conduct h2:after { } body.cid-community #resources .container { flex-wrap: wrap; + flex-direction: column; + align-items: center; } body.cid-community #resources .container .community-resource { max-width: min(80vw, 24rem); @@ -397,6 +427,25 @@ body.cid-community #cncf-code-of-conduct h2:after { body.cid-community a.community-cta-button { font-size: 1.5rem; } + body.cid-community a.community-cta-button { + padding: 0.5rem 1rem; + min-height: 2rem; + min-width: 5rem; + font-size: 1rem; + } + body.cid-community .community-section { + padding: 30px; + } + body.cid-community .community-section h2 { + /* Smaller title size when screen is small */ + font-size: 24px; + } + body.cid-community .community-section#introduction { + padding: 0 30px; + } + body.cid-community .community-section#gallery { + min-height: unset; + } } @media only screen and (max-width: 1024px) { @@ -409,14 +458,12 @@ body.cid-community #cncf-code-of-conduct h2:after { height: auto; } body.cid-community .video { - flex-basis: max(30em,80vw); + flex-basis: max(30em, 80vw); max-width: max(32em, 75vw); } body.cid-community .video .videocta { padding-bottom: 0.5em; - } - } @media only screen and (min-width: 1024px) { @@ -424,7 +471,7 @@ body.cid-community #cncf-code-of-conduct h2:after { display: none; } body.cid-community .community-section:not(:first-of-type) { - min-height: max(20em,18vh); + min-height: max(20em, 18vh); } body.cid-community .community-section#meetups p:last-of-type { margin-bottom: 6em; /* extra space for background */ @@ -436,4 +483,4 @@ body.cid-community #cncf-code-of-conduct h2:after { body.cid-community .community-section h2:after { display: none; } -} \ No newline at end of file +}