Elgato_dark/fleet
1
0
Fork 0
mirror of https://github.com/fleetdm/fleet synced 2026-05-23 17:08:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 83

Update twitter card layout on fleetdm.com homepage (#4350)

Browse source 
* update twitter cards styles

* lint fixes
This commit is contained in:
eashaw 2022-02-24 20:30:21 -06:00 committed by GitHub
parent 267a670eb2
commit 680f16ca15
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 64 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
website/assets/styles/pages/homepage.less vendored
View file

@ -69,28 +69,19 @@
}
}
.tweets {
[purpose='tweets'] {
max-width: 1200px;
}
.tweet {
flex: 0 1 380px;
text-align: left;
background: #FFFFFF;
padding: 40px;
margin-bottom: 30px;
border: 1px solid #E2E4EA;
box-sizing: border-box;
box-shadow: 0px 7px 3px -5px rgba(25, 33, 71, 0.1);
border-radius: 16px;
&[purpose='top-row'] {
min-height: 390px;
}
&[purpose='middle-row'] {
min-height: 290px;
}
&[purpose='bottom-row'] {
min-height: 340px;
padding-bottom: 50px;
box-sizing: content-box;
[purpose='tweet-card'], [purpose='tweet-card-bottom-row'] {
text-align: left;
background: #FFFFFF;
padding: 40px;
margin-bottom: 30px;
border: 1px solid #E2E4EA;
box-sizing: border-box;
box-shadow: 0px 7px 3px 0px rgba(25, 33, 71, 0.1);
border-radius: 16px;
}
}
@ -239,16 +230,34 @@
}
@media (min-width: 1200px) {
[purpose='tweets'] {
padding-left: 0px;
padding-right: 0px;
[purpose='tweet-card'] {
margin-left: 15px;
margin-right: 15px;
flex: 0 1 326px;
}
[purpose='tweet-card-bottom-row'] {
margin-left: 15px;
margin-right: 15px;
flex: 0 1 380px;
}
}
[purpose='demo-cta'] {
max-width: 960px;
}
}
@media (max-width: 1200px) {
.tweets {
max-width: 390px;
&[purpose='top-row'], [purpose='middle-row'], [purpose='bottom-row'] {
min-height: auto;
[purpose='tweets'] {
padding-left: 72px;
padding-right: 72px;
[purpose='tweet-card'], [purpose='tweet-card-bottom-row'] {
flex: 1 1 360px;
margin-bottom: 15px;
margin-left: 8px;
margin-right: 8px;
}
}
[purpose='demo-cta-container'] {
@ -257,6 +266,7 @@
}
}
@media (min-width: 1024px) {
[purpose='demo-cta'] {
[purpose='demo-cta-text' ] {
@ -264,7 +274,12 @@
}
}
}
@media (max-width: 994px) {
@media (max-width: 990px) {
[purpose='tweets'] {
[purpose='tweet-card'], [purpose='tweet-card-bottom-row'] {
flex: 1 1 295px;
}
}
[purpose='demo-cta-container'] {
padding-left: 45px;
padding-right: 45px;
@ -291,6 +306,13 @@
}
@media (max-width: 768px) {
[purpose='tweets'] {
padding-left: 52px;
padding-right: 52px;
[purpose='tweet-card'], [purpose='tweet-card-bottom-row'] {
flex: 1 1 316px;
}
}
.hero-clouds {
background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 23%, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0) 100%);
}
@ -327,6 +349,13 @@
padding-left: 20px;
padding-right: 20px;
}
[purpose='tweets'] {
padding-left: 16px;
padding-right: 16px;
[purpose='tweet-card'], [purpose='tweet-card-bottom-row'] {
margin-bottom: 30px;
}
}
}
@media (max-width: 355px) {

18
website/views/pages/homepage.ejs vendored
View file

@ -173,8 +173,8 @@
<p style="max-width: 860px" class="px-3 px-xs-5 px-md-4 mx-auto">
That’s good news, since it means there are lots of other developers and security practitioners talking about Fleet, dreaming up features, and contributing patches.
</p>
<div class="tweets d-flex flex-wrap justify-content-center align-items-start px-2 pt-3 pt-lg-5 pb-5 mx-auto">
<div purpose="top-row" class="tweet container">
<div purpose="tweets" class="d-flex card-deck justify-content-center pt-5 mx-auto">
<div purpose="tweet-card" class="card ">
<div class="mb-4">
<a href="https://twitter.com/osquery"><img width="140" height="36" alt="osquery logo" src="/images/social-proof-logo-osquery-140x36@2x.png"/></a>
</div>
@ -186,7 +186,7 @@
</div>
</div>
</div>
<div purpose="top-row" class="tweet container">
<div purpose="tweet-card" class="card">
<div class="mb-4">
<a href="https://twitter.com/Wayfair"><img width="136" height="32" alt="Wayfair logo" src="/images/social-proof-logo-wayfair-136x32@2x.png"/></a>
</div>
@ -199,7 +199,7 @@
</div>
</div>
</div>
<div purpose="top-row" class="tweet container">
<div purpose="tweet-card" class="card ">
<div class="mb-4">
<a href="https://twitter.com/SnowflakeDB"><img width="153" height="38" alt="Snowflake logo" src="/images/social-proof-logo-snowflake-153x38@2x.png"/></a>
</div>
@ -211,7 +211,7 @@
</div>
</div>
</div>
<div purpose="middle-row" class="tweet container">
<div purpose="tweet-card" class="card ">
<div class="mb-4">
<a href="https://twitter.com/Uber"><img width="87" height="38" alt="Uber logo" src="/images/social-proof-logo-uber-87x38@2x.png"/></a>
</div>
@ -223,7 +223,7 @@
</div>
</div>
</div>
<div purpose="middle-row" class="tweet container">
<div purpose="tweet-card" class="card">
<div class="mb-4">
<a href="https://twitter.com/Square"><img width="131" height="38" alt="Square logo" src="/images/social-proof-logo-square-131x38@2x.png"/></a>
</div>
@ -235,7 +235,7 @@
</div>
</div>
</div>
<div purpose="middle-row" class="tweet container">
<div purpose="tweet-card" class="card ">
<div class="mb-4">
<a href="https://twitter.com/atlassian"><img width="162" height="20" alt="Atlassian logo" src="/images/social-proof-logo-atlassian-162x20@2x.png"/></a>
</div>
@ -247,7 +247,7 @@
</div>
</div>
</div>
<div purpose="bottom-row" class="tweet container mr-0 mr-xl-2">
<div purpose="tweet-card-bottom-row" class="card ">
<div class="mb-4">
<a href="https://twitter.com/comcast"><img width="107" height="38" alt="Comcast logo" src="/images/social-proof-logo-comcast-107x38.png"/></a>
</div>
@ -259,7 +259,7 @@
</div>
</div>
</div>
<div purpose="bottom-row" class="tweet container ml-0 ml-xl-2">
<div purpose="tweet-card-bottom-row" class="card ">
<div class="mb-4">
<a href="https://twitter.com/versia"><img width="90" height="38" alt="Versia logo" src="/images/social-proof-logo-versia-90x38@2x.png"/></a>
</div>