pagesassos/server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Activity

feat: organization page responsive

Browse source
This commit is contained in:
Matthieu Bessat 2020-07-05 15:03:30 +02:00
parent cdb197803c
commit bc2d9a7247
2 changed files with 96 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
static/assets/organization.css
View file

@ -13,6 +13,10 @@
font-size: 1.2em;
}
.header-title {
text-align: right;
}
.return {
display: flex;
align-items: center;
@ -115,6 +119,16 @@
justify-content: center;
align-items: center;
font-size: 3.5em;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.media-container {
position: relative;
}
.media-overlay i {
@ -142,6 +156,7 @@
} */
.media {
height: 100%;
border-radius: 4px;
background-size: cover;
background-position: center;
@ -217,6 +232,7 @@ section {
justify-content: space-between;
align-items: center;
padding: 1em 2em 1em 2em;
cursor: pointer;
}
.schedule-category-collapse-icon {
@ -236,10 +252,12 @@ section {
border-radius: 4px;
background-color: #ECF0F1;
width: 40;
margin-left: 2em;
margin-top: 1em;
margin-bottom: 1em;
margin-right: 40em;
padding: 1em 2em 1em 2em;
}
@ -391,4 +409,66 @@ section {
.footer div:nth-child(3) {
background-color: rgb(253, 110, 11, .83);
}
@media (max-width: 900px) {
.cover-background {
height: 30em;
width: 100%;
}
.cover {
height: 30em;
margin-top: -30em;
}
.cover-content {
height: 30em;
flex-direction: column;
justify-content: center;
text-align: center;
}
.cover-image {
margin-right: 0;
margin-bottom: 3em;
}
.cover-title {
margin-bottom: .25em;
}
.media-mosaic {
height: 33em;
grid-template-columns: .5fr .5fr;
grid-template-rows: 1fr .5fr .5fr;
}
.media-main {
grid-row: 1 / span 1;
grid-column: 1 / span 2;
}
.schedule-category-days-container {
margin-right: 5em;
}
.pricing-card {
margin-right: .5em;
}
.contact {
width: 100%;
}
.contact-item {
padding-left: 1em;
padding-right: 1em;
}
.contact-content {
word-break: break-all;
}
}

25
static/organization.html
View file

@ -38,15 +38,22 @@
</div>
<div class="container">
<div class="media-mosaic">
<div class="media media-main" style="background-image: url('assets/img/dummy-1.jpg')">
<div class="media-container media-main">
<div class="media" style="background-image: url('assets/img/dummy-1.jpg')"></div>
</div>
<div class="media media-1-1" style="background-image: url('assets/img/dummy-3.jpg')"></div>
<div class="media media-1-2" style="background-image: url('assets/img/dummy-2.jpg'); grid-column: 3/ span 1; grid-row: 1/ span 1;"></div>
<div class="media-1-2 media-overlay" style="grid-column: 3/ span 1; grid-row: 1/ span 1;">
<i class="fas fa-play-circle"></i>
<div class="media-container media-1-1">
<div class="media" style="background-image: url('assets/img/dummy-3.jpg')"></div>
</div>
<div class="media-container media-1-2">
<div class="media" style="background-image: url('assets/img/dummy-2.jpg')"></div>
<div class="media-overlay"><i class="fas fa-play-circle"></i></div>
</div>
<div class="media-container media-2-1">
<div class="media" style="background-image: url('assets/img/dummy-4.jpg')"></div>
</div>
<div class="media-container media-2-2">
<div class="media" style="background-image: url('assets/img/dummy-5.jpg')"></div>
</div>
<div class="media media-2-1" style="background-image: url('assets/img/dummy-4.jpg')"></div>
<div class="media media-2-2" style="background-image: url('assets/img/dummy-5.jpg')"></div>
</div>
<section>
<div class="section-title">
@ -75,7 +82,7 @@
</div>
<div class="schedule">
<div class="schedule-category">
<div class="schedule-category-header">
<div class="schedule-category-header" title="Déroulez">
<div class="schedule-category-name">
Création de robots super cool
</div>
@ -111,7 +118,7 @@
</div>
</div>
<div class="schedule-category">
<div class="schedule-category-header">
<div class="schedule-category-header" title="Déroulez">
<div class="schedule-category-name">
Cours de programmation de gros expert
</div>