franjsco
/
tomadoro
mirror of https://github.com/franjsco/tomadoro
1
0
Fork 0
Code Issues Releases Wiki Activity

refactor: changed style

This commit is contained in:
Francesco Esposito 2019-10-25 09:58:41 +02:00
parent 85d02c5bc4
commit 3ff0ddf16f
6 changed files with 21 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,7 +1,7 @@
{ {
"name": "tomadoro", "name": "tomadoro",
"description": "tomadoro", "description": "tomadoro",
"version": "1.4.1", "version": "1.5.0",
"private": true, "private": true,
"engines": { "engines": {
"npm": "6.4.1", "npm": "6.4.1",

BIN
screenshot.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 114 KiB

After

Width:  |  Height:  |  Size: 86 KiB

22
src/App.css
View File

@ -1,7 +1,7 @@
@import url('https://fonts.googleapis.com/css?family=Fredoka+One'); @import url('https://fonts.googleapis.com/css?family=Fredoka+One');
body { body {
background-color: #f04d3b; /* e74c3c */ background-color: #2e2929; /* e74c3c f04d3b 272222 */
user-select: none; user-select: none;
font-family: 'Fredoka One', cursive; font-family: 'Fredoka One', cursive;
color: white; color: white;
@ -21,18 +21,16 @@ body {
} }
.App-header { .App-header {
background-color: #c94233; /*c0392b*/
display: flex; display: flex;
min-height: 5vh; min-height: 5vh;
flex-direction: column; flex-direction: column;
text-align: 'left';
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: calc(25px + 2vmin); font-size: 44px;
color: white; color: white;
text-shadow: 0 0 1px #2b0f0f, 0 0 2px rgb(193, 194, 190); text-shadow: 0 2px 4px #909090; /* 909090 */
margin-bottom: 20px; margin-bottom: 6px;
box-shadow: 0 0 2px #cf4242, 0 0 6px #2B2D1F;
} }
a { a {
@ -45,15 +43,15 @@ a:hover {
.footer { .footer {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
margin-top: 15px; margin-top: 8px;
color: #ffffff; color: #ffffff;
text-shadow: 0 0 2px #cf4242, 0 0 3px rgb(193, 194, 190); text-shadow: 0 2px 3px #a3a3a3;
} }
.timer { .timer {
font-size: 100px; font-size: 110px;
font-weight: normal; font-weight: normal;
text-shadow: 0 0 1px #4b4b4b, 0 0 5px rgb(193, 194, 190); text-shadow: 0 2px 3px #8a8888; /*0 0 1px #4b4b4b, 0 0 5px rgb(193, 194, 190); a3a3a3*/
color: white; color: #ffebeb;
} }

2
src/App.js
View File

@ -169,7 +169,7 @@ class App extends Component {
<div className="footer"> <div className="footer">
<p> <p>
<a href="https://github.com/frsposito/tomadoro">tomadoro</a>{` `} <a href="https://github.com/frsposito/tomadoro">tomadoro</a>{` `}
by <a href="https://github.com/frsposito">@frsposito</a> (Francesco Esposito) by <a href="https://github.com/frsposito">Francesco Esposito</a>
</p> </p>
</div> </div>
</div> </div>

22
src/components/Box.css
View File

@ -2,25 +2,15 @@
font-size: 16px; font-size: 16px;
font-weight: lighter; font-weight: lighter;
height: 50px; height: 50px;
border-radius: 40px; border-radius: 30px;
width: 100%; width: 100%;
margin: 5px 0px 5px 0px; margin: 4px 0px 4px 0px;
transition: all .2s ease-in-out;
box-shadow:0 0 1px #111110, 0 0 10px rgb(193, 194, 190);
} }
.box { .box {
padding: 10px; padding: 6px;
background-color: white; background-color: white;
border-radius: 10px; border-radius: 6px;
box-shadow:0 0 1px #111010, 0 0 10px rgb(193, 194, 190); border-bottom: 20px solid #c84132;
} box-shadow: 0 2px 3px #8a8888;
.button:hover {
transform: scale(1.01);
}
.button:focus {
transform: scale(1.01);
box-shadow:0 0 5px #111010, 0 0 10px rgb(193, 194, 190);
} }

6
src/components/Logo.css
View File

@ -1,13 +1,13 @@
.App-logo { .App-logo {
height: 130px; height: 160px;
filter: drop-shadow(0 0 0.30rem #f8ff9c); filter: drop-shadow(0 0 0.28rem #e7d8786b);
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
transition: all .3s ease-in-out; transition: all .3s ease-in-out;
} }
.App-logo:hover { transform: scale(1.2); } .App-logo:hover { transform: scale(1.1); }
.App-logo-rotation { .App-logo-rotation {
animation: App-logo-spin infinite 5s linear; animation: App-logo-spin infinite 5s linear;