diff --git a/_data/announcement.yml b/_data/announcement.yml index 0b94964c..f062b5e4 100644 --- a/_data/announcement.yml +++ b/_data/announcement.yml @@ -3,7 +3,7 @@ date: 01.05.2024 image: path: "/assets/images/announcements/stock-unsplash-computer-typing.jpg" - alt: Image decorative + alt: hands typing on a laptop keyboard link: path: /mentors title: Join now @@ -13,4 +13,4 @@ date: 30.04.2024 image: path: "/assets/images/announcements/stock-copilot-designer_celebrate.jpg" - alt: Image decorative \ No newline at end of file + alt: confetti illustration \ No newline at end of file diff --git a/_includes/banner.html b/_includes/banner.html deleted file mode 100644 index da3904c6..00000000 --- a/_includes/banner.html +++ /dev/null @@ -1,9 +0,0 @@ - \ No newline at end of file diff --git a/_includes/footer.html b/_includes/footer.html index 063553f1..f40cdaaa 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1,4 +1,4 @@ -
+
+ diff --git a/_includes/hero.html b/_includes/hero.html new file mode 100644 index 00000000..d014107e --- /dev/null +++ b/_includes/hero.html @@ -0,0 +1,12 @@ +
+
+
+

Women Coding Community

+
+

Empowering Women in Their Tech Careers

+
+
+
+
+
+
diff --git a/_includes/icons/twitter.svg b/_includes/icons/twitter.svg index d000f93b..69cf5fec 100644 --- a/_includes/icons/twitter.svg +++ b/_includes/icons/twitter.svg @@ -1,3 +1 @@ - - - \ No newline at end of file + \ No newline at end of file diff --git a/_includes/page-header.html b/_includes/page-header.html new file mode 100644 index 00000000..e4353e69 --- /dev/null +++ b/_includes/page-header.html @@ -0,0 +1,3 @@ +
+

{{ page.title }}

