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

Responsive layout updates, Info updates

Browse source
This commit is contained in:
Gene Mecija 2020-02-12 01:16:40 -08:00
parent 925cf0ef36
commit 1117989502
9 changed files with 219 additions and 104 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/ChallengeComplete.js
View file

@ -8,15 +8,18 @@ export default (function ChallengeComplete(props) {
const {setChallengeState} = useContext(ChallengeContext)
function _continue() {
// setGameClockTime(0)
// props.setChallengeState('ready')
setChallengeState('ready')
}
const minutes = Math.floor(gameClockTime / 60)
const seconds = gameClockTime % 60
let time = (minutes === 0) ? `${seconds} seconds` : `${minutes} minutes and ${seconds} seconds`
return (
<div id="challengeComplete" className="notify">
<span id="notify-title">Challenge Complete</span>
<span id="message">Challenge completed in {gameClockTime} seconds!</span>
<span id="message">Challenge completed in {time}!</span>
<button id="continue" onClick={_continue}>Continue</button>
</div>

21
src/components/Info.js
View file

@ -10,19 +10,22 @@ export default React.memo(function Info() {
return (
<div id="info">
<h1>Morse Code</h1>
<p>Morse code is a method of communication that uses short and long tones. This tool will help you learn Morse Code.</p>
<p>Morse code is a method of communication that uses short and long tones. This tool will help beginners learn Morse code.</p>
<h2>Dits and Dahs</h2>
<p>
<span className="bold">Dit</span> <i className="ri-volume-up-fill" onClick={() => playMorseWord('.')}></i> Denoted as a period/dot (<span className="ditdah">.</span>), dits are short tones and are the base unit of Morse Code communication.<br />
<span className="bold">Dah</span> <i className="ri-volume-up-fill" onClick={() => playMorseWord('-')}></i> Denoted as a dash (<span className="ditdah">-</span>), dahs are long tones the length of three dits.
<span className="bold">Dit</span> <i className="ri-volume-up-fill" onClick={() => playMorseWord('.')}></i> (<span className="ditdah">.</span>) Short tones and the base unit length of Morse code communication.<br />
<span className="bold">Dah</span> <i className="ri-volume-up-fill" onClick={() => playMorseWord('-')}></i> (<span className="ditdah">-</span>) Long tones, each the length of three dits.
</p>
<h2>Spacing</h2 >
<p>The spacing between dits and dahs matters in Morse Code. Spacing of various lenghts signify different things.<br/>
<span className="bold">Intra-character Spacing</span> <i className="ri-volume-up-fill" onClick={() => playMorseWord('...')}></i> Spaces between dits and dahs the length of one dit signify the dits and dahs are part of the same character. E.g. three dits (<span className="ditdah">...</span>) separated by one-dit-long spaces is an "S".<br />
<span className="bold">Inter-character Spacing</span> <i className="ri-volume-up-fill" onClick={() => playMorseWord('. . .')}></i> Space the length of three dits signify a new letter. A single dit is an "E". Three dits, each separated by three-dit-long spaces (<span className="ditdah">. . .</span>), is "EEE".<br />
<span className="bold">Inter-word Spacing</span> <i className="ri-volume-up-fill" onClick={() => playMorseWord('././.')}></i> Space the length of seven dits signifies a new word. Three dits, each separated by seven-dit-long spaces (denoted by a forward slash in this example: <span className="ditdah">././.</span>), is "E E E".
<p>The spacing between dits and dahs matters in Morse Code. Spacing of various lengths signify different things.<br/>
<span className="bold">Intra-character Spacing</span> A letter in Morse code can be made up of multiple dits and dahs. The spaces between the dits and dahs that make up a single letter are each the length of one dit. E.g., three dits, each separated by one-dit-long spaces, is an "S". (<span className="ditdah">...</span>) <i className="ri-volume-up-fill" onClick={() => playMorseWord('...')}></i><br />
<span className="bold">Inter-character Spacing</span> The space between consecutive letters is three dits long. E.g., three dits, each separated by a three-dit-long spaces is "EEE". (<span className="ditdah">. . .</span>) <i className="ri-volume-up-fill" onClick={() => playMorseWord('. . .')}></i><br />
<span className="bold">Inter-word Spacing</span> The space between words is seven dits long. E.g., three dits, each separated by seven-dit-long spaces (denoted by a forward slash in this example: <span className="ditdah">././.</span>), is "E E E". <i className="ri-volume-up-fill" onClick={() => playMorseWord('././.')}></i>
</p>
<h2>Speed</h2>
@ -36,7 +39,9 @@ export default React.memo(function Info() {
<center><img src={straight_key} alt="Straight Key" /></center>
<p><b>Straight Keys</b> use a single button and generate tones when pressed down. Straight keys require greater accuracy as the length of dits, dahs, and spacing is completely under manual control.</p>
<center><img src={electronic_key} alt="Electronic Key"></img></center>
<p><b>Electronic Keys</b> use two paddles (one for dit, one for dah) that automatically generate the tones when pressed. The Electronic Keyer used here is an Iambic keyer, which alternates between dit and dah when both paddles are pressed. Switch between the two at the appropriate times to build letters in Morse Code.</p>
<p><b>Electronic Keys</b> use paddles that automatically generate dits and dahs when pressed. The Electronic Keyer used here is an Iambic keyer that uses two paddles–left paddle for dits, right paddle for dahs. Pressing both paddles simultaneously alternates between dit and dah. Switch between the two at the appropriate times to build letters in Morse Code.</p>
<p>Check out <a href='https://www.youtube.com/watch?v=uEy4Wvy6uUg' target='_blank' rel="noopener noreferrer">this video</a> for a demonstration of the difference between Straight and Electronic keys.</p>
</div>
)
})

1
src/components/MorseHistory_textbox.js
View file

@ -38,6 +38,7 @@ export default (function MorseHistoryTextBox() {
<div id="morse-history">
<div id="morseHistory-textbox">{text}</div>
<div id="clear">
<span id="message">"<span className="ditDah">[?]</span>" signifies no translation available.</span>
<button id="clear-history" onClick={clearHistory}>Clear</button>
</div>
</div>

2
src/components/SidebarLeft.js
View file

@ -45,7 +45,7 @@ export default (function SidebarLeft() {
</div>
</div>
<div id="info-icon" onClick={toggleLeft}><i className="ri-information-line"></i></div>
<div id="info-icon" onClick={toggleLeft}><i className="ri-arrow-left-circle-line"></i></div>
<div id='sidebar-content'>
{sidebarContent === 'nav-learn' && <Info />}

131
src/css/App.css
View file

@ -15,7 +15,6 @@
button {
font-family: "Roboto", sans-serif;
cursor: pointer;
}
html, body {
@ -121,6 +120,12 @@ html, body {
overflow-y: hidden;
}
#main-content .sidebar#left.hide #sidebar-container #info-icon {
top: 0px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
#main-content .sidebar#left #sidebar-container {
height: 100%;
width: 100%;
@ -180,13 +185,8 @@ html, body {
top: 7px;
right: 6px;
z-index: 1010;
-webkit-transition: all 100ms ease-in-out;
transition: all 100ms ease-in-out;
}
#main-content .sidebar#left #sidebar-container #info-icon:hover {
-webkit-transform: scale(1.08);
transform: scale(1.08);
-webkit-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
#main-content .sidebar#left #sidebar-container #info-icon:hover i {
@ -283,6 +283,14 @@ html, body {
color: goldenrod;
}
#main-content .sidebar#left #sidebar-container #sidebar-content #info a:visited {
color: #333;
}
#main-content .sidebar#left #sidebar-container #sidebar-content #info a:hover {
color: goldenrod;
}
#main-content #main-interface {
background: whitesmoke;
display: -webkit-box;
@ -481,6 +489,7 @@ html, body {
#footer a:hover {
color: gold;
text-decoration: underline;
}
h2 {
@ -488,7 +497,6 @@ h2 {
}
i[class*="ri-"] {
cursor: pointer;
font-weight: normal;
font-size: 0.9rem;
color: #777;
@ -589,10 +597,6 @@ i[class*="ri-"] {
margin-bottom: 10px;
}
#legend #legend-items .item, #legend #legend-items span {
cursor: pointer;
}
#legend #legend-items .item {
font-family: "Courier", monospace;
font-size: 0.85em;
@ -683,7 +687,7 @@ i[class*="ri-"] {
transition: width 500ms ease-out, background 500ms ease-out, -webkit-transform 40ms ease-out, -webkit-box-shadow 40ms ease-out;
transition: transform 40ms ease-out, box-shadow 40ms ease-out, width 500ms ease-out, background 500ms ease-out;
transition: transform 40ms ease-out, box-shadow 40ms ease-out, width 500ms ease-out, background 500ms ease-out, -webkit-transform 40ms ease-out, -webkit-box-shadow 40ms ease-out;
background: lightgray;
background: rgba(112, 138, 144, 0.5);
}
#morseButton.active {
@ -698,34 +702,32 @@ i[class*="ri-"] {
color: transparent;
width: 50px;
height: 100px;
background: lightgray;
background: rgba(112, 138, 144, 0.5);
margin: 0px;
border: 0px;
-webkit-transition: width 500ms ease-out, background 500ms ease-out, color 500ms ease-out, -webkit-transform 40ms ease-out, -webkit-box-shadow 500ms ease-out;
transition: width 500ms ease-out, background 500ms ease-out, color 500ms ease-out, -webkit-transform 40ms ease-out, -webkit-box-shadow 500ms ease-out;
transition: transform 40ms ease-out, box-shadow 500ms ease-out, width 500ms ease-out, background 500ms ease-out, color 500ms ease-out;
transition: transform 40ms ease-out, box-shadow 500ms ease-out, width 500ms ease-out, background 500ms ease-out, color 500ms ease-out, -webkit-transform 40ms ease-out, -webkit-box-shadow 500ms ease-out;
-webkit-transition: width 500ms ease-out, background 500ms ease-out, color 500ms ease-out, -webkit-transform 40ms ease-out, -webkit-box-shadow 40ms ease-out;
transition: width 500ms ease-out, background 500ms ease-out, color 500ms ease-out, -webkit-transform 40ms ease-out, -webkit-box-shadow 40ms ease-out;
transition: transform 40ms ease-out, box-shadow 40ms ease-out, width 500ms ease-out, background 500ms ease-out, color 500ms ease-out;
transition: transform 40ms ease-out, box-shadow 40ms ease-out, width 500ms ease-out, background 500ms ease-out, color 500ms ease-out, -webkit-transform 40ms ease-out, -webkit-box-shadow 40ms ease-out;
}
#morseButton button.showPaddles {
color: #888;
font-size: 1rem;
font-weight: bold;
width: 30px;
color: transparent;
border-radius: 50px;
width: 50px;
height: 100px;
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.35), 0px -1px 1px white;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.35), 0px -1px 1px white;
}
#morseButton button#left {
border-radius: 50px 0 0 50px;
width: 50%;
-webkit-transition: all 500ms ease-out;
transition: all 500ms ease-out;
border-radius: 50px 0px 0px 50px;
display: none;
}
#morseButton button#left.showPaddles {
border-radius: 50px 0 0 50px;
display: inline-block;
margin-right: 7px;
border-radius: 20px;
@ -734,12 +736,11 @@ i[class*="ri-"] {
#morseButton button#right {
border-radius: 0 50px 50px 0;
width: 50%;
-webkit-transition: all 500ms ease-out;
transition: all 500ms ease-out;
display: none;
}
#morseButton button#right.showPaddles {
border-radius: 0 50px 50px 0;
display: inline-block;
margin-left: 7px;
border-radius: 20px;
@ -748,12 +749,13 @@ i[class*="ri-"] {
#morseButton button.active {
-webkit-transform: translateY(3px);
transform: translateY(3px);
-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3);
}
#morseButton.showPaddles {
width: 150px;
height: 100px;
background: transparent;
-webkit-box-shadow: 0px 0px 0px transparent;
box-shadow: 0px 0px 0px transparent;
@ -762,7 +764,7 @@ i[class*="ri-"] {
#morseButtonText {
font-weight: bold;
color: #aaa;
font-size: 0.7rem;
font-size: 0.9rem;
}
#paddleText {
@ -1116,7 +1118,7 @@ i[class*="ri-"] {
box-shadow: inset 20px 0px 20px -5px whitesmoke;
position: absolute;
display: inline-block;
top: 0;
top: 20px;
left: calc(50% - 37.5%);
width: 600px;
height: 5rem;
@ -1142,7 +1144,7 @@ i[class*="ri-"] {
#morseBufferDisplay #ditDahs-container {
text-align: center;
max-width: 75%;
max-width: 70vw;
display: inline-block;
overflow: hidden;
}
@ -1282,6 +1284,7 @@ i[class*="ri-"] {
align-items: flex-end;
width: 80%;
max-width: 500px;
margin-top: 3em;
}
#morse-history #morseHistory-textbox {
@ -1299,6 +1302,7 @@ i[class*="ri-"] {
align-content: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
overflow-y: scroll;
}
#morse-history #morseHistory-textbox span {
@ -1314,22 +1318,45 @@ i[class*="ri-"] {
}
#morse-history #clear {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
#morse-history #clear #message {
padding: 0.3em;
font-size: 0.9em;
color: #777;
}
#morse-history #clear #message .ditDah {
font-family: "Courier", monospace;
}
#morse-history #clear button {
background: #ddd;
background: #ededed;
color: #666;
font-size: 1em;
height: 1.5em;
border: 0px;
border-radius: 3px;
padding: 3px;
text-transform: uppercase;
padding: 0.7em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#morse-history #clear button:hover {
color: maroon;
}
#morseHistory {
@ -1504,7 +1531,6 @@ i[class*="ri-"] {
width: 20%;
}
#root #main-content #main-interface {
border: 1px solid red;
max-width: 100vw;
position: relative;
left: 100%;
@ -1587,19 +1613,44 @@ i[class*="ri-"] {
-ms-flex-pack: end;
justify-content: flex-end;
margin-bottom: 0px;
margin-top: 0px;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
}
#root #main-content #main-interface #morseBufferDisplay #alphanumeric-container {
min-height: 3.5rem;
max-height: 3.5rem;
margin-bottom: 0px;
padding: 0px;
}
#root #main-content #main-interface #morseBufferDisplay #alphanumeric-container #alphanumeric {
height: 3.5rem;
min-height: 3.5rem;
font-size: 3rem;
}
#root #main-content #main-interface #morseBufferDisplay #ditDahs-container {
margin-top: 0;
margin-bottom: 0;
min-height: 2.3rem;
max-height: 2.3rem;
}
#root #main-content #main-interface #morseBufferDisplay #ditDahs-container #ditDahs {
min-height: 2rem;
max-height: 2rem;
}
#root #main-content #main-interface #morseBufferDisplay #ditDahs-container #ditDahs .ditDah {
height: 2rem;
min-width: 1.7rem;
max-width: 1.7rem;
font-size: 2rem;
}
#root #main-content #main-interface #morse-history {
height: 3rem;
margin-top: 0px;
}
#root #main-content #main-interface #morse-history #morseHistory-textbox {
background: #fff;
min-height: 2em;
max-height: 2em;
}
#root #main-content #main-interface #challenge-header {
padding: 5px;

