From 7bbdbd0f7d0e1f1b9fcc1f9a8c8f013d1a3613ce Mon Sep 17 00:00:00 2001 From: Jim Remsik Date: Tue, 5 Nov 2024 09:35:23 -0600 Subject: [PATCH 01/12] Only display the site header on the homepage --- default.hbs | 23 ++++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/default.hbs b/default.hbs index 6ac0fc4..05767f0 100644 --- a/default.hbs +++ b/default.hbs @@ -25,15 +25,20 @@
{{!-- All content gets inserted here, index.hbs, post.hbs, etc --}} -
- -

{{@site.description}}

-
+ + {{#is "home"}} +
+ +

{{@site.description}}

+
+ {{else}} +
+ {{/is}} {{{body}}}
From 1bb0dde538809f96d3960ccb23f8919deeed5665 Mon Sep 17 00:00:00 2001 From: Jim Remsik Date: Tue, 5 Nov 2024 09:36:34 -0600 Subject: [PATCH 02/12] Add support for Rubik font-weights --- src/css/rubycentral.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/css/rubycentral.css b/src/css/rubycentral.css index 6b7d98d..836647d 100644 --- a/src/css/rubycentral.css +++ b/src/css/rubycentral.css @@ -1,5 +1,5 @@ -@import url("https://fonts.googleapis.com/css?family=Rubik&display=swap"); -@import url("https://rsms.me/inter/inter.css"); +@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap'); +@import url('https://rsms.me/inter/inter.css'); :root { --red: #E14943; From 31f1569378cbbc60ebf4a43559252e9a65845136 Mon Sep 17 00:00:00 2001 From: Jim Remsik Date: Wed, 6 Nov 2024 12:54:28 -0600 Subject: [PATCH 03/12] Add Open Source template & css --- custom-oss.hbs | 85 ++++++++++++++++ home.hbs | 4 +- src/css/app.css | 1 + src/css/open-source.css | 215 ++++++++++++++++++++++++++++++++++++++++ 4 files changed, 303 insertions(+), 2 deletions(-) create mode 100644 custom-oss.hbs create mode 100644 src/css/open-source.css diff --git a/custom-oss.hbs b/custom-oss.hbs new file mode 100644 index 0000000..75f7658 --- /dev/null +++ b/custom-oss.hbs @@ -0,0 +1,85 @@ +{{!< default}} +
+ {{#post}} +
+

{{title}}

+
{{content}}
+
+ {{/post}} + + {{#get "posts" filter="slug:program-news" include="feature_image"}} + {{#foreach posts}} +
+
+ {{#if feature_image}} + {{title}} + {{/if}} +
+
+

{{title}}

+ {{{html}}} +
+
+ {{/foreach}} + {{/get}} + + {{#get "posts" filter="slug:[our-vision, our-mission]"}} +
+ {{#foreach posts}} +
+

{{title}}

+ {{{html}}} +
+ {{/foreach}} +
+ {{/get}} +
+
+

Projects

+

Learn more about our current and past efforts

+ + +
+ {{#get "posts" order="featured desc, title asc" filter="tag:[project]"}} + {{#foreach posts}} +
+

{{title}}

+ {{{html}}} +
+ {{/foreach}} + {{/get}} +
+
+ {{#get "posts" filter="slug:contribute"}} + {{#foreach posts}} + {{#if feature_image}} + {{title}} + {{/if}} +

{{title}}

+
{{content}}
+ {{/foreach}} + {{/get}} +
+
+
+ +
+

Team

+

Meet the people behind our program

+
+ {{#get "pages" order="featured desc, title asc" filter="tags:hash-oss-team" limit="all" include="feature_image"}} + {{#foreach pages}} +
+ {{#if feature_image}} + {{title}} + {{/if}} +
+

{{title}}

+ {{content}} +
+
+ {{/foreach}} + {{/get}} +
+
+
\ No newline at end of file diff --git a/home.hbs b/home.hbs index 3a934d6..4dcbdcd 100644 --- a/home.hbs +++ b/home.hbs @@ -123,8 +123,8 @@ -
-

Open Source Team

+
+

Open Source Team

    {{#get "pages" order="featured desc, title asc" filter="tags:hash-oss-team" limit="all"}} {{#foreach pages}} diff --git a/src/css/app.css b/src/css/app.css index a809d24..1b6123a 100644 --- a/src/css/app.css +++ b/src/css/app.css @@ -19,6 +19,7 @@ /* @import './pages/content.css'; */ @import './rubycentral.css'; +@import './open-source.css'; /* Vendor */ @import './vendors/ghost.css'; diff --git a/src/css/open-source.css b/src/css/open-source.css new file mode 100644 index 0000000..5585669 --- /dev/null +++ b/src/css/open-source.css @@ -0,0 +1,215 @@ +/* These styles define the layout of the post (and page) */ +#open-source { + .post { + padding: 2.5rem; + padding-top: 0; + } + + p { + line-height: 1.4rem; + font-size: 14px; + } + h1, + h2, + h3 { + font-family: Rubik; + margin-bottom: 1rem; + column-span: all !important; + } + h1 { + font-size: 26px; + text-transform: capitalize; + } + h2 { + font-size: 26px; + font-family: 'Inter var', sans-serif; + font-weight: 300; + font-style: italic; + } + @media (min-width: 700px) { + h1 { + font-size: 50px; + } + h2 { + font-size: 32px; + } + } + @media (min-width: 1350px) { + h1 { + font-size: 72px; + } + p { + font-size: 18px; + } + } + + .title { + text-transform: uppercase; + font-weight: bold; + position: relative; + padding-bottom: 0.75rem; + + &::after { + content: ''; + position: absolute; + left: 0; + right: 0; + bottom: 0; + height: 3px; + background-color: var(--yellow); + width: 70px; + } + } + + .mission-and-vision { + display: grid; + grid-template-columns: 1fr; + gap: 2.5rem; + margin-bottom: 2.5rem; + margin-top: 2.5rem; + } + + .post.mission-and-vision h1::after { + display: none; + } + + .post .column img { + max-width: 100%; + height: 100%; + object-fit: cover; + border-radius: 0.75rem; + } + + .projects { + background-color: var(--red); + color: var(--white); + margin-bottom: 2.5rem; + margin-top: 2.5rem; + padding: 2.5rem; + } + .project { + width: 100%; + background-color: var(--navy); + color: var(--white); + border-radius: 0.5rem; + padding: 1.5rem; + padding-bottom: 2rem; + } + .project h1 { + margin: 0; + } + + .projects .projects-list { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + gap: 2.5rem; + width: 100%; + margin-bottom: 2.5rem; + + h1 { + font-size: 26px; + } + @media (min-width: 700px) { + h1 { + font-size: 32px; + } + } + } + .project h1 { + font-weight: 400; + padding-bottom: 1rem; + } + .project img { + object-fit: cover; + } + + .projects .contribute h1 { + font-size: 32px; + margin-bottom: 1rem; + } + + @media (min-width: 400px) { + .post { + width: 95%; + margin: 0 auto; + } + } + + @media (min-width: 550px) { + .post { + width: 80%; + margin: 0 auto; + } + } + + @media (min-width: 700px) { + .post { + width: 100%; + max-width: 800px; + margin: 0 auto; + } + .post .two-up { + column-count: 2; /* Number of columns */ + column-gap: 2.5rem; /* Spacing between columns */ + } + .mission-and-vision { + grid-template-columns: 1fr 1fr; + } + } + + @media (min-width: 1350px) { + .post { + width: 100% !important; + max-width: 1024px !important; + } + + .gh-sidebar { + position: absolute; + left: 0; + } + + .gh-toc { + position: sticky; + top: 4vmin; + max-width: calc((100vw - 800px) / 2); + padding-right: 2rem; + } + } + + .gh-toc .is-active-link::before { + background-color: var(--ghost-accent-color); + } + + .team { + text-align: center; + } + + .grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + gap: 2.5rem; + width: 100%; + margin-bottom: 2.5rem; + } + + .team-photo { + width: 100%; + height: auto; + border-radius: 0.5rem; + object-fit: cover; + } + + .team-info { + margin-top: 0.5rem; + } + + .team-name { + font-weight: bold; + font-size: 1.1rem; + margin-bottom: 0; + } + + .team-title { + font-size: 0.9rem; + } +} From 2981846a8331f59e982bc28ca6bc8b9cef47a123 Mon Sep 17 00:00:00 2001 From: Jim Remsik Date: Wed, 6 Nov 2024 18:48:40 -0600 Subject: [PATCH 04/12] Clean-up --- custom-oss.hbs | 77 ++- src/css/open-source.css | 107 ++- src/css/rubycentral.css | 1393 ++++++++++++++++++++------------------- 3 files changed, 840 insertions(+), 737 deletions(-) diff --git a/custom-oss.hbs b/custom-oss.hbs index 75f7658..8d5f638 100644 --- a/custom-oss.hbs +++ b/custom-oss.hbs @@ -7,39 +7,36 @@
{{/post}} - {{#get "posts" filter="slug:program-news" include="feature_image"}} - {{#foreach posts}} -
-
- {{#if feature_image}} - {{title}} - {{/if}} -
-
-

{{title}}

- {{{html}}} -
+
+ {{#get "posts" filter="slug:program-news"}} + {{#foreach posts}} +

Program News

+
    + {{#get "posts" order="desc, title asc" filter="tag:[news]"}} + {{#foreach posts limit="3"}} +
  • {{#link href=(url)}}{{title}}{{/link}}
    • + {{/foreach}} + {{/get}} +
{{/foreach}} {{/get}} - {{#get "posts" filter="slug:[our-vision, our-mission]"}} -
+
+ {{#get "posts" filter="slug:[our-vision, our-mission]"}} {{#foreach posts}}

{{title}}

{{{html}}}
{{/foreach}} -
- {{/get}} -
-
+ {{/get}} +
+ +

Projects

Learn more about our current and past efforts

- - -
+
{{#get "posts" order="featured desc, title asc" filter="tag:[project]"}} {{#foreach posts}}
@@ -48,18 +45,17 @@
{{/foreach}} {{/get}} -
-
- {{#get "posts" filter="slug:contribute"}} - {{#foreach posts}} - {{#if feature_image}} - {{title}} - {{/if}} -

{{title}}

-
{{content}}
- {{/foreach}} - {{/get}} -
+
+
+ {{#get "posts" filter="slug:contribute"}} + {{#foreach posts}} + {{#if feature_image}} + {{title}} + {{/if}} +

{{title}}

+
{{content}}
+ {{/foreach}} + {{/get}}
@@ -82,4 +78,17 @@ {{/get}}
-
\ No newline at end of file +
+ {{#get "pages" filter="slug:open-source-program-support"}} + {{#foreach pages}} +

{{title}}

+ {{{content}}} + Program-Specific Funding + Donated Services + Memberships + Program-Specific Funding +
+ {{/foreach}} + {{/get}} +
+ diff --git a/src/css/open-source.css b/src/css/open-source.css index 5585669..4183f1f 100644 --- a/src/css/open-source.css +++ b/src/css/open-source.css @@ -5,9 +5,10 @@ padding-top: 0; } - p { + p, + ul { line-height: 1.4rem; - font-size: 14px; + font-size: 16px; } h1, h2, @@ -21,23 +22,29 @@ text-transform: capitalize; } h2 { - font-size: 26px; + font-size: 18px; font-family: 'Inter var', sans-serif; font-weight: 300; font-style: italic; } @media (min-width: 700px) { h1 { + font-size: 42px; + } + h1.title { font-size: 50px; } h2 { - font-size: 32px; + font-size: 26px; } } @media (min-width: 1350px) { - h1 { + h1.title { font-size: 72px; } + h2 { + font-size: 32px; + } p { font-size: 18px; } @@ -60,6 +67,25 @@ width: 70px; } } + .call-to-action.header { + text-transform: uppercase; + font-weight: bold; + position: relative; + padding-bottom: 0.75rem; + font-size: 26px; + margin-bottom: 1rem; + + &::after { + content: ''; + position: absolute; + left: 0; + right: 0; + bottom: 0; + height: 3px; + background-color: var(--yellow); + width: 70px; + } + } .mission-and-vision { display: grid; @@ -80,13 +106,55 @@ border-radius: 0.75rem; } - .projects { + .program-support { + background-color: var(--lightblue); + margin-bottom: 2.5rem; + margin-top: 2.5rem; + border-radius: 0.5rem; + padding-top: 1rem; + } + + .program-support span { + background-color: var(--yellow); + padding: 1rem; + margin: 0 1rem 1rem 0; + font-size: 1.25rem; + font-weight: bold; + min-width: 200px; + white-space: nowrap; + border-radius: 0.5rem; + padding: 1rem; + display: inline-block; + } + @media (min-width: 700px) { + .program-support span { + font-size: 1.5rem; + padding: 1rem 2.5rem; + } + } + .program-support span:nth-of-type(2) { background-color: var(--red); + color: white; + } + .program-support span:nth-of-type(3) { + color: white; + background-color: var(--blue); + } + .program-support span:nth-of-type(4) { + background-color: var(--green); + } + .projects { + background-color: var(--darkred); color: var(--white); margin-bottom: 2.5rem; margin-top: 2.5rem; - padding: 2.5rem; + border-radius: 0.5rem; + padding-top: 1rem; + } + .projects > h1.title { + margin-top: 1rem; } + .project { width: 100%; background-color: var(--navy); @@ -95,10 +163,6 @@ padding: 1.5rem; padding-bottom: 2rem; } - .project h1 { - margin: 0; - } - .projects .projects-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); @@ -107,9 +171,14 @@ margin-bottom: 2.5rem; h1 { - font-size: 26px; + font-size: 20px; } @media (min-width: 700px) { + h1 { + font-size: 26px; + } + } + @media (min-width: 1024px) { h1 { font-size: 32px; } @@ -117,17 +186,11 @@ } .project h1 { font-weight: 400; - padding-bottom: 1rem; } .project img { object-fit: cover; } - .projects .contribute h1 { - font-size: 32px; - margin-bottom: 1rem; - } - @media (min-width: 400px) { .post { width: 95%; @@ -186,12 +249,16 @@ .grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2.5rem; width: 100%; margin-bottom: 2.5rem; } - + @media (min-width: 1350px) { + .grid { + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + } + } .team-photo { width: 100%; height: auto; diff --git a/src/css/rubycentral.css b/src/css/rubycentral.css index 836647d..20690bb 100644 --- a/src/css/rubycentral.css +++ b/src/css/rubycentral.css @@ -2,980 +2,1007 @@ @import url('https://rsms.me/inter/inter.css'); :root { - --red: #E14943; - --purple: #755384; - --blue: #6288BC; - --green: #71C09E; - --yellow: #FFD065; - --white: #FFFDF9; - --text: #3B3E44; - --lightblue: #EFF4F8; - --navy: #292E37; - --divider: #F6F3F0; + --red: #e14943; + --darkred: #cf2821; /* For Contrast with white text */ + --purple: #755384; + --blue: #6288bc; + --green: #71c09e; + --yellow: #ffd065; + --white: #fffdf9; + --text: #3b3e44; + --lightblue: #eff4f8; + --navy: #292e37; + --divider: #f6f3f0; } #blurb a, .people li aside a { - color: var(--white); - text-shadow: 0 2px 0 var(--red), 1px 2px 0 var(--red), -1px 2px 0 var(--red), 2px 2px 0 var(--red), -2px 2px 0 var(--red); + color: var(--white); + text-shadow: 0 2px 0 var(--red), 1px 2px 0 var(--red), -1px 2px 0 var(--red), + 2px 2px 0 var(--red), -2px 2px 0 var(--red); } #rubygems a { - color: var(--white); - text-shadow: 0 2px 0 var(--green), 1px 2px 0 var(--green), -1px 2px 0 var(--green), 2px 2px 0 var(--green), -2px 2px 0 var(--green); + color: var(--white); + text-shadow: 0 2px 0 var(--green), 1px 2px 0 var(--green), + -1px 2px 0 var(--green), 2px 2px 0 var(--green), -2px 2px 0 var(--green); } #support a { - color: var(--white); - text-shadow: 0 2px 0 var(--blue), 1px 2px 0 var(--blue), -1px 2px 0 var(--blue), 2px 2px 0 var(--blue), -2px 2px 0 var(--blue); + color: var(--white); + text-shadow: 0 2px 0 var(--blue), 1px 2px 0 var(--blue), + -1px 2px 0 var(--blue), 2px 2px 0 var(--blue), -2px 2px 0 var(--blue); } #rubyconf a, #railsconf a, .static-content a { - text-shadow: 0 2px 0 var(--white), 1px 2px 0 var(--white), -1px 2px 0 var(--white), 2px 2px 0 var(--white), -2px 2px 0 var(--white); + text-shadow: 0 2px 0 var(--white), 1px 2px 0 var(--white), + -1px 2px 0 var(--white), 2px 2px 0 var(--white), -2px 2px 0 var(--white); } @supports (font-variation-settings: normal) { - html { - font-family: 'Inter var', sans-serif; - } + html { + font-family: 'Inter var', sans-serif; + } } * { - box-sizing: border-box; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + box-sizing: border-box; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } html { - scroll-behavior: smooth; + scroll-behavior: smooth; } body { - margin: 0; - padding: 0; - font-family: 'Inter', sans-serif; - background: linear-gradient(to top, #FFFDF9 0%, #FFFDFD 100%); - color: var(--text); - font-size: 16px; + margin: 0; + padding: 0; + font-family: 'Inter', sans-serif; + background: linear-gradient(to top, #fffdf9 0%, #fffdfd 100%); + color: var(--text); + font-size: 16px; } .padded-container { - padding: calc(8px + 1.5625vw); + padding: calc(8px + 1.5625vw); } body p { - line-height: 27px; - margin: 0 0 27px 0; + line-height: 27px; + margin: 0 0 27px 0; } body p:last-child { - margin: 0; + margin: 0; } body a { - text-decoration: none; - color: inherit; - text-decoration: none; - padding-bottom: 1px; - box-shadow: inset 0 -2px 0 var(--yellow); - transition: all .15s ease-in-out; + text-decoration: none; + color: inherit; + text-decoration: none; + padding-bottom: 1px; + box-shadow: inset 0 -2px 0 var(--yellow); + transition: all 0.15s ease-in-out; } body a:hover { - box-shadow: inset 0 -2px 0 var(--red); - transition: all .15s ease-in-out; + box-shadow: inset 0 -2px 0 var(--red); + transition: all 0.15s ease-in-out; } header { - text-align: center; - padding: 50px 0 70px 0; + text-align: center; + padding: 50px 0 70px 0; } header #main-logo { - box-shadow: none; - width: 400px; - margin: 0 auto; - display: block; + box-shadow: none; + width: 400px; + margin: 0 auto; + display: block; } header #main-logo .logo-square { - width: 120px; - height: 120px; - margin: 0 auto; - border-radius: 25px; - box-shadow: 0 2px 9px rgba(255, 186, 186, 0.3), 0px 16px 29px rgba(239, 70, 70, 0.12); - line-height: 120px; - position: relative; - display: block; - background: linear-gradient(to top, #FDF1F1 0%, #FFFFFF 100%); - transition: box-shadow .25s ease-in-out, transform .25s ease-in-out; + width: 120px; + height: 120px; + margin: 0 auto; + border-radius: 25px; + box-shadow: 0 2px 9px rgba(255, 186, 186, 0.3), + 0px 16px 29px rgba(239, 70, 70, 0.12); + line-height: 120px; + position: relative; + display: block; + background: linear-gradient(to top, #fdf1f1 0%, #ffffff 100%); + transition: box-shadow 0.25s ease-in-out, transform 0.25s ease-in-out; } header #main-logo .logo-square .logo-circle { - transition: transform .25s ease-in-out; - position: absolute; - width: 80px; - height: 80px; - left: 20px; - top: 20px; - border-radius: 40px; - box-shadow: 0 9px 18px rgba(129, 0, 0, 0.3), 0 2px 5px rgba(137, 0, 0, 0.2); - background: url(/assets/images/gem-logo.svg) no-repeat center 10px, linear-gradient(to top, #DF3434 0%, #FB5E55 100%); + transition: transform 0.25s ease-in-out; + position: absolute; + width: 80px; + height: 80px; + left: 20px; + top: 20px; + border-radius: 40px; + box-shadow: 0 9px 18px rgba(129, 0, 0, 0.3), 0 2px 5px rgba(137, 0, 0, 0.2); + background: url(/assets/images/gem-logo.svg) no-repeat center 10px, + linear-gradient(to top, #df3434 0%, #fb5e55 100%); } header #main-logo:hover .logo-square { - box-shadow: 0 4px 12px rgba(255, 186, 186, 0.4), 0px 25px 35px rgba(232, 10, 10, 0.15); - transform: translateY(-3px); + box-shadow: 0 4px 12px rgba(255, 186, 186, 0.4), + 0px 25px 35px rgba(232, 10, 10, 0.15); + transform: translateY(-3px); } header #main-logo:hover .logo-square .logo-circle { - transform: scale(1.05); + transform: scale(1.05); } header #main-logo h1 { - color: var(--text); - font-family: 'Rubik'; - font-weight: 600; - font-size: 48px; - letter-spacing: -2px; - margin: 25px 0 10px; - display: block; + color: var(--text); + font-family: 'Rubik'; + font-weight: 600; + font-size: 48px; + letter-spacing: -2px; + margin: 25px 0 10px; + display: block; } header h2 { - color: var(--red); - font-size: 24px; - font-weight: 400; - margin: 0; + color: var(--red); + font-size: 24px; + font-weight: 400; + margin: 0; } .upcoming { - margin: 0 auto 50px; + margin: 0 auto 50px; } .upcoming .homepage-featured { - max-width: 950px; - background: var(--red) 20px center no-repeat; - border-radius: 20px; - height: 60px; - line-height: 60px; - padding: 0 25px 0 47px; - color: var(--white); - margin: 0 auto 10px ; + max-width: 950px; + background: var(--red) 20px center no-repeat; + border-radius: 20px; + height: 60px; + line-height: 60px; + padding: 0 25px 0 47px; + color: var(--white); + margin: 0 auto 10px; } .upcoming .homepage-featured:nth-child(1) { - background: var(--blue) 20px center no-repeat; + background: var(--blue) 20px center no-repeat; } .upcoming .homepage-featured:nth-child(2) { - background: var(--navy) 20px center no-repeat; + background: var(--navy) 20px center no-repeat; } .upcoming .homepage-featured .homepage-featured-button { - float: right; - display: block; - color: var(--red); - background: var(--white); - border-radius: 3px; - height: 40px; - line-height: 40px; - padding: 0 30px; - margin: 10px -10px; - font-weight: 600; + float: right; + display: block; + color: var(--red); + background: var(--white); + border-radius: 3px; + height: 40px; + line-height: 40px; + padding: 0 30px; + margin: 10px -10px; + font-weight: 600; } .upcoming ul { - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr 1fr; - list-style-type: none; - padding: 0; - column-gap: 10px; - margin: 0; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; + list-style-type: none; + padding: 0; + column-gap: 10px; + margin: 0; } .upcoming ul li { - background: #fff; - border-radius: 5px; - border: 2px solid var(--divider); - padding: 50px 20px 20px 20px; - position: relative; + background: #fff; + border-radius: 5px; + border: 2px solid var(--divider); + padding: 50px 20px 20px 20px; + position: relative; } .upcoming ul li img { - position: absolute; - left: 20px; - top: 10px; + position: absolute; + left: 20px; + top: 10px; } .upcoming ul li a { - display: block; - color: var(--red); - text-decoration: underline; - font-weight: 600; + display: block; + color: var(--red); + text-decoration: underline; + font-weight: 600; } .upcoming-details { - width: 600px; - margin: 0 auto; - padding: 275px 50px 10px 50px; - background-position: 0 0; - background-repeat: no-repeat; - background-size: 600px 225px; - background-color: #fff; - border-radius: 10px; - border: 2px solid var(--divider); + width: 600px; + margin: 0 auto; + padding: 275px 50px 10px 50px; + background-position: 0 0; + background-repeat: no-repeat; + background-size: 600px 225px; + background-color: #fff; + border-radius: 10px; + border: 2px solid var(--divider); } .upcoming-details.denver { - background-image: url(/assets/images/denver.png); + background-image: url(/assets/images/denver.png); } .upcoming-details.atlanta { - background-image: url(/assets/images/atlanta.png); + background-image: url(/assets/images/atlanta.png); } .upcoming-details.portland { - background-image: url(/assets/images/portland.png); + background-image: url(/assets/images/portland.png); } .upcoming-details.houston { - background-image: url(/assets/images/houston.png); + background-image: url(/assets/images/houston.png); } .upcoming-details h3 { - margin: 0; - font-size: 30px; + margin: 0; + font-size: 30px; } .upcoming-details h4 { - font-size: 16px; - margin: 0; - color: var(--blue); - font-weight: 600; + font-size: 16px; + margin: 0; + color: var(--blue); + font-weight: 600; } .upcoming-details h5 { - margin: 0; - font-size: 16px; - font-weight: 400; + margin: 0; + font-size: 16px; + font-weight: 400; } .upcoming-details form { - margin: 25px -50px 10px; - padding: 25px 50px; - border-top: 1px solid var(--divider); - border-bottom: 1px solid var(--divider); - position: relative; + margin: 25px -50px 10px; + padding: 25px 50px; + border-top: 1px solid var(--divider); + border-bottom: 1px solid var(--divider); + position: relative; } .upcoming-details form label { - color: var(--red); - font-size: 18px; - font-weight: 700; - display: block; - margin: 0 0 10px 0; - font-family: 'Rubik'; -} - -.upcoming-details form input[type="email"] { - border: 1px solid #D4CEC8; - border-radius: 5px; - padding: 14px; - width: 100%; - font-size: 16px; - color: var(--text); - font-family: 'Rubik'; -} - -.upcoming-details form input[type="email"]:focus { - border: 1px solid var(--blue); - outline: none; -} - -.upcoming-details form input[type="submit"].button { - border: none; - cursor: pointer; - height: 40px; - line-height: 40px; - font-size: 16px; - font-weight: 700; - color: var(--white); - background: var(--red); - padding: 0 15px; - border-radius: 3px; - position: absolute; - right: 55px; - bottom: 30px; + color: var(--red); + font-size: 18px; + font-weight: 700; + display: block; + margin: 0 0 10px 0; + font-family: 'Rubik'; +} + +.upcoming-details form input[type='email'] { + border: 1px solid #d4cec8; + border-radius: 5px; + padding: 14px; + width: 100%; + font-size: 16px; + color: var(--text); + font-family: 'Rubik'; +} + +.upcoming-details form input[type='email']:focus { + border: 1px solid var(--blue); + outline: none; +} + +.upcoming-details form input[type='submit'].button { + border: none; + cursor: pointer; + height: 40px; + line-height: 40px; + font-size: 16px; + font-weight: 700; + color: var(--white); + background: var(--red); + padding: 0 15px; + border-radius: 3px; + position: absolute; + right: 55px; + bottom: 30px; } .upcoming-details span { - margin: 0; - display: block; - text-align: center; - padding: 10px; - font-size: 14px; - border-radius: 5px; - background: var(--divider); + margin: 0; + display: block; + text-align: center; + padding: 10px; + font-size: 14px; + border-radius: 5px; + background: var(--divider); } .upcoming-details span a { - text-shadow: 0 2px 0 var(--divider), 1px 2px 0 var(--divider), -1px 2px 0 var(--divider), 2px 2px 0 var(--divider), -2px 2px 0 var(--divider); + text-shadow: 0 2px 0 var(--divider), 1px 2px 0 var(--divider), + -1px 2px 0 var(--divider), 2px 2px 0 var(--divider), + -2px 2px 0 var(--divider); } .main-grid { - max-width: 950px; - margin: 0 auto 50px auto; - display: grid; - gap: 50px; - grid-template-columns: 1fr 1fr; + max-width: 950px; + margin: 0 auto 50px auto; + display: grid; + gap: 50px; + grid-template-columns: 1fr 1fr; } section { - padding: 50px; - border-radius: 20px; - color: var(--white); - margin: 0 0 50px 0; + padding: 50px; + border-radius: 20px; + color: var(--white); + margin: 0 0 50px 0; } section:last-child { - margin: 0; + margin: 0; } section.light-background { - background: #fff; - border: 2px solid #F4EEE6; - color: var(--text); + background: #fff; + border: 2px solid #f4eee6; + color: var(--text); } section.light-background h3 { - color: var(--red); + color: var(--red); } h3 { - font-size: 24px; - font-weight: 600; - font-family: 'Rubik'; - margin: 0 0 5px 0; + font-size: 24px; + font-weight: 600; + font-family: 'Rubik'; + margin: 0 0 5px 0; } .icon-box { - margin: 0 0 30px 0; - width: 64px; - height: 64px; - border-radius: 15px; - background: rgba(0, 0, 0, 0.3); + margin: 0 0 30px 0; + width: 64px; + height: 64px; + border-radius: 15px; + background: rgba(0, 0, 0, 0.3); } #blurb { - padding-bottom: 82px; - background-color: var(--red); + padding-bottom: 82px; + background-color: var(--red); } #blurb h4 { - line-height: 27px; - font-weight: 600; - margin: 0 0 27px 0; + line-height: 27px; + font-weight: 600; + margin: 0 0 27px 0; } #blurb .icon-box { - box-shadow: 0 9px 18px rgba(156, 25, 20, 0.33), 0 1px 5px rgba(141, 69, 69, 0.21); - background: url(/assets/images/blurb-icon.svg) center center no-repeat, linear-gradient(to top, #DF3434 0%, #FB5E55 100%); + box-shadow: 0 9px 18px rgba(156, 25, 20, 0.33), + 0 1px 5px rgba(141, 69, 69, 0.21); + background: url(/assets/images/blurb-icon.svg) center center no-repeat, + linear-gradient(to top, #df3434 0%, #fb5e55 100%); } #support { - background-color: var(--blue); + background-color: var(--blue); } #support .icon-box { - box-shadow: 0 9px 18px rgba(15, 35, 63, 0.14), 0 1px 5px rgba(23, 43, 69, 0.12); - background: url(/assets/images/support-icon.svg) center center no-repeat, linear-gradient(to top, #5A81B7 0%, #6992CA 100%); + box-shadow: 0 9px 18px rgba(15, 35, 63, 0.14), + 0 1px 5px rgba(23, 43, 69, 0.12); + background: url(/assets/images/support-icon.svg) center center no-repeat, + linear-gradient(to top, #5a81b7 0%, #6992ca 100%); } #rubygems { - background-color: var(--green); - padding-bottom: 82px; + background-color: var(--green); + padding-bottom: 82px; } #rubygems .icon-box { - box-shadow: 0 9px 18px rgba(54, 147, 107, 0.4), 0 1px 5px rgba(78, 146, 117, 0.21); - background: url(/assets/images/rubygems-icon.svg) center center no-repeat, linear-gradient(to top, #6BB998 0%, #78CAA6 100%); + box-shadow: 0 9px 18px rgba(54, 147, 107, 0.4), + 0 1px 5px rgba(78, 146, 117, 0.21); + background: url(/assets/images/rubygems-icon.svg) center center no-repeat, + linear-gradient(to top, #6bb998 0%, #78caa6 100%); } #conferences { - background-color: var(--yellow); + background-color: var(--yellow); } #conferences h3 { - margin: 0; + margin: 0; } #rubyconf .icon-box { - box-shadow: 0 9px 18px rgba(239, 158, 70, 0.12), 0 1px 5px rgba(255, 213, 186, 0.3); - background: url(/assets/images/ruby-icon.svg) center center no-repeat, linear-gradient(to top, #FDF7F1 0%, #fff 100%); + box-shadow: 0 9px 18px rgba(239, 158, 70, 0.12), + 0 1px 5px rgba(255, 213, 186, 0.3); + background: url(/assets/images/ruby-icon.svg) center center no-repeat, + linear-gradient(to top, #fdf7f1 0%, #fff 100%); } #railsconf .icon-box { - box-shadow: 0 9px 18px rgba(239, 158, 70, 0.12), 0 1px 5px rgba(255, 213, 186, 0.3); - background: url(/assets/images/rails-icon.svg) center center no-repeat, linear-gradient(to top, #FDF7F1 0%, #fff 100%); + box-shadow: 0 9px 18px rgba(239, 158, 70, 0.12), + 0 1px 5px rgba(255, 213, 186, 0.3); + background: url(/assets/images/rails-icon.svg) center center no-repeat, + linear-gradient(to top, #fdf7f1 0%, #fff 100%); } @keyframes video_hover { - 0% { - background-position: 5px center; - } + 0% { + background-position: 5px center; + } - 49% { - background-position: 15px center; - } + 49% { + background-position: 15px center; + } - 50% { - background-position: -15px center; - } + 50% { + background-position: -15px center; + } - 100% { - background-position: 5px center; - } + 100% { + background-position: 5px center; + } } @keyframes video_hover_out { - 0% { - background-position: 5px center; - } + 0% { + background-position: 5px center; + } - 49% { - background-position: -15px center; - } + 49% { + background-position: -15px center; + } - 50% { - background-position: 15px center; - } + 50% { + background-position: 15px center; + } - 100% { - background-position: 5px center; - } + 100% { + background-position: 5px center; + } } .content { - max-width: 950px; - margin: 0 auto; - position: relative; + max-width: 950px; + margin: 0 auto; + position: relative; } #about, #history { - padding: 150px 0; + padding: 150px 0; } #about .icon-box, #history .icon-box { - top: 0; - left: -84px; - margin: 0; - position: absolute; + top: 0; + left: -84px; + margin: 0; + position: absolute; } #about { - margin: 150px 0 0 0; - background: var(--lightblue); - border-bottom: 10px solid #C7D2DB; - border-top: 10px solid var(--yellow); + margin: 150px 0 0 0; + background: var(--lightblue); + border-bottom: 10px solid #c7d2db; + border-top: 10px solid var(--yellow); } #history { - background: var(--navy); - border-bottom: 10px solid var(--yellow); - color: var(--white); + background: var(--navy); + border-bottom: 10px solid var(--yellow); + color: var(--white); } #history .icon-box { - box-shadow: 0 9px 18px rgba(17, 24, 38, 0.1), 0 1px 5px rgba(26, 30, 36, 0.2); - background: url(/assets/images/history-icon.svg) center center no-repeat, linear-gradient(to top, #292F3A 0%, #313743 100%); + box-shadow: 0 9px 18px rgba(17, 24, 38, 0.1), + 0 1px 5px rgba(26, 30, 36, 0.2); + background: url(/assets/images/history-icon.svg) center center no-repeat, + linear-gradient(to top, #292f3a 0%, #313743 100%); } .profile-image { - border: 2px solid var(--white); - border-radius: 100%; - box-shadow: 0 6px 14px rgb(39 41 45 / 26%); - display: block; - height: 200px; - margin: 0 auto 1rem; - width: 200px; - object-fit: fill; + border: 2px solid var(--white); + border-radius: 100%; + box-shadow: 0 6px 14px rgb(39 41 45 / 26%); + display: block; + height: 200px; + margin: 0 auto 1rem; + width: 200px; + object-fit: fill; } .people { - margin: 25px 0 0 0; - padding: 0; - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; - gap: 22px; - list-style-type: none; + margin: 25px 0 0 0; + padding: 0; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + gap: 22px; + list-style-type: none; } .people li { - border-radius: 10px; - background: var(--white); - margin: 60px 0 0 0; - padding: 60px 0 0 0; - position: relative; + border-radius: 10px; + background: var(--white); + margin: 60px 0 0 0; + padding: 60px 0 0 0; + position: relative; } .people li img { - position: absolute; - left: 20px; - top: -50px; - border-radius: 50px; - height: 100px; - width: 100px; - box-shadow: 0 6px 14px rgba(39, 41, 45, 0.26); - background-color: #fff; + position: absolute; + left: 20px; + top: -50px; + border-radius: 50px; + height: 100px; + width: 100px; + box-shadow: 0 6px 14px rgba(39, 41, 45, 0.26); + background-color: #fff; } .people li aside { - padding: 10px 20px 12px; - border-bottom-left-radius: 10px; - border-bottom-right-radius: 10px; - border-top: 3px solid #BC2822; - background: var(--red); - color: var(--white); - height: 100%; - font-size: 14px; + padding: 10px 20px 12px; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; + border-top: 3px solid #bc2822; + background: var(--red); + color: var(--white); + height: 100%; + font-size: 14px; } .people li aside p { - font-size: 14px; - margin-top: 5px; - line-height: 18px; - font-style: italic; + font-size: 14px; + margin-top: 5px; + line-height: 18px; + font-style: italic; } .people li aside strong { - font-family: 'Rubik'; - font-weight: 600; - font-size: 16px; - display: block; + font-family: 'Rubik'; + font-weight: 600; + font-size: 16px; + display: block; } .people li aside a { - display: inline-block; - font-size: 14px; + display: inline-block; + font-size: 14px; } #directors { - margin: 0 0 150px 0; - position: relative; + margin: 0 0 150px 0; + position: relative; } #directors .icon-box { - box-shadow: 0 9px 18px rgba(191, 204, 214, 0.12), 0 1px 5px rgba(205, 231, 252, 0.3); - background: url(/assets/images/directors-icon.svg) center center no-repeat, linear-gradient(to top, #F6FBFE 0%, #fff 100%); + box-shadow: 0 9px 18px rgba(191, 204, 214, 0.12), + 0 1px 5px rgba(205, 231, 252, 0.3); + background: url(/assets/images/directors-icon.svg) center center no-repeat, + linear-gradient(to top, #f6fbfe 0%, #fff 100%); } #staff { - position: relative; + position: relative; } #staff .icon-box { - box-shadow: 0 9px 18px rgba(191, 204, 214, 0.12), 0 1px 5px rgba(205, 231, 252, 0.3); - background: url(/assets/images/staff-icon.svg) center center no-repeat, linear-gradient(to top, #F6FBFE 0%, #fff 100%); + box-shadow: 0 9px 18px rgba(191, 204, 214, 0.12), + 0 1px 5px rgba(205, 231, 252, 0.3); + background: url(/assets/images/staff-icon.svg) center center no-repeat, + linear-gradient(to top, #f6fbfe 0%, #fff 100%); } #staff .people li aside { - background: #5E83A7; - border-color: #3F6589; + background: #5e83a7; + border-color: #3f6589; } -#oss-team, #oss-sponsors { - margin-top: 40px; +#oss-team, +#oss-sponsors { + margin-top: 40px; } .static-content { - width: 50%; - margin: 0 auto; + width: 50%; + margin: 0 auto; } .static-content.upcoming-conference-container { - margin-top: -100px; + margin-top: -100px; } .static-content h3 { - color: var(--red); + color: var(--red); } .static-content ul { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } .static-content ul li { - line-height: 27px; - margin: 0 0 15px 0; - padding: 0 0 0 20px; - background: url(/assets/images/bullet.svg) 0 8px no-repeat; - list-style-type: none; + line-height: 27px; + margin: 0 0 15px 0; + padding: 0 0 0 20px; + background: url(/assets/images/bullet.svg) 0 8px no-repeat; + list-style-type: none; } .back { - font-size: 16px; - display: inline-block; - margin: 0 0 20px 0; + font-size: 16px; + display: inline-block; + margin: 0 0 20px 0; } .arrow { - display: none; + display: none; } .apply { - display: grid; - grid-template-columns: 1fr 200px; - gap: 25px; - margin: 25px 0 0 0; + display: grid; + grid-template-columns: 1fr 200px; + gap: 25px; + margin: 25px 0 0 0; } .apply strong { - display: block; - margin: 0 0 10px 0; + display: block; + margin: 0 0 10px 0; } .apply-btn { - display: block; - width: 200px; - text-align: center; - color: var(--white); - background: var(--red); - height: 40px; - line-height: 40px; - border-radius: 3px; - font-weight: 600; -} - -@media screen and (max-width: 1200px) and (orientation: portrait), -(max-width: 1097px) and (orientation: landscape) { - - .people { - grid-template-columns: 1fr 1fr 1fr; - } - - #about .icon-box, - #history .icon-box { - left: 0; - top: -84px; - } - -} - -@media screen and (max-width: 900px) and (orientation: portrait), -(max-width: 823px) and (orientation: landscape) { - .apply { display: block; - } - - .apply-btn { - width: auto; - } - - .upcoming { - width: auto; - margin: 0 20px 50px; - } - - .upcoming .homepage-featured { - background: var(--red) 20px 20px no-repeat; - background-image: none; - border-radius: 5px; - line-height: 26px; - height: auto; - padding: 20px; - color: var(--white); - margin: 0 0 10px 0; - } - - .upcoming .homepage-featured .homepage-featured-button { - float: none; - height: 40px; - width: auto; + width: 200px; text-align: center; - line-height: 40px; - padding: 0; - margin: 10px 0 0 0; - } - - .upcoming ul { - display: block; - } - - .upcoming ul li { - padding: 0 0 0 20px; - position: relative; - height: 50px; - line-height: 50px; - margin: 0 0 10px 0; - } - - .upcoming ul li img { - width: 20px; - right: 20px; - left: auto; - top: 15px; - height: auto; - } - - .upcoming ul li small { - position: absolute; - right: 50px; - top: 0; - height: 50px; - } - - .upcoming-details { - width: auto; - margin: 0; - padding: 220px 15px 10px 15px; - background-position: center 0; - background-repeat: no-repeat; - background-size: auto 200px; - } - - .upcoming-details form { - margin: 15px -15px 10px; - padding: 15px; - border-top: 1px solid var(--divider); - border-bottom: 1px solid var(--divider); - position: relative; - } - - .upcoming-details form input[type="email"] { - font-size: 14px; - } - - .upcoming-details form input[type="submit"].button { + color: var(--white); + background: var(--red); height: 40px; line-height: 40px; - font-size: 14px; - right: 19px; - bottom: 19px; - } - - header { - padding: 50px 20px; - } - - header #main-logo { - width: auto; - } - - header #main-logo h1 { - font-size: 36px; - letter-spacing: -1px; - } - - header h2 { - font-size: 20px; - line-height: 32px; - } - - h3 { - font-size: 20px; - } - - .main-grid { - width: auto; - display: block; - padding: 0 20px; - margin: unset; - } - - .main-grid section { - padding: 25px; - margin: 0 0 20px 0; - position: relative; - max-height: 114px; - overflow: hidden; - transition: all .5s ease-in-out; - } - - .main-grid section.active { - max-height: 2500px; - height: auto; - } - - .main-grid section.active .arrow { - transform: rotate(90deg); - transition-delay: 0s; - } - - .main-grid section .section-header { - padding: 25px; - margin: -25px; - } - - .main-grid section#blurb { - height: auto; - max-height: 2000px; - background-image: none; - } - - .main-grid section:last-child { - margin: 0 0 20px 0; - } - - .main-grid section h3 { - position: absolute; - left: 100px; - top: 45px; - } - - .main-grid section#conferences { - height: auto; - max-height: 114px; - min-height: 114px; - position: relative; - } - - .main-grid section#conferences h3 { - line-height: 30px; - position: absolute; - left: 25px; - top: 50%; - transform: translate(0, -50%); - } - - .icon-box { - margin-bottom: 25px; - transform: translateY(0) !important; - } - - .arrow { - position: absolute; - display: block; - right: 25px; - top: 52px; - transition: all .25s ease-in-out; - transition-delay: .25s; - } - - #support { - width: auto; - padding: 25px; - position: relative; - overflow: hidden; - transition: all .5s ease-in-out; - } - - #support.active { - max-height: 700px; - height: auto; - } - - #support.active .arrow { - transform: rotate(90deg); - } - - #support h3 { - position: absolute; - left: 100px; - top: 45px; - } - - .content { - width: auto; - } - - #about { - margin: 50px 0 0 0; - padding: 50px 25px; - } - - #about .icon-box { - left: 0; - top: 0; - } - - #history { - padding: 50px 25px; - } - - #history .content { - padding-top: 80px; - } - - #history .icon-box { - left: 0; - top: 0; - } - - #directors { - margin: 0 0 50px 0; - padding-top: 80px; - } - - .people { - display: block; - } - - .people li { - margin: 0 0 10px 0; - height: 74px; - padding: 0 0 0 30px; - background: var(--red); - } - - .people li img { - top: 5px; - left: -10px; - width: 64px; - height: 64px; - } - - .people li aside { - border-bottom-left-radius: 0; - border-top-right-radius: 10px; - border-top: 0; - border-left: 3px solid #BC2822; - padding: 17px 0 0 30px; - background: var(--white); - color: var(--text); - } - - .people li aside a { - color: var(--text); - text-decoration: none; - padding-bottom: 1px; - box-shadow: inset 0 -2px 0 var(--yellow); - transition: all .15s ease-in-out; - text-shadow: 0 2px 0 var(--white), 1px 2px 0 var(--white), -1px 2px 0 var(--white), 2px 2px 0 var(--white), -2px 2px 0 var(--white); - } - - .people li:last-child { - margin-bottom: 0; - } - - #staff { - padding-top: 80px; - } - - #staff .people li { - background: var(--blue); - } - - #staff .people li aside { - border-color: #3F6589; - background: var(--white); - } + border-radius: 3px; + font-weight: 600; +} - #staff .people li aside small { - color: var(--blue); - } +@media screen and (max-width: 1200px) and (orientation: portrait), + (max-width: 1097px) and (orientation: landscape) { + .people { + grid-template-columns: 1fr 1fr 1fr; + } - .static-content { - width: auto; - padding: 0 20px; - } + #about .icon-box, + #history .icon-box { + left: 0; + top: -84px; + } +} - .static-content.upcoming-conference-container { - margin-top: -5px; - } +@media screen and (max-width: 900px) and (orientation: portrait), + (max-width: 823px) and (orientation: landscape) { + .apply { + display: block; + } + + .apply-btn { + width: auto; + } + + .upcoming { + width: auto; + margin: 0 20px 50px; + } + + .upcoming .homepage-featured { + background: var(--red) 20px 20px no-repeat; + background-image: none; + border-radius: 5px; + line-height: 26px; + height: auto; + padding: 20px; + color: var(--white); + margin: 0 0 10px 0; + } + + .upcoming .homepage-featured .homepage-featured-button { + float: none; + height: 40px; + width: auto; + text-align: center; + line-height: 40px; + padding: 0; + margin: 10px 0 0 0; + } + + .upcoming ul { + display: block; + } + + .upcoming ul li { + padding: 0 0 0 20px; + position: relative; + height: 50px; + line-height: 50px; + margin: 0 0 10px 0; + } + + .upcoming ul li img { + width: 20px; + right: 20px; + left: auto; + top: 15px; + height: auto; + } + + .upcoming ul li small { + position: absolute; + right: 50px; + top: 0; + height: 50px; + } + + .upcoming-details { + width: auto; + margin: 0; + padding: 220px 15px 10px 15px; + background-position: center 0; + background-repeat: no-repeat; + background-size: auto 200px; + } + + .upcoming-details form { + margin: 15px -15px 10px; + padding: 15px; + border-top: 1px solid var(--divider); + border-bottom: 1px solid var(--divider); + position: relative; + } + + .upcoming-details form input[type='email'] { + font-size: 14px; + } + + .upcoming-details form input[type='submit'].button { + height: 40px; + line-height: 40px; + font-size: 14px; + right: 19px; + bottom: 19px; + } + + header { + padding: 50px 20px; + } + + header #main-logo { + width: auto; + } + + header #main-logo h1 { + font-size: 36px; + letter-spacing: -1px; + } + + header h2 { + font-size: 20px; + line-height: 32px; + } + + h3 { + font-size: 20px; + } + + .main-grid { + width: auto; + display: block; + padding: 0 20px; + margin: unset; + } + + .main-grid section { + padding: 25px; + margin: 0 0 20px 0; + position: relative; + max-height: 114px; + overflow: hidden; + transition: all 0.5s ease-in-out; + } + + .main-grid section.active { + max-height: 2500px; + height: auto; + } + + .main-grid section.active .arrow { + transform: rotate(90deg); + transition-delay: 0s; + } + + .main-grid section .section-header { + padding: 25px; + margin: -25px; + } + + .main-grid section#blurb { + height: auto; + max-height: 2000px; + background-image: none; + } + + .main-grid section:last-child { + margin: 0 0 20px 0; + } + + .main-grid section h3 { + position: absolute; + left: 100px; + top: 45px; + } + + .main-grid section#conferences { + height: auto; + max-height: 114px; + min-height: 114px; + position: relative; + } + + .main-grid section#conferences h3 { + line-height: 30px; + position: absolute; + left: 25px; + top: 50%; + transform: translate(0, -50%); + } + + .icon-box { + margin-bottom: 25px; + transform: translateY(0) !important; + } + + .arrow { + position: absolute; + display: block; + right: 25px; + top: 52px; + transition: all 0.25s ease-in-out; + transition-delay: 0.25s; + } + + #support { + width: auto; + padding: 25px; + position: relative; + overflow: hidden; + transition: all 0.5s ease-in-out; + } + + #support.active { + max-height: 700px; + height: auto; + } + + #support.active .arrow { + transform: rotate(90deg); + } + + #support h3 { + position: absolute; + left: 100px; + top: 45px; + } + + .content { + width: auto; + } + + #about { + margin: 50px 0 0 0; + padding: 50px 25px; + } + + #about .icon-box { + left: 0; + top: 0; + } + + #history { + padding: 50px 25px; + } + + #history .content { + padding-top: 80px; + } + + #history .icon-box { + left: 0; + top: 0; + } + + #directors { + margin: 0 0 50px 0; + padding-top: 80px; + } + + .people { + display: block; + } + + .people li { + margin: 0 0 10px 0; + height: 74px; + padding: 0 0 0 30px; + background: var(--red); + } + + .people li img { + top: 5px; + left: -10px; + width: 64px; + height: 64px; + } + + .people li aside { + border-bottom-left-radius: 0; + border-top-right-radius: 10px; + border-top: 0; + border-left: 3px solid #bc2822; + padding: 17px 0 0 30px; + background: var(--white); + color: var(--text); + } + + .people li aside a { + color: var(--text); + text-decoration: none; + padding-bottom: 1px; + box-shadow: inset 0 -2px 0 var(--yellow); + transition: all 0.15s ease-in-out; + text-shadow: 0 2px 0 var(--white), 1px 2px 0 var(--white), + -1px 2px 0 var(--white), 2px 2px 0 var(--white), + -2px 2px 0 var(--white); + } + + .people li:last-child { + margin-bottom: 0; + } + + #staff { + padding-top: 80px; + } + + #staff .people li { + background: var(--blue); + } + + #staff .people li aside { + border-color: #3f6589; + background: var(--white); + } + + #staff .people li aside small { + color: var(--blue); + } + + .static-content { + width: auto; + padding: 0 20px; + } + + .static-content.upcoming-conference-container { + margin-top: -5px; + } } From 80ea0f9916ab0b7338eb6b64176d442e77357a73 Mon Sep 17 00:00:00 2001 From: Jim Remsik Date: Wed, 6 Nov 2024 18:56:12 -0600 Subject: [PATCH 05/12] Do not hide header logo on any page except Open Source Program --- default.hbs | 6 +++--- src/css/open-source.css | 1 - 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/default.hbs b/default.hbs index 05767f0..4c2d88e 100644 --- a/default.hbs +++ b/default.hbs @@ -26,7 +26,9 @@
{{!-- All content gets inserted here, index.hbs, post.hbs, etc --}} - {{#is "home"}} + {{#is "open-source"}} +
+ {{else}}

{{@site.description}}

- {{else}} -
{{/is}} {{{body}}} diff --git a/src/css/open-source.css b/src/css/open-source.css index 4183f1f..09321e8 100644 --- a/src/css/open-source.css +++ b/src/css/open-source.css @@ -1,4 +1,3 @@ -/* These styles define the layout of the post (and page) */ #open-source { .post { padding: 2.5rem; From c59795d402898d18c6d2f34247f98cdd101eb628 Mon Sep 17 00:00:00 2001 From: Jim Remsik Date: Wed, 6 Nov 2024 19:24:24 -0600 Subject: [PATCH 06/12] Only display main logo on home page --- default.hbs | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/default.hbs b/default.hbs index 4c2d88e..5fe0c82 100644 --- a/default.hbs +++ b/default.hbs @@ -26,9 +26,7 @@
{{!-- All content gets inserted here, index.hbs, post.hbs, etc --}} - {{#is "open-source"}} -
- {{else}} + {{#is "home"}}