jekyll-theme-consulting 0.2.12 → 0.3.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -113,7 +113,7 @@
113
113
 
114
114
  .off.icon {
115
115
  display: block;
116
- color: _palette(accent-inverted);
116
+ color: _palette(accent-cp);
117
117
  }
118
118
 
119
119
  .off.fact-intro {
@@ -6,25 +6,30 @@
6
6
 
7
7
  /* Icons */
8
8
 
9
- ul.icons {
10
- cursor: default;
11
- list-style: none;
12
- padding-left: 0;
9
+ ul.icons {
10
+ cursor: default;
11
+ list-style: none;
12
+ padding-left: 0;
13
13
 
14
- li {
15
- display: inline-block;
16
- padding: 0 1em 0 0;
14
+ li {
15
+ display: inline-block;
16
+ margin: 1em;
17
+ padding: 0;
17
18
 
18
- &:last-child {
19
- padding-right: 0;
20
- }
19
+ &:last-child {
20
+ padding-right: 0;
21
+ }
21
22
 
22
- .icon {
23
- color: inherit;
23
+ .icon {
24
+ color: inherit;
25
+
26
+ &:before {
27
+ font-size: 1.25em;
28
+ }
24
29
 
25
- &:before {
26
- font-size: 1.25em;
27
- }
30
+ &:hover{
31
+ color: _palette(accent-cp);
28
32
  }
29
33
  }
30
- }
34
+ }
35
+ }
@@ -6,34 +6,48 @@
6
6
 
7
7
  /* Section/Article */
8
8
 
9
- section, article {
10
- &.special {
11
- text-align: center;
12
- }
9
+ section, article {
10
+ &.special {
11
+ text-align: center;
12
+ }
13
+ }
14
+
15
+ header {
16
+ p {
17
+ font-family: _font(family-heading);
18
+ font-size: 1em;
19
+ font-weight: _font(weight-heading-alt);
20
+ letter-spacing: _font(kerning-heading);
21
+ margin-top: -0.5em;
22
+ text-transform: uppercase;
13
23
  }
14
24
 
15
- header {
16
- p {
17
- font-family: _font(family-heading);
18
- font-size: 1em;
19
- font-weight: _font(weight-heading-alt);
20
- letter-spacing: _font(kerning-heading);
21
- margin-top: -0.5em;
22
- text-transform: uppercase;
25
+ &.major {
26
+ > :last-child {
27
+ border-bottom: solid 3px _palette(accent);
28
+ display: inline-block;
29
+ margin: 0 0 _size(element-margin) 0;
30
+ padding: 0 0.75em 0.5em 0;
23
31
  }
32
+ }
24
33
 
25
- &.major {
26
- > :last-child {
27
- border-bottom: solid 3px _palette(accent);
28
- display: inline-block;
29
- margin: 0 0 _size(element-margin) 0;
30
- padding: 0 0.75em 0.5em 0;
31
- }
34
+ &.main {
35
+ > :last-child {
36
+ margin: 0 0 (_size(element-margin) * 0.5) 0;
32
37
  }
38
+ }
39
+ }
40
+
41
+ /* Inverted */
33
42
 
34
- &.main {
35
- > :last-child {
36
- margin: 0 0 (_size(element-margin) * 0.5) 0;
37
- }
43
+ section.inverted, article.inverted {
44
+ background-color: _palette(bg-alt-inverted);
45
+ }
46
+
47
+ .inverted header {
48
+ &.major {
49
+ > :last-child {
50
+ border-bottom: solid 3px _palette(accent-inverted);
38
51
  }
39
- }
52
+ }
53
+ }
@@ -6,13 +6,25 @@
6
6
 
7
7
  /* Footer */
8
8
 
9
- #footer {
10
- .copyright {
11
- color: _palette(fg-light);
12
- font-size: 0.9em;
9
+ #footer {
10
+ .copyright {
11
+ color: _palette(fg-light);
12
+ font-size: 0.9em;
13
13
 
14
- a {
15
- color: inherit;
16
- }
14
+ a {
15
+ color: inherit;
17
16
  }
18
- }
17
+ }
18
+ }
19
+
20
+ /* Inverted */
21
+
22
+ .inverted #footer {
23
+ .copyright {
24
+ color: _palette(fg-light-inverted);
25
+
26
+ a {
27
+ color: inherit;
28
+ }
29
+ }
30
+ }
@@ -6,41 +6,60 @@
6
6
 
7
7
  /* Header */
8
8
 
9
- #header {
10
- @include vendor('display', 'flex');
11
- border-bottom: solid 5px _palette(accent);
12
- padding: 2em 0 1em 0;
13
- position: relative;
14
-
15
- > * {
16
- margin-bottom: 0;
17
- }
9
+ #header {
10
+ @include vendor('display', 'flex');
11
+ border-bottom: solid 5px _palette(accent);
12
+ padding: 2em 0 1em 0;
13
+ position: relative;
18
14
 
19
- .logo {
20
- @include vendor('flex', '2');
21
- border-bottom: 0;
22
- color: inherit;
23
- font-family: _font(family-heading);
24
- font-size: 1.125em;
25
- }
15
+ > * {
16
+ margin-bottom: 0;
17
+ }
26
18
 
27
- .icons {
28
- position: absolute;
29
- right: 0;
30
- text-align: right;
31
- }
19
+ .logo {
20
+ @include vendor('flex', '2');
21
+ border-bottom: 0;
22
+ color: inherit;
23
+ font-family: _font(family-heading);
24
+ font-size: 1.125em;
25
+ }
26
+
27
+ .icons {
28
+ }
29
+
30
+ .language {
31
+ position: absolute;
32
+ right: 0;
33
+ text-align: right;
32
34
 
33
- .language {
34
- a {
35
- border: none;
35
+ li {
36
+ display: inline-block;
37
+ margin: 0;
38
+ padding: 0 1em 0 0;
39
+
40
+ &:last-child {
41
+ padding-right: 0;
36
42
  }
37
-
38
- .en:lang(en), .fr:lang(fr), .de:lang(de){
39
- font-weight: bold;
43
+
44
+ .icon {
45
+ color: inherit;
46
+
47
+ &:before {
48
+ font-size: 1.25em;
49
+ }
40
50
  }
41
51
  }
42
52
 
43
- @include breakpoint('<=small') {
44
- padding-left: 4em;
53
+ a {
54
+ border: none;
45
55
  }
46
- }
56
+
57
+ .en:lang(en), .fr:lang(fr), .de:lang(de){
58
+ font-weight: bold;
59
+ }
60
+ }
61
+
62
+ @include breakpoint('<=small') {
63
+ padding-left: 4em;
64
+ }
65
+ }
@@ -6,31 +6,30 @@
6
6
 
7
7
  /* Main */
8
8
 
9
- #main {
10
- @include vendor('flex-grow', '1');
11
- @include vendor('flex-shrink', '1');
12
- width: 100%;
9
+ #main {
10
+ @include vendor('flex-grow', '1');
11
+ @include vendor('flex-shrink', '1');
12
+ width: 100%;
13
13
 
14
- > .inner {
15
- margin: 0 auto;
16
- max-width: 110em;
14
+ > .inner {
15
+ margin: 0 auto;
16
+ max-width: 110em;
17
17
 
18
- > section {
19
- @include padding(6em, 6em);
20
- border-top: solid 2px _palette(border);
18
+ > section {
19
+ @include padding(6em, 6em);
20
+ border-top: solid 2px _palette(border);
21
21
 
22
- &:first-of-type {
23
- border-top: 0 !important;
24
- }
22
+ &:first-of-type {
23
+ border-top: 0 !important;
25
24
  }
25
+ }
26
26
 
27
- #header {
28
- margin: 0 6em 0 6em;
29
- }
27
+ #header {
28
+ margin: 0 6em 0 6em;
30
29
  }
31
30
 
32
31
  @include breakpoint('<=xlarge') {
33
- > .inner > section {
32
+ > section {
34
33
  @include padding(5em, 5em);
35
34
  }
36
35
 
@@ -40,7 +39,7 @@
40
39
  }
41
40
 
42
41
  @include breakpoint('<=large') {
43
- > .inner > section {
42
+ > section {
44
43
  @include padding(4em, 4em);
45
44
  }
46
45
 
@@ -59,3 +58,4 @@
59
58
  }
60
59
  }
61
60
  }
61
+ }
@@ -6,93 +6,156 @@
6
6
 
7
7
  /* Menu */
8
8
 
9
- #menu {
10
- ul {
11
- @include vendor('user-select', 'none');
12
- color: _palette(fg-bold);
13
- font-family: _font(family-heading);
14
- font-family: _font(weight-heading-alt);
15
- letter-spacing: _font(kerning-heading);
16
- list-style: none;
17
- margin-bottom: 0;
18
- padding: 0;
19
- text-transform: uppercase;
20
-
21
- a, span {
22
- border-bottom: 0;
23
- color: inherit;
24
- cursor: pointer;
25
- display: block;
26
- font-size: 0.9em;
27
- padding: 0.625em 0;
9
+ #menu {
10
+ ul {
11
+ @include vendor('user-select', 'none');
12
+ color: _palette(fg-bold);
13
+ font-family: _font(family-heading);
14
+ font-family: _font(weight-heading-alt);
15
+ letter-spacing: _font(kerning-heading);
16
+ list-style: none;
17
+ margin-bottom: 0;
18
+ padding: 0;
19
+ text-transform: uppercase;
20
+
21
+ a, span {
22
+ border-bottom: 0;
23
+ color: inherit;
24
+ cursor: pointer;
25
+ display: block;
26
+ font-size: 0.9em;
27
+ padding: 0.625em 0;
28
+
29
+ &:hover {
30
+ color: _palette(accent);
31
+ }
32
+
33
+ &.opener {
34
+ @include vendor('transition', 'color #{_duration(transition)} ease-in-out');
35
+ @include icon(false, solid);
36
+ -webkit-tap-highlight-color: rgba(255,255,255,0);
37
+ position: relative;
38
+
39
+ &:before {
40
+ @include vendor('transition', (
41
+ 'color #{_duration(transition)} ease-in-out',
42
+ 'transform #{_duration(transition)} ease-in-out'
43
+ ));
44
+ color: _palette(fg-light);
45
+ content: '\f078';
46
+ position: absolute;
47
+ right: 0;
48
+ }
28
49
 
29
50
  &:hover {
30
- color: _palette(accent);
51
+ &:before {
52
+ color: _palette(accent);
53
+ }
31
54
  }
32
55
 
33
- &.opener {
34
- @include vendor('transition', 'color #{_duration(transition)} ease-in-out');
35
- @include icon(false, solid);
36
- -webkit-tap-highlight-color: rgba(255,255,255,0);
37
- position: relative;
56
+ &.active {
57
+ & + ul {
58
+ display: block;
59
+ }
38
60
 
39
61
  &:before {
40
- @include vendor('transition', (
41
- 'color #{_duration(transition)} ease-in-out',
42
- 'transform #{_duration(transition)} ease-in-out'
43
- ));
44
- color: _palette(fg-light);
45
- content: '\f078';
46
- position: absolute;
47
- right: 0;
62
+ @include vendor('transform', 'rotate(-180deg)');
48
63
  }
64
+ }
65
+ }
66
+ }
67
+ }
49
68
 
50
- &:hover {
51
- &:before {
52
- color: _palette(accent);
53
- }
54
- }
69
+ > ul {
70
+ > li {
71
+ position: relative;
72
+ border-top: solid 1px _palette(border);
73
+ margin: 0.5em 0 0 0;
74
+ padding: 0.5em 0 0 0;
55
75
 
56
- &.active {
57
- & + ul {
58
- display: block;
59
- }
76
+ > ul {
77
+ color: _palette(fg-light);
78
+ display: none;
79
+ margin: 0.5em 0 1.5em 0;
80
+ padding-left: 1em;
60
81
 
61
- &:before {
62
- @include vendor('transform', 'rotate(-180deg)');
63
- }
64
- }
82
+ a, span {
83
+ font-size: 0.8em;
84
+ }
85
+
86
+ > li {
87
+ margin: 0.125em 0 0 0;
88
+ padding: 0.125em 0 0 0;
65
89
  }
66
90
  }
91
+
92
+ &:first-child {
93
+ border-top: 0;
94
+ margin-top: 0;
95
+ padding-top: 0;
96
+ }
97
+
98
+ &::before {
99
+ border-left: 6px solid transparent;
100
+ content: "";
101
+ display: block;
102
+ position: absolute;
103
+ left: -1em;
104
+ top: 0;
105
+ height: 100%;
106
+ }
107
+
108
+ &.current::before, &:hover::before {
109
+ border-left: 6px solid _palette(accent);
110
+ }
67
111
  }
112
+ }
113
+ }
68
114
 
69
- > ul {
70
- > li {
71
- border-top: solid 1px _palette(border);
72
- margin: 0.5em 0 0 0;
73
- padding: 0.5em 0 0 0;
115
+ /* Inverted */
74
116
 
75
- > ul {
76
- color: _palette(fg-light);
77
- display: none;
78
- margin: 0.5em 0 1.5em 0;
79
- padding-left: 1em;
117
+ .inverted #menu {
118
+ ul {
119
+ color: _palette(fg-bold-inverted);
80
120
 
81
- a, span {
82
- font-size: 0.8em;
83
- }
121
+ a, span {
122
+ color: inherit;
84
123
 
85
- > li {
86
- margin: 0.125em 0 0 0;
87
- padding: 0.125em 0 0 0;
88
- }
124
+ &:hover {
125
+ color: _palette(accent-inverted);
126
+ }
127
+
128
+ &.opener {
129
+ &:before {
130
+ color: _palette(fg-light-inverted);
89
131
  }
90
132
 
91
- &:first-child {
92
- border-top: 0;
93
- margin-top: 0;
94
- padding-top: 0;
133
+ &:hover {
134
+ &:before {
135
+ color: _palette(accent-inverted);
136
+ }
95
137
  }
96
138
  }
97
139
  }
98
- }
140
+ }
141
+
142
+ > ul {
143
+ > li {
144
+ border-top: solid 1px _palette(border-inverted);
145
+
146
+ > ul {
147
+ color: _palette(fg-light-inverted);
148
+ }
149
+
150
+ &:first-child {
151
+ border-top: 0;
152
+ margin-top: 0;
153
+ padding-top: 0;
154
+ }
155
+
156
+ &.current::before, &:hover::before {
157
+ border-left: 6px solid _palette(accent-inverted);
158
+ }
159
+ }
160
+ }
161
+ }