jekyll-theme-noesya 1.0.9 → 1.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 5a6f5da04095b68658ec1c2cf6d025cd95ff5698615c84ea32f0d5d1fc3b5d5e
4
- data.tar.gz: fe9b7d0906f741550f22d9eb30f5f11e3294668be8c0e80805f73711de861847
3
+ metadata.gz: a40cb98592c65db0c8334d6209d7e1177a369364fc20f55ce5ec7affa4bfa5e5
4
+ data.tar.gz: 2ddedc72faacbaf95596fa519edcbb616a6b34f6a72830ee1f7fefc80ffbf8dd
5
5
  SHA512:
6
- metadata.gz: 4a59f6791c00e7fb96726a16168a95573da534b54b73fe0f9b7b68b5e0d23228b11c5e4e33c7378e8a363fa610f8dfe429593213d52104493be91f1ff36a78a3
7
- data.tar.gz: d0ba57283b53dbb892388c53d2c6e889aa42c029c97ba8a9574be3c5ca6e4d92f999f464f4244486251ac45953e9b9835d3201bf09148eec46cb14485f7c83f9
6
+ metadata.gz: d0ce8ea2505eb401011911abc740692c3208209496b34ef6bec2a6947aa44f128027219b0dba5174f92fee410443f0ef7960fb295e811b4bc4392304fab97574
7
+ data.tar.gz: 962d1646eba82e2e8deaf0b455699e7bba43f4ff44ea4f93b7b1723f75ca7839d494deaa2cc83389f631b671878c8eb0c4480aa25a811fc6f4eb4f2a7c903ce6
data/README.md CHANGED
@@ -1,2 +1,12 @@
1
1
  ## Gem
2
2
  https://rubygems.org/gems/jekyll-theme-noesya
3
+
4
+ ### Options
5
+ ```
6
+ options:
7
+ menu_burger: true # For desktop
8
+ notes: false # Needed to use notes in sections-with-notes includes
9
+ paragraphs_index: false # Needed to add index to paragraphs
10
+ hover_navigation_links: false # Needed to use nav-between-pages
11
+ no_js: false
12
+ ```
@@ -1,4 +1,4 @@
1
- <header id="header">
1
+ <header id="header"{% unless site.options.menu_burger %} class="menu_burger_only_mobile"{% endunless %}>
2
2
  <a href="/">
3
3
  <img src="https://assets.noesya.coop/images/logos/logo-noesya.svg" alt="{{ site.title }}" width="100" height="26">
4
4
  </a>
@@ -10,6 +10,7 @@ window.menu = {
10
10
 
11
11
  setTimeout(function () {
12
12
  document.body.classList.remove('is-loading');
13
+ window.addEventListener('resize', this.resize.bind(this));
13
14
  }.bind(this), 100);
14
15
  },
15
16
  bind: function () {
@@ -37,6 +38,11 @@ window.menu = {
37
38
  }
38
39
 
39
40
  this.y = y;
41
+ },
42
+ resize: function () {
43
+ 'use strict';
44
+ document.documentElement.classList.remove('is-menu-opened');
45
+ this.dom.classList.remove('is-hidden');
40
46
  }
41
47
  };
42
48
 
@@ -2,7 +2,7 @@
2
2
  <ul>
3
3
  {% for item in site.data.menus.primary %}
4
4
  <li>
5
- <a href="{{ item.url }}">{{ item.title }}</a>
5
+ <a href="{{ item.url }}"{% if page.url contains item.url %} class="active"{% endif %}>{{ item.title }}</a>
6
6
  </li>
7
7
  {% endfor %}
8
8
  </ul>
@@ -68,25 +68,11 @@
68
68
  ul:hover
69
69
  a
70
70
  color: $secondary-reverse
71
+ .menu_burger_only_mobile &
72
+ color: $white
71
73
  &:hover
72
74
  color: $white
73
75
 
74
- main > nav
75
- background-color: $bg-secondary-color-reverse
76
- span
77
- color: $secondary-reverse
78
- li+li::after
79
- background: $border-color-reverse
80
- @include media-breakpoint-down(md)
81
- ul li:first-child
82
- border-bottom-color: $border-color-reverse
83
- @include media-breakpoint-up(md)
84
- .is-menu-opened &
85
- background-color: $bg-secondary-color
86
- span
87
- .is-menu-opened &
88
- color: $secondary
89
-
90
76
  body > footer
91
77
  background-color: $white
92
78
  color: $primary
@@ -105,7 +91,7 @@
105
91
  main.team
106
92
  p
107
93
  color: $secondary-reverse
108
-
94
+
109
95
  main.metier
110
96
  article
111
97
  p
@@ -1,5 +1,7 @@
1
1
  body > header
2
2
  @include container
3
+ align-items: center
4
+ display: flex
3
5
  left: 0
4
6
  padding-top: $grid-sm-margin * 2
5
7
  position: fixed
@@ -16,12 +18,14 @@ body > header
16
18
  margin-left: -2px
17
19
  > a
