forked from gss/gss.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
156 lines (121 loc) · 4.58 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
---
title: CSS polyfills from the future
layout: default
---
<section id="top-home-section" class="top-section color-a">
<style type="text/gss">
.top-button {
height: == ::[intrinsic-height] !require;
width: == ::[intrinsic-width] !require;
bottom: == ::parent[bottom] - [bottom-margin] !require;
}
/* center the buttons */
#top-button1[right] == ::window[center-x] - [baseline] / 2;
@horizontal [#top-button1]-[#top-button2]
gap([baseline])
chain-top;
[top-image-gap] == [baseline];
[top-image-gap] >= 0 !require;
#top-home-image {
width: <= 656 !require;
height: == ::[width] * 754/656 !require;
height: >= 400 !require;
center-x: == ::parent[center-x] !require;
center-y: == ::parent[center-y] !medium;
@horizontal |~-~[::]~-~| in(::parent) gap([other-top-image-gap]) !require;
@vertical |-[::] in(::parent) gap([top-image-gap]) !strong;
}
.top-section {
height: >= 0;
}
#top-home-section {
bottom: == ::window[bottom] - [baseline] !strong;
top: == 0 !require;
height: >= 500 !require;
/*height: <= 1000 !require;*/
}
@vertical [#top-home-image]-[#top-title] gap([top-image-gap]) !require;
@vertical [#top-title]-[#top-subtitle]-[#top-button1] gap([baseline]) !require;
#top-title {
height: == ::[intrinsic-height] !require;
@horizontal |-[::]-| in(::parent) gap([col-size]);
padding-bottom: == [baseline];
font-size: == [title-font-size] * 1.3;
}
#top-subtitle {
height: == ::[intrinsic-height] !require;
left: == [content-left] !require;
right: == [content-right] !require;
padding-bottom: == [baseline];
text-align: center;
font-style: italic;
}
/*
.top-section {
top: == ::window[top];
}
*/
</style>
<div id="top-home-image"></div>
<h1 id="top-title">Grid Style Sheets</h1>
<h3 id="top-subtitle" class="large-font">GSS reimagines CSS layout & replaces the browser’s layout engine with one that harnesses the Cassowary Constraint Solver — the same algorithm Apple uses to compute native layout.</h3>
<button class="top-button" id="top-button1"><a href="/usage">Install</a></button>
<button class="top-button" id="top-button2"><a href="https://github.com/the-gss">Source</a></button>
</section>
<section id="features-section" class="section color-b">
<style type="text/gss">
#img-kid {
width: <= 556 !require;
height: == ::[width] * 469/556 !require;
bottom: == ::parent[bottom];
@if [Wwin] >= [breakpoint1] {
center-x: == [content-right] + [baseline];
right: <= ::window[right] + 100;
}
@else {
center-x: == ::window[right];
}
}
</style>
<img id="img-kid" src="assets/images/purple-yellow/kid.jpg" width="556" height="469" alt="Kid">
<header>
<h1><a name="features">Features</a></h1>
</header>
<div class="content">
<ul class="large-list cols-2">
<li><a href="/guides/ccss">Constraint CSS</a></li>
<li><a href="/guides/vfl">Grid-flavored VFL</a></li>
<li><a href="/#rel_pos_size">Relative positioning & sizing</a></li>
<li><a href="/guides/ifelse">@if @else Blocks</a></li>
<li><a href="/guides/ifelse">Per-Element Responsiveness</a></li>
<li><a href="/guides/ccss">Custom Constraint Variables</a></li>
<li><a>Accelerated 3D transforms <span class="super">*</span></a></li>
<li><a href="/guides/ccss">New Pseudo Selectors</a></li>
<li><a href="/guides/ccss">Nested Rules</a></li>
<li><a>Respects Text Re-Flows</a></li>
<li><a href="/guides/ccss">(In)Equality Constraints</a></li>
<li><a href="/guides/ccss">Constraint Strengths</a></li>
<li><a>Multi-threaded Web Workers <span class="super">*</span></a></li>
<li><a>True Source Order Independence</a></li>
<li><a>Works with Normal CSS</a></li>
</ul>
<p style="text-align:center;"><span class="super">*</span> <small>Maintains compatibility with browsers that don't support this feature</small></p>
</div>
</section>
{% for post in site.categories.home %}
<section class="section color-{{post.color}}" id="{{ post.uid }}">
{% if post.title %}
<header>
<h1><a name="{{ post.uid }}">{{ post.title }}</a></h1>
<h2 class="subtitle">{{ post.subtitle }}</h2>
</header>
{% endif %}
<div class="content">
{{ post.content | markdownify }}
{% if post.include %}
{% include {{post.include}} %}
{% endif %}
</div>
</section>
{% endfor %}
{% include made-with-love.html %}