Skip to content

Commit 3196fdf

Browse files
author
carl@connectedbrains.com
committed
add count-me-in section + gss for docs
1 parent 6aa72e6 commit 3196fdf

File tree

7 files changed

+144
-98
lines changed

7 files changed

+144
-98
lines changed

‎_includes/head.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,8 @@
4545
$subtitle-font-size == 18 !require;
4646
$max-p-width == 720 !require;
4747
$content-font-size == 20 !require;
48+
$large-content-font-size == 24 !require;
49+
$large-content-line-height == 36 !require;
4850
}
4951
@else {
5052
$baseline == 24 !require;
@@ -54,6 +56,8 @@
5456
$subtitle-font-size == 14 !require;
5557
$max-p-width == $col-size * 5 !require;
5658
$content-font-size == 16 !require;
59+
$large-content-font-size == 20 !require;
60+
$large-content-line-height == 30 !require;
5761
}
5862

5963
</style>

‎_includes/made-with-love.html

Lines changed: 11 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,7 @@
88
x: == &[intrinsic-x];
99
y: == &[intrinsic-y];
1010
width: == ::window[width];
11-
//height: == &[intrinsic-height];
12-
//height: == ::window[height] * 2;
13-
//height: <= ::window[height] - $top-margin;
14-
height: >= #grid-section-content[height];
11+
height: == #grid-section-content[height];
1512

1613
.astro-person {
1714
width: >= 200;
@@ -64,48 +61,33 @@
6461

6562
astro-gap2 == 40 !require;
6663

67-
@v |-(#astro-d4)-(#astro-yaroslaff)-(#astro-carl) in(&) gap(v-astro-gap) !strong;
64+
@v |-(#astro-d4)-(#astro-yaroslaff)-(#astro-carl)-| in(&) gap(v-astro-gap) !strong;
6865

66+
astro-width == #astro-yaroslaff[width];
67+
top-row-1 == #astro-yaroslaff[top];
6968
@h |(#astro-yaroslaff)-(#astro-alex)-(#astro-bergie)| in(&) gap(astro-gap2) {
70-
top: == :next[top];
71-
width: == :next[width];
69+
top: == top-row-1;
70+
width: == astro-width;
7271
}
7372

73+
top-row-2 == #astro-carl[top];
7474
@h |(#astro-paul)-(#astro-tom)-(#astro-carl)| in(&) gap(astro-gap2) {
75-
top: == :next[top];
76-
width: == :next[width];
75+
top: == top-row-2;
76+
width: == astro-width;
7777
}
7878

79-
8079
} @else {
8180

8281
.astro-person {
8382
@h |-(&)-| in(^) gap(astro-gap0);
8483
}
8584

86-
@v |-(#astro-greg)-(#astro-d4)-(#astro-alex)-(#astro-bergie)-(#astro-yaroslaff)-(#astro-paul)-(#astro-tom)-(#astro-carl)
85+
@v |-(#astro-greg)-(#astro-d4)-(#astro-alex)-(#astro-bergie)-(#astro-yaroslaff)-(#astro-paul)-(#astro-tom)-(#astro-carl)-|
8786
in(&)
8887
gap($baseline * 3)
8988
outer-gap($baseline * 5);
9089
}
91-
92-
@v (#astro-carl)-(#prefinery_iframe_inline) gap(200);
93-
94-
@v (#prefinery_iframe_inline)-(#pp-link)-| in(&) gap($baseline);
95-
96-
#prefinery_iframe_inline {
97-
height: == &[intrinsic-height];
98-
}
99-
100-
#pp-link {
101-
text-align: center;
102-
size: == &[intrinsic-size] !require;
103-
center-x: == ::window[center-x];
104-
opacity: .3;
105-
}
106-
} //#grid-section-content
107-
108-
90+
}
10991
}
11092
</style>
11193
<style>
@@ -186,11 +168,6 @@ <h2 class="subtitle">Open source b/c we believe</h2>
186168
</a>
187169
</div>
188170

189-
190-
<iframe id='prefinery_iframe_inline' allowTransparency='true' width='100%' height='240' scrolling='no' frameborder='0' src="https://thegrid.prefinery.com/betas/4620/testers/new?display=inline&version=2"></iframe>
191-
192-
<a id="pp-link" href="/legal/privacy-policy/">privacy policy</a>
193-
194171
</div>
195172

196173
</section>

‎_includes/navigation.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,12 @@
2929
}
3030

