Modified some styles; more bootstrap 5 changes; added logo

Gruntfile.js

@@ -35,6 +35,17 @@ module.exports = function (grunt) {
       },
     },
 
+    copy: {
+      images: {
+        files: [{
+          expand: true,
+          cwd: 'assets/img/',
+          src: '**/*',
+          dest: 'public/img/'
+        }]
+      }
+    },
+
     watch: {
       css: {
         files: ["assets/styles/**/*.scss"],
@@ -52,6 +63,14 @@ module.exports = function (grunt) {
           spawn: false,
         },
       },
+      img: {
+        files: ["assets/img/**/*"],
+        tasks: ["copy:images"],
+        options: {
+          atBegin: true,
+          spawn: false,
+        }
+      },
     },
   });
 
@@ -59,7 +78,8 @@ module.exports = function (grunt) {
   grunt.loadNpmTasks("grunt-contrib-watch");
   grunt.loadNpmTasks("grunt-contrib-sass");
   grunt.loadNpmTasks("grunt-contrib-uglify");
+  grunt.loadNpmTasks("grunt-contrib-copy");
 
   // CLI tasks.
-  grunt.registerTask("default", ["sass", "uglify"]);
+  grunt.registerTask("default", ["sass", "uglify", "copy:images"]);
 };

assets/styles/eye-old.sass

@@ -1,71 +0,0 @@
-html,
-body 
-  width: 100% 
-  height: 100% 
-  margin: 0 
-  padding: 0 
-body 
-  height: auto 
-  min-height: 100% 
-  box-sizing: border-box 
-  padding-top: 80px 
-  padding-bottom: 80px 
-  background: #eee 
-a 
-  color: teal 
-  transition: all 200ms ease-in-out 
-  &:hover 
-    color: #007070 
-textarea 
-  max-width: 100% 
-  min-width: 100% 
-  height: 100px 
-.container 
-  max-width: 1024px 
-select[multiple] 
-  min-height: 125px 
-#main-nav 
-  position: fixed 
-  top: 0 
-  left: 0 
-  width: 100% 
-  height: 64px 
-  background: teal 
-  color: white 
-  z-index: 20 
-  ul 
-    list-style: none 
-    display: inline-block 
-    li 
-      display: inline-block 
-      margin-left: 15px 
-  h4 
-    display: inline-block 
-    margin-left: 25px 
-    line-height: 64px 
-  a 
-    color: white 
-    font-size: 2.25rem 
-    line-height: 64px 
-    transition: all 200ms ease-in-out 
-    &:hover 
-      color: #eee 
-      font-size: 2.5rem 
-#main-content 
-  padding: 14px 20px 
-  background: white 
-  border-radius: 8px 
-  z-index: 10 
-#main-footer 
-  position: fixed 
-  bottom: 0 
-  left: 0 
-  width: 100% 
-  height: 64px 
-  p 
-    margin-bottom: 5px 
-    text-align: center 
-#result_form 
-  margin-bottom: 0 
-  * 
-    margin-bottom: 0 

assets/styles/eye.scss

@@ -1,5 +1,28 @@
 $primary-color: teal;
 
-body {
+html{
-    background: white;
+  width: 100%;
+  height: 100%;
+}
+
+body{
+    background: #666;
+}
+
+table{
+  border: 1px solid #666;
+}
+
+#main-nav{
+  img{
+    max-height: 40px;
+    margin-right: 15px;
+  }
+}
+
+#main-content{
+  padding: 1.5rem 2rem;
+  background: white;
+  border: 1px solid #bbb;
+  border-radius: 12px;
 }

package-lock.json

@@ -18,6 +18,7 @@
       "devDependencies": {
         "grunt": "^1.6.1",
         "grunt-cli": "^1.5.0",
+        "grunt-contrib-copy": "^1.0.0",
         "grunt-contrib-sass": "^2.0.0",
         "grunt-contrib-uglify": "^5.2.2",
         "grunt-contrib-watch": "^1.1.0",
@@ -1408,6 +1409,13 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/file-sync-cmp": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/file-sync-cmp/-/file-sync-cmp-0.1.1.tgz",
+      "integrity": "sha512-0k45oWBokCqh2MOexeYKpyqmGKG+8mQ2Wd8iawx+uWd/weWJQAZ6SoPybagdCI4xFisag8iAR77WPm4h3pTfxA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/file-uri-to-path": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
@@ -1844,6 +1852,80 @@
         "node": ">=10"
       }
     },
