jekyll-theme-noesya 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
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: []