geomerative 0.4.0-java → 0.4.2-java
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 +4 -4
- data/.travis.yml +1 -5
- data/CHANGELOG.md +7 -0
- data/README.md +3 -1
- data/calculate_torsional_angle.rb +17 -0
- data/docs/.gitignore +6 -0
- data/docs/_config.yml +22 -0
- data/docs/_includes/footer.html +38 -0
- data/docs/_includes/head.html +15 -0
- data/docs/_includes/header.html +27 -0
- data/docs/_includes/icon-github.html +1 -0
- data/docs/_includes/icon-github.svg +1 -0
- data/docs/_includes/icon-twitter.html +1 -0
- data/docs/_includes/icon-twitter.svg +1 -0
- data/docs/_layouts/default.html +20 -0
- data/docs/_layouts/page.html +14 -0
- data/docs/_layouts/post.html +15 -0
- data/docs/_posts/2015-11-21-getting_started.md +66 -0
- data/docs/_posts/2015-11-25-bubbles.md +111 -0
- data/docs/_posts/2015-11-26-extra_bright.md +103 -0
- data/docs/_posts/2015-11-26-text_merge.md +114 -0
- data/docs/_posts/2016-07-06-dymo.md +99 -0
- data/docs/_sass/_base.scss +206 -0
- data/docs/_sass/_layout.scss +242 -0
- data/docs/_sass/_syntax-highlighting.scss +71 -0
- data/docs/about.md +12 -0
- data/docs/assets/bright.png +0 -0
- data/docs/assets/bubbles.png +0 -0
- data/docs/assets/design.png +0 -0
- data/docs/assets/dymo.png +0 -0
- data/docs/assets/favicon.ico +0 -0
- data/docs/assets/fred.png +0 -0
- data/docs/assets/merge.png +0 -0
- data/docs/css/main.scss +38 -0
- data/docs/favicon.ico +0 -0
- data/docs/feed.xml +30 -0
- data/docs/index.html +38 -0
- data/examples/hello_svg_to_pdf.rb +1 -1
- data/geomerative.gemspec +2 -2
- data/lib/geomerative/version.rb +1 -1
- data/pom.rb +2 -2
- data/pom.xml +2 -2
- data/src/geomerative/RCommand.java +13 -13
- metadata +39 -6
@@ -0,0 +1,114 @@
|
|
1
|
+
---
|
2
|
+
layout: post
|
3
|
+
title: "Text Merge tutorial example"
|
4
|
+
date: 2015-11-26 20:51:13
|
5
|
+
keywords: tutorial, design, merge
|
6
|
+
---
|
7
|
+
|
8
|
+
### Merge Design
|
9
|
+
|
10
|
+
Bertrand Fevre should be particulary proud of this little gem, it is not immediately obvious why it should work.
|
11
|
+
|
12
|
+
```ruby
|
13
|
+
#######################/
|
14
|
+
# --------- GEOMERATIVE EXAMPLES ---------------
|
15
|
+
#######################
|
16
|
+
# Title : TypoGeo_Merge
|
17
|
+
# Date : 31/08/2011
|
18
|
+
# Version : v0.5
|
19
|
+
#
|
20
|
+
# Merges two words in an random fashion.
|
21
|
+
# Key 'f' = freezes motion
|
22
|
+
# key 's' saves the frame in png format
|
23
|
+
#
|
24
|
+
# Code adapted from an original idea by Bertrand Fevre
|
25
|
+
# during the Générative Typos workshop in Lure 2011.
|
26
|
+
#
|
27
|
+
# Licensed under GNU General Public License (GPL) version 3.
|
28
|
+
# http://www.gnu.org/licenses/gpl.html
|
29
|
+
#
|
30
|
+
# A series of tutorials for using the Geomerative Library
|
31
|
+
# developed by Ricard Marxer.
|
32
|
+
# http://www.ricardmarxer.com/geomerative/
|
33
|
+
#
|
34
|
+
# More info on these tutorials and workshops at :
|
35
|
+
# www.freeartbureau.org/blog
|
36
|
+
#
|
37
|
+
# Adapted for JRubyArt by Martin Prout
|
38
|
+
#######################
|
39
|
+
require 'geomerative'
|
40
|
+
|
41
|
+
attr_reader :my_font, :stop, :xoff, :yoff, :x_inc, :y_inc
|
42
|
+
|
43
|
+
TEXT = %w(Merge Design).freeze
|
44
|
+
|
45
|
+
def settings
|
46
|
+
size(900, 500)
|
47
|
+
end
|
48
|
+
|
49
|
+
def setup
|
50
|
+
sketch_title TEXT.join ' '
|
51
|
+
RG.init(self)
|
52
|
+
@my_font = RFont.new(data_path('FreeSans.ttf'), 230, CENTER)
|
53
|
+
@stop = false
|
54
|
+
no_fill
|
55
|
+
stroke(255)
|
56
|
+
stroke_weight(0.5)
|
57
|
+
rect_mode(CENTER)
|
58
|
+
@xoff = 0.0
|
59
|
+
@yoff = 0.0
|
60
|
+
@x_inc= 0.01
|
61
|
+
@y_inc = 0.015
|
62
|
+
end
|
63
|
+
|
64
|
+
def draw
|
65
|
+
background(0, 50)
|
66
|
+
displace_x = noise(xoff) * width
|
67
|
+
displace_y = noise(yoff) * height
|
68
|
+
@xoff += x_inc
|
69
|
+
@yoff += y_inc
|
70
|
+
translate(width / 2, height / 1.7)
|
71
|
+
frequency = map1d(displace_x, (300..500), (3..200))
|
72
|
+
RCommand.set_segment_length(frequency)
|
73
|
+
my_points = my_font.to_group(TEXT[0]).get_points
|
74
|
+
begin_shape
|
75
|
+
my_points.each do |point|
|
76
|
+
vertex(point.x, point.y)
|
77
|
+
rotation = map1d(displace_y, (0..height), (0..TWO_PI))
|
78
|
+
push_matrix
|
79
|
+
translate(point.x, point.y)
|
80
|
+
rotate(rotation)
|
81
|
+
size = frequency / 6
|
82
|
+
rect(0, 0, size, size)
|
83
|
+
pop_matrix
|
84
|
+
end
|
85
|
+
end_shape
|
86
|
+
frequency2 = map1d(displace_x, (300..500), (200..3))
|
87
|
+
RCommand.set_segment_length(frequency2)
|
88
|
+
my_points = my_font.to_group(TEXT[1]).get_points
|
89
|
+
begin_shape
|
90
|
+
my_points.each do |point|
|
91
|
+
vertex(point.x, point.y)
|
92
|
+
size = frequency2 / 7
|
93
|
+
ellipse(point.x, point.y, size, size)
|
94
|
+
end
|
95
|
+
end_shape
|
96
|
+
end
|
97
|
+
|
98
|
+
def key_pressed
|
99
|
+
case key
|
100
|
+
when 'f', 'F'
|
101
|
+
@stop = !stop
|
102
|
+
stop ? no_loop : loop
|
103
|
+
when 's', 'S'
|
104
|
+
save_frame(data_path('000_###.png'))
|
105
|
+
end
|
106
|
+
end
|
107
|
+
```
|
108
|
+
|
109
|
+
<iframe src="https://player.vimeo.com/video/56827310" width="500" height="276" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
|
110
|
+
<!-- In case video goes missing
|
111
|
+

