jekyll-theme-noesya 1.0.0

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 ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA256:
3
+ metadata.gz: eb24752952e4e3355b88fb159d01685d7969a46e21169d4048a0b6848512746d
4
+ data.tar.gz: 25d42f699d4f9ab0b314278da526008ea1c0bfd77379edbe9a48d1412d64077c
5
+ SHA512:
6
+ metadata.gz: 0dd9596f0a04c1e49219ec8aec1e4a89d61545080037423b25d92c4b724d5d6759cff813f1c62aebcf7a79117372f22b5d7ab7a2b0ca2c078fbdba5a6f7e43ca
7
+ data.tar.gz: 359199d5f98b1e8686df280edf4c3778ca8dd635052b496c078330ffa81c6504e688fab55f6953a6d498ba05f4f9bd0adeefe261ba7b948e10a26890f4980929
data/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2021 noesya
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
@@ -0,0 +1,21 @@
1
+ <footer>
2
+ <div>
3
+ <address class="h-card">
4
+ <p class="p-name">noesya Paris</p>
5
+ <span class="p-street-address">15 rue Hélène</span><br>
6
+ <span class="p-postal-code">75017</span>&nbsp;<span class="p-locality">Paris</span><br>
7
+ <span class="p-country-name">France</span>
8
+ </address>
9
+ <address class="h-card">
10
+ <p class="p-name">noesya Bordeaux</p>
11
+ <span class="p-street-address">5 rue Frédéric Joliot Curie</span><br>
12
+ <span class="p-postal-code">33150</span>&nbsp;<span class="p-locality">Cenon</span><br>
13
+ <span class="p-country-name">France</span>
14
+ </address>
15
+ {% include nav/ecosystem.html %}
16
+ <!-- <a href="https://bcorporation.net" target="_blank" rel="noreferrer"><img src="//assets.noesya.coop/images/logos/logo-bcorp.svg" alt="Certified B-Corporation" width="63" height="103"></a> -->
17
+ {% picture owl_footer "/assets/images/chouette/small.png" --img alt="La chouette noesya" %}
18
+ {% include nav/legal.html %}
19
+ {% include nav/contacts.html %}
20
+ </div>
21
+ </footer>
@@ -0,0 +1,13 @@
1
+ <header id="header">
2
+ <a href="/">
3
+ <img src="//assets.noesya.coop/images/logos/logo-noesya.svg" alt="{{ site.title }}" width="100" height="26">
4
+ </a>
5
+ {% if site.subdomain != '' %}
6
+ <em>{{site.subdomain}}</em>
7
+ {% endif %}
8
+ <button class="burger" aria-label="Ouvrir / Fermer le menu">
9
+ <i></i>
10
+ <span></span>
11
+ </button>
12
+ {% include nav/primary.html %}
13
+ </header>
@@ -0,0 +1,43 @@
1
+ window.menu = {
2
+ y: 0,
3
+ isOpened: false,
4
+ init: function () {
5
+ 'use strict';
6
+ this.dom = document.querySelector('#header');
7
+ this.button = this.dom.querySelector('button');
8
+
9
+ this.bind();
10
+
11
+ setTimeout(function () {
12
+ document.body.classList.remove('is-loading');
13
+ }.bind(this), 100);
14
+ },
15
+ bind: function () {
16
+ 'use strict';
17
+
18
+ this.button.addEventListener('click', function () {
19
+ document.documentElement.classList.toggle('is-menu-opened');
20
+ this.isOpened = !this.isOpened;
21
+ }.bind(this));
22
+
23
+ window.addEventListener('scroll', this.scroll.bind(this));
24
+ },
25
+ scroll: function () {
26
+ 'use strict';
27
+ var y = window.scrollY;
28
+
29
+ if (this.isOpened) {
30
+ return;
31
+ }
32
+
33
+ if (this.y > y || y < 50) {
34
+ this.dom.classList.remove('is-hidden');
35
+ } else {
36
+ this.dom.classList.add('is-hidden');
37
+ }
38
+
39
+ this.y = y;
40
+ }
41
+ };
42
+
43
+ window.menu.init();
@@ -0,0 +1,9 @@
1
+ <nav aria-label="Contacts" class="contacts">
2
+ <ul>
3
+ {% for item in site.data.menus.contacts %}
4
+ <li>
5
+ <a href="{{item.url}}" target="_blank" rel="noreferrer" class="{{item.class}}">{{item.title}}</a>
6
+ </li>
7
+ {% endfor %}
8
+ </ul>
9
+ </nav>
@@ -0,0 +1,17 @@
1
+ <nav aria-label="Navigation dans l'écosystème" class="ecosystem">
2
+ <ul>
3
+ {% for item in site.data.ecosystem.sites %}
4
+ <li>
5
+ {% if item.url %}
6
+ {% if item.url == site.url %}
7
+ {{ item.title }}
8
+ {% else %}
9
+ <a href="{{ item.url }}">{{ item.title }}</a>
10
+ {% endif %}
11
+ {% else %}
12
+ <span title="Ce site sera disponible bientôt..." aria-hidden="true">{{ item.title }}</span>
13
+ {% endif %}
14
+ </li>
15
+ {% endfor %}
16
+ </ul>
17
+ </nav>
@@ -0,0 +1,9 @@
1
+ <nav aria-label="Pages légales" class="legal">
2
+ <ul>
3
+ {% for item in site.data.menus.legal %}
4
+ <li>
5
+ <a href="{{ item.url }}">{{ item.title }}</a>
6
+ </li>
7
+ {% endfor %}
8
+ </ul>
9
+ </nav>
@@ -0,0 +1,9 @@
1
+ <nav class="menu" aria-label="Navigation principale">
2
+ <ul>
3
+ {% for item in site.data.menus.primary %}
4
+ <li>
5
+ <a href="{{ item.url }}">{{ item.title }}</a>
6
+ </li>
7
+ {% endfor %}
8
+ </ul>
9
+ </nav>
@@ -0,0 +1,28 @@
1
+ {% assign title_seo = site.title %}
2
+ {% if page.title %}
3
+ {% assign title_seo = title_seo | prepend: ' • ' | prepend: page.title %}
4
+ {% endif %}
5
+ {% assign description_seo = page.description | markdownify | strip_html | strip %}
6
+ {% assign image_seo = "/assets/images/share/share.jpg" | prepend: site.url %}
7
+
8
+ <!-- HTML Meta Tags -->
9
+ <title>{{ title_seo }}</title>
10
+ <meta name="description" content="{{ description_seo }}">
11
+
12
+ <!-- Facebook Meta Tags -->
13
+ <meta property="og:title" content="{{ title_seo }}" />
14
+ <meta property="og:description" content="{{ description_seo }}">
15
+ <meta property="og:image" content="{{ image_seo }}">
16
+ <meta property="og:url" content="{{ site.url }}{{ page.url }}">
17
+ <meta property="og:type" content="website">
18
+
19
+ <!-- Twitter Meta Tags -->
20
+ <meta name="twitter:title" content="{{ title_seo }}">
21
+ <meta name="twitter:description" content="{{ description_seo }}">
22
+ <meta name="twitter:image" content="{{ image_seo }}">
23
+ <meta name="twitter:card" content="summary_large_image">
24
+ <meta property="twitter:domain" content="noesya.coop">
25
+ <meta property="twitter:url" content="{{ site.url }}{{ page.url }}">
26
+
27
+ <!-- Icons -->
28
+ <link rel="icon" type="image/png" href="/assets/images/share/favicon.png" />
@@ -0,0 +1,25 @@
1
+ <!DOCTYPE html>
2
+ <html lang="{{ page.lang | default: site.lang | default: "fr" }}">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+
7
+ {% include seo.html %}
8
+
9
+ <!-- Preload -->
10
+ <link rel="preload" as="font" href="https://assets.noesya.coop/fonts/signifier/signifier-web-regular.woff2" type="font/woff2">
11
+ <link rel="preload" as="font" href="https://assets.noesya.coop/fonts/signifier/signifier-web-regular-italic.woff2" type="font/woff2">
12
+ <link rel="preload" as="font" href="https://assets.noesya.coop/fonts/soehne/soehne-web-buch.woff2" type="font/woff2">
13
+
14
+ <!-- CSS -->
15
+ <link rel="stylesheet" href="/assets/css/main.css">
16
+ </head>
17
+ <body class="is-loading">
18
+ {% include header.html %}
19
+ <main aria-label="Content" class="{{ page.class | default: layout.class }}">
20
+ {{ content }}
21
+ </main>
22
+ {% include footer.html %}
23
+ <script src="/assets/js/main.js" async defer></script>
24
+ </body>
25
+ </html>
@@ -0,0 +1,14 @@
1
+ ---
2
+ layout: default
3
+ class: page
4
+ ---
5
+
6
+ <header>
7
+ <h1>{{ page.title }}</h1>
8
+ </header>
9
+
10
+ {% if content != "" %}
11
+ <section>
12
+ {{ content }}
13
+ </section>
14
+ {% endif %}
@@ -0,0 +1,131 @@
1
+ @media (prefers-color-scheme: dark)
2
+ ::selection
3
+ background: rgba($white, .3)
4
+ color: $primary
5
+
6
+ ::-moz-selection
7
+ background: rgba($white, .3)
8
+ color: $primary
9
+
10
+ body,
11
+ body > main
12
+ background-color: $primary
13
+
14
+ body
15
+ color: $white
16
+
17
+ a
18
+ color: $white
19
+ text-decoration-color: rgba($white, 0.5)
20
+ &:hover
21
+ text-decoration-color: $white
22
+ @include media-breakpoint-up(md)
23
+ .is-menu-opened main &
24
+ color: $black
25
+ text-decoration-color: rgba($primary, 0.2)
26
+
27
+ .h1
28
+ &, a
29
+ color: $secondary-reverse
30
+ .is-menu-opened &
31
+ color: $secondary
32
+
33
+ blockquote
34
+ border-color: $border-color-reverse
35
+
36
+ aside
37
+ &.is-fixed
38
+ background: $bg-secondary-color-reverse
39
+ color: $white
40
+ &:hover, &.is-hovered
41
+ a
42
+ text-decoration-color: $white
43
+
44
+ body > header
45
+ > a
46
+ filter: invert(1)
47
+ @include media-breakpoint-up(md)
48
+ .is-menu-opened &
49
+ filter: invert(0)
50
+
51
+ body > main
52
+ @include media-breakpoint-up(md)
53
+ .is-menu-opened &
54
+ background-color: $white
55
+ color: $black
56
+
57
+ .burger
58
+ i, &::after, &::before
59
+ background: $white
60
+ span
61
+ &::after, &::before
62
+ background: $white
63
+
64
+ .menu
65
+ background-color: $primary
66
+ a
67
+ color: $white
68
+ ul:hover
69
+ a
70
+ color: $secondary-reverse
71
+ &:hover
72
+ color: $white
73
+
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
+ body > footer
91
+ background-color: $white
92
+ color: $primary
93
+ li span, a
94
+ color: $secondary
95
+ a
96
+ &:hover
97
+ color: $primary
98
+
99
+ main.index
100
+ section
101
+ li
102
+ a
103
+ &::after
104
+ filter: invert(0)
105
+ main.team
106
+ p
107
+ color: $secondary-reverse
108
+
109
+ main.metier
110
+ article
111
+ p
112
+ color: $secondary-reverse
113
+
114
+ main.metier
115
+ article
116
+ p
117
+ color: $secondary-reverse
118
+ .is-menu-opened &
119
+ color: $secondary
120
+
121
+ main.member
122
+ header+div
123
+ background-color: $bg-secondary-color-reverse
124
+ > section h2+p
125
+ color: $secondary-on-gray-reverse
126
+ @include media-breakpoint-up(md)
127
+ .is-menu-opened &
128
+ background-color: $bg-secondary-color
129
+ span
130
+ .is-menu-opened &
131
+ color: $secondary
@@ -0,0 +1,45 @@
1
+ @font-face
2
+ font-display: swap
3
+ font-family: 'Signifier'
4
+ font-style: normal
5
+ font-weight: 400
6
+ src: url('https://assets.noesya.coop/fonts/signifier/signifier-web-regular.woff2') format('woff2')
7
+
8
+ @font-face
9
+ font-display: swap
10
+ font-family: 'Signifier'
11
+ font-style: italic
12
+ font-weight: 400
13
+ src: url('https://assets.noesya.coop/fonts/signifier/signifier-web-regular-italic.woff2') format('woff2')
14
+
15
+ @font-face
16
+ font-display: swap
17
+ font-family: 'Soehne'
18
+ font-style: normal
19
+ font-weight: 500
20
+ src: url('https://assets.noesya.coop/fonts/soehne/soehne-web-buch.woff2') format('woff2')
21
+
22
+ @font-face
23
+ font-display: block
24
+ font-family: 'icons'
25
+ font-style: normal
26
+ font-weight: normal
27
+ src: url('https://assets.noesya.coop/fonts/icons.woff') format('woff')
28
+
29
+ @mixin icon
30
+ -moz-osx-font-smoothing: grayscale
31
+ -webkit-font-smoothing: antialiased
32
+ display: inline-block
33
+ font-family: 'icons' !important
34
+ font-style: normal
35
+ font-variant: normal
36
+ font-weight: normal
37
+ line-height: 1
38
+ speak: never
39
+ text-transform: none
40
+
41
+ .icon-link-blank:before
42
+ content: "\e900"
43
+
44
+ .icon-link:before
45
+ content: "\e901"
@@ -0,0 +1,108 @@
1
+ body > footer
2
+ background-color: $primary
3
+ color: white
4
+ padding-bottom: $grid-gutter * 2
5
+ padding-top: $grid-gutter * 2
6
+ div
7
+ @include container
8
+ address
9
+ margin-bottom: $grid-gutter * 2
10
+ p
11
+ margin-bottom: $grid-gutter
12
+ li span, a
13
+ color: $secondary-reverse
14
+ a
15
+ text-decoration: none
16
+ &:hover
17
+ color: white
18
+ nav
19
+ &:first-of-type
20
+ margin-bottom: $grid-gutter * 2
21
+ li
22
+ font-family: $font-family-sans-serif
23
+ font-size: px2rem(36)
24
+ line-height: 1.4
25
+ & + a
26
+ margin-bottom: $grid-gutter
27
+ &::after
28
+ content: none
29
+ &.contacts, &.legal
30
+ li
31
+ font-size: px2rem(22)
32
+ line-height: px2rem(36)
33
+ & + a
34
+ font-size: px2rem(22)
35
+ line-height: px2rem(36)
36
+ picture
37
+ display: block
38
+ margin-bottom: $grid-gutter
39
+ max-width: 33%
40
+
41
+
42
+ @include media-breakpoint-up(lg)
43
+ nav
44
+ &:first-of-type
45
+ li
46
+ font-size: px2rem(45)
47
+ line-height: 1.4
48
+
49
+ @include media-breakpoint-height-up(780px)
50
+ padding-bottom: $grid-gutter * 2
51
+ padding-top: $grid-gutter * 4
52
+ nav
53
+ &:first-of-type
54
+ li
55
+ font-size: px2rem(55)
56
+ line-height: px2rem(75)
57
+
58
+ @include media-breakpoint-up(lg)
59
+ bottom: 0
60
+ height: 100vh
61
+ overflow: hidden
62
+ position: fixed
63
+ width: 100%
64
+ div
65
+ @include grid
66
+ align-items: start
67
+ height: 100%
68
+ address
69
+ &:first-of-type
70
+ grid-column: 1/4
71
+ &:last-of-type
72
+ grid-column: 4/8
73
+ nav
74
+ &:first-of-type
75
+ grid-column: 8/13
76
+ grid-row: 1/3
77
+ margin-bottom: 0
78
+ margin-top: -14px
79
+ & + a
80
+ align-self: end
81
+ grid-column: 1/2
82
+ grid-row: 2/2
83
+ text-align: right
84
+ &.legal, &.contacts
85
+ align-self: end
86
+ grid-column: 1/9
87
+ grid-row: 3/3
88
+ margin-top: $grid-gutter * 2
89
+ ul
90
+ display: flex
91
+ li
92
+ margin-right: $grid-gutter
93
+ white-space: nowrap
94
+ &:last-child
95
+ margin-right: 0
96
+ a
97
+ padding: 10px 0
98
+ &.contacts
99
+ align-self: end
100
+ grid-column: 8/13
101
+ justify-self: end
102
+ text-align: right
103
+ picture
104
+ align-self: end
105
+ grid-column: 4/6
106
+ grid-row: 2/2
107
+ margin-bottom: 0
108
+ max-width: none
@@ -0,0 +1,55 @@
1
+ *
2
+ box-sizing: border-box
3
+
4
+ body
5
+ -moz-osx-font-smoothing: grayscale
6
+ -webkit-font-smoothing: antialiased
7
+ background-color: $bg-color
8
+ color: $primary
9
+ text-rendering: geometricPrecision
10
+ &.is-loading *
11
+ transition-duration: 0s !important
12
+ @include media-breakpoint-up(lg)
13
+ padding-bottom: 100vh
14
+
15
+ ::selection
16
+ background: rgba($primary, .7)
17
+ color: $white
18
+ text-shadow: none
19
+
20
+ ::-moz-selection
21
+ background: rgba($primary, .7)
22
+ color: $white
23
+ text-shadow: none
24
+
25
+ body > main
26
+ background-color: $bg-color
27
+ position: relative
28
+ z-index: 1
29
+ @include media-breakpoint-up(md)
30
+ transition: background .3s ease, color .3s ease
31
+ .is-menu-opened &
32
+ background-color: $black
33
+ color: $white
34
+
35
+ img
36
+ height: auto
37
+ max-width: 100%
38
+ &::selection
39
+ background: transparent
40
+ &::-moz-selection
41
+ background: transparent
42
+
43
+ *:focus-visible
44
+ outline-color: gray
45
+ outline-offset: 5px
46
+ outline-style: dashed
47
+ outline-width: 1px
48
+
49
+ @media (prefers-reduced-motion: no-preference)
50
+ *:focus-visible
51
+ transition: outline-offset .3s ease
52
+
53
+ picture
54
+ img
55
+ height: auto
@@ -0,0 +1,7 @@
1
+ section
2
+ @include container
3
+ padding-bottom: $grid-gutter * 2
4
+ @include media-breakpoint-up(md)
5
+ padding-bottom: $grid-gutter * 4
6
+ @include media-breakpoint-up(xl)
7
+ padding-bottom: $grid-gutter * 8
@@ -0,0 +1,50 @@
1
+ body > header
2
+ @include container
3
+ left: 0
4
+ padding-top: $grid-sm-margin * 2
5
+ position: fixed
6
+ right: 0
7
+ top: 0
8
+ z-index: 2
9
+ @include media-breakpoint-up(md)
10
+ padding-top: $grid-gutter * 2
11
+ a
12
+ text-decoration: none
13
+ // Logo
14
+ img
15
+ display: block
16
+ margin-left: -2px
17
+ > a
18
+ display: inline-block
19
+ position: relative
20
+ transition: filter .3s ease
21
+ vertical-align: middle
22
+ z-index: 1
23
+ & + em
24
+ display: inline-block
25
+ font-size: px2rem(25)
26
+ margin-left: $grid-gutter
27
+ margin-top: -2px
28
+ vertical-align: middle
29
+ @include media-breakpoint-up(lg)
30
+ width: calc(8.3333% + 9px)
31
+ img
32
+ width: 100%
33
+ @include media-breakpoint-up(md)
34
+ .is-menu-opened &
35
+ filter: invert(1)
36
+ @include media-breakpoint-up(md)
37
+ > a img,
38
+ > a + em
39
+ transition: opacity 0.35s
40
+ &.is-hidden
41
+ > a img,
42
+ > a + em
43
+ opacity: 0
44
+ .is-menu-opened &
45
+ opacity: 1
46
+ @include media-breakpoint-down(md)
47
+ transition: transform .35s $easeInOutQuad
48
+ &.is-hidden
49
+ pointer-events: none
50
+ transform: translateY(-100%)
@@ -0,0 +1,17 @@
1
+ a
2
+ color: $primary
3
+ text-decoration-color: rgba($primary, .2)
4
+ text-decoration-thickness: 1px
5
+ text-underline-offset: 3px
6
+ transition: text-decoration .3s, color .3s ease
7
+ &:hover
8
+ text-decoration-color: $primary
9
+ &[target="_blank"]
10
+ &::after
11
+ @include icon
12
+ content: "\e900"
13
+ font-size: .75em
14
+ margin-left: .3rem
15
+ @include media-breakpoint-up(md)
16
+ .is-menu-opened main &
17
+ color: $white
@@ -0,0 +1,109 @@
1
+ html
2
+ -ms-text-size-adjust: 100%
3
+ -webkit-tap-highlight-color: transparent
4
+ -webkit-text-size-adjust: 100%
5
+ font-family: $font-family-serif
6
+
7
+ h1, .h1, h2, h3
8
+ font-family: $font-family-sans-serif
9
+
10
+ h1, .h1
11
+ font-size: px2rem(36)
12
+ line-height: px2rem(50)
13
+ @include media-breakpoint-up(lg)
14
+ font-size: px2rem(65)
15
+ line-height: px2rem(90)
16
+
17
+ h1
18
+ margin-bottom: $grid-gutter * 2
19
+ @include media-breakpoint-up(lg)
20
+ margin-bottom: $grid-gutter * 5
21
+
22
+ .h1
23
+ &, a
24
+ color: $secondary
25
+ text-decoration: none
26
+ .is-menu-opened &
27
+ color: $secondary-reverse
28
+
29
+ h2
30
+ font-size: px2rem(28)
31
+ line-height: 1.4
32
+ margin-bottom: $grid-gutter * 2
33
+ @include media-breakpoint-up(lg)
34
+ font-size: px2rem(45)
35
+
36
+ // Engagements
37
+ p + h2
38
+ margin-top: $grid-gutter * 4
39
+
40
+ // La plupart des textes
41
+ p, li, dl
42
+ font-size: px2rem(14)
43
+ line-height: px2rem(24)
44
+ section &
45
+ font-size: px2rem(19)
46
+ line-height: px2rem(30)
47
+
48
+ // Notes
49
+ aside
50
+ p
51
+ font-size: px2rem(14)
52
+ line-height: px2rem(24)
53
+ @include media-breakpoint-up(lg)
54
+ font-size: px2rem(16)
55
+ line-height: px2rem(28)
56
+
57
+ // Chapitres métiers et équipe
58
+ p
59
+ section > &
60
+ font-size: px2rem(20)
61
+ line-height: px2rem(32)
62
+ @include media-breakpoint-up(lg)
63
+ font-size: px2rem(25)
64
+ line-height: px2rem(45)
65
+
66
+ dd
67
+ margin-bottom: px2rem(30)
68
+
69
+ address
70
+ &, p
71
+ font-size: px2rem(22)
72
+ line-height: px2rem(36)
73
+
74
+ sup
75
+ font-feature-settings: "sups" 1, "ordn" 1
76
+ a
77
+ text-decoration: none
78
+
79
+ em, i
80
+ font-style: italic
81
+
82
+ blockquote
83
+ border-bottom: 1px $border-color solid
84
+ border-top: 1px $border-color solid
85
+ font-family: $font-family-sans-serif
86
+ font-size: px2rem(28)
87
+ line-height: 1.4
88
+ padding: #{$grid-gutter * 2} 0
89
+ text-align: center
90
+ @include media-breakpoint-up(lg)
91
+ font-size: px2rem(45)
92
+
93
+ section
94
+ p
95
+ margin-bottom: $grid-gutter * 2
96
+ blockquote
97
+ margin: #{$grid-gutter * 2} 0
98
+ p + blockquote
99
+ margin-top: 0
100
+ small
101
+ color: $secondary
102
+ display: block
103
+ font-size: px2rem(19)
104
+ line-height: px2rem(30)
105
+ margin-top: px2rem(9)
106
+ position: absolute
107
+ right: $grid-gutter * 2
108
+ @include media-breakpoint-down(md)
109
+ display: none
@@ -0,0 +1,8 @@
1
+ main
2
+ header
3
+ @include container
4
+ padding-bottom: $grid-gutter * 2
5
+ & > div:first-child, & > h1
6
+ padding-top: $grid-gutter * 5
7
+ @include media-breakpoint-up(md)
8
+ padding-top: $grid-gutter * 10
@@ -0,0 +1,132 @@
1
+ @keyframes menu-hovered
2
+ 0%
3
+ left: auto
4
+ right: 15px
5
+ width: 20px
6
+ 50%
7
+ left: auto
8
+ right: 15px
9
+ width: 3px
10
+ 50.1%
11
+ left: 15px
12
+ width: 3px
13
+ 100%
14
+ left: 15px
15
+ width: 20px
16
+
17
+ .burger,
18
+ .menu
19
+ position: absolute
20
+ top: 0
21
+
22
+ .burger
23
+ appearance: none
24
+ background-color: transparent
25
+ border: 0
26
+ cursor: pointer
27
+ padding: $grid-gutter
28
+ right: 15px
29
+ top: 15px
30
+ z-index: 1
31
+ @include media-breakpoint-up(md)
32
+ right: 35px
33
+ top: 35px
34
+ i, &::after, &::before
35
+ background: $primary
36
+ content: ''
37
+ height: 1px
38
+ left: 15px
39
+ position: absolute
40
+ transform-origin: center
41
+ transition: transform 0.38s 0.3s $easeInOutQuad
42
+ width: 20px
43
+ &::after
44
+ transform: translateY(-9px)
45
+ &::before
46
+ transform: translateY(9px)
47
+ span
48
+ &::after, &::before
49
+ background: $primary
50
+ content: ''
51
+ height: 1px
52
+ left: 15px
53
+ position: absolute
54
+ transform-origin: center
55
+ transition: transform 0.38s $easeInOutQuad
56
+ width: 20px
57
+ &::after
58
+ transform: rotate(-45deg) scaleX(0)
59
+ &::before
60
+ transform: rotate(45deg) scaleX(0)
61
+ &:hover
62
+ &::after
63
+ animation: 0.5s 0.2s menu-hovered $easeInOutQuad
64
+ i
65
+ animation: 0.5s 0.1s menu-hovered $easeInOutQuad
66
+ &::before
67
+ animation: 0.5s 0s menu-hovered $easeInOutQuad
68
+
69
+ .menu
70
+ backface-visibility: hidden
71
+ background: $white
72
+ bottom: 0
73
+ overflow: hidden
74
+ padding-top: $grid-gutter * 5
75
+ position: fixed
76
+ right: 0
77
+ top: 0
78
+ transform: translateX(100%)
79
+ transition: transform .3s ease
80
+ width: 100%
81
+ will-change: transform
82
+ @include media-breakpoint-up(md)
83
+ padding-top: $grid-gutter * 10
84
+ width: calc(50vw + min(1040px, calc(100vw - 390px)) / 2)
85
+ @include media-breakpoint-up(lg)
86
+ width: calc(50vw + min(1010px, calc((100vw - 100px) * (10/12) - 110px)) / 2)
87
+ ul
88
+ height: 100%
89
+ margin: 0 $grid-sm-margin * 2
90
+ @include media-breakpoint-up(md)
91
+ margin: 0 $grid-gutter * 2
92
+ &:hover
93
+ a
94
+ color: $secondary
95
+ &:hover
96
+ color: $primary
97
+ li
98
+ @include media-breakpoint-height-up(700px)
99
+ font-size: px2rem(55)
100
+ @include media-breakpoint-height-up(770px)
101
+ font-size: px2rem(65)
102
+ font-family: $font-family-sans-serif
103
+ font-size: px2rem(36)
104
+ line-height: 1.4
105
+ margin-bottom: $grid-sm-margin
106
+ &:last-child
107
+ margin-bottom: 0
108
+ a
109
+ display: block
110
+ transition: color .3s ease
111
+
112
+ .is-menu-opened
113
+ .burger
114
+ span
115
+ &::after
116
+ transform: rotate(-45deg) scaleX(1)
117
+ transition-delay: 0.25s
118
+ &::before
119
+ transform: rotate(45deg) scaleX(1)
120
+ transition-delay: 0.35s
121
+
122
+ &::before
123
+ transform: translateY(9px) scaleX(0)
124
+ transition-delay: 0.2s
125
+ i
126
+ transform: scaleX(0)
127
+ transition-delay: 0s
128
+ &::after
129
+ transform: translateY(-9px) scaleX(0)
130
+ transition-delay: 0.1s
131
+ .menu
132
+ transform: translateX(0)
@@ -0,0 +1,5 @@
1
+ main.legal
2
+ section
3
+ padding-bottom: $grid-gutter *2
4
+ @include media-breakpoint-up(md)
5
+ padding-bottom: $grid-gutter *4
@@ -0,0 +1,9 @@
1
+ main.page
2
+ section:first-of-type
3
+ @include grid(12)
4
+ @include media-breakpoint-up(md)
5
+ position: relative
6
+ p, h2
7
+ grid-column: 1/9
8
+ aside
9
+ grid-column: 10/13
data/_sass/main.sass ADDED
@@ -0,0 +1,23 @@
1
+ @import "tools/reset"
2
+ @import "tools/variables"
3
+ @import "tools/functions/px2rem"
4
+ @import "tools/mixins/media"
5
+ @import "tools/mixins/container"
6
+ @import "tools/mixins/grid"
7
+ @import "tools/mixins/graphics"
8
+
9
+ @import "commons/fonts"
10
+ @import "commons/global"
11
+ @import "commons/grid"
12
+ @import "commons/typography"
13
+ @import "commons/header"
14
+ @import "commons/footer"
15
+ @import "commons/links"
16
+
17
+ @import "components/header"
18
+ @import "components/menu"
19
+
20
+ @import "layouts/legal"
21
+ @import "layouts/page"
22
+
23
+ @import "commons/darkmode"
@@ -0,0 +1,7 @@
1
+ @function px2rem($size)
2
+ $remSize: $size / 16
3
+ @return #{$remSize}rem
4
+
5
+ @function pxr2rem($size)
6
+ $remSize: $size / 16 / 2
7
+ @return #{$remSize}rem
@@ -0,0 +1,9 @@
1
+ @mixin container
2
+ margin-left: auto
3
+ margin-right: auto
4
+ padding-left: $grid-sm-margin * 2
5
+ padding-right: $grid-sm-margin * 2
6
+ @include media-breakpoint-up(md)
7
+ max-width: $grid-width
8
+ padding-left: $grid-gutter * 2
9
+ padding-right: $grid-gutter * 2
@@ -0,0 +1,12 @@
1
+ @mixin border-line
2
+ position: relative
3
+ &::after
4
+ background: $border-color
5
+ content: ''
6
+ height: 100%
7
+ position: absolute
8
+ top: 0
9
+ width: 1px
10
+ @content
11
+ @media (prefers-color-scheme: dark)
12
+ background: $border-color-reverse
@@ -0,0 +1,5 @@
1
+ @mixin grid($cols: 12)
2
+ @include media-breakpoint-up(md)
3
+ display: grid
4
+ grid-gap: 0 #{$grid-gutter * 2}
5
+ grid-template-columns: repeat($cols, 1fr)
@@ -0,0 +1,17 @@
1
+ // Converted from : https://glennmccomb.com/articles/useful-sass-scss-media-query-mixins-for-bootstrap/
2
+
3
+ @mixin media-breakpoint-up($breakpoint)
4
+ @if map-has-key($breakpoints, $breakpoint)
5
+ $breakpoint-value: map-get($breakpoints, $breakpoint)
6
+ @media (min-width: $breakpoint-value)
7
+ @content
8
+
9
+ @mixin media-breakpoint-down($breakpoint)
10
+ @if map-has-key($breakpoints, $breakpoint)
11
+ $breakpoint-value: map-get($breakpoints, $breakpoint)
12
+ @media (max-width: ($breakpoint-value - 1))
13
+ @content
14
+
15
+ @mixin media-breakpoint-height-up($height)
16
+ @media (min-height: ($height)) and (min-width: 1200px)
17
+ @content
@@ -0,0 +1,46 @@
1
+ // http://meyerweb.com/eric/tools/css/reset/
2
+ // v2.0 | 20110126
3
+ // License: none (public domain)
4
+
5
+ html, body, div, span, applet, object, iframe,
6
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
7
+ a, abbr, acronym, address, big, cite, code,
8
+ del, dfn, em, img, ins, kbd, q, s, samp,
9
+ small, strike, strong, sub, sup, tt, var,
10
+ b, u, i, center,
11
+ dl, dt, dd, ol, ul, li,
12
+ fieldset, form, label, legend,
13
+ table, caption, tbody, tfoot, thead, tr, th, td,
14
+ article, aside, canvas, details, embed,
15
+ figure, figcaption, footer, header, hgroup,
16
+ menu, nav, output, ruby, section, summary,
17
+ time, mark, audio, video
18
+ border: 0
19
+ font: inherit
20
+ font-size: 100%
21
+ margin: 0
22
+ padding: 0
23
+ vertical-align: baseline
24
+
25
+ // HTML5 display-role reset for older browsers
26
+ article, aside, details, figcaption, figure,
27
+ footer, header, hgroup, menu, nav, section
28
+ display: block
29
+
30
+ body
31
+ line-height: 1
32
+
33
+ ol, ul
34
+ list-style: none
35
+
36
+ blockquote, q
37
+ quotes: none
38
+
39
+ blockquote:before, blockquote:after,
40
+ q:before, q:after
41
+ content: ''
42
+ content: none
43
+
44
+ table
45
+ border-collapse: collapse
46
+ border-spacing: 0
@@ -0,0 +1,28 @@
1
+ $black: black
2
+ $white: white
3
+
4
+ $primary: $black
5
+ $secondary: rgba($primary, 0.55)
6
+ $secondary-on-gray: rgba($primary, 0.65)
7
+ $secondary-reverse: rgba($white, 0.55)
8
+ $secondary-on-gray-reverse: rgba($white, 0.65)
9
+ $bg-color: $white
10
+ $bg-secondary-color: #F2F2F2
11
+ $bg-secondary-color-reverse: #0D0D0D
12
+ $border-color: rgba($primary, 0.1)
13
+ $border-color-on-gray: rgba($primary, 0.4)
14
+ $border-color-reverse: rgba($white, 0.1)
15
+ $border-color-on-gray-reverse: rgba($white, 0.4)
16
+
17
+ $font-family-sans-serif: "Soehne", sans-serif
18
+ $font-family-serif: "Signifier", serif
19
+
20
+ // grid
21
+ $grid-cols: 12
22
+ $grid-gutter: 25px
23
+ $grid-width: 1440px
24
+ $grid-sm-margin: 15px
25
+
26
+ // Media breakpoints
27
+ $breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)
28
+ $easeInOutQuad: cubic-bezier(0.45, 0, 0.55, 1)
@@ -0,0 +1,5 @@
1
+ ---
2
+ layout: ''
3
+ ---
4
+
5
+ @import "main";
Binary file
Binary file
data/assets/js/main.js ADDED
@@ -0,0 +1,5 @@
1
+ ---
2
+ layout:
3
+ ---
4
+
5
+ {% include js/menu.js %}
metadata ADDED
@@ -0,0 +1,151 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: jekyll-theme-noesya
3
+ version: !ruby/object:Gem::Version
4
+ version: 1.0.0
5
+ platform: ruby
6
+ authors:
7
+ - Sébastien Moulène
8
+ - Arnaud Levy
9
+ autorequire:
10
+ bindir: bin
11
+ cert_chain: []
12
+ date: 2021-10-29 00:00:00.000000000 Z
13
+ dependencies:
14
+ - !ruby/object:Gem::Dependency
15
+ name: jekyll
16
+ requirement: !ruby/object:Gem::Requirement
17
+ requirements:
18
+ - - "~>"
19
+ - !ruby/object:Gem::Version
20
+ version: '4.0'
21
+ type: :runtime
22
+ prerelease: false
23
+ version_requirements: !ruby/object:Gem::Requirement
24
+ requirements:
25
+ - - "~>"
26
+ - !ruby/object:Gem::Version
27
+ version: '4.0'
28
+ - !ruby/object:Gem::Dependency
29
+ name: jekyll_picture_tag
30
+ requirement: !ruby/object:Gem::Requirement
31
+ requirements:
32
+ - - ">="
33
+ - !ruby/object:Gem::Version
34
+ version: '0'
35
+ type: :runtime
36
+ prerelease: false
37
+ version_requirements: !ruby/object:Gem::Requirement
38
+ requirements:
39
+ - - ">="
40
+ - !ruby/object:Gem::Version
41
+ version: '0'
42
+ - !ruby/object:Gem::Dependency
43
+ name: jekyll-minifier
44
+ requirement: !ruby/object:Gem::Requirement
45
+ requirements:
46
+ - - ">="
47
+ - !ruby/object:Gem::Version
48
+ version: '0'
49
+ type: :runtime
50
+ prerelease: false
51
+ version_requirements: !ruby/object:Gem::Requirement
52
+ requirements:
53
+ - - ">="
54
+ - !ruby/object:Gem::Version
55
+ version: '0'
56
+ - !ruby/object:Gem::Dependency
57
+ name: jekyll-sitemap
58
+ requirement: !ruby/object:Gem::Requirement
59
+ requirements:
60
+ - - ">="
61
+ - !ruby/object:Gem::Version
62
+ version: '0'
63
+ type: :runtime
64
+ prerelease: false
65
+ version_requirements: !ruby/object:Gem::Requirement
66
+ requirements:
67
+ - - ">="
68
+ - !ruby/object:Gem::Version
69
+ version: '0'
70
+ - !ruby/object:Gem::Dependency
71
+ name: bundler
72
+ requirement: !ruby/object:Gem::Requirement
73
+ requirements:
74
+ - - ">="
75
+ - !ruby/object:Gem::Version
76
+ version: '0'
77
+ type: :development
78
+ prerelease: false
79
+ version_requirements: !ruby/object:Gem::Requirement
80
+ requirements:
81
+ - - ">="
82
+ - !ruby/object:Gem::Version
83
+ version: '0'
84
+ description:
85
+ email:
86
+ - sebousan@gmail.com
87
+ - contact@arnaudlevy.com
88
+ executables: []
89
+ extensions: []
90
+ extra_rdoc_files: []
91
+ files:
92
+ - LICENSE
93
+ - _includes/footer.html
94
+ - _includes/header.html
95
+ - _includes/js/menu.js
96
+ - _includes/nav/contacts.html
97
+ - _includes/nav/ecosystem.html
98
+ - _includes/nav/legal.html
99
+ - _includes/nav/primary.html
100
+ - _includes/seo.html
101
+ - _layouts/default.html
102
+ - _layouts/page.html
103
+ - _sass/commons/darkmode.sass
104
+ - _sass/commons/fonts.sass
105
+ - _sass/commons/footer.sass
106
+ - _sass/commons/global.sass
107
+ - _sass/commons/grid.sass
108
+ - _sass/commons/header.sass
109
+ - _sass/commons/links.sass
110
+ - _sass/commons/typography.sass
111
+ - _sass/components/header.sass
112
+ - _sass/components/menu.sass
113
+ - _sass/layouts/legal.sass
114
+ - _sass/layouts/page.sass
115
+ - _sass/main.sass
116
+ - _sass/tools/functions/px2rem.sass
117
+ - _sass/tools/mixins/container.sass
118
+ - _sass/tools/mixins/graphics.sass
119
+ - _sass/tools/mixins/grid.sass
120
+ - _sass/tools/mixins/media.sass
121
+ - _sass/tools/reset.sass
122
+ - _sass/tools/variables.sass
123
+ - assets/css/main.scss
124
+ - assets/images/chouette/large.png
125
+ - assets/images/chouette/small.png
126
+ - assets/js/main.js
127
+ homepage: https://github.com/noesya/jekyll-theme-noesya
128
+ licenses:
129
+ - MIT
130
+ metadata:
131
+ plugin_type: theme
132
+ post_install_message:
133
+ rdoc_options: []
134
+ require_paths:
135
+ - lib
136
+ required_ruby_version: !ruby/object:Gem::Requirement
137
+ requirements:
138
+ - - ">="
139
+ - !ruby/object:Gem::Version
140
+ version: '0'
141
+ required_rubygems_version: !ruby/object:Gem::Requirement
142
+ requirements:
143
+ - - ">="
144
+ - !ruby/object:Gem::Version
145
+ version: '0'
146
+ requirements: []
147
+ rubygems_version: 3.1.6
148
+ signing_key:
149
+ specification_version: 4
150
+ summary: Noesya theme for Jekyll.
151
+ test_files: []