diff --git a/assets/js/videos.js b/assets/js/videos.js index 6bab4e53..b8503725 100644 --- a/assets/js/videos.js +++ b/assets/js/videos.js @@ -1,30 +1,28 @@ export default { init () { document.addEventListener('DOMContentLoaded', () => { - // Get all "dropdown" elements - const $tabs = Array.prototype.slice.call(document.querySelectorAll('#video-container div.tabs li'), 0); - const $contents = Array.prototype.slice.call(document.querySelectorAll('#video-container div[id*="-content"]')) - - // Add a click event on each of them + const $tabs = Array.prototype.slice.call(document.querySelectorAll('#video-container .video-tab'), 0); + const $contents = Array.prototype.slice.call(document.querySelectorAll('#video-container div[id$="-content"]')); + $tabs.forEach( el => { el.addEventListener('click', () => { - + $tabs.forEach( tab => { tab.classList.remove('is-active'); }); $contents.forEach( content => { - if (content.id === `${el.children[0].id}-content`) { - content.style.display = 'flex'; + if (content.id === `${el.id}-content`) { + content.style.display = 'block'; } else { content.style.display = 'none'; } }); - - el.classList.toggle('is-active'); - + + el.classList.add('is-active'); + }); }); - + }); } } diff --git a/assets/scss/_bulma_custom.scss b/assets/scss/_bulma_custom.scss index 7a62a49c..db808a03 100644 --- a/assets/scss/_bulma_custom.scss +++ b/assets/scss/_bulma_custom.scss @@ -2,7 +2,7 @@ // See https://bulma.io/documentation/customize/with-node-sass/ // Import fonts -@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap'); // Set your brand colors $nerves-blue-light: #42a7c6; @@ -25,6 +25,12 @@ $family-san-serif: 'Montserrat', BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; $family-primary: $family-san-serif; +// Typography weight hierarchy +$body-size: 18px; +$body-weight: $weight-light; +$title-weight: $weight-bold; +$subtitle-weight: $weight-medium; + @import '../../node_modules/bulma/sass/base/_all'; @import '../../node_modules/bulma/sass/elements/_all'; @import '../../node_modules/bulma/sass/form/_all'; @@ -36,4 +42,23 @@ $family-primary: $family-san-serif; // make the cards have equal height .card { height: 100%; + position: relative; + overflow: hidden; + + &::before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 8px; + background: $nerves-blue-light; + transform: scaleX(0.4); + transform-origin: left; + transition: transform 0.2s ease; + } + + &:hover::before { + transform: scaleX(1); + } } diff --git a/assets/scss/main.scss b/assets/scss/main.scss index af1c6380..5b85e76c 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -12,3 +12,191 @@ body { main { min-height: 50vh; } + +.button, +.navbar-item { + font-weight: 500; +} + +.button { + border-radius: 6px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); + transition: transform 0.2s ease, box-shadow 0.2s ease; + + &:hover { + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12); + transform: translateY(-1px); + } +} + +.hero-blurb { + @media screen and (min-width: 769px) { + max-width: 60%; + } +} + +.hero-cta { + @media screen and (max-width: 768px) { + display: block; + width: 100%; + } +} + +.hero-gradient { + background: linear-gradient(135deg, rgba(51, 100, 126, 1) 0%, rgba(66, 167, 198, 0.85) 100%); +} + +footer { + border-top: 3px solid $nerves-blue-light; +} + +.cta-link { + display: inline-flex; + align-items: center; + gap: 0.6em; + font-weight: 600; + font-size: 1.1rem; + margin-top: 1rem; +} + +.cta-arrow { + display: inline-flex; + align-items: center; + justify-content: center; + width: 1.8em; + height: 1.8em; + border-radius: 50%; + border: 2px solid $nerves-blue-light; + font-size: 1em; + color: $nerves-blue-light; + transition: background 0.2s ease, color 0.2s ease; + + .cta-link:hover & { + background: $nerves-blue-light; + color: white; + } +} + +// Video tabs +.video-tabs { + display: flex; + gap: 0.5rem; + margin-bottom: 2rem; + flex-wrap: wrap; +} + +.video-tab { + padding: 0.5rem 1.2rem; + border-radius: 6px; + font-weight: 500; + color: $nerves-blue-dark; + border: 2px solid transparent; + cursor: pointer; + transition: all 0.2s ease; + + &:hover { + border-color: $nerves-blue-light; + color: $nerves-blue-light; + } + + &.is-active { + background: $nerves-blue-dark; + color: white; + border-color: $nerves-blue-dark; + } +} + +// Featured video +.video-featured { + margin-bottom: 1.5rem; +} + +.video-featured-inner { + display: flex; + gap: 2rem; + align-items: center; + + @media screen and (max-width: 768px) { + flex-direction: column; + gap: 1rem; + } +} + +.video-featured-thumb { + position: relative; + flex: 0 0 60%; + border-radius: 8px; + overflow: hidden; + + img { + display: block; + width: 100%; + } + + @media screen and (max-width: 768px) { + flex: none; + width: 100%; + } +} + +.video-play-overlay { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + background: rgba(0, 0, 0, 0.25); + opacity: 0; + transition: opacity 0.2s ease; + + .video-featured-inner:hover & { + opacity: 1; + } +} + +.video-play-icon { + display: flex; + align-items: center; + justify-content: center; + width: 4rem; + height: 4rem; + border-radius: 50%; + background: rgba(255, 255, 255, 0.9); + color: $nerves-blue-dark; + font-size: 1.5rem; + padding-left: 0.2rem; +} + +.video-featured-info { + flex: 1; + + .cta-link { + color: $nerves-blue-light; + } +} + +.video-duration { + display: inline-block; + font-size: 0.85rem; + font-weight: 500; + color: $nerves-blue-dark; + background: rgba($nerves-blue-light, 0.15); + padding: 0.15rem 0.5rem; + border-radius: 4px; + margin-top: 0.25rem; +} + +// Video grid cards +.video-card { + border-radius: 8px; + + .card-image { + overflow: hidden; + border-radius: 8px 8px 0 0; + } + + .card-content { + padding: 0.75rem 1rem; + font-size: 0.9rem; + } +} diff --git a/layouts/404.html b/layouts/404.html index 4410a7f9..44e076be 100644 --- a/layouts/404.html +++ b/layouts/404.html @@ -1,7 +1,7 @@ {{ define "main" }} -
+

{{ .Title }}

diff --git a/layouts/_default/taxonomy.html b/layouts/_default/taxonomy.html index e1d60824..a95e687f 100644 --- a/layouts/_default/taxonomy.html +++ b/layouts/_default/taxonomy.html @@ -4,7 +4,7 @@ Example URL: /tags/case/ */}} -
+

Tag: {{.Title}}

diff --git a/layouts/articles/section.html b/layouts/articles/section.html index 27df53fa..6c20ef30 100644 --- a/layouts/articles/section.html +++ b/layouts/articles/section.html @@ -1,6 +1,6 @@ {{ define "main" }} -
+

Articles

A cultivation of community driven articles

diff --git a/layouts/code/single.html b/layouts/code/single.html index e271ceb1..ca49d1c4 100644 --- a/layouts/code/single.html +++ b/layouts/code/single.html @@ -1,9 +1,9 @@ {{ define "main" }} -
+

Explore the project

-

+

Nerves is spread over many repositories for focus on limited scopes.

{{ range .Params.project_map }} diff --git a/layouts/community/single.html b/layouts/community/single.html index 4a47024c..d3789165 100644 --- a/layouts/community/single.html +++ b/layouts/community/single.html @@ -1,6 +1,6 @@ {{ define "main" }} -
+

Nerves ❤️ Community

diff --git a/layouts/home.html b/layouts/home.html index a85f51e3..dd726219 100644 --- a/layouts/home.html +++ b/layouts/home.html @@ -2,16 +2,16 @@

-
+

{{ .Params.Tagline }}

-

+

{{ .Params.aboutNerves | markdownify }}

- + Get started - + Features
@@ -25,18 +25,12 @@ {{ with .examples }}
-
-

{{ $el.name }}

-
+

{{ $el.name }}

{{ $el.description }} -
- - {{ $el.link_text }} - - - - -
+ + {{ $el.link_text }} + → +
@@ -60,18 +54,12 @@

{{ $el.name }}

-
-

{{ .name }}

-
+

{{ .name }}

{{ .description }} -
- - {{ .link_text }} - - - - -
+ + {{ .link_text }} + → +
{{ end }} diff --git a/layouts/learn/single.html b/layouts/learn/single.html index 1acdc529..4901cc41 100644 --- a/layouts/learn/single.html +++ b/layouts/learn/single.html @@ -1,6 +1,6 @@ {{ define "main" }} -
+

Learning Resources

@@ -55,12 +55,10 @@
Nerves Tips
Explore helpful tips, gotchas, and TILs
- - tips.nerves-project.org - - - - + + tips.nerves-project.org + → +
diff --git a/layouts/newsletter/section.html b/layouts/newsletter/section.html index 02fab8d4..ff55efb9 100644 --- a/layouts/newsletter/section.html +++ b/layouts/newsletter/section.html @@ -1,6 +1,6 @@ {{ define "main" }} -
+

{{.Title}}

diff --git a/layouts/newsletter/single.html b/layouts/newsletter/single.html index dc09185b..a3678e72 100644 --- a/layouts/newsletter/single.html +++ b/layouts/newsletter/single.html @@ -1,7 +1,7 @@ {{ define "main" }} -

+

{{.Title}}

diff --git a/layouts/partials/home/features.html b/layouts/partials/home/features.html index 42f8f624..c836c2da 100644 --- a/layouts/partials/home/features.html +++ b/layouts/partials/home/features.html @@ -1,4 +1,4 @@ -

+

{{ .Params.introduction }} diff --git a/layouts/partials/simple-hero.html b/layouts/partials/simple-hero.html index abe40ceb..f042e5f7 100644 --- a/layouts/partials/simple-hero.html +++ b/layouts/partials/simple-hero.html @@ -1,4 +1,4 @@ -

+

{{.Title}}

diff --git a/layouts/partials/site-header.html b/layouts/partials/site-header.html index be118ace..1d4f46a2 100644 --- a/layouts/partials/site-header.html +++ b/layouts/partials/site-header.html @@ -12,7 +12,7 @@