Skip to content

Commit 9d20e65

Browse files
sriumcpsriumcp
authored
Slack unfurl and landing page improvements (#704)
* slack unfurl title * slack unfurl
1 parent b1235b3 commit 9d20e65

File tree

4 files changed

+179
-13
lines changed

4 files changed

+179
-13
lines changed

‎mkdocs/docs/stylesheets/main.css

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -162,6 +162,61 @@
162162
background-color: #fc058047;
163163
}
164164
}
165+
.cards {
166+
padding-top: 1rem;
167+
}
168+
.cards .md-grid h1 {
169+
text-align: center;
170+
color: #333;
171+
}
172+
[data-md-color-scheme=slate] .cards .md-grid h1 {
173+
color: #fff;
174+
}
175+
.cards:focus, .cards:hover {
176+
background-color: #7085fb47;
177+
border-radius: 3px;
178+
}
179+
[data-md-color-scheme=slate] .cards:focus, [data-md-color-scheme=slate] .cards:hover {
180+
background-color: #fb69b247;
181+
}
182+
183+
.tx-container {
184+
margin-top: 2rem;
185+
background: linear-gradient(to bottom, var(--md-primary-fg-color), #a63fd9 99%, var(--md-default-bg-color) 99%);
186+
}
187+
[data-md-color-scheme=slate] .tx-container {
188+
background: linear-gradient(to bottom, var(--md-primary-fg-color), #a63fd9 99%, var(--md-default-bg-color) 99%);
189+
}
190+
.tx-container .tx-hero {
191+
color: var(--md-primary-bg-color);
192+
}
193+
@media screen and (min-width: 50em) {
194+
.tx-container .tx-hero {
195+
display: flex;
196+
flex-wrap: wrap;
197+
}
198+
.tx-container .tx-hero .tx-card {
199+
width: 50%;
200+
}
201+
}
202+
.tx-container .tx-hero .tx-card {
203+
padding-left: 2.5rem;
204+
padding-right: 2.5rem;
205+
}
206+
.tx-container .tx-hero .tx-card .md-button {
207+
color: var(--md-primary-bg-color);
208+
}
209+
.tx-container .tx-hero .tx-card .md-button:focus, .tx-container .tx-hero .tx-card .md-button:hover {
210+
color: var(--md-default-bg-color);
211+
background-color: var(--md-accent-fg-color);
212+
border-color: var(--md-accent-fg-color);
213+
}
214+
.tx-container .tx-hero .tx-card .md-button--primary {
215+
color: #894da8;
216+
background-color: var(--md-primary-bg-color);
217+
border-color: var(--md-primary-bg-color);
218+
}
219+
165220
.md-tabs__link {
166221
font-size: 0.8rem;
167222
}

‎mkdocs/overrides/home.html

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,8 +89,10 @@ <h2>Iter8 makes it easy to <strong>optimize business metrics</strong> and <stron
8989
</section>
9090

9191

92-
<section>
92+
<section class="cards">
9393
<div class="md-grid md-typeset">
94+
<h1>Why Iter8?</h1>
95+
9496

9597
<!-- Main site box descriptions -->
9698
<div class="top-hr">
@@ -160,6 +162,35 @@ <h2>
160162
</div>
161163
</section>
162164

165+
<!-- Hero for landing page -->
166+
<section class="tx-container">
167+
<div class="md-grid md-typeset">
168+
169+
<div class="tx-hero">
170+
<div class=tx-card>
171+
<h2>Talk to us on slack</h2>
172+
<a href="https://join.slack.com/t/iter8-tools/shared_invite/zt-awl2se8i-L0pZCpuHntpPejxzLicbmw" title="Slack invite"
173+
class="md-button md-button--primary">
174+
Slack
175+
</a>
176+
<p>Interested in learning more, speaking to other contributors, or finding answers?</p>
177+
178+
</div>
179+
180+
<div class=tx-card>
181+
<h2>Contributors welcome</h2>
182+
<a href="https://iter8.tools/latest/contributing/" title="Contributing guide"
183+
class="md-button md-button--primary">
184+
Contribute
185+
</a>
186+
<p>Want to join the fun? New users and contributors are always welcome!</p>
187+
188+
</div>
189+
</div>
190+
</div>
191+
</section>
192+
193+
163194
{% endblock %}
164195

165196
<!-- Content -->

‎mkdocs/overrides/main.html

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
<!-- Open graph meta tags -->
2929
<meta property="og:type" content="website" />
3030
<meta property="og:site_name" content="Iter8"/>
31-
<meta property="og:title" content="The Kubernetes experimentation platform" />
31+
<meta property="og:title" content="{{ config.extra.title }}" />
3232
<meta property="og:description" content="{{ config.site_description }}" />
3333
<meta property="og:url" content="https://iter8.tools" />
3434
<meta property="og:image" content="https://iter8.tools/0.5/images/illustration.png" />
@@ -37,7 +37,7 @@
3737
<meta name="twitter:card" content="summary_large_image" />
3838
<meta name="twitter:url" content="https://iter8.tools" />
3939
<meta name="twitter:creator" content="{{ config.site_author }}" />
40-
<meta name="twitter:title" content="The Kubernetes experimentation platform" />
40+
<meta name="twitter:title" content="{{ config.extra.title }}" />
4141
<meta name="twitter:description" content="{{ config.site_description }}" />
4242
<meta name="twitter:image" content="https://iter8.tools/0.5/images/illustration.png" />
4343
<meta name="twitter:label1" value="K8s stacks" />
@@ -50,16 +50,6 @@
5050
/>
5151
{% endblock %}
5252

53-
<!-- Announcement bar -->
54-
{% block announce %}
55-
<strong>Iter8</strong> at <a href="https://sched.co/iE2l">KubeCon + CloudNativeCon Europe 2021</a>. For updates and support,
56-
<a href="https://join.slack.com/t/iter8-tools/shared_invite/zt-awl2se8i-L0pZCpuHntpPejxzLicbmw">
57-
join <strong>Iter8</strong> workspace on <span class="twemoji">
58-
{% include ".icons/fontawesome/brands/slack.svg" %} </span>
59-
slack.
60-
</a>
61-
{% endblock %}
62-
6353
<!-- Theme-related JavaScript -->
6454
{% block scripts %}
6555
{{ super() }}

‎src/main/layout/_cards.scss

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,4 +75,94 @@
7575
}
7676

7777
}
78+
}
79+
80+
// section headers
81+
.cards {
82+
padding-top: px2rem(20px);
83+
.md-grid {
84+
// Hero headline
85+
h1 {
86+
text-align: center;
87+
color: #333;
88+
89+
// Adjust for slate theme
90+
[data-md-color-scheme="slate"] & {
91+
color: #fff;
92+
}
93+
}
94+
95+
}
96+
97+
&:focus,
98+
&:hover {
99+
background-color: #7085fb47;
100+
border-radius: 3px;
101+
102+
// Adjust for slate theme
103+
[data-md-color-scheme="slate"] & {
104+
background-color: #fb69b247;
105+
}
106+
}
107+
108+
}
109+
110+
.tx-container {
111+
margin-top: px2rem(40px);
112+
background: linear-gradient(
113+
to bottom,
114+
var(--md-primary-fg-color),
115+
hsla(280, 67%, 55%, 1) 99%,
116+
var(--md-default-bg-color) 99%
117+
);
118+
119+
// Adjust background for slate theme
120+
[data-md-color-scheme="slate"] & {
121+
background: linear-gradient(
122+
to bottom,
123+
var(--md-primary-fg-color),
124+
hsla(280, 67%, 55%, 1) 99%,
125+
var(--md-default-bg-color) 99%
126+
);
127+
}
128+
129+
130+
.tx-hero {
131+
color: var(--md-primary-bg-color);
132+
133+
@media screen and (min-width:50.0em) {
134+
display: flex;
135+
flex-wrap: wrap;
136+
137+
.tx-card {
138+
width: 50%;
139+
}
140+
}
141+
142+
143+
.tx-card {
144+
padding-left: px2rem(50px);
145+
padding-right: px2rem(50px);
146+
147+
// Button
148+
.md-button {
149+
color: var(--md-primary-bg-color);
150+
151+
// Button on focus/hover
152+
&:focus,
153+
&:hover {
154+
color: var(--md-default-bg-color);
155+
background-color: var(--md-accent-fg-color);
156+
border-color: var(--md-accent-fg-color);
157+
}
158+
159+
// Primary button
160+
&--primary {
161+
color: hsla(280deg, 37%, 48%, 1);
162+
background-color: var(--md-primary-bg-color);
163+
border-color: var(--md-primary-bg-color);
164+
}
165+
}
166+
}
167+
}
78168
}

0 commit comments

Comments
 (0)