Restyling

static/style.css

@@ -1,58 +1,89 @@
+html, body {
+    height: 100%;
+    margin: 0;
+}
+
 body {
-    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
+    display: flex;
+    flex-direction: column;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
     font-size: 14px;
     color: #000;
-    background-color: #000;
+    background-color: #eaecf0;
     background-attachment: fixed;
     background-position: center;
-    margin: 0;
+    background-size: cover;
 }
 
-ul, ol {
-    line-height: 1.5;
+#container {
+    flex: auto;
+    line-height: 1.25;
+    margin: 0 auto;
 }
 
-h2 {
-    margin-bottom: 0.2em;
+#container > div {
+    background-color: #fff;
+    border: 1px solid #c8ccd1;
+    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.25));
+    margin: 1.5em 3em;
+    padding: 1em;
 }
 
-#header {
-    font-size: 2.5em;
-    font-weight: bold;
-    margin: 20px 60px;
-    padding: 10px 15px;
-    border: 1px solid #777;
-    background-color: #FFF;
+header {
+    background-color: #eaecf0;
+    padding: 0.2em 1em;
 }
 
-#container {
-    line-height: 1.25;
-    margin: 0 60px 65px 60px;
-    padding: 5px 15px 15px 15px;
-    border: 1px solid #777;
-    background-color: #FFF;
+header > * {
+    vertical-align: middle;
+    display: inline-block;
 }
 
-#footer {
-    position: fixed;
-    width: 100%;
-    height: 45px;
-    bottom: 0;
+header h1 {
+    font-size: 2em;
+    margin: 0 1em 0 0;
+}
+
+#settings-link::before {
+    content: ' ';
     font-size: 0.85em;
+    color: black;
+    opacity: 0.6;
+    padding-left: 1.67em;
+    background-image: linear-gradient(transparent,transparent), url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 xmlns:xlink=%22http://www.w3.org/1999/xlink%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Esettings%3C/title%3E%3Cg transform=%22translate%2810 10%29%22%3E%3Cpath id=%22a%22 d=%22M1.5-10h-3l-1 6.5h5m0 7h-5l1 6.5h3%22/%3E%3Cuse transform=%22rotate%2845%29%22 xlink:href=%22%23a%22/%3E%3Cuse transform=%22rotate%2890%29%22 xlink:href=%22%23a%22/%3E%3Cuse transform=%22rotate%28135%29%22 xlink:href=%22%23a%22/%3E%3C/g%3E%3Cpath d=%22M10 2.5a7.5 7.5 0 000 15 7.5 7.5 0 000-15v4a3.5 3.5 0 010 7 3.5 3.5 0 010-7%22/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+footer {
+    padding: 1em;
+    font-size: 0.9em;
     text-align: center;
     line-height: 1.5;
-    border-top: 1px solid #777;
-    background: #DDDDDD;
+    border-top: 1px solid #c8ccd1;
+    background: #fff;
 }
 
-#footer li {
+footer ul {
+    margin: 0;
+}
+
+footer li {
     display: inline;
 }
 
-#footer li:not(:last-child)::after {
+footer li:not(:last-child)::after {
     content: ' \00b7';
 }
 
+ul, ol {
+    line-height: 1.5;
+}
+
+h2 {
+    margin-bottom: 0.2em;
+}
+
 #notice-box {
     padding: 10px;
     margin: 10px 5px;
@@ -90,8 +121,8 @@ h2 {
 #sources-container {
     padding: 5px 10px;
     margin: 15px 5px 10px 5px;
-    background-color: #EEE;
-    border: 1px solid #BBB;
+    background-color: #eee;
+    border: 1px solid #bbb;
 }
 
 #turnitin-title, #sources-title {
@@ -147,7 +178,7 @@ h2 {
 }
 
 #cv-result-sources tr:nth-child(even) {
-    background-color: #E0E0E0;
+    background-color: #e0e0e0;
 }
 
 #cv-result-sources td:first-child {
@@ -206,7 +237,7 @@ h2 {
 }
 
 #source-row-selected {
-    background-color: #CFCFCF !important;
+    background-color: #cfcfcf !important;
 }
 
 #head-settings {
