Finalize styling (hopefully)

5 years ago · 42f775d198
3 changed files with 64 additions and 4 deletions
--- a/www/app.html
+++ b/www/app.html
@ -10,10 +10,13 @@
  <body>
    <noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>
    <script src="./bootstrap.js"></script>
-    <h1>DNA Transcription &amp; Translation</h1>
-    <div id="codons"></div>
-    <div id="footer">
-      <p>© 2021 Ravi Shah</p>
+    <div class="main-heading">
+      <h1><a href="/">DNA Transcription &amp; Translation</a></h1>
+    </div>
+    <div class="codons-div-container">
+      <div class="codons-container">
+        <div id="codons"></div>
+      </div>
    </div>
  </body>
 </html>
--- a/www/css/styles.css
+++ b/www/css/styles.css
@ -39,6 +39,22 @@ h1, h2 {
    color: white;
 }

+noscript {
+  text-align: center;
+  font-size: 2em;
+  color: orange;
+  font-style: italic;
+  font-weight: bold;
+}
+
+a {
+  color: white;
+}
+
+a:hover {
+  color: var(--secondary-bg-color);
+}
+
 .input-div-container {
  height: 100%;
  width: 100%;
@ -62,4 +78,41 @@ h1, h2 {

 #footer {
  text-align: center;
+  margin-top: 1em;
+}
+
+.codons-div-container {
+  height: 100%;
+  width: 100%;
+  margin: 0 auto;
+  padding: 10px;
+  position: relative;
+  text-align: center;
+}
+
+.codons-container {
+  margin-top: 3em;
+  width: 85%;
+  height: auto;
+  background-color: var(--secondary-bg-color);
+  margin-left: auto;
+  margin-right: auto;
+  padding: 10px;
+}
+
+#codons {
+  line-height: 1em;
+}
+
+#codons h2 {
+  font-size: 1.75em;
+}
+
+.main-heading {
+  text-align: center;
+  margin: 1em;
+}
+
+.main-heading h1 {
+  font-size: 2em;
 }
--- a/www/index.html
+++ b/www/index.html
@ -11,6 +11,9 @@
  </head>
  <body>
    <noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>
+    <div class="main-heading">
+      <h1><a href="#">DNA Transcription &amp; Translation</a></h1>
+    </div>
    <div class="input-div-container">
      <div class="input-div">
        <form class="dna-input" action="app.html" method="get">
@ -24,6 +27,7 @@
    </div>
    <div id="footer">
      <p>© 2021 Ravi Shah</p>
+      <p><a href="https://github.com/Rav4s/wasm-dna-transcription-translation">Source Code</a></p>
      <br />
    </div>
  </body>