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

Tones work on iOS Safari

Browse source
This commit is contained in:
Gene Mecija 2019-12-27 00:41:53 -08:00
parent 1e75238eef
commit e7aa2c71b8
7 changed files with 417 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

135
src/scss/App.scss Normal file
View file

@ -0,0 +1,135 @@
html, body {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
box-sizing: border-box;
}
#root {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
#mode-picker {
display: flex;
div {
margin: 15px;
padding: 5px;
box-shadow: 0px 0px 15px #000;
}
}
#main-content {
width: 95vw;
border: 1px solid red;
display: flex;
flex-direction: column;
}
#morseButton {
width: 200px !important;
height: 200px;
margin: 30px;
background: goldenrod;
border-radius: 50%;
align-self: center;
}
#morseBufferDisplay {
display: flex;
justify-content: center;
border: 1px solid green;
width: 100%;
height: 40px;
#ditDahs {
width: 50%;
padding-right: 5px;
border-right: 2px solid #000;
display: flex;
flex-direction: row;
justify-content: flex-end;
.ditDah {
background: #DDD;
height: 40px;
width: 30px !important;
margin-left: 3px;
box-shadow: 0px 1px 0px #000;
display: flex;
justify-content: center;
align-items: center;
font-size: 35px;
font-family: 'Courier';
font-weight: bold;
}
}
#alphanumeric {
padding-left: 5px;
border-left: 2px solid #000;
width: 50%;
font-size: 40px;
font-family: 'Courier';
font-weight: bold;
}
}
.space {
font-size: 20px;
}
.morseError {
background: rgba(255,0,0,0.4);
}
#morseDisplay {
/* border: 1px solid blue; */
display: flex;
flex-direction: column;
.morseCard:nth-child(1){
opacity: 100%;
}
.morseCard:nth-child(2){
opacity: 70%;
}
.morseCard:nth-child(3){
opacity: 50%;
}
.morseCard:nth-child(4){
opacity: 30%;
}
.morseCard:nth-child(5){
opacity: 10%;
}
}
.morseCard {
display: flex;
flex-direction: row !important;
justify-content: center;
/* border: 1px solid orange; */
margin-bottom: 2px;
font-size: 40px;
font-family: 'Courier';
font-weight: bold;
/* width: 100%; */
div {
/* border: 1px solid purple; */
padding: 5px;
margin: 2px;
background: #EEE;
width: 50%;
white-space: nowrap;
}
.ditDahs {
display: flex;
justify-content: flex-end;
align-items: center;
overflow-wrap: break-word;
}
}