Conjure/Site-Web
6
0
Fork 0
mirror of https://github.com/ConjureETS/Site.git synced 2026-03-24 01:30:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Constant Styling + Corrections

Browse Source
This commit is contained in:
Massimo Di Lullo 2019-09-02 12:36:28 -04:00
parent 054db56916
commit 42940fb4a4
10 changed files with 80 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

BIN
public/img/learn.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 13 KiB

BIN
public/img/medal.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 25 KiB

BIN
public/img/remote.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 7.3 KiB

2
public/js/main.min.js vendored
View File

@ -1 +1 @@
function addCopyrightCurrentDate(){document.querySelector("footer").querySelector("p").innerHTML+=" "+(new Date).getFullYear()}function showActivityContent(t){t.target.parentElement.parentElement.querySelector(".headline").classList.toggle("toggle-visibility"),t.target.parentElement.parentElement.classList.toggle("slide")}function pad(t,e,i){return i=i||"0",(t+="").length>=e?t:new Array(e-t.length+1).join(i)+t}function animateNumbers(t){setTimeout(function(){let e=t.getAttribute("data-endvalue"),i=1*(e=parseInt(null===e?(new Date).getFullYear():e))/7,n=setInterval(function(){i-=1;let l=parseInt(t.innerHTML);t.innerHTML=pad(l+7>e?l+(e-l):l+7,4),i<=0&&clearInterval(n)},1)},null===t.getAttribute("data-delay")?250:t.getAttribute("data-delay"))}addCopyrightCurrentDate(),document.querySelectorAll("section#activites .is-mtlgj-btn").forEach(function(t){t.addEventListener("click",showActivityContent)}),document.querySelectorAll(".year-animated").forEach(function(t){animateNumbers(t)}),bulmaCarousel.attach(".slider",{autoplay:!0,pagination:!1,loop:!0,slidesToShow:2,slidesToScroll:1,infinite:!0,icons:{previous:'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 100 100" width="100" height="100"><defs><clipPath id="_clipPath_Rmt62eEg1OXF13UQV6A0tZ7nRrSHuqzl"><rect width="100" height="100"/></clipPath></defs><g clip-path="url(#_clipPath_Rmt62eEg1OXF13UQV6A0tZ7nRrSHuqzl)"><path d=" M 68.738 87.477 L 68.738 87.477 L 31.262 50 L 68.738 12.523" fill="none" vector-effect="non-scaling-stroke" stroke-width="8" stroke="rgb(132,132,132)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"/></g></svg>',next:'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 100 100" width="100" height="100"><defs><clipPath id="_clipPath_sc80dOHRo7GcAKylIDWHu4HjiUHjgH8R"><rect width="100" height="100"/></clipPath></defs><g clip-path="url(#_clipPath_sc80dOHRo7GcAKylIDWHu4HjiUHjgH8R)"><path d=" M 39 12.523 L 39 12.523 L 76.477 50 L 39 87.477" fill="none" vector-effect="non-scaling-stroke" stroke-width="8" stroke="rgb(132,132,132)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"/></g></svg>'}});
function addCopyrightCurrentDate(){document.querySelector("footer").querySelector("p").innerHTML+=" "+(new Date).getFullYear()}function showActivityContent(t){t.target.parentElement.parentElement.parentElement.querySelector(".headline").classList.toggle("toggle-visibility"),t.target.parentElement.parentElement.parentElement.classList.toggle("slide")}function pad(t,e,n){return n=n||"0",(t+="").length>=e?t:new Array(e-t.length+1).join(n)+t}function animateNumbers(t){setTimeout(function(){let e=t.getAttribute("data-endvalue"),n=1*(e=parseInt(null===e?(new Date).getFullYear():e))/7,i=setInterval(function(){n-=1;let l=parseInt(t.innerHTML);t.innerHTML=pad(l+7>e?l+(e-l):l+7,4),n<=0&&clearInterval(i)},1)},null===t.getAttribute("data-delay")?250:t.getAttribute("data-delay"))}addCopyrightCurrentDate(),document.querySelectorAll("section#activites .is-mtlgj-btn").forEach(function(t){t.addEventListener("click",showActivityContent)}),document.querySelectorAll(".year-animated").forEach(function(t){animateNumbers(t)}),bulmaCarousel.attach(".slider",{autoplay:!0,pagination:!1,loop:!0,slidesToShow:2,slidesToScroll:1,infinite:!0,icons:{previous:'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 100 100" width="100" height="100"><defs><clipPath id="_clipPath_Rmt62eEg1OXF13UQV6A0tZ7nRrSHuqzl"><rect width="100" height="100"/></clipPath></defs><g clip-path="url(#_clipPath_Rmt62eEg1OXF13UQV6A0tZ7nRrSHuqzl)"><path d=" M 68.738 87.477 L 68.738 87.477 L 31.262 50 L 68.738 12.523" fill="none" vector-effect="non-scaling-stroke" stroke-width="8" stroke="rgb(132,132,132)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"/></g></svg>',next:'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 100 100" width="100" height="100"><defs><clipPath id="_clipPath_sc80dOHRo7GcAKylIDWHu4HjiUHjgH8R"><rect width="100" height="100"/></clipPath></defs><g clip-path="url(#_clipPath_sc80dOHRo7GcAKylIDWHu4HjiUHjgH8R)"><path d=" M 39 12.523 L 39 12.523 L 76.477 50 L 39 87.477" fill="none" vector-effect="non-scaling-stroke" stroke-width="8" stroke="rgb(132,132,132)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"/></g></svg>'}});

