@ -17,6 +17,12 @@
< / script >
< style >
main {
max-width: 100vw;
min-height: unset;
margin-bottom: unset;
}
h1 {
font-size: 3em;
}
@ -48,14 +54,6 @@
}
@media only screen and (max-width: 550px) {
modal {
display: flex;
justify-content: center;
align-items: start;
}
}
hero {
--h: 600px;
--w: 100vw;
@ -104,10 +102,12 @@
}
text-photo > photo {
--w: min( 400px, 50vw) ;
--w: 400px;
display: flex;
justify-content: stretch;
max-width: var(--w);
min-width: var(--w);
width: var(--w);
background-color: var(--value6);
}
@ -162,11 +162,41 @@
feature-grid {
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 >
< Layout bare = { true } fullwidth= { true } >
< main >
< hero >
< h1 class = "center-text" > The Bandolier< / h1 >
< 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 >
< / span > < / callout >
< / modal >
< / main >
< / Layout >