+
diff --git a/_layouts/default.html b/_layouts/default.html index 0baac8dd..c654a2db 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -3,8 +3,11 @@ {% seo %} {% include head.html %} + {% include navbar.html %} - {{ content}} +
+ {{ content}} +
{% include footer.html %} diff --git a/_sass/custom/_card-home.scss b/_sass/custom/_card-home.scss new file mode 100644 index 00000000..3f1487a0 --- /dev/null +++ b/_sass/custom/_card-home.scss @@ -0,0 +1,266 @@ +// TEMPORARY: To be refactored to not only apply to homepage + +.home { + .card { + padding: 0; + height: 100%; + border: 1px solid $border-color; + + .btn { + max-width: fit-content; + } + } + + .card, + .card-deck > .card:first-child, + .card-deck > .card:last-child { + border-radius: $border-radius; + } + + .card-deck { + > * { + height: 100%; + } + } + + .card-date { + color: $text-secondary; + font-size: $font-label-m; + } + + .card-s { + .card-title { + font-size: 1.3rem; + margin-bottom: 0.25rem; + } + + .card-subtitle { + font-weight: 400; + margin-top: 0; + margin-bottom: 0.6rem; + font-size: 1.1rem; + } + + p { + font-size: $font-body-m; + } + + .card-img-top { + border-radius: 100%; + } + + .card-body { + padding: map-get($spacers, 3); + display: flex; + height: 100%; + flex-direction: column; + } + } + + .card-m { + .card-body { + display: flex; + flex-direction: column; + align-items: center; + padding: 2rem 2rem 3rem 2rem; + } + + .card-title { + @include font-headline-l; + text-align: center; + } + + p { + @include font-body; + text-align: center; + } + } + + .card-l { + .card-title { + font-size: $font-display-s; + } + + .card-body { + justify-content: center; + padding: map-get($spacers, 5); + } + + p { + @include font-body; + text-align: left; + } + } + + .card-horizontal { + display: flex; + flex-direction: row; + border-radius: $border-radius; + + .card-title { + text-align: left; + } + + .card-body { + display: flex; + flex-direction: column; + text-align: left; + flex: none; + } + + .card-media { + flex: none; + padding-left: 0; + + img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 0 $border-radius $border-radius 0; + } + } + } + + @include media-breakpoint-up(sm) { + .card-deck { + .card-horizontal { + flex-direction: row; + } + } + + .card-horizontal { + .card-media { + img { + max-height: 100%; + } + } + } + } + + .announcements { + .card-deck { + margin-right: auto; + margin-left: auto; + flex-direction: column; + } + + .card-horizontal { + border: none; + background: transparent; + margin: 0 1rem; + &:not(:only-child) { + margin-bottom: map-get($spacers, 5); + } + + p { + font-size: $font-body-m; + } + + .card-media { + img { + border-radius: 0; + } + } + } + + .card-body { + padding: 0 map-get($spacers, 3); + } + + .card-title { + margin: map-get($spacers, 1) 0 map-get($spacers, 3) 0; + } + } + + .mission { + .card-horizontal { + .card-media { + img { + border-radius: 0; + } + } + .card-title { + margin-top: 0; + } + } + } + + .programmes { + .card-deck { + width: 100%; + text-align: center; + } + + .card { + border: none; + margin: 0 0 map-get($spacers, 3) 0; + padding: map-get($spacers, 3); + + figure { + margin: 0; + } + } + } + + .support { + .card-l { + border: none; + .card-body { + padding: 0; + } + } + } + + @include media-breakpoint-down(sm) { + .mission { + .card-horizontal { + flex-direction: column; + .card-body { + padding: map-get($spacers, 3) 0; + } + } + } + } + + @include media-breakpoint-up(md) { + .mission { + .card-horizontal { + .card-body { + padding: map-get($spacers, 3); + } + } + } + } + + @include media-breakpoint-up(lg) { + .announcements { + .card-body { + flex: 1 1 auto; + } + + .card-deck { + flex-direction: row; + } + } + + .announcements { + .card { + img { + max-height: 100%; + } + } + + .card-body { + padding: 0 map-get($spacers, 5) 0 map-get($spacers, 3); + } + } + + .mission { + .card-horizontal { + .card-body { + padding-left: map-get($spacers, 4); + } + } + } + } +} diff --git a/_sass/custom/_card.scss b/_sass/custom/_card.scss index 1ee09003..cdf2515c 100644 --- a/_sass/custom/_card.scss +++ b/_sass/custom/_card.scss @@ -1,111 +1,100 @@ -.card { - border-radius: 1rem; - height: 100%; -} - -.card-date { - color: $gray-600; -} - -.card-s { - .card-title { - font-size: 1.3rem; - margin-bottom: 0.25rem; - } - .card-subtitle { - font-weight: 400; - margin-top: 0; - margin-bottom: 0.6rem; - font-size: 1.1rem; - } - .card p { - line-height: 1; - } - .card-img-top { - border-radius: 100%; - padding: 1.25rem; - } - .card-body { - padding-top: 0; - display: flex; +.about, +.blog, +.code-of-conduct, +.events, +.faq, +.mentors, +.resources, +.mentorship-about, +.book-club, +.interview-preparation, +.study-group { + .card { + border-radius: 1rem; height: 100%; - flex-direction: column; } -} -.card-m { - .card-header { - background-color: transparent; - border: none; - } - .card-title { - margin-top: 0; + .card-date { + color: $gray-600; } - .card-body { - display: flex; - height: 100%; - flex-direction: column; - text-align: center; - align-items: center; - padding: 2rem 2rem 3rem 2rem; - } - .btn { - max-width: fit-content; - } -} -.card-l { - border: none; - flex-direction: column; - text-align: left; - h3 { - text-align: left; - margin: 0 0 0.25rem 0; - } - .card-media { - padding: 0; - } - img { - max-width: 100%; - max-height: 100%; + .card-s { + .card-title { + font-size: 1.3rem; + margin-bottom: 0.25rem; + } + + .card-subtitle { + font-weight: 400; + margin-top: 0; + margin-bottom: 0.6rem; + font-size: 1.1rem; + } + + .card p { + line-height: 1; + } + + .card-img-top { + border-radius: 100%; + padding: 1.25rem; + } + + .card-body { + padding-top: 0; + display: flex; + height: 100%; + flex-direction: column; + } } -} -@include media-breakpoint-up(md) { - .card-l { - flex-direction: row; + .card-m { + .card-header { + background-color: transparent; + border: none; + } + + .card-title { + margin-top: 0; + } + + .card-body { + display: flex; + height: 100%; + flex-direction: column; + text-align: center; + align-items: center; + padding: 2rem 2rem 3rem 2rem; + } + + .btn { + max-width: fit-content; + } } -} -.announcements { .card-l { - border-top: 1px solid $gray-300; - border-left: none; - border-right: none; - border-radius: 0; - padding: 2rem 0; - &:first-child { - padding-top: 3rem; - border-top: 16px solid $primary; - border-image: linear-gradient(to right, $purple-40, $purple-60, $purple-80); - border-image-slice: 1; // Ensure the gradient covers the entire border - } - &:last-child { - border-bottom: 2px solid $primary; + border: none; + flex-direction: column; + text-align: left; + + h3 { + text-align: left; + margin: 0 0 0.25rem 0; + } + + .card-media { + padding: 0; } + img { - border-radius: 4px; + max-width: 100%; + max-height: 100%; } } - .card-body { - padding: 0 0 1rem 0; - } -} -@include media-breakpoint-up(md) { - .announcements { - .card-body { - padding: 0 1.6rem 0 0; + @include media-breakpoint-up(md) { + .card-l { + flex-direction: row; } } } @@ -113,10 +102,12 @@ .mentorship-about { .card-body { align-items: baseline; + ol { text-align: left; padding-left: 1.4rem; } + p { margin-bottom: 0.25rem; } @@ -127,40 +118,41 @@ height: 100%; a { - color: $gray-800; - &:hover { - text-decoration: none; - background-color: $gray-100; - box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1); - } + color: $gray-800; + + &:hover { + text-decoration: none; + background-color: $gray-100; + box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1); + } } .card-img-top { - max-height: 300px; - object-fit: cover; - border-top-left-radius: 1rem; - border-top-right-radius: 1rem; + max-height: 300px; + object-fit: cover; + border-top-left-radius: 1rem; + border-top-right-radius: 1rem; } .card-body { - display: flex; - height: 100%; - flex-direction: column; - padding: 1.5rem; + display: flex; + height: 100%; + flex-direction: column; + padding: 1.5rem; } .card-title { - font-size: 22px; - margin-bottom: 15px; - color: $primary-40; + font-size: 22px; + margin-bottom: 15px; + color: $primary-40; } .card-desc { - font-size: 16px; - overflow: hidden; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - text-overflow: ellipsis; + font-size: 16px; + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + text-overflow: ellipsis; } -} \ No newline at end of file +} diff --git a/_sass/custom/_footer.scss b/_sass/custom/_footer.scss index dd95a490..038c556a 100644 --- a/_sass/custom/_footer.scss +++ b/_sass/custom/_footer.scss @@ -1,57 +1,60 @@ -.footer { - padding-top: 50px; - padding-bottom: 50px; - background-color: $primary-30; - padding-top: 40px; - text-align: left; - color: $white; - min-height: 200px; - - .social { - margin-top: 1rem; - } - - .brand { - width: 120px; - } - - h2 { - margin: 0; +.site-footer { + padding-top: 50px; + padding-bottom: 50px; + background-color: $neutral-90; + padding-top: 40px; text-align: left; - font-size: 1.25rem; - } - - p { + color: $black; + min-height: 200px; + border-top: 16px solid; + border-image: linear-gradient(to left, $secondary-80, $tertiary-90, $primary-70); + border-image-slice: 1; + + .social { + margin-top: 1rem; + } + + .brand { + width: 120px; + } + + h2 { margin: 0; - } - - .copyright { - margin-top: 1rem; - } - - .network { - margin-top: 10px; - display: flex; - flex-wrap: wrap; - - a { - border-radius: 100%; - padding-right: 10px; - - svg, svg:hover { - height: 30px; - width: 30px; - fill: $white !important; - - @include media-breakpoint-down(md) { - height: 20px; - width: 20px; + text-align: left; + font-size: 1.25rem; + } + + p { + margin: 0; + } + + .copyright { + margin-top: 1rem; + } + + .network { + margin-top: 10px; + display: flex; + flex-wrap: wrap; + + a { + border-radius: 100%; + padding-right: 10px; + + svg { + height: 20px; + width: 20px; + fill: $black !important; + &:hover { + fill: $primary !important; + } + + @include media-breakpoint-up(md) { + height: 30px; + width: 30px; } - } - - svg:hover { - fill: $gray-200 !important; - } - } + } + } + } } -} + \ No newline at end of file diff --git a/_sass/custom/_hero.scss b/_sass/custom/_hero.scss new file mode 100644 index 00000000..1ebef843 --- /dev/null +++ b/_sass/custom/_hero.scss @@ -0,0 +1,101 @@ +.hero { + + .row { + padding: map-get($spacers, 4) 0 map-get($spacers, 6) 0; + } + + h1, + p { + text-align: center; + } + + h1 { + @include font-display-l; + color: $primary; + margin: 0; + } + + p { + @include font-headline-l; + } + + hr { + margin: map-get($spacers, 3) auto; + height: 0.5rem; + width: 6rem; + background: linear-gradient(to left, $secondary-80, $tertiary-90, $primary-60); + border: none; + } +} + +.hero-body { + flex: none; +} + +.hero-image { + position: relative; + background-image: url("./../../assets/images/home/stock-unsplash-home-hero.jpg"); + background-size: cover; + background-repeat: no-repeat; + background-position: center 25%; + height: 260px; + width: 95%; + + &::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + @include gradient-background($primary, $secondary-80); + opacity: 0.8; + z-index: 100; + } + + &::after { + content: ""; + position: absolute; + bottom: -1rem; + left: 0.5rem; + width: calc(100% + 1rem); + height: calc(100% - 1rem); + background-color: $secondary-80; + opacity: 0.8; + z-index: -1; + } +} + +@include media-breakpoint-up(md) { + .hero { + + .row { + padding: map-get($spacers, 6) 0; + align-items: center; + flex-direction: row; + } + + h1, + p { + text-align: left; + } + + hr { + margin: map-get($spacers, 4) 0; + } + } + + .hero-media { + margin-bottom: map-get($spacers, 5); + } + + .hero-image { + margin-right: map-get($spacers, 1); + height: 360px; + + &::after { + bottom: -2rem; + left: 1rem; + } + } +} diff --git a/_sass/custom/_home.scss b/_sass/custom/_home.scss index 2ad575d1..5049a7bf 100644 --- a/_sass/custom/_home.scss +++ b/_sass/custom/_home.scss @@ -1,69 +1,18 @@ -.banner { - position: relative; - display: flex; - flex-direction: column; - justify-content: center; - padding: map-get($spacers, 6) 0; - color: $white; - min-height: 25vh; - - .overlay-image { - background-image: url("./../../assets/images/banner.jpg"); - background-size: cover; - background-repeat: no-repeat; - background-position: center 25%; - opacity: 0.8; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } - - .overlay-dark { - background-color: $primary-10; - opacity: 0.8; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } - - .banner-content { - position: relative; - z-index: 2; // Makes sure text content stays above overlay - - h1 { - font-size: $display4-size; - } - - p { - font-size: $h2-font-size; - line-height: 1.3; - } - - hr { - margin: map-get($spacers, 4) auto; - height: 8px; - width: 5%; - background-color: $primary-90; - } - } - - h1, h2 { - margin: 0; - font-weight: 400; - } -} - .home { .row { - h2 { - margin: 1rem auto; - font-size: $h1-font-size; + &.featured-content { + padding-top: map-get($spacers, 6); + padding-bottom: map-get($spacers, 6); + justify-content: center; + } + + .card-deck { + > * { + margin-bottom: 1rem; + } } + &.mentors-cta { h2 { font-size: $h2-font-size; @@ -72,38 +21,55 @@ max-width: fit-content; } .card-body { - padding: 2rem 2rem 3rem 2rem; align-items: center; } } } - .announcements { - .content { - flex-direction: column; - align-items: center; - height: 100%; + .row-content { + display: flex; + flex-direction: column; + } + + .row-header { + h2 { + margin-top: 0; + margin-bottom: 0; } } - .programs article { - margin: 1rem .25rem; + .row-description { + margin-bottom: map-get($spacers, 3); + } + + .programmes { + p { + @include font-body; + text-align: center; + } } - .programs article a { - display: block; - padding: 1.5rem 1rem; - background: #fff; - border-radius: 12px; + .mission { + .row-content { + flex-direction: column; + text-align: center; + } - &:hover { - background-color: $primary-80; - color: $primary-10; - text-decoration: none; + .card { + background-color: transparent; + border: none; } + } - .material-symbols-outlined { - color: $black; + .programmes { + .row-content { + flex-direction: column; + align-items: center; + height: 100%; } } -} \ No newline at end of file + + .support { + text-align: center; + } +} diff --git a/_sass/custom/_menu.scss b/_sass/custom/_menu.scss index 10edf60f..49905970 100644 --- a/_sass/custom/_menu.scss +++ b/_sass/custom/_menu.scss @@ -53,8 +53,20 @@ background: transparent; } + .navbar-light .navbar-toggler { + border: none; + } + .dropdown-menu { + border-radius: 0; padding: 0; + border-color: transparent; + border-left: 2px solid $border-color; + + .nav-link { + font-size: $font-size-base; + } + li { display: block; } @@ -62,15 +74,31 @@ .dropdown-item { padding: 0.5rem 1rem; + &:hover { + background-color: $bg-hover; + } } - @include media-breakpoint-down(lg) { + @include media-breakpoint-up(lg) { .dropdown-menu { - border-color: transparent; - border-left: 2px solid $dropdown-border-color; + border-radius: 0.5rem; + border: 1px solid $border-color; - .nav-link { - font-size: $font-size-base; + li { + &:first-child { + a { + &:hover { + border-radius: 0.5rem 0.5rem 0 0; + } + } + } + &:last-child { + a { + &:hover { + border-radius: 0 0 0.5rem 0.5rem; + } + } + } } } } diff --git a/_sass/custom/_variables.scss b/_sass/custom/_variables.scss index 48c1a51b..485f4cac 100644 --- a/_sass/custom/_variables.scss +++ b/_sass/custom/_variables.scss @@ -2,43 +2,83 @@ // Color palette // -$purple-10: #260058; -$purple-20: #3F0F81; -$purple-30: #572E99; -$purple-40: #6F48B2; -$purple-50: #8962CD; -$purple-60: #A37CEA; -$purple-70: #BE99FF; -$purple-80: #D4BBFF; -$purple-90: #EBDCFF; -$purple-95: #F7EDFF; -$purple-99: #FFFBFF; +$blue-10: #001E2E; +$blue-20: #00344C; +$blue-30: #1A4B66; +$blue-40: #36637F; +$blue-50: #507C99; +$blue-60: #6A96B4; +$blue-70: #84B1D0; +$blue-80: #9FCCEC; +$blue-90: #C7E7FF; +$blue-95: #E5F2FF; +$blue-98: #EBEEF3; +$coral-10: #390C00; +$coral-20: #5D1800; +$coral-30: #822702; +$coral-40: #A23E19; +$coral-50: #C3562F; +$coral-60: #E46E45; +$coral-70: #FF8B64; +$coral-80: #FFB59D; +$coral-90: #FFDBD0; +$coral-95: #FFEDE8; +$yellow-10: #271900; +$yellow-20: #402D04; +$yellow-30: #594319; +$yellow-40: #735B2E; +$yellow-50: #8D7344; +$yellow-60: #A98D5B; +$yellow-70: #C5A773; +$yellow-80: #E2C28C; +$yellow-90: #FFDEA6; +$yellow-95: #FFEFD7; $neutral-10: #1D1B1E; -$neutral-20: #323033; -$neutral-30: #48464A; -$neutral-40: #605D61; -$neutral-50: #79767A; -$neutral-60: #938F94; -$neutral-70: #AEAAAE; -$neutral-80: #CAC5CA; -$neutral-90: #E6E1E6; -$neutral-95: #F5EFF4; -$neutral-99: #FFFBFF; +$neutral-20: #313030; +$neutral-30: #484646; +$neutral-40: #605E5D; +$neutral-50: #797776; +$neutral-60: #92908F; +$neutral-70: #ADAAAA; +$neutral-80: #C9C6C5; +$neutral-90: #E5E2E1; +$neutral-95: #F4F0EF; $black: $neutral-10; -$primary-10: $purple-10; -$primary-20: $purple-20; -$primary-30: $purple-30; -$primary-40: $purple-40; -$primary-50: $purple-50; -$primary-60: $purple-60; -$primary-70: $purple-70; -$primary-80: $purple-80; -$primary-90: $purple-90; -$primary-95: $purple-95; -$primary-99: $purple-99; +$primary-10: $blue-10; +$primary-20: $blue-20; +$primary-30: $blue-30; +$primary-40: $blue-40; +$primary-50: $blue-50; +$primary-60: $blue-60; +$primary-70: $blue-70; +$primary-80: $blue-80; +$primary-90: $blue-90; +$primary-95: $blue-95; + +$secondary-10: $coral-10; +$secondary-20: $coral-20; +$secondary-30: $coral-30; +$secondary-40: $coral-40; +$secondary-50: $coral-50; +$secondary-60: $coral-60; +$secondary-70: $coral-70; +$secondary-80: $coral-80; +$secondary-90: $coral-90; +$secondary-95: $coral-95; + +$tertiary-10: $yellow-10; +$tertiary-20: $yellow-20; +$tertiary-30: $yellow-30; +$tertiary-40: $yellow-40; +$tertiary-50: $yellow-50; +$tertiary-60: $yellow-60; +$tertiary-70: $yellow-70; +$tertiary-80: $yellow-80; +$tertiary-90: $yellow-90; +$tertiary-95: $yellow-95; $primary: $primary-40; @@ -46,17 +86,60 @@ $primary: $primary-40; // Backgrounds // -$bg-1: $primary-90; -$bg-2: #F7F7F7; +$bg-1: $blue-98; +$bg-2: $neutral-90; + +$bg-hover: $neutral-90; // // Components // $border-color: $neutral-90; +$border-radius: 1rem; // // Typography // $link-color: $primary-40; + +$text-primary: $black; +$text-secondary: $neutral-40; + +// bootstrap overrides +$display1-size: 3.6rem; +$display2-size: 2.8rem; +$display3-size: 2.25rem; + +$font-display-l: $display1-size; +$font-display-m: $display2-size; +$font-display-s: $display3-size; + +$h1-font-size: 2rem; +$h2-font-size: 1.74rem; +$h3-font-size: 1.5rem; + +$font-headline-l: $h1-font-size; +$font-headline-m: $h2-font-size; +$font-headline-s: $h3-font-size; + +$h4-font-size: 1.375rem; +$h5-font-size: 1rem; +$h6-font-size: 0.875rem; + +$font-title-l: $h4-font-size; +$font-title-m: $h5-font-size; +$font-title-s: $h6-font-size; + +$font-size-lg: 1.25rem; +$font-size-md: 1rem; +$font-size-sm: 0.875rem; + +$font-body-l: $font-size-lg; +$font-body-m: $font-size-md; +$font-body-s: $font-size-sm; + +$font-label-l: $font-size-md; +$font-label-m: $font-size-sm; +$font-label-s: 0.6875rem; diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss index 2f3dea77..7359e36c 100644 --- a/_sass/custom/custom.scss +++ b/_sass/custom/custom.scss @@ -1,6 +1,8 @@ @import "blog"; @import "buttons"; @import "card"; +@import "card-home"; +@import "hero"; @import "menu"; @import "faq"; @import "footer"; diff --git a/_sass/custom/mixins.scss b/_sass/custom/mixins.scss new file mode 100644 index 00000000..09f0bc40 --- /dev/null +++ b/_sass/custom/mixins.scss @@ -0,0 +1,55 @@ +// +// Backgrounds +// + +@mixin gradient-background($start-color, $end-color) { + background: linear-gradient(to right, $start-color, $end-color); +} + +.bg-gradient-1 { + @include gradient-background($coral-80, $yellow-90); +} + +// +// Typography +// + +@mixin font-display-l { + font-size: $font-display-m; + line-height: 1.1; + font-weight: 500; + + @include media-breakpoint-up(lg) { + font-size: $font-display-l; + } +} + +@mixin font-display-m { + font-size: $font-display-s; + line-height: 1.1; + + @include media-breakpoint-up(md) { + font-size: $font-display-m; + } +} + +@mixin font-headline-l { + font-size: $font-headline-s; + line-height: 1.4; + + @include media-breakpoint-up(md) { + font-size: $font-headline-m; + } + + @include media-breakpoint-up(lg) { + font-size: $font-headline-l; + } +} + +@mixin font-body { + font-size: $font-body-m; + + @include media-breakpoint-up(sm) { + font-size: $font-body-l; + } +} diff --git a/_sass/main.scss b/_sass/main.scss index d569bfe4..a19a8c51 100644 --- a/_sass/main.scss +++ b/_sass/main.scss @@ -1,6 +1,7 @@ @import url('https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap'); @import 'custom/variables'; +@import 'custom/mixins'; @import 'bootstrap/bootstrap'; @import 'custom/custom'; @@ -19,28 +20,63 @@ body { min-height: 100vh; } -.container, -.row .content { - max-width: $container-max-width; +.skip-link { + position: absolute; + left: -999em; + width: 1px; + height: 1px; + overflow: hidden; + clip: rect(1px, 1px, 1px, 1px); } -.row { - justify-content: center; +.skip-link:focus, +.skip-link:active { + position: static; + width: auto; + height: auto; + overflow: visible; + clip: auto; +} - &.bg-1 { - background-color: $bg-1; - } +.site-footer .container, +nav.container { + max-width: $container-max-width; +} - &.bg-2 { - background-color: $bg-2; +.about, +.blog, +.code-of-conduct, +.events, +.faq, +.mentors, +.resources, +.mentorship-about, +.book-club, +.interview-preparation, +.study-group { + .container, + .row .content { + max-width: $container-max-width; } - .content { - display: flex; - flex-wrap: wrap; + .row { justify-content: center; - text-align: center; - padding: 5rem 0; + + &.bg-1 { + background-color: $bg-1; + } + + &.bg-2 { + background-color: $bg-2; + } + + .content { + display: flex; + flex-wrap: wrap; + justify-content: center; + text-align: center; + padding: 5rem 0; + } } } @@ -80,3 +116,102 @@ $custom-auto-margin: auto; margin-left: $custom-auto-margin; } } + +// TEMPORARY: To be refactored to not only apply to homepage +.home { + main { + flex-grow: 1 + } + + .bg-1 { + background-color: $bg-1; + } + + .bg-2 { + background-color: $bg-2; + } + + // + // Layout + // + + // Global containers + + .row, + .mentors .search, + nav.container { + max-width: $container-max-width; + } + + .row { + margin: 0 auto; + } + + .container { + max-width: 100%; + } + + .row-header { + text-align: center; + + h2 { + @include font-display-m; + } + } + + // Interior pages + + .page-header { + background: $primary-90; + color: $primary; + text-align: center; + padding: map-get($spacers, 5) map-get($spacers, 2); + + h1 { + @include font-display-m; + margin-bottom: 0; + } + } + + .page-intro { + display: flex; + justify-content: center; + p { + @include font-body; + text-align: center; + } + } + + .page { + p, ul, ol { + @include font-body; + } + + section { + margin-top: map-get($spacers, 5); + margin-bottom: map-get($spacers, 5); + } + + .featured-content { + padding-top: map-get($spacers, 5); + padding-bottom: map-get($spacers, 5); + + .row { + display: flex; + justify-content: center; + } + } + + .content-constrained { + h2 { + @include font-headline-l; + margin-bottom: 1rem; + } + + h3 { + font-size: $font-headline-m; + margin: 1.7rem 0 1rem 0; + } + } + } +} diff --git a/assets/images/announcements/stock-copilot-designer_celebrate.jpg b/assets/images/announcements/stock-copilot-designer_celebrate.jpg index 9580a2ce..361a15c0 100644 Binary files a/assets/images/announcements/stock-copilot-designer_celebrate.jpg and b/assets/images/announcements/stock-copilot-designer_celebrate.jpg differ diff --git a/assets/images/announcements/stock-unsplash-computer-typing.jpg b/assets/images/announcements/stock-unsplash-computer-typing.jpg index fb866736..5468eab0 100644 Binary files a/assets/images/announcements/stock-unsplash-computer-typing.jpg and b/assets/images/announcements/stock-unsplash-computer-typing.jpg differ diff --git a/assets/images/banner.jpg b/assets/images/banner.jpg deleted file mode 100644 index 939af723..00000000 Binary files a/assets/images/banner.jpg and /dev/null differ diff --git a/assets/images/home/stock-unsplash-home-hero.jpg b/assets/images/home/stock-unsplash-home-hero.jpg new file mode 100644 index 00000000..fdf04845 Binary files /dev/null and b/assets/images/home/stock-unsplash-home-hero.jpg differ diff --git a/assets/images/home/stock-unsplash-mission-cta_16x9.jpg b/assets/images/home/stock-unsplash-mission-cta_16x9.jpg new file mode 100644 index 00000000..f7d00e20 Binary files /dev/null and b/assets/images/home/stock-unsplash-mission-cta_16x9.jpg differ diff --git a/code-of-conduct.html b/code-of-conduct.html index ddddb8f7..1f61a277 100644 --- a/code-of-conduct.html +++ b/code-of-conduct.html @@ -6,7 +6,7 @@