@@ -272,31 +303,31 @@ h2 {
     width: 500px;
     padding: 5px;
     z-index: 1;
-    background: #F3F3F3;
-    border: 1px solid #AAA;
+    background: #f3f3f3;
+    border: 1px solid #aaa;
     color: black;
     font-style: normal;
     text-align: left;
 }
 
 .green-box {
-    background-color: #EFE;
-    border: 1px solid #7F7;
+    background-color: #efe;
+    border: 1px solid #7f7;
 }
 
 .yellow-box {
-    background-color: #FFD;
-    border: 1px solid #EE5;
+    background-color: #ffd;
+    border: 1px solid #ee5;
 }
 
 .red-box {
-    background-color: #FEE;
-    border: 1px solid #F77;
+    background-color: #fee;
+    border: 1px solid #f77;
 }
 
 .gray-box {
-    background-color: #EEE;
-    border: 1px solid #AAA;
+    background-color: #eee;
+    border: 1px solid #aaa;
 }
 
 .indentable {
@@ -314,8 +345,8 @@ h2 {
 
 .cv-chain-detail {
     padding: 0 10px 0 10px;
-    background-color: #FFF;
-    border: 1px solid #BBB;
+    background-color: #fff;
+    border: 1px solid #bbb;
 }
 
 .cv-chain-cell {
@@ -354,22 +385,22 @@ h2 {
 }
 
 .cv-hl {
-    background: #FAA;
+    background: #faa;
 }
 
 .cv-hl-in {
-    background: #FCC;
-    background: linear-gradient(to left, #FAA, #FFF);
+    background: #fcc;
+    background: linear-gradient(to left, #faa, #fff);
 }
 
 .cv-hl-out {
-    background: #FCC;
-    background: linear-gradient(to right, #FAA, #FFF);
+    background: #fcc;
+    background: linear-gradient(to right, #faa, #fff);
 }
 
 .mono   { font-family: monospace; }
-.light  { color: #CCC; }
-.medium { color: #AAA; }
+.light  { color: #ccc; }
+.medium { color: #aaa; }
 
 .source-similarity { font-weight: bold; }
 .source-suspect    { color: #900; }
@@ -393,15 +424,13 @@ a:active {
     text-decoration: underline;
 }
 
-#a-home:link    { color: #777; }
-#a-home:visited { color: #777; }
-#a-home:hover   { color: #555; }
-#a-home:active  { color: #333; }
+header a:link, header a:visited, header a:hover {
+    color: #54595d;
+}
 
-#a-settings:link    { color: #AAA; }
-#a-settings:visited { color: #AAA; }
-#a-settings:hover   { color: #888; }
-#a-settings:active  { color: #666; }
+header a:active {
+    color: #333;
+}
 
 #cv-cached:active     { color: #040; text-decoration: none; }
 #cv-cached:hover      { text-decoration: none; }

templates/api.mako

@@ -33,7 +33,7 @@
 <html lang="en">
     <head>
         <meta charset="utf-8">
-        <title>API &ndash; Earwig's Copyvio Detector</title>
+        <title>API | Earwig's Copyvio Detector</title>
         <link rel="stylesheet" href="${request.script_root}${url_for('static', file='api.min.css')}" type="text/css" />
     </head>
     <body>

templates/error.mako

@@ -1,4 +1,4 @@
-<%include file="/support/header.mako" args="title='Error! &ndash; Earwig\'s Copyvio Detector'"/>
+<%include file="/support/header.mako" args="title='Error! | Earwig\'s Copyvio Detector'"/>
 <h2>Error!</h2>
 <p>An error occurred. If it hasn't been reported (<a href="https://github.com/earwig/copyvios/issues">try to check</a>), please <a href="https://github.com/earwig/copyvios/issues/new">file an issue</a> or <a href="mailto:wikipedia.earwig@gmail.com">email me</a>. Include the following information:</p>
 <div id="info-box" class="red-box">

templates/index.mako

@@ -4,7 +4,14 @@
     from copyvios.checker import T_POSSIBLE, T_SUSPECT
     from copyvios.misc import cache
 %>\
-<%include file="/support/header.mako" args="title='Earwig\'s Copyvio Detector'"/>
+<%
+    titleparts = []
+    if query.page:
+        titleparts.append(query.page.title)
+    titleparts.append("Earwig's Copyvio Detector")
+    title = " | ".join(titleparts)
+%>\
+<%include file="/support/header.mako" args="title=title"/>
 <%namespace module="copyvios.highlighter" import="highlight_delta"/>\
 <%namespace module="copyvios.misc" import="httpsfix, urlstrip"/>\
 % if notice:
@@ -49,9 +56,9 @@
         </div>
     % endif
 %endif
-<p>This tool attempts to detect <a href="https://en.wikipedia.org/wiki/WP:COPYVIO">copyright violations</a> in articles. In <i>search mode</i>, it will check for similar content elsewhere on the web using <a href="https://developers.google.com/custom-search/">Google</a>, external links present in the text of the page, or <a href="https://en.wikipedia.org/wiki/Wikipedia:Turnitin">Turnitin</a> (provided by <a href="https://en.wikipedia.org/wiki/User:EranBot">EranBot</a>), depending on which options are selected. In <i>comparison mode</i>, the tool will compare the article to a specific webpage without making additional searches, like the <a href="https://dupdet.toolforge.org/">Duplication Detector</a>.</p>
+<p>This tool attempts to detect <a href="https://en.wikipedia.org/wiki/WP:COPYVIO">copyright violations</a> in articles. In <i>search mode</i>, it will check for similar content elsewhere on the web using <a href="https://developers.google.com/custom-search/">Google</a>, external links present in the text of the page, or <a href="https://en.wikipedia.org/wiki/Wikipedia:Turnitin">Turnitin</a> (via <a href="https://en.wikipedia.org/wiki/User:EranBot">EranBot</a>), depending on which options are selected. In <i>comparison mode</i>, the tool will compare the article to a specific webpage without making additional searches, like the <a href="https://dupdet.toolforge.org/">Duplication Detector</a>.</p>
 <p>Running a full check can take up to a minute if other websites are slow or if the tool is under heavy use. Please be patient. If you get a timeout, wait a moment and refresh the page.</p>
-<p>Be aware that other websites can copy from Wikipedia, so check the results carefully, especially for older or well-developed articles. Specific websites can be skipped by being added to the <a href="https://en.wikipedia.org/wiki/User:EarwigBot/Copyvios/Exclusions">excluded URL list</a>.</p>
+<p>Be aware that other websites can copy from Wikipedia, so check the results carefully, especially for older or well-developed articles. Specific websites can be skipped by adding them to the <a href="https://en.wikipedia.org/wiki/User:EarwigBot/Copyvios/Exclusions">excluded URL list</a>.</p>
 <form id="cv-form" action="${request.script_root}/" method="get">
     <table id="cv-form-outer">
         <tr>

templates/settings.mako

@@ -3,7 +3,7 @@
     from flask import g, request
     from copyvios.misc import cache
 %>\
-<%include file="/support/header.mako" args="title='Settings &ndash; Earwig\'s Copyvio Detector'"/>
+<%include file="/support/header.mako" args="title='Settings | Earwig\'s Copyvio Detector'"/>
 % if status:
     <div id="info-box" class="green-box">
         <p>${status}</p>

templates/support/footer.mako

@@ -2,16 +2,18 @@
     from datetime import datetime
     from flask import g, request
 %>\
+            </main>
         </div>
-        <div id="footer">
-            <ul>
-                <li>Maintained by <a href="https://en.wikipedia.org/wiki/User:The_Earwig">Ben Kurtovic</a></li>
-                <li><a href="${request.script_root}/api">API</a></li>
-                <li><a href="https://github.com/earwig/copyvios">Source code</a></li>
-                % if ("CopyviosBackground" in g.cookies and g.cookies["CopyviosBackground"].value in ["potd", "list"]) or "CopyviosBackground" not in g.cookies:
-                    <li><a href="${g.descurl | h}">Background image</a></li>
-                % endif
-            </ul>
-        </div>
-    </body>
+    </div>
+    <footer>
+        <ul>
+            <li>Maintained by <a href="https://en.wikipedia.org/wiki/User:The_Earwig">Ben Kurtovic</a></li>
+            <li><a href="${request.script_root}/api">API</a></li>
+            <li><a href="https://github.com/earwig/copyvios">Source code</a></li>
+            % if ("CopyviosBackground" in g.cookies and g.cookies["CopyviosBackground"].value in ["potd", "list"]) or "CopyviosBackground" not in g.cookies:
+                <li><a href="${g.descurl | h}">Background image</a></li>
+            % endif
+        </ul>
+    </footer>
+</body>
 </html>

templates/support/header.mako

@@ -5,25 +5,23 @@
 %>\
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <meta charset="utf-8">
-        <title>${title}</title>
-        <link rel="stylesheet" href="${request.script_root}${url_for('static', file='style.min.css')}"/>
-        <script src="https://tools-static.wmflabs.org/cdnjs/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-        <script src="${request.script_root}${url_for('static', file='script.min.js')}"></script>
-    </head>
-    <% selected = g.cookies["CopyviosBackground"].value if "CopyviosBackground" in g.cookies else "list" %>\
-    % if selected == "plain":
-        <body style="background-image: url('${request.script_root}/static/background.png');">
-    % else:
-        <body onload="update_screen_size()" style="background-image: url('${set_background(selected) | h}'); background-size: cover;">
-    % endif
-        <div id="header">
-            <table id="heading">
-                <tr>
-                    <td id="head-home"><a id="a-home" href="${request.script_root}/">Earwig's Copyvio Detector</a></td>
-                    <td id="head-settings"><a id="a-settings" href="${request.script_root}/settings">Settings</a></td>
-                </tr>
-            </table>
-        </div>
-        <div id="container">
+<head>
+    <meta charset="utf-8">
+    <title>${title | h}</title>
+    <link rel="stylesheet" href="${request.script_root}${url_for('static', file='style.min.css')}"/>
+    <script src="https://tools-static.wmflabs.org/cdnjs/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+    <script src="${request.script_root}${url_for('static', file='script.min.js')}"></script>
+</head>
+<% selected = g.cookies["CopyviosBackground"].value if "CopyviosBackground" in g.cookies else "list" %>\
+% if selected == "plain":
+    <body>
+% else:
+    <body onload="update_screen_size()" style="background-image: url('${set_background(selected) | h}');">
+% endif
+    <div id="container">
+        <div>
+            <header>
+                <h1><a href="/">Earwig&apos;s <strong>Copyvio Detector</strong></a></h1>
+                <a id="settings-link" href="/settings">Settings</a>
+            </header>
+            <main>