Skip to content

Commit

Permalink
lines score added
Browse files Browse the repository at this point in the history
  • Loading branch information
@kubowania
kubowania committed Jul 18, 2019
1 parent 6282a9c commit d299a3b
Show file tree
Hide file tree
Showing 5 changed files with 86 additions and 242 deletions.
128 changes: 55 additions & 73 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,18 +44,33 @@ h2 {
color: #d8edea;
}

h3 {
text-align: center;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-size: 10px;
font-weight: 300;
color: #d8edea;
margin-top: 100px;
margin-left: -60px;
}

.score-display {
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-size: 50px;
letter-spacing: 15px;
letter-spacing: 2px;
font-weight:300;
color: rgb(133,121,107,0.5);
padding-left: 15px;
padding-left: 0px;
padding-bottom: 0px;
margin-bottom: 20px;
margin-top: 15px;
padding-top: 0px;
}



.column-left {
width: 300px;
display: flex;
Expand Down Expand Up @@ -107,19 +122,8 @@ h2 {
background-image: url(/Users/limit/development/Tetris/images/pink_block.png);
}

.tTetromino {
background-color: purple;
}

.iTetromino {
background-color: brown;
}

.takenBlock {
background-color: blue;
}

.grid {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
width: 200px;
Expand All @@ -133,7 +137,7 @@ h2 {
.button {
position: relative;
width:220px;
height:20px;
height:22px;
text-align:center;
color:#FFF;
text-transform: uppercase;
Expand Down Expand Up @@ -203,20 +207,6 @@ h2 {

.end {
background-image: url(/Users/limit/development/Tetris/images/blue_block.png)

/* background-image:-webkit-linear-gradient(top, #d8edea, #cadbd8);
background-image:-moz-linear-gradient(top, #d8edea, #cadbd8);
background-image:-ms-linear-gradient(top, #d8edea, #cadbd8);
background-image:-o-linear-gradient(top, #d8edea, #cadbd8);
background-image:linear-gradient(to bottom, #d8edea, #cadbd8); */

/* -webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #9daba8, 0 4px 2px rgba(0, 0, 0, .5);
-moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #9daba8, 0 4px 2px rgba(0, 0, 0, .5);
box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #9daba8, 0 4px 2px rgba(0, 0, 0, .5); */
}

.display {
Expand All @@ -235,23 +225,23 @@ border-radius:5px;
box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
}

.score {
.score{
padding-top: 15px;
letter-spacing: 1px;
font-size: 12px;
color: #85796b;
padding-bottom: 0px;
margin-bottom: 0px;
}

/*menu*/

:root {
--primary-color: rgba(13, 110, 139, 0.75);
--secondary-color: rgba(229, 148, 0, 0.9);
--overlay-color: rgba(24, 39, 51, 0.85);
--menu-speed: 0.75s;
.lines-display {
letter-spacing: 1px;
font-size: 12px;
color: #85796b;
margin-left: -60px;
}


/*menu*/
.container {
max-width: 600px;
padding: 0 3rem;
Expand Down Expand Up @@ -290,7 +280,7 @@ box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
width: 40px;
height:40px;
padding: 1rem;
background: var(--primary-color);
background: rgba(13, 110, 139, 0.75);
align-items: center;
justify-content: center;
}
Expand Down Expand Up @@ -337,32 +327,31 @@ box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
/* Rotate On Hover When Checked */
.menu-wrap .toggler:checked:hover + .hamburger > div { transform: rotate(225deg); }

/* Show Menu */
.menu-wrap .toggler:checked ~ .menu {
visibility: visible;
}

.menu-wrap .toggler:checked ~ .menu > div {
transform: scale(1);
transition-duration: var(--menu-speed);
}

.menu-wrap .toggler:checked ~ .menu > div > div {
opacity: 1;
transition: ease 0.4s;
}

.menu-wrap .menu {
.menu {
display: flex;
justify-content: center;
position: fixed;
top: 0;
z-index: 1;
left: 0;
display: flex;
top: 0;
width: 100%;
height: 100%;
visibility: hidden;
overflow: hidden;
align-items: center;
justify-content: center;
overflow: auto;
background-color: rgba(24, 39, 51, 0.85);
}

.menu-content {
text-align: center;
width: 600px;
align-items: center;
margin-top: 230px;
justify-content: center;
width: 200vw;
height: 200vh;
border-radius: 50%;
transition: all 0.8s ease;

}

p {
Expand All @@ -371,23 +360,16 @@ p {
font-weight: 300;
color: #d8edea;
transition: color 0.4s ease;

}

.bold {
color: #f8de7e;
}

.menu-wrap .menu > div {
display: flex;
flex-direction: column;
width: 200vw;
height: 200vh;
background: var(--overlay-color);
border-radius: 50%;
flex: none;
align-items: center;
justify-content: center;
transform: scale(0);
transition: all 0.4s ease;
.close {
border-style: none;
border-radius: 5px;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
color:rgba(24, 39, 51, 0.85);
}
9 changes: 6 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,10 @@
<input type="checkbox" class="toggler">
<div class="hamburger"><div></div></div>
<div class="menu">
<div>
<div class="menu-content">
<h2>rules</h2>
<p>Please use the <b class="bold">UP</b> key to rotate your tetromino, and <b class="bold">LEFT</b> and <b class="bold">RIGHT</b> to move across the board. Pressing <b class="bold">DOWN</b> will speed up the tetromino.</p>
<p>Please use the <b class="bold">UP</b> key to rotate your tetromino, and <b class="bold">LEFT</b> and <b class="bold">RIGHT</b> to <br> move across the board. Pressing <b class="bold">DOWN</b> will speed up the tetromino.</p>
<button class="close">X</button>
</div>
</div>
</div>
Expand Down Expand Up @@ -260,9 +261,11 @@ <h1 class="score-display">0</h1>
<div></div>
<div></div>
</div>
<h2 class="lines-display">Lines:<span class="lines-score"></span></h2>
</div>
</div>
<a class="button" href="#">Start</a>
<button class="button" href="#">Start</button>
<h3 class='footer'>made with love 2019</h3>
</section>
</main>
</body>
Expand Down
119 changes: 0 additions & 119 deletions js/app.js
View file

This file was deleted.

Loading

0 comments on commit d299a3b

Please sign in to comment.