3131
#sidenav-menu-button {
32-
margin-left: -23px !important;
32+
margin-left: -30px !important;
3333
width: == &[intrinsic-width];
3434
height: == &[intrinsic-height];
35-
//center-x: == 0 - ::window[center-y] - &[width] / 2;
3635
left: == 0;
37-
//center-y: == ::window[center-y] !strong;
3836
top: == ::window[height] / 2 !require;
37+
font-size: == $large-content-font-size * 0.8;
3938
}
4039

4140
}
@@ -164,6 +163,7 @@
164163
height: == &[intrinsic-height];
165164
center-y: == ($ #menu)[center-y];
166165
left: == ($ #menu)[left];
166+
font-size: == $large-content-font-size * 0.8;
167167
}
168168

169169

‎_includes/tail.html

Lines changed: 47 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,51 @@
11
{% include navigation.html %}
2-
2+
3+
<style type="text/css">
4+
#count-me-in {
5+
background: #381b3b;
6+
}
7+
</style>
8+
<style type="text/gss">
9+
10+
#count-me-in {
11+
top: == ::window[top] !strong;
12+
left: == ::window[left] !strong;
13+
x: == &[intrinsic-x];
14+
y: == &[intrinsic-y];
15+
width: == ::window[width];
16+
17+
@v |-(#gss_logo)-(#prefinery_iframe_inline)-(#pp-link)-| in(&) gap($baseline) !strong;
18+
19+
#gss_logo {
20+
size: == &[intrinsic-size];
21+
center-x: == ^center-x;
22+
}
23+
}
24+
25+
#prefinery_iframe_inline {
26+
height: == &[intrinsic-height];
27+
}
28+
29+
#pp-link {
30+
text-align: center;
31+
size: == &[intrinsic-size] !require;
32+
center-x: == ::window[center-x];
33+
opacity: .3;
34+
color: #5f4851;
35+
}
36+
37+
</style>
38+
39+
<section id="count-me-in" style="position: relative">
40+
41+
<img id="gss_logo" src="/assets/images/GSSv2.png" />
42+
43+
<iframe id='prefinery_iframe_inline' allowTransparency='true' width='100%' height='120' scrolling='no' frameborder='0' src="https://thegrid.prefinery.com/betas/4620/testers/new?display=inline&version=2"></iframe>
44+
45+
<a id="pp-link" href="/legal/privacy-policy/">privacy policy</a>
46+
47+
</section>
48+
349
<script type="text/javascript">
450
adroll_adv_id = "MW5HZIP5UVFRZNJVKSPCR4";
551
adroll_pix_id = "2DYOCKCHRVCTZGO3SGMR5U";

‎_layouts/post.html

Lines changed: 79 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,84 @@
11
{% include head.html %}
2-
{% include grid-promo.html %}
2+
{% include grid-promo.html %}
33

