bientot pret
This commit is contained in:
parent
b71cbb37ef
commit
d860e3d987
45 changed files with 1987 additions and 249 deletions
192
oldscss/layouts/articles.scss
Normal file
192
oldscss/layouts/articles.scss
Normal file
|
|
@ -0,0 +1,192 @@
|
|||
.articles {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-column-gap: 1.3em;
|
||||
grid-row-gap: 1.3em;
|
||||
|
||||
article {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.article {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
|
||||
transition: box-shadow 0.3s;
|
||||
border-radius: 5px;
|
||||
width: 100%;
|
||||
height: 25em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
opacity: initial;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
opacity: initial;
|
||||
}
|
||||
|
||||
.article:hover {
|
||||
box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.article-status {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
padding-top: 10px;
|
||||
color: #fff;
|
||||
line-height: 2.3;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
background-color: $primary-color;
|
||||
border-radius: 50%;
|
||||
text-transform: uppercase;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.article-status-day {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.article-status-month {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.article-thumb {
|
||||
height: 15em;
|
||||
overflow: hidden;
|
||||
background-color: white;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
transition: height 0.3s;
|
||||
}
|
||||
|
||||
.article-thumb img {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.article-body {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
background: white;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
padding: 1em;
|
||||
height: 12em;
|
||||
transition: height 0.3s;
|
||||
}
|
||||
|
||||
.article:hover .article-body {
|
||||
height: 18em;
|
||||
}
|
||||
|
||||
.article-title {
|
||||
margin: 0;
|
||||
padding: 0 0 10px 0;
|
||||
font-size: 22px;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.article-subtitle {
|
||||
margin: 0;
|
||||
padding: 0 0 10px 0;
|
||||
font-size: 19px;
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
.article-description {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #666C74;
|
||||
font-size: 14px;
|
||||
line-height: 27px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s, transform 0.2s;
|
||||
transition-delay: 0s;
|
||||
transform: translateY(25px);
|
||||
|
||||
height: 100%;
|
||||
// text-overflow: ellipsis;
|
||||
// white-space: nowrap;
|
||||
// overflow: hidden;
|
||||
}
|
||||
|
||||
.article:hover .article-description {
|
||||
opacity: 1;
|
||||
transition-delay: 0.1s;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
// @keyframes titleBlur {
|
||||
// 0% {
|
||||
// opacity: 0.6;
|
||||
// text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.6);
|
||||
// }
|
||||
|
||||
// 100% {
|
||||
// opacity: 1;
|
||||
// text-shadow: 0px 5px 5px transparent;
|
||||
// }
|
||||
// }
|
||||
// @keyframes subtitleBlur {
|
||||
// 0% {
|
||||
// opacity: 0.6;
|
||||
// text-shadow: 0px 5px 5px rgba(239, 90, 49, 0.6);
|
||||
// }
|
||||
|
||||
// 100% {
|
||||
// opacity: 1;
|
||||
// text-shadow: 0px 5px 5px rgba(239, 90, 49, 0);
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: $responsive-medium) {
|
||||
.articles {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
.article {
|
||||
max-width: 22em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $responsive-small) {
|
||||
.blog-title-container {
|
||||
padding: 0;
|
||||
.blog-title {
|
||||
display: none;
|
||||
}
|
||||
.sort {
|
||||
margin-top: 0 !important;
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
}
|
||||
.articles {
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
.article {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
346
oldscss/layouts/body.scss
Normal file
346
oldscss/layouts/body.scss
Normal file
|
|
@ -0,0 +1,346 @@
|
|||
.d-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.blog-title-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.blog-pagination {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.icon {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.logo {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
|
||||
.page-container.not-complete {
|
||||
position: relative;
|
||||
top: 97px;
|
||||
padding-bottom: 97px;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 1em;
|
||||
line-height: 2.2em;
|
||||
font-size: 16px;
|
||||
|
||||
&.negative-top-margin {
|
||||
margin-top: -1.2em;
|
||||
}
|
||||
|
||||
.blog-article {
|
||||
img.sm-img {
|
||||
width: 25vh !important;
|
||||
}
|
||||
img.md-img {
|
||||
width: 40vh !important;
|
||||
}
|
||||
img {
|
||||
display: flex;
|
||||
padding-top: 1.5em;
|
||||
padding-bottom: 1.5em;
|
||||
width: 60vh;
|
||||
margin: 0 auto;
|
||||
}
|
||||
iframe {
|
||||
padding-top: 1.5em;
|
||||
padding-bottom: 1.5em;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.page-details {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
//border-bottom: 2px solid rgba(127, 130, 139, 0.8);
|
||||
border-radius: 1px;
|
||||
justify-content: flex-end;
|
||||
//padding-bottom: 0.5em;
|
||||
margin-bottom: .5em;
|
||||
.page-details-item {
|
||||
i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
margin-right: 1em;
|
||||
opacity: 0.7;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.content-side {
|
||||
padding-left: 20px;
|
||||
border: 1px solid #47494e;
|
||||
padding-bottom: 2em;
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
.content-title {
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
&.text {
|
||||
a {
|
||||
color: $primary-color;
|
||||
transition: opacity 0.2s;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
opacity: 0.8;
|
||||
transition: opacity 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
ul {
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
h1 {
|
||||
text-decoration: underline;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
h2 {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
h3 {
|
||||
margin-top: .75em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.index-icon-title {
|
||||
padding-left: 1em;
|
||||
.fa {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.index-more-section {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.clear-fix {
|
||||
clear: both;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
margin-bottom: -1px;
|
||||
line-height: 1%;
|
||||
font-size: 0px;
|
||||
}
|
||||
|
||||
.section-error-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 12vh;
|
||||
width: 100%;
|
||||
background-color: #ecf0f1;
|
||||
border-radius: 10px;
|
||||
.section-error-content {
|
||||
font-size: 1.2em;
|
||||
opacity: 0.8;
|
||||
.fa {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 12vh;
|
||||
width: 100%;
|
||||
background-color: #ecf0f1;
|
||||
border-radius: 10px;
|
||||
.loading-content {
|
||||
font-size: 1.2em;
|
||||
opacity: 0.8;
|
||||
.fa {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mosaic, .image-mosaic {
|
||||
padding-top: 1.2em;
|
||||
padding-bottom: 1.2em;
|
||||
margin: 0 auto;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 30%);
|
||||
justify-self: center;
|
||||
grid-row-gap: 1em;
|
||||
grid-column-gap: 1em;
|
||||
img, .mosaic-item {
|
||||
display: block !important;
|
||||
padding: 0 !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mosaic.two-columns {
|
||||
grid-template-columns: repeat(auto-fill, 48%);
|
||||
}
|
||||
|
||||
.mosaic.three-columns {
|
||||
grid-template-columns: repeat(auto-fill, 30%);
|
||||
}
|
||||
|
||||
.mosaic.four-columns {
|
||||
grid-template-columns: repeat(auto-fill, 22%);
|
||||
}
|
||||
|
||||
.flex-mosaic {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flex-mosaic-item {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.flex-mosaic .flex-mosaic-item:first-of-type {
|
||||
margin-left: 0;
|
||||
}
|
||||
.flex-mosaic .flex-mosaic-item:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.full-iframe-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
iframe {
|
||||
border: none;
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.multistage-mosaic {
|
||||
margin: 0 auto;
|
||||
width: 75%;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1.8fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
gap: 0px 0px;
|
||||
.multistage-item {
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
|
||||
img {
|
||||
margin: 0;
|
||||
width: 49vh !important;
|
||||
}
|
||||
}
|
||||
.multistage-top-left {
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 1 / 2;
|
||||
}
|
||||
.multistage-right {
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 1 / 3;
|
||||
|
||||
img {
|
||||
width: 35vh !important;
|
||||
}
|
||||
}
|
||||
.multistage-bottom-left {
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 2 / 3;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $responsive-medium) {
|
||||
.mosaic, .image-mosaic {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
img, .mosaic-item {
|
||||
margin-bottom: 1em !important;
|
||||
display: block !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
img:last-of-type, .mosaic-item:last-of-type {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
.flex-mosaic {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.multistage-mosaic {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $responsive-small) {
|
||||
.sort-by-dates-container {
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
.blog-title-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
|
||||
.sort {
|
||||
margin-top: 1em;
|
||||
margin-left: 2em;
|
||||
margin-right: 2em;
|
||||
}
|
||||
}
|
||||
.blog-pagination {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.multistage-mosaic {
|
||||
grid-template-columns: auto;
|
||||
grid-template-rows: auto;
|
||||
|
||||
.multistage-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.multistage-top-left {
|
||||
grid-column: auto;
|
||||
grid-row: auto;
|
||||
}
|
||||
.multistage-right {
|
||||
grid-column: auto;
|
||||
grid-row: auto;
|
||||
|
||||
img {
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
width: 28vh !important;
|
||||
}
|
||||
}
|
||||
.multistage-bottom-left {
|
||||
grid-column: auto;
|
||||
grid-row: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
43
oldscss/layouts/contact-card.scss
Normal file
43
oldscss/layouts/contact-card.scss
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
.contact-card {
|
||||
display: flex;
|
||||
padding: 1em;
|
||||
border: 1px solid gray;
|
||||
border-radius: 10px;
|
||||
.contact-card-left {
|
||||
width: 5em;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
.contact-card-right {
|
||||
margin-left: 1.5em;
|
||||
}
|
||||
.contact-card-title {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
.contact-methods {
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
.contact-method {
|
||||
display: flex;
|
||||
.contact-method-icon {
|
||||
opacity: 0.8;
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: $responsive-small) {
|
||||
.contact-card {
|
||||
padding: .5em;
|
||||
|
||||
.contact-card-right {
|
||||
margin-left: .75em !important;
|
||||
}
|
||||
.contact-method-icon {
|
||||
margin-right: .5em !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
120
oldscss/layouts/cover.scss
Normal file
120
oldscss/layouts/cover.scss
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
$cover-height: 15em;
|
||||
|
||||
.cover {
|
||||
position: relative;
|
||||
|
||||
.cover-back {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('https://s.werobot.fr/headerCover.jpeg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.cover-container {
|
||||
width: 100%;
|
||||
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
|
||||
min-height: $cover-height;
|
||||
background-color: rgba(41, 128, 185, 0.8);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: white;
|
||||
padding: 5em 0;
|
||||
}
|
||||
|
||||
.cover-title {
|
||||
line-height: 3em;
|
||||
font-size: 1.5em;
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
|
||||
&.large-cover {
|
||||
.cover-container {
|
||||
padding: 6em 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.cover-mode-small .cover-container {
|
||||
padding: 6em 0;
|
||||
}
|
||||
|
||||
&.cover-mode-medium .cover-container {
|
||||
height: 40vh;
|
||||
}
|
||||
|
||||
&.cover-mode-large .cover-container {
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
&.cover-mode-full .cover-container {
|
||||
height: 77vh;
|
||||
}
|
||||
|
||||
.cover-date {
|
||||
padding-top: 2em;
|
||||
padding-bottom: 1em;
|
||||
font-size: 1.2em;
|
||||
opacity: 0.7;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.cover-date-icon{
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: $responsive-small) {
|
||||
.cover {
|
||||
&.cover-mode-medium .cover-container {
|
||||
height: 49vh !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $responsive-interlarge) {
|
||||
.cover {
|
||||
&.cover-mode-large .cover-container {
|
||||
height: 40vh !important;
|
||||
}
|
||||
&.cover-mode-full .cover-container {
|
||||
height: 65vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $responsive-medium) {
|
||||
.cover {
|
||||
.cover-back {
|
||||
background-position: center !important;
|
||||
}
|
||||
.cover-title {
|
||||
font-size: 1.3em;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&.cover-mode-medium .cover-container {
|
||||
height: 45vh;
|
||||
}
|
||||
&.large-cover .cover-container { padding: 5em 0; }
|
||||
&.cover-mdoe-small .cover-container { padding: 5em 0; }
|
||||
|
||||
//&.cover-mode-large .cover-container {
|
||||
//padding: 11em 0 !important;
|
||||
//}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $responsive-large) {
|
||||
.cover {
|
||||
&.large-cover .cover-container { padding: 8em 0; }
|
||||
|
||||
//&.cover-mode-large .cover-container {
|
||||
//padding: 21em 0 !important;
|
||||
//}
|
||||
}
|
||||
}
|
||||
82
oldscss/layouts/drawer.scss
Normal file
82
oldscss/layouts/drawer.scss
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
body {
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
|
||||
.drawer {
|
||||
.bm-menu {
|
||||
background-color: #2c3e50 !important;
|
||||
}
|
||||
|
||||
.cross-style {
|
||||
right: -4px !important;
|
||||
top: 13px !important;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.drawer-body-scrolling-disabled {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.main-page-wrap {
|
||||
transition: transform 0.5s ease 0s;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
transform: translate3d(-300px, 0px, 0px) !important;
|
||||
}
|
||||
|
||||
.drawer {
|
||||
background-color: #2c3e50;
|
||||
position: fixed;
|
||||
width: 0;
|
||||
transition: width 0.5s ease;
|
||||
z-index: 999;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
.drawer-content {
|
||||
width: 300px;
|
||||
padding-left: 1em;
|
||||
transition: opacity 0.5s ease;
|
||||
opacity: 1;
|
||||
}
|
||||
.drawer-links {
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
}
|
||||
.drawer-link {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-bottom: 1em;
|
||||
padding-top: 1em;
|
||||
color: white;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
}
|
||||
&.drawer-enabled {
|
||||
width: 300px;
|
||||
.drawer-links {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.drawer-close-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
color: white;
|
||||
padding-right: 1em;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
}
|
||||
22
oldscss/layouts/error.scss
Normal file
22
oldscss/layouts/error.scss
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
.error-container {
|
||||
height: 20vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 5em;
|
||||
.error {
|
||||
color: #2f3640;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.error-icon {
|
||||
margin-right: 2.2em;
|
||||
margin-left: 1.3em;
|
||||
i {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
.error-title {
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
3
oldscss/layouts/fonts.scss
Normal file
3
oldscss/layouts/fonts.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
body {
|
||||
font-family: 'Roboto Slab', serif;
|
||||
}
|
||||
132
oldscss/layouts/footer.scss
Normal file
132
oldscss/layouts/footer.scss
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
$social-icon-height: 2em;
|
||||
$footer-cover-height: 10em;
|
||||
|
||||
.footer {
|
||||
margin-top: 5em;
|
||||
|
||||
.footer-cover-back {
|
||||
height: $footer-cover-height;
|
||||
background-image: url("https://s.werobot.fr/footerCover.jpeg");
|
||||
background-size: cover;
|
||||
background-position-x: center;
|
||||
background-position-y: top;
|
||||
}
|
||||
|
||||
.footer-cover {
|
||||
margin-top: -$footer-cover-height;
|
||||
height: $footer-cover-height;
|
||||
background-color: rgba(41, 128, 185, .8);
|
||||
box-shadow: inset 0 0 10px rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
.footer-border {
|
||||
display: flex;
|
||||
.footer-border-item {
|
||||
display: block;
|
||||
content: "";
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
.footer-border-item:nth-child(1) {
|
||||
border-color: #bdc3c7;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-container {
|
||||
height: 20em;
|
||||
padding-top: 3em;
|
||||
padding-bottom: 3em;
|
||||
.footer-title-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 2em;
|
||||
.footer-title {
|
||||
font-size: 1.8em;
|
||||
opacity: 0.9;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.footer-description {
|
||||
opacity: 0.9;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
.footer-logo {
|
||||
margin-right: 2.5em;
|
||||
img {
|
||||
width: 38em;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer-footer {
|
||||
margin-top: 3em;
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
.footer-socials {
|
||||
margin-left: 1em;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
.footer-socials-item {
|
||||
margin-right: 1em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 0.8 !important;
|
||||
img, svg {
|
||||
width: $social-icon-height;
|
||||
height: $social-icon-height;
|
||||
}
|
||||
&:hover {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer-links {
|
||||
text-align: right;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
a {
|
||||
margin-bottom: 10px;
|
||||
font-size: 1em;
|
||||
color: #2980b9;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $responsive-medium) {
|
||||
.footer {
|
||||
.footer-container {
|
||||
padding-top: 1em;
|
||||
.footer-title-container {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
.footer-logo {
|
||||
margin-right: 0;
|
||||
margin-bottom: 1em;
|
||||
img {
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
width: 8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer-links {
|
||||
text-align: center;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.footer-footer {
|
||||
margin-top: 2em;
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
.footer-socials {
|
||||
margin-left: 0;
|
||||
.footer-socials-item img {
|
||||
width: 2.4em;
|
||||
height: 2.4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
142
oldscss/layouts/header.scss
Normal file
142
oldscss/layouts/header.scss
Normal file
|
|
@ -0,0 +1,142 @@
|
|||
$logo-height: 6em;
|
||||
$logo-responsive-height: 4em;
|
||||
|
||||
.header-border {
|
||||
border-top: 1px solid #7f828b;
|
||||
}
|
||||
.header {
|
||||
.header-container {
|
||||
position: relative;
|
||||
padding-top: 2em;
|
||||
padding-bottom: 2em;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
.header-nav-responsive-button-container {
|
||||
display: none;
|
||||
}
|
||||
.header-title-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
.header-title {
|
||||
|
||||
margin-left: 0.5em;
|
||||
.header-title-title {
|
||||
//font-family: 'Audiowide', serif;
|
||||
font-size: 2.2em;
|
||||
opacity: 0.9;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.header-sub-title {
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
}
|
||||
.header-logo {
|
||||
width: $logo-height;
|
||||
height: $logo-height;
|
||||
margin-right: 2em;
|
||||
}
|
||||
}
|
||||
.header-nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.header-nav-item {
|
||||
margin-left: 3em;
|
||||
}
|
||||
.header-nav-item .link.active {
|
||||
border-bottom: 2px dotted #7f828b;
|
||||
padding-bottom: 2px;
|
||||
//border-style: dashed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header.not-complete {
|
||||
//box-shadow: inset -8px -24px 66px -11px rgba(0,0,0,0.75);
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
z-index: 1500;
|
||||
transition:0.4s top cubic-bezier(.3,.73,.3,.74);
|
||||
border-bottom: 2px solid #a4b0be;
|
||||
.header-container {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.header-locale-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header-sub-title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $responsive-medium) {
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.header-container {
|
||||
justify-content: space-between;
|
||||
padding-left: 1em;
|
||||
padding-right: 1.5em;
|
||||
.header-title-container {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
.header-title {
|
||||
font-size: 1em;
|
||||
margin: 0;
|
||||
.header-title-title {
|
||||
font-size: 1.5em;
|
||||
margin: 0;
|
||||
}
|
||||
.header-sub-title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.header-logo {
|
||||
width: $logo-responsive-height;
|
||||
height: $logo-responsive-height;
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
.header-nav {
|
||||
display: none;
|
||||
}
|
||||
.header-nav-responsive-button-container {
|
||||
display: block;
|
||||
.header-nav-responsive-button {
|
||||
color: #2c3e50;
|
||||
font-size: 1.8em;
|
||||
opacity: 0.8;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-locale-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 0;
|
||||
z-index: 888;
|
||||
}
|
||||
19
oldscss/layouts/map.scss
Normal file
19
oldscss/layouts/map.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
.ol-attribution {
|
||||
ul {
|
||||
margin: 0 !important;
|
||||
padding: .5em !important;
|
||||
line-height: normal;
|
||||
font-size: small;
|
||||
}
|
||||
}
|
||||
|
||||
.about-place-map {
|
||||
width: 50em;
|
||||
height: 30em;
|
||||
}
|
||||
|
||||
@media (max-width: $responsive-small) {
|
||||
.about-place-map {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
132
oldscss/layouts/partner.scss
Normal file
132
oldscss/layouts/partner.scss
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
.partners {
|
||||
margin-top: 2em;
|
||||
.partner {
|
||||
//GiGa
|
||||
&:first-child img {
|
||||
width: 60%;
|
||||
}
|
||||
//uimm
|
||||
/*&:nth-child(2) img {
|
||||
width: 50%;
|
||||
}*/
|
||||
//papavoine
|
||||
&:nth-child(2) img {
|
||||
width: 40%;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
//Girv
|
||||
&:nth-child(3) img {
|
||||
width: 60%;
|
||||
}
|
||||
// arianegroup
|
||||
&:nth-child(4) img {
|
||||
width: 65%;
|
||||
}
|
||||
// gaillon
|
||||
&:nth-child(5) img {
|
||||
width: 40%;
|
||||
}
|
||||
// skf
|
||||
&:nth-child(6) {
|
||||
margin-top: 2.2em;
|
||||
img {
|
||||
width: 55%;
|
||||
}
|
||||
}
|
||||
// AtisComputer
|
||||
&:nth-child(7) {
|
||||
margin-top: 2.2em;
|
||||
img {
|
||||
width: 75%;
|
||||
}
|
||||
}
|
||||
margin-top: 1.2em;
|
||||
|
||||
.partner-image {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.partners-quick {
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: -2em;
|
||||
justify-content: space-around;
|
||||
.partner-quick-title {
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
.partner-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
img {
|
||||
width: auto;
|
||||
height: 7em;
|
||||
}
|
||||
&:nth-of-type(4) {
|
||||
img {
|
||||
height: 5em;
|
||||
}
|
||||
}
|
||||
&:nth-of-type(5) {
|
||||
img {
|
||||
height: 6em;
|
||||
}
|
||||
}
|
||||
&:nth-of-type(6) {
|
||||
//margin-top: 2.5em;
|
||||
img {
|
||||
height: 4em;
|
||||
}
|
||||
}
|
||||
&:nth-of-type(7) {
|
||||
img {
|
||||
padding: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $responsive-medium) {
|
||||
.partners-quick .partner-item {
|
||||
img {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
.partners {
|
||||
margin-top: 2em;
|
||||
.partner {
|
||||
//Girv
|
||||
&:nth-child(3) img {
|
||||
margin-top: .5em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
// arianegroup
|
||||
&:nth-child(4) img {
|
||||
margin-top: .5em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
// gaillon
|
||||
&:nth-child(5) img {
|
||||
margin-top: 1em;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
//skf
|
||||
&:nth-child(6) {
|
||||
margin-top: 2em;
|
||||
img {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
&:nth-child(7) {
|
||||
margin-top: 2em;
|
||||
img {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
52
oldscss/layouts/photos.scss
Normal file
52
oldscss/layouts/photos.scss
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
.photos-list {
|
||||
|
||||
.photos-list-title {
|
||||
margin-bottom: 1em;
|
||||
.fa {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.photos-list-photos {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-column-gap: 1.2em;
|
||||
grid-row-gap: 1.2em;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.photos-list-item {
|
||||
border-radius: 5px;
|
||||
height: 17.5em;
|
||||
min-width: 14em;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
opacity: 1;
|
||||
display: block;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.photos-list-item:hover {
|
||||
opacity: 0.8;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.photos-more {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: $responsive-medium) {
|
||||
.photos-list {
|
||||
.photos-list-photos {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.photos-list-item {
|
||||
min-width: 17.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
43
oldscss/layouts/team.scss
Normal file
43
oldscss/layouts/team.scss
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
.team-mosaic {
|
||||
margin-top: 2.5em;
|
||||
display: grid;
|
||||
grid-template-columns: 30% 30% 30%;
|
||||
grid-column-gap: 28px;
|
||||
grid-row-gap: 2em;
|
||||
.team-item {
|
||||
text-align: center;
|
||||
.team-item-title {
|
||||
margin-top: 0.3em;
|
||||
margin-bottom: 0.2em;
|
||||
font-size: 1.4em;
|
||||
font-weight: 300;
|
||||
}
|
||||
.team-item-image {
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 10em;
|
||||
height: 10em;
|
||||
overflow: hidden;
|
||||
img {
|
||||
width: auto;
|
||||
height: 10em;
|
||||
}
|
||||
}
|
||||
.team-item-description {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
.team-item:last-of-type{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $responsive-medium) {
|
||||
.team-mosaic {
|
||||
grid-template-columns: 50% 50%;
|
||||
grid-column-gap: 0;
|
||||
}
|
||||
}
|
||||
29
oldscss/layouts/transitions.scss
Normal file
29
oldscss/layouts/transitions.scss
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
.page-enter-active,
|
||||
.page-leave-active {
|
||||
transition: all 0.15s ease-out;
|
||||
}
|
||||
.page-enter,
|
||||
.page-leave-active {
|
||||
opacity: 0.15;
|
||||
transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.main-transition-enter-active, .main-transition-leave-active {
|
||||
transition: opacity .5s
|
||||
}
|
||||
|
||||
.main-transition-enter, .main-transition-leave-active, .main-transition-leave-to {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
.transition-parent {
|
||||
min-height: 10em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.transition-child {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue