Skip to content

Commit ac3a5e1

Browse files
author
carl@connectedbrains.com
committed
new layout for home section
1 parent 6a115e2 commit ac3a5e1

File tree

6 files changed

+50
-151
lines changed

6 files changed

+50
-151
lines changed

‎_includes/head.html

+29-148
Original file line numberDiff line numberDiff line change
@@ -31,156 +31,37 @@
3131

3232
<style type="text/gss">
3333

34-
$breakpoint1 == 900 !require;
35-
$content-right == ::window[center-x] + $max-p-width / 2 !require;
36-
$content-left == ::window[center-x] - $max-p-width / 2 !require;
37-
$baseline >= 0 !require;
38-
39-
@if ::window[width] >= $breakpoint1 {
40-
$baseline == 30 !require;
41-
$col-size == ::window[width] / 12 !strong;
42-
$col-size <= 72 !require;
43-
$top-margin == $baseline * 4 !require;
44-
$title-font-size == 65 !require;
45-
$subtitle-font-size == 18 !require;
46-
$max-p-width == 720 !require;
47-
$content-font-size == 20 !require;
48-
$large-content-font-size == 24 !require;
49-
$large-content-line-height == 36 !require;
50-
}
51-
@else {
52-
$baseline == 24 !require;
53-
$col-size == ::window[width] / 6 !require;
54-
$top-margin == $baseline * 3 !require;
55-
$title-font-size == 45 !require;
56-
$subtitle-font-size == 14 !require;
57-
$max-p-width == $col-size * 5 !require;
58-
$content-font-size == 16 !require;
59-
$large-content-font-size == 20 !require;
60-
$large-content-line-height == 30 !require;
61-
}
62-
63-
</style>
64-
65-
<!--
66-
<style type="text/gss">
67-
68-
[Wwin] == ::window[width] == body[width] !require;
69-
[Hwin] == ::window[height] == body[height] !require;
70-
71-
[breakpoint1] == 900 !require;
72-
73-
[content-right] == ::window[center-x] + [max-p-width] / 2 !require;
74-
[content-left] == ::window[center-x] - [max-p-width] / 2 !require;
75-
76-
@if [Wwin] >= [breakpoint1] {
77-
[baseline] == 30 !require;
78-
[top-margin] == [baseline] * 4 !require;
79-
[bottom-margin] == [baseline] * 4 !require;
80-
[col-size] == [Wwin] / 12 !strong;
81-
[col-size] <= 72 !require;
82-
[max-p-width] == 720 !require;
83-
[title-font-size] == 65 !require;
84-
[subtitle-font-size] == 18 !require;
85-
[content-font-size] == 20 !require;
86-
[button-font-size] == 26 !require;
87-
[large-content-font-size] == 24 !require;
88-
[large-content-line-height] == 36 !require;
89-
90-
} @else {
91-
[baseline] == 24 !require;
92-
[top-margin] == [baseline] * 3 !require;
93-
[bottom-margin] == [baseline] * 2 !require;
94-
[col-size] == [Wwin] / 6 !require;
95-
[max-p-width] == [col-size] * 5 !require;
96-
[title-font-size] == 35 !require;
97-
[subtitle-font-size] == 14 !require;
98-
[content-font-size] == 16 !require;
99-
[button-font-size] == 20 !require;
100-
[large-content-font-size] == 20 !require;
101-
[large-content-line-height] == 30 !require;
102-
}
103-
104-
button, .button {
105-
font-size: == [button-font-size];
106-
}
107-
108-
@vertical section;
109-
110-
section {
111-
overflow: hidden;
112-
top: >= ::window[top];
113-
114-
@horizontal |[::]| in(::window) !require;
115-
116-
117-
header {
118-
119-
height: == ::[intrinsic-height] !require;
120-
top: == ::parent[top] + [top-margin] !strong;
121-
@horizontal |-[::]-| in(::parent) gap([col-size]);
122-
123-
124-
bottom: == ::parent[title-bottom];
125-
126-
127-
h2 {
128-
font-size: == [subtitle-font-size];
129-
}
130-
h1 {
131-
font-size: == [title-font-size];
132-
margin-bottom: == [baseline] / 2;
133-
}
34+
$breakpoint1 == 900 !require;
35+
$content-right == ::window[center-x] + $max-p-width / 2 !require;
36+
$content-left == ::window[center-x] - $max-p-width / 2 !require;
37+
$baseline >= 0 !require;
38+
39+
@if ::window[width] >= $breakpoint1 {
40+
$baseline == 30 !require;
41+
$col-size == ::window[width] / 12 !strong;
42+
$col-size <= 72 !require;
43+
$top-margin == $baseline * 4 !require;
44+
$title-font-size == 65 !require;
45+
$subtitle-font-size == 18 !require;
46+
$max-p-width == 720 !require;
47+
$content-font-size == 20 !require;
48+
$large-content-font-size == 24 !require;
49+
$large-content-line-height == 36 !require;
13450
}
135-
136-
.content h2 {
137-
font-size: == [subtitle-font-size] * 1.9;
138-
padding: == [baseline];
139-
margin-top: == [baseline] * 2;
51+
@else {
52+
$baseline == 24 !require;
53+
$col-size == ::window[width] / 6 !require;
54+
$top-margin == $baseline * 3 !require;
55+
$title-font-size == 45 !require;
56+
$subtitle-font-size == 14 !require;
57+
$max-p-width == $col-size * 5 !require;
58+
$content-font-size == 16 !require;
59+
$large-content-font-size == 20 !require;
60+
$large-content-line-height == 30 !require;
14061
}
14162

142-
143-
144-
145-
146-
.content {
147-
bottom: <= ::parent[bottom] - [bottom-margin] !medium;
148-
149-
font-size: == [content-font-size];
150-
line-height: == [baseline];
151-
top: == ::parent[title-bottom] + [baseline];
152-
height: == ::[intrinsic-height];
153-
width: <= [max-p-width];
154-
center-x: == ::parent[center-x] !medium;
155-
x: == ::[content-left];
63+
p {
64+
font-size: == $content-font-size;
15665
}
15766

158-
p, blockquote, pre, h2, ul, ol {
159-
margin-bottom: == [baseline];
160-
}
161-
162-
}
163-
164-
.cols-2 {
165-
-webkit-column-count: 2;
166-
-moz-column-count: 2;
167-
column-count: 2;
168-
-webkit-column-gap: == [baseline];
169-
-moz-column-gap: == [baseline];
170-
column-gap: == [baseline];
171-
}
172-
173-
ul.large-list {
174-
li {
175-
margin-bottom: == [large-content-font-size];
176-
text-align: left;
177-
}
178-
}
179-
180-
.large-font, .large-list li {
181-
font-family: "adelle", georgia, serif;
182-
font-size: == [large-content-font-size];
183-
line-height: == [large-content-line-height];
184-
}
185-
186-
</style> -->
67+
</style>

‎_includes/home-demos.html

-1
Original file line numberDiff line numberDiff line change
@@ -110,5 +110,4 @@ <h2 id="title-demo2">GSS Animation</h2>
110110
<div class="img-demo" id="img-demo2"></div>
111111
<a href="/demos/profile-card/index.html" class="top-button button" id="btn-view-demo2">View demo</a>
112112
</article>
113-
114113
</section>

‎_includes/home-video-gss.html

-2
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,6 @@
3939
}
4040

4141
header {
42-
43-
//TODO - check if usefull. Probably not since h1-h2 are used in later VFL @v
4442
@v |-(h1)-(h2)-| in(&) gap($baseline) outer-gap($top-margin / 2) !strong;
4543

4644
h1 {

‎_layouts/home.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{% include head.html %}
2+
{% include grid-promo.html %}
3+
4+
<section class="section color-{{page.color}}" id="{{ page.uid }}" style="position: relative">
5+
{% if page.title %}
6+
<header>
7+
<h1>{{ page.title }}</h1>
8+
<h2 class="subtitle">{{ page.subtitle }}</h2>
9+
</header>
10+
{% endif %}
11+
<div class="content">
12+
{{ content | markdownify }}
13+
{% if page.include %}
14+
{% include {{page.include}} %}
15+
{% endif %}
16+
</div>
17+
</section>
18+
19+
{% include tail.html %}

‎home/_posts/2014-02-01-about.html

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
subtitle: Flexbox? Meh
55
color: b
66
include: spaceman.html
7+
layout: home
78
---
89

910
Web developers are expected to build increasingly sophisticated UIs faster, cheaper, with tools that have not evolved with the times. Why is the trivial task of centering an element with CSS so [obtusely complex](http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/)? CSS was designed to separate presentation from content, but even with [Flexbox](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes), a trivial change in layout can require deep changes in both the HTML content and the CSS presentation. CSS layout primitives are not expressive enough - it doesn't really matter that some div is 720px wide - what matters is how it relates to other elements in the layout. WTF, why can't we position & size elements relative to each other, not just relative to their positioned parents? For more than a decade, web developers have been asking for this, but the W3C refuses to tackle the engineering problems associated with the "cyclic dependencies" that naturally arise in relative layout logic. Sounds like a classic constraint satisfaction problem - JavaScript to the rescue!

‎home/_posts/2014-02-06-relative.html

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
color: c
66
displayPromo: true
77
include: demo-idevices.html
8+
layout: home
89
---
910

1011
Notice how you naturally would describe the nearby layout of iOS devices:

0 commit comments

Comments
 (0)