forest-fixes #1
|
@ -44,14 +44,14 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="splash-image-content">
|
<div class="splash-image-content">
|
||||||
<div>
|
<div class="position-absolute">
|
||||||
<img
|
<img
|
||||||
alt="technology food pyramid showing serverscoop at the base, with operating systems and applications on top"
|
alt="technology food pyramid showing serverscoop at the base, with operating systems and applications on top"
|
||||||
src="static/pyramid.svg"
|
src="static/pyramid.svg"
|
||||||
class="pyramid-image"
|
class="pyramid-image"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="position-absolute">
|
||||||
<img
|
<img
|
||||||
alt="A cute looking person squatting like a hipster"
|
alt="A cute looking person squatting like a hipster"
|
||||||
src="static/squatting-person.svg"
|
src="static/squatting-person.svg"
|
||||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
After Width: | Height: | Size: 47 KiB |
|
@ -73,6 +73,11 @@ header a {
|
||||||
margin: 1.2rem;
|
margin: 1.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
header a:first-of-type {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
header img {
|
header img {
|
||||||
width: 316px;
|
width: 316px;
|
||||||
}
|
}
|
||||||
|
@ -81,6 +86,7 @@ header img {
|
||||||
header {
|
header {
|
||||||
margin-top: 0.4rem;
|
margin-top: 0.4rem;
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
|
margin-left: 5vw;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -92,15 +98,16 @@ header img {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
header .header-links {
|
header {
|
||||||
width: 360px;
|
width: 100%;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
header img {
|
||||||
|
width: 340px;
|
||||||
}
|
}
|
||||||
header .header-links {
|
header .header-links {
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
}
|
}
|
||||||
header .header-links a:first-of-type {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.splash {
|
.splash {
|
||||||
|
@ -131,9 +138,7 @@ header img {
|
||||||
}
|
}
|
||||||
|
|
||||||
.pyramid-image {
|
.pyramid-image {
|
||||||
position: absolute;
|
position: relative;
|
||||||
top: 180px;
|
|
||||||
left: 800px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.squatting-person {
|
.squatting-person {
|
||||||
|
@ -144,14 +149,11 @@ header img {
|
||||||
.splash > .button-links {
|
.splash > .button-links {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
/* on large screens, move the logo & splash stuff away from the left gutter a bit*/
|
.splash-text-content h1,
|
||||||
@media screen and (min-width: 1280px) {
|
.splash-text-content p,
|
||||||
.splash-text-content h1,
|
.button-links,
|
||||||
.splash-text-content p,
|
header {
|
||||||
.button-links,
|
margin-left: 3vw;
|
||||||
header img {
|
|
||||||
margin-left: 2rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* on smaller screens move the button links out of the splash, below the pyramid image*/
|
/* on smaller screens move the button links out of the splash, below the pyramid image*/
|
||||||
|
@ -181,7 +183,7 @@ header img {
|
||||||
}
|
}
|
||||||
.splash > .button-links {
|
.splash > .button-links {
|
||||||
margin: 40px;
|
margin: 40px;
|
||||||
margin-bottom: 80px;
|
margin-bottom: 2rem;
|
||||||
margin-top: 100px;
|
margin-top: 100px;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
@ -190,32 +192,31 @@ header img {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
.splash {
|
|
||||||
width: var(--width-mobile);
|
|
||||||
}
|
|
||||||
.splash-text-content {
|
.splash-text-content {
|
||||||
text-align: initial;
|
text-align: initial;
|
||||||
|
align-items: initial;
|
||||||
}
|
}
|
||||||
.splash p {
|
.splash p {
|
||||||
max-width: initial;
|
max-width: initial;
|
||||||
}
|
}
|
||||||
.splash-image-content {
|
.splash-image-content {
|
||||||
height: 300px;
|
height: 60vw;
|
||||||
}
|
}
|
||||||
.pyramid-image {
|
.pyramid-image {
|
||||||
position: absolute;
|
position: relative;
|
||||||
width: 420px;
|
width: 85vw;
|
||||||
top: 460px;
|
right: 3vw;
|
||||||
left: 100px;
|
|
||||||
}
|
}
|
||||||
.squatting-person {
|
.squatting-person {
|
||||||
top: 240px;
|
top: 42vw;
|
||||||
right: 320px;
|
right: 74vw;
|
||||||
width: 100px;
|
width: 23vw;
|
||||||
}
|
}
|
||||||
.splash > .button-links {
|
.splash > .button-links {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
|
margin-bottom: 1rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -228,6 +229,9 @@ header img {
|
||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
margin-right: 30px;
|
margin-right: 30px;
|
||||||
}
|
}
|
||||||
|
.button-link:last-of-type {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.button-link.primary {
|
.button-link.primary {
|
||||||
background: var(--accent);
|
background: var(--accent);
|
||||||
|
@ -314,6 +318,10 @@ header img {
|
||||||
width: 150px;
|
width: 150px;
|
||||||
top: -30px;
|
top: -30px;
|
||||||
}
|
}
|
||||||
|
.main-content h1 {
|
||||||
|
max-width: 85%;
|
||||||
|
font-size: var(--font-size-l);
|
||||||
|
}
|
||||||
.main-content-footer p {
|
.main-content-footer p {
|
||||||
max-width: 70%;
|
max-width: 70%;
|
||||||
}
|
}
|
||||||
|
@ -322,9 +330,7 @@ header img {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
.main-content h1 {
|
|
||||||
font-size: var(--font-size-l);
|
|
||||||
}
|
|
||||||
.boxes-container.horizontal {
|
.boxes-container.horizontal {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue