diff --git a/isosilo b/isosilo deleted file mode 100755 index e0a5956..0000000 Binary files a/isosilo and /dev/null differ diff --git a/static/css/style.css b/static/css/style.css index d20bcb0..1d2015b 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -1,42 +1,49 @@ :root { - --bg: #0f1117; - --surface: #1a1d27; - --border: #252836; - --accent: #4f8ef7; - --text: #e2e4ef; - --muted: #6b7090; - --radius: 8px; + /* Gruvbox Dark Palette */ + --bg: #282828; /* dark0 */ + --surface: #3c3836; /* dark1 */ + --border: #504945; /* dark2 */ + --accent: #fabd2f; /* yellow */ + --text: #ebdbb2; /* light1 */ + --muted: #a89984; /* gray */ + --radius: 0px; /* Forced to 0 for sharp corners */ } + body { background: var(--bg); color: var(--text); - font-family: system-ui; + font-family: system-ui, -apple-system, sans-serif; margin: 0; } + header { - background: #12151f; + background: #1d2021; /* dark0_hard */ border-bottom: 1px solid var(--border); padding: 0 2rem; height: 56px; display: flex; align-items: center; } + .logo { color: var(--accent); font-weight: bold; text-decoration: none; font-family: monospace; } + main { max-width: 1100px; margin: 0 auto; padding: 2rem; } + .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; } + .card { background: var(--surface); border: 1px solid var(--border); @@ -49,36 +56,43 @@ main { transition: transform 0.1s; position: relative; } + .card:hover { - transform: translateY(-3px); border-color: var(--accent); + background: #45413e; /* Slight highlight on hover */ } + .card-img { width: 100%; height: 150px; object-fit: cover; - background: #000; + background: #1d2021; } + .folder-icon { height: 150px; display: flex; align-items: center; justify-content: center; font-size: 4rem; - background: #1c202d; - color: #f7c948; + background: #32302f; + color: #d79921; /* Gruvbox faded yellow */ } + .iso-icon { height: 150px; display: flex; align-items: center; justify-content: center; font-size: 4rem; - background: #12151f; + background: #1d2021; + color: #83a598; /* Gruvbox blue */ } + .card-body { padding: 1rem; } + .card-name { font-weight: bold; color: var(--accent); @@ -88,23 +102,28 @@ main { text-overflow: ellipsis; white-space: nowrap; } + .card-desc { font-size: 0.8rem; color: var(--muted); height: 3em; overflow: hidden; } + .bc { background: var(--surface); padding: 0.6rem 1rem; - border-radius: 4px; + border-radius: var(--radius); margin-bottom: 1.5rem; font-size: 0.85rem; + border: 1px solid var(--border); } + .bc a { color: var(--accent); text-decoration: none; } + .tbl { width: 100%; border-collapse: collapse; @@ -112,13 +131,17 @@ main { border-radius: var(--radius); overflow: hidden; } + .tbl th { text-align: left; padding: 1rem; - background: #1e2132; + background: #32302f; color: var(--muted); font-size: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.05em; } + .tbl td { padding: 1rem; border-bottom: 1px solid var(--border); @@ -129,7 +152,7 @@ main { border: 1px solid var(--accent); color: var(--accent); padding: 0.2rem 0.5rem; - border-radius: 4px; + border-radius: var(--radius); font-size: 0.7rem; text-decoration: none; background: transparent; @@ -141,7 +164,7 @@ main { .btn:hover { background: var(--accent); - color: #fff; + color: var(--bg); /* Inverted for readability */ } /* Modal styles */ @@ -152,7 +175,7 @@ main { left: 0; width: 100%; height: 100%; - background: rgba(0, 0, 0, 0.7); + background: rgba(29, 32, 33, 0.9); /* Gruvbox-friendly overlay */ z-index: 1000; justify-content: center; align-items: center; @@ -165,25 +188,31 @@ main { opacity: 1; pointer-events: auto; } + .modal-content { - background: var(--surface); - border: 1px solid var(--border); + background: var(--bg); + border: 2px solid var(--border); border-radius: var(--radius); max-width: 600px; width: 90%; max-height: 80vh; overflow-y: auto; position: relative; + box-shadow: 0 10px 30px rgba(0,0,0,0.5); } + .modal-header { padding: 1.5rem; border-bottom: 1px solid var(--border); + background: var(--surface); } + .modal-title { margin: 0; font-size: 1.2rem; color: var(--text); } + .close-btn { position: absolute; top: 1rem; @@ -199,21 +228,26 @@ main { align-items: center; justify-content: center; } + .close-btn:hover { - color: var(--text); + color: var(--accent); } + .modal-body { padding: 1.5rem; } + .modal-image { width: 100%; max-height: 300px; object-fit: contain; - background: #000; - border-radius: 4px; + background: #1d2021; + border-radius: var(--radius); margin-bottom: 1rem; display: none; + border: 1px solid var(--border); } + .modal-description { color: var(--text); line-height: 1.6;