genemecija/learn-morse-code
1
0
Fork 0
mirror of https://github.com/genemecija/learn-morse-code.git synced 2026-04-09 00:03:59 +00:00
Code Issues Projects Releases Packages Wiki Activity

Challenge mode progress

Browse source
This commit is contained in:
Gene Mecija 2020-01-19 10:26:55 -08:00
parent 71625371e2
commit 71ebcf02c9
9 changed files with 99 additions and 111 deletions
Download patch file Download diff file Expand all files Collapse all files

56
src/scss/App.scss
View file

@ -125,22 +125,49 @@ html, body {
background: #EEE;
text-transform: uppercase;
align-self: center;
span {
padding: 4px;
margin: 1px;
}
}
#morseBufferDisplay, #challengeBufferDisplay {
display: flex;
justify-content: center;
// border: 1px solid green;
border: 1px solid green;
flex-direction: column;
align-items: center;
width: 100%;
height: 40px;
// height: 40px;
margin-bottom: 20px;
#alphanumeric-container {
// border-left: 2px solid #000;
padding-left: 5px;
width: 50%;
display: flex;
justify-content: center;
#alphanumeric {
font-size: 40px;
font-family: 'Courier';
font-weight: bold;
background-color: transparent;
&:first-child {
padding-left: 5px;
padding-right: 5px;
// box-shadow: $main-box-shadow;
}
}
}
#ditDahs {
width: 50%;
padding-right: 5px;
border-right: 2px solid #000;
// border-right: 2px solid #000;
display: flex;
flex-direction: row;
justify-content: flex-end;
justify-content: center;
.ditDah {
background: #DDD;
@ -158,26 +185,6 @@ html, body {
font-weight: bold;
}
}
#alphanumeric-container {
border-left: 2px solid #000;
padding-left: 5px;
width: 50%;
display: flex;
#alphanumeric {
font-size: 40px;
font-family: 'Courier';
font-weight: bold;
background-color: transparent;
&:first-child {
padding-left: 5px;
padding-right: 5px;
// box-shadow: $main-box-shadow;
}
}
}
}
.space {
@ -187,6 +194,7 @@ html, body {
background: rgba(255,0,0,0.4);
color: rgb(120, 0, 0);
border-radius: 5px;
// text-decoration: line-through;
}
.correct {
background: rgba(0,255,0,0.4);