Skip to content

Commit 20039d8

Browse files
cornaecornae
committed
Documentation, navigation
1 parent dfb9d0f commit 20039d8

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

83 files changed

+14786
-2484
lines changed

‎_config.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ collections:
1515
output: true
1616
showcases:
1717
output: true
18-
technical-guide:
18+
documentation:
1919
output: true
2020
sass:
2121
style: :compressed

‎_includes/logo.svg

Lines changed: 14 additions & 0 deletions
Loading

‎_includes/quaive-logo.svg

Lines changed: 0 additions & 96 deletions
This file was deleted.

‎_layouts/demo.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
---
2+
layout: generic
3+
---
4+
5+
<div class="pat-container">
6+
<div class="canvas-toolbar">
7+
{% if page.title == 'Contact' or page.title == 'Pricing' %}
8+
<a href="/#main-content"
9+
data-pat-inject="history: record"
10+
data-pat-switch="selector: body; remove: layout-*; add: layout-homepage"
11+
class="ueber-back-button pat-inject pat-switch">Homepage</a>
12+
{% else %}
13+
<a href="./index#main-content"
14+
data-pat-inject="history: record"
15+
data-pat-switch="selector: body; remove: layout-*; add: layout-landing-{{ page.collection }}"
16+
class="ueber-back-button pat-inject pat-switch">{{ page.collection | capitalize }}</a>
17+
{% endif %}
18+
</div>
19+
<article class="pat-rich long-read">
20+
<h1>{{ page.title }}</h1>
21+
{% unless page.summary == nil %}
22+
<p class="summary">
23+
{{ page.summary }}
24+
</p>
25+
{% endunless %}
26+
{{ content }}
27+
</article>
28+
</div>

‎_layouts/generic.html

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
</div>
1111

1212
<div id="site-header"
13-
class="variation-{{ layout.template }}">
13+
class="variation-{{ layout.template }}">
1414
<!-- <div class="pat-container"> -->
1515
<a href="/#main-content"
1616
class="logo pat-inject pat-switch"
@@ -19,6 +19,12 @@
1919
id="site-logo">
2020
Patternslib
2121
</a>
22+
<a href="https://github.com/patternslib/patterns"
23+
class="github"
24+
id="github-logo"
25+
title="View Patterns' repository on Github">
26+
Github
27+
</a>
2228
<a id="menu-toggle"
2329
class="pat-toggle"
2430
data-pat-toggle="selector: body; value: menu-open menu-closed">Menu</a>
@@ -27,6 +33,20 @@
2733
</div>
2834
<aside id="osc">
2935
<nav id="global-nav">
36+
<div class="summary">
37+
<figure class="logo">
38+
<a href="/#main-content"
39+
class="logo pat-inject pat-switch"
40+
data-pat-inject="history: record"
41+
data-pat-switch="selector: body; remove: layout-*; add: layout-homepage; && selector: body; remove: menu-*; add: menu-off;">
42+
{% include logo.svg %}
43+
</a>
44+
<figcaption>Patterns</figcaption>
45+
</figure>
46+
<p>
47+
{{ site.summary }}
48+
</p>
49+
</div>
3050
{% include global-nav-item.html title="Download" %}
3151
{% include global-nav-item.html title="Demos" %}
3252
{% include global-nav-item.html title="Documentation" %}

‎_layouts/homepage.html

Lines changed: 0 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,3 @@
22
layout: generic
33
---
44

5-
<div class="swim-lane type-intro">
6-
<div class="pat-container">
7-
<article class="pat-rich">
8-
{% unless page.summary == nil %}
9-
<p class="summary">
10-
{{ site.summary }}
11-
</p>
12-
{% endunless %}
13-
</article>
14-
</div>
15-
</div>
16-
17-
<div class="swim-lane type-info-cards">
18-
<div class="pat-container">
19-
<div class="info-cards pat-masonry"
20-
data-pat-masonry="column-width: .grid-sizer; gutter: 0; item-selector: .info-card;">
21-
<div class="grid-sizer"></div>
22-
{% for card in page.cards %}
23-
{% include info-card.html %}
24-
{% endfor %}
25-
</div>
26-
</div>
27-
</div>

‎_layouts/landing-demos.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
layout: generic
2+
layout: landing
33
---
44

55
{{ content }}

‎_layouts/landing-documentation.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@
22
layout: landing
33
---
44

5-
{{ content }}
5+
{{ content }}
6+

‎_layouts/landing.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,3 +29,26 @@ <h1>{{ page.title }}</h1>
2929
</div>
3030
{% endunless %}
3131

