add fonts, standardize textarea size
This commit is contained in:
parent
228e31a41a
commit
7f868c5a26
4 changed files with 15 additions and 8 deletions
|
@ -6,6 +6,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<link rel="stylesheet" href="%PUBLIC_URL%/stylesheets/reset.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Catamaran|Fira+Code&display=swap" rel="stylesheet">
|
||||
<title>Phono Change Applier</title>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
@ -8,6 +8,11 @@ div.App {
|
|||
padding: 1em 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.25em;
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
|
||||
div.PhonoChangeApplier {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
|
|
|
@ -3,12 +3,11 @@ import './ProtoLang.scss';
|
|||
|
||||
const ProtoLang = ({ lexicon, dispatch }) => {
|
||||
const getProperty = property => object => object[property];
|
||||
|
||||
const renderLexicon = () => {
|
||||
if (!lexicon) return '';
|
||||
// Code for optionally rendering epoch name with lexeme
|
||||
// `\t#${lexeme.epoch.name}`
|
||||
lexicon.map(getProperty('lexeme')).join('\n');
|
||||
return lexicon.map(getProperty('lexeme')).join('\n');
|
||||
}
|
||||
|
||||
return (
|
||||
|
@ -18,6 +17,8 @@ const ProtoLang = ({ lexicon, dispatch }) => {
|
|||
<form data-testid="ProtoLang-Lexicon">
|
||||
<textarea
|
||||
name="lexicon"
|
||||
cols="30"
|
||||
rows="10"
|
||||
data-testid="ProtoLang-Lexicon__textarea"
|
||||
value={renderLexicon()}
|
||||
onChange={e=> {
|
||||
|
|
|
@ -2,11 +2,7 @@
|
|||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
|
||||
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-family: 'Catamaran', Arial, Helvetica, sans-serif;
|
||||
background-color: map-get($colors, 'main--bg');
|
||||
color: map-get($colors, 'main');
|
||||
|
||||
|
@ -14,7 +10,11 @@ body {
|
|||
background-color: map-get($colors, 'text-input--bg');
|
||||
color: map-get($colors, 'text-input');
|
||||
border: 1px solid map-get($colors, 'main');
|
||||
font-family: monospace;
|
||||
font-family: 'Fira Code', monospace;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: 'Fira Code', monospace;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue