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> <script>
import FemtoHeader from "../components/FemtoHeader.svelte"; import FemtoHeader from '../components/FemtoHeader.svelte'
import Globe from "../components/Globe.svelte"; import Globe from '../components/Globe.svelte'
import IntroText from "../components/IntroText.svelte"; import IntroText from '../components/IntroText.svelte'
import TalkingPointContainer from "../components/TalkingPointContainer.svelte"; import TalkingPointContainer from '../components/TalkingPointContainer.svelte'
import TalkingPointContent from "../components/TalkingPointContent.svelte"; import TalkingPointContent from '../components/TalkingPointContent.svelte'
import TalkingPointName from "../components/TalkingPointName.svelte"; import TalkingPointName from '../components/TalkingPointName.svelte'
import PartnerContainer from "../components/PartnerContainer.svelte"; import PartnerContainer from '../components/PartnerContainer.svelte'
</script> </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> <svelte:head>
<title>FemtoStar</title> <title>FemtoStar</title>
</svelte:head> </svelte:head>
@ -46,14 +79,15 @@
down to the lowest level details. We couldn't violate your privacy even down to the lowest level details. We couldn't violate your privacy even
if we wanted to. if we wanted to.
</p> </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> </TalkingPointContent>
</TalkingPointContainer> </TalkingPointContainer>
<TalkingPointContainer> <TalkingPointContainer>
<TalkingPointName <TalkingPointName
text="Free and open-source technology, built by a global community" text="Free and open-source technology, built by a global community" />
/>
<TalkingPointContent> <TalkingPointContent>
<p> <p>
FemtoStar is free and open-source technology. This goes for software and 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 your terminal lives up to its privacy and security claims, the source is
freely available to use, read, or modify. freely available to use, read, or modify.
</p> </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> </TalkingPointContent>
</TalkingPointContainer> </TalkingPointContainer>
<PartnerContainer> <PartnerContainer />
</PartnerContainer>
</div> </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>