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

42
index.html
Unescape Escape View File

@ -57,7 +57,8 @@
.translationText, .romanizationText { .translationText, .romanizationText {
visibility: hidden; visibility: hidden;
font-family: "Noto Sans"; font-family: "Noto Sans";
font-size:1.2em; /* font-size:1.2em; */
font-size: max(0.8vmax, 16px);
} }
.romanizationText { .romanizationText {
@ -67,7 +68,8 @@
.languageText { .languageText {
pointer-events: none; pointer-events: none;
font-weight: bold; font-weight: bold;
font-size: 1em; /* font-size: 1em;*/
font-size: max(0.7vmax, 14px);
font-family: sans-serif; font-family: sans-serif;
visibility: hidden; visibility: hidden;
} }
@ -115,6 +117,16 @@
flex: 0 1 0; 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 */ /* Position map load spinner in the middle of the SVG */
#svgContainer { #svgContainer {
position: relative; position: relative;
@ -189,24 +201,23 @@
.district { .district {
stroke-width: 0.1; stroke-width: 0.1;
} }
.translationText, .romanizationText { /* .translationText, .romanizationText {
font-size: 1em; font-size: 1em;
} }
.languageText { .languageText {
font-size: 0.8em; font-size: 0.8em;
} } */
} }
@media only screen and (max-width: 768px) { /* @media only screen and (max-width: 768px) {
.translationText, .romanizationText { .translationText, .romanizationText {
font-size: 0.7em; font-size: 0.8em;
} }
.languageText { .languageText {
font-size: 0.6em; font-size: 0.6em;
} }
} } */
</style> </style>
</head> </head>
<body> <body>
@ -223,14 +234,13 @@
<noscript> <noscript>
<h2>This website requires javascript to work.</h2> <h2>This website requires javascript to work.</h2>
</noscript> </noscript>
<p> <ul>
<ul> <li>Enter text in English. Translations are displayed on the map, along with romanizations (translation converted to Latin script).</li>
<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>
<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>
<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>.</li>
<li>Romanizations are made with the <kbd>ai4bharat-transliteration</kbd> AI model, developed by <a href="https://ai4bharat.iitm.ac.in/">Ai4Bharat</a>.
</ul>
</section> </section>

Write Preview
Loading…
Cancel
Save