Update style, readme etc

hschne · Oct 24, 2024 · 7fc8869 · 7fc8869
1 parent 981a9b3
commit 7fc8869
Show file tree

Hide file tree

Showing 8 changed files with 94 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -1,12 +1,17 @@
+<div align="center">
 
 # Puny Monitor
 
-A batteries-included monitoring tool for single hosts.
+<img alt="logo" src="public/logo-512.png" width="512" height="auto">
 
-- Just enough monitoring to be useful 🔍
+### A batteries-included monitoring tool for single hosts.
+
+- Just enough data to be useful 🔍
 - Install in 30 seconds 🏎️
 - Perfect for [Kamal](https://kamal-deploy.org/) and other containerized setups 🐋
 
+</div>
+
 ## Getting Started
 
 Puny Monitor works best with Docker. Run this command to check it out quickly: 

diff --git a/app/puny_monitor.rb b/app/puny_monitor.rb
@@ -19,7 +19,7 @@ class App < Sinatra::Base
     set :database_file, "../config/database.yml"
 
     get "/" do
-      erb :index, locals: { params: }
+      erb :index, locals: { params:, logo: }
     end
 
     get "/up" do
@@ -114,6 +114,13 @@ class App < Sinatra::Base
 
     private
 
+    def logo
+      @logo ||= begin
+        file = File.open("public/icon.svg")
+        file.read
+      end
+    end
+
     def duration
       params[:duration] || "1d"
     end

diff --git a/app/views/index.erb b/app/views/index.erb
@@ -1,4 +1,4 @@
-<section>
+<section class="controls">
   <form action="/" method="get">
     <select name="duration" onchange="this.form.submit()">
       <option value="1h" <%= params[:duration] == '1h' ? 'selected' : '' %>>1 Hour</option>

diff --git a/app/views/layout.erb b/app/views/layout.erb
@@ -4,7 +4,11 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>PunyMonitor</title>
+    <title>Puny Monitor - Lightweight System Monitoring</title>
+    <meta name="description" content="Puny Monitor is a lightweight system monitoring tool that tracks CPU usage, memory usage, disk I/O, and network bandwidth.">
+    <meta name="robots" content="noindex">
+    <link rel="icon" href="/favicon.ico" sizes="32x32">
+    <link rel="icon" href="/public/puny-monitor.svg" type="image/svg+xml">
 
     <script
       src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartkick.min.js"
@@ -21,9 +25,11 @@
       crossorigin
     >
     <link href="style.css" rel="stylesheet">
+
   </head>
   <body>
     <header>
+      <%= logo %>
       <h1>Puny Monitor</h1>
     </header>
     <main>

diff --git a/favicon.ico b/favicon.ico
diff --git a/public/icon-512.png b/public/icon-512.png
diff --git a/public/icon.svg b/public/icon.svg
diff --git a/public/style.css b/public/style.css
@@ -6,7 +6,7 @@
 }
 
 :root {
-  --font-base-size: 1em;
+  --font-base-size: 1rem;
   --font-scale-ratio: 1.3;
 
   --color-grey-50: oklch(98.14% 0.001 286.38);
@@ -43,6 +43,9 @@
   --space-xl: calc(2 * var(--space-unit));
   --space-2xl: calc(3.25 * var(--space-unit));
   --space-3xl: calc(5.25 * var(--space-unit));
+
+  --screen--size-md: 55rem;
+  --screen--size-lg: 100rem;
 }
 
 * {
@@ -58,24 +61,32 @@ body {
   font-style: normal;
   color: var(--color-text);
   background-color: var(--color-background);
+  max-width: var(--screen--size-lg);
+  padding: 0 var(--space-md);
 }
 
 header {
-  padding: var(--space-md) var(--space-xl);
-}
+  display: flex;
+  flex-direction: row;
+  gap: var(--space-md);
+  padding: var(--space-md) 0;
 
-h1 {
-  font-size: var(--font-size-2xl);
+  .logo {
+    width: 3rem;
+  }
 }
 
 main {
-  padding: var(--space-md) var(--space-xl);
+  padding: var(--space-md) 0;
+}
+
+h1 {
+  font-size: var(--font-size-2xl);
 }
 
 .charts {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: 25rem;
+  grid-template-columns: 1fr;
   gap: var(--space-md);
 }
 
@@ -84,6 +95,44 @@ main {
   flex-direction: column;
   gap: var(--space-sm);
   padding: var(--space-md);
-  background-color: var(--color-grey-100);
+  border: solid 1px var(--color-grey-400);
   border-radius: 10px;
+  height: 25rem;
+}
+
+.controls {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--space-md);
+  margin-bottom: var(--space-sm);
+
+  select {
+    font-size: var(--font-size-md);
+    padding: var(--space-xxs) var(--space-xs);
+    border: 1px solid var(--color-grey-300);
+    border-radius: 5px;
+    background-color: var(--color-grey-50);
+    color: var(--color-text);
+    cursor: pointer;
+    transition:
+      border-color 0.3s,
+      box-shadow 0.3s;
+  }
+
+  select:hover {
+    border-color: var(--color-grey-400);
+  }
+
+  select:focus {
+    outline: none;
+    border-color: var(--color-grey-500);
+    box-shadow: 0 0 0 2px var(--color-grey-200);
+  }
+}
+
+@media (min-width: 55rem) {
+  .charts {
+    grid-template-columns: repeat(2, 1fr);
+  }
 }