From 29e1dec8464e58d699d1aff7dfc5e62452260be1 Mon Sep 17 00:00:00 2001 From: "asel.kurmanbekk" Date: Wed, 28 Feb 2024 03:12:42 +0600 Subject: [PATCH] add responsivness --- assets/css/events.css | 104 ++++++++------ assets/css/main.css | 13 +- assets/css/navigation.css | 179 +++++++++++++++++------- assets/css/partials/action.css | 99 +++++++++----- assets/css/partials/feedback.css | 200 +++++++++++++++++---------- assets/css/partials/landing.css | 46 ++++++- assets/css/partials/sponsors.css | 85 +++++++----- assets/css/partials/subscribe.css | 171 ++++++++++++----------- assets/css/partials/team-member.css | 202 +++++++++++++++------------- assets/css/team.css | 54 ++++---- layouts/_default/.DS_Store | Bin 0 -> 6148 bytes layouts/_default/baseof.html | 34 +++-- layouts/_default/footer.html | 1 + layouts/_default/header.html | 8 +- layouts/_default/headerDesktop.html | 18 +++ layouts/_default/headerMobile.html | 15 +++ layouts/partials/action.html | 4 +- layouts/partials/head/js.html | 11 ++ layouts/partials/landing.html | 4 +- 19 files changed, 801 insertions(+), 447 deletions(-) create mode 100644 layouts/_default/.DS_Store create mode 100644 layouts/_default/headerDesktop.html create mode 100644 layouts/_default/headerMobile.html diff --git a/assets/css/events.css b/assets/css/events.css index 318e20a..4fa778b 100644 --- a/assets/css/events.css +++ b/assets/css/events.css @@ -1,65 +1,93 @@ .eventsMainTitle { - text-align: center; - font-family: 'Amazon Ember'; - font-weight: 900; - font-size: var(--font-size-h3); - color: var(--color-primary-gray); + text-align: center; + font-family: 'Amazon Ember'; + font-weight: 900; + font-size: var(--font-size-h3); + color: var(--color-primary-gray); } #eventsGrid { - display: grid; - grid-template-columns: repeat(2, 1fr); - align-items: start; - justify-items: center; - list-style-type: none; - padding: 0 100px; - margin: 0; - gap: 10px; + display: grid; + grid-template-columns: repeat(2, 1fr); + align-items: start; + justify-items: center; + list-style-type: none; + padding: 0 100px; + margin: 0; + gap: 10px; } .eventObject { - display: flex; - flex-direction: column; - align-items: flex-start; - margin-top: 50px; + display: flex; + flex-direction: column; + align-items: flex-start; + margin-top: 50px; } -.eventTitle{ - font-family: "Amazon Ember"; - font-size: var(--font-size-name); - color: var(--color-primary-white); - justify-self: center; - align-self: center; - margin-bottom: 5px; +.eventTitle { + font-family: 'Amazon Ember'; + font-size: var(--font-size-name); + color: var(--color-primary-white); + justify-self: center; + align-self: center; + margin-bottom: 5px; } .eventBanner { - height: 500px; - width: 500px; - margin-top: 0px; - object-fit: contain; - border: 2px solid var(--color-primary-gray); - border-radius: 10px; + height: 500px; + width: 500px; + margin-top: 0px; + object-fit: contain; + border: 2px solid var(--color-primary-gray); + border-radius: 10px; } .eventInfo { - display: flex; - align-items: center; + display: flex; + align-items: center; } .eventInfoIcon { - margin-top: 10px; + margin-top: 10px; } .eventInfoText { - font-family: "Amazon Ember Display"; - font-size: var(--font-size-details); - margin-top: 10px; - margin-left: 10px; + font-family: 'Amazon Ember Display'; + font-size: var(--font-size-details); + margin-top: 10px; + margin-left: 10px; } a { - color: var(--color-primary-gray); + color: var(--color-primary-gray); } +@media (max-width: 879px) { + .eventsMainTitle { + margin: 0; + } + #eventsGrid { + grid-template-columns: repeat(1, 1fr); + padding: 0 10px 20px 10px; + } + + .eventObject { + margin-top: 20px; + } + + .eventBanner { + height: 300px; + width: 300px; + } +} + +@media (min-width: 880px) and (max-width: 1102px) { + #eventsGrid { + padding: 0 10px 20px 10px; + } + .eventBanner { + height: 400px; + width: 400px; + } +} diff --git a/assets/css/main.css b/assets/css/main.css index 59c6396..3809cd4 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -44,7 +44,8 @@ a { text-decoration: none; } -html,body { +html, +body { width: 100%; overflow-x: hidden; /* Prevents horizontal scroll */ } @@ -70,6 +71,10 @@ html,body { } @media (max-width: 769px) { + main { + margin: 50px 0px 0 0; + } + :root { --font-size-h1: 32px; --font-size-h2: 20px; @@ -88,4 +93,10 @@ html,body { --font-size-quote: 10px; --font-size-code: 8px; } + + html, + body { + width: 100%; + overflow-x: visible; + } } diff --git a/assets/css/navigation.css b/assets/css/navigation.css index 51f1e49..4e172f0 100644 --- a/assets/css/navigation.css +++ b/assets/css/navigation.css @@ -44,7 +44,7 @@ header img { } .nav-item { - font-family: "Amazon Ember"; + font-family: 'Amazon Ember'; font-weight: 600; font-size: var(--font-size-navbar); letter-spacing: 2px; @@ -62,13 +62,20 @@ header img { color: var(--color-primary-white); } -.active a{ - color: var(--color-primary-yellow) +.active a { + color: var(--color-primary-yellow); } .spacer { flex: 1; } + +.mobile, +.mobile-menu { + visibility: hidden; + display: none; +} + /* #endregion */ /* #region FOOTER DEFINITIONS */ @@ -76,7 +83,7 @@ header img { background-color: var(--color-primary-black); color: var(--color-primary-white); padding: 5% 10%; /* vertical horizontal */ - font-family: "Amazon Ember", sans-serif; + font-family: 'Amazon Ember', sans-serif; font-size: var(--font-size-footer); position: relative; display: flex; @@ -84,12 +91,12 @@ header img { } .footer-line { - width: 60%; /* Full width of the footer */ - height: 1px; /* Thin line */ - background-color: var(--color-primary-gray); - position: absolute; - top: 10%; /* Center vertically */ - transform: translateY(-50%); + width: 60%; /* Full width of the footer */ + height: 1px; /* Thin line */ + background-color: var(--color-primary-gray); + position: absolute; + top: 10%; /* Center vertically */ + transform: translateY(-50%); } .footer-column { @@ -119,8 +126,8 @@ header img { } .footer-right img { - width: 99px; - height: auto; + width: 99px; + height: auto; } .footer-right p { @@ -130,48 +137,123 @@ header img { } .footer-social-items { - display: flex; - justify-content: space-around; - width: 40%; + display: flex; + justify-content: space-around; + width: 40%; } .footer-social-item { - display: flex; - position: relative; - align-items: center; - justify-content: center; - width: 32px; - height: 32px; - border: white solid 1px; - border-radius: 100%; + display: flex; + position: relative; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + border: white solid 1px; + border-radius: 100%; } .footer-social-item img { - width: 20px; - height: 20px; - + width: 20px; + height: 20px; } .footer-bg-image { position: absolute; right: 0; bottom: 0; - width: 320px; + width: 320px; } - /* #endregion */ @media (max-width: 600px) { + .mobile { + padding: 10px; + visibility: visible; + display: flex; + flex-direction: column; + justify-content: space-between; + position: relative; + } + + .mobile-navigation { + display: flex; + flex-direction: row; + justify-content: space-between; + text-align: center; + width: 100%; + } + + header { + padding: 0; + background-color: var(--color-primary-black); + height: unset; + } + + .mobile-menu { + display: none; + } + + .mobile-menu.active { + color: white; + border-top: 1px solid var(--color-primary-purple); + border-bottom: 1px solid var(--color-primary-purple); + visibility: visible; + display: flex; + flex-direction: row; + width: 100%; + } + + .mobile-nav-list { + list-style-type: none; + margin: 0; + padding: 15px 0; + display: flex; + justify-content: space-around; + width: 100%; + } + + .mobile-nav-item { + font-family: 'Amazon Ember'; + font-weight: 600; + font-size: var(--font-size-navbar); + letter-spacing: 2px; + text-transform: uppercase; + color: var(--color-primary-white); + text-align: center; + } + + .menu-toggle { + cursor: pointer; + color: var(--color-primary-white); + background: none; + border: none; + font-size: 16px; + padding: 10px; + } + + .desktop { + visibility: hidden; + display: none; + } /* header */ - - .logo{ + + .logo { margin-left: 5px; - width: 180px; + width: 80px; + height: auto; + flex: none; + } + + header img { + margin-left: 2%; + width: 60px; height: auto; } -.nav-item a{ - font-size: 14px; -} + + .nav-item a { + font-size: 14px; + } /* footer */ .footer { @@ -179,9 +261,7 @@ header img { flex-direction: column; align-items: center; text-align: center; - width: 100%; padding: 10% 5%; /* Increased vertical padding and reduced horizontal padding */ - margin-bottom: 20px; } .footer-line { @@ -190,20 +270,23 @@ header img { } .footer-column { - margin-bottom: 20px; /* Increased spacing between columns */ + margin-bottom: 10px; /* Increased spacing between columns */ align-items: center; /* Center-align items for a cleaner look */ width: 100%; /* Full width for each column */ } .footer-column h3 { margin-bottom: 5px; /* Reduced margin for header */ - text-decoration: underline; - font-family: 'Courier New', Courier, monospace; + text-decoration: underline; + /* font-family: 'Courier New', Courier, monospace; */ + font-weight: 800; + font-size: 12px; } .footer-column a { - margin-bottom: 5%; /* Reduced space between links */ - font-size: 13px; + margin-bottom: 2%; /* Reduced space between links */ + font-size: 12px; + font-weight: 400; } .footer-right { @@ -213,17 +296,17 @@ header img { } .footer-right img { - width: 150px; /* Reduced logo size */ + width: 50px; /* Reduced logo size */ } .footer-right p { padding: 3px; - margin-bottom: 8px ; /* Reduced margin for paragraphs */ + margin-bottom: 8px; /* Reduced margin for paragraphs */ font-size: 12px; } .footer-social-items { - width: 60%; /* Adjusted width for social icons */ + width: 100%; /* Adjusted width for social icons */ margin-top: 10px; /* Additional spacing above social icons */ } @@ -238,14 +321,10 @@ header img { } .footer-bg-image { - width: auto; - margin-top: 15px; /* Hide background image on mobile for cleaner look */ + display: none; /* Hide background image on mobile for cleaner look */ } } - - - /* tablest */ @media (min-width: 601px) and (max-width: 1024px) { @@ -283,7 +362,7 @@ header img { } .footer-right img { - width: 180px; /* Adjust logo size */ + width: 55px; /* Adjust logo size */ } .footer-right p { diff --git a/assets/css/partials/action.css b/assets/css/partials/action.css index 43e92b3..07f3ff5 100644 --- a/assets/css/partials/action.css +++ b/assets/css/partials/action.css @@ -1,44 +1,73 @@ .actions-section { - padding-bottom: 2%; - } - - .action-slogan { - font-family: "Bookerly LCD"; - font-weight: 300; - font-size: var(--font-size-h4); - color: var(--color-primary-white); - text-align: center; - } - + padding-bottom: 2%; +} + +.action-slogan { + font-family: 'Bookerly LCD'; + font-weight: 300; + font-size: var(--font-size-h4); + color: var(--color-primary-white); + text-align: center; +} + +.action-items { + position: relative; + display: flex; + align-items: center; + justify-content: space-around; +} + +.action-item { + position: relative; + display: flex; + width: 40%; +} + +.action-item img { + max-width: 100%; + height: auto; +} + +.action-item h4 { + font-size: var(--font-size-h4); + font-family: 'Amazon Ember'; + color: var(--color-primary-white); + position: relative; + top: -50%; + text-align: center; + margin: 0; + /* width: 100%; */ +} + +.host h4 { + margin-right: 65px; +} + +.speech h4 { + margin-left: 65px; +} + +.action-item h4:hover { + color: var(--color-primary-gray); +} + +@media (max-width: 600px) { .action-items { - position: relative; display: flex; + width: 100%; + flex-direction: column; + z-index: 2; + justify-content: center; align-items: center; - justify-content: space-around; } - + .action-item { - position: relative; - display: flex; - width: 40%; - } - - .action-item img { - max-width: 100%; - height: auto; + width: 80%; } - - .action-item h4 { - font-size: var(--font-size-h4); - font-family: "Amazon Ember"; - color: var(--color-primary-white); - position: relative; - top: -50%; - text-align: center; - margin: 0; +} + +@media (min-width: 601px) and (max-width: 1224px) { + .action-item { width: 100%; } - - .action-item h4:hover { - color: var(--color-primary-gray); - } \ No newline at end of file +} diff --git a/assets/css/partials/feedback.css b/assets/css/partials/feedback.css index b5a19d5..51a8962 100644 --- a/assets/css/partials/feedback.css +++ b/assets/css/partials/feedback.css @@ -1,85 +1,145 @@ .feedback-section { - position: relative; - display: flex; - align-items: center; - justify-content: space-around; - height: 60vh; - background: linear-gradient( - 115deg, - var(--color-secondary-darknavy) 0%, - var(--color-secondary-darknavy) 50%, - var(--color-secondary-purple) 51%, - var(--color-secondary-purple) 51%, - #2b245a 52%, - #2b245a 71%, - var(--color-secondary-blackpurple) 72%, - var(--color-secondary-blackpurple) 91%, - var(--color-secondary-darkpurple) 92% - ); - border-bottom: 1px solid var(--color-primary-purple); + position: relative; + display: flex; + align-items: center; + justify-content: space-around; + height: 60vh; + background: linear-gradient( + 115deg, + var(--color-secondary-darknavy) 0%, + var(--color-secondary-darknavy) 50%, + var(--color-secondary-purple) 51%, + var(--color-secondary-purple) 51%, + #2b245a 52%, + #2b245a 71%, + var(--color-secondary-blackpurple) 72%, + var(--color-secondary-blackpurple) 91%, + var(--color-secondary-darkpurple) 92% + ); + border-bottom: 1px solid var(--color-primary-purple); +} + +.feedback-left { + position: relative; + display: flex; + justify-content: center; + align-items: center; + width: 50%; +} + +.feedback-right { + position: relative; + display: flex; + align-items: center; + text-align: left; + width: 40%; +} + +.feedback-title { + font-size: var(--font-size-h3); + font-family: 'Amazon Ember'; + font-weight: bold; + color: var(--color-primary-white); + text-align: left; +} + +.feedback-text { + font-size: var(--font-size-quote); + font-family: 'Bookerly LCD'; + color: var(--color-primary-white); + font-weight: 300; + line-height: 155%; +} + +.feedback-button { + display: inline-flex; + align-items: center; + justify-content: center; + background: none; + border: none; + cursor: pointer; +} + +.feedback-button img { + max-width: 200px; +} + +.feedback-button-text { + position: absolute; + font-size: var(--font-size-blog); + font-weight: bold; + color: var(--color-primary-white); + font-family: 'Amazon Ember'; +} + +.feedback-item { + display: flex; + justify-content: center; + align-items: center; + background-color: var(--color-primary-white); + border: 2px solid var(--color-primary-gray); + border-radius: 10px; +} +.feedback-item img { + border-radius: 10px; +} + +@media (max-width: 768px) { + .feedback-section { + flex-direction: column; + height: unset; + height: fit-content; + padding: 20px 0; } - - .feedback-left { - position: relative; - display: flex; - justify-content: center; - align-items: center; - width: 50%; + + .feedback-left, + .feedback-right { + width: 100%; + } + + .feedback-item { + width: 90%; + } + + .feedback-item img { + width: 100%; } - + .feedback-right { - position: relative; display: flex; + flex-direction: column; align-items: center; - text-align: left; - width: 40%; + text-align: center; + width: 60%; } - + .feedback-title { - font-size: var(--font-size-h3); - font-family: "Amazon Ember"; - font-weight: bold; - color: var(--color-primary-white); - text-align: left; + text-align: center; } - - .feedback-text { - font-size: var(--font-size-quote); - font-family: "Bookerly LCD"; - color: var(--color-primary-white); - font-weight: 300; - line-height: 155%; - } - - .feedback-button { - display: inline-flex; - align-items: center; - justify-content: center; - background: none; - border: none; - cursor: pointer; - } - + .feedback-button img { - max-width: 200px; + max-width: 150px; } - - .feedback-button-text { - position: absolute; - font-size: var(--font-size-blog); - font-weight: bold; - color: var(--color-primary-white); - font-family: "Amazon Ember"; +} + +@media (min-width: 769px) and (max-width: 1102px) { + .feedback-section { + height: unset; + padding: 30px 0; } - + .feedback-item { - display: flex; - justify-content: center; - align-items: center; - background-color: var(--color-primary-white); - border: 2px solid var(--color-primary-gray); - border-radius: 10px; + width: 100%; } + .feedback-item img { - border-radius: 10px; - } \ No newline at end of file + width: 100%; + } + .action-item { + width: 100%; + } + + .feedback-button img { + max-width: 150px; + } +} diff --git a/assets/css/partials/landing.css b/assets/css/partials/landing.css index 981f1ca..9001b16 100644 --- a/assets/css/partials/landing.css +++ b/assets/css/partials/landing.css @@ -13,19 +13,19 @@ #landing-slogan { font-size: var(--font-size-h1); - font-family: "Amazon Ember"; + font-family: 'Amazon Ember'; font-weight: bold; padding: 0%; } #landing-sub-slogan { font-size: var(--font-size-h2); - font-family: "Amazon Ember"; + font-family: 'Amazon Ember'; } #landing-text { font-size: var(--font-size-quote); - font-family: "Bookerly LCD"; + font-family: 'Bookerly LCD'; font-weight: 300; line-height: 155%; } @@ -41,3 +41,43 @@ z-index: -1; clip-path: polygon(0 100%, 30% 0, 100% 0, 100% 100%); } + +@media (max-width: 600px) { + .landing-section { + margin-top: -50px; + max-height: 360px; + } + + .landing-left { + width: 100%; + padding-top: 3%; + margin-left: 0; + padding-left: 10px; + background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), + url('https://aws3.city/images/3city.jpeg'); + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + flex-direction: column; + } + + .landing-right { + display: none; + } + + #landing-slogan { + font-size: var(--font-size-h2); + font-family: 'Amazon Ember'; + font-weight: bold; + padding: 0%; + } + + #landing-sub-slogan { + font-size: var(--font-size-h3); + font-family: 'Amazon Ember'; + } +} + +@media (min-width: 601px) and (max-width: 1024px) { +} diff --git a/assets/css/partials/sponsors.css b/assets/css/partials/sponsors.css index a027013..dffd4ae 100644 --- a/assets/css/partials/sponsors.css +++ b/assets/css/partials/sponsors.css @@ -1,39 +1,62 @@ .sponsors-section { - min-height: 300px; + min-height: 300px; + border-top: 3px solid var(--color-secondary-blackpurple); + border-bottom: 3px solid var(--color-secondary-blackpurple); + background-color: var(--color-primary-white); + padding: 20px 0px; +} + +.sponsors-slogan { + font-family: 'Bookerly LCD'; + font-weight: 300; + font-size: var(--font-size-h4); + color: var(--color-primary-black); + text-align: center; +} + +.sponsor-items { + position: relative; + display: flex; + align-items: center; + justify-content: space-around; +} + +.sponsor-item { + display: flex; + justify-content: space-around; + align-items: center; + background-color: var(--color-primary-white); + width: 150px; + height: 150px; + border: 2px solid var(--color-primary-gray); + border-radius: 10px; + box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15); + margin-left: 4%; +} +.sponsor-item img { + max-width: 90%; + padding: 5%; +} + +@media (max-width: 600px) { + .sponsors-section { + min-height: 200px; border-top: 3px solid var(--color-secondary-blackpurple); border-bottom: 3px solid var(--color-secondary-blackpurple); background-color: var(--color-primary-white); - padding: 20px 0px; + padding: 20px 0 0 0; } - - .sponsors-slogan { - font-family: "Bookerly LCD"; - font-weight: 300; - font-size: var(--font-size-h4); - color: var(--color-primary-black); - text-align: center; - } - - .sponsor-items { - position: relative; - display: flex; - align-items: center; - justify-content: space-around; + + .sponsor-item { + width: 90px; + height: 90px; + margin-left: 0; } - +} + +@media (min-width: 601px) and (max-width: 768px) { .sponsor-item { - display: flex; - justify-content: space-around; - align-items: center; - background-color: var(--color-primary-white); - width: 150px; - height: 150px; - border: 2px solid var(--color-primary-gray); - border-radius: 10px; - box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15); - margin-left: 4%; + width: 110px; + height: 110px; } - .sponsor-item img { - max-width: 90%; - padding: 5%; - } \ No newline at end of file +} diff --git a/assets/css/partials/subscribe.css b/assets/css/partials/subscribe.css index 27a4a84..3059155 100644 --- a/assets/css/partials/subscribe.css +++ b/assets/css/partials/subscribe.css @@ -1,83 +1,92 @@ .subscribe-section { - min-height: 300px; - border-top: 3px solid var(--color-secondary-blackpurple); - border-bottom: 3px solid var(--color-secondary-blackpurple); - background-color: var(--color-primary-white); - padding: 20px 0px; + min-height: 300px; + border-top: 3px solid var(--color-secondary-blackpurple); + border-bottom: 3px solid var(--color-secondary-blackpurple); + background-color: var(--color-primary-white); + padding: 20px 0px; +} + +.subscribe-slogan { + font-family: 'Bookerly LCD'; + font-weight: 300; + font-size: var(--font-size-h4); + color: var(--color-primary-black); + text-align: center; +} + +.subscribe-items { + position: relative; + display: flex; + align-items: center; + justify-content: space-around; +} + +.subscribe-left { + padding-left: 5%; + width: 50%; +} + +.subscribe-text { + font-family: 'Bookerly LCD'; + font-weight: 300; + font-size: var(--font-size-body); + color: var(--color-primary-black); + text-align: justify; +} + +.subscribe-right { + margin: 0% 10%; + width: 50%; +} + +.subscribe-form { + display: flex; + justify-content: space-around; + align-items: center; +} + +.subscribe-form-input { + background-color: transparent; + border: 2px solid #5a3472; + border-radius: 25px; + color: #5a3472; + font-size: 16px; + padding: 10px 15px; + width: 175px; + height: 30px; + outline: none; + text-align: center; + font-family: 'Amazon Ember'; + font-weight: bold; +} + +.subscribe-form-button { + display: inline-flex; + align-items: center; + justify-content: center; + background: none; + border: none; + cursor: pointer; +} + +.subscribe-form-button img { + width: auto; + height: 60px; +} + +.subscribe-form-button-text { + position: absolute; + font-size: var(--font-size-blog); + font-weight: bold; + color: var(--color-secondary-darkpurple); + font-family: 'Amazon Ember'; +} + +@media (max-width: 768px) { + .subscribe-section { + min-height: unset; } - - .subscribe-slogan { - font-family: "Bookerly LCD"; - font-weight: 300; - font-size: var(--font-size-h4); - color: var(--color-primary-black); - text-align: center; - } - - .subscribe-items { - position: relative; - display: flex; - align-items: center; - justify-content: space-around; - } - - .subscribe-left { - padding-left: 5%; - width: 50%; - } - - .subscribe-text { - font-family: "Bookerly LCD"; - font-weight: 300; - font-size: var(--font-size-body); - color: var(--color-primary-black); - text-align: justify; - } - - .subscribe-right { - margin: 0% 10%; - width: 50%; - } - - .subscribe-form { - display: flex; - justify-content: space-around; - align-items: center; - } - - .subscribe-form-input { - background-color: transparent; - border: 2px solid #5a3472; - border-radius: 25px; - color: #5a3472; - font-size: 16px; - padding: 10px 15px; - width: 175px; - height: 30px; - outline: none; - text-align: center; - font-family: "Amazon Ember"; - font-weight: bold; - } - - .subscribe-form-button { - display: inline-flex; - align-items: center; - justify-content: center; - background: none; - border: none; - cursor: pointer; - } - - .subscribe-form-button img { - width: auto; - height: 60px; - } - - .subscribe-form-button-text { - position: absolute; - font-size: var(--font-size-blog); - font-weight: bold; - color: var(--color-secondary-darkpurple); - font-family: "Amazon Ember"; - } \ No newline at end of file +} + +@media (min-width: 769px) and (max-width: 1024px) { +} diff --git a/assets/css/partials/team-member.css b/assets/css/partials/team-member.css index ba8f521..56ace59 100644 --- a/assets/css/partials/team-member.css +++ b/assets/css/partials/team-member.css @@ -1,103 +1,115 @@ - .team-member { - display: flex; - flex-direction: column; - align-items: center; - justify-items: flex-start; - } - - .member-photo { - z-index: 1; - margin-bottom: calc(var(--circle-size) / 1.75 - var(--circle-size)); - height: var(--circle-size); - width: var(--circle-size); - border: 1px solid var(--color-primary-purple); - border-radius: 100%; - background: var(--color-secondary-darknavy); - display: flex; - align-items: center; - justify-content: center; - } - - .member-photo img { - height: calc(var(--circle-size) - 5%); - width: calc(var(--circle-size) - 5%); - border-radius: 100%; - opacity: 100%; - } - + display: flex; + flex-direction: column; + align-items: center; + justify-items: flex-start; +} + +.member-photo { + z-index: 1; + margin-bottom: calc(var(--circle-size) / 1.75 - var(--circle-size)); + height: var(--circle-size); + width: var(--circle-size); + border: 1px solid var(--color-primary-purple); + border-radius: 100%; + background: var(--color-secondary-darknavy); + display: flex; + align-items: center; + justify-content: center; +} + +.member-photo img { + height: calc(var(--circle-size) - 5%); + width: calc(var(--circle-size) - 5%); + border-radius: 100%; + opacity: 100%; +} + +.member-info-box { + height: 400px; + width: var(--box-width); + border: 1px solid var(--color-primary-purple); + border-radius: 5%; + padding-top: calc(var(--circle-size) * 0.4); + text-align: center; +} + +.member-badge { + line-height: 20%; +} + +.member-name { + font-family: 'Amazon Ember'; + font-weight: bold; + font-style: normal; + text-transform: uppercase; + font-size: var(--font-size-name); + letter-spacing: 1%; +} + +.member-title { + font-family: 'Amazon Ember Duospace'; + font-weight: bold; + font-style: normal; + text-transform: capitalize; + font-size: var(--font-size-title); + letter-spacing: 1%; +} + +.member-details { + padding-top: 2%; + font-family: 'Amazon Ember Duospace'; + font-weight: normal; + font-style: normal; + text-align: left; + font-size: var(--font-size-details); + color: var(--color-primary-gray); + padding-left: calc(var(--circle-size) * 0.25); +} + +.member-buttons { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + height: calc(var(--box-width) * 0.5); + width: var(--box-width); + margin-top: 10%; + border-top: 1px solid var(--color-primary-purple); +} + +.member-button { + display: inline-flex; + align-items: center; + justify-content: center; + background: none; + border: none; + cursor: pointer; +} + +.member-button img { + max-width: 150px; +} + +.member-button-text { + position: absolute; + margin-bottom: 2px; + font-size: var(--font-size-blog); + font-weight: normal; + color: var(--color-primary-white); + font-family: 'Amazon Ember'; +} + +@media (max-width: 768px) { .member-info-box { - height: 400px; + height: unset; width: var(--box-width); border: 1px solid var(--color-primary-purple); border-radius: 5%; padding-top: calc(var(--circle-size) * 0.4); text-align: center; } - - .member-badge { - line-height: 20%; - } - - .member-name { - font-family: "Amazon Ember"; - font-weight: bold; - font-style: normal; - text-transform: uppercase; - font-size: var(--font-size-name); - letter-spacing: 1%; - } - - .member-title { - font-family: "Amazon Ember Duospace"; - font-weight: bold; - font-style: normal; - text-transform: capitalize; - font-size: var(--font-size-title); - letter-spacing: 1%; - } - - .member-details { - padding-top: 2%; - font-family: "Amazon Ember Duospace"; - font-weight: normal; - font-style: normal; - text-align: left; - font-size: var(--font-size-details); - color: var(--color-primary-gray); - padding-left: calc(var(--circle-size) * 0.25); - } - - .member-buttons { - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-around; - height: calc(var(--box-width)* 0.5); - width: var(--box-width); - margin-top: 10%; - border-top: 1px solid var(--color-primary-purple); - } - - .member-button { - display: inline-flex; - align-items: center; - justify-content: center; - background: none; - border: none; - cursor: pointer; - } - - .member-button img { - max-width: 150px; - } - - .member-button-text { - position: absolute; - margin-bottom: 2px; - font-size: var(--font-size-blog); - font-weight: normal; - color: var(--color-primary-white); - font-family: "Amazon Ember"; - } - \ No newline at end of file +} + +@media (min-width: 769px) and (max-width: 1102px) { +} diff --git a/assets/css/team.css b/assets/css/team.css index 6b26832..3f1af5a 100644 --- a/assets/css/team.css +++ b/assets/css/team.css @@ -4,44 +4,44 @@ } .team-title { - font-size: var(--font-size-h3); - font-family: "Amazon Ember"; - font-weight: bold; + font-size: var(--font-size-h3); + font-family: 'Amazon Ember'; + font-weight: bold; text-align: center; - margin: 0; - margin-top: 2%;} + margin: 0; + margin-top: 2%; +} .team-section { - padding: 0 10%; + padding: 0 10%; } .team-members { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); - grid-gap: calc(var(--box-width)); - padding: 3% 0%; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); + grid-gap: calc(var(--box-width)); + padding: 3% 0%; } @media screen and (max-width: 768px) { - .team-members { - grid-template-columns: repeat(2, 1fr); /* 2 columns for smaller screens */ - gap: 2vw; /* Adjust gap if needed */ - padding: 5% 0; - } - - .team-title { - font-size: 16px; - margin-top: 5%; - } - + .team-members { + grid-template-columns: repeat(1, 1fr); /* 2 columns for smaller screens */ + gap: 2vw; /* Adjust gap if needed */ + padding: 5% 0; + } + + .team-title { + font-size: 16px; + margin-top: 5%; + } } @media screen and (min-width: 768px) and (max-width: 1024px) { - .team-members { - grid-template-columns: repeat(3, 1fr); - } + .team-members { + grid-template-columns: repeat(3, 1fr); + } - .team-title { - font-size: 18px; - } + .team-title { + font-size: 18px; + } } diff --git a/layouts/_default/.DS_Store b/layouts/_default/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..a6083f475830c0d6a016598bb895cc1486683203 GIT binary patch literal 6148 zcmeHKOHRWu5PcIW(W;xmiVc!aP>CCasw`Nr;sOx*0TBqIu+N@5a0SlC3f|ZzB2L>K z2%#Bi{A_2QCw{i#7=TQkXGg#YK%cId4Opx(eXicIEcWaY#g9>8fibS}gu70(b^JvI zbnS*HaETS>_`ZJSX<1zrWmPajx5qJk{Nar?Wi1$AajoZgY*syGy(O#xcgLLBW}6st zm@tM7V@n=+Nm%Bj;@$TtONQ_2Md1%AokepjdlH5 zRE~?7N2~+#2~7f(7^o7j7!v60cQG!HSO*MrNW6SV%q;PSB0f9EcRn1F2ei@@Fa_EQ z?1bh>&;OIn_y0D@TBd+0@UIk*-t>Gr;gsUp+L@f5wT^y4SJSvUU_)WWAH|H-qxgXC Zjr~q5#5`ghkUcc}5%4ltVG8`J0-v1Wbou}Q literal 0 HcmV?d00001 diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index fda1431..06662f3 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -2,16 +2,32 @@ - - {{ if eq .Site.BaseURL "https://rolling-scopes.github.io/awsug-3city/" }} - - {{ else }} - - {{ end }} - {{ template "_default/head.html" . }} - + + {{ if eq .Site.BaseURL "https://rolling-scopes.github.io/awsug-3city/" }} + + {{ else }} + + {{ end }} {{ template "_default/head.html" . }} + -
{{ template "_default/header.html" . }}
+ {{ $page := . }} + +
+ {{ template "_default/headerDesktop.html" . }} + {{ template "_default/headerMobile.html" . }} +
+
+ +
{{ block "main" . }}{{ end }}
{{ template "_default/footer.html" . }}
diff --git a/layouts/_default/footer.html b/layouts/_default/footer.html index c15bc35..55cdd44 100644 --- a/layouts/_default/footer.html +++ b/layouts/_default/footer.html @@ -36,6 +36,7 @@

