thevar1able/ClickHouse
1
0
Fork 0
mirror of https://github.com/ClickHouse/ClickHouse.git synced 2024-11-25 00:52:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update button widths for responsive sizing (#31085)

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
website/css/main.css
View File

File diff suppressed because one or more lines are too long

33
website/src/scss/components/_btns.scss
View File

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

14
website/templates/index/hero.html
View File

@ -10,9 +10,9 @@
{{ _('ClickHouse® is an open-source, high performance columnar OLAP database management system for real-time analytics using SQL.') }} {{ _('ClickHouse® is an open-source, high performance columnar OLAP database management system for real-time analytics using SQL.') }}
</p> </p>
<div class="btns mb-3 mb-xl-5" role="group"> <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" style="width: 220px;">Learn More</a> <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" style="width: 220px;">Release Webinar</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> </div>
<p class="d-flex justify-content-center mb-0"> <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 Company’s Valuation to $2B</p> <p class="font-lg text-center mb-6 mx-auto">Raising the Company’s Valuation to $2B</p>
<div class="btns" role="group"> <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" style="width: 228px;">Read the Blog Post</a> <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" style="width: 228px;">Read the News</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" style="width: 228px;">Read the Press Release</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>
</div> </div>