_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Work on responsive part and fixes

Browse Source
This commit is contained in:
Hugo Averty 2020-06-09 07:39:43 +02:00
parent 3eda0abb9b
commit bdbefe3d8f
3 changed files with 77 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
website/dist/index.html vendored
View File

@ -46,14 +46,14 @@
<div class="container-lg section"> <div class="container-lg section">
<div class="over-image"> <div class="over-image">
<div class="row"> <div class="row">
<div class="col-6 col-md-6 my-3 my-md-0"> <div class="col-10 col-md-6">
<div class="logo"> <div class="logo">
<img src="static/images/logo.png"> <img src="static/images/logo.png">
</div> </div>
</div> </div>
<div class="col-6 col-md-6 my-3 my-md-0"> <div class="col-2 col-md-6">
<div class="social-links"> <div class="social-links">
Share your experience <span class="share-title">Share your experience</span>
<a href="https://www.facebook.com/sharer/sharer.php?u=https://workadventu.re/" target="_BLANK"> <a href="https://www.facebook.com/sharer/sharer.php?u=https://workadventu.re/" target="_BLANK">
<img class="social-image" src="static/images/facebook.png" /> <img class="social-image" src="static/images/facebook.png" />
</a> </a>
@ -70,7 +70,7 @@
<h1>Your workplace<br/>but better</h1> <h1>Your workplace<br/>but better</h1>
<h3>You are impatient to discover this new world? Click on "Play online" and meet new people or share this adventure with your colleagues and friends by clicking on "Private mode"</h3> <h3>You are impatient to discover this new world? Click on "Play online" and meet new people or share this adventure with your colleagues and friends by clicking on "Private mode"</h3>
</div> </div>
<div class="row justify-content-md-center pt-5" style="margin-top: 65px;"> <div class="row justify-content-md-center pt-5">
<div class="col col-lg-3"> <div class="col col-lg-3">
<a class="custom-link play" target="_BLANK" onclick="startGame()" title="PLAY ONLINE"> <a class="custom-link play" target="_BLANK" onclick="startGame()" title="PLAY ONLINE">
PLAY ONLINE PLAY ONLINE
@ -92,6 +92,11 @@
</div> </div>
</header> </header>
<div class="section bg-white how-to"> <div class="section bg-white how-to">
<div class="desktop-only text-center d-block d-md-none d-lg-none d-xl-none">
<img src="static/images/desktop.png" width="64" /><br />
Well, it's not mobile friendly yet. Try with your desktop computer.
</div>
<div class="container-fluid container-lg"> <div class="container-fluid container-lg">
<div class="row justify-content-md-center"> <div class="row justify-content-md-center">
<div class="col-12 col-md-12 text-center"> <div class="col-12 col-md-12 text-center">
@ -180,10 +185,10 @@
<div class="bg-white footer"> <div class="bg-white footer">
<div class="container-fluid container-lg"> <div class="container-fluid container-lg">
<div class="row"> <div class="row">
<div class="col-6 col-md-6 my-3 my-md-0"> <div class="col-12 col-md-6 my-3 my-md-0">
<a href="https://www.thecodingmachine.com/" target="_blank"><img src="static/images/Logo TCM.png"></a> <a href="https://www.thecodingmachine.com/" target="_blank"><img src="static/images/Logo TCM.png"></a>
</div> </div>
<div class="col-6 col-md-6 my-3 my-md-0 floppy"> <div class="col-12 col-md-6 my-3 my-md-0 floppy">
<img src="static/images/floppy.png" /> <img src="static/images/floppy.png" />
<div>Soon available on floppy !<br/><span>otherwise, available on <a href="https://github.com/thecodingmachine/workadventure" target="_BLANK">GitHub</a></span></div> <div>Soon available on floppy !<br/><span>otherwise, available on <a href="https://github.com/thecodingmachine/workadventure" target="_BLANK">GitHub</a></span></div>
</div> </div>

BIN
website/dist/static/images/desktop.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 87 KiB

86
website/src/sass/styles.scss
View File

