Update button widths for responsive sizing (#31085)

This commit is contained in:
Cody Baker 2021-11-05 00:55:59 -06:00 committed by GitHub
parent 63c10abebe
commit 4fbfc0b447
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 34 additions and 15 deletions

File diff suppressed because one or more lines are too long

View File

@ -1,13 +1,32 @@
.btns {
align-items: center;
display: flex;
display: grid;
column-gap: $spacer * 3;
row-gap: $spacer * 2;
grid-auto-flow: column;
justify-content: center;
.btn + .btn {
margin-left: $spacer * 3;
}
.btn-lg + .btn-lg {
margin-left: $spacer * 5;
@media screen and (max-width: 767.98px) {
grid-auto-flow: row;
}
}
.btns.btns-lg {
column-gap: $spacer * 5;
}
.btns.is-2 {
grid-template-columns: 1fr 1fr;
@media screen and (max-width: 767.98px) {
grid-template-columns: 1fr;
}
}
.btns.is-3 {
grid-template-columns: 1fr 1fr 1fr;
@media screen and (max-width: 767.98px) {
grid-template-columns: 1fr;
}
}

View File

@ -10,9 +10,9 @@
{{ _('ClickHouse® is an open-source, high performance columnar OLAP database management system for real-time analytics using SQL.') }}
</p>
<div class="btns mb-3 mb-xl-5" role="group">
<a href="https://clickhouse.com/learn/lessons/whatsnew-clickhouse-21.10/" class="btn btn-lg btn-primary" role="button" style="width: 220px;">Learn More</a>
<a href="https://www.youtube.com/watch?v=b9MeoOtAivQ&ab_channel=ClickHouse" class="btn btn-lg btn-outline-primary" role="button" rel="external nofollow" target="_blank" style="width: 220px;">Release Webinar</a>
<div class="btns btns-lg is-2 mx-auto mb-3 mb-xl-5" role="group" style="max-width:480px;">
<a href="https://clickhouse.com/learn/lessons/whatsnew-clickhouse-21.10/" class="btn btn-lg btn-primary" role="button">Learn More</a>
<a href="https://www.youtube.com/watch?v=b9MeoOtAivQ&ab_channel=ClickHouse" class="btn btn-lg btn-outline-primary" role="button" rel="external nofollow" target="_blank">Release Webinar</a>
</div>
<p class="d-flex justify-content-center mb-0">
@ -32,10 +32,10 @@
<p class="font-lg text-center mb-6 mx-auto">Raising the Companys Valuation to $2B</p>
<div class="btns" role="group">
<a href="/blog/en/2021/clickhouse-raises-250m-series-b/" class="btn btn-secondary" role="button" style="width: 228px;">Read the Blog Post</a>
<a href="https://www.bloomberg.com/news/articles/2021-10-28/clickhouse-valued-at-2-billion-in-round-after-yandex-spinout" class="btn btn-outline-secondary" role="button" rel="external nofollow" target="_blank" style="width: 228px;">Read the News</a>
<a href="https://www.businesswire.com/news/home/20211028005287/en" class="btn btn-outline-secondary" role="button" rel="external nofollow" target="_blank" style="width: 228px;">Read the Press Release</a>
<div class="btns is-3 mx-auto" role="group" style="max-width:740px;">
<a href="/blog/en/2021/clickhouse-raises-250m-series-b/" class="btn btn-secondary" role="button">Read the Blog Post</a>
<a href="https://www.bloomberg.com/news/articles/2021-10-28/clickhouse-valued-at-2-billion-in-round-after-yandex-spinout" class="btn btn-outline-secondary" role="button" rel="external nofollow" target="_blank">Read the News</a>
<a href="https://www.businesswire.com/news/home/20211028005287/en" class="btn btn-outline-secondary" role="button" rel="external nofollow" target="_blank">Read the Press Release</a>
</div>
</div>