+    "node_modules/grunt-contrib-copy": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/grunt-contrib-copy/-/grunt-contrib-copy-1.0.0.tgz",
+      "integrity": "sha512-gFRFUB0ZbLcjKb67Magz1yOHGBkyU6uL29hiEW1tdQ9gQt72NuMKIy/kS6dsCbV0cZ0maNCb0s6y+uT1FKU7jA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^1.1.1",
+        "file-sync-cmp": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/grunt-contrib-copy/node_modules/ansi-regex": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/grunt-contrib-copy/node_modules/ansi-styles": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+      "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/grunt-contrib-copy/node_modules/chalk": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+      "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^2.2.1",
+        "escape-string-regexp": "^1.0.2",
+        "has-ansi": "^2.0.0",
+        "strip-ansi": "^3.0.0",
+        "supports-color": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/grunt-contrib-copy/node_modules/strip-ansi": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+      "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/grunt-contrib-copy/node_modules/supports-color": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+      "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/grunt-contrib-sass": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/grunt-contrib-sass/-/grunt-contrib-sass-2.0.0.tgz",
@@ -2204,6 +2286,29 @@
         "node": ">=6"
       }
     },
+    "node_modules/has-ansi": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
+      "integrity": "sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/has-ansi/node_modules/ansi-regex": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",

package.json

@@ -30,6 +30,7 @@
   "devDependencies": {
     "grunt": "^1.6.1",
     "grunt-cli": "^1.5.0",
+    "grunt-contrib-copy": "^1.0.0",
     "grunt-contrib-sass": "^2.0.0",
     "grunt-contrib-uglify": "^5.2.2",
     "grunt-contrib-watch": "^1.1.0",

views/benchmark/list.twig

@@ -7,7 +7,8 @@
   <h2>Benchmarks</h2>
   <a href="/benchmark/add">Add a benchmark</a>
 
-  <table class="twelve columns">
+  <div class="col-12">
+    <table class="table table-responsive table-hover">
       <thead>
         <tr>
           <td>Benchmark name</td>
@@ -28,4 +29,5 @@
       </tbody>
     </table>
   </div>
+</div>
 {% endblock %}

views/hardware/list.twig

@@ -7,7 +7,8 @@
   <h2>Hardware</h2>
   <a href="/hardware/add">Add new hardware</a>
 
-  <table class="twelve columns">
+  <div class="col-12">
+    <table class="table table-responsive table-hover">
       <thead>
         <tr>
           <td>Name</td>
@@ -28,4 +29,5 @@
       </tbody>
     </table>
   </div>
+</div>
 {% endblock %}

views/index/dashboard.twig

@@ -5,7 +5,9 @@
 {% block content %}
 <div class="row">
   <h2>Recently updated tests:</h2>
-  <table class="twelve columns">
+
+  <div class="col-12">
+    <table class="table table-responsive table-hover">
       <thead>
         <tr>
           <td>Title</td>
@@ -24,4 +26,5 @@
       </tbody>
     </table>
   </div>
+</div>
 {% endblock %}

views/layouts/default.twig

@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="shortcut icon" href="/img/leviathan-favicon-nobg.png">
   <title>{% block title %}{% endblock %} | Leviathan</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.7/css/bootstrap.min.css">
   <link rel="stylesheet" href="/css/eye.css">
@@ -12,12 +13,14 @@
   <script src="/js/scar.js"></script>
   {% block scripts %}{% endblock %}
 </head>
-<body>
+<body class="d-flex flex-column min-vh-100">
   {% include 'partials/navbar.twig' %}
 
-  <div id="main-content" class="container">
+  <main class="flex-grow-1 py-4">
+    <div id="main-content" class="container mb-4">
       {% block content %}{% endblock %}
     </div>
+  </main>
 
   {% include 'partials/footer.twig' %}
 </body>

views/partials/footer.twig

@@ -1,4 +1,10 @@
-<nav id="main-footer">
+<footer id="main-footer" class="bg-light border-top py-3 text-center">
+  <div class="container">
+    <div class="row">
+      <div class="col-12">
         <p>Leviathan version v{{ app_version }}</p>
-  <p>Running node.js version v{{ node_version }}</p>
+        <p class="mb-0">Running Node.js version v{{ node_version }}</p>
-</nav>
+      </div>
+    </div>
+  </div>
+</footer>

views/partials/navbar.twig

@@ -1,6 +1,8 @@
-<nav id="main-nav" class="navbar navbar-expand-md bg-body-secondary mb-3">
+<nav id="main-nav" class="navbar navbar-expand-md" style="background-color: #e3f2fd;" data-bs-theme="light">
   <div class="container-fluid">
-    <a class="navbar-brand mb-0 h1" href="#">Leviathan</a>
+    <a href="#" class="img-fluid">
+      <img src="/img/leviathan-logo-nobg.png" alt="Leviathan">
+    </a>
 
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>

views/test/list.twig

@@ -7,7 +7,8 @@
   <h2>Tests</h2>
   <a href="/test/add">Add a test</a>
 
-  <table class="twelve columns">
+  <div class="col-12">
+    <table class="table table-responsive table-hover">
       <thead>
         <tr>
           <td>Title</td>
@@ -26,4 +27,5 @@
       </tbody>
     </table>
   </div>
+</div>
 {% endblock %}