SiteWebAstrolabe/src/scss/components/_presentation.scss

110 lines
1.6 KiB
SCSS
Raw Normal View History

2020-06-19 23:47:44 +02:00
.presentation {
article {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
grid-column-gap: 2.125rem;
grid-row-gap: 2.125rem;
2020-07-14 20:10:42 +02:00
margin-bottom: 16rem;
2020-06-19 23:47:44 +02:00
&:nth-child(2n + 1) {
.content {
grid-column: 1;
}
figure {
grid-column: 2;
}
}
&:nth-child(2n) {
.content {
grid-column: 2;
grid-row: 1;
}
}
}
.content {
h2 {
font-size: 2.125rem;
margin-bottom: 2rem;
+ p {
font-size: 1.25rem;
}
}
2020-07-08 17:06:07 +02:00
+ figure,
+ p {
display: flex;
flex-direction: column;
align-items: center;
img {
margin-top: 3.5rem;
}
2020-06-19 23:47:44 +02:00
2020-07-08 17:06:07 +02:00
.btn {
margin-top: 7rem;
}
2020-06-19 23:47:44 +02:00
}
}
2020-07-08 17:06:07 +02:00
2020-07-13 20:36:44 +02:00
.side-info {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
img {
margin-bottom: 1.5rem;
}
}
.profile-preview {
display: flex;
list-style: none;
margin-top: auto;
li + li {
margin-left: -2rem;
}
img {
width: 10rem;
border-radius: 50%;
border: 2px solid;
color: var(--color-white);
background-color: var(--color-white);
}
}
2020-06-19 23:47:44 +02:00
}
2020-07-17 13:33:39 +02:00
@media (max-width: 575.98px) {
.presentation {
article {
display: block;
margin-bottom: 4rem;
}
.content {
h2 {
font-size: 1.6rem;
+ p {
font-size: 1rem;
}
}
}
.side-info {
margin-top: 2rem;
img {
margin-bottom: 2.5rem;
}
}
}
}