diff --git a/about.hbs b/about.hbs new file mode 100644 index 0000000..facf394 --- /dev/null +++ b/about.hbs @@ -0,0 +1,162 @@ +{{!< default}} +
+
+ {{#get 'pages' filter="title:'About::Hero - Body'" limit='1'}} + {{#foreach pages}} + {{content}} + {{/foreach}} + {{/get}} +
+ {{#get 'pages' filter='tag:hash-about-hero-cta' limit='2'}} + {{#foreach pages}} + {{content}} + {{/foreach}} + {{/get}} +
+
+
+
+
+ Female software engineer sitting at a laptop and holding a coffee cup +
+ {{#get 'pages' filter="title:'About::Position - Body'" limit='1'}} + {{#foreach pages}} + {{content}} + {{/foreach}} + {{/get}} +
+
+
+
+
+

History

+
+
+ Group of developers hugging and smiling together +
+ {{#get 'pages' filter="title:'About::History::SectionOne - Body'" limit='1'}} + {{#foreach pages}} + {{content}} + {{/foreach}} + {{/get}} + {{#get 'pages' filter="title:'About::History::SectionOne - Button'" limit='1'}} + {{#foreach pages}} + {{content}} + {{/foreach}} + {{/get}} +
+
+
+ Seated conference participants talking with one another +
+ {{#get 'pages' filter="title:'About::History::SectionTwo - Body'" limit='1'}} + {{#foreach pages}} + {{content}} + {{/foreach}} + {{/get}} +
+
+
+ Crowded lobby with conference participants entering workshop rooms +
+ {{#get 'pages' filter="title:'About::History::SectionThree - Body'" limit='1'}} + {{#foreach pages}} + {{content}} + {{/foreach}} + {{/get}} +
+
+
+
+
+
+ {{#get 'pages' filter="title:'About::Team - Header'" limit='1'}} + {{#foreach pages}} + {{content}} + {{/foreach}} + {{/get}} +
+
+
+ {{#get 'pages' filter="title:'About::Team::Staff - Header'" limit='1'}} + {{#foreach pages}} + {{content}} + {{/foreach}} + {{/get}} +
+
+ {{#get "pages" order="featured desc, title asc" filter="tags:hash-staff" limit="all"}} + {{#foreach pages}} +
+ {{#if feature_image}} + {{title}} + {{else}} + White Ruby Central logo on red background + {{/if}} +
+

{{title}}

+ {{content}} +
+
+ {{/foreach}} + {{/get}} +
+
+
+
+ {{#get 'pages' filter="title:'About::Team::Directors - Header'" limit='1'}} + {{#foreach pages}} + {{content}} + {{/foreach}} + {{/get}} +
+
+ {{#get "pages" order="featured desc, title asc" filter="tags:hash-director" limit="all"}} + {{#foreach pages}} +
+ {{#if feature_image}} + {{title}} + {{else}} + White Ruby Central logo on red background + {{/if}} +

{{title}}

+ {{content}} +
+ {{/foreach}} + {{/get}} +
+
+
+{{> 'get-involved' }} diff --git a/assets/images/about__hero--background.jpg b/assets/images/about__hero--background.jpg new file mode 100644 index 0000000..afb7a26 Binary files /dev/null and b/assets/images/about__hero--background.jpg differ diff --git a/assets/images/about__history__section-three--image.jpg b/assets/images/about__history__section-three--image.jpg new file mode 100644 index 0000000..4588791 Binary files /dev/null and b/assets/images/about__history__section-three--image.jpg differ diff --git a/assets/images/about__history__section-two--image.jpg b/assets/images/about__history__section-two--image.jpg new file mode 100644 index 0000000..e2696e2 Binary files /dev/null and b/assets/images/about__history__section-two--image.jpg differ diff --git a/assets/images/about__position.jpg b/assets/images/about__position.jpg new file mode 100644 index 0000000..1afcc26 Binary files /dev/null and b/assets/images/about__position.jpg differ diff --git a/assets/images/arrow.svg b/assets/images/arrow.svg deleted file mode 100644 index 1f4621c..0000000 --- a/assets/images/arrow.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - arrow - Created with Sketch. - - - - - - \ No newline at end of file diff --git a/assets/images/blurb-icon.svg b/assets/images/blurb-icon.svg deleted file mode 100644 index 613db97..0000000 --- a/assets/images/blurb-icon.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - Combined Shape - Created with Sketch. - - - - - - - - \ No newline at end of file diff --git a/assets/images/community-icon.svg b/assets/images/community-icon.svg deleted file mode 100644 index 9cf5624..0000000 --- a/assets/images/community-icon.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - community-icon - Created with Sketch. - - - - - - \ No newline at end of file diff --git a/assets/images/darkarrow.svg b/assets/images/darkarrow.svg deleted file mode 100644 index 406183c..0000000 --- a/assets/images/darkarrow.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - darkarrow - Created with Sketch. - - - - - - \ No newline at end of file diff --git a/assets/images/directors-icon.svg b/assets/images/directors-icon.svg deleted file mode 100644 index 934b6af..0000000 --- a/assets/images/directors-icon.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - directors-icon - Created with Sketch. - - - - - - \ No newline at end of file diff --git a/assets/images/full-logo.png b/assets/images/full-logo.png new file mode 100644 index 0000000..2a5a3d9 Binary files /dev/null and b/assets/images/full-logo.png differ diff --git a/assets/images/gem-logo--badge.svg b/assets/images/gem-logo--badge.svg new file mode 100644 index 0000000..4cb2179 --- /dev/null +++ b/assets/images/gem-logo--badge.svg @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/global__placeholder.svg b/assets/images/global__placeholder.svg new file mode 100644 index 0000000..2cf826b --- /dev/null +++ b/assets/images/global__placeholder.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/history-icon.svg b/assets/images/history-icon.svg deleted file mode 100644 index 93b615d..0000000 --- a/assets/images/history-icon.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - history-icon - Created with Sketch. - - - - - - \ No newline at end of file diff --git a/assets/images/home__community--background.jpg b/assets/images/home__community--background.jpg new file mode 100644 index 0000000..da0c1d5 Binary files /dev/null and b/assets/images/home__community--background.jpg differ diff --git a/assets/images/home__community__details--image.jpg b/assets/images/home__community__details--image.jpg new file mode 100644 index 0000000..be78233 Binary files /dev/null and b/assets/images/home__community__details--image.jpg differ diff --git a/assets/images/home__pillars--background.jpg b/assets/images/home__pillars--background.jpg new file mode 100644 index 0000000..92c6d6f Binary files /dev/null and b/assets/images/home__pillars--background.jpg differ diff --git a/assets/images/home__pillars-image-grid-01.jpg b/assets/images/home__pillars-image-grid-01.jpg new file mode 100644 index 0000000..8e7ec29 Binary files /dev/null and b/assets/images/home__pillars-image-grid-01.jpg differ diff --git a/assets/images/home__pillars-image-grid-02.jpg b/assets/images/home__pillars-image-grid-02.jpg new file mode 100644 index 0000000..76f2b14 Binary files /dev/null and b/assets/images/home__pillars-image-grid-02.jpg differ diff --git a/assets/images/home__pillars-image-grid-03.jpg b/assets/images/home__pillars-image-grid-03.jpg new file mode 100644 index 0000000..5654b11 Binary files /dev/null and b/assets/images/home__pillars-image-grid-03.jpg differ diff --git a/assets/images/icon__burger.svg b/assets/images/icon__burger.svg new file mode 100644 index 0000000..04f8674 --- /dev/null +++ b/assets/images/icon__burger.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/assets/images/icon__close.svg b/assets/images/icon__close.svg new file mode 100644 index 0000000..5ead02e --- /dev/null +++ b/assets/images/icon__close.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/assets/images/rails-icon.svg b/assets/images/rails-icon.svg deleted file mode 100644 index 5a09d0a..0000000 --- a/assets/images/rails-icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - Combined Shape - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/assets/images/ruby-icon.svg b/assets/images/ruby-icon.svg deleted file mode 100644 index f00dae3..0000000 --- a/assets/images/ruby-icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - Combined Shape - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/assets/images/rubygems-icon.svg b/assets/images/rubygems-icon.svg deleted file mode 100644 index 377f1a0..0000000 --- a/assets/images/rubygems-icon.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - rubygems-icon - Created with Sketch. - - - - - - - - \ No newline at end of file diff --git a/assets/images/staff-icon.svg b/assets/images/staff-icon.svg deleted file mode 100644 index 03a4e0f..0000000 --- a/assets/images/staff-icon.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - staff-icon - Created with Sketch. - - - - - - \ No newline at end of file diff --git a/assets/images/support-icon.svg b/assets/images/support-icon.svg deleted file mode 100644 index b77c910..0000000 --- a/assets/images/support-icon.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - support-icon - Created with Sketch. - - - - - - \ No newline at end of file diff --git a/assets/images/video-icon.svg b/assets/images/video-icon.svg deleted file mode 100644 index e8a7f2a..0000000 --- a/assets/images/video-icon.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - video-icon - Created with Sketch. - - - - - - \ No newline at end of file diff --git a/custom-modern-corporate-sponsorship-program.hbs b/custom-modern-corporate-sponsorship-program.hbs index a47c480..fa488b1 100644 --- a/custom-modern-corporate-sponsorship-program.hbs +++ b/custom-modern-corporate-sponsorship-program.hbs @@ -1,12 +1,12 @@ {{!-- This template is used to render the precise layout of /corporate-sponsorship --}} -{{!< default}} +{{!< default}} {{#post}}
-
+

{{title}}

{{content}}
-
+

Ruby

@@ -44,7 +44,7 @@
-
+
{{#get "pages" filter="slug:benefits-of-supporting-ruby-central"}} {{#foreach pages}}

{{title}}

@@ -53,7 +53,7 @@ {{/get}}
-
+
{{#get "pages" filter="slug:program-news"}} {{#foreach pages}}

Program News

@@ -67,7 +67,7 @@ {{/foreach}} {{/get}}
-
+
{{#get "pages" filter="slug:more-corporate-sponsorship-details"}} {{#foreach pages}}
{{content}}
@@ -77,4 +77,4 @@ {{/post}} {{#contentFor 'scripts'}} -{{/contentFor}} \ No newline at end of file +{{/contentFor}} diff --git a/custom-modern-open-source.hbs b/custom-modern-open-source.hbs index d4064df..5c51d59 100644 --- a/custom-modern-open-source.hbs +++ b/custom-modern-open-source.hbs @@ -1,13 +1,13 @@ {{!-- This template is used to render the precise layout of /open-source --}} -{{!< default}} +{{!< default}} {{#post}}
-
+

{{title}}

{{content}}
-
+
{{#get "pages" filter="slug:program-news"}} {{#foreach pages}}

Program News

@@ -22,7 +22,7 @@ {{/foreach}} {{/get}} -
+
{{#get "pages" filter="tag:[hash-oss-our-vision, hash-oss-our-mission]"}} {{#foreach pages}}
@@ -33,13 +33,13 @@ {{/get}}
-
+

Projects

Learn more about our current and past efforts

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

{{title}}

{{{html}}}
@@ -59,10 +59,10 @@
-
+

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}}
@@ -78,7 +78,7 @@ {{/get}}
-
+
{{#get "pages" filter="tag:[hash-oss-program-support]"}} {{#foreach pages}}

{{title}}

@@ -95,4 +95,4 @@ {{/post}} {{#contentFor 'scripts'}} -{{/contentFor}} \ No newline at end of file +{{/contentFor}} diff --git a/custom-modern-railsconf.hbs b/custom-modern-railsconf.hbs index e3f2457..6cf6096 100644 --- a/custom-modern-railsconf.hbs +++ b/custom-modern-railsconf.hbs @@ -1,16 +1,16 @@ {{!-- This template is used to render form at the bottom of the post /news/make-railsconf-happen/ --}} -{{!< default}} +{{!< default}} {{#post}}

{{title}}

{{content}}
-
+
{{/post}} {{#contentFor 'scripts'}} -{{/contentFor}} \ No newline at end of file +{{/contentFor}} diff --git a/custom-support.hbs b/custom-support.hbs index 05e53f9..5b7474c 100644 --- a/custom-support.hbs +++ b/custom-support.hbs @@ -3,7 +3,7 @@ {{#post}}
{{#if feature_image}} - + {{/if}}

{{title}}


@@ -12,18 +12,20 @@ {{/post}}
-
-

Our Open Source Sustaining Membership Sponsors

-
    - {{#get "pages" order="featured desc, title asc" filter="tags:hash-oss-sponsors" limit="all"}} - {{#foreach pages}} - {{> "person"}} - {{else}} -

    Create a page for each open source major sponsor, title the post with the sponsor name, set the featured image to their profile picture (for logos, we need a square image for best results), and put an optional link in the page content. Add the tag #oss-sponsors for them to show up here.

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

Our Open Source Sustaining Membership Sponsors

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

Create a page for each open source major sponsor, title the post with the sponsor name, set the featured image to their profile picture (for logos, we need a square image for best results), and put an optional link in the page content. Add the tag #oss-sponsors for them to show up here.

+ {{/if}} + {{/foreach}} + {{/get}} +
+
@@ -32,4 +34,4 @@ {{#contentFor 'scripts'}} -{{/contentFor}} \ No newline at end of file +{{/contentFor}} diff --git a/default.hbs b/default.hbs index 5fe0c82..ce4a0c5 100644 --- a/default.hbs +++ b/default.hbs @@ -18,49 +18,30 @@ + {{> "navigation-top" }} -
- {{> "navbar" }} -
- -
+
{{!-- All content gets inserted here, index.hbs, post.hbs, etc --}} - - {{#is "home"}} -
- -

{{@site.description}}

-
- {{/is}} - {{{body}}}
-
- {{!-- Navbar partial --}} - {{> "footer"}} -
+ {{> "footer"}} - - {{!-- Outputs important scripts - should always be included before closing body tag --}} - {{ghost_foot}} - + } + sections.forEach(function(section) { + section.addEventListener("click", handleClick); + }); + + {{!-- Outputs important scripts - should always be included before closing body tag --}} + {{ghost_foot}} + diff --git a/home.hbs b/home.hbs index 3a934d6..21e523a 100644 --- a/home.hbs +++ b/home.hbs @@ -1,140 +1,151 @@ {{!< default}} -
-
- {{#get "posts" limit="3" filter="featured:true"}} - {{#foreach posts}} -
- {{title}} -
- {{/foreach}} - {{/get}} -
-
-
-
-
-

- Ruby Central is a non-profit organization dedicated to supporting the worldwide Ruby community. We organize the annual RubyConf and RailsConf software conferences, support community growth, and provide vital infrastructure for the Ruby programming language.  -

-

{{#link href="/history"}}Learn more about us.{{/link}}

-
-
-
-
-

RubyGems

- -
-

- RubyGems is the code-packaging system for the Ruby community. - Started as a project in 2004 by the directors of Ruby Central and - friends, RubyGems has grown into an invaluable and wide-ranging - resource for the sharing of code among all members of the community. - With hosting support by Ruby Central, more information can be found - at rubygems.org. -

-
-
-
-
-
-
-

Supporting Ruby Central, Inc

- -
-

- The Ruby language could only have developed so robustly with its dedicated community. Our community consists of talented and passionate individual developers and many dynamic companies that recognize the value of helping foster a strong, sustainable environment for Ruby development. Join our {{#link href="/#/portal/signup"}}Member Community{{/link}}, Become a Sponsor, or {{#link href="/leadership"}}donate your time{{/link}} – there are numerous ways to {{#link href="/support"}}Support Us{{/link}}! -

-
-

- If you are looking for ways to help or have questions, please contact us at {{#link href="mailto:contact@rubycentral.org"}}contact@rubycentral.org{{/link}}. -

-
- -
-

42 Conferences and counting.

-
-
-
-
-
-
-
-
-

RubyConf

- -
-

- RubyConf is the Ruby community’s - annual celebration of all things Ruby! Every fall, we gather Ruby - enthusiasts together to enjoy detailed talks about exciting new - projects; meet and network with other Ruby developers; and hear from - the community’s leading minds, including Yukihiro Matsumoto - ("Matz"), the creator of the Ruby language. -

-

{{#link href="/conferences"}}Learn more{{/link}}

-
-
-
-
-
-
-

RailsConf

- -
-

- RailsConf is the world’s largest - gathering of Rails developers, brought together to further - discussion and learning about building, managing, and testing Rails - applications. With a specific focus on Rails, conference topics can - range from new users to administration to advanced techniques. -

-

{{#link href="/conferences"}}Learn more{{/link}}

-
-
-
-
-
-
-
-
-

Directors

-
    - {{#get "pages" order="title asc" filter="tags:hash-director" limit="all"}} +
    + {{#get 'pages' filter="title:'Home::Hero - Body'" limit='1'}} {{#foreach pages}} - {{> "person"}} - {{else}} -

    Create a page for each director, title the post with their name, set the featured image to their profile picture, and put an optional link in the page content. Add the tag #director for them to show up here.

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

Staff

-
    - {{#get "pages" order="featured desc, title asc" filter="tags:hash-staff" limit="all"}} - {{#foreach pages}} - {{> "person"}} - {{else}} -

    Create a page for each staff member, title the post with their name, set the featured image to their profile picture, and put an optional link in the page content. Add the tag #staff for them to show up here.

    - {{/foreach}} - {{/get}} -
-
- -
-

Open Source Team

-
    - {{#get "pages" order="featured desc, title asc" filter="tags:hash-oss-team" limit="all"}} + {{/get}} +
    + {{#get 'pages' filter='tag:hash-home-hero-cta' limit='2'}} + {{#foreach pages}} + {{content}} + {{/foreach}} + {{/get}} +
    + +
    +
    +

    Pillars of Ruby Central

    +
    +
    +
    + {{#get 'pages' filter="title:'Home::Pillars - Conferences'" limit='1'}} + {{#foreach pages}} + {{content}} + {{/foreach}} + {{/get}} + {{#get 'pages' filter="title:'Home::Pillars - Button'" limit='1'}} + {{#foreach pages}} + {{content}} + {{/foreach}} + {{/get}} +
    +
    + Conference room with numerous attendees and a main stage + RailsConf 2025 flyer with event dates and times + Young man in plaid shirt giving a hug to a person with a backpack +
    + +
    +
    +
    +
    +
    + {{#get 'pages' filter="title:'Home::OpenSource'" limit='1'}} + {{#foreach pages}} + {{content}} + {{/foreach}} + {{/get}} + {{#get 'pages' filter="title:'Home::OpenSource - Button'" limit='1'}} + {{#foreach pages}} + {{content}} + {{/foreach}} + {{/get}} +
    + +
    +
    +
    +
    +
    + {{#get 'pages' filter="title:'Home::Community'" limit='1'}} + {{#foreach pages}} + {{content}} + {{/foreach}} + {{/get}} + {{#get 'pages' filter="title:'Home::Community - Button'" limit='1'}} + {{#foreach pages}} + {{content}} + {{/foreach}} + {{/get}} +
    + Group of developers hugging and smiling together + +
    +
    +
    +
    + {{#get 'pages' filter="title:'Home::Support'" limit='1'}} {{#foreach pages}} - {{> "person"}} - {{else}} -

    Create a page for each open source team member, title the post with their name, set the featured image to their profile picture, and put an optional link in the page content. Add the tag #oss-team for them to show up here.

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

A special thanks to our supporters, you make this possible!

+
+ {{#get "pages" filter="tag:hash-corporate-sponsor-ruby" include="feature_image"}} + {{#foreach pages}} + {{#if feature_image}} + {{title}} + {{/if}} + {{/foreach}} + {{/get}} +
+
+ +{{> 'get-involved' }} diff --git a/import/routes.yaml b/import/routes.yaml index 8be07f8..a27bb9a 100644 --- a/import/routes.yaml +++ b/import/routes.yaml @@ -1,5 +1,8 @@ routes: /: home + /about/: + data: page.about + template: about collections: /news/: diff --git a/index.hbs b/index.hbs index 17cd3b5..f4c318e 100644 --- a/index.hbs +++ b/index.hbs @@ -1,9 +1,11 @@ {{!< default}} -
+
{{#foreach posts}} -

{{title}}

-

{{date published_at format="MMMM DD, YYYY"}}

+
+ {{title}} +

{{date published_at format="MMMM DD, YYYY"}}

+
{{/foreach}} {{pagination}} diff --git a/package.json b/package.json index e2f2907..da12c10 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,11 @@ }, "license": "private", "config": { - "card_assets": true, + "card_assets": { + "exclude": [ + "button" + ] + }, "posts_per_page": 15, "image_sizes": { "xxs": { diff --git a/partials/footer.hbs b/partials/footer.hbs index ba79a51..41e75ad 100644 --- a/partials/footer.hbs +++ b/partials/footer.hbs @@ -1,3 +1,42 @@ -
- {{navigation type="secondary"}} -
\ No newline at end of file +
+
+
+ +
+ Membership +
+
+
+ {{navigation type='secondary'}} +
+
+
+
+ +
+ +
+
+ + +
+
+
+ {{#get 'pages' filter="title:'Footer - Socials'" limit='1'}} + {{#foreach pages}} + {{content}} + {{/foreach}} + {{/get}} +
+ ©{{date format='YYYY'}} Ruby Central. All Rights Reserved. +
+
+
+
diff --git a/partials/get-involved.hbs b/partials/get-involved.hbs new file mode 100644 index 0000000..9bb531f --- /dev/null +++ b/partials/get-involved.hbs @@ -0,0 +1,33 @@ + diff --git a/partials/navbar.hbs b/partials/navbar.hbs deleted file mode 100644 index f955737..0000000 --- a/partials/navbar.hbs +++ /dev/null @@ -1,5 +0,0 @@ - \ No newline at end of file diff --git a/partials/navigation-top.hbs b/partials/navigation-top.hbs new file mode 100644 index 0000000..a169522 --- /dev/null +++ b/partials/navigation-top.hbs @@ -0,0 +1,20 @@ + diff --git a/partials/navigation.hbs b/partials/navigation.hbs index f6b8792..82e0ae1 100644 --- a/partials/navigation.hbs +++ b/partials/navigation.hbs @@ -1,8 +1,7 @@ -{{#if isSecondary}}{{else}}{{/if}} -
    - {{#foreach navigation}} -
  • - {{label}} -
    • - {{/foreach}} -
\ No newline at end of file +
    + {{#foreach navigation}} +
  • + {{label}} +
    • + {{/foreach}} +
diff --git a/src/css/abstracts/variables.css b/src/css/abstracts/variables.css deleted file mode 100644 index 9031fd0..0000000 --- a/src/css/abstracts/variables.css +++ /dev/null @@ -1,25 +0,0 @@ -:root { - --f-family: system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, - oxygen, ubuntu, cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - --h1: 2rem; - --h2: 1.7411rem; - --h3: 1.5157rem; - --h4: 1.3195rem; - --h5: 1.1487rem; - --h6: 1rem; - --small: 0.8706rem; - - --gap: 1rem; -} - -@media (min-width: 576px) { - :root { - --gap: 2rem; - } -} - -@media (min-width: 992px) { - :root { - --gap: 3rem; - } -} diff --git a/src/css/app.css b/src/css/app.css index 08eeac5..42dcd3c 100644 --- a/src/css/app.css +++ b/src/css/app.css @@ -1,26 +1,32 @@ -/* /1* Variables *1/ */ -/* @import './abstracts/variables.css'; */ +/* Base */ +@import './base/typography.css'; +@import './base/variables.css'; -/* /1* Base *1/ */ -/* @import './base/reset.css'; */ -/* @import './base/default.css'; */ -/* @import './base/typography.css'; */ -/* @import './base/grid.css'; */ +/* Components */ +@import './components/button.css'; +@import './components/get-involved.css'; +@import './components/sponsors.css'; +@import './components/profile-image.css'; +@import './components/static-content.css'; +@import './components/back.css'; +@import './components/divider.css'; -/* /1* Layout *1/ */ -@import './layout/navigation.css'; +/* Layout */ +@import './layout/reset.css'; @import './layout/dropdown.css'; -/* @import './layout/header.css'; */ -/* @import './layout/footer.css'; */ +@import './layout/container.css'; +@import './layout/navigation-top.css'; +@import './layout/footer.css'; -/* /1* Pages *1/ */ -/* @import './pages/index.css'; */ +/* Pages */ @import './pages/post.css'; -/* @import './pages/content.css'; */ +@import './pages/home.css'; +@import './pages/conferences.css'; +@import './pages/open-source.css'; +@import './pages/about.css'; -@import './rubycentral.css'; @import './modern.css'; -/* Vendor */ +/* Vendors */ @import './vendors/ghost.css'; @import '../../node_modules/tocbot/dist/tocbot.css'; diff --git a/src/css/base/default.css b/src/css/base/default.css deleted file mode 100644 index 5d12ee8..0000000 --- a/src/css/base/default.css +++ /dev/null @@ -1,11 +0,0 @@ -html { - scroll-behavior: smooth; - font-size: 1rem; - font-size: clamp( - 1rem, - 0.8392857142857143rem + 0.4464285714285714vw, - 1.375rem - ); - line-height: 1.6; - font-family: var(--f-family); -} diff --git a/src/css/base/grid.css b/src/css/base/grid.css deleted file mode 100644 index f02dbb6..0000000 --- a/src/css/base/grid.css +++ /dev/null @@ -1,10 +0,0 @@ -.grid, -.post { - display: grid; - grid-template-columns: var(--gap) 1fr minmax(100px, 992px) 1fr var(--gap); -} - -.grid > *, -.post > * { - grid-column: 3 / 4; -} diff --git a/src/css/base/reset.css b/src/css/base/reset.css deleted file mode 100644 index 1204b21..0000000 --- a/src/css/base/reset.css +++ /dev/null @@ -1,12 +0,0 @@ -*, -*::before, -*::after { - box-sizing: border-box; - padding: 0; - margin: 0; -} - -:link, -:visited { - color: currentColor; -} diff --git a/src/css/base/typography.css b/src/css/base/typography.css index 0472d3c..19387df 100644 --- a/src/css/base/typography.css +++ b/src/css/base/typography.css @@ -1,37 +1,79 @@ +@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); + +body { + color: var(--color-text); + font-family: 'Inter', sans-serif; + font-size: 1rem; + line-height: 1.5rem; +} + h1, h2, h3, h4, h5, h6 { - margin: 1.5em 0 0.5em; - line-height: 1.3; + font-family: 'Rubik', sans-serif; + line-height: normal; + margin: 0; + text-align: left; } -h1 { - font-size: var(--h1); +p { + margin-bottom: 16px; } h2 { - font-size: var(--h2); + font-size: 2rem; + font-weight: 700; + line-height: normal; } h3 { - font-size: var(--h3); + font-size: 1.125rem; + font-weight: 500; + line-height: 2.25rem; } -h4 { - font-size: var(--h4); +h6 { + font-size: 1.125rem; + font-weight: 300; + font-style: italic; } -h5 { - font-size: var(--h5); +a { + box-shadow: inset 0 -2px 0 var(--color-yellow); + color: inherit; + padding-bottom: 1px; + text-decoration: none; + transition: all 0.15s ease-in-out; } -h6 { - font-size: var(--h6); +a:hover { + box-shadow: inset 0 -2px 0 var(--color-red); } -small { - font-size: var(--small); +@media (min-width: 834px) { + h1 { + font-size: 2.625rem; + } + + h2 { + font-size: 2rem; + } + + h3 { + font-size: 1.625rem; + } +} + +@media (min-width: 1440px) { + h1 { + font-size: 4.5rem; + } + + h2 { + font-size: 3rem; + } } diff --git a/src/css/base/variables.css b/src/css/base/variables.css new file mode 100644 index 0000000..f214460 --- /dev/null +++ b/src/css/base/variables.css @@ -0,0 +1,16 @@ +:root { + --color-blue: #6288bc; + --color-darkred: #cf2821; + --color-divider: #f6f3f0; + --color-green: #71c09e; + --color-lightblue: #eff4f8; + --color-mutednavy: #444d5c; + --color-navy: #292e37; + --color-offwhite: #f0f4fd; + --color-purple: #755384; + --color-red: #e14943; + --color-text: #3b3e44; + --color-white: #fffdf9; + --color-yellow: #ffd065; + --layout-inner-max-width: 1135px; +} diff --git a/src/css/components/back.css b/src/css/components/back.css new file mode 100644 index 0000000..236c34b --- /dev/null +++ b/src/css/components/back.css @@ -0,0 +1,5 @@ +.back { + font-size: 16px; + display: inline-block; + margin: 0 0 20px 0; +} diff --git a/src/css/components/button.css b/src/css/components/button.css index c6c5b12..3a72194 100644 --- a/src/css/components/button.css +++ b/src/css/components/button.css @@ -1 +1,61 @@ -/* You would enter button styles here */ +.kg-button-card .kg-btn, +.kg-button-card .kg-btn-accent { + background: linear-gradient(0deg, #e14943 0%, #fa5d54 100%); + border: none; + border-radius: 12px; + box-shadow: 0px 4px 13px 0px rgba(250, 93, 84, 0.3); + color: white; + cursor: pointer; + display: flex; + font-family: 'Rubik', sans-serif; + font-size: 0.875rem; + font-weight: 700; + justify-content: center; + padding: 15px; + text-transform: uppercase; + width: 100%; +} + +.kg-button-card .kg-btn:hover, +.kg-button-card .kg-btn-accent:hover { + background: linear-gradient(0deg, #e14943 0%, #fa5d54 100%); + box-shadow: 0px 4px 13px 0px rgba(250, 93, 84, 0.4); +} + +.kg-button-card__group { + display: grid; + grid-template-columns: 1fr; + gap: 16px; +} + +.kg-button-card.kg-align-left, +.kg-button-card.kg-align-center { + display: flex; +} + +.kg-button-card.kg-align-left { + justify-content: flex-start; +} + +.kg-button-card.kg-align-center { + justify-content: center; +} + +@media (min-width: 768px) { + .kg-button-card__group { + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 24px; + } +} + +@media (min-width: 834px) { + .kg-button-card .kg-btn, + .kg-button-card .kg-btn-accent { + font-size: 1rem; + width: fit-content; + } + + .kg-button-card__group { + grid-template-columns: repeat(2, max-content); + } +} diff --git a/src/css/components/divider.css b/src/css/components/divider.css new file mode 100644 index 0000000..d82124a --- /dev/null +++ b/src/css/components/divider.css @@ -0,0 +1,5 @@ +hr { + border: 3px solid var(--color-yellow); + width: 70px; + margin: 0 0 30px; +} diff --git a/src/css/components/get-involved.css b/src/css/components/get-involved.css new file mode 100644 index 0000000..3aee8cc --- /dev/null +++ b/src/css/components/get-involved.css @@ -0,0 +1,131 @@ +.get-involved { + max-width: var(--layout-inner-max-width); + margin: auto; + padding: 70px 40px; + + h2, + p, + a { + color: var(--color-navy); + } + + hr { + margin: 0 auto 30px; + } + + span[data-members-error], + span[data-members-success] { + display: none; + font-size: 0.875rem; + font-weight: 700; + line-height: 1rem; + padding: 16px 0; + } + + .error span[data-members-error] { + color: var(--color-darkred); + display: block; + } + + .success span[data-members-success] { + color: green; + display: block; + } + + .get-involved__title { + font-size: 2rem; + font-weight: 500; + line-height: 3rem; + text-align: center; + margin-bottom: 16px; + } + + .get-involved__row { + display: grid; + gap: 16px; + grid-template-columns: 1fr; + } + + .get-involved__column--newsletter, + .get-involved__column--content { + display: flex; + flex-direction: column; + justify-content: center; + gap: 16px; + + p { + margin: 0; + text-align: center; + } + } + + .get-involved__column--newsletter { + p { + font-family: 'Rubik', sans-serif; + font-size: 1.5rem; + font-weight: 500; + line-height: 2.25rem; + } + + input { + border: 1px solid rgba(220, 233, 250, 1); + border-radius: 8px; + box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.07); + color: var(--color-navy); + min-height: 50px; + font-size: 1rem; + padding: 12px 20px; + width: 100%; + } + + input::placeholder { + color: rgba(160, 168, 184, 1); + } + + .get-involved__form__row { + display: grid; + gap: 12px; + grid-template-columns: 1fr; + width: 100%; + } + } + + @media (min-width: 834px) { + padding: 96px 56px 0; + + span[data-members-error], + span[data-members-success] { + text-align: center; + } + + .get-involved__title { + font-size: 2.625rem; + } + + .get-involved__column--newsletter { + .get-involved__form__row { + grid-template-columns: 300px max-content; + justify-content: center; + } + } + } + + @media (min-width: 1440px) { + padding: 96px 0; + + .get-involved__row { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .get-involved__column--newsletter, + .get-involved__column--content { + gap: 48px; + } + + .get-involved__column--content { + p { + text-align: left; + } + } + } +} diff --git a/src/css/components/profile-image.css b/src/css/components/profile-image.css new file mode 100644 index 0000000..5579bcd --- /dev/null +++ b/src/css/components/profile-image.css @@ -0,0 +1,10 @@ +.profile-image { + border: 2px solid var(--color-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: cover; +} diff --git a/src/css/components/sponsors.css b/src/css/components/sponsors.css new file mode 100644 index 0000000..a097077 --- /dev/null +++ b/src/css/components/sponsors.css @@ -0,0 +1,53 @@ +.sponsors { + background-color: white; + box-shadow: 0px 4px 13px 0px rgba(167, 167, 167, 0.3); + border-radius: 0 0 12px 12px; + padding: 0; + margin: 30px 0; + + .sponsors__title { + background-color: var(--color-red); + border-radius: 12px 12px 0 0; + color: white; + margin: 0; + padding: 36px 20px; + text-align: center; + } +} + +.sponsors__inner { + display: flex; + flex-direction: column; + column-gap: 60px; + row-gap: 20px; + padding: 60px 20px; + + img { + height: 60px; + max-width: 100%; + object-fit: contain; + } +} + +@media (min-width: 834px) { + .sponsors { + .sponsors__title { + font-size: 1.125rem; + line-height: 1.75rem; + } + } + + .sponsors__inner { + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + } +} + +@media (min-width: 1440px) { + .sponsors { + .sponsors__title { + font-size: 1.5rem; + } + } +} diff --git a/src/css/components/static-content.css b/src/css/components/static-content.css new file mode 100644 index 0000000..37bd1d8 --- /dev/null +++ b/src/css/components/static-content.css @@ -0,0 +1,43 @@ +.static-content { + width: 50%; + margin: 0 auto; + max-width: var(--layout-inner-max-width); +} + +.static-content.upcoming-conference-container { + margin-top: -100px; +} + +.static-content h3 { + color: var(--color-red); +} + +.static-content ul { + 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; +} + +.pagination { + display: flex; + justify-content: space-between; +} + +@media screen and (max-width: 900px) and (orientation: portrait), + (max-width: 823px) and (orientation: landscape) { + .static-content { + width: auto; + padding: 0 20px; + } + + .static-content.upcoming-conference-container { + margin-top: -5px; + } +} diff --git a/src/css/layout/container.css b/src/css/layout/container.css new file mode 100644 index 0000000..1d1570f --- /dev/null +++ b/src/css/layout/container.css @@ -0,0 +1,26 @@ +.container, +.container--full-width { + margin: 0 auto; +} + +.container { + max-width: var(--layout-inner-max-width); + padding: 0 20px; + width: 100%; +} + +.container--full-width { + max-width: unset; +} + +@media (min-width: 834px) { + .container { + padding: 0 40px; + } +} + +@media (min-width: 1440px) { + .container { + padding: 0; + } +} diff --git a/src/css/layout/footer.css b/src/css/layout/footer.css index 3f5e256..10b8f0e 100644 --- a/src/css/layout/footer.css +++ b/src/css/layout/footer.css @@ -1 +1,213 @@ -/* Add footer styles here */ +.footer { + background-color: var(--color-lightblue); + width: 100%; + + .footer__inner { + display: flex; + flex-direction: column; + margin: auto; + max-width: var(--layout-inner-max-width); + padding: 40px; + } + + .footer__top { + border-bottom: 2px solid #dce9fa; + display: grid; + grid-template-columns: 1fr; + margin-bottom: 25px; + padding-bottom: 36px; + } + + .footer__logo { + justify-self: center; + max-width: 245px; + width: 100%; + } + + .footer__links { + font-family: 'Rubik', sans-serif; + font-size: 1rem; + line-height: 1.125rem; + margin-bottom: 36px; + + ul { + align-items: center; + display: flex; + flex-direction: column; + list-style: none; + margin: 0; + padding: 0; + } + + li { + align-items: center; + display: flex; + min-height: 44px; + } + + a { + box-shadow: none; + } + + a:hover { + box-shadow: inset 0 -2px 0 var(--color-red); + } + } + + .footer__bottom { + display: grid; + gap: 48px; + grid-template-columns: 1fr; + } + + .footer__form { + align-items: center; + display: flex; + flex-direction: column; + + span[data-members-error], + span[data-members-success] { + display: none; + font-size: 0.875rem; + font-weight: 700; + line-height: 1rem; + padding: 16px 0; + } + } + + .error span[data-members-error] { + color: var(--color-darkred); + display: block; + } + + .success span[data-members-success] { + color: green; + display: block; + } + + .footer__form__row { + display: grid; + gap: 12px; + grid-template-columns: 1fr; + justify-content: center; + width: 100%; + + input { + border: 1px solid #dce9fa; + border-radius: 8px; + color: var(--color-navy); + min-height: 50px; + font-size: 1rem; + padding: 12px 20px; + width: 100%; + } + + input::placeholder { + color: rgba(160, 168, 184, 1); + } + + .kg-button-card { + width: 100%; + } + } + + .footer__bottom__socials { + align-items: center; + display: flex; + flex-direction: column; + gap: 16px; + } + + .footer__bottom__socials__links { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: 14px; + justify-content: center; + + figcaption { + display: none; + } + + a { + box-shadow: none; + } + + figure.kg-image-card { + margin: 0; + + a { + align-items: center; + display: flex; + height: 24px; + width: 24px; + } + } + } + + @media (min-width: 834px) { + .footer__top { + align-items: center; + grid-template-columns: repeat(2, 1fr); + padding-bottom: 36px; + + .kg-button-card { + justify-self: end; + } + } + + .footer__logo { + justify-self: start; + margin: 0 0 -14px -10px; + } + + .footer__bottom { + gap: 36px; + grid-template-columns: 1fr max-content; + } + + .footer__form { + align-items: flex-start; + } + + .footer__form__row { + grid-template-columns: 1fr max-content; + } + + .footer__links { + ul { + column-gap: 24px; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + row-gap: 8px; + } + } + } + + @media (min-width: 1440px) { + .footer__inner { + padding: 40px 0; + } + + .footer__bottom { + gap: 0; + grid-template-columns: repeat(2, 1fr); + } + + .footer__bottom__socials { + justify-self: end; + } + + .footer__form__row { + grid-template-columns: 280px max-content; + justify-content: start; + } + + .footer__links { + ul { + justify-content: end; + } + } + } +} diff --git a/src/css/layout/forms.css b/src/css/layout/forms.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/css/layout/header.css b/src/css/layout/header.css deleted file mode 100644 index 15b6da6..0000000 --- a/src/css/layout/header.css +++ /dev/null @@ -1,3 +0,0 @@ -header { - margin-bottom: 3rem; -} diff --git a/src/css/layout/navigation-top.css b/src/css/layout/navigation-top.css new file mode 100644 index 0000000..eb9afc2 --- /dev/null +++ b/src/css/layout/navigation-top.css @@ -0,0 +1,148 @@ +.navigation--top { + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + + .navigation__inner { + align-items: center; + display: grid; + grid-template-areas: 'logo trigger membership'; + grid-template-columns: 1fr repeat(2, max-content); + margin: auto; + max-width: var(--layout-inner-max-width); + padding: 8px 20px 8px 10px; + } + + .navigation__logo { + box-shadow: none; + display: flex; + grid-area: logo; + max-width: fit-content; + + img { + height: 75px; + width: 75px; + } + } + + .navigation__mobile-menu-trigger { + background-color: white; + background-repeat: no-repeat; + background-size: contain; + border: none; + cursor: pointer; + height: 24px; + margin-right: 20px; + width: 24px; + } + + .navigation__mobile-menu-trigger.closed { + background-image: url('/assets/images/icon__burger.svg'); + } + + .navigation__mobile-menu-trigger.opened { + background-image: url('/assets/images/icon__close.svg'); + } + + .navigation__list__wrapper { + grid-area: trigger; + position: relative; + } + + .navigation__list { + background-color: white; + border-color: rgba(0, 0, 0, 0.1); + border-radius: 0 0 8px 8px; + border-style: solid; + border-width: 0 1px 1px 1px; + box-shadow: 0px 10px 30px 0 rgba(0, 0, 0, 0.04); + display: none; + flex-direction: column; + gap: 20px; + left: 25%; + list-style: none; + margin: 0; + min-width: 275px; + padding: 16px 30px; + position: absolute; + top: 61.5px; + transform: translateX(-50%); + z-index: 1; + } + + .navigation__list--mobile-closed { + display: none; + } + + .navigation__list--mobile-opened { + display: flex; + } + + .navigation__list--mobile-opened::before { + border-top: 4px solid var(--color-yellow); + content: ''; + display: block; + position: absolute; + right: calc(50% - 37.5px); + top: -3px; + width: 75px; + } + + .navigation__item { + a { + align-items: center; + box-shadow: none; + color: var(--color-navy); + display: flex; + font-family: 'Rubik', sans-serif; + font-size: 1rem; + line-height: 1.125rem; + min-height: 30px; + padding: 12px; + } + + a:hover { + background-color: var(--color-lightblue); + } + } + + .navigation__membership { + grid-area: membership; + } + + @media (min-width: 1440px) { + .navigation__mobile-menu-trigger { + display: none; + } + + .navigation__inner { + grid-template-columns: max-content 1fr max-content; + padding: 0; + } + + .navigation__logo { + margin-left: -8px; + } + + .navigation__mobile-menu-trigger { + display: none; + } + + .navigation__list { + border: none; + box-shadow: none; + display: flex; + flex-direction: row; + gap: 0; + justify-self: center; + left: auto; + min-width: unset; + padding: 0; + position: relative; + top: auto; + transform: unset; + } + + .navigation__list::before { + display: none; + } + } +} diff --git a/src/css/layout/navigation.css b/src/css/layout/navigation.css deleted file mode 100644 index 89c1314..0000000 --- a/src/css/layout/navigation.css +++ /dev/null @@ -1,196 +0,0 @@ -nav, -footer { - position: relative; - padding: 1rem 1.5rem; -} - -nav ul, -footer ul { - display: flex; - gap: 2rem; - list-style-type: none; - font-size: var(--small); -} - -nav, -nav ul { - display: flex; - width: 100%; - align-items: center; - max-width: 1024px; - justify-content: space-between; - margin: 0 auto; -} - -nav .logo-circle { - transition: transform 0.25s ease-in-out; - flex-shrink: 0; - width: 30px; - height: 30px; - left: 20px; - top: 20px; - margin: 10px 0 0 0; - border-radius: 30px; - box-shadow: 0 9px 18px rgba(129, 0, 0, 0.3), 0 2px 5px rgba(137, 0, 0, 0.2); - background: no-repeat center 6px / 80% url(/assets/images/gem-logo.svg), - linear-gradient(to top, #df3434 0%, #fb5e55 100%); -} - -nav .logo-circle { - transform: scale(1.05); -} - -footer { - padding: 130px 0; - text-align: center; -} -footer ul.nav { - justify-content: center; - margin: 0; - padding: 0; -} -footer ul.nav a, -nav > ul > li:last-child > a { - background: linear-gradient(to top, #df3434 0%, #fb5e55 100%); - box-shadow: 0 15px 28px rgba(129, 0, 0, 0.2), 0 2px 5px rgba(137, 0, 0, 0.2); - padding: 10px 20px; - border-radius: 10px; - color: #fff; - font-weight: bold; -} - -nav li.subitem { - text-align: center; -} - -footer ul.nav a { - padding: 15px 20px; -} -footer .nav .nav-contact-us > a > span { - background-attachment: local; - background-image: url('/assets/images/contact-icon.svg'); - background-clip: padding-box; - background-origin: padding-box; - background-repeat: no-repeat; - background-position: top 2px left; - background-size: 20px; - padding-left: 25px; -} - -nav .menu-icon { - display: none; - width: 30px; - height: 20px; - margin: auto 0; - box-shadow: none; -} - -nav .menu-icon.open { - background: url(/assets/images/open-menu.svg) center no-repeat; -} - -nav .menu-icon.close { - background: url(/assets/images/close-menu.svg) center no-repeat; -} - -@media screen and (max-width: 1100px) and (orientation: portrait), -(max-width: 1005px) and (orientation: landscape) { - nav { - overflow-x: hidden; - } - - nav.closed .menu-icon.close, - nav.open .menu-icon.open { - display: none; - } - - nav.open .menu-icon.close, - nav.closed .menu-icon.open { - display: inline-block; - } - - nav.open { - overflow: visible; - } - - nav.open ul { - right: 0; - } - nav.closed ul { - right: -100%; - } - - nav ul { - position: absolute; - display: flex; - flex-direction: column; - align-items: flex-end; - justify-content: flex-start; - top: 0; - right: 0; - width: 33%; - padding: 1rem 2rem 8rem 1.5rem; - margin: 4.5rem 0px; - z-index: 2; - background: #fff; - border: 2px solid #f4eee6; - border-top: none; - border-radius: 0 0 0 20px; - transition: right 0.4s ease-in-out; - box-shadow: -4px 4px 5px rgba(253, 204, 204, 0.3); - } - - nav ul:before { - content: ''; - position: absolute; - left: -203%; - top: 0; - border: 2px solid #f4eee6; - border-left: none; - border-bottom: none; - border-radius: 0 20px 0 0; - box-shadow: 5px 0px #fff, inset -1px 1px 3px rgba(253, 204, 204, 0.3); - height: 15px; - width: 202.5%; - } - - nav.closed ul:before { - content: none; - } - - nav > ul > li:last-child { - margin-right: 0px; - padding-right: 0px; - } -} - -@media screen and (max-width: 600px) and (orientation: portrait), -(max-width: 548px) and (orientation: landscape) { - footer ul { - flex-direction: column; - } - footer ul li { - margin: 1rem auto; - } - - nav ul { - width: 50%; - } - - nav ul::before { - left: -102%; - width: 101.5%; - } -} - -.visually-hidden { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} \ No newline at end of file diff --git a/src/css/layout/reset.css b/src/css/layout/reset.css new file mode 100644 index 0000000..37aa7e0 --- /dev/null +++ b/src/css/layout/reset.css @@ -0,0 +1,24 @@ +* { + box-sizing: border-box; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +html { + scroll-behavior: smooth; +} + +body { + margin: 0; + padding: 0; +} + +main { + padding: 20px 0; +} + +@media (min-width: 834px) { + main { + padding: 48px 0; + } +} diff --git a/src/css/modern.css b/src/css/modern.css index 1c070ea..d519d5a 100644 --- a/src/css/modern.css +++ b/src/css/modern.css @@ -3,14 +3,9 @@ padding: 2.5rem; padding-top: 0; } - - h1 { - text-transform: uppercase; - } h1, h2, h3 { - font-family: Rubik; margin-bottom: 1rem; column-span: all !important; > a { @@ -19,7 +14,6 @@ } h1, h2 { - font-weight: bold; position: relative; padding-bottom: 0.75rem; @@ -30,46 +24,12 @@ right: 0; bottom: 0; height: 3px; - background-color: var(--yellow); + background-color: var(--color-yellow); width: 70px; } } - h3 { - font-size: 18px !important; - } - h6 { - font-size: 18px; - font-family: 'Inter var', sans-serif; - font-weight: 300; - font-style: italic; - } - @media (min-width: 700px) { - h1 { - font-size: 42px; - } - h2 { - font-size: 32px; - } - h3 { - font-size: 26px !important; - } - } - @media (min-width: 1350px) { - h1 { - font-size: 72px; - } - h2 { - font-size: 48px; - } - p { - font-size: 18px; - } - } - - p, - ul { - line-height: 1.4rem; - font-size: 16px; + h1 { + text-transform: uppercase; } .mission-and-vision { @@ -78,11 +38,6 @@ gap: 2.5rem; margin-bottom: 2.5rem; margin-top: 2.5rem; - padding: 0 0 2.5rem 0; - - h3 { - font-size: 42px; - } } .post .column img { @@ -93,15 +48,15 @@ } .program-support { - background-color: var(--lightblue); + background-color: var(--color-lightblue); margin-bottom: 2.5rem; margin-top: 2.5rem; border-radius: 0.5rem; - padding-top: 1rem; + padding: 20px; } .program-support span { - background-color: var(--yellow); + background-color: var(--color-yellow); padding: 1rem; margin: 0 1rem 1rem 0; font-size: 1.25rem; @@ -119,28 +74,28 @@ } } .program-support span:nth-of-type(2) { - background-color: var(--red); + background-color: var(--color-red); color: white; } .program-support span:nth-of-type(3) { color: white; - background-color: var(--blue); + background-color: var(--color-blue); } .program-support span:nth-of-type(4) { - background-color: var(--green); + background-color: var(--color-green); } .projects { - background-color: var(--darkred); - color: var(--white); + background-color: var(--color-darkred); + color: var(--color-white); margin-bottom: 2.5rem; margin-top: 2.5rem; border-radius: 0.5rem; - padding-top: 1rem; + padding: 20px; } .project { width: 100%; - background-color: var(--navy); - color: var(--white); + background-color: var(--color-navy); + color: var(--color-white); border-radius: 0.5rem; padding: 1.5rem; padding-bottom: 2rem; @@ -199,7 +154,6 @@ } .mission-and-vision { grid-template-columns: 1fr 1fr; - padding: 0 2.5rem 4rem 2.5rem; } } @@ -220,6 +174,10 @@ max-width: calc((100vw - 900px) / 2); padding-right: 2rem; } + + .projects, .program-support { + padding: 60px; + } } .gh-toc .is-active-link::before { @@ -230,18 +188,6 @@ text-align: center; } - .grid { - display: grid; - 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; @@ -270,11 +216,15 @@ width: 45%; } .level .name { - text-align: center; padding: 1rem 0 0.25rem 0; margin: auto; border-top-left-radius: .75rem; border-top-right-radius: .75rem; + + h3 { + text-align: center; + + } } .corporate-sponsors { @@ -282,6 +232,7 @@ flex-wrap: wrap; justify-content: space-between; gap: 1rem; + margin-top: 48px; } .level.ruby, .level.gold { flex: 1 1 100%; @@ -296,19 +247,19 @@ } } .level.ruby .name { - background-color: var(--red); - color: var(--white); + background-color: var(--color-red); + color: var(--color-white); } .level.gold .name { - background-color: var(--yellow); + background-color: var(--color-yellow); } .level.silver .name { - background-color: var(--blue); - color: var(--white); + background-color: var(--color-blue); + color: var(--color-white); } .level.major .name { - background-color: var(--green); - color: var(--white); + background-color: var(--color-green); + color: var(--color-white); } .level .bucket { border-bottom-left-radius: .75rem; diff --git a/src/css/pages/about.css b/src/css/pages/about.css new file mode 100644 index 0000000..a915628 --- /dev/null +++ b/src/css/pages/about.css @@ -0,0 +1,341 @@ +.page-about { + main { + padding-top: 0; + } + + .page-about__hero { + align-items: center; + background-image: url('/assets/images/about__hero--background.jpg'); + background-repeat: no-repeat; + background-size: cover; + color: white; + display: flex; + justify-content: center; + } + + .page-about__hero__inner { + max-width: 1135px; + padding: 96px 40px; + + h2, + p { + margin-bottom: 32px; + } + + h1 { + margin-bottom: 16px; + text-transform: uppercase; + } + + h2 { + font-size: 2rem; + } + } + + .page-about__position { + background: var(--color-offwhite); + margin: auto; + } + + .page-about__position__inner { + display: grid; + gap: 48px; + grid-template-areas: 'image' 'content'; + grid-template-columns: 1fr; + justify-content: center; + margin: auto; + max-width: 1135px; + padding: 70px 40px; + } + + .page-about__position--content { + font-family: 'Rubik', sans-serif; + font-size: 1rem; + grid-area: content; + line-height: 1.75rem; + } + + .page-about__position--image { + border-radius: 8px; + grid-area: image; + height: 400px; + margin: auto; + max-width: 345px; + object-fit: cover; + width: 100%; + } + + .page-about__history { + background-color: var(--color-navy); + margin: auto; + } + + .page-about__history__inner { + margin: auto; + max-width: 1135px; + padding: 70px 40px; + } + + .page-about__history__title { + color: white; + margin-bottom: 16px; + text-transform: uppercase; + } + + .page-about__history__section-one, + .page-about__history__section-two { + margin-bottom: 48px; + } + + .page-about__history__section-one, + .page-about__history__section-three { + display: grid; + gap: 48px; + grid-template-columns: 1fr; + } + + .page-about__history__section-one--content, + .page-about__history__section-three--content { + color: white; + + p:first-child { + margin-top: 0; + } + } + + .page-about__history__section-one--image, + .page-about__history__section-three--image { + border-radius: 8px; + height: 400px; + object-fit: cover; + width: 100%; + } + + .page-about__history__section-two { + background-color: var(--color-offwhite); + border-radius: 8px; + display: grid; + gap: 48px; + grid-template-columns: 1fr; + padding: 40px; + } + + .page-about__history__section-two--content, + .page-about__history__section-three--content { + p:first-child { + margin-top: 0; + } + + p:last-child { + margin-bottom: 0; + } + } + + .page-about__history__section-two--image { + border-radius: 8px; + height: 150px; + object-fit: cover; + width: 100%; + } + + .page-about__team { + display: flex; + flex-direction: column; + gap: 24px; + margin: auto; + max-width: 1135px; + padding: 96px 40px; + } + + .page-about__team__header { + h2 { + color: var(--color-red); + margin-bottom: 16px; + text-transform: uppercase; + } + + hr { + margin-bottom: 16px; + } + + p { + font-family: 'Rubik', sans-serif; + font-size: 1.5rem; + font-style: italic; + font-weight: 300; + line-height: 3rem; + margin: 0; + } + } + + .page-about__team__member { + margin: 0; + + h4, + p { + margin: 0; + } + } + + .page-about__team__member__image { + border-radius: 8px; + height: 300px; + margin-bottom: 16px; + object-fit: cover; + width: 100%; + } + + .page-about__team__member--details { + display: flex; + flex-direction: column; + gap: 8px; + } + + .page-about__team__staff, + .page-about__team__directors { + background-color: var(--color-offwhite); + border-radius: 8px; + padding: 36px; + } + + .page-about__team__staff__header, + .page-about__team__directors__header { + margin-bottom: 36px; + + h3 { + margin-bottom: 8px; + } + + p { + margin: 0; + } + } + + .page-about__team__staff__inner, + .page-about__team__directors__inner { + display: grid; + gap: 24px; + grid-template-columns: 1fr; + } + + @media (min-width: 600px) { + .page-about__team__staff__inner, + .page-about__team__directors__inner { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + } + + @media (min-width: 834px) { + .page-about__hero { + min-height: 834px; + } + + .page-about__hero__inner { + padding: 0 56px; + + h2 { + font-size: 2rem; + } + } + + .page-about__position__inner { + align-items: center; + grid-template-areas: 'image content'; + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .page-about__position--content { + font-size: 1.125rem; + } + + .page-about__position--image { + height: 100%; + } + + .page-about__history__section-one, + .page-about__history__section-two { + margin-bottom: 96px; + } + + .page-about__history__section-one, + .page-about__history__section-three { + grid-template-columns: 1fr 1fr; + } + + .page-about__history__section-one--image, + .page-about__history__section-three--image { + height: 100%; + max-height: 550px; + } + + .page-about__history__section-two--image { + height: 300px; + } + + .page-about__team { + gap: 48px; + } + + .page-about__team__header { + p { + font-size: 2rem; + } + } + + .page-about__team__staff__inner, + .page-about__team__directors__inner { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + } + + @media (min-width: 1440px) { + .page-about__hero { + min-height: 980px; + } + + .page-about__hero__inner { + padding: 0; + } + + .page-about__position__inner { + grid-template-columns: 352px 1fr; + } + + .page-about__position--content { + font-size: 1.5rem; + } + + .page-about__position--image { + max-height: 500px; + max-width: 100%; + } + + .page-about__history__section-one, + .page-about__history__section-three { + grid-template-columns: 450px 1fr; + } + + .page-about__history__section-one--image, + .page-about__history__section-three--image { + max-height: 350px; + } + + .page-about__history__section-two--image { + height: 375px; + } + + .page-about__team { + gap: 96px; + padding: 96px 0; + } + + .page-about__team__header { + margin-bottom: -24px; + } + + .page-about__team__staff__inner, + .page-about__team__directors__inner { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + } +} diff --git a/src/css/pages/conferences.css b/src/css/pages/conferences.css new file mode 100644 index 0000000..9dd5c04 --- /dev/null +++ b/src/css/pages/conferences.css @@ -0,0 +1,9 @@ +.page-conferences { + #rubyconf a, + #railsconf a, + .static-content a { + text-shadow: 0 2px 0 var(--color-white), 1px 2px 0 var(--color-white), + -1px 2px 0 var(--color-white), 2px 2px 0 var(--color-white), + -2px 2px 0 var(--color-white); + } +} diff --git a/src/css/pages/content.css b/src/css/pages/content.css deleted file mode 100644 index 6591380..0000000 --- a/src/css/pages/content.css +++ /dev/null @@ -1,11 +0,0 @@ -/* These styles define the content of a post (and page). You could add styles for bold font, quotes, etc. */ - -.post > * { - margin-bottom: 1rem; -} - -.post > ul, -.post > ol { - padding-inline-start: 1rem; - list-style-position: inside; -} diff --git a/src/css/pages/home.css b/src/css/pages/home.css new file mode 100644 index 0000000..b468b05 --- /dev/null +++ b/src/css/pages/home.css @@ -0,0 +1,406 @@ +.home-template { + .home-template__hero { + display: flex; + flex-direction: column; + gap: 14px; + padding: 20px 40px 40px; + max-width: var(--layout-inner-max-width); + margin: auto; + + h1 { + color: var(--color-red); + font-size: 2rem; + font-weight: 700; + line-height: normal; + text-transform: uppercase; + } + + h2 { + color: var(--color-navy); + font-size: 1.5rem; + font-weight: 500; + line-height: 2.25rem; + text-transform: unset; + } + + h3 { + color: var(--color-navy); + font-size: 0.875rem; + font-weight: 400; + line-height: 1.125rem; + } + } + + .home-template__pillars { + color: white; + background-image: url('/assets/images/home__pillars--background.jpg'); + } + + .home-template__pillars, + .home-template__support { + h2 { + margin-bottom: 16px; + text-transform: uppercase; + } + } + + .home-template__community { + color: white; + background-image: url('/assets/images/home__community--background.jpg'); + } + + .home-template__pillars, + .home-template__community { + background-position: bottom center; + background-size: cover; + background-repeat: no-repeat; + width: 100%; + border-radius: 0; + padding: 40px; + } + + .home-template__pillars__inner, + .home-template__community__inner { + max-width: var(--layout-inner-max-width); + margin: auto; + } + + .home-template__pillars__details, + .home-template__community__details { + display: grid; + background-color: var(--color-navy); + border-radius: 8px; + gap: 48px; + grid-template-columns: 1fr; + padding: 36px 24px; + } + + .home-template__pillars__details { + grid-template-areas: 'image-grid' 'content' 'stats'; + } + + .home-template__community__details { + grid-template-areas: 'image' 'content' 'stats'; + } + + .home-template__pillars__details--image-grid { + display: grid; + gap: 16px; + grid-area: image-grid; + grid-template-areas: 'image-item-three' 'image-item-one' 'image-item-two'; + + img { + border-radius: 8px; + height: 140px; + object-fit: cover; + object-position: center; + width: 100%; + } + + .home-template__pillars__details--image-grid_item--one { + grid-area: image-item-one; + } + + .home-template__pillars__details--image-grid_item--two { + grid-area: image-item-two; + object-position: top; + } + + .home-template__pillars__details--image-grid_item--three { + grid-area: image-item-three; + } + } + + .home-template__community__details--image { + border-radius: 8px; + grid-area: image; + object-fit: cover; + width: 100%; + } + + .home-template__pillars__details--content, + .home-template__community__details--content { + display: flex; + flex-direction: column; + gap: 16px; + grid-area: content; + + p { + margin-bottom: 0; + } + + p:first-of-type { + flex-grow: 1; + } + + small { + font-size: 0.875rem; + line-height: 1.5rem; + } + + .kg-button-card a.kg-btn, + .kg-button-card a.kg-btn-accent { + box-shadow: none; + } + } + + .home-template__pillars__details--stats, + .home-template__community__details--stats { + background-color: var(--color-mutednavy); + border-radius: 8px; + display: grid; + grid-template-columns: 1fr; + gap: 12px; + grid-area: stats; + padding: 20px; + + section { + display: grid; + justify-content: center; + gap: 12px; + padding: 12px; + + h3, + p { + text-align: center; + } + + h3 { + font-size: 1.5rem; + font-weight: 500; + line-height: 1.75rem; + text-transform: uppercase; + } + + p { + font-size: 0.75rem; + line-height: 1rem; + } + } + } + + .home-template__open-source { + display: grid; + gap: 48px; + grid-template-areas: 'open-source-content' 'open-source-stats'; + grid-template-columns: 1fr; + margin: auto; + max-width: 900px; + padding: 70px 40px; + + h2 { + text-transform: uppercase; + } + } + + .home-template__open-source__content { + color: var(--color-navy); + display: flex; + flex-direction: column; + gap: 16px; + grid-area: open-source-content; + + p:first-of-type { + flex-grow: 1; + } + + small { + font-size: 0.875rem; + line-height: 1.5rem; + } + + hr { + margin: 0; + } + } + + .home-template__open-source__stats { + color: white; + background-color: var(--color-red); + border-radius: 8px; + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 16px; + grid-area: open-source-stats; + padding: 48px 20px; + + section { + display: flex; + flex-direction: column; + gap: 8px; + + h3, + p { + text-align: center; + } + + h3 { + font-size: 2rem; + line-height: 3rem; + text-transform: uppercase; + } + + p { + font-size: 0.875rem; + line-height: 1rem; + } + } + } + + .home-template__support { + max-width: var(--layout-inner-max-width); + margin: auto; + padding: 70px 40px 0; + + h2, + p { + text-align: center; + } + + hr { + margin: 0 auto 30px; + } + } + + @media (min-width: 834px) { + .home-template__hero { + gap: 24px; + padding: 48px 56px 96px; + + h1 { + font-size: 4.5rem; + } + + h2 { + font-size: 2.625rem; + line-height: 3rem; + } + + h3 { + font-size: 1.125rem; + line-height: 1.75em; + } + } + + .home-template__pillars, + .home-template__community { + padding: 96px 56px; + } + + .home-template__pillars__details, + .home-template__community__details { + padding: 80px 48px; + } + + .home-template__pillars__details--image-grid { + grid-template-areas: 'image-item-three image-item-three' 'image-item-one image-item-two'; + grid-template-columns: repeat(2, minmax(0, 1fr)); + + img { + height: 220px; + } + } + + .home-template__community__details--image { + height: 350px; + } + + .home-template__pillars__details--stats, + .home-template__community__details--stats { + gap: 0; + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .home-template__open-source { + grid-template-areas: 'open-source-stats open-source-content'; + grid-template-columns: 275px 1fr; + padding: 70px; + } + + .home-template__open-source__stats { + gap: 55px; + } + + .home-template__support { + padding: 96px 56px 0; + } + } + + @media (min-width: 1440px) { + .home-template__hero { + padding: 48px 0 96px; + + h3 { + font-size: 1.5rem; + line-height: 1.75rem; + max-width: 693px; + } + } + + .home-template__pillars { + padding: 96px 0; + } + + .home-template__pillars__details { + grid-template-areas: 'content image-grid' 'stats stats'; + grid-template-columns: 335px 1fr; + } + + .home-template__community__details { + grid-template-areas: 'image content' 'stats stats'; + grid-template-columns: 1fr 335px; + } + + .home-template__pillars__details--content, + .home-template__community__details--content { + h3 { + margin-bottom: 8px; + } + } + + .home-template__pillars__details--image-grid { + grid-template-areas: 'image-item-one image-item-three' 'image-item-two image-item-three'; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; + + img { + height: 100%; + } + } + + .home-template__community__details--image { + height: 445px; + object-position: 50% 65%; + } + + .home-template__pillars__details--stats, + .home-template__community__details--stats { + section { + h3 { + font-size: 2.625rem; + line-height: 3rem; + } + } + } + + .home-template__open-source { + gap: 96px; + grid-template-columns: 330px 1fr; + padding: 70px 0; + } + + .home-template__open-source__stats { + section { + h3 { + font-size: 2.625rem; + line-height: 3rem; + } + } + } + + .home-template__support { + padding: 96px 0 66px; + } + } +} diff --git a/src/css/pages/index.css b/src/css/pages/index.css deleted file mode 100644 index 7f607b0..0000000 --- a/src/css/pages/index.css +++ /dev/null @@ -1,34 +0,0 @@ -.home-template article { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 1rem; - margin-bottom: clamp(3rem, 3rem + 2vw, 5rem); -} - -@media (min-width: 576px) { - .home-template article { - flex-wrap: initial; - } -} - -.home-template article h2 { - margin-top: 0; -} -.home-template article p:not(:last-child) { - margin-bottom: 1rem; - font-size: var(--small); -} - -.home-template article img { - width: 200px; - height: 200px; - object-fit: cover; -} - -@media (min-width: 786px) { - .home-template article img { - width: 300px; - height: 300px; - } -} diff --git a/src/css/pages/open-source.css b/src/css/pages/open-source.css new file mode 100644 index 0000000..7c9899a --- /dev/null +++ b/src/css/pages/open-source.css @@ -0,0 +1,18 @@ +.page-open-source { + .page-open-source__team { + display: grid; + grid-template-columns: 1fr; + } + + @media (min-width: 834px) { + .page-open-source__team { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + } + + @media (min-width: 1440px) { + .page-open-source__team { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + } +} diff --git a/src/css/pages/post.css b/src/css/pages/post.css index d885596..bc7e9f2 100644 --- a/src/css/pages/post.css +++ b/src/css/pages/post.css @@ -13,7 +13,6 @@ .post h1, .post h2, .post h3 { - font-family: Rubik; margin-bottom: 0.25rem; } @@ -39,6 +38,26 @@ margin-bottom: 0.5em; } +.post__list { + display: flex; + flex-direction: column; + gap: 24px; +} + +.post__list__item { + a { + color: var(--color-red); + font-size: 1.5rem; + font-weight: 700; + line-height: 2rem; + } + + p { + font-style: italic; + margin-top: 8px; + } +} + /* tocbot stuff */ .gh-toc > .toc-list { position: relative; @@ -54,6 +73,12 @@ margin-bottom: 5px; } +#railsconf-interest { + background: #fff; + border: 2px solid #f4eee6; + color: var(--color-text); +} + @media (min-width: 400px) { .post { width: 95%; diff --git a/src/css/rubycentral.css b/src/css/rubycentral.css deleted file mode 100644 index 39c5cde..0000000 --- a/src/css/rubycentral.css +++ /dev/null @@ -1,982 +0,0 @@ -@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; - --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); -} - -#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); -} - -#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); -} - -#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); -} - -@supports (font-variation-settings: normal) { - html { - font-family: 'Inter var', sans-serif; - } -} - -* { - box-sizing: border-box; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -html { - 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; -} - -.padded-container { - padding: calc(8px + 1.5625vw); -} - -body p { - line-height: 27px; - margin: 0 0 27px 0; -} - -body p:last-child { - 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; -} - -body a:hover { - box-shadow: inset 0 -2px 0 var(--red); - transition: all .15s ease-in-out; -} - -header { - text-align: center; - padding: 50px 0 70px 0; -} - -header #main-logo { - 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; -} - -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%); -} - -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); -} - -header #main-logo:hover .logo-square .logo-circle { - 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; -} - -header h2 { - color: var(--red); - font-size: 24px; - font-weight: 400; - margin: 0; -} - -.upcoming { - 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 ; -} - -.upcoming .homepage-featured:nth-child(1) { - background: var(--blue) 20px center no-repeat; -} - -.upcoming .homepage-featured:nth-child(2) { - 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; -} - -.upcoming ul { - 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; -} - -.upcoming ul li img { - position: absolute; - left: 20px; - top: 10px; -} - -.upcoming ul li a { - 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); -} - -.upcoming-details.denver { - background-image: url(/assets/images/denver.png); -} - -.upcoming-details.atlanta { - background-image: url(/assets/images/atlanta.png); -} - -.upcoming-details.portland { - background-image: url(/assets/images/portland.png); -} - -.upcoming-details.houston { - background-image: url(/assets/images/houston.png); -} - -.upcoming-details h3 { - margin: 0; - font-size: 30px; -} - -.upcoming-details h4 { - font-size: 16px; - margin: 0; - color: var(--blue); - font-weight: 600; -} - -.upcoming-details h5 { - 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; -} - -.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; -} - -.upcoming-details span { - 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); -} - -.main-grid { - 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; -} - -section:last-child { - margin: 0; -} - -section.light-background { - background: #fff; - border: 2px solid #F4EEE6; - color: var(--text); -} - -section.light-background h3 { - color: var(--red); -} - -h3 { - 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); -} - -#blurb { - padding-bottom: 82px; - background-color: var(--red); -} - -#blurb h4 { - 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%); -} - -#support { - 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%); -} - -#rubygems { - 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%); -} - -#conferences { - background-color: var(--yellow); -} - -#conferences h3 { - 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%); -} - -#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%); -} - -@keyframes video_hover { - 0% { - background-position: 5px center; - } - - 49% { - background-position: 15px center; - } - - 50% { - background-position: -15px center; - } - - 100% { - background-position: 5px center; - } -} - -@keyframes video_hover_out { - 0% { - background-position: 5px center; - } - - 49% { - background-position: -15px center; - } - - 50% { - background-position: 15px center; - } - - 100% { - background-position: 5px center; - } -} - -.content { - max-width: 950px; - margin: 0 auto; - position: relative; -} - -#about, -#history { - padding: 150px 0; -} - -#about .icon-box, -#history .icon-box { - 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); -} - -#history { - 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%); -} - -.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: cover; -} - -.people { - 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; -} - -.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; -} - -.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; -} - -.people li aside p { - 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; -} - -.people li aside a { - display: inline-block; - font-size: 14px; -} - -#directors { - 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%); -} - -#staff { - 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%); -} - -#staff .people li aside { - background: #5E83A7; - border-color: #3F6589; -} - -#oss-team, #oss-sponsors { - margin-top: 40px; -} - -.static-content { - width: 50%; - margin: 0 auto; -} - -.static-content.upcoming-conference-container { - margin-top: -100px; -} - -.static-content h3 { - color: var(--red); -} - -.static-content ul { - 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; -} - -.back { - font-size: 16px; - display: inline-block; - margin: 0 0 20px 0; -} - -.arrow { - display: none; -} - -.apply { - display: grid; - grid-template-columns: 1fr 200px; - gap: 25px; - margin: 25px 0 0 0; -} - -.apply strong { - 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; - 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 .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); - } - - #staff .people li aside small { - color: var(--blue); - } - - .static-content { - width: auto; - padding: 0 20px; - } - - .static-content.upcoming-conference-container { - margin-top: -5px; - } -} diff --git a/src/js/app/dropdown.js b/src/js/app/dropdown.js deleted file mode 100644 index f2e6fbd..0000000 --- a/src/js/app/dropdown.js +++ /dev/null @@ -1,289 +0,0 @@ -/** - * ghost-dynamic-dropdown 1.1.0 (https://github.com/themeix/ghost-dynamic-dropdown) - * A simple script for dynamic dorpdown & mega menu for Ghost Blogging Platform. - * Copyright 2022 Themeix (https://themeix.com) - * Released under MIT License - * Released on: Jul 25, 2021 - */ - -(function ($) { - "use strict"; - - function multiLevel(targetElement = "ul li", mLhasSubmenu = "mL-has-submenu", mLsubmenu = "mL-submenu") { - let mLparentDetecttext = "[-]"; - let mLchildDetectText = "[--]"; - let mLdomArrayElement = []; - let mLparentIndex = []; - let mLparentLen = 0; - - // Find Dropdown parent element - $(`${targetElement} li`).each(function (index, element) { - if ($(this).text().includes(mLparentDetecttext)) { - mLparentIndex.push(index); // Make dropdown parent array index - mLparentLen++; - - $(this).push(element); - if (!$(this).hasClass('menu-item-has-children')) { - $(this).addClass(mLhasSubmenu); // Add claas in dropdown element - } - $(this).append(`
    `); // Append submenu element - } - }); - - - - let elIndex; - // Code last multilevel - let lastMlElementText = $(`.${mLhasSubmenu}`).last().text(); - // console.log(lastMlElement); - - // Using loop to reach dropdown parent element - for (let i = 0; i < mLparentLen; i++) { - - elIndex = 0 // Initial elemet value - - // Find subitem element - $(`${targetElement} li`).each(function (index, element) { - let mLsubitem = $(this).text().includes(mLchildDetectText); // Find subitem element - - - if (mLsubitem) { - - if (elIndex + 1 >= mLparentIndex[i + 1] + 1) { // Each loop will be break - return false; //Stoped each loop - } - - if (elIndex <= mLparentIndex[i + 1] || elIndex >= mLparentIndex[mLparentIndex.length - 1]) { - - if (!mLparentIndex.includes(index)) { //Check if not index already insert - mLdomArrayElement.push(element); // Incert subitem element in dom array - mLparentIndex.push(index); // incert subitem index in indexPush array - } - } - - } - elIndex++; // increase element index value - }); - - - $(`.${mLhasSubmenu} ul.${mLsubmenu}:eq(${i})`).append(mLdomArrayElement); // Append related subitem dom element into submenu - - mLdomArrayElement = []; // Make dom array element empty. - } - - let lastMlElementIndex = 0; // Find subitem element - let lastChildIndex = 0, lastChildElementText; - - - $(`${targetElement} li`).each(function (index, element) { - let lastMlElement = $(this).text().includes(lastMlElementText); // Find subitem element - - if (lastMlElement) { - if (!$(this).hasClass('mLlastPrentElement')) { - $(this).addClass('mLlastPrentElement'); - lastChildElementText = $(this).parent().children('li').last().text(); - lastMlElementIndex = index; - } - - } - - if ($(this).text().includes(lastChildElementText)) { - lastChildIndex = index; - } - - if (lastMlElementIndex < index && lastMlElementIndex > 0) { - $(this).addClass('mLlastChildElements'); - $(".mLlastPrentElement ul").append($(`.mLlastChildElements`)); - if (lastChildIndex == index) { - return false; - } - } - }); - - remove_text(mLhasSubmenu, mLparentDetecttext); - remove_text('subitem', mLchildDetectText); - - } - - function remove_text(textClass, replacedText) { - - const mLhasSubmenuEL = $(`.${textClass}`); - mLhasSubmenuEL.each(function () { - if ($(this).find("> a:first").text().includes(replacedText)) { - let textFull = $(this).find("> a:first").text(); // Find has child inner text - $(this).find("> a:first").text(textFull.replaceAll(replacedText, "")); - } - }); - } - - - function megamenu(hasMegaMenuClasses = "menu-item-has-megamenu", col = 3, item_slice = 4, hasMegaMenuDetectText = "[has_megamenu]", submenuUlClasses = "ghost-submenu") { - let megaMenuEl = $(`.${hasMegaMenuClasses} li`); - $(`.${hasMegaMenuClasses} .${submenuUlClasses}`).addClass('row'); - let titleText = []; - let titleIndex = 0; - megaMenuEl.each(function (index, element) { - if ($(this).text().includes("[title]")) { - titleIndex++; - $(this).addClass("megamenu-title"); - titleText.push($(this).text()) - $(".megamenu-title").empty(); - } - }); - - for (let i = 0; i < megaMenuEl.length; i += item_slice) { - megaMenuEl.slice(i, i + item_slice).wrapAll(`
    `); - // console.log(titleText[i]); - // console.log(titleText); - } - - for (let i = 0; i < titleText.length; i++) { - $(`.${submenuUlClasses} > div:eq(${i})`).prepend(`
    ${titleText[i]}
    `); - $(".megamenu-title-text").text(titleText[i].replaceAll("[title]", "")); - } - remove_text(hasMegaMenuClasses, hasMegaMenuDetectText); - } - - function ghost_dropdown(options) { - - // Default options - let defultOptions = { - targetElement: "nav.ul li", - hasChildrenClasses: "menu-item-has-children", - hasChildDetectText: "[has_child]", - hasChildrenIcon: "", - hasMegaMenuDetectText: "[has_megamenu]", - hasMegaMenuClasses: "menu-item-has-megamenu", - submenuUlClasses: "ghost-submenu", - subitemDetectText: "[subitem]", - subitemLiClasses: "subitem" - } - - //Marge defaultOptions - options = { - ...defultOptions, - ...options - } - - - // Target Element - let targetElement = options.targetElement; - - //Default value - let hasChildrenClasses = options.hasChildrenClasses; - let hasChildDetectText = options.hasChildDetectText; - let hasMegaMenuClasses = options.hasMegaMenuClasses; - let hasMegaMenuDetectText = options.hasMegaMenuDetectText; - let hasChildrenIcon = options.hasChildrenIcon; - let submenuUlClasses = options.submenuUlClasses; - let subitemDetectText = options.subitemDetectText; - let subitemLiClasses = options.subitemLiClasses; - - - // Declare neccesary variable - let parentEl = $(targetElement); - let childEL = $(targetElement); - let parentLen = 0; - let domArrayElement = []; - let indexPush = []; - let elIndex = 0; - let parentIndex = []; - - $(`${targetElement}`).parent().addClass('ghost-dropdown-menu'); - - let that; - // Find Dropdown parent element - parentEl.each(function (index, element) { - if ($(this).text().indexOf(hasChildDetectText) >= 0) { - parentIndex.push(index); // Make dropdown parent array index - parentLen++; - - $(this).push(element); - $(this).addClass(hasChildrenClasses); // Add claas in dropdown element - - $(this).append(`
      `); // Append submenu element - - $(targetElement).css("opacity", "1"); - } - - if ($(this).text().includes(hasMegaMenuDetectText)) { - $(this).addClass(hasMegaMenuClasses); - that = $(this); - } - }); - - $(targetElement).css("opacity", "1"); - - $(`.${hasChildrenClasses}`).append(hasChildrenIcon); - - if(!$(hasChildrenClasses).length){ - $(targetElement).css("opacity", "1"); - } - - // Using loop to reach dropdown parent element - for (let i = 0; i < parentLen; i++) { - - elIndex = 0 // Initial elemet value - - // Find subitem element - childEL.each(function (index, element) { - let subitem = $(this).text().includes(subitemDetectText); // Find subitem element - - if (subitem) { - - if (elIndex >= parentIndex[i + 1]) { // Each loop will be break - return false; //Stoped each loop - } - - if (elIndex <= parentIndex[i + 1] || elIndex >= parentIndex[parentIndex.length - 1]) { - - if (!indexPush.includes(index)) { //Check if not index already insert - $(this).addClass(subitemLiClasses); // Add class in subitem element - let st = $(this).children().text(); // Find subitem inner text - $(this).children().text(st.replaceAll(subitemDetectText, "")); // Replace subitem inner text - - domArrayElement.push(element); // Incert subitem element in dom array - indexPush.push(index); // incert subitem index in indexPush array - - } - } - - } - elIndex++; // increase element index value - }); - - - $(`.${hasChildrenClasses} ul.${submenuUlClasses}:eq(${i})`).append(domArrayElement); // Append related subitem dom element into submenu - - domArrayElement = []; // Make dom array element empty. - - } - remove_text(hasChildrenClasses, hasChildDetectText); - - - if (options.multi_level) { - multiLevel(); - } - if (options.mega_menu) { - megamenu(hasMegaMenuClasses, 3, 4, hasMegaMenuDetectText, submenuUlClasses); - } - - - } - - $(document).ready(function () { - ghost_dropdown({ - targetElement: "ul.nav li", - hasChildrenClasses: "menu-item-has-children", - hasChildrenIcon: null, - hasChildDetectText: "[has_child]", - submenuUlClasses: "ghost-submenu", - subitemDetectText: "[subitem]", - subitemLiClasses: "subitem", - multi_level: true, - mega_menu: true - }); - }); - - -}(jQuery)); diff --git a/src/js/app/index.js b/src/js/app/index.js index 893ce9e..f3cec64 100644 --- a/src/js/app/index.js +++ b/src/js/app/index.js @@ -1,6 +1,5 @@ import "../../css/app.css" -import './dropdown.js' -import './responsive-nav.js' +import './navigation-top'; // LiveReload server if (ENV === 'development') { diff --git a/src/js/app/navigation-top.js b/src/js/app/navigation-top.js new file mode 100644 index 0000000..1ef2b16 --- /dev/null +++ b/src/js/app/navigation-top.js @@ -0,0 +1,19 @@ +const mobileTrigger = document.getElementById( + 'navigation__mobile-menu-trigger', +); +const list = document.querySelector('.navigation--top .navigation__list'); + +function toggleMobileMenu() { + this.classList.toggle('closed'); + this.classList.toggle('opened'); + + if (this.classList.contains('closed')) { + list.classList.add('navigation__list--mobile-closed'); + list.classList.remove('navigation__list--mobile-opened'); + } else { + list.classList.remove('navigation__list--mobile-closed'); + list.classList.add('navigation__list--mobile-opened'); + } +} + +mobileTrigger.addEventListener('click', toggleMobileMenu); diff --git a/src/js/app/responsive-nav.js b/src/js/app/responsive-nav.js deleted file mode 100644 index d3579e6..0000000 --- a/src/js/app/responsive-nav.js +++ /dev/null @@ -1,27 +0,0 @@ -(function () { - "use strict"; - - const menuIconOpen = document.getElementById('menu-icon-open'); - const menuIconClose = document.getElementById('menu-icon-close'); - const topNav = document.querySelector('nav'); - - function openNav() { - topNav.classList.add('open'); - topNav.classList.remove('closed') - } - - function closeNav() { - topNav.classList.remove('open'); - topNav.classList.add('closed') - } - - menuIconOpen.addEventListener('click', (e)=> { - e.preventDefault(); - openNav(); - }) - - menuIconClose.addEventListener('click', (e) => { - e.preventDefault(); - closeNav(); - }) -}());