4-
<section class="section color-{{page.color}}" id="{{ page.uid }}">
4+
5+
<style type="text/gss">
6+
7+
#{{ page.uid }} {
8+
overflow: hidden;
9+
top: >= ::window[top];
10+
11+
@h |(&)| in(::window) !require;
12+
13+
header {
14+
15+
height: == &[intrinsic-height] !require;
16+
top: == ^[top] + $top-margin !strong;
17+
@h |-(&)-| in(^) gap($col-size);
18+
19+
bottom: == ^title-bottom;
20+
21+
22+
h2 {
23+
font-size: == $subtitle-font-size;
24+
}
25+
h1 {
26+
font-size: == $title-font-size;
27+
margin-bottom: == $baseline / 2;
28+
}
29+
}
30+
31+
.content h2 {
32+
font-size: == $subtitle-font-size * 1.9;
33+
padding: == $baseline;
34+
margin-top: == $baseline * 2;
35+
}
36+
37+
.content {
38+
bottom: <= ^[bottom] - $bottom-margin;
39+
40+
font-size: == $content-font-size;
41+
line-height: == $baseline;
42+
top: == ^title-bottom + $baseline;
43+
height: == &intrinsic-height;
44+
width: <= $max-p-width;
45+
center-x: == ^center-x;
46+
x: == content-left;
47+
}
48+
49+
p, blockquote, pre, h2, ul, ol {
50+
margin-bottom: == $baseline;
51+
}
52+
53+
}
54+
55+
ul.large-list {
56+
li {
57+
margin-bottom: == $large-content-font-size;
58+
text-align: left;
59+
}
60+
}
61+
62+
.large-font, .large-list li {
63+
font-family: "adelle", georgia, serif;
64+
font-size: == $large-content-font-size;
65+
line-height: == $large-content-line-height;
66+
}
67+
68+
</style>
69+
70+
<style type="text/css">
71+
.cols-2 {
72+
-webkit-column-count: 2;
73+
-moz-column-count: 2;
74+
column-count: 2;
75+
-webkit-column-gap: == 30px;
76+
-moz-column-gap: == 30px;
77+
column-gap: == 30px;
78+
}
79+
</style>
80+
81+
<section class="section color-{{page.color}}" id="{{ page.uid }}" style="position: relative">
582
{% if page.title %}
683
<header>
784
<h1>{{ page.title }}</h1>

‎assets/images/GSSv2.png

3.46 KB
Loading

‎index.html

Lines changed: 0 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -31,61 +31,3 @@ <h2 class="subtitle">{{ post.subtitle }}</h2>
3131
{% include home-video-gss.html %}
3232

3333
{% include made-with-love.html %}
34-
35-
<!--
36-
37-
38-
<section id="features-section" class="section color-b">
39-
40-
<style type="text/gss">
41-
42-
#img-kid {
43-
width: <= 556 !require;
44-
height: == ::[width] * 469/556 !require;
45-
bottom: == ::parent[bottom];
46-
47-
@if [Wwin] >= [breakpoint1] {
48-
center-x: == [content-right] + [baseline];
49-
right: <= ::window[right] + 100;
50-
}
51-
@else {
52-
center-x: == ::window[right];
53-
}
54-
}
55-
56-
</style>
57-
58-
<img id="img-kid" src="assets/images/purple-yellow/kid.jpg" width="556" height="469" alt="Kid">
59-
60-
<header>
61-
<h1><a name="features">Features</a></h1>
62-
</header>
63-
64-
<div class="content">
65-
66-
<ul class="large-list cols-2">
67-
<li><a href="/guides/ccss">CCSS</a>: property constraints</li>
68-
<li><a href="/guides/vfl">VFL</a>: 1-D element alignment</li>
69-
<li><a href="/guides/ifelse">@if @else Blocks</a></li>
70-
<li><a href="/guides/ifelse">Per-Element Responsiveness</a></li>
71-
<li><a href="/guides/ccss">Custom Constraint Variables</a></li>
72-
<li><a>Mixed GSS-CSS positioning</a></li>
73-
<li><a href="/guides/ccss">New Pseudo Selectors</a></li>
74-
<li><a href="/guides/ccss">Nested Rules</a></li>
75-
<li><a>Respects Text Re-Flows</a></li>
76-
<li><a href="/guides/ccss">Constraint Strengths</a></li>
77-
<li><a>True Source Order Independence</a></li>
78-
<li><a>Works with Normal CSS</a></li>
79-
</ul>
80-
81-
<p style="text-align:center;"><span class="super">*</span> <small>Maintains compatibility with browsers that don't support this feature</small></p>
82-
</div>
83-
</section>
84-
85-
86-
87-
88-
89-
90-
91-
-->

0 commit comments

Comments
 (0)