jekyll-theme-explosive-lab 0.1.0 → 0.1.2
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.
- data/LICENSE.txt +21 -0
- data/README.md +48 -0
- data/_includes/footer.html +7 -0
- data/_includes/head.html +48 -0
- data/_includes/header.html +20 -0
- data/_layouts/default.html +9 -0
- data/_layouts/page.html +6 -0
- data/_layouts/post.html +6 -0
- data/_sass/include-media.scss +567 -0
- data/_sass/main.scss +144 -0
- data/_sass/mixin.scss +7 -0
- data/_sass/normalize.scss +461 -0
- data/assets/css/style.scss +7 -0
- data/assets/js/jquery-3.1.1.js +10220 -0
- data/assets/js/main.js +14 -0
- metadata +38 -15
- checksums.yaml +0 -7
data/LICENSE.txt
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
The MIT License (MIT)
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2017
|
|
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
|
|
13
|
+
all 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
|
|
21
|
+
THE SOFTWARE.
|
data/README.md
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
# jekyll-theme-explosive-lab
|
|
2
|
+
|
|
3
|
+
Welcome to your new Jekyll theme! In this directory, you'll find the files you need to be able to package up your theme into a gem. Put your layouts in `_layouts`, your includes in `_includes` and your sass in `_sass`. To experiment with this code, add some sample content and run `bundle exec jekyll serve` – this directory is setup just like a Jekyll site!
|
|
4
|
+
|
|
5
|
+
TODO: Delete this and the text above, and describe your gem
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
Add this line to your Jekyll site's `Gemfile`:
|
|
10
|
+
|
|
11
|
+
```ruby
|
|
12
|
+
gem "jekyll-theme-explosive-lab"
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
And add this line to your Jekyll site's `_config.yml`:
|
|
16
|
+
|
|
17
|
+
```yaml
|
|
18
|
+
theme: jekyll-theme-explosive-lab
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
And then execute:
|
|
22
|
+
|
|
23
|
+
$ bundle
|
|
24
|
+
|
|
25
|
+
Or install it yourself as:
|
|
26
|
+
|
|
27
|
+
$ gem install jekyll-theme-explosive-lab
|
|
28
|
+
|
|
29
|
+
## Usage
|
|
30
|
+
|
|
31
|
+
TODO: Write usage instructions here. Describe your available layouts, includes, and/or sass.
|
|
32
|
+
|
|
33
|
+
## Contributing
|
|
34
|
+
|
|
35
|
+
Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/hello. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
|
|
36
|
+
|
|
37
|
+
## Development
|
|
38
|
+
|
|
39
|
+
To set up your environment to develop this theme, run `bundle install`.
|
|
40
|
+
|
|
41
|
+
Your theme is setup just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
|
|
42
|
+
|
|
43
|
+
When your theme is released, only the files in `_layouts`, `_includes`, and `_sass` tracked with Git will be released.
|
|
44
|
+
|
|
45
|
+
## License
|
|
46
|
+
|
|
47
|
+
The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
|
|
48
|
+
|
data/_includes/head.html
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="it">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
6
|
+
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
|
|
7
|
+
|
|
8
|
+
<title>
|
|
9
|
+
{% if page.title %}
|
|
10
|
+
{{ page.title | escape }}
|
|
11
|
+
{% else %}
|
|
12
|
+
{{ site.title | escape }}
|
|
13
|
+
{% endif %}
|
|
14
|
+
</title>
|
|
15
|
+
|
|
16
|
+
<meta name="description"
|
|
17
|
+
content="
|
|
18
|
+
{% if page.metaDescription %}
|
|
19
|
+
{{ page.metaDescription | truncate: 160 | escape }}
|
|
20
|
+
{% else %}
|
|
21
|
+
{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 160 | escape }}
|
|
22
|
+
{% endif %}
|
|
23
|
+
">
|
|
24
|
+
|
|
25
|
+
<link rel="stylesheet" href="{{ "/assets/css/style.css" | relative_url }}">
|
|
26
|
+
<script src="{{"/assets/js/jquery-3.1.1.js" | relative_url }}"></script>
|
|
27
|
+
<script src="{{"/assets/js/main.js" | relative_url }}"></script>
|
|
28
|
+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
|
29
|
+
<link href="https://fonts.googleapis.com/css?family=Anton|Fjalla+One" rel="stylesheet">
|
|
30
|
+
|
|
31
|
+
<link rel="shortcut icon" sizes="32x32" href="images/app-icon-32.png">
|
|
32
|
+
|
|
33
|
+
<!-- icon in the highest resolution we need it for -->
|
|
34
|
+
<link rel="icon" sizes="192x192" href="icon.png">
|
|
35
|
+
|
|
36
|
+
<!-- reuse same icon for Safari -->
|
|
37
|
+
<link rel="apple-touch-icon" href="ios-icon.png">
|
|
38
|
+
|
|
39
|
+
<!-- multiple icons for IE -->
|
|
40
|
+
<meta name="msapplication-square310x310logo" content="icon_largetile.png">
|
|
41
|
+
|
|
42
|
+
<!-- theme color for Chrome, Firefox OS and Opera -->
|
|
43
|
+
<meta name="theme-color" content="#8F00B2">
|
|
44
|
+
|
|
45
|
+
<!-- theme color for Chrome, Firefox OS and Opera -->
|
|
46
|
+
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
47
|
+
</head>
|
|
48
|
+
<body>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<header>
|
|
2
|
+
<div class="header-logo">
|
|
3
|
+
<span>
|
|
4
|
+
<a href="/" title="ExplosiveLab Home Page">{{page.title}}</a>
|
|
5
|
+
</span>
|
|
6
|
+
</div>
|
|
7
|
+
|
|
8
|
+
<nav class="header-navigation">
|
|
9
|
+
<div class="header-navigation-icon">
|
|
10
|
+
<span>menu</span>
|
|
11
|
+
<i class="material-icons md-48">apps</i>
|
|
12
|
+
</div>
|
|
13
|
+
|
|
14
|
+
<ul class="header-navigation-menu disabled">
|
|
15
|
+
<li><a href="">blog</a></li>
|
|
16
|
+
<li><a href="">chi siamo</a></li>
|
|
17
|
+
<li><a href="">contatti</a></li>
|
|
18
|
+
</ul>
|
|
19
|
+
</nav>
|
|
20
|
+
</header>
|
data/_layouts/page.html
ADDED
data/_layouts/post.html
ADDED
|
@@ -0,0 +1,567 @@
|
|
|
1
|
+
@charset "UTF-8";
|
|
2
|
+
|
|
3
|
+
// _ _ _ _ _
|
|
4
|
+
// (_) | | | | | (_)
|
|
5
|
+
// _ _ __ ___| |_ _ __| | ___ _ __ ___ ___ __| |_ __ _
|
|
6
|
+
// | | '_ \ / __| | | | |/ _` |/ _ \ | '_ ` _ \ / _ \/ _` | |/ _` |
|
|
7
|
+
// | | | | | (__| | |_| | (_| | __/ | | | | | | __/ (_| | | (_| |
|
|
8
|
+
// |_|_| |_|\___|_|\__,_|\__,_|\___| |_| |_| |_|\___|\__,_|_|\__,_|
|
|
9
|
+
//
|
|
10
|
+
// Simple, elegant and maintainable media queries in Sass
|
|
11
|
+
// v1.4.9
|
|
12
|
+
//
|
|
13
|
+
// http://include-media.com
|
|
14
|
+
//
|
|
15
|
+
// Authors: Eduardo Boucas (@eduardoboucas)
|
|
16
|
+
// Hugo Giraudel (@hugogiraudel)
|
|
17
|
+
//
|
|
18
|
+
// This project is licensed under the terms of the MIT license
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
////
|
|
22
|
+
/// include-media library public configuration
|
|
23
|
+
/// @author Eduardo Boucas
|
|
24
|
+
/// @access public
|
|
25
|
+
////
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
///
|
|
29
|
+
/// Creates a list of global breakpoints
|
|
30
|
+
///
|
|
31
|
+
/// @example scss - Creates a single breakpoint with the label `phone`
|
|
32
|
+
/// $breakpoints: ('phone': 320px);
|
|
33
|
+
///
|
|
34
|
+
$breakpoints: (
|
|
35
|
+
'phone': 320px,
|
|
36
|
+
'tablet': 768px,
|
|
37
|
+
'desktop': 1024px
|
|
38
|
+
) !default;
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
///
|
|
42
|
+
/// Creates a list of static expressions or media types
|
|
43
|
+
///
|
|
44
|
+
/// @example scss - Creates a single media type (screen)
|
|
45
|
+
/// $media-expressions: ('screen': 'screen');
|
|
46
|
+
///
|
|
47
|
+
/// @example scss - Creates a static expression with logical disjunction (OR operator)
|
|
48
|
+
/// $media-expressions: (
|
|
49
|
+
/// 'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)'
|
|
50
|
+
/// );
|
|
51
|
+
///
|
|
52
|
+
$media-expressions: (
|
|
53
|
+
'screen': 'screen',
|
|
54
|
+
'print': 'print',
|
|
55
|
+
'handheld': 'handheld',
|
|
56
|
+
'landscape': '(orientation: landscape)',
|
|
57
|
+
'portrait': '(orientation: portrait)',
|
|
58
|
+
'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)',
|
|
59
|
+
'retina3x': '(-webkit-min-device-pixel-ratio: 3), (min-resolution: 350dpi), (min-resolution: 3dppx)'
|
|
60
|
+
) !default;
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
///
|
|
64
|
+
/// Defines a number to be added or subtracted from each unit when declaring breakpoints with exclusive intervals
|
|
65
|
+
///
|
|
66
|
+
/// @example scss - Interval for pixels is defined as `1` by default
|
|
67
|
+
/// @include media('>128px') {}
|
|
68
|
+
///
|
|
69
|
+
/// /* Generates: */
|
|
70
|
+
/// @media (min-width: 129px) {}
|
|
71
|
+
///
|
|
72
|
+
/// @example scss - Interval for ems is defined as `0.01` by default
|
|
73
|
+
/// @include media('>20em') {}
|
|
74
|
+
///
|
|
75
|
+
/// /* Generates: */
|
|
76
|
+
/// @media (min-width: 20.01em) {}
|
|
77
|
+
///
|
|
78
|
+
/// @example scss - Interval for rems is defined as `0.1` by default, to be used with `font-size: 62.5%;`
|
|
79
|
+
/// @include media('>2.0rem') {}
|
|
80
|
+
///
|
|
81
|
+
/// /* Generates: */
|
|
82
|
+
/// @media (min-width: 2.1rem) {}
|
|
83
|
+
///
|
|
84
|
+
$unit-intervals: (
|
|
85
|
+
'px': 1,
|
|
86
|
+
'em': 0.01,
|
|
87
|
+
'rem': 0.1,
|
|
88
|
+
'': 0
|
|
89
|
+
) !default;
|
|
90
|
+
|
|
91
|
+
///
|
|
92
|
+
/// Defines whether support for media queries is available, useful for creating separate stylesheets
|
|
93
|
+
/// for browsers that don't support media queries.
|
|
94
|
+
///
|
|
95
|
+
/// @example scss - Disables support for media queries
|
|
96
|
+
/// $im-media-support: false;
|
|
97
|
+
/// @include media('>=tablet') {
|
|
98
|
+
/// .foo {
|
|
99
|
+
/// color: tomato;
|
|
100
|
+
/// }
|
|
101
|
+
/// }
|
|
102
|
+
///
|
|
103
|
+
/// /* Generates: */
|
|
104
|
+
/// .foo {
|
|
105
|
+
/// color: tomato;
|
|
106
|
+
/// }
|
|
107
|
+
///
|
|
108
|
+
$im-media-support: true !default;
|
|
109
|
+
|
|
110
|
+
///
|
|
111
|
+
/// Selects which breakpoint to emulate when support for media queries is disabled. Media queries that start at or
|
|
112
|
+
/// intercept the breakpoint will be displayed, any others will be ignored.
|
|
113
|
+
///
|
|
114
|
+
/// @example scss - This media query will show because it intercepts the static breakpoint
|
|
115
|
+
/// $im-media-support: false;
|
|
116
|
+
/// $im-no-media-breakpoint: 'desktop';
|
|
117
|
+
/// @include media('>=tablet') {
|
|
118
|
+
/// .foo {
|
|
119
|
+
/// color: tomato;
|
|
120
|
+
/// }
|
|
121
|
+
/// }
|
|
122
|
+
///
|
|
123
|
+
/// /* Generates: */
|
|
124
|
+
/// .foo {
|
|
125
|
+
/// color: tomato;
|
|
126
|
+
/// }
|
|
127
|
+
///
|
|
128
|
+
/// @example scss - This media query will NOT show because it does not intercept the desktop breakpoint
|
|
129
|
+
/// $im-media-support: false;
|
|
130
|
+
/// $im-no-media-breakpoint: 'tablet';
|
|
131
|
+
/// @include media('>=desktop') {
|
|
132
|
+
/// .foo {
|
|
133
|
+
/// color: tomato;
|
|
134
|
+
/// }
|
|
135
|
+
/// }
|
|
136
|
+
///
|
|
137
|
+
/// /* No output */
|
|
138
|
+
///
|
|
139
|
+
$im-no-media-breakpoint: 'desktop' !default;
|
|
140
|
+
|
|
141
|
+
///
|
|
142
|
+
/// Selects which media expressions are allowed in an expression for it to be used when media queries
|
|
143
|
+
/// are not supported.
|
|
144
|
+
///
|
|
145
|
+
/// @example scss - This media query will show because it intercepts the static breakpoint and contains only accepted media expressions
|
|
146
|
+
/// $im-media-support: false;
|
|
147
|
+
/// $im-no-media-breakpoint: 'desktop';
|
|
148
|
+
/// $im-no-media-expressions: ('screen');
|
|
149
|
+
/// @include media('>=tablet', 'screen') {
|
|
150
|
+
/// .foo {
|
|
151
|
+
/// color: tomato;
|
|
152
|
+
/// }
|
|
153
|
+
/// }
|
|
154
|
+
///
|
|
155
|
+
/// /* Generates: */
|
|
156
|
+
/// .foo {
|
|
157
|
+
/// color: tomato;
|
|
158
|
+
/// }
|
|
159
|
+
///
|
|
160
|
+
/// @example scss - This media query will NOT show because it intercepts the static breakpoint but contains a media expression that is not accepted
|
|
161
|
+
/// $im-media-support: false;
|
|
162
|
+
/// $im-no-media-breakpoint: 'desktop';
|
|
163
|
+
/// $im-no-media-expressions: ('screen');
|
|
164
|
+
/// @include media('>=tablet', 'retina2x') {
|
|
165
|
+
/// .foo {
|
|
166
|
+
/// color: tomato;
|
|
167
|
+
/// }
|
|
168
|
+
/// }
|
|
169
|
+
///
|
|
170
|
+
/// /* No output */
|
|
171
|
+
///
|
|
172
|
+
$im-no-media-expressions: ('screen', 'portrait', 'landscape') !default;
|
|
173
|
+
|
|
174
|
+
////
|
|
175
|
+
/// Cross-engine logging engine
|
|
176
|
+
/// @author Hugo Giraudel
|
|
177
|
+
/// @access private
|
|
178
|
+
////
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
///
|
|
182
|
+
/// Log a message either with `@error` if supported
|
|
183
|
+
/// else with `@warn`, using `feature-exists('at-error')`
|
|
184
|
+
/// to detect support.
|
|
185
|
+
///
|
|
186
|
+
/// @param {String} $message - Message to log
|
|
187
|
+
///
|
|
188
|
+
@function im-log($message) {
|
|
189
|
+
@if feature-exists('at-error') {
|
|
190
|
+
@error $message;
|
|
191
|
+
} @else {
|
|
192
|
+
@warn $message;
|
|
193
|
+
$_: noop();
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
@return $message;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
|
|
200
|
+
///
|
|
201
|
+
/// Wrapper mixin for the log function so it can be used with a more friendly
|
|
202
|
+
/// API than `@if im-log('..') {}` or `$_: im-log('..')`. Basically, use the function
|
|
203
|
+
/// within functions because it is not possible to include a mixin in a function
|
|
204
|
+
/// and use the mixin everywhere else because it's much more elegant.
|
|
205
|
+
///
|
|
206
|
+
/// @param {String} $message - Message to log
|
|
207
|
+
///
|
|
208
|
+
@mixin log($message) {
|
|
209
|
+
@if im-log($message) {}
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
|
|
213
|
+
///
|
|
214
|
+
/// Function with no `@return` called next to `@warn` in Sass 3.3
|
|
215
|
+
/// to trigger a compiling error and stop the process.
|
|
216
|
+
///
|
|
217
|
+
@function noop() {}
|
|
218
|
+
|
|
219
|
+
///
|
|
220
|
+
/// Determines whether a list of conditions is intercepted by the static breakpoint.
|
|
221
|
+
///
|
|
222
|
+
/// @param {Arglist} $conditions - Media query conditions
|
|
223
|
+
///
|
|
224
|
+
/// @return {Boolean} - Returns true if the conditions are intercepted by the static breakpoint
|
|
225
|
+
///
|
|
226
|
+
@function im-intercepts-static-breakpoint($conditions...) {
|
|
227
|
+
$no-media-breakpoint-value: map-get($breakpoints, $im-no-media-breakpoint);
|
|
228
|
+
|
|
229
|
+
@if not $no-media-breakpoint-value {
|
|
230
|
+
@if im-log('`#{$im-no-media-breakpoint}` is not a valid breakpoint.') {}
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
@each $condition in $conditions {
|
|
234
|
+
@if not map-has-key($media-expressions, $condition) {
|
|
235
|
+
$operator: get-expression-operator($condition);
|
|
236
|
+
$prefix: get-expression-prefix($operator);
|
|
237
|
+
$value: get-expression-value($condition, $operator);
|
|
238
|
+
|
|
239
|
+
@if ($prefix == 'max' and $value <= $no-media-breakpoint-value) or
|
|
240
|
+
($prefix == 'min' and $value > $no-media-breakpoint-value) {
|
|
241
|
+
@return false;
|
|
242
|
+
}
|
|
243
|
+
} @else if not index($im-no-media-expressions, $condition) {
|
|
244
|
+
@return false;
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
@return true;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
////
|
|
252
|
+
/// Parsing engine
|
|
253
|
+
/// @author Hugo Giraudel
|
|
254
|
+
/// @access private
|
|
255
|
+
////
|
|
256
|
+
|
|
257
|
+
|
|
258
|
+
///
|
|
259
|
+
/// Get operator of an expression
|
|
260
|
+
///
|
|
261
|
+
/// @param {String} $expression - Expression to extract operator from
|
|
262
|
+
///
|
|
263
|
+
/// @return {String} - Any of `>=`, `>`, `<=`, `<`, `≥`, `≤`
|
|
264
|
+
///
|
|
265
|
+
@function get-expression-operator($expression) {
|
|
266
|
+
@each $operator in ('>=', '>', '<=', '<', '≥', '≤') {
|
|
267
|
+
@if str-index($expression, $operator) {
|
|
268
|
+
@return $operator;
|
|
269
|
+
}
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
// It is not possible to include a mixin inside a function, so we have to
|
|
273
|
+
// rely on the `im-log(..)` function rather than the `log(..)` mixin. Because
|
|
274
|
+
// functions cannot be called anywhere in Sass, we need to hack the call in
|
|
275
|
+
// a dummy variable, such as `$_`. If anybody ever raise a scoping issue with
|
|
276
|
+
// Sass 3.3, change this line in `@if im-log(..) {}` instead.
|
|
277
|
+
$_: im-log('No operator found in `#{$expression}`.');
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
|
|
281
|
+
///
|
|
282
|
+
/// Get dimension of an expression, based on a found operator
|
|
283
|
+
///
|
|
284
|
+
/// @param {String} $expression - Expression to extract dimension from
|
|
285
|
+
/// @param {String} $operator - Operator from `$expression`
|
|
286
|
+
///
|
|
287
|
+
/// @return {String} - `width` or `height` (or potentially anything else)
|
|
288
|
+
///
|
|
289
|
+
@function get-expression-dimension($expression, $operator) {
|
|
290
|
+
$operator-index: str-index($expression, $operator);
|
|
291
|
+
$parsed-dimension: str-slice($expression, 0, $operator-index - 1);
|
|
292
|
+
$dimension: 'width';
|
|
293
|
+
|
|
294
|
+
@if str-length($parsed-dimension) > 0 {
|
|
295
|
+
$dimension: $parsed-dimension;
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
@return $dimension;
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
|
|
302
|
+
///
|
|
303
|
+
/// Get dimension prefix based on an operator
|
|
304
|
+
///
|
|
305
|
+
/// @param {String} $operator - Operator
|
|
306
|
+
///
|
|
307
|
+
/// @return {String} - `min` or `max`
|
|
308
|
+
///
|
|
309
|
+
@function get-expression-prefix($operator) {
|
|
310
|
+
@return if(index(('<', '<=', '≤'), $operator), 'max', 'min');
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
|
|
314
|
+
///
|
|
315
|
+
/// Get value of an expression, based on a found operator
|
|
316
|
+
///
|
|
317
|
+
/// @param {String} $expression - Expression to extract value from
|
|
318
|
+
/// @param {String} $operator - Operator from `$expression`
|
|
319
|
+
///
|
|
320
|
+
/// @return {Number} - A numeric value
|
|
321
|
+
///
|
|
322
|
+
@function get-expression-value($expression, $operator) {
|
|
323
|
+
$operator-index: str-index($expression, $operator);
|
|
324
|
+
$value: str-slice($expression, $operator-index + str-length($operator));
|
|
325
|
+
|
|
326
|
+
@if map-has-key($breakpoints, $value) {
|
|
327
|
+
$value: map-get($breakpoints, $value);
|
|
328
|
+
} @else {
|
|
329
|
+
$value: to-number($value);
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
$interval: map-get($unit-intervals, unit($value));
|
|
333
|
+
|
|
334
|
+
@if not $interval {
|
|
335
|
+
// It is not possible to include a mixin inside a function, so we have to
|
|
336
|
+
// rely on the `im-log(..)` function rather than the `log(..)` mixin. Because
|
|
337
|
+
// functions cannot be called anywhere in Sass, we need to hack the call in
|
|
338
|
+
// a dummy variable, such as `$_`. If anybody ever raise a scoping issue with
|
|
339
|
+
// Sass 3.3, change this line in `@if im-log(..) {}` instead.
|
|
340
|
+
$_: im-log('Unknown unit `#{unit($value)}`.');
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
@if $operator == '>' {
|
|
344
|
+
$value: $value + $interval;
|
|
345
|
+
} @else if $operator == '<' {
|
|
346
|
+
$value: $value - $interval;
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
@return $value;
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
|
|
353
|
+
///
|
|
354
|
+
/// Parse an expression to return a valid media-query expression
|
|
355
|
+
///
|
|
356
|
+
/// @param {String} $expression - Expression to parse
|
|
357
|
+
///
|
|
358
|
+
/// @return {String} - Valid media query
|
|
359
|
+
///
|
|
360
|
+
@function parse-expression($expression) {
|
|
361
|
+
// If it is part of $media-expressions, it has no operator
|
|
362
|
+
// then there is no need to go any further, just return the value
|
|
363
|
+
@if map-has-key($media-expressions, $expression) {
|
|
364
|
+
@return map-get($media-expressions, $expression);
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
$operator: get-expression-operator($expression);
|
|
368
|
+
$dimension: get-expression-dimension($expression, $operator);
|
|
369
|
+
$prefix: get-expression-prefix($operator);
|
|
370
|
+
$value: get-expression-value($expression, $operator);
|
|
371
|
+
|
|
372
|
+
@return '(#{$prefix}-#{$dimension}: #{$value})';
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
///
|
|
376
|
+
/// Slice `$list` between `$start` and `$end` indexes
|
|
377
|
+
///
|
|
378
|
+
/// @access private
|
|
379
|
+
///
|
|
380
|
+
/// @param {List} $list - List to slice
|
|
381
|
+
/// @param {Number} $start [1] - Start index
|
|
382
|
+
/// @param {Number} $end [length($list)] - End index
|
|
383
|
+
///
|
|
384
|
+
/// @return {List} Sliced list
|
|
385
|
+
///
|
|
386
|
+
@function slice($list, $start: 1, $end: length($list)) {
|
|
387
|
+
@if length($list) < 1 or $start > $end {
|
|
388
|
+
@return ();
|
|
389
|
+
}
|
|
390
|
+
|
|
391
|
+
$result: ();
|
|
392
|
+
|
|
393
|
+
@for $i from $start through $end {
|
|
394
|
+
$result: append($result, nth($list, $i));
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
@return $result;
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
////
|
|
401
|
+
/// String to number converter
|
|
402
|
+
/// @author Hugo Giraudel
|
|
403
|
+
/// @access private
|
|
404
|
+
////
|
|
405
|
+
|
|
406
|
+
|
|
407
|
+
///
|
|
408
|
+
/// Casts a string into a number
|
|
409
|
+
///
|
|
410
|
+
/// @param {String | Number} $value - Value to be parsed
|
|
411
|
+
///
|
|
412
|
+
/// @return {Number}
|
|
413
|
+
///
|
|
414
|
+
@function to-number($value) {
|
|
415
|
+
@if type-of($value) == 'number' {
|
|
416
|
+
@return $value;
|
|
417
|
+
} @else if type-of($value) != 'string' {
|
|
418
|
+
$_: im-log('Value for `to-number` should be a number or a string.');
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
$first-character: str-slice($value, 1, 1);
|
|
422
|
+
$result: 0;
|
|
423
|
+
$digits: 0;
|
|
424
|
+
$minus: ($first-character == '-');
|
|
425
|
+
$numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);
|
|
426
|
+
|
|
427
|
+
// Remove +/- sign if present at first character
|
|
428
|
+
@if ($first-character == '+' or $first-character == '-') {
|
|
429
|
+
$value: str-slice($value, 2);
|
|
430
|
+
}
|
|
431
|
+
|
|
432
|
+
@for $i from 1 through str-length($value) {
|
|
433
|
+
$character: str-slice($value, $i, $i);
|
|
434
|
+
|
|
435
|
+
@if not (index(map-keys($numbers), $character) or $character == '.') {
|
|
436
|
+
@return to-length(if($minus, -$result, $result), str-slice($value, $i))
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
@if $character == '.' {
|
|
440
|
+
$digits: 1;
|
|
441
|
+
} @else if $digits == 0 {
|
|
442
|
+
$result: $result * 10 + map-get($numbers, $character);
|
|
443
|
+
} @else {
|
|
444
|
+
$digits: $digits * 10;
|
|
445
|
+
$result: $result + map-get($numbers, $character) / $digits;
|
|
446
|
+
}
|
|
447
|
+
}
|
|
448
|
+
|
|
449
|
+
@return if($minus, -$result, $result);
|
|
450
|
+
}
|
|
451
|
+
|
|
452
|
+
|
|
453
|
+
///
|
|
454
|
+
/// Add `$unit` to `$value`
|
|
455
|
+
///
|
|
456
|
+
/// @param {Number} $value - Value to add unit to
|
|
457
|
+
/// @param {String} $unit - String representation of the unit
|
|
458
|
+
///
|
|
459
|
+
/// @return {Number} - `$value` expressed in `$unit`
|
|
460
|
+
///
|
|
461
|
+
@function to-length($value, $unit) {
|
|
462
|
+
$units: ('px': 1px, 'cm': 1cm, 'mm': 1mm, '%': 1%, 'ch': 1ch, 'pc': 1pc, 'in': 1in, 'em': 1em, 'rem': 1rem, 'pt': 1pt, 'ex': 1ex, 'vw': 1vw, 'vh': 1vh, 'vmin': 1vmin, 'vmax': 1vmax);
|
|
463
|
+
|
|
464
|
+
@if not index(map-keys($units), $unit) {
|
|
465
|
+
$_: im-log('Invalid unit `#{$unit}`.');
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
@return $value * map-get($units, $unit);
|
|
469
|
+
}
|
|
470
|
+
|
|
471
|
+
///
|
|
472
|
+
/// This mixin aims at redefining the configuration just for the scope of
|
|
473
|
+
/// the call. It is helpful when having a component needing an extended
|
|
474
|
+
/// configuration such as custom breakpoints (referred to as tweakpoints)
|
|
475
|
+
/// for instance.
|
|
476
|
+
///
|
|
477
|
+
/// @author Hugo Giraudel
|
|
478
|
+
///
|
|
479
|
+
/// @param {Map} $tweakpoints [()] - Map of tweakpoints to be merged with `$breakpoints`
|
|
480
|
+
/// @param {Map} $tweak-media-expressions [()] - Map of tweaked media expressions to be merged with `$media-expression`
|
|
481
|
+
///
|
|
482
|
+
/// @example scss - Extend the global breakpoints with a tweakpoint
|
|
483
|
+
/// @include media-context(('custom': 678px)) {
|
|
484
|
+
/// .foo {
|
|
485
|
+
/// @include media('>phone', '<=custom') {
|
|
486
|
+
/// // ...
|
|
487
|
+
/// }
|
|
488
|
+
/// }
|
|
489
|
+
/// }
|
|
490
|
+
///
|
|
491
|
+
/// @example scss - Extend the global media expressions with a custom one
|
|
492
|
+
/// @include media-context($tweak-media-expressions: ('all': 'all')) {
|
|
493
|
+
/// .foo {
|
|
494
|
+
/// @include media('all', '>phone') {
|
|
495
|
+
/// // ...
|
|
496
|
+
/// }
|
|
497
|
+
/// }
|
|
498
|
+
/// }
|
|
499
|
+
///
|
|
500
|
+
/// @example scss - Extend both configuration maps
|
|
501
|
+
/// @include media-context(('custom': 678px), ('all': 'all')) {
|
|
502
|
+
/// .foo {
|
|
503
|
+
/// @include media('all', '>phone', '<=custom') {
|
|
504
|
+
/// // ...
|
|
505
|
+
/// }
|
|
506
|
+
/// }
|
|
507
|
+
/// }
|
|
508
|
+
///
|
|
509
|
+
@mixin media-context($tweakpoints: (), $tweak-media-expressions: ()) {
|
|
510
|
+
// Save global configuration
|
|
511
|
+
$global-breakpoints: $breakpoints;
|
|
512
|
+
$global-media-expressions: $media-expressions;
|
|
513
|
+
|
|
514
|
+
// Update global configuration
|
|
515
|
+
$breakpoints: map-merge($breakpoints, $tweakpoints) !global;
|
|
516
|
+
$media-expressions: map-merge($media-expressions, $tweak-media-expressions) !global;
|
|
517
|
+
|
|
518
|
+
@content;
|
|
519
|
+
|
|
520
|
+
// Restore global configuration
|
|
521
|
+
$breakpoints: $global-breakpoints !global;
|
|
522
|
+
$media-expressions: $global-media-expressions !global;
|
|
523
|
+
}
|
|
524
|
+
|
|
525
|
+
////
|
|
526
|
+
/// include-media public exposed API
|
|
527
|
+
/// @author Eduardo Boucas
|
|
528
|
+
/// @access public
|
|
529
|
+
////
|
|
530
|
+
|
|
531
|
+
|
|
532
|
+
///
|
|
533
|
+
/// Generates a media query based on a list of conditions
|
|
534
|
+
///
|
|
535
|
+
/// @param {Arglist} $conditions - Media query conditions
|
|
536
|
+
///
|
|
537
|
+
/// @example scss - With a single set breakpoint
|
|
538
|
+
/// @include media('>phone') { }
|
|
539
|
+
///
|
|
540
|
+
/// @example scss - With two set breakpoints
|
|
541
|
+
/// @include media('>phone', '<=tablet') { }
|
|
542
|
+
///
|
|
543
|
+
/// @example scss - With custom values
|
|
544
|
+
/// @include media('>=358px', '<850px') { }
|
|
545
|
+
///
|
|
546
|
+
/// @example scss - With set breakpoints with custom values
|
|
547
|
+
/// @include media('>desktop', '<=1350px') { }
|
|
548
|
+
///
|
|
549
|
+
/// @example scss - With a static expression
|
|
550
|
+
/// @include media('retina2x') { }
|
|
551
|
+
///
|
|
552
|
+
/// @example scss - Mixing everything
|
|
553
|
+
/// @include media('>=350px', '<tablet', 'retina3x') { }
|
|
554
|
+
///
|
|
555
|
+
@mixin media($conditions...) {
|
|
556
|
+
@if ($im-media-support and length($conditions) == 0) or
|
|
557
|
+
(not $im-media-support and im-intercepts-static-breakpoint($conditions...)) {
|
|
558
|
+
@content;
|
|
559
|
+
} @else if ($im-media-support and length($conditions) > 0) {
|
|
560
|
+
@media #{unquote(parse-expression(nth($conditions, 1)))} {
|
|
561
|
+
// Recursive call
|
|
562
|
+
@include media(slice($conditions, 2)...) {
|
|
563
|
+
@content;
|
|
564
|
+
}
|
|
565
|
+
}
|
|
566
|
+
}
|
|
567
|
+
}
|