@ -38,23 +38,52 @@ header {
left: 0; left: 0;
right: 0; right: 0;
height: 33rem; height: 33rem;
width: calc(100% - 15px);
.logo{ .logo{
margin: 1rem 0; margin: 1rem 0;
@include media-breakpoint-down(sm) {
padding-left: 1rem;
}
} }
.social-links { .social-links {
text-align: right; text-align: right;
padding-top: 36px; padding-top: 2.25rem;
a { a {
margin-left: 20px; margin-left: 1.25rem;
}
}
@include media-breakpoint-down(sm) {
.social-links {
padding-top: 0.5rem;
padding-right: 0.5rem;
.share-title {
display: none;
}
a {
display: block;
margin-left: 0rem;
margin-top: 1rem;
}
} }
} }
.title { .title {
z-index: 3;
position: relative;
padding: 5rem 0; padding: 5rem 0;
color: black; color: black;
h1 { h1 {
font-family: 'Karmatic Arcade'; font-family: 'Karmatic Arcade';
font-size: 44px; font-size: 2.75rem;
margin-bottom: 20px; margin-bottom: 1.25rem;
}
h3 {
min-height: 200px;
padding: 1rem;
}
@include media-breakpoint-down(xs) {
h3 {
font-size: 1rem;
}
} }
} }
} }
@ -97,7 +126,7 @@ header {
} }
.custom-link{ .custom-link{
font-family: "VCR OSD Mono"; font-family: "VCR OSD Mono";
font-size: 18px; font-size: 1.125rem;
letter-spacing: 5px; letter-spacing: 5px;
color: white; color: white;
display: block; display: block;
@ -110,12 +139,15 @@ header {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
bottom: -24px; bottom: 7px;
padding: 20px; padding: 1.125rem;
text-align: center; text-align: center;
z-index: 2; z-index: 2;
transition: all .1s cubic-bezier(0.000, -0.600, 1.000, 1.650); /* custom */ transition: all .1s cubic-bezier(0.000, -0.600, 1.000, 1.650); /* custom */
//transition-timing-function: cubic-bezier(0.000, -0.600, 1.000, 1.650); /* custom */ //transition-timing-function: cubic-bezier(0.000, -0.600, 1.000, 1.650); /* custom */
@include media-breakpoint-down(sm) {
display: none;
}
&:hover { &:hover {
color: white; color: white;
transform: translateY(-6px); transform: translateY(-6px);
@ -179,20 +211,21 @@ img{
.section{ .section{
padding-top: 2rem; padding-top: 2rem;
padding-bottom: 5rem; padding-bottom: 5rem;
&.used-by{ &.used-by{
img{ img{
padding: 0 1rem; padding: 0 1rem;
} }
} }
&.how-to{ &.how-to{
padding: 100px 0; padding: 6.25rem 0;
background: url('../images/bg-briques.jpg') repeat-x bottom; background: url('../images/bg-briques.jpg') repeat-x bottom;
.desktop-only {
padding: 0 1.25rem 4rem;
}
.image-item{ .image-item{
height: 100%; height: 100%;
margin: 0 auto; margin: 0 auto;
padding: 20px; padding: 1.25rem;
/*transition: all .25s cubic-bezier(0.000, -0.600, 1.000, 1.650); /*transition: all .25s cubic-bezier(0.000, -0.600, 1.000, 1.650);
&:hover { &:hover {
transform: scale(1.1); transform: scale(1.1);
@ -228,10 +261,15 @@ img{
min-height: 6rem; min-height: 6rem;
font-family: 'Karmatic Arcade'; font-family: 'Karmatic Arcade';
font-size: 22px; font-size: 22px;
margin-bottom: 20px; margin-bottom: 1.25rem;
} }
} }
} }
@include media-breakpoint-down(sm) {
&.how-to{
padding: 2rem 0;
}
}
&.used-by{ &.used-by{
img{ img{
@ -242,8 +280,8 @@ img{
&.quotes{ &.quotes{
h2{ h2{
font-family: 'Karmatic Arcade'; font-family: 'Karmatic Arcade';
font-size: 34px; font-size: 1.75rem;
margin: 40px 0; margin: 2.5rem 0;
} }
.quote-item{ .quote-item{
@ -267,17 +305,25 @@ img{
text-align: right; text-align: right;
img { img {
float: right; float: right;
margin-left: 20px; margin-left: 1.25rem;
} }
div { div {
float: right; float: right;
margin-left: 15px; margin-left: 1rem;
font-size: 16px; font-size: 1rem;
line-height: 16px; line-height: 1rem;
padding-top: 10px; padding-top: 0.625rem;
span { span {
color: grey; color: grey;
font-size: 13px; font-size: 0.8125rem;
}
}
}
@include media-breakpoint-down(xs) {
.floppy {
text-align: center;
img, div {
float: none;
} }
} }
} }