Infrastructure/www-2021
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

flip hero on mobile

Browse source
This commit is contained in:
Daniel Vinci 2021-04-30 12:09:46 -06:00
parent 8d42d5864c
commit 28a3744523
No known key found for this signature in database
GPG key ID: 7A700C29916C26CA
1 changed files with 48 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
src/routes/index.svelte
View file

@ -1,13 +1,46 @@
<script>
import FemtoHeader from "../components/FemtoHeader.svelte";
import Globe from "../components/Globe.svelte";
import IntroText from "../components/IntroText.svelte";
import TalkingPointContainer from "../components/TalkingPointContainer.svelte";
import TalkingPointContent from "../components/TalkingPointContent.svelte";
import TalkingPointName from "../components/TalkingPointName.svelte";
import PartnerContainer from "../components/PartnerContainer.svelte";
import FemtoHeader from '../components/FemtoHeader.svelte'
import Globe from '../components/Globe.svelte'
import IntroText from '../components/IntroText.svelte'
import TalkingPointContainer from '../components/TalkingPointContainer.svelte'
import TalkingPointContent from '../components/TalkingPointContent.svelte'
import TalkingPointName from '../components/TalkingPointName.svelte'
import PartnerContainer from '../components/PartnerContainer.svelte'
</script>
<style>
:global(.site a) {
color: #72bbd9;
}
.site {
margin-left: auto;
margin-right: auto;
max-width: 1024px;
padding-left: 1em;
padding-right: 1em;
}
.hero {
margin-top: 3em;
margin-bottom: 3em;
background-color: aqua;
}
.hero .container {
background-color: aquamarine;
display: grid;
grid-template-columns: 400px auto;
grid-template-rows: auto;
}
@media only screen and (max-device-width: 900px) and (orientation: portrait) {
.hero .container {
grid-template-columns: auto;
grid-template-rows: 400px auto;
}
}
</style>
<svelte:head>
<title>FemtoStar</title>
</svelte:head>
@ -46,14 +79,15 @@
down to the lowest level details. We couldn't violate your privacy even
if we wanted to.
</p>
<p><a rel="prefetch" href="./privacy-by-design">Learn more →</a></p>
<p>
<a rel="prefetch" href="./privacy-by-design">Learn more →</a>
</p>
</TalkingPointContent>
</TalkingPointContainer>
<TalkingPointContainer>
<TalkingPointName
text="Free and open-source technology, built by a global community"
/>
text="Free and open-source technology, built by a global community" />
<TalkingPointContent>
<p>
FemtoStar is free and open-source technology. This goes for software and
@ -62,37 +96,11 @@
your terminal lives up to its privacy and security claims, the source is
freely available to use, read, or modify.
</p>
<p><a rel="prefetch" href="./free-open-source">Learn more →</a></p>
<p>
<a rel="prefetch" href="./free-open-source">Learn more →</a>
</p>
</TalkingPointContent>
</TalkingPointContainer>
<PartnerContainer>
</PartnerContainer>
<PartnerContainer />
</div>
<style>
:global(.site a) {
color: #72bbd9;
}
.site {
margin-left: auto;
margin-right: auto;
max-width: 1024px;
padding-left: 1em;
padding-right: 1em;
}
.hero {
margin-top: 3.0em;
margin-bottom: 3.0em;
background-color: aqua;
}
.hero .container {
background-color: aquamarine;
display: grid;
grid-template-columns: 400px auto;
grid-template-rows: auto;
}
</style>