|
112
|
+
|
113
|
+

|
114
|
+
-->
|
@@ -0,0 +1,99 @@
|
|
1
|
+
---
|
2
|
+
layout: post
|
3
|
+
title: "Impossible Dymo Tape"
|
4
|
+
date: 2016-07-06 05:40:13
|
5
|
+
categories: geomerativegem update
|
6
|
+
---
|
7
|
+
|
8
|
+
### Text Along a Geomerative Path
|
9
|
+
|
10
|
+
To use the `RCommand` constant `UNIFORMLENGTH` in JRubyArt (and java constants in general with jruby) you would normally need to address it in the following way:- `Java::Generative::RCommand::UNIFORMLENGTH`. However in the geomerative gem we have done `package_include 'geomerative'` for you so you can get away with the short form `RCommand::UNIFORMLENGTH`, but you do need the `RCommand::` prefix. For processing constants the full form for the `RIGHT` constant would be `Java::ProcessingCore::PConstants::RIGHT` but because we hate typing we have made the processing constant `RIGHT` available without the `PConstants::` prefix. If you have namespace difficulties you can always fall back on the full forms.
|
11
|
+
|
12
|
+
```ruby
|
13
|
+
# Louis Christodoulou (louis -at- louisc.co.uk)
|
14
|
+
#
|
15
|
+
# Very quickly thrown together code whilst learning how the
|
16
|
+
# geomerative library ticks.
|
17
|
+
#
|
18
|
+
# Here we take out previous scripts drawing and placing points along an arc and
|
19
|
+
# complete our initial idea of placing text along the arc.
|
20
|
+
#
|
21
|
+
# Full Writeup on the Blog here: http://louisc.co.uk/?p=2686
|
22
|
+
require 'geomerative'
|
23
|
+
|
24
|
+
MESSAGE = 'hello bendy world >>>'.freeze
|
25
|
+
SCALE = 3
|
26
|
+
attr_reader :font
|
27
|
+
|
28
|
+
def settings
|
29
|
+
size(800, 450)
|
30
|
+
end
|
31
|
+
|
32
|
+
def setup
|
33
|
+
# Geomerative
|
34
|
+
sketch_title 'Geomerative Text On A Path'
|
35
|
+
RG.init(self)
|
36
|
+
background(255)
|
37
|
+
# We want a dymo labeller style look, replace this font with your choice
|
38
|
+
# see data folder for licence
|
39
|
+
@font = RFont.new(data_path('Impact Label Reversed.ttf'), 72, RIGHT)
|
40
|
+
end
|
41
|
+
|
42
|
+
def draw
|
43
|
+
background(0)
|
44
|
+
wave = RShape.new
|
45
|
+
wave.add_move_to(0 * SCALE, 100 * SCALE)
|
46
|
+
wave.add_bezier_to(
|
47
|
+
0 * SCALE,
|
48
|
+
100 * SCALE,
|
49
|
+
50 * SCALE,
|
50
|
+
25 * SCALE,
|
51
|
+
100 * SCALE,
|
52
|
+
100 * SCALE
|
53
|
+
)
|
54
|
+
wave.add_bezier_to(
|
55
|
+
100 * SCALE,
|
56
|
+
100 * SCALE,
|
57
|
+
150 * SCALE,
|
58
|
+
175 * SCALE,
|
59
|
+
200 * SCALE,
|
60
|
+
100 * SCALE
|
61
|
+
)
|
62
|
+
translate(100, -80)
|
63
|
+
# draw our wave
|
64
|
+
no_fill
|
65
|
+
stroke(255, 0, 0)
|
66
|
+
stroke_weight(60)
|
67
|
+
stroke_cap(PROJECT)
|
68
|
+
wave.draw
|
69
|
+
stroke_cap(ROUND)
|
70
|
+
# Collect some points along the curve
|
71
|
+
RG.set_polygonizer(RCommand::UNIFORMLENGTH)
|
72
|
+
RG.set_polygonizer_length(35)
|
73
|
+
points = wave.get_points
|
74
|
+
index = 0 # Letter index within the string message
|
75
|
+
# loop through and place a letter at each point
|
76
|
+
MESSAGE.each_char do |letter|
|
77
|
+
stroke_weight(5)
|
78
|
+
stroke_weight(10)
|
79
|
+
center = RCommand.new(points[index], points[index + 1]).get_center
|
80
|
+
fill(255)
|
81
|
+
no_stroke
|
82
|
+
push_matrix
|
83
|
+
translate(center.x, center.y)
|
84
|
+
rotate(get_angle(points[index], points[index + 1]))
|
85
|
+
translate(5, 20)
|
86
|
+
font.draw(letter)
|
87
|
+
pop_matrix
|
88
|
+
index += 1
|
89
|
+
end
|
90
|
+
end
|
91
|
+
|
92
|
+
# Simple function to calculate the angle between two points
|
93
|
+
def get_angle(p1, p2)
|
94
|
+
atan2(p2.y - p1.y, p2.x - p1.x)
|
95
|
+
end
|
96
|
+
```
|
97
|
+
|
98
|
+
|
99
|
+