BLOG

Create +

diff --git a/layouts/_default/header.html b/layouts/_default/header.html index 8f69112..e2585bb 100644 --- a/layouts/_default/header.html +++ b/layouts/_default/header.html @@ -1,9 +1,9 @@ -

+ - {{ $page := . }} + diff --git a/layouts/_default/headerDesktop.html b/layouts/_default/headerDesktop.html new file mode 100644 index 0000000..cb3beef --- /dev/null +++ b/layouts/_default/headerDesktop.html @@ -0,0 +1,18 @@ +
+ + + {{ $page := . }} + +
+
diff --git a/layouts/_default/headerMobile.html b/layouts/_default/headerMobile.html new file mode 100644 index 0000000..905aee0 --- /dev/null +++ b/layouts/_default/headerMobile.html @@ -0,0 +1,15 @@ + +
+
+ + + {{ $page := . }} + +
+
diff --git a/layouts/partials/action.html b/layouts/partials/action.html index 3df0576..1163a89 100644 --- a/layouts/partials/action.html +++ b/layouts/partials/action.html @@ -7,13 +7,13 @@

Want to contribute to our community?

-
+
Present a Topic action button

Present a Topic
-
+
Host an Event action button

Host an Event

diff --git a/layouts/partials/head/js.html b/layouts/partials/head/js.html index 18fe842..415e48d 100644 --- a/layouts/partials/head/js.html +++ b/layouts/partials/head/js.html @@ -10,3 +10,14 @@ {{- end }} {{- end }} {{- end }} + + diff --git a/layouts/partials/landing.html b/layouts/partials/landing.html index c526ce5..f5c7942 100644 --- a/layouts/partials/landing.html +++ b/layouts/partials/landing.html @@ -2,6 +2,8 @@ {{ $css := resources.Get "css/partials/landing.css" }} + +

{{ .landingSlogan }}

@@ -11,4 +13,4 @@

{{ .landingSubSlogan }}

AWS User Group Photo
-
f \ No newline at end of file +
\ No newline at end of file