18
20
  display: inline-block
21
+ flex-shrink: 0
19
22
  position: relative
20
23
  transition: filter .3s ease
21
24
  vertical-align: middle
22
25
  z-index: 1
23
26
  & + em
24
27
  display: inline-block
28
+ flex-shrink: 0
25
29
  font-size: px2rem(25)
26
30
  margin-left: $grid-gutter
27
31
  margin-top: -2px
@@ -31,6 +31,9 @@
31
31
  @include media-breakpoint-up(md)
32
32
  right: 35px
33
33
  top: 35px
34
+ @include media-breakpoint-up(lg)
35
+ .menu_burger_only_mobile &
36
+ display: none
34
37
  i, &::after, &::before
35
38
  background: $primary
36
39
  content: ''
@@ -38,7 +41,7 @@
38
41
  left: 15px
39
42
  position: absolute
40
43
  transform-origin: center
41
- transition: transform 0.38s 0.3s $easeInOutQuad
44
+ transition: transform 0.28s 0.2s $easeInOutQuad
42
45
  width: 20px
43
46
  &::after
44
47
  transform: translateY(-9px)
@@ -52,7 +55,7 @@
52
55
  left: 15px
53
56
  position: absolute
54
57
  transform-origin: center
55
- transition: transform 0.38s $easeInOutQuad
58
+ transition: transform 0.28s $easeInOutQuad
56
59
  width: 20px
57
60
  &::after
58
61
  transform: rotate(-45deg) scaleX(0)
@@ -60,11 +63,11 @@
60
63
  transform: rotate(45deg) scaleX(0)
61
64
  &:hover
62
65
  &::after
63
- animation: 0.5s 0.2s menu-hovered $easeInOutQuad
66
+ animation: 0.3s 0.14s menu-hovered $easeInOutQuad
64
67
  i
65
- animation: 0.5s 0.1s menu-hovered $easeInOutQuad
68
+ animation: 0.3s 0.07s menu-hovered $easeInOutQuad
66
69
  &::before
67
- animation: 0.5s 0s menu-hovered $easeInOutQuad
70
+ animation: 0.3s 0s menu-hovered $easeInOutQuad
68
71
 
69
72
  .menu
70
73
  backface-visibility: hidden
@@ -84,6 +87,34 @@
84
87
  width: calc(50vw + min(1040px, calc(100vw - 390px)) / 2)
85
88
  @include media-breakpoint-up(lg)
86
89
  width: calc(50vw + min(1010px, calc((100vw - 100px) * (10/12) - 110px)) / 2)
90
+ .menu_burger_only_mobile &
91
+ background: transparent
92
+ margin-left: auto
93
+ padding-top: 0
94
+ position: static
95
+ transform: none
96
+ transition: none
97
+ width: auto
98
+ ul
99
+ display: flex
100
+ margin: 0
101
+ &:hover
102
+ a
103
+ color: $primary
104
+ li
105
+ font-size: px2rem(25)
106
+ margin-bottom: 0
107
+ &:not(:first-child)
108
+ margin-left: $grid-gutter
109
+ a
110
+ &.active,
111
+ &:hover
112
+ text-decoration: underline
113
+ @include media-breakpoint-up(lg)
114
+ .menu_burger_only_mobile &
115
+ li:not(:first-child)
116
+ margin-left: $grid-gutter * 2
117
+
87
118
  ul
88
119
  height: 100%
89
120
  margin: 0 $grid-sm-margin * 2
@@ -114,14 +145,14 @@
114
145
  span
115
146
  &::after
116
147
  transform: rotate(-45deg) scaleX(1)
117
- transition-delay: 0.25s
148
+ transition-delay: 0.15s
118
149
  &::before
119
150
  transform: rotate(45deg) scaleX(1)
120
- transition-delay: 0.35s
151
+ transition-delay: 0.25s
121
152
 
122
153
  &::before
123
154
  transform: translateY(9px) scaleX(0)
124
- transition-delay: 0.2s
155
+ transition-delay: 0.15s
125
156
  i
126
157
  transform: scaleX(0)
127
158
  transition-delay: 0s