|
@@ -0,0 +1,206 @@
|
|
1
|
+
/**
|
2
|
+
* Reset some basic elements
|
3
|
+
*/
|
4
|
+
body, h1, h2, h3, h4, h5, h6,
|
5
|
+
p, blockquote, pre, hr,
|
6
|
+
dl, dd, ol, ul, figure {
|
7
|
+
margin: 0;
|
8
|
+
padding: 0;
|
9
|
+
}
|
10
|
+
|
11
|
+
|
12
|
+
|
13
|
+
/**
|
14
|
+
* Basic styling
|
15
|
+
*/
|
16
|
+
body {
|
17
|
+
font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
|
18
|
+
color: $text-color;
|
19
|
+
background-color: $background-color;
|
20
|
+
-webkit-text-size-adjust: 100%;
|
21
|
+
-webkit-font-feature-settings: "kern" 1;
|
22
|
+
-moz-font-feature-settings: "kern" 1;
|
23
|
+
-o-font-feature-settings: "kern" 1;
|
24
|
+
font-feature-settings: "kern" 1;
|
25
|
+
font-kerning: normal;
|
26
|
+
}
|
27
|
+
|
28
|
+
|
29
|
+
|
30
|
+
/**
|
31
|
+
* Set `margin-bottom` to maintain vertical rhythm
|
32
|
+
*/
|
33
|
+
h1, h2, h3, h4, h5, h6,
|
34
|
+
p, blockquote, pre,
|
35
|
+
ul, ol, dl, figure,
|
36
|
+
%vertical-rhythm {
|
37
|
+
margin-bottom: $spacing-unit / 2;
|
38
|
+
}
|
39
|
+
|
40
|
+
|
41
|
+
|
42
|
+
/**
|
43
|
+
* Images
|
44
|
+
*/
|
45
|
+
img {
|
46
|
+
max-width: 100%;
|
47
|
+
vertical-align: middle;
|
48
|
+
}
|
49
|
+
|
50
|
+
|
51
|
+
|
52
|
+
/**
|
53
|
+
* Figures
|
54
|
+
*/
|
55
|
+
figure > img {
|
56
|
+
display: block;
|
57
|
+
}
|
58
|
+
|
59
|
+
figcaption {
|
60
|
+
font-size: $small-font-size;
|
61
|
+
}
|
62
|
+
|
63
|
+
|
64
|
+
|
65
|
+
/**
|
66
|
+
* Lists
|
67
|
+
*/
|
68
|
+
ul, ol {
|
69
|
+
margin-left: $spacing-unit;
|
70
|
+
}
|
71
|
+
|
72
|
+
li {
|
73
|
+
> ul,
|
74
|
+
> ol {
|
75
|
+
margin-bottom: 0;
|
76
|
+
}
|
77
|
+
}
|
78
|
+
|
79
|
+
|
80
|
+
|
81
|
+
/**
|
82
|
+
* Headings
|
83
|
+
*/
|
84
|
+
h1, h2, h3, h4, h5, h6 {
|
85
|
+
font-weight: $base-font-weight;
|
86
|
+
}
|
87
|
+
|
88
|
+
|
89
|
+
|
90
|
+
/**
|
91
|
+
* Links
|
92
|
+
*/
|
93
|
+
a {
|
94
|
+
color: $brand-color;
|
95
|
+
text-decoration: none;
|
96
|
+
|
97
|
+
&:visited {
|
98
|
+
color: darken($brand-color, 15%);
|
99
|
+
}
|
100
|
+
|
101
|
+
&:hover {
|
102
|
+
color: $text-color;
|
103
|
+
text-decoration: underline;
|
104
|
+
}
|
105
|
+
}
|
106
|
+
|
107
|
+
|
108
|
+
|
109
|
+
/**
|
110
|
+
* Blockquotes
|
111
|
+
*/
|
112
|
+
blockquote {
|
113
|
+
color: $grey-color;
|
114
|
+
border-left: 4px solid $grey-color-light;
|
115
|
+
padding-left: $spacing-unit / 2;
|
116
|
+
font-size: 18px;
|
117
|
+
letter-spacing: -1px;
|
118
|
+
font-style: italic;
|
119
|
+
|
120
|
+
> :last-child {
|
121
|
+
margin-bottom: 0;
|
122
|
+
}
|
123
|
+
}
|
124
|
+
|
125
|
+
|
126
|
+
|
127
|
+
/**
|
128
|
+
* Code formatting
|
129
|
+
*/
|
130
|
+
pre,
|
131
|
+
code {
|
132
|
+
font-size: 15px;
|
133
|
+
border: 1px solid $grey-color-light;
|
134
|
+
border-radius: 3px;
|
135
|
+
background-color: #eef;
|
136
|
+
}
|
137
|
+
|
138
|
+
code {
|
139
|
+
padding: 1px 5px;
|
140
|
+
}
|
141
|
+
|
142
|
+
pre {
|
143
|
+
padding: 8px 12px;
|
144
|
+
overflow-x: auto;
|
145
|
+
|
146
|
+
> code {
|
147
|
+
border: 0;
|
148
|
+
padding-right: 0;
|
149
|
+
padding-left: 0;
|
150
|
+
}
|
151
|
+
}
|
152
|
+
|
153
|
+
|
154
|
+
|
155
|
+
/**
|
156
|
+
* Wrapper
|
157
|
+
*/
|
158
|
+
.wrapper {
|
159
|
+
max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
|
160
|
+
max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
|
161
|
+
margin-right: auto;
|
162
|
+
margin-left: auto;
|
163
|
+
padding-right: $spacing-unit;
|
164
|
+
padding-left: $spacing-unit;
|
165
|
+
@extend %clearfix;
|
166
|
+
|
167
|
+
@include media-query($on-laptop) {
|
168
|
+
max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
|
169
|
+
max-width: calc(#{$content-width} - (#{$spacing-unit}));
|
170
|
+
padding-right: $spacing-unit / 2;
|
171
|
+
padding-left: $spacing-unit / 2;
|
172
|
+
}
|
173
|
+
}
|
174
|
+
|
175
|
+
|
176
|
+
|
177
|
+
/**
|
178
|
+
* Clearfix
|
179
|
+
*/
|
180
|
+
%clearfix {
|
181
|
+
|
182
|
+
&:after {
|
183
|
+
content: "";
|
184
|
+
display: table;
|
185
|
+
clear: both;
|
186
|
+
}
|
187
|
+
}
|
188
|
+
|
189
|
+
|
190
|
+
|
191
|
+
/**
|
192
|
+
* Icons
|
193
|
+
*/
|
194
|
+
.icon {
|
195
|
+
|
196
|
+
> svg {
|
197
|
+
display: inline-block;
|
198
|
+
width: 16px;
|
199
|
+
height: 16px;
|
200
|
+
vertical-align: middle;
|
201
|
+
|
202
|
+
path {
|
203
|
+
fill: $grey-color;
|
204
|
+
}
|
205
|
+
}
|
206
|
+
}
|
@@ -0,0 +1,242 @@
|
|
1
|
+
/**
|
2
|
+
* Site header
|
3
|
+
*/
|
4
|
+
.site-header {
|
5
|
+
border-top: 5px solid $grey-color-dark;
|
6
|
+
border-bottom: 1px solid $grey-color-light;
|
7
|
+
min-height: 56px;
|
8
|
+
|
9
|
+
// Positioning context for the mobile navigation icon
|
10
|
+
position: relative;
|
11
|
+
}
|
12
|
+
|
13
|
+
.site-title {
|
14
|
+
font-size: 26px;
|
15
|
+
font-weight: 300;
|
16
|
+
line-height: 56px;
|
17
|
+
letter-spacing: -1px;
|
18
|
+
margin-bottom: 0;
|
19
|
+
float: left;
|
20
|
+
|
21
|
+
&,
|
22
|
+
&:visited {
|
23
|
+
color: $grey-color-dark;
|
24
|
+
}
|
25
|
+
}
|
26
|
+
|
27
|
+
.site-nav {
|
28
|
+
float: right;
|
29
|
+
line-height: 56px;
|
30
|
+
|
31
|
+
.menu-icon {
|
32
|
+
display: none;
|
33
|
+
}
|
34
|
+
|
35
|
+
.page-link {
|
36
|
+
color: $text-color;
|
37
|
+
line-height: $base-line-height;
|
38
|
+
|
39
|
+
// Gaps between nav items, but not on the last one
|
40
|
+
&:not(:last-child) {
|
41
|
+
margin-right: 20px;
|
42
|
+
}
|
43
|
+
}
|
44
|
+
|
45
|
+
@include media-query($on-palm) {
|
46
|
+
position: absolute;
|
47
|
+
top: 9px;
|
48
|
+
right: $spacing-unit / 2;
|
49
|
+
background-color: $background-color;
|
50
|
+
border: 1px solid $grey-color-light;
|
51
|
+
border-radius: 5px;
|
52
|
+
text-align: right;
|
53
|
+
|
54
|
+
.menu-icon {
|
55
|
+
display: block;
|
56
|
+
float: right;
|
57
|
+
width: 36px;
|
58
|
+
height: 26px;
|
59
|
+
line-height: 0;
|
60
|
+
padding-top: 10px;
|
61
|
+
text-align: center;
|
62
|
+
|
63
|
+
> svg {
|
64
|
+
width: 18px;
|
65
|
+
height: 15px;
|
66
|
+
|
67
|
+
path {
|
68
|
+
fill: $grey-color-dark;
|
69
|
+
}
|
70
|
+
}
|
71
|
+
}
|
72
|
+
|
73
|
+
.trigger {
|
74
|
+
clear: both;
|
75
|
+
display: none;
|
76
|
+
}
|
77
|
+
|
78
|
+
&:hover .trigger {
|
79
|
+
display: block;
|
80
|
+
padding-bottom: 5px;
|
81
|
+
}
|
82
|
+
|
83
|
+
.page-link {
|
84
|
+
display: block;
|
85
|
+
padding: 5px 10px;
|
86
|
+
|
87
|
+
&:not(:last-child) {
|
88
|
+
margin-right: 0;
|
89
|
+
}
|
90
|
+
margin-left: 20px;
|
91
|
+
}
|
92
|
+
}
|
93
|
+
}
|
94
|
+
|
95
|
+
|
96
|
+
|
97
|
+
/**
|
98
|
+
* Site footer
|
99
|
+
*/
|
100
|
+
.site-footer {
|
101
|
+
border-top: 1px solid $grey-color-light;
|
102
|
+
padding: $spacing-unit 0;
|
103
|
+
}
|
104
|
+
|
105
|
+
.footer-heading {
|
106
|
+
font-size: 18px;
|
107
|
+
margin-bottom: $spacing-unit / 2;
|
108
|
+
}
|
109
|
+
|
110
|
+
.contact-list,
|
111
|
+
.social-media-list {
|
112
|
+
list-style: none;
|
113
|
+
margin-left: 0;
|
114
|
+
}
|
115
|
+
|
116
|
+
.footer-col-wrapper {
|
117
|
+
font-size: 15px;
|
118
|
+
color: $grey-color;
|
119
|
+
margin-left: -$spacing-unit / 2;
|
120
|
+
@extend %clearfix;
|
121
|
+
}
|
122
|
+
|
123
|
+
.footer-col {
|
124
|
+
float: left;
|
125
|
+
margin-bottom: $spacing-unit / 2;
|
126
|
+
padding-left: $spacing-unit / 2;
|
127
|
+
}
|
128
|
+
|
129
|
+
.footer-col-1 {
|
130
|
+
width: -webkit-calc(35% - (#{$spacing-unit} / 2));
|
131
|
+
width: calc(35% - (#{$spacing-unit} / 2));
|
132
|
+
}
|
133
|
+
|
134
|
+
.footer-col-2 {
|
135
|
+
width: -webkit-calc(20% - (#{$spacing-unit} / 2));
|
136
|
+
width: calc(20% - (#{$spacing-unit} / 2));
|
137
|
+
}
|
138
|
+
|
139
|
+
.footer-col-3 {
|
140
|
+
width: -webkit-calc(45% - (#{$spacing-unit} / 2));
|
141
|
+
width: calc(45% - (#{$spacing-unit} / 2));
|
142
|
+
}
|
143
|
+
|
144
|
+
@include media-query($on-laptop) {
|
145
|
+
.footer-col-1,
|
146
|
+
.footer-col-2 {
|
147
|
+
width: -webkit-calc(50% - (#{$spacing-unit} / 2));
|
148
|
+
width: calc(50% - (#{$spacing-unit} / 2));
|
149
|
+
}
|
150
|
+
|
151
|
+
.footer-col-3 {
|
152
|
+
width: -webkit-calc(100% - (#{$spacing-unit} / 2));
|
153
|
+
width: calc(100% - (#{$spacing-unit} / 2));
|
154
|
+
}
|
155
|
+
}
|
156
|
+
|
157
|
+
@include media-query($on-palm) {
|
158
|
+
.footer-col {
|
159
|
+
float: none;
|
160
|
+
width: -webkit-calc(100% - (#{$spacing-unit} / 2));
|
161
|
+
width: calc(100% - (#{$spacing-unit} / 2));
|
162
|
+
}
|
163
|
+
}
|
164
|
+
|
165
|
+
|
166
|
+
|
167
|
+
/**
|
168
|
+
* Page content
|
169
|
+
*/
|
170
|
+
.page-content {
|
171
|
+
padding: $spacing-unit 0;
|
172
|
+
}
|
173
|
+
|
174
|
+
.page-heading {
|
175
|
+
font-size: 20px;
|
176
|
+
}
|
177
|
+
|
178
|
+
.post-list {
|
179
|
+
margin-left: 0;
|
180
|
+
list-style: none;
|
181
|
+
|
182
|
+
> li {
|
183
|
+
margin-bottom: $spacing-unit;
|
184
|
+
}
|
185
|
+
}
|
186
|
+
|
187
|
+
.post-meta {
|
188
|
+
font-size: $small-font-size;
|
189
|
+
color: $grey-color;
|
190
|
+
}
|
191
|
+
|
192
|
+
.post-link {
|
193
|
+
display: block;
|
194
|
+
font-size: 24px;
|
195
|
+
}
|
196
|
+
|
197
|
+
|
198
|
+
|
199
|
+
/**
|
200
|
+
* Posts
|
201
|
+
*/
|
202
|
+
.post-header {
|
203
|
+
margin-bottom: $spacing-unit;
|
204
|
+
}
|
205
|
+
|
206
|
+
.post-title {
|
207
|
+
font-size: 42px;
|
208
|
+
letter-spacing: -1px;
|
209
|
+
line-height: 1;
|
210
|
+
|
211
|
+
@include media-query($on-laptop) {
|
212
|
+
font-size: 36px;
|
213
|
+
}
|
214
|
+
}
|
215
|
+
|
216
|
+
.post-content {
|
217
|
+
margin-bottom: $spacing-unit;
|
218
|
+
|
219
|
+
h2 {
|
220
|
+
font-size: 32px;
|
221
|
+
|
222
|
+
@include media-query($on-laptop) {
|
223
|
+
font-size: 28px;
|
224
|
+
}
|
225
|
+
}
|
226
|
+
|
227
|
+
h3 {
|
228
|
+
font-size: 26px;
|
229
|
+
|
230
|
+
@include media-query($on-laptop) {
|
231
|
+
font-size: 22px;
|
232
|
+
}
|
233
|
+
}
|
234
|
+
|
235
|
+
h4 {
|
236
|
+
font-size: 20px;
|
237
|
+
|
238
|
+
@include media-query($on-laptop) {
|
239
|
+
font-size: 18px;
|
240
|
+
}
|
241
|
+
}
|
242
|
+
}
|