Skip to content

Commit 808a4a7

Browse files
zeroedinzeroedin
authored
Merge 44ba86c into a57ce83 
2 parents a57ce83 + 44ba86c commit 808a4a7

File tree

12 files changed

+267
-111
lines changed

12 files changed

+267
-111
lines changed

‎docs/_includes/_head.njk‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<meta name="description" content="{{ title }} - PatternFly Elements">
77
<meta name="pf-auto-reveal" content="true">
88
<title>{{ element.title or title }} - PatternFly Elements</title>
9-
<link href="{{ '/brand/logo/svg/pfe-icon-blue.svg' | url }}" rel="shortcut icon">
9+
<link href="{{ '/images/favicon.ico' | url }}" rel="shortcut icon">
1010

1111
<link rel="preconnect" href="https://fonts.gstatic.com">
1212
<link

‎docs/_includes/_nav.njk‎

Lines changed: 46 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,50 @@
11
<header>
2-
<div class="logo-bar">
3-
<a href="{{ '/' | url }}">
4-
<img src="{{ '/brand/logo/svg/pfe-icon-white-shaded.svg' | url }}" alt="PatternFly Elements - Home">
5-
PatternFly Elements
6-
</a>
7-
{# TODO: implement pf-dropdown
8-
<pf-dropdown id="docs-versions-dropdown" aria-label="Docs Versions" label="Docs Versions">
9-
{% for version in versions %}
10-
{%- if version.current -%}
11-
{%- set prefix = '' -%}
12-
{%- else -%}
13-
{%- set prefix = '/' + version.slug -%}
14-
{%- endif %}
15-
<pf-dropdown-item
16-
item-type="link"
17-
data-version="{{ version.slug }}"
18-
data-label="{{ version.label }}">
19-
<a href="{{ prefix }}{{ page.url }}">{{ version.label }}</a>
20-
</pf-dropdown-item>
21-
{% endfor %}
22-
</pf-dropdown>
23-
#}
24-
<select id="docs-versions-dropdown" aria-label="Docs Versions" oninput="location.href=this.options[this.selectedIndex].value">
25-
{% for version in versions %}
26-
{%- if version.current -%}
27-
{%- set prefix = '' -%}
28-
{%- else -%}
29-
{%- set prefix = '/' + version.slug -%}
30-
{%- endif %}
31-
<option
32-
value="{{ prefix }}{{ page.url }}"
33-
data-version="{{ version.slug }}"
34-
data-label="{{ version.label }}">{{ version.label }}</option>
35-
{% endfor %}
36-
</select>
37-
<script type="module">
38-
const dropdown = document.getElementById('docs-versions-dropdown');
39-
const items = dropdown.querySelectorAll('[data-version]');
40-
const versions = Object.fromEntries(Array.from(items, x => [x.dataset.version, x]));
41-
const [fst] = new URL(location.href).pathname.split('/').filter(Boolean);
42-
let [highest] = Object.keys(versions).sort().reverse();
43-
const selected = fst in versions ? versions[fst] : versions[highest];
44-
dropdown.setAttribute('label', selected.dataset.label);
45-
</script>
2+
<div class="header-bar">
3+
{% include "../_snippets/pf-bar-html.md" %}
4+
<div class="logo-bar">
5+
<a href="{{ '/' | url }}" aria-label="PatternFly Elements Home">
6+
<img src="{{ '/images/pfe-logo-inverse-white.svg' | url }}" alt="PatternFly Elements">
7+
</a>
8+
{# TODO: implement pf-dropdown
9+
<pf-dropdown id="docs-versions-dropdown" aria-label="Docs Versions" label="Docs Versions">
10+
{% for version in versions %}
11+
{%- if version.current -%}
12+
{%- set prefix = '' -%}
13+
{%- else -%}
14+
{%- set prefix = '/' + version.slug -%}
15+
{%- endif %}
16+
<pf-dropdown-item
17+
item-type="link"
18+
data-version="{{ version.slug }}"
19+
data-label="{{ version.label }}">
20+
<a href="{{ prefix }}{{ page.url }}">{{ version.label }}</a>
21+
</pf-dropdown-item>
22+
{% endfor %}
23+
</pf-dropdown>
24+
#}
25+
<select id="docs-versions-dropdown" aria-label="Docs Versions" oninput="location.href=this.options[this.selectedIndex].value">
26+
{% for version in versions %}
27+
{%- if version.current -%}
28+
{%- set prefix = '' -%}
29+
{%- else -%}
30+
{%- set prefix = '/' + version.slug -%}
31+
{%- endif %}
32+
<option
33+
value="{{ prefix }}{{ page.url }}"
34+
data-version="{{ version.slug }}"
35+
data-label="{{ version.label }}">{{ version.label }}</option>
36+
{% endfor %}
37+
</select>
38+
<script type="module">
39+
const dropdown = document.getElementById('docs-versions-dropdown');
40+
const items = dropdown.querySelectorAll('[data-version]');
41+
const versions = Object.fromEntries(Array.from(items, x => [x.dataset.version, x]));
42+
const [fst] = new URL(location.href).pathname.split('/').filter(Boolean);
43+
let [highest] = Object.keys(versions).sort().reverse();
44+
const selected = fst in versions ? versions[fst] : versions[highest];
45+
dropdown.setAttribute('label', selected.dataset.label);
46+
</script>
47+
</div>
4648
</div>
4749

4850
<input id="mobile-menu-toggle" class="menu-toggle element-invisible" type="checkbox"

‎docs/_snippets/pf-bar-html.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<div class="pf-bar">
2+
<a href="https://www.patternfly.org/" class="cta">
3+
PatternFly.org
4+
</a>
5+
<a href="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/patternfly/patternfly-elements" class="cta">
6+
<pf-icon size="md" icon="github" set="fab" aria-hidden="true"></pf-icon>
7+
Contribute on Github
8+
</a>
9+
</div>

‎docs/docs/develop/setup.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@ tags:
142142
{% endband %}
143143

144144
{% band header="Create a PatternFly Element" %}
145-
Now that we have understand how it all works, let's create a PatternFly Element together.
145+
Now that we understand the basics, let's create a new PatternFly Element.
146146

147147
<a class="cta" href="{{ '/docs/develop/create' | url }}">Create a PatternFly Element</a>
148148
{% endband %}

‎docs/home.css‎

Lines changed: 58 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,71 @@
11
#home-header {
22
display: flex;
3+
flex-direction: column;
4+
gap: 2rem;
5+
color: white;
6+
background-color: var(--pf-theme--color--accent, #0066cc);
37
justify-content: center;
48
text-align: center;
5-
flex-wrap: wrap;
6-
gap: 16px;
7-
background-color: #004080;
8-
color: white;
9-
padding-block-end: 0;
10-
padding-inline: 1rem;
11-
max-width: 100%;
9+
padding: 4rem 0;
1210
}
1311

1412
#home-header h1 {
1513
display: flex;
16-
flex-direction: column;
1714
justify-content: center;
18-
align-items: center;
19-
gap: 1rem;
15+
text-align: center;
2016
}
2117

2218
#home-header h1 img {
23-
width: 6rem;
24-
translate: 0 2rem;
25-
object-fit: none;
19+
width: 650px;
20+
max-width: 100%;
21+
padding: 0 1rem;
2622
}
2723