2
src/css/App.css.map
View file

File diff suppressed because one or more lines are too long

4
src/hooks/useElectronicKey.js
View file

@ -200,7 +200,9 @@ function useElectronicKey() {
function handleInputStart(event) {
if (event.type === 'touchstart') {event.preventDefault()}
if (event.type === 'touchstart') {
event.preventDefault()
}
paddlesReleasedSimultaneously = false

22
src/hooks/useStraightKey.js
View file

@ -42,10 +42,10 @@ function useStraightKey() {
let isRunning = false
function handleInputStart(event) {
// console.log(event.type, event.target);
if (event.type === 'touchstart') {event.preventDefault()}
if (event.type === 'touchstart') {
event.preventDefault()
}
if (event.keyCode === 32) {
if (document.activeElement.id === 'morseInput') {
@ -104,10 +104,6 @@ function useStraightKey() {
}
function handleInputEnd(event) {
console.log(event.type, event.target);
if (event.type === 'touchend') {event.preventDefault()}
if (isRunning) {
if ((event.keyCode !== 32 &&
event.target.id !== "morseButton" &&
@ -129,6 +125,10 @@ function useStraightKey() {
stopCharTimer()
startGapTimer()
// Account for bug triggered when pressing paddle button (e.g.) outside of body, then clicking into body, and depressing key
if (o === undefined) {
return
}
if (o.context.state === 'running') {
g.gain.setTargetAtTime(0.0001, context.currentTime, 0.001)
o.stop(context.currentTime + 0.05)
@ -183,11 +183,11 @@ function useStraightKey() {
const morseButton = document.getElementById('morseButton')
// paddles.forEach(paddle => {
morseButton.addEventListener('mousedown', handleInputStart)
morseButton.addEventListener('touchstart', handleInputStart)
morseButton.addEventListener('touchend', handleInputEnd)
morseButton.addEventListener('mousedown', handleInputStart)
morseButton.addEventListener('mouseout', handleInputEnd)
morseButton.addEventListener('mouseup', handleInputEnd)
morseButton.addEventListener('touchend', handleInputEnd)
// })
return function cleanup() {
@ -195,11 +195,11 @@ function useStraightKey() {
document.removeEventListener('keyup', handleInputEnd)
const morseButton = document.getElementById('morseButton')
morseButton.removeEventListener('mousedown', handleInputStart)
morseButton.removeEventListener('touchstart', handleInputStart)
morseButton.removeEventListener('touchend', handleInputEnd)
morseButton.removeEventListener('mousedown', handleInputStart)
morseButton.removeEventListener('mouseout', handleInputEnd)
morseButton.removeEventListener('mouseup', handleInputEnd)
morseButton.removeEventListener('touchend', handleInputEnd)
// const paddles = document.querySelectorAll('.paddle')
// paddles.forEach(paddle => {

131
src/scss/App.scss
View file

@ -29,7 +29,6 @@ $main-border-radius: 3px;
}
button {
font-family: $main-font;
cursor: pointer;
}
html, body {
height: 100%;
@ -106,9 +105,15 @@ html, body {
top: 50px;
overflow-y: hidden;
#sidebar-container #sidebar-content #info {
opacity: 0%;
overflow-y: hidden;
#sidebar-container {
#sidebar-content #info {
opacity: 0%;
overflow-y: hidden;
}
#info-icon {
top: 0px;
transform: rotate(180deg);
}
}
}
@ -158,10 +163,11 @@ html, body {
top: 7px;
right: 6px;
z-index: 1010;
transition: all 100ms ease-in-out;
transition: all 500ms ease-in-out;
&:hover {
transform: scale(1.08);
i {color: goldenrod;}
i {
color: goldenrod;
}
}
i {
color: #333;
@ -175,8 +181,6 @@ html, body {
display: flex;
justify-content: center;
align-self: center;
// height: calc(100% - 35px);
// height: 100%;
#playerAndLegend {
// border: 1px solid fuchsia;
@ -201,7 +205,6 @@ html, body {
#info {
// border: 1px solid red;
height: fit-content;
padding: 2.5em;
font-family: $main-font;
@ -233,6 +236,12 @@ html, body {
i:hover {
color: goldenrod;
}
a:visited {
color: #333;
}
a:hover {
color: goldenrod;
}
}
}
}
@ -391,13 +400,14 @@ html, body {
}
a:hover {
color: gold;
text-decoration: underline;
}
}
h2 {
margin-bottom: 0.5em;
}
i[class*="ri-"] {
cursor: pointer;
// cursor: pointer;
font-weight: normal;
font-size: 0.9rem;
color: #777;
@ -473,9 +483,6 @@ i[class*="ri-"] {
width: fit-content;
height: fit-content;
margin-bottom: 10px;
.item, span {
cursor: pointer;
}
// &#letters .item {
// width: 17%;
@ -564,7 +571,7 @@ i[class*="ri-"] {
$button-diameter: 100px;
$button-radius: 50px;
$morse-button-color: lightgray;
$morse-button-color: rgba(112, 138, 144,0.5);
#morseButton {
width: $button-diameter;
@ -597,23 +604,23 @@ $morse-button-color: lightgray;
margin: 0px;
border: 0px;
// transition: all 20ms ease-out;
transition: transform 40ms ease-out, box-shadow 500ms ease-out, width 500ms ease-out, background 500ms ease-out, color 500ms ease-out;
transition: transform 40ms ease-out, box-shadow 40ms ease-out, width 500ms ease-out, background 500ms ease-out, color 500ms ease-out;
&.showPaddles {
color: #888;
font-size: 1rem;
font-weight: bold;
width: 30px;
color: transparent;
border-radius: $button-radius;
width: $button-radius;
height: $button-diameter;
box-shadow: $main-box-shadow-light;
}
&#left {
border-radius: $button-radius 0 0 $button-radius;
width: 50%;
transition: all 500ms ease-out;
border-radius: $button-radius 0px 0px $button-radius;
// transition: all 500ms ease-out;
display: none;
// background: red;
&.showPaddles{
border-radius: $button-radius 0 0 $button-radius;
display: inline-block;
margin-right: 7px;
border-radius: 20px;
@ -622,10 +629,11 @@ $morse-button-color: lightgray;
&#right {
border-radius: 0 $button-radius $button-radius 0;
width: 50%;
transition: all 500ms ease-out;
// transition: all 500ms ease-out;
display: none;
// background: blue;
&.showPaddles{
border-radius: 0 $button-radius $button-radius 0;
display: inline-block;
margin-left: 7px;
border-radius: 20px;
@ -633,12 +641,13 @@ $morse-button-color: lightgray;
}
&.active {
transform: translateY(3px);
box-shadow: 0px 0px 2px rgba(0,0,0,0.3);
box-shadow: 0px 0px 1px rgba(0,0,0,0.3);
}
}
&.showPaddles {
width: 150px;
height: $button-diameter;
background: transparent;
box-shadow: 0px 0px 0px transparent;
}
@ -646,7 +655,7 @@ $morse-button-color: lightgray;
#morseButtonText {
font-weight: bold;
color: #aaa;
font-size: 0.7rem;
font-size: 0.9rem;
}
#paddleText {
width: 140px;
@ -926,7 +935,7 @@ $morse-button-color: lightgray;
box-shadow: inset 20px 0px 20px -5px rgb(245, 245, 245); //this
position: absolute;
display: inline-block;
top:0;
top:20px;
left: calc(50% - 37.5%);
width: 600px;
height: 5rem;
@ -958,7 +967,7 @@ $morse-button-color: lightgray;
#ditDahs-container {
// border: 1px solid red;
text-align: center;
max-width: 75%;
max-width: 70vw;
display: inline-block;
overflow: hidden;
@ -1056,6 +1065,7 @@ $morse-button-color: lightgray;
align-items: flex-end;
width: 80%;
max-width: 500px;
margin-top: 3em;
#morseHistory-textbox {
// border: 1px solid cyan;
background: #fff;
@ -1068,7 +1078,7 @@ $morse-button-color: lightgray;
display: flex;
align-content: flex-start;
flex-wrap: wrap;
overflow-y: scroll;
span {
margin: 5px;
@ -1082,16 +1092,32 @@ $morse-button-color: lightgray;
}
}
#clear {
width: 100%;
display: flex;
height: fit-content;
justify-content: space-between;
#message {
padding: 0.3em;
font-size: 0.9em;
color: #777;
.ditDah {
font-family: $ditDah-font;
}
}
button {
background: #ddd;
background: #ededed;
color: #666;
font-size: 1em;
height: 1.5em;
border: 0px;
border-radius: 3px;
padding: 3px;
text-transform: uppercase;
// border-radius: 3px;
padding: 0.7em;
display: flex;
align-items: center;
// text-transform: uppercase;
&:hover {
color: maroon;
}
}
}
}
@ -1229,8 +1255,6 @@ $morse-button-color: lightgray;
#main-content {
height: calc(100vh - 4.1em);
.sidebar#left {
top: 2.2em;
width: 100vw;
@ -1263,7 +1287,7 @@ $morse-button-color: lightgray;
}
#main-interface {
border: 1px solid red;
// border: 1px solid red;
max-width: 100vw;
position: relative;
left: 100%;
@ -1341,23 +1365,52 @@ $morse-button-color: lightgray;
// border: 1px solid black;
justify-content: flex-end;
margin-bottom: 0px;
margin-top: 0px;
height: fit-content;
#alphanumeric-container {
// background: blue;
// border: 1px solid green;
min-height: 3.5rem;
max-height: 3.5rem;
margin-bottom: 0px;
padding: 0px;
#alphanumeric {
// background: red;
height: 3.5rem;
// font-size: 3rem;
min-height: 3.5rem;
font-size: 3rem;
}
}
#ditDahs-container {
// border: 1px solid blue;
margin-top: 0;
margin-bottom: 0;
min-height: 2.3rem;
max-height: 2.3rem;
#ditDahs {
min-height: 2rem;
max-height: 2rem;
.ditDah {
// background: red;
height: 2rem;
min-width: 1.7rem;
max-width: 1.7rem;
font-size: 2rem;
// font-size: 1rem;
// height: 1em;
// width: 0.7em;
}
}
}
}
#morse-history {
height: 3rem;
// border: 2px solid cyan;
margin-top: 0px;
#morseHistory-textbox {
// border: 2px solid cyan;
background: #fff;
min-height: 2em;
max-height: 2em;
}
}
#challenge-header {
padding: 5px;