Rockingcool
/
india-translator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added responsive font resizing (with viewport width); removed dangling 'p' tag

Browse Source
master
Aadhavan Srinivasan 1 week ago
parent d769797136
commit 11b9635e50
1 changed files with 26 additions and 16 deletions
Show Stats Download Patch File Download Diff File

40
index.html
Unescape Escape View File

@ -57,7 +57,8 @@
.translationText, .romanizationText {
visibility: hidden;
font-family: "Noto Sans";
font-size:1.2em;
/* font-size:1.2em; */
font-size: max(0.8vmax, 16px);
}
.romanizationText {
@ -67,7 +68,8 @@
.languageText {
pointer-events: none;
font-weight: bold;
font-size: 1em;
/* font-size: 1em;*/
font-size: max(0.7vmax, 14px);
font-family: sans-serif;
visibility: hidden;
}
@ -115,6 +117,16 @@
flex: 0 1 0;
}
section#textStuff ul {
font-size: 1.2em;
line-height: 1.5rem;
max-width: 35em;
}
section#textStuff li {
margin: 1em 0;
}
/* Position map load spinner in the middle of the SVG */
#svgContainer {
position: relative;
@ -189,24 +201,23 @@
.district {
stroke-width: 0.1;
}
.translationText, .romanizationText {
/* .translationText, .romanizationText {
font-size: 1em;
}
.languageText {
font-size: 0.8em;
}
} */
}
@media only screen and (max-width: 768px) {
/* @media only screen and (max-width: 768px) {
.translationText, .romanizationText {
font-size: 0.7em;
font-size: 0.8em;
}
.languageText {
font-size: 0.6em;
}
}
} */
</style>
</head>
<body>
@ -223,14 +234,13 @@
<noscript>
<h2>This website requires javascript to work.</h2>
</noscript>
<p>
<ul>
<li>Enter text in English. Translations are displayed on the map, along with romanizations (translation converted to Latin script).
<li>Hover over a language region (denoted by color) to see the language spoken in the region. Language boundaries were drawn using census data; they may be inaccurate.
<li>Translations are retrieved from Google Translate - they may be innacurate.
<li>Romanizations are made with the <kbd>ai4bharat-transliteration</kbd> AI model, developed by <a href="https://ai4bharat.iitm.ac.in/">Ai4Bharat</a>.
<ul>
<li>Enter text in English. Translations are displayed on the map, along with romanizations (translation converted to Latin script).</li>
<li>Hover over a language region (denoted by color) to see the language spoken in the region. Language boundaries were drawn using census data; they may be inaccurate.</li>
<li>Translations are retrieved from Google Translate - they may be innacurate.</li>
<li>Romanizations are made with the <kbd>ai4bharat-transliteration</kbd> AI model, developed by <a href="https://ai4bharat.iitm.ac.in/">Ai4Bharat</a>.</li>
</ul>
</section>

Write Preview
Loading…
Cancel
Save