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