Skip to content

Commit 2fbe1dd

Browse files
author
carl@connectedbrains.com
committed
move to higher scope some shared variables
1 parent ac3a5e1 commit 2fbe1dd

10 files changed

+20
-44
lines changed

‎_includes/demo-idevices.html

+1-7
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,7 @@
1313

1414
#{{ post.uid }} {
1515

16-
top: == ::window[top] !strong;
17-
left: == ::window[left] !strong;
18-
x: == &[intrinsic-x];
19-
y: == &[intrinsic-y];
20-
width: == &[intrinsic-width];
21-
2216
height: >= 600;
23-
//height: >= ::window[height] - $baseline !strong;
2417

2518
top-margin == 30;
2619
bottom-margin == 50;
@@ -42,6 +35,7 @@
4235
}
4336

4437
h2 {
38+
width: == &[intrinsic-width];
4539
height: == &[intrinsic-height] !require;
4640
center-x: == ^center-x;
4741
font-size: == $subtitle-font-size;

‎_includes/grid-promo.html

+2-5
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11

2-
<section id="the-grid-promo" style="position: relative">
2+
<section class="top-section" id="the-grid-promo" style="position: relative">
33
<style type="text/gss">
44
#the-grid-promo {
5-
top: == 0 !require;
6-
left: == 0 !require;
7-
width: == ::window[width] !strong;
8-
5+
96
area-gap == 48;
107
@h |-("area")-| in(&) gap(area-h-gap);
118
@v |-("area")-| in(&) gap(area-gap) !strong;

‎_includes/head.html

+9
Original file line numberDiff line numberDiff line change
@@ -64,4 +64,13 @@
6464
font-size: == $content-font-size;
6565
}
6666

67+
section.top-section {
68+
//v2.0 has a problem with intrinsic-top & left. Should be able to only use intrinsic-top, left with v2.1
69+
top: == ::window[top] !strong;
70+
left: == ::window[left] !strong;
71+
x: == &[intrinsic-x];
72+
y: == &[intrinsic-y];
73+
width: == &[intrinsic-width];
74+
}
75+
6776
</style>

‎_includes/home-demos.html

-6
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,6 @@
33
<style type="text/gss">
44
#home-demos {
55

6-
top: == ::window[top] !strong;
7-
left: == ::window[left] !strong;
8-
x: == &[intrinsic-x];
9-
y: == &[intrinsic-y];
10-
width: == &[intrinsic-width];
11-
126
height: >= 500 !require;
137

148
#demos-title {

‎_includes/home-intro.html

-5
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,6 @@
55
body {
66
#top-home-section {
77

8-
left: == ::window[left] !strong;
9-
x: == &[intrinsic-x];
10-
y: == &[intrinsic-y];
11-
width: == &[intrinsic-width];
12-
138
height: >= 500 !require;
149
height: >= ::window[height] - $baseline !require;
1510

‎_includes/home-video-gss.html

+4-9
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<section id="fluent-section" class="section color-a" style="position: relative">
1+
<section id="fluent-section" class="section top-section color-a" style="position: relative">
22

33
<style type="text/css">
44
#fluent-section {
@@ -13,16 +13,10 @@
1313
}
1414
</style>
1515

16-
1716
<style type="text/gss">
1817

1918
#fluent-section {
2019

21-
top: == ::window[top] !strong;
22-
left: == ::window[left] !strong;
23-
x: == &[intrinsic-x];
24-
y: == &[intrinsic-y];
25-
width: == ::window[width];
2620
height: <= ::window[height] - $top-margin;
2721

2822
#fluent-img {
@@ -34,11 +28,11 @@
3428

3529
h1, h2, p {
3630
size: == &[intrinsic-size];
37-
center-x: == ^[center-x];
3831
text-align: center;
3932
}
4033

4134
header {
35+
center-x: == ^center-x;
4236
@v |-(h1)-(h2)-| in(&) gap($baseline) outer-gap($top-margin / 2) !strong;
4337

4438
h1 {
@@ -53,14 +47,15 @@
5347
}
5448
}
5549

56-
5750
a[size] == #fluent-img[size];
5851

5952
0 <= v-gap <= $baseline;
6053

6154
@h |-(#fluent-img(>= $max-p-width, <= ::window[width] !strong))-| in(&) gap(h-gap) !strong;
6255
@v |-(h1)-(h2)-(#fluent-img)-(p)-...-| in(&) gap(v-gap) outer-gap($baseline) !strong;
6356

57+
p[center-x] == #fluent-img[center-x];
58+
6459
#fluent-play {
6560
padding: 0 !important;
6661
height: == 96;

‎_includes/made-with-love.html

+3-9
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,24 @@
1-
<section id="grid-section" class="color-a" style="position: relative">
1+
<section id="grid-section" class="top-section color-a" style="position: relative">
22
<style type="text/gss">
33

44
#grid-section {
55

6-
top: == ::window[top] !strong;
7-
left: == ::window[left] !strong;
8-
x: == &[intrinsic-x];
9-
y: == &[intrinsic-y];
10-
width: == ::window[width];
116
height: == #grid-section-content[height];
127

138
.astro-person {
149
width: >= 200;
1510
height: >= 200;
1611
width: == &[height] * 666/777;
17-
//bottom: <= ^[bottom] - $baseline * 5;
1812
}
1913

2014
h1, h2 {
2115
size: == &[intrinsic-size];
22-
center-x: == ^[center-x];
16+
//center-x: == ^[center-x];
2317
text-align: center;
2418
}
2519

2620
header {
27-
//TODO - check if usefull. Probably not since h1-h2 are used in later VFL @v
21+
center-x: == ^center-x;
2822
@v |-(h1)-(h2)-| in(&) gap($baseline) outer-gap($top-margin / 2) !strong;
2923

3024
h1 {

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

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

109
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,7 +5,6 @@
55
color: c
66
displayPromo: true
77
include: demo-idevices.html
8-
layout: home
98
---
109

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

‎index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
{% include home-demos.html %}
99

1010
{% for post in site.categories.home %}
11-
<section class="section color-{{post.color}}" id="{{ post.uid }}" style="position: relative">
11+
<section class="section top-section color-{{post.color}}" id="{{ post.uid }}" style="position: relative">
1212
{% if post.title %}
1313
<header>
1414
<h1><a name="{{ post.uid }}">{{ post.title }}</a></h1>

0 commit comments

Comments
 (0)