Code of Conduct

-
+

At Women Coding Community we are committed to a vibrant, supportive community where women can network, share experiences, diff --git a/events.html b/events.html index 3dc821d9..5e5f13da 100644 --- a/events.html +++ b/events.html @@ -6,7 +6,7 @@

Online and In-Person Events

-
+

Women Coding Community events and meetups present great opportunities to improve your skill set, deepen your understanding of various topics, expand your professional network, and engage in meaningful social interactions.

diff --git a/index.html b/index.html index 8f0625cd..ce9edcc7 100644 --- a/index.html +++ b/index.html @@ -3,70 +3,84 @@ title: Home --- -
- {% include banner.html %} +
+ {% include hero.html %} -
-
-
-
-

Empowering women in their tech careers through education, mentorship, community building, and career services is our mission. We provide workshops and events, connect members with industry mentors, foster a supportive community through meetups and conferences, and raise awareness for more inclusive industry practices.

- Learn more about us -
-
-
- -
-
-
-

Opportunities & Programmes

-

Discover a world of possibilities within our community. From networking events to mentorship programs and leadership opportunities, there's something for everyone to explore. Whether you're looking to sharpen your skills, expand your professional network, or take the next step in your career, we offer a wide range of opportunities to help you achieve your goals. Join us on this journey of growth and empowerment, and unlock your full potential in the tech industry.

