MAPG-69 unifying some style and text

public/static/css/mapguesser.css

@@ -69,10 +69,6 @@ sub {
     bottom: -0.4em;
 }
 
-.mono {
-    font-family: 'Roboto Mono', monospace;
-}
-
 .bold {
     font-weight: 500;
 }
@@ -261,13 +257,18 @@ div.modal {
     visibility: hidden;
 }
 
-p.formError {
+p.error, p.formError {
     color: #7f2929;
     font-weight: 500;
+}
+
+p.formError {
     display: none;
 }
 
 div.header {
+    display: grid;
+    grid-template-columns: auto auto;
     background-color: #333333;
     height: 50px;
     line-height: 50px;
@@ -275,30 +276,25 @@ div.header {
     color: white;
 }
 
-div.header>div.grid {
-    display: grid;
-    grid-template-columns: auto auto;
-}
-
 div.header.small {
     height: 40px;
     line-height: 40px;
 }
 
-div.header>div.grid>:nth-child(2) {
+div.header>p.header {
     line-height: inherit;
     text-align: right;
 }
 
-div.header>div.grid>:nth-child(2)>span {
+div.header>p.header>span {
     padding-left: 6px;
 }
 
-div.header>div.grid>:nth-child(2)>span>a:link, div.header>div.grid>:nth-child(2)>span>a:visited {
+div.header>p.header>span>a:link, div.header>p.header>span>a:visited {
     color: inherit;
 }
 
-div.header>div.grid>:nth-child(2)>span:not(:last-child) {
+div.header>p.header>span:not(:last-child) {
     border-right: solid white 1px;
     padding-right: 6px;
 }
@@ -337,7 +333,7 @@ div.box {
 }
 
 @media screen and (max-width: 599px) {
-    div.header.small h1 span {
+    div.header h1 span {
         display: none;
     }
     button, a.button {

public/static/js/mapguesser.js

@@ -72,7 +72,7 @@ var MapGuesser = {
 
         closeButton.classList.add('gray');
         closeButton.classList.add('marginTop');
-        closeButton.textContent = 'Cancel';
+        closeButton.textContent = 'Close';
         closeButton.onclick = function () {
             MapGuesser.hideModal();
         };

views/admin/map_editor.php

@@ -14,15 +14,14 @@ $jsFiles = [
 ?>
 <?php require ROOT . '/views/templates/main_header.php'; ?>
 <div class="header small">
-    <div class="grid">
     <h1>
         <a href="/maps" title="Back to playable maps">
             <img class="inline" width="1em" height="1em" src="<?= $_ENV['STATIC_ROOT'] ?>/img/icon.svg?rev=<?= REVISION ?>">
             <span>MapGuesser</span>
         </a>
     </h1>
-        <p>
-            <span class="bold"><a href="javascript:;" id="mapName" title="Edit map data"><?= $mapName ?></a></span><!--
+    <p class="header">
+        <span><a href="javascript:;" id="mapName" title="Edit map data"><?= $mapName ?></a></span><!--
         --><span><!--
             <?php /* Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. */ ?>
             --><svg class="inline" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
@@ -49,7 +48,6 @@ $jsFiles = [
         --></span>
     </p>
 </div>
-</div>
 <div id="metadata" class="modal">
     <h2>Edit map data</h2>
     <form id="metadataForm" class="marginTop">

views/game.php

@@ -9,20 +9,18 @@ $jsFiles = [
 ?>
 <?php require ROOT . '/views/templates/main_header.php'; ?>
 <div class="header small">
-    <div class="grid">
     <h1>
         <a href="/maps" title="Back to playable maps">
             <img class="inline" width="1em" height="1em" src="<?= $_ENV['STATIC_ROOT'] ?>/img/icon.svg?rev=<?= REVISION ?>">
             <span>MapGuesser</span>
         </a>
     </h1>
-        <p>
+    <p class="header">
         <span id="mapName" class="bold"><?= $mapName ?></span><!--
         --><span>Round <span id="currentRound" class="bold"></span></span><!--
         --><span>Score <span id="currentScoreSum" class="bold"></span></span>
     </p>
 </div>
-</div>
 <div id="guessCover"></div>
 <div id="panorama"></div>
 <div id="showGuessButtonContainer">

views/templates/header.php

@@ -1,12 +1,11 @@
 <div class="header">
-    <div class="grid">
     <h1>
         <a href="/" title="MapGuesser">
             <img class="inline" width="1em" height="1em" src="<?= $_ENV['STATIC_ROOT'] ?>/img/icon.svg?rev=<?= REVISION ?>">
-                MapGuesser
+            <span>MapGuesser</span>
         </a>
     </h1>
-        <p>
+    <p class="header">
         <?php if (Container::$request->user()) : ?>
             <span><a href="/profile" title="Profile">
                 <?php /* Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. */ ?>
@@ -22,4 +21,3 @@
         <?php endif; ?>
     </p>
 </div>
-</div>

views/templates/main_header.php

@@ -28,6 +28,6 @@
     <div id="cover"></div>
     <div id="modal" class="modal">
         <h2 id="modalTitle"></h2>
-        <p id="modalText" class="marginTop"></p>
+        <p id="modalText" class="justify marginTop"></p>
         <div id="modalButtons" class="right"></div>
     </div>