Improve the rendering of the landing page for a few different sizes.

main
Zed A. Shaw 2 years ago
parent 5be8795113
commit e7f3009a73
  1. 49
      rendered/pages/index.svelte

@ -17,6 +17,12 @@
</script> </script>
<style> <style>
main {
max-width: 100vw;
min-height: unset;
margin-bottom: unset;
}
h1 { h1 {
font-size: 3em; font-size: 3em;
} }
@ -48,14 +54,6 @@
} }
@media only screen and (max-width: 550px) {
modal {
display: flex;
justify-content: center;
align-items: start;
}
}
hero { hero {
--h: 600px; --h: 600px;
--w: 100vw; --w: 100vw;
@ -104,10 +102,12 @@
} }
text-photo > photo { text-photo > photo {
--w: min(400px, 50vw); --w: 400px;
display: flex; display: flex;
justify-content: stretch; justify-content: stretch;
max-width: var(--w);
min-width: var(--w); min-width: var(--w);
width: var(--w);
background-color: var(--value6); background-color: var(--value6);
} }
@ -162,11 +162,41 @@
feature-grid { feature-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
text-photo > photo {
display: none;
}
}
@media only screen and (max-width: 550px) {
modal {
display: flex;
justify-content: center;
align-items: start;
}
}
@media only screen and (min-width: 1080px) {
text-photo {
justify-content: center;
} }
text-photo > div {
max-width: var(--width-content);
}
feature-grid,
text-center {
max-width: calc(var(--width-content) + 400px); /* content width plus photo width */
align-self: center;
justify-self: center;
border: 1px solid red;
}
}
</style> </style>
<Layout bare={ true } fullwidth={true}> <Layout bare={ true } fullwidth={true}>
<main>
<hero> <hero>
<h1 class="center-text">The Bandolier</h1> <h1 class="center-text">The Bandolier</h1>
<h2 class="center-text">An educational fullstack web development framework.</h2> <h2 class="center-text">An educational fullstack web development framework.</h2>
@ -271,4 +301,5 @@ npm run DANGER_ADMIN
<p>This app is a work in progress so warping it to your phone isn't done yet. You can just go straight to <a href="/client/#/">the docs</a> and when you're serious go find a real computer and stop making people support your phone for reading professional documentation.</p> <p>This app is a work in progress so warping it to your phone isn't done yet. You can just go straight to <a href="/client/#/">the docs</a> and when you're serious go find a real computer and stop making people support your phone for reading professional documentation.</p>
</span></callout> </span></callout>
</modal> </modal>
</main>
</Layout> </Layout>

Loading…
Cancel
Save