minima-gutenberg 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/LICENSE.txt +21 -0
- data/README.md +224 -0
- data/_includes/disqus_comments.html +20 -0
- data/_includes/footer.html +50 -0
- data/_includes/google-analytics.html +12 -0
- data/_includes/head.html +11 -0
- data/_includes/header.html +9 -0
- data/_includes/icon-github.html +1 -0
- data/_includes/icon-github.svg +1 -0
- data/_includes/icon-twitter.html +1 -0
- data/_includes/icon-twitter.svg +1 -0
- data/_includes/social.html +14 -0
- data/_layouts/default.html +20 -0
- data/_layouts/home.html +32 -0
- data/_layouts/page.html +14 -0
- data/_layouts/post.html +27 -0
- data/_sass/_gutenberg.scss +125 -0
- data/_sass/gutenberg/helpers/_alignment.scss +25 -0
- data/_sass/gutenberg/helpers/_grid.scss +95 -0
- data/_sass/gutenberg/layout/_aside.scss +3 -0
- data/_sass/gutenberg/layout/_base.scss +62 -0
- data/_sass/gutenberg/layout/_footer.scss +9 -0
- data/_sass/gutenberg/layout/_header.scss +3 -0
- data/_sass/gutenberg/layout/_main.scss +3 -0
- data/_sass/gutenberg/layout/_section.scss +3 -0
- data/_sass/gutenberg/mixins/_font-size.scss +5 -0
- data/_sass/gutenberg/mixins/_line-height.scss +5 -0
- data/_sass/gutenberg/mixins/_margin.scss +25 -0
- data/_sass/gutenberg/mixins/_padding.scss +27 -0
- data/_sass/gutenberg/modules/_anchor.scss +34 -0
- data/_sass/gutenberg/modules/_article.scss +11 -0
- data/_sass/gutenberg/modules/_audio.scss +10 -0
- data/_sass/gutenberg/modules/_canvas.scss +4 -0
- data/_sass/gutenberg/modules/_code.scss +28 -0
- data/_sass/gutenberg/modules/_details.scss +7 -0
- data/_sass/gutenberg/modules/_figure.scss +83 -0
- data/_sass/gutenberg/modules/_form.scss +3 -0
- data/_sass/gutenberg/modules/_heading.scss +108 -0
- data/_sass/gutenberg/modules/_horizontal-rule.scss +69 -0
- data/_sass/gutenberg/modules/_image.scss +12 -0
- data/_sass/gutenberg/modules/_list.scss +9 -0
- data/_sass/gutenberg/modules/_navigation.scss +3 -0
- data/_sass/gutenberg/modules/_progress.scss +4 -0
- data/_sass/gutenberg/modules/_quote.scss +48 -0
- data/_sass/gutenberg/modules/_table.scss +10 -0
- data/_sass/gutenberg/modules/_template.scss +4 -0
- data/_sass/gutenberg/modules/_text.scss +143 -0
- data/_sass/gutenberg/modules/_video.scss +4 -0
- data/assets/main.scss +7 -0
- data/assets/minima-social-icons.svg +33 -0
- metadata +160 -0
data/_layouts/page.html
ADDED
data/_layouts/post.html
ADDED
@@ -0,0 +1,27 @@
|
|
1
|
+
---
|
2
|
+
layout: default
|
3
|
+
---
|
4
|
+
<article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
|
5
|
+
|
6
|
+
<header class="post-header">
|
7
|
+
<h1 class="post-title p-name" itemprop="name headline">{{ page.title | escape }}</h1>
|
8
|
+
<p class="post-meta">
|
9
|
+
<time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
|
10
|
+
{%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
|
11
|
+
{{ page.date | date: date_format }}
|
12
|
+
</time>
|
13
|
+
{%- if page.author -%}
|
14
|
+
• <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="p-author h-card" itemprop="name">{{ page.author }}</span></span>
|
15
|
+
{%- endif -%}</p>
|
16
|
+
</header>
|
17
|
+
|
18
|
+
<div class="post-content e-content" itemprop="articleBody">
|
19
|
+
{{ content }}
|
20
|
+
</div>
|
21
|
+
|
22
|
+
{%- if site.disqus.shortname -%}
|
23
|
+
{%- include disqus_comments.html -%}
|
24
|
+
{%- endif -%}
|
25
|
+
|
26
|
+
<a class="u-url" href="{{ page.url | relative_url }}" hidden></a>
|
27
|
+
</article>
|
@@ -0,0 +1,125 @@
|
|
1
|
+
/* Configuration
|
2
|
+
========================================================================== */
|
3
|
+
|
4
|
+
$edit-mode: true !default; // [ true / false ] - Enables/disables the grid toggle button.
|
5
|
+
|
6
|
+
// Theme / Fonts
|
7
|
+
$theme: Merriweather !default; // [ Merriweather / OpenSans / custom ]
|
8
|
+
$custom-font-body: null !default; // [ "Libre Baskerville", Georgia, serif ]
|
9
|
+
$custom-font-headings: null !default;
|
10
|
+
|
11
|
+
// Paragraph indenting
|
12
|
+
$paragraph-indent: false !default; // [ true / false ]
|
13
|
+
|
14
|
+
// Base sizes
|
15
|
+
$base-font-size: 100 !default; // In %. Also used for mobile. Number only, no units.
|
16
|
+
$base-font-size-desktop: 112.5 !default; // In %. Used to calculate the desktop font size. Number only, no units.
|
17
|
+
$line-height: 1.625 !default;
|
18
|
+
$line-height-desktop: 1.7 !default;
|
19
|
+
$max-width: 35 !default; // Number only, no units. Gets converted to REMs and pixels.
|
20
|
+
|
21
|
+
// Modular Scale
|
22
|
+
$modular-scale: (
|
23
|
+
xxxl: 4.3,
|
24
|
+
xxl: 3.5,
|
25
|
+
xl: 3,
|
26
|
+
l: 2.5,
|
27
|
+
m: 2,
|
28
|
+
s: 1.6875,
|
29
|
+
xs: 1.4375,
|
30
|
+
xxs: 1.2,
|
31
|
+
xxxs: 1,
|
32
|
+
xxxxs: 0.8125
|
33
|
+
) !default;
|
34
|
+
|
35
|
+
// Colors
|
36
|
+
$color-font-body: #222 !default;
|
37
|
+
$color-font-headings: $color-font-body !default;
|
38
|
+
$color-font-light: #888 !default;
|
39
|
+
$color-font-figcaption: $color-font-body !default;
|
40
|
+
|
41
|
+
/* Calculations
|
42
|
+
========================================================================== */
|
43
|
+
|
44
|
+
// Mobile base & leading
|
45
|
+
$base: 16 * ($base-font-size / 100);
|
46
|
+
$leading: round($base * $line-height);
|
47
|
+
$leading-rem: $leading / $base;
|
48
|
+
|
49
|
+
// Desktop base & leading
|
50
|
+
$base-desktop: 16 * ($base-font-size-desktop / 100);
|
51
|
+
$leading-desktop: round($base-desktop * $line-height-desktop);
|
52
|
+
$leading-rem-desktop: $leading-desktop / $base-desktop;
|
53
|
+
|
54
|
+
/* Font themes
|
55
|
+
========================================================================== */
|
56
|
+
|
57
|
+
$font-body: null;
|
58
|
+
$font-headings: null;
|
59
|
+
|
60
|
+
@if $theme == Merriweather {
|
61
|
+
|
62
|
+
// Import Merriweather
|
63
|
+
@import url("https://fonts.googleapis.com/css?family=Merriweather:400,700,400italic");
|
64
|
+
|
65
|
+
// Set body font
|
66
|
+
$font-body: Merriweather, Georgia, serif;
|
67
|
+
|
68
|
+
}
|
69
|
+
@else if $theme == OpenSans {
|
70
|
+
|
71
|
+
// Import Open Sans
|
72
|
+
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic");
|
73
|
+
|
74
|
+
// Set body font
|
75
|
+
$font-body: Open Sans, Arial, Helvetica, Sans-serif;
|
76
|
+
|
77
|
+
}
|
78
|
+
@else if $theme == custom {
|
79
|
+
|
80
|
+
// Set custom body font
|
81
|
+
$font-body: $custom-font-body;
|
82
|
+
|
83
|
+
// Set custom headings font
|
84
|
+
@if $custom-font-headings != $custom-font-body {
|
85
|
+
$font-headings: $custom-font-headings;
|
86
|
+
}
|
87
|
+
}
|
88
|
+
|
89
|
+
// Import partials.
|
90
|
+
@import
|
91
|
+
"gutenberg/mixins/font-size",
|
92
|
+
"gutenberg/mixins/line-height",
|
93
|
+
"gutenberg/mixins/margin",
|
94
|
+
"gutenberg/mixins/padding",
|
95
|
+
|
96
|
+
"gutenberg/helpers/alignment",
|
97
|
+
"gutenberg/helpers/grid",
|
98
|
+
|
99
|
+
"gutenberg/layout/aside",
|
100
|
+
"gutenberg/layout/base",
|
101
|
+
"gutenberg/layout/footer",
|
102
|
+
"gutenberg/layout/header",
|
103
|
+
"gutenberg/layout/main",
|
104
|
+
"gutenberg/layout/section",
|
105
|
+
|
106
|
+
"gutenberg/modules/anchor",
|
107
|
+
"gutenberg/modules/article",
|
108
|
+
"gutenberg/modules/audio",
|
109
|
+
"gutenberg/modules/canvas",
|
110
|
+
"gutenberg/modules/code",
|
111
|
+
"gutenberg/modules/details",
|
112
|
+
"gutenberg/modules/figure",
|
113
|
+
"gutenberg/modules/form",
|
114
|
+
"gutenberg/modules/heading",
|
115
|
+
"gutenberg/modules/horizontal-rule",
|
116
|
+
"gutenberg/modules/image",
|
117
|
+
"gutenberg/modules/list",
|
118
|
+
"gutenberg/modules/navigation",
|
119
|
+
"gutenberg/modules/progress",
|
120
|
+
"gutenberg/modules/quote",
|
121
|
+
"gutenberg/modules/table",
|
122
|
+
"gutenberg/modules/template",
|
123
|
+
"gutenberg/modules/text",
|
124
|
+
"gutenberg/modules/video"
|
125
|
+
;
|
@@ -0,0 +1,25 @@
|
|
1
|
+
// Float defaults
|
2
|
+
.floatLeft {
|
3
|
+
|
4
|
+
@media screen and (min-width: #{ $max-width + 5 + 'em'}) {
|
5
|
+
float: left;
|
6
|
+
}
|
7
|
+
|
8
|
+
}
|
9
|
+
|
10
|
+
.floatCenter {
|
11
|
+
|
12
|
+
@media screen and (min-width: #{ $max-width + 5 + 'em'}) {
|
13
|
+
margin-left: auto;
|
14
|
+
margin-right: auto;
|
15
|
+
}
|
16
|
+
|
17
|
+
}
|
18
|
+
|
19
|
+
.floatRight {
|
20
|
+
|
21
|
+
@media screen and (min-width: #{ $max-width + 5 + 'em'}) {
|
22
|
+
float: right;
|
23
|
+
}
|
24
|
+
|
25
|
+
}
|
@@ -0,0 +1,95 @@
|
|
1
|
+
/* Grid
|
2
|
+
========================================================================== */
|
3
|
+
|
4
|
+
// Grid background
|
5
|
+
.grid {
|
6
|
+
background-image: linear-gradient(to bottom, hsla(200, 100%, 50%, .3) 1px, transparent 1px);
|
7
|
+
background-position: left top;
|
8
|
+
background-repeat: repeat;
|
9
|
+
background-size: 100% #{$leading + 'px'};
|
10
|
+
background-size: 100% #{$leading-rem + 'rem'};
|
11
|
+
|
12
|
+
@media screen and (min-width: #{ $max-width + 5 + 'em'}) {
|
13
|
+
$leading: $leading-desktop;
|
14
|
+
$leading-rem: $leading-rem-desktop;
|
15
|
+
|
16
|
+
background-size: 100% #{$leading + 'px'};
|
17
|
+
background-size: 100% #{$leading-rem + 'rem'};
|
18
|
+
}
|
19
|
+
|
20
|
+
}
|
21
|
+
|
22
|
+
// Double grid background
|
23
|
+
.grid-double {
|
24
|
+
@extend .grid;
|
25
|
+
background-image: linear-gradient(to bottom, hsla(200, 100%, 50%, .3) 1px, transparent 1px, transparent #{ .5 * $leading + 'px'}, hsla(200, 100%, 50%, .2) #{ .5 * $leading + 'px'}, transparent #{ .5 * $leading + 1 + 'px'}, transparent #{$leading + 'px'});
|
26
|
+
|
27
|
+
@media screen and (min-width: #{ $max-width + 5 + 'em'}) {
|
28
|
+
$leading: $leading-desktop;
|
29
|
+
$leading-rem: $leading-rem-desktop;
|
30
|
+
|
31
|
+
background-image: linear-gradient(to bottom, hsla(200, 100%, 50%, .3) 1px, transparent 1px, transparent #{ .5 * $leading + 'px'}, hsla(200, 100%, 50%, .2) #{ .5 * $leading + 'px'}, transparent #{ 0.5 * $leading + 1 + 'px'}, transparent #{$leading + 'px'});
|
32
|
+
}
|
33
|
+
|
34
|
+
}
|
35
|
+
|
36
|
+
// Grid button
|
37
|
+
.toggleWrapper {
|
38
|
+
@if $edit-mode == true {
|
39
|
+
display: block;
|
40
|
+
} @else if $edit-mode == false {
|
41
|
+
display: none;
|
42
|
+
}
|
43
|
+
position: fixed;
|
44
|
+
top: #{$leading + 'px'};
|
45
|
+
right: #{$leading + 'px'};
|
46
|
+
background-color: #231F20;
|
47
|
+
border-radius: 25px;
|
48
|
+
padding: 0 10px 0 20px;
|
49
|
+
height: 32px;
|
50
|
+
|
51
|
+
@media screen and (min-width: #{ $max-width + 5 + 'em'}) {
|
52
|
+
right: #{$leading-desktop + 'px'};
|
53
|
+
top: #{$leading-desktop + 'px'};
|
54
|
+
}
|
55
|
+
|
56
|
+
}
|
57
|
+
|
58
|
+
.btnToggleGrid {
|
59
|
+
background: url("../../assets/images/grid-icons.png") top right no-repeat;
|
60
|
+
background-size: 32px;
|
61
|
+
display: block;
|
62
|
+
font-size: 14px;
|
63
|
+
text-decoration: none;
|
64
|
+
padding-right: 35px;
|
65
|
+
height: 32px;
|
66
|
+
line-height: 34px;
|
67
|
+
font-family: Helvetica, Arial, sans-serif;
|
68
|
+
text-transform: uppercase;
|
69
|
+
font-weight: 700;
|
70
|
+
color: #fff;
|
71
|
+
|
72
|
+
@media screen and (min-width: #{ $max-width + 5 + 'em'}) {
|
73
|
+
$leading: $leading-desktop;
|
74
|
+
$leading-rem: $leading-rem-desktop;
|
75
|
+
|
76
|
+
top: #{$leading + 'px'};
|
77
|
+
right: #{$leading + 'px'};
|
78
|
+
}
|
79
|
+
|
80
|
+
&:hover {
|
81
|
+
color: #fff;
|
82
|
+
}
|
83
|
+
|
84
|
+
&:active {
|
85
|
+
color: #f00;
|
86
|
+
}
|
87
|
+
}
|
88
|
+
|
89
|
+
.double-grid {
|
90
|
+
background-position-y: -32px;
|
91
|
+
}
|
92
|
+
|
93
|
+
.grid-off {
|
94
|
+
background-position-y: -64px;
|
95
|
+
}
|
@@ -0,0 +1,62 @@
|
|
1
|
+
/* Defaults
|
2
|
+
========================================================================== */
|
3
|
+
|
4
|
+
body,
|
5
|
+
html {
|
6
|
+
|
7
|
+
@media screen and (min-width: #{ $max-width + 5 + 'em'}) {
|
8
|
+
margin: 0;
|
9
|
+
width: 100%;
|
10
|
+
max-width: none;
|
11
|
+
}
|
12
|
+
|
13
|
+
}
|
14
|
+
|
15
|
+
// Font defaults
|
16
|
+
html {
|
17
|
+
box-sizing: border-box;
|
18
|
+
font-size: #{$base + 'px'};
|
19
|
+
font-size: #{$base-font-size + '%'};
|
20
|
+
font-family: $font-body;
|
21
|
+
color: $color-font-body;
|
22
|
+
-ms-text-size-adjust: 100%;
|
23
|
+
-webkit-text-size-adjust: 100%;
|
24
|
+
|
25
|
+
@media screen and (min-width: #{ $max-width + 5 + 'em'}) {
|
26
|
+
font-size: #{$base-desktop + 'px'};
|
27
|
+
font-size: #{$base-font-size-desktop / 100 + 'rem'};
|
28
|
+
}
|
29
|
+
|
30
|
+
}
|
31
|
+
|
32
|
+
// Line-height & margin reset
|
33
|
+
* {
|
34
|
+
@include line-height(1);
|
35
|
+
@include margin(0, 0, 1);
|
36
|
+
|
37
|
+
@media screen and (min-width: #{ $max-width + 5 + 'em'}) {
|
38
|
+
$leading: $leading-desktop;
|
39
|
+
$leading-rem: $leading-rem-desktop;
|
40
|
+
|
41
|
+
@import '../mixins/line-height';
|
42
|
+
@import '../mixins/margin';
|
43
|
+
|
44
|
+
@include line-height(1);
|
45
|
+
@include margin-bottom(1);
|
46
|
+
max-width: #{$max-width * $base-desktop + 'px'};
|
47
|
+
max-width: #{$max-width + 'rem'};
|
48
|
+
margin-left: auto;
|
49
|
+
margin-right: auto;
|
50
|
+
}
|
51
|
+
|
52
|
+
}
|
53
|
+
|
54
|
+
*,
|
55
|
+
*::before,
|
56
|
+
*::after {
|
57
|
+
box-sizing: inherit;
|
58
|
+
}
|
59
|
+
|
60
|
+
body {
|
61
|
+
margin: 0;
|
62
|
+
}
|
@@ -0,0 +1,25 @@
|
|
1
|
+
// Margin-top
|
2
|
+
@mixin margin-top($number) {
|
3
|
+
margin-top: #{ $number * $leading + 'px'};
|
4
|
+
margin-top: #{ $number * $leading-rem + 'rem'};
|
5
|
+
}
|
6
|
+
|
7
|
+
// Margin-bottom
|
8
|
+
@mixin margin-bottom($number) {
|
9
|
+
margin-bottom: #{ $number * $leading + 'px'};
|
10
|
+
margin-bottom: #{ $number * $leading-rem + 'rem'};
|
11
|
+
}
|
12
|
+
|
13
|
+
// Margin
|
14
|
+
@mixin margin($top, $right, $bottom:null, $left:null) {
|
15
|
+
@if $left == null and $bottom == null {
|
16
|
+
margin: #{ $top * $leading + 'px'} #{ $right * $leading + 'px'};
|
17
|
+
margin: #{ $top * $leading-rem + 'rem'} #{ $right * $leading-rem + 'rem'};
|
18
|
+
} @else if $left == null or $left == $right {
|
19
|
+
margin: #{ $top * $leading + 'px'} #{ $right * $leading + 'px'} #{ $bottom * $leading + 'px'};
|
20
|
+
margin: #{ $top * $leading-rem + 'rem'} #{ $right * $leading-rem + 'rem'} #{ $bottom * $leading-rem + 'rem'};
|
21
|
+
} @else {
|
22
|
+
margin: #{ $top * $leading + 'px'} #{ $right * $leading + 'px'} #{ $bottom * $leading + 'px'} #{ $left * $leading + 'px'};
|
23
|
+
margin: #{ $top * $leading-rem + 'rem'} #{ $right * $leading-rem + 'rem'} #{ $bottom * $leading-rem + 'rem'} #{ $left * $leading-rem + 'rem'};
|
24
|
+
}
|
25
|
+
}
|
@@ -0,0 +1,27 @@
|
|
1
|
+
// padding
|
2
|
+
@mixin padding($top, $right, $bottom:null, $left:null) {
|
3
|
+
@if $left == null and $bottom == null {
|
4
|
+
padding: #{ $top * $leading + 'px'} #{ $right * $leading + 'px'};
|
5
|
+
padding: #{ $top * $leading-rem + 'rem'} #{ $right * $leading-rem + 'rem'};
|
6
|
+
} @else if $left == null or $left == $right {
|
7
|
+
padding: #{ $top * $leading + 'px'} #{ $right * $leading + 'px'} #{ $bottom * $leading + 'px'};
|
8
|
+
padding: #{ $top * $leading-rem + 'rem'} #{ $right * $leading-rem + 'rem'} #{ $bottom * $leading-rem + 'rem'};
|
9
|
+
} @else {
|
10
|
+
padding: #{ $top * $leading + 'px'} #{ $right * $leading + 'px'} #{ $bottom * $leading + 'px'} #{ $left * $leading + 'px'};
|
11
|
+
padding: #{ $top * $leading-rem + 'rem'} #{ $right * $leading-rem + 'rem'} #{ $bottom * $leading-rem + 'rem'} #{ $left * $leading-rem + 'rem'};
|
12
|
+
}
|
13
|
+
|
14
|
+
// padding-top: #{ $top * $leading + 'px'};
|
15
|
+
// padding-top: #{ $top * $leading-rem + 'rem'};
|
16
|
+
// padding-right: #{ $right * $leading + 'px'};
|
17
|
+
// padding-right: #{ $right * $leading-rem + 'rem'};
|
18
|
+
// padding-bottom: #{ $bottom * $leading + 'px'};
|
19
|
+
// padding-bottom: #{ $bottom * $leading-rem + 'rem'};
|
20
|
+
// padding-left: #{ $left * $leading + 'px'};
|
21
|
+
// padding-left: #{ $left * $leading-rem + 'rem'};
|
22
|
+
}
|
23
|
+
|
24
|
+
@mixin padding-equal($number) {
|
25
|
+
padding: #{ $number * $leading + 'px'};
|
26
|
+
padding: #{ $number * $leading-rem + 'rem'};
|
27
|
+
}
|