11
public/view/fr/index.html
View File

@ -107,19 +107,18 @@
</div>
</div>
<div class="full-height full-width is-full columns animation-inversed sub-section">
<div class="column full-height no-spacing">
<div class="bg-img mtlgj-img full-height full-width"></div>
<div class="headline is-headline-inversed">
<h2>Montréal Game Jam</h2>
<p>
Le Montréal Game Jam est le chapitre Montréalais pour le Global Game Jam. Cet événement international donne comme défi aux participants de réaliser un prototype de jeu basé sur une thématique spécifique pendant une période de 48 heures.
</p>
<button class="button is-mtlgj-btn is-info is-outlined is-medium">En savoir plus</button>
<button class="button is-mtlgj-btn is-info is-hidden-mobile is-outlined is-medium">En savoir plus</button>
</div>
</div>
<div class="content column is-one-quarter-fullhd is-two-fifths-desktop is-half-tablet is-three-quarters-mobile full-height">
<img alt="Montreal Game Jam Logo" src="../../img/MTLGJ-Logo.jpg" />
<p>
Le Montréal Game Jam est le chapitre Montréalais pour le Global Game Jam. Cet événement international donne comme défi aux participants de réaliser un prototype de jeu basé sur une thématique spécifique pendant une période de 48 heures.
</p>
<p>
L’organisation du Montreal Game Jam est constitué de l’union de multiples universités et professionnels de Montréal dont le mandat commun est de promouvoir l’industrie du jeu vidéo.
</p>
@ -132,7 +131,9 @@
<p>
Plus d'information sur le site du <a href="http://mtlgj.org/lang/fr/index.html">Montreal Game Jam</a>
</p>
<button class="button is-mtlgj-btn is-info is-outlined is-medium">Fermer</button>
<div>
<button class="button is-mtlgj-btn is-info is-hidden-mobile is-outlined is-medium">Fermer</button>
</div>
</div>
</div>
</section>

4
resources/js/app.js
View File

