aaron/text_proxy
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

style and accessability

Browse Source
This commit is contained in:
Aaron Gutierrez
2019-05-14 23:39:28 -07:00
parent cefbeb6283
commit d2d42398ff
3 changed files with 30 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
cgi-bin/template.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#2e3440"> <meta name="theme-color" content="#2e3440">
@@ -13,7 +13,7 @@
<body class="dark"> <body class="dark">
<h1>{title}</h1> <h1>{title}</h1>
<div class="theme"> <div class="theme">
<select onchange="setTheme(event)"> <select aria-label="Theme" onchange="setTheme(event)">
<option value="darker">Light-on-Black</option> <option value="darker">Light-on-Black</option>
<option value="dark" selected>Light-on-Dark</option> <option value="dark" selected>Light-on-Dark</option>
<option value="light">Dark-on-White</option> <option value="light">Dark-on-White</option>
@@ -25,27 +25,27 @@
</div> </div>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
function setTheme(e) {{ function setTheme(e) {{
const theme = e.currentTarget.value; const theme = e.currentTarget.value;
document.body.className = theme; document.body.className = theme;
let color; let color;
switch (theme) {{ switch (theme) {{
case "dark": case "dark":
color = "#2e3440"; color = "#2e3440";
break; break;
case "light": case "light":
color = "#ffffff"; color = "#ffffff";
break; break;
case "darker": case "darker":
default: default:
color = "#000000"; color = "#000000";
break; break;
}} }}
document.getElementsByName("theme-color")[0].content = color; document.getElementsByName("theme-color")[0].content = color;
}} }}
</script> </script>
</body> </body>
</html> </html>

2
index.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#2e3440"> <meta name="theme-color" content="#2e3440">

16
site.css
View File

@@ -24,9 +24,11 @@ body {
} }
h1 { h1 {
font-size: 28px; font-size: 3rem;
font-weight: 800; font-weight: 400;
hyphens: auto; hyphens: auto;
margin: 32px auto;
max-width: 40rem;
text-align: center; text-align: center;
} }
@@ -43,10 +45,10 @@ h1 {
} }
.text { .text {
font-size: 16px; font-size: 1rem;
line-height: 22px; line-height: 1.5rem;
margin: 0; margin: 0;
max-width: 40em; max-width: 40rem;
white-space: pre-line; white-space: pre-line;
} }
@@ -57,8 +59,8 @@ img {
label, label,
input { input {
font-size: 16px; font-size: 1rem;
line-height: 22px; line-height: 1.5rem;
margin: 0; margin: 0;
} }