@@ -0,0 +1,79 @@
1
+ main > nav
2
+ background-color: $bg-secondary-color
3
+ overflow-x: hidden
4
+ ul
5
+ li
6
+ @include media-breakpoint-down(md)
7
+ @include container
8
+ &:first-child
9
+ border-bottom: 1px solid $border-color
10
+ a
11
+ @extend h2
12
+ display: block
13
+ font-family: $font-family-sans-serif
14
+ margin-bottom: 0
15
+ padding-bottom: $grid-gutter * 2
16
+ padding-top: $grid-gutter * 2
17
+ text-decoration: none
18
+ span
19
+ color: $secondary-on-gray
20
+
21
+ @include media-breakpoint-up(md)
22
+ transition: background .3s ease
23
+ .is-menu-opened &
24
+ background-color: $bg-secondary-color-reverse
25
+ ul
26
+ @include container
27
+ @include grid(2)
28
+ > li
29
+ border-bottom: none
30
+ a
31
+ padding-bottom: $grid-gutter * 4
32
+ padding-top: $grid-gutter * 4
33
+ position: relative
34
+ z-index: 1
35
+ span
36
+ transition: color .3s ease
37
+ .is-menu-opened &
38
+ color: $secondary-reverse
39
+ li
40
+ position: relative
41
+ &::before
42
+ background: $white
43
+ content: ''
44
+ cursor: pointer
45
+ height: 100%
46
+ left: calc((max(50vw, #{$grid-width/2}) - #{$grid-width / 2 - $grid-gutter * 2}) * -1)
47
+ mix-blend-mode: exclusion
48
+ position: absolute
49
+ top: 0
50
+ transition: width 0.35s $easeInOutQuad
51
+ width: 0
52
+ z-index: 2
53
+ &:hover
54
+ &::before
55
+ transition: width 3s $easeInOutQuad
56
+ width: 50vw
57
+ li + li
58
+ @include border-line
59
+ left: -#{$grid-gutter}
60
+ padding-left: $grid-gutter
61
+ &::before
62
+ left: -$grid-gutter
63
+ right: auto
64
+
65
+ @media (prefers-color-scheme: dark)
66
+ background-color: $bg-secondary-color-reverse
67
+ span
68
+ color: $secondary-reverse
69
+ li+li::after
70
+ background: $border-color-reverse
71
+ @include media-breakpoint-down(md)
72
+ ul li:first-child
73
+ border-bottom-color: $border-color-reverse
74
+ @include media-breakpoint-up(md)
75
+ .is-menu-opened &
76
+ background-color: $bg-secondary-color
77
+ span
78
+ .is-menu-opened &
79
+ color: $secondary
@@ -0,0 +1,61 @@
1
+ aside
2
+ grid-column: 5/13
3
+ padding-bottom: $grid-gutter
4
+ &:hover
5
+ z-index: 2
6
+ img
7
+ border: 1px solid rgba(0, 0, 0, 0.05)
8
+ display: block
9
+ margin: $grid-gutter/2 0
10
+ max-width: 124px
11
+ p
12
+ margin-bottom: 0
13
+ &.is-fixed
14
+ background: $bg-secondary-color
15
+ bottom: 0
16
+ left: 0
17
+ padding: 5px 15px 10px 10px
18
+ padding-bottom: env(safe-area-inset-bottom, 10px)
19
+ position: fixed
20
+ transform: translateY(100%)
21
+ width: 100%
22
+ z-index: 3
23
+ &.is-handled
24
+ transition: 0.25s $easeInOutQuad
25
+ img
26
+ transition: 0.33s $easeInOutQuad
27
+
28
+ &.is-visible
29
+ &, img
30
+ transform: translateY(0)
31
+ img
32
+ bottom: 12px
33
+ margin: 0
34
+ max-width: 100px
35
+ position: absolute
36
+ right: 12px
37
+ transform: translateY(100%)
38
+ picture + p
39
+ padding-right: 120px
40
+
41
+ &.is-handled:not(.is-fixed)
42
+ display: flex
43
+ flex-direction: column-reverse
44
+ grid-column: 1/5
45
+ padding-bottom: 0
46
+ position: absolute
47
+ img
48
+ filter: grayscale(1)
49
+ margin-bottom: $grid-gutter/2
50
+ opacity: 0.9
51
+ transition: 0.33s $easeInOutQuad
52
+ &:hover, &.is-hovered
53
+ img
54
+ filter: grayscale(0)
55
+ opacity: 1
56
+ &:hover, &.is-hovered
57
+ a
58
+ text-decoration-color: black
59
+ img
60
+ filter: grayscale(0)
61
+ opacity: 1
data/assets/js/main.js CHANGED
@@ -2,9 +2,7 @@
2
2
  layout:
3
3
  ---
4
4
 
5
- {%- if site.options.menu_burger -%}
6
- {% include js/menu-burger.js %}
7
- {%- endif -%}
5
+ {% include js/menu-burger.js %}
8
6
 
9
7
  {%- if site.options.notes -%}
10
8
  {% include js/notes.js %}
@@ -17,5 +15,3 @@ layout:
17
15
  {%- if site.options.hover_navigation_links -%}
18
16
  {% include js/hover-navigation-links.js %}
19
17
  {%- endif -%}
20
-
21
-
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: jekyll-theme-noesya
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.0.9
4
+ version: 1.0.14
5
5
  platform: ruby
6
6
  authors:
7
7
  - Sébastien Moulène
@@ -120,6 +120,8 @@ files:
120
120
  - _sass/commons/typography.sass
121
121
  - _sass/components/header.sass
122
122
  - _sass/components/menu.sass
123
+ - _sass/components/nav-between.sass
124
+ - _sass/components/notes.sass
123
125
  - _sass/layouts/legal.sass
124
126
  - _sass/layouts/page.sass
125
127
  - _sass/main.sass