Skip to content

Commit 663d826

Browse files
mattdangerwmattdangerw
authored
New landing and theme (#2071)
* BYND redesign Co-authored-by: Alex Abbott <[email protected]> Co-authored-by: Maciej Manista <[email protected]> commit 0033ea8 Author: Alex Abbott <[email protected]> Date: Tue Mar 11 11:51:02 2025 -0700 Remove github button from kears 3 announcement commit f0d4190 Author: Alex Abbott <[email protected]> Date: Mon Mar 10 14:35:25 2025 -0700 Fixes parallax issue commit d05b9ea Author: Alex Abbott <[email protected]> Date: Mon Mar 10 14:20:42 2025 -0700 Adds more UAT tweaks commit d2d434e Author: Alex Abbott <[email protected]> Date: Fri Mar 7 15:12:33 2025 -0800 Adds color tweaks commit 86c773f Author: Alex Abbott <[email protected]> Date: Fri Mar 7 14:36:07 2025 -0800 Adds additional fixes commit a4346ef Merge: 877e385 a3c8291 Author: Alex Abbott <[email protected]> Date: Fri Mar 7 14:29:32 2025 -0800 Merge pull request #5 from manuel-azenha/bugfix/landing-sticky-textbox fix: landing page - sticky textbox section fix commit a3c8291 Author: Maciej Manista <[email protected]> Date: Fri Mar 7 22:17:03 2025 +0100 fix: landing page - sticky textbox section fix commit 877e385 Author: Alex Abbott <[email protected]> Date: Fri Mar 7 09:13:39 2025 -0800 Fixes more UAT issues commit a1424af Author: Alex Abbott <[email protected]> Date: Fri Mar 7 07:49:41 2025 -0800 Fixes a few more UAT issues commit 3bbe12f Author: Alex Abbott <[email protected]> Date: Thu Mar 6 16:19:04 2025 -0800 Addresses UAT and PR feedback commit aa341e1 Author: Alex Abbott <[email protected]> Date: Thu Mar 6 16:17:28 2025 -0800 Address UAT and PR feedback commit f150362 Merge: e1f5723 0a1407e Author: Alex Abbott <[email protected]> Date: Thu Mar 6 09:20:44 2025 -0800 Merge pull request #4 from manuel-azenha/feature/docs-css-updates fix: docs styling - addressing QA feedback commit 0a1407e Author: Maciej Manista <[email protected]> Date: Thu Mar 6 18:16:13 2025 +0100 fix: docs styling - addressing QA feedback commit e1f5723 Merge: 106d340 fedd27b Author: Alex Abbott <[email protected]> Date: Wed Mar 5 15:15:07 2025 -0800 Merge pull request #3 from manuel-azenha/feature/docs-css-updates feat: docs - more css updates commit fedd27b Author: Maciej Manista <[email protected]> Date: Wed Mar 5 19:10:52 2025 +0100 feat: docs - more css updates commit 106d340 Merge: 973822e 92d9c88 Author: Alex Abbott <[email protected]> Date: Tue Mar 4 10:26:27 2025 -0800 Merge branch 'feature/docs-css-updates' commit 973822e Author: Alex Abbott <[email protected]> Date: Tue Mar 4 10:26:07 2025 -0800 Adds theme enhancements commit 92d9c88 Author: Maciej Manista <[email protected]> Date: Tue Mar 4 18:23:12 2025 +0100 feat: docs pages css updates commit f80c024 Author: Alex Abbott <[email protected]> Date: Mon Mar 3 21:15:02 2025 -0800 Adds nav to subpages commit b39decf Merge: 7421345 5ef0724 Author: Alex Abbott <[email protected]> Date: Mon Mar 3 13:10:50 2025 -0800 Adds nav changes commit 7421345 Author: Alex Abbott <[email protected]> Date: Mon Mar 3 09:18:57 2025 -0800 Adds changes for landing page commit 5ef0724 Author: Maciej Manista <[email protected]> Date: Mon Mar 3 15:31:48 2025 +0100 feat: docs - sidenav rework commit f3ca2c5 Author: mmanista-bynd <[email protected]> Date: Mon Mar 3 17:05:55 2025 +0100 feat: docs - sidenav rework (#1) commit 09111ec Author: manuel-azenha <[email protected]> Date: Wed Feb 26 18:18:52 2025 +0000 add Images via upload commit 5e79b3e Author: Manuel Azenha <[email protected]> Date: Wed Feb 26 18:14:35 2025 +0000 feat: add icons commit ddf631c Author: Manuel Azenha <[email protected]> Date: Wed Feb 26 18:13:43 2025 +0000 feat: landing page desktop commit 92165c4 Author: Manuel Azenha <[email protected]> Date: Tue Feb 25 10:12:30 2025 +0000 feat: create webpack config * Matt's fixes * Minor updates * Remove box shadows for examples
1 parent fb1cfe0 commit 663d826

Some content is hidden

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

48 files changed

+3414
-798
lines changed

‎.gitignore‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ sources/*
33
site/*
44
*.pyc
55
*.swp
6+
templates/examples/audio/*
67
templates/examples/generative/*
78
templates/examples/nlp/*
89
templates/examples/vision/*
@@ -15,5 +16,6 @@ templates/**/guides/**/*.md
1516
templates/keras_hub/getting_started.md
1617
templates/keras_tuner/getting_started.md
1718
datasets/*
19+
.history
1820
.vscode/*
19-
.history
21+
.idea/*

‎quickstarts/keras_hub_quickstart.ipynb‎

Lines changed: 480 additions & 0 deletions
Large diffs are not rendered by default.

‎quickstarts/keras_quickstart.ipynb‎

Lines changed: 211 additions & 0 deletions
Large diffs are not rendered by default.

‎scripts/autogen.py‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -776,9 +776,11 @@ def render_md_sources_to_html(self):
776776
print("...Rendering", fname)
777777
self.render_single_file(src_location, fname, self.nav)
778778

779-
# Images & css
779+
# Images & css & js
780+
shutil.copytree(Path(self.theme_dir) / "js", Path(self.site_dir) / "js")
780781
shutil.copytree(Path(self.theme_dir) / "css", Path(self.site_dir) / "css")
781782
shutil.copytree(Path(self.theme_dir) / "img", Path(self.site_dir) / "img")
783+
shutil.copytree(Path(self.theme_dir) / "icons", Path(self.site_dir) / "icons")
782784

783785
# Landing page
784786
landing_template = jinja2.Template(

‎scripts/master.py‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,14 @@
99
"path": "/",
1010
"title": "Keras: the Python Deep Learning library",
1111
"children": [
12-
{
13-
"path": "about",
14-
"title": "About Keras",
15-
},
1612
{
1713
"path": "getting_started/",
1814
"title": "Getting started",
1915
"children": [
16+
{
17+
"path": "about",
18+
"title": "About Keras",
19+
},
2020
{
2121
"path": "intro_to_keras_for_engineers",
2222
"title": "Introduction to Keras for engineers",

‎templates/about.md‎ renamed to ‎templates/getting_started/about.md‎

File renamed without changes.

‎theme/base.html‎

Lines changed: 130 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,13 @@
2121

2222
<title>{{title}}</title>
2323

24-
<!-- Bootstrap core CSS -->
25-
<link href="{{base_url}}css/bootstrap.min.css" rel="stylesheet">
26-
2724
<!-- Custom fonts for this template -->
2825
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">
26+
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;800&display=swap" rel="stylesheet">
27+
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap" rel="stylesheet">
28+
29+
<!-- Bootstrap core CSS -->
30+
<link href="{{base_url}}css/bootstrap.min.css" rel="stylesheet">
2931

3032
<!-- Custom styles for this template -->
3133
<link href="{{base_url}}css/docs.css" rel="stylesheet">
@@ -49,6 +51,8 @@
4951
<!-- End Google Tag Manager -->
5052

5153
<script async defer src="https://buttons.github.io/buttons.js"></script>
54+
<link rel="preconnect" href="https://fonts.googleapis.com">
55+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
5256

5357
</head>
5458

@@ -58,41 +62,133 @@
5862
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
5963
<!-- End Google Tag Manager (noscript) -->
6064

61-
<div class='k-page'>
62-
63-
<div class="k-nav" id="nav-menu">
64-
<a href='{{base_url}}'><img src='{{base_url}}img/logo-small.png' class='logo-small' /></a>
65-
66-
<div class="nav flex-column nav-pills" role="tablist" aria-orientation="vertical">
67-
68-
{% for item in nav %}
69-
<a class="nav-link{% if item.active %} active{% endif %}" href="{{item.url}}" role="tab" aria-selected="{{item.selected}}">{{item.title}}</a>
70-
{% if item.active %}
71-
{% for child in item.children %}
72-
<a class="nav-sublink{% if child.active %} active{% endif %}" href="{{child.url}}">{{child.title}}</a>
73-
{% if child.active %}
74-
{% for grandchild in child.children %}
75-
<a class="nav-sublink2{% if grandchild.active %} active{% endif %}" href="{{grandchild.url}}">{{grandchild.title}}</a>
76-
{% endfor %}
77-
{% endif %}
65+
<div class="k-page">
66+
<div class="hidden">
67+
{% set related_nav_urls_map = {
68+
"/api/": ["/2.18/api/"],
69+
"/2.18/api/": ["/api/"],
70+
} %}
71+
{% set vars = {'related_urls': [], 'active_url': ''} %}
72+
{% for item in nav %}
73+
{% if item.active %}
74+
{{ vars.update({'related_urls': related_nav_urls_map[item.url], 'active_url': item.url}) }}
75+
{% endif %}
76+
{% endfor %}
77+
</div>
78+
<nav class="nav__container">
79+
<div class="nav__wrapper">
80+
<div class="nav__controls--mobile">
81+
<button class="nav__menu--button"><i class="icon--menu"></i></button>
82+
<button class="nav__menu--close"><i class="icon--close"></i></button>
83+
<a href="{{base_url}}">
84+
<img class="nav__logo nav__logo--mobile" src="{{base_url}}img/k-logo.png" />
85+
</a>
86+
<button class="nav__search--mobile">
87+
<i class="icon__search--mobile"></i>
88+
</button>
89+
</div>
90+
<form class="nav__search nav__search-form--mobile">
91+
<input
92+
class="nav__search--input"
93+
type="search"
94+
placeholder="SEARCH"
95+
aria-label="Search"
96+
/>
97+
<button class="nav__search--button" type="submit">
98+
<i class="icon--search"></i>
99+
</button>
100+
</form>
101+
<div class="k-nav nav__mobile-menu" id="nav-menu">
102+
<!-- version with just the active item visible -->
103+
<div class="nav flex-column nav-pills" role="tablist" aria-orientation="vertical">
104+
{% for item in nav %}
105+
<a class="nav-link{% if item.active %} active{% endif %}" href="{{item.url}}" role="tab" aria-selected="{{item.selected}}">{{item.title}}</a>
106+
{% if item.active %}
107+
{% for child in item.children %}
108+
<a class="nav-sublink{% if child.active %} active{% endif %}" href="{{child.url}}">{{child.title}}</a>
109+
{% if child.active %}
110+
{% for grandchild in child.children %}
111+
<a class="nav-sublink2{% if grandchild.active %} active{% endif %}" href="{{grandchild.url}}">{{grandchild.title}}</a>
112+
{% endfor %}
113+
{% endif %}
114+
{% endfor %}
115+
{% endif %}
78116
{% endfor %}
79-
{% endif %}
80-
{% endfor %}
81-
117+
</div>
118+
</div>
119+
120+
<a href="{{base_url}}">
121+
<img class="nav__logo nav__logo--desktop" src="{{base_url}}img/logo.png" alt="keras.io logo" />
122+
</a>
123+
<div class="nav__menu">
124+
{% set main_nav_items = {
125+
'/getting_started/': 'Get started',
126+
'/guides/': 'Guides',
127+
'/api/': 'API Docs',
128+
'/examples/': 'Examples',
129+
'/keras_tuner/': 'Keras Tuner',
130+
'/keras_hub/': 'Keras Hub',
131+
} %}
132+
<ul class="nav__item--container">
133+
{% for key, value in main_nav_items.items() %}
134+
<li class="nav__item">
135+
<a class="nav__link{% if key == vars['active_url'] or key in vars['related_urls'] %} nav__link--active{% endif %}" href="{{ key }}">{{ value }}</a>
136+
</li>
137+
{% endfor %}
138+
</ul>
139+
140+
<form class="nav__search">
141+
<input
142+
class="nav__search--input"
143+
type="search"
144+
placeholder="SEARCH"
145+
aria-label="Search"
146+
/>
147+
<button class="nav__search--button" type="submit">
148+
<i class="icon--search"></i>
149+
</button>
150+
</form>
151+
</div>
152+
</div>
153+
</nav>
154+
155+
<div class="page__container flex__container">
156+
<div class="nav__side-nav" id="nav-menu">
157+
<div class="nav flex-column nav-pills" role="tablist" aria-orientation="vertical">
158+
{% for item in nav %}
159+
{% if (item.active and item.children|length > 0) or item.url in vars['related_urls'] %}
160+
<a class="nav-link{% if item.active %} active{% endif %}" href="{{item.url}}" role="tab" aria-selected="{{item.selected}}">
161+
{{item.title}}
162+
</a>
163+
{% if item.active and item.children|length > 0 %}
164+
<div class="nav-expanded-panel">
165+
{% for child in item.children %}
166+
<a class="nav-sublink{% if child.active %} active{% endif %}" href="{{child.url}}">{{child.title}}</a>
167+
{% if child.active %}
168+
{% for grandchild in child.children %}
169+
<a class="nav-sublink2{% if grandchild.active %} active{% endif %}" href="{{grandchild.url}}">{{grandchild.title}}</a>
170+
{% endfor %}
171+
{% endif %}
172+
{% endfor %}
173+
</div>
174+
{% endif %}
175+
{% endif %}
176+
{% endfor %}
177+
</div>
178+
</div>
179+
<div class="k-main">
180+
{{main}}
82181
</div>
83-
84-
</div>
85-
86-
<div class='k-main'>
87-
{{main}}
88182
</div>
89-
90183
</div>
91-
184+
<footer>
185+
<div class="footer__container">
186+
<a href="https://policies.google.com/terms">Terms</a>
187+
<div>|</div>
188+
<a href="https://policies.google.com/privacy">Privacy</a>
189+
</div>
190+
</footer>
191+
<script src="{{base_url}}js/index.js"></script>
92192
</body>
93193

94-
<footer style="float: left; width: 100%; padding: 1em; border-top: solid 1px #bbb;">
95-
<a href="https://policies.google.com/terms">Terms</a> | <a href="https://policies.google.com/privacy">Privacy</a>
96-
</footer>
97-
98194
</html>

‎theme/css/announcement.css‎

Lines changed: 51 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
1+
@import url("index.css");
2+
3+
.codehilite code {
4+
font-family: 'Montserrat', 'Open Sans', sans-serif;
5+
}
6+
7+
.masthead {
8+
margin-top: 8rem;
9+
}
10+
111
.blog-content {
2-
text-align: justify;
3-
padding: 2em;
12+
padding: 0 2em 2em;
413
}
514

615
strong {
@@ -23,6 +32,23 @@ h3 {
2332
font-size: 1.5rem;
2433
}
2534

35+
.announcement__buttons {
36+
display: flex;
37+
flex-direction: column;
38+
justify-content: center;
39+
gap: 24px;
40+
padding: 0 calc(2em + 15px);
41+
}
42+
43+
.announcement__buttons .button__square {
44+
width: 100%;
45+
}
46+
47+
.announcement__headline {
48+
font-size: 48px;
49+
margin-bottom: 2rem;
50+
}
51+
2652
.credits {
2753
text-align: center;
2854
padding: 2em;
@@ -62,4 +88,26 @@ h3 {
6288
.subcredit-name {
6389
font-size: 0.8em;
6490
padding-top: 0;
65-
}
91+
}
92+
93+
@media only screen and (min-width: 1200px) {
94+
.announcement__buttons {
95+
flex-direction: row;
96+
}
97+
98+
.announcement__buttons .button__square {
99+
width: auto;
100+
}
101+
102+
.nav__logo {
103+
width: 193px;
104+
}
105+
106+
.nav__wrapper {
107+
max-width: 1568px;
108+
}
109+
110+
.page__container {
111+
margin-top: 0;
112+
}
113+
}

‎theme/css/colors.css‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
:root {
2+
--white:#FFFFFF;
3+
--grey: #E7E7E7;
4+
--grey-blue: #425066;
5+
6+
/* Light Colors*/
7+
--light-grey: #F3F3F3;
8+
9+
/* Dark Colors */
10+
--dark-grey: #3F3F3F;
11+
--dark-red: #AB0000;
12+
13+
/* Medium Colors */
14+
--medium-red: #D00101;
15+
--medium-grey: #DDDDDD;
16+
17+
/* Border Colors */
18+
--border-grey: #DCDCDC;
19+
--border-red: #A80000;
20+
21+
/* Shadow Colors */
22+
--shadow-grey: #9C9C9C;
23+
24+
/* Text Colors */
25+
--text-black: #292321;
26+
--text-red: #A30000;
27+
--alternate-red: #d00000;
28+
29+
/* Code Colors */
30+
--code-background: #292321;
31+
--code-foreground: #ccc;
32+
}

0 commit comments

Comments
 (0)