mise en place jeu memory mais pas fini
This commit is contained in:
DonRenando
576
SRC/public/css/memory.css
Normal file
576
SRC/public/css/memory.css
Normal file
@ -0,0 +1,576 @@
|
||||
/* =============================================================================
|
||||
RESET, BOX SIZING, & CLEARFIX
|
||||
============================================================================= */
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
BASE
|
||||
============================================================================= */
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
LAYOUT
|
||||
============================================================================= */
|
||||
/* wrapper */
|
||||
.wrapper {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
min-width: 480px;
|
||||
}
|
||||
|
||||
/* container */
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
max-width: 1024px;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
MEMORY GAME (mg)
|
||||
============================================================================= */
|
||||
/**
|
||||
* Game container
|
||||
*
|
||||
* This is the overall container for the game. Different things get addead and
|
||||
* removed from this container depending on the game state.
|
||||
*/
|
||||
.mg {
|
||||
/* blank */
|
||||
}
|
||||
|
||||
/**
|
||||
* Game meta
|
||||
*
|
||||
* The game meta is the section that displays the level and moves. It's appended
|
||||
* to the game container at the start, and shows the level the user selected
|
||||
* and the number of moves the user has played.
|
||||
*/
|
||||
.mg__meta {
|
||||
margin-bottom: 10px;
|
||||
color: #28aadc;
|
||||
}
|
||||
|
||||
.mg__meta--item {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.mg__meta--left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.mg__meta--right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.mg__meta--level {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Game start screen
|
||||
*
|
||||
* The game start screen shows the "welcome" message and also a list for the
|
||||
* user to choose a level. It's appended to the game container at the start,
|
||||
* and once the user selects a level, it is removed from the container
|
||||
*/
|
||||
.mg__start-screen {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
}
|
||||
|
||||
.mg__start-screen--heading {
|
||||
margin-bottom: 10px;
|
||||
color: #282a2f;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.mg__start-screen--sub-heading {
|
||||
font-size: 24px;
|
||||
margin-bottom: 10px;
|
||||
color: #28aadc;
|
||||
}
|
||||
.mg__start-screen--sub-heading::before, .mg__start-screen--sub-heading::after {
|
||||
margin: 0 5px;
|
||||
content: "-";
|
||||
}
|
||||
|
||||
.mg__start-screen--text {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.mg__start-screen--level-select {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.mg__start-screen--level-select span {
|
||||
color: #ff3c50;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.mg__start-screen--level-select span:hover {
|
||||
color: #d50016;
|
||||
}
|
||||
|
||||
/**
|
||||
* Game wrapper
|
||||
*
|
||||
* The game wrapper is where the actual game resides. Inside here, all the
|
||||
* memory tiles get arranged and ready for game play.
|
||||
*/
|
||||
.mg__wrapper {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mg__contents {
|
||||
position: relative;
|
||||
padding-bottom: 50%;
|
||||
margin-left: -5px;
|
||||
margin-right: -5px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Game tiles
|
||||
*
|
||||
* The game tiles are the tiles that are laid down on the memory game board.
|
||||
* These tiles are the ones that the user clicks on to flip and reveal some
|
||||
* images. The level the user selects determines the position and size of
|
||||
* the tiles.
|
||||
*/
|
||||
.mg__tile {
|
||||
position: absolute;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* game__level-1 styles */
|
||||
.mg__level-1 .mg__tile {
|
||||
width: 25%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.mg__level-1 .mg__tile-1 {
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
}
|
||||
.mg__level-1 .mg__tile-2 {
|
||||
top: 0%;
|
||||
left: 25%;
|
||||
}
|
||||
.mg__level-1 .mg__tile-3 {
|
||||
top: 0%;
|
||||
left: 50%;
|
||||
}
|
||||
.mg__level-1 .mg__tile-4 {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
}
|
||||
.mg__level-1 .mg__tile-5 {
|
||||
top: 50%;
|
||||
left: 0%;
|
||||
}
|
||||
.mg__level-1 .mg__tile-6 {
|
||||
top: 50%;
|
||||
left: 25%;
|
||||
}
|
||||
.mg__level-1 .mg__tile-7 {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
.mg__level-1 .mg__tile-8 {
|
||||
top: 50%;
|
||||
left: 75%;
|
||||
}
|
||||
|
||||
/* game__level-2 styles */
|
||||
.mg__level-2 .mg__tile {
|
||||
width: 16.66667%;
|
||||
height: 33.33333%;
|
||||
}
|
||||
|
||||
.mg__level-2 .mg__tile-1 {
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
}
|
||||
.mg__level-2 .mg__tile-2 {
|
||||
top: 0%;
|
||||
left: 16.66667%;
|
||||
}
|
||||
.mg__level-2 .mg__tile-3 {
|
||||
top: 0%;
|
||||
left: 33.33333%;
|
||||
}
|
||||
.mg__level-2 .mg__tile-4 {
|
||||
top: 0%;
|
||||
left: 50%;
|
||||
}
|
||||
.mg__level-2 .mg__tile-5 {
|
||||
top: 0%;
|
||||
left: 66.66667%;
|
||||
}
|
||||
.mg__level-2 .mg__tile-6 {
|
||||
top: 0%;
|
||||
left: 83.33333%;
|
||||
}
|
||||
.mg__level-2 .mg__tile-7 {
|
||||
top: 33.33333%;
|
||||
left: 0%;
|
||||
}
|
||||
.mg__level-2 .mg__tile-8 {
|
||||
top: 33.33333%;
|
||||
left: 16.66667%;
|
||||
}
|
||||
.mg__level-2 .mg__tile-9 {
|
||||
top: 33.33333%;
|
||||
left: 33.33333%;
|
||||
}
|
||||
.mg__level-2 .mg__tile-10 {
|
||||
top: 33.33333%;
|
||||
left: 50%;
|
||||
}
|
||||
.mg__level-2 .mg__tile-11 {
|
||||
top: 33.33333%;
|
||||
left: 66.66667%;
|
||||
}
|
||||
.mg__level-2 .mg__tile-12 {
|
||||
top: 33.33333%;
|
||||
left: 83.33333%;
|
||||
}
|
||||
.mg__level-2 .mg__tile-13 {
|
||||
top: 66.66667%;
|
||||
left: 0%;
|
||||
}
|
||||
.mg__level-2 .mg__tile-14 {
|
||||
top: 66.66667%;
|
||||
left: 16.66667%;
|
||||
}
|
||||
.mg__level-2 .mg__tile-15 {
|
||||
top: 66.66667%;
|
||||
left: 33.33333%;
|
||||
}
|
||||
.mg__level-2 .mg__tile-16 {
|
||||
top: 66.66667%;
|
||||
left: 50%;
|
||||
}
|
||||
.mg__level-2 .mg__tile-17 {
|
||||
top: 66.66667%;
|
||||
left: 66.66667%;
|
||||
}
|
||||
.mg__level-2 .mg__tile-18 {
|
||||
top: 66.66667%;
|
||||
left: 83.33333%;
|
||||
}
|
||||
|
||||
/* game__level-3 styles */
|
||||
.mg__level-3 .mg__tile {
|
||||
width: 12.5%;
|
||||
height: 25%;
|
||||
}
|
||||
|
||||
.mg__level-3 .mg__tile-1 {
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-2 {
|
||||
top: 0%;
|
||||
left: 12.5%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-3 {
|
||||
top: 0%;
|
||||
left: 25%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-4 {
|
||||
top: 0%;
|
||||
left: 37.5%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-5 {
|
||||
top: 0%;
|
||||
left: 50%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-6 {
|
||||
top: 0%;
|
||||
left: 62.5%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-7 {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-8 {
|
||||
top: 0%;
|
||||
left: 87.5%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-9 {
|
||||
top: 25%;
|
||||
left: 0%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-10 {
|
||||
top: 25%;
|
||||
left: 12.5%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-11 {
|
||||
top: 25%;
|
||||
left: 25%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-12 {
|
||||
top: 25%;
|
||||
left: 37.5%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-13 {
|
||||
top: 25%;
|
||||
left: 50%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-14 {
|
||||
top: 25%;
|
||||
left: 62.5%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-15 {
|
||||
top: 25%;
|
||||
left: 75%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-16 {
|
||||
top: 25%;
|
||||
left: 87.5%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-17 {
|
||||
top: 50%;
|
||||
left: 0%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-18 {
|
||||
top: 50%;
|
||||
left: 12.5%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-19 {
|
||||
top: 50%;
|
||||
left: 25%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-20 {
|
||||
top: 50%;
|
||||
left: 37.5%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-21 {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-22 {
|
||||
top: 50%;
|
||||
left: 62.5%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-23 {
|
||||
top: 50%;
|
||||
left: 75%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-24 {
|
||||
top: 50%;
|
||||
left: 87.5%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-25 {
|
||||
top: 75%;
|
||||
left: 0%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-26 {
|
||||
top: 75%;
|
||||
left: 12.5%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-27 {
|
||||
top: 75%;
|
||||
left: 25%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-28 {
|
||||
top: 75%;
|
||||
left: 37.5%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-29 {
|
||||
top: 75%;
|
||||
left: 50%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-30 {
|
||||
top: 75%;
|
||||
left: 62.5%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-31 {
|
||||
top: 75%;
|
||||
left: 75%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-32 {
|
||||
top: 75%;
|
||||
left: 87.5%;
|
||||
}
|
||||
|
||||
/**
|
||||
* The tile inside
|
||||
*
|
||||
* The "tile inner" is the part of the tile that serves as the card. Inside
|
||||
* this part, there's an outside and inside part. The outside of the card
|
||||
* is the part that has the logo or the pattern or whatever...basically the
|
||||
* part that doesn't show the content to be matched. The inside part has the
|
||||
* actual images / info to be matched.
|
||||
*/
|
||||
.mg__tile--inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mg__tile--outside,
|
||||
.mg__tile--inside {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
-webkit-transition: -webkit-transform 0.3s, background 0.3s;
|
||||
transition: transform 0.3s, background 0.3s;
|
||||
}
|
||||
|
||||
.mg__tile--outside {
|
||||
background: url("../img/default/logo-bw.png") 50% 50% no-repeat;
|
||||
background-color: #dcdee1;
|
||||
box-shadow: 0 0 0 1px #787a80;
|
||||
}
|
||||
|
||||
.mg__tile--inside {
|
||||
background-color: #f8fafc;
|
||||
box-shadow: 0 0 0 1px #787a80;
|
||||
-webkit-transform: rotateY(-180deg);
|
||||
transform: rotateY(-180deg);
|
||||
}
|
||||
|
||||
/* some transforms for flipped cards */
|
||||
.mg__tile--inner.flipped .mg__tile--outside {
|
||||
-webkit-transform: rotateY(-180deg);
|
||||
transform: rotateY(-180deg);
|
||||
}
|
||||
|
||||
.mg__tile--inner.flipped .mg__tile--inside {
|
||||
-webkit-transform: rotateY(0);
|
||||
transform: rotateY(0);
|
||||
}
|
||||
|
||||
/* some transitions for correct guesses - only needs to happen on card inside */
|
||||
.mg__tile--inner.flipped.correct .mg__tile--inside {
|
||||
background-color: #ffffdc;
|
||||
}
|
||||
|
||||
/**
|
||||
* Game message
|
||||
*
|
||||
* The game message area is an area to display game messages. It's used in the
|
||||
* default set up where no callback is set in the JS. If a callback is set up,
|
||||
* then this message area likely won't display. Unless you decide to display it
|
||||
* in your own custom callback though!
|
||||
*/
|
||||
.mg__onend {
|
||||
padding: 80px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mg__onend--heading {
|
||||
margin-bottom: 10px;
|
||||
color: #28aadc;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.mg__onend--message {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Game buttons
|
||||
*
|
||||
* A simple helper class for game buttons. Edit at your will.
|
||||
*/
|
||||
.mg__button {
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
padding: 5px;
|
||||
color: #fff;
|
||||
font-family: "Roboto Slab", serif;
|
||||
font-size: 14px;
|
||||
appearance: none;
|
||||
background: #ff3c50;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
box-shadow: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
SOME SOCIAL STYLES
|
||||
============================================================================= */
|
||||
.fb-like,
|
||||
.twitter-share-button {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.fb-like {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
FUSION ADS
|
||||
============================================================================= */
|
||||
/**
|
||||
* Fusion ads styles
|
||||
*
|
||||
* These are all the styles for my fusion ads. I'd reccommend deleting them if
|
||||
* you are going to use this in your own app, because they are useless and you
|
||||
* shouldn't be displaying my ad on your app/site in the first place. Thanks!
|
||||
*/
|
||||
#fusionads {
|
||||
display: inline-block;
|
||||
padding: 5px;
|
||||
background: white;
|
||||
font-size: 11px;
|
||||
line-height: 1.2;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#fusionads .fusion-wrap {
|
||||
display: block;
|
||||
margin: 0 0 5px 0;
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
#fusionads a.fusion-text {
|
||||
display: block;
|
||||
color: #787a80;
|
||||
}
|
||||
|
||||
#fusionads a.fusion-img {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
width: 130px;
|
||||
height: 100px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
#fusionads a.fusion-img img {
|
||||
display: block;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
#fusionads a.fusion-poweredby {
|
||||
color: #28aadc;
|
||||
}
|
||||
Reference in New Issue
Block a user