28-
@media (min-width: 767px) {
29-
#home-header h1 {
30-
flex-direction: row;
31-
gap: 0;
32-
}
24+
#home-header p {
25+
font-family: "Red Hat Display", sans-serif;
26+
font-size: var(--pf-c-title--m-xl--FontSize, var(--pf-global--FontSize--xl, 1.25rem));
27+
font-weight: var(--pf-c-title--m-xl--FontWeight, var(--pf-global--FontWeight--normal, 500));
28+
line-height: var(--pf-c-title--m-xl--LineHeight, var(--pf-global--LineHeight--md, 1.5));
29+
}
3330

34-
#home-header h1 img {
35-
translate: 0;
36-
}
31+
.cta-group {
32+
display: flex;
33+
flex-direction: column;
34+
gap: 1rem;
35+
justify-content: center;
36+
align-items: center;
3737
}
3838

39-
#home-header > :is(h1, p) {
40-
width: 100%;
41-
max-width: 100%;
39+
#home-header a {
40+
font-size: var(--pf-global--FontSize--lg, 1.125rem);
41+
}
42+
43+
#home-header a.cta.primary {
44+
--pf-cta--Color: #06c;
4245
}
4346

44-
#home-header pf-icon {
45-
color: #666
47+
#home-header a.cta.primary:hover {
48+
--pf-cta--Color--hover: var(--pf-theme--color--white, #fff);
49+
--pf-cta--BackgroundColor: transparent;
4650
}
4751

48-
#home-header section {
49-
margin-block-start: 48px;
50-
color: black;
51-
width: calc(100% + 2rem);
52-
margin-inline: -2rem;
52+
#home-header a.cta.secondary:hover {
53+
--pf-cta--Color--hover: #06c;
5354
}
5455

56+
5557
#lightw {
5658
display: grid;
5759
gap: 1em;
58-
grid-template-columns: 1fr 1fr;
60+
grid-template-columns: 1fr;
5961
grid-template-areas:
60-
'h h'
61-
'tag tag'
62-
'p p'
63-
'snip snip'
64-
'card step'
65-
'link link';
62+
'h'
63+
'tag'
64+
'p'
65+
'snip'
66+
'card'
67+
'step'
68+
'link';
6669
}
6770

6871
#lightw > .subtitle { grid-area: tag; }
@@ -115,3 +118,20 @@ rh-global-footer {
115118
padding: var(--pf-global--spacer--3xl, 4rem) var(--pf-global--spacer--3xl, 4rem);
116119
}
117120
}
121+
122+
@media screen and (min-width: 768px) {
123+
.cta-group {
124+
flex-direction: row;
125+
}
126+
127+
#lightw {
128+
grid-template-columns: 1fr 1fr;
129+
grid-template-areas:
130+
'h h'
131+
'tag tag'
132+
'p p'
133+
'snip snip'
134+
'card step'
135+
'link link';
136+
}
137+
}

‎docs/images/favicon-16x16.png‎

721 Bytes
Loading

‎docs/images/favicon-32x32.png‎

2.12 KB
Loading

‎docs/images/favicon-48x48.png‎

3.98 KB
Loading

‎docs/images/favicon.ico‎

32.5 KB
Binary file not shown.

‎docs/images/pfe-logo-inverse-white.svg‎

Lines changed: 66 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)