@ -28,8 +28,8 @@ function addCopyrightCurrentDate() {
}
function showActivityContent(e) {
e.target.parentElement.parentElement.querySelector('.headline').classList.toggle('toggle-visibility');
e.target.parentElement.parentElement.classList.toggle('slide');
e.target.parentElement.parentElement.parentElement.querySelector('.headline').classList.toggle('toggle-visibility');
e.target.parentElement.parentElement.parentElement.classList.toggle('slide');
}
function pad(n, width, z) {

37
resources/sass/_partials/_general.scss
View File

@ -1,3 +1,5 @@
$border-radius: 4px;
* {
font-family: Roboto, SansSerif;
}
@ -55,6 +57,7 @@ section#splashscreen {
.bg-img {
background-image: url('../img/splashscreen.jpg');
background-size: cover;
}
.splashscreen-text-container {
@ -74,7 +77,7 @@ section#splashscreen {
margin-right: auto;
border-top: 5px solid white;
max-width: 900px;
border-radius: 20px;
border-radius: $border-radius;
}
}
}
@ -108,6 +111,7 @@ section#apropos {
img.is-quarter {
width: 25%;
border-radius: $border-radius;
}
.column {
@ -136,6 +140,11 @@ section#activites {
position: relative;
transition: all 2s;
div.no-spacing {
margin: 0;
padding: 0;
}
&.slide {
&:not(.animation-inversed) {
transform: translateX(25%);
@ -159,10 +168,11 @@ section#activites {
}
div.content {
position: absolute;
position: relative;
padding: 25px;
text-align: justify;
overflow-y: hidden;
overflow-y: auto;
top: 0;
p, img {
margin-bottom: 1em;
@ -174,6 +184,7 @@ section#activites {
left: 20%;
width: 60%;
text-align: center;
border-radius: $border-radius;
}
}
@ -184,7 +195,7 @@ section#activites {
position: absolute;
color: white;
max-width: 35%;
border-radius: 4px;
border-radius: $border-radius;
background-color: rgba(0, 0, 0, 0.5);
&:not(.is-headline-inversed) {
@ -252,7 +263,7 @@ section#competitions, section#partenaires {
margin: 10px auto 50px auto;
border-top: 5px solid #848484;
max-width: 200px;
border-radius: 20px;
border-radius: $border-radius;
}
}
@ -278,17 +289,17 @@ section#competitions {
}
.slider-navigation-previous {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: $border-radius;
border-bottom-right-radius: $border-radius;
}
.slider-navigation-next {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: $border-radius;
border-bottom-left-radius: $border-radius;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.slider-item {

20
resources/sass/_partials/_media.scss
View File

@ -140,7 +140,12 @@
}
section#activites {
height: auto;
.sub-section {
min-height: 100vh;
height: auto;
div.headline {
max-width: 75% !important;
background-color: rgba(0, 0, 0, 0.75);
@ -148,25 +153,32 @@
&.slide {
&:not(.animation-inversed) {
transform: translateX(75%);
transform: translateX(0%);
}
&.animation-inversed {
transform: translateX(-75%);
transform: translateX(0%);
}
}
&:not(.animation-inversed) {
div.content {
left: -75%;
left: 0;
}
}
&.animation-inversed {
div.content {
right: -75%;
right: 0;
}
}
div.content {
height: auto;
width: 100vw;
padding-right: 2rem;
padding-left: 2rem;
}
}
}

46
resources/sass/_partials/_navigation.scss
View File

@ -9,19 +9,19 @@ $open-distance: 105px;
$opening-angle: $pi*2;
$hamburger-spacing: 10px;
$default-opacity: 0.70;
$ball-spacing: 72px;
$item-spacing: 64px;
%ball {
%item {
background: $fg;
border-radius: 100%;
width: 60px;
height: 60px;
margin-left: -20px;
border-radius: 4px;
width: 52px;
height: 52px;
margin-left: -16px;
position: absolute;
top: 20px;
color: white;
text-align: center;
line-height: 60px;
line-height: 52px;
transform: translate3d(0, 0, 0);
transition: transform ease-out 200ms;
opacity: $default-opacity;
@ -29,11 +29,11 @@ $ball-spacing: 72px;
img {
width: 42px;
height: 42px;
margin: 9px;
margin: 5px;
}
}
%ball-hover {
%item-hover {
opacity: 1;
}
@ -53,7 +53,7 @@ $ball-spacing: 72px;
}
.menu-item, .menu-item-always-open {
@extend %ball;
@extend %item;
opacity: 0;
transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
@ -67,10 +67,10 @@ $ball-spacing: 72px;
@for $i from 1 through $menu-items-always-open {
.menu-item-always-open:nth-of-type(#{$i+3}) {
opacity: $default-opacity;
top: 20px + $ball-spacing*$i;
top: 20px + $item-spacing*$i;
&:hover {
@extend %ball-hover;
@extend %item-hover;
}
}
}
@ -120,7 +120,7 @@ $ball-spacing: 72px;
}
.menu-open-button {
@extend %ball;
@extend %item;
z-index: 2;
transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
transition-duration: 400ms;
@ -128,7 +128,7 @@ $ball-spacing: 72px;
cursor: pointer;
&:hover {
@extend %ball-hover;
@extend %item-hover;
transform: scale(1.1, 1.1) translate3d(0, 0, 0);
}
}
@ -143,7 +143,7 @@ $ball-spacing: 72px;
opacity: $default-opacity;
&:hover {
@extend %ball-hover;
@extend %item-hover;
}
}
@ -151,14 +151,14 @@ $ball-spacing: 72px;
@for $i from 1 through $menu-items {
&:nth-child(#{$i+2}) {
transition-duration: 90ms+(100ms*$i);
transform: translate3d(0, $ball-spacing*$i, 0);
transform: translate3d(0, $item-spacing*$i, 0);
}
}
}
.menu-open:checked ~ .menu-item-always-open {
transition-duration: 90ms+(100ms);
transform: translate3d(0, $ball-spacing*$menu-items, 0);
transform: translate3d(0, $item-spacing*$menu-items, 0);
}
.language-icon {
@ -173,15 +173,15 @@ $ball-spacing: 72px;
span {
display: none;
background: $fg;
border-top-left-radius: 60px;
border-bottom-left-radius: 60px;
height: 60px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
height: 52px;
position: absolute;
right: 30px;
padding: 0 35px 0 25px;
right: 25px;
padding: 0 30px 0 15px;
text-align: center;
white-space: nowrap;
line-height: 60px;
line-height: 52px;
z-index:-1;
}