mirror of
https://github.com/PrimalHQ/primal-web-app.git
synced 2024-10-01 17:31:13 +00:00
Small screen downloads
This commit is contained in:
parent
7f9476c52e
commit
9a1ed492a0
@ -203,6 +203,63 @@
|
||||
}
|
||||
}
|
||||
|
||||
.downloadsExtra {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1087px) {
|
||||
.downloadsExtra {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding-left: 42px;
|
||||
margin-bottom: 24px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid var(--subtile-devider);
|
||||
|
||||
.title {
|
||||
color: var(--text-primary);
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
text-transform: capitalize;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.list {
|
||||
>div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.githubIcon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
margin-right: 9px;
|
||||
background-image: url( '../assets/icons/github.svg');
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.githubIconLight {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
margin-right: 9px;
|
||||
background-image: url( '../assets/icons/github_light.svg');
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
|
||||
>a {
|
||||
color: var(--text-secondary-2);
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 720px) {
|
||||
|
||||
.callToAction {
|
||||
@ -214,12 +271,19 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.promoHolder {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.linkHolder {
|
||||
margin-top: 20px;
|
||||
margin-top: 0;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding-inline: 28px;
|
||||
|
||||
>div {
|
||||
width: 100%;
|
||||
.desktopCTA {
|
||||
display: none;
|
||||
}
|
||||
@ -231,7 +295,6 @@
|
||||
height: 63px;
|
||||
}
|
||||
}
|
||||
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@ -254,7 +317,7 @@
|
||||
|
||||
.playStore {
|
||||
margin-top: 4px;
|
||||
margin-bottom: 250px;
|
||||
margin-bottom: 24px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.callToActionAndroid {
|
||||
@ -267,4 +330,8 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.downloadsExtra {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
}
|
||||
|
@ -161,6 +161,49 @@ const Downloads: Component = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class={styles.downloadsExtra}>
|
||||
|
||||
<div class={styles.title}>
|
||||
{intl.formatMessage(t.links.title)}
|
||||
</div>
|
||||
<div class={styles.list}>
|
||||
<ExternalLink
|
||||
darkIcon={gitHubLight}
|
||||
lightIcon={gitHubDark}
|
||||
label={intl.formatMessage(t.links.webApp)}
|
||||
href='https://github.com/PrimalHQ/primal-web-app'
|
||||
/>
|
||||
|
||||
<ExternalLink
|
||||
darkIcon={gitHubLight}
|
||||
lightIcon={gitHubDark}
|
||||
label={intl.formatMessage(t.links.iosApp)}
|
||||
href='https://github.com/PrimalHQ/primal-ios-app'
|
||||
/>
|
||||
|
||||
<ExternalLink
|
||||
darkIcon={gitHubLight}
|
||||
lightIcon={gitHubDark}
|
||||
label={intl.formatMessage(t.links.andApp)}
|
||||
href='https://github.com/PrimalHQ/primal-android-app'
|
||||
/>
|
||||
|
||||
<ExternalLink
|
||||
darkIcon={gitHubLight}
|
||||
lightIcon={gitHubDark}
|
||||
label={intl.formatMessage(t.links.cachingService)}
|
||||
href='https://github.com/PrimalHQ/primal-caching-service'
|
||||
/>
|
||||
|
||||
<ExternalLink
|
||||
darkIcon={gitHubLight}
|
||||
lightIcon={gitHubDark}
|
||||
label={intl.formatMessage(t.links.primalServer)}
|
||||
href='https://github.com/PrimalHQ/primal-server'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user