32+
{% if page.groups %}
33+
<div class="pat-container">
34+
<div class="wells">
35+
{% for group in page.groups %}
36+
<div class="pat-well pat-rich">
37+
<h2>{{ group.name }}</h2>
38+
<p>
39+
{{ group.summary }}
40+
</p>
41+
<ul class="link-list">
42+
{% for item in site.documentation %}
43+
{% if item.parent == group.name %}
44+
<li>
45+
<a href="{{ item.url }}">{{ item.title }}</a>
46+
</li>
47+
{% endif %}
48+
{% endfor %}
49+
</ul>
50+
</div>
51+
{% endfor %}
52+
</div>
53+
</div>
54+
{% endif %}

‎_sass/_settings.scss

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,17 @@ $default-box-shadow-active: inset 0 0 10px rgba(0,0,0,0.4);
2222
$header-animation-speed: 0.8s;
2323
$button-background-image: linear-gradient(bottom, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.2) 100%);
2424
$button-border: 1px solid transparant;
25-
$button-background-colour: $colour-quaive;
25+
$button-background-colour: $colour-accent ;
2626
$button-text-colour: white;
2727
$button-height: 45px;
2828
$button-paddings: 0 30px;
2929
$button-font-size: 22px;
3030
$button-font-weight: bold;
3131
$button-border-radius: $border-radii;
32+
$bullet-space: 40px;
33+
$rich-bullet-space: 40px;
34+
35+
$osc-width: 500px;
3236

3337
// Third party libraries
3438

@@ -41,10 +45,9 @@ $button-border-radius: $border-radii;
4145
@import "components/button";
4246
@import "components/canvas-toolbar";
4347
@import "components/global-nav";
48+
@import "components/link-list";
4449
@import "components/main";
4550
@import "components/main-content";
46-
@import "components/info-cards";
47-
@import "components/info-card";
4851
@import "components/long-read";
4952
@import "components/osc";
5053
@import "components/rich";

‎_sass/assets/_colours.scss

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
@charset "UTF-8";
22

3-
$colour-quaive: #004666;
43
$colour-accent: #009ee2;
5-
$colour-base: #7c8d9b;
4+
$colour-base: white;
65
$colour-base-light: #efefef;
76

8-
$colour-homepage: seagreen;
9-
$colour-pricing: $colour-base;
10-
$colour-contact: $colour-base;
11-
$colour-affordances: darkgoldenrod;
7+
$colour-homepage: darkgreen;
8+
$colour-demos: white;
129
$colour-showcases: darkcyan;
13-
$colour-topics: #982172;
10+
$colour-documentation: #ababab;
11+
$colour-download: darkgoldenrod;
1412

15-
$colour-link: $colour-quaive;
13+
$colour-link: blue;
14+
15+
$colour-osc: darkgreen;

‎_sass/assets/_glyphs.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@ $glyph-checkbox-active: '\2611';
55
$glyph-radio-button: '\f10c';
66
$glyph-radio-button-active: '\e702';
77

8+
$glyph-patterns-logo: '\e902';
9+
$glyph-github: '\f113';
10+
$glyph-github-circled: '\f09b';
11+
812
$glyph-arrow-down-circle: '\e80e';
913
$glyph-arrow-up-circle: '\f0aa';
1014
$glyph-icon-close: '\e8f5';

‎_sass/components/_button.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@
44
@include pat-button();
55
border: none;
66

7-
.layout-landing-affordances & {
8-
background-color: $colour-affordances;
7+
.layout-landing-documentation & {
8+
background-color: $colour-documentation;
99
color: white;
1010
}
1111

12-
.layout-landing-topics & {
13-
background-color: $colour-topics;
12+
.layout-landing-download & {
13+
background-color: $colour-download;
1414
color: white;
1515
}
1616

‎_sass/components/_global-nav.scss

Lines changed: 11 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,23 @@
11
#global-nav {
2-
2+
text-align: center;
3+
max-width: 400px;
4+
margin: 0 auto;
35

46
.global-nav-item {
57
display: block;
6-
color: black;
78
text-decoration: none;
89
font-weight: bold;
910
font-size: 28px;
10-
padding: 15px 40px 15px 65px;
11-
12-
&#global-nav-item-affordances {
13-
color: $colour-affordances;
14-
}
15-
16-
&#global-nav-item-showcases {
17-
color: $colour-showcases;
18-
}
19-
20-
&#global-nav-item-topics {
21-
color: $colour-topics;
22-
}
11+
padding: 10px;
12+
border-radius: $border-radii;
13+
background-color: $colour-osc;
14+
background: $colour-osc;
15+
border: 2px solid white;
16+
color: white;
17+
margin-bottom: 15px;
2318

2419
&:hover {
25-
text-decoration: underline;;
26-
}
27-
28-
&:before {
29-
font-family: fontello;
30-
content: '#{$glyph-angle-right-thin}';
31-
position: absolute;
32-
left: 40px;
20+
background-color: rgba(255,255,255,0.1);
3321
}
3422
}
3523

0 commit comments

Comments
 (0)