-
-
-
- {% for programme in site.data.programmes %} -
- -
- {% endfor %} +
+
+
+
+
+ {{ announcement.image.alt }} +
+
+

Join Our Community

+

Empowering women in their tech careers through education, mentorship, community building, and career services is our mission. We provide workshops and events, connect members with industry mentors, foster a supportive community through meetups and conferences, and raise awareness for more inclusive industry practices.

+ Learn more about us
+
-
-
+
+
+

Announcements

-
+
+
+
{% for announcement in site.data.announcement %} -
+
+ +
+
+
+

Opportunities & Programmes

+
+
+
+

Discover a world of possibilities within our community. From networking events to mentorship programs and leadership opportunities, there's something for everyone to explore. Whether you're looking to sharpen your skills, expand your professional network, or take the next step in your career, we offer a wide range of opportunities to help you achieve your goals. Join us on this journey of growth and empowerment, and unlock your full potential in the tech industry.

+
+
+ {% for programme in site.data.programmes %} +
+ +
+ {% endfor %} +
+
+
+
-
-
-
+
+
+
+

Meet Our Dedicated Mentors

@@ -74,8 +88,6 @@

Meet Our Dedicated Mentors

Check our mentors
-
-

Become a Mentor

@@ -86,12 +98,16 @@

Become a Mentor

+
-
-
-
-

Experiencing technical issues?

- Send us a report +
+
+
+
+
+

Experiencing technical issues?

+ Send us a report +
diff --git a/program-book-club.html b/program-book-club.html index e5f42b67..6c8ec1dc 100644 --- a/program-book-club.html +++ b/program-book-club.html @@ -6,7 +6,7 @@

Book Club Programme

-
+

What sets our book club apart are the lively conversations, valuable insights and an opportunity to diff --git a/program-interview-preparation.html b/program-interview-preparation.html index 4678a154..dfc7b643 100644 --- a/program-interview-preparation.html +++ b/program-interview-preparation.html @@ -6,7 +6,7 @@

Interview Preparation

-
+

CV Clinic

diff --git a/program-study-group.html b/program-study-group.html index 84b4d14b..19e8e953 100644 --- a/program-study-group.html +++ b/program-study-group.html @@ -6,7 +6,7 @@

Study Group Programme

-
+

Explore our technical study groups, created in collaboration with available mentors, to deepen your