feat: implement basic info display for anemos

app/assets/stylesheets/application.css

@@ -1,10 +1,82 @@
-/*
- * This is a manifest file that'll be compiled into application.css.
- *
- * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
- * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
- * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
- * depending on specificity.
- *
- * Consider organizing styles into separate files for maintainability.
- */
+body {
+    font-family: sans-serif;
+    margin: 40px;
+}
+
+header {
+    display: flex;
+    align-items: center;
+    gap: 3px;
+    margin-bottom: 10px;
+}
+
+header h1 {
+    margin: 0;
+}
+
+header .muted {
+    color: #666;
+    font-weight: normal;
+}
+
+.new-buttons {
+    display: flex;
+    gap: 5px;
+}
+
+.new-button {
+    padding: 10px;
+}
+
+.nm-list {
+
+}
+
+.nm-list section {
+    margin-bottom: 5px;
+    display: grid;
+    grid-template-columns: .05fr 1fr 1fr .5fr;
+    align-items: center;
+    padding: 0 10px;
+    background-color: #eee;
+}
+
+img {
+    vertical-align: middle;
+}
+
+h3.nm-info {
+    margin: 0;
+    display: inline-block;
+}
+
+.spawn-info {
+    display: inline-block;
+    font-size: 14px;
+    opacity: .6;
+}
+
+.badge {
+    font-size: 12px;
+    font-weight: bold;
+    border: 1px solid black;
+    vertical-align: middle;
+    padding: 1px 6px;
+    border-radius: 10px;
+    font-family: monospace;
+}
+
+small.badge {
+    font-size: 10px;
+}
+
+button.action {
+    width: 100%;
+    height: 100%;
+}
+
+section .meta {
+    padding-left: 10px;
+    padding-top: 4px;
+    padding-bottom: 4px;
+}