From 720d752748b793a2f5cf3cc14cb75ad86e8919c0 Mon Sep 17 00:00:00 2001 From: sillylaird Date: Tue, 3 Feb 2026 21:27:57 -0500 Subject: First commit --- gaming/stepmania/style.css | 139 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 139 insertions(+) create mode 100644 gaming/stepmania/style.css (limited to 'gaming/stepmania/style.css') diff --git a/gaming/stepmania/style.css b/gaming/stepmania/style.css new file mode 100644 index 0000000..20bca04 --- /dev/null +++ b/gaming/stepmania/style.css @@ -0,0 +1,139 @@ +/* Base */ +*, *::before, *::after { box-sizing: border-box; } + +html, body { + margin: 0; + padding: 0; + background: #ffd; /* light yellow */ + color: #111; + font-family: system-ui, Helvetica, Arial, sans-serif; + line-height: 1.5; +} + +/* Header */ +header { + padding: 16px; + background: #fff6c7; + border-bottom: 2px solid #e6d27a; + text-align: center; +} +h1 { + margin: 0 0 8px; + font-family: "Comic Sans MS","Chalkboard SE","Comic Neue",sans-serif; + font-size: 1.6rem; +} + +/* Nav */ +nav ul { + list-style: none; + padding: 0; + margin: 0; + display: grid; + grid-auto-flow: column; + gap: 8px; + justify-content: center; +} +nav a { + display: inline-block; + padding: 6px 8px; + text-decoration: none; + color: #002; + border-radius: 4px; + transition: background .15s, color .15s; +} +nav a:hover, nav a.is-active { + background: red; + color: #000; +} + +/* Layout */ +main { + max-width: 900px; + margin: 20px auto; + padding: 0 16px; +} +section { margin: 24px 0; } +h2 { margin: 0 0 8px; } + +/* Hero image */ +.hero-image { + display: block; + max-width: 100%; + height: auto; + border-radius: 8px; + border: 2px solid #e6d27a; + background: #fffbe3; +} + +/* Lists */ +#song-list { padding-left: 18px; } + +/* Scoreboard (minimal) */ +#score-board { + margin-top: 8px; + border: 2px solid #e6d27a; + border-radius: 8px; + background: #fffbe3; + overflow: hidden; +} +#score-board table { width: 100%; border-collapse: collapse; } +#score-board th, #score-board td { padding: 8px; text-align: left; } +#score-board thead th { background: #ffe06d; } +#score-board tbody tr:nth-child(odd) { background: #fff6c7; } + +/* Button */ +button { + padding: 10px 14px; + border: 2px solid #e6d27a; + border-radius: 8px; + background: #ffd; + color: #111; + cursor: pointer; + transition: background .15s, color .15s; +} +button:hover { background: red; color: #fff; } + +/* Gallery (simple responsive) */ +.gallery { + display: flex; + flex-wrap: wrap; + gap: 10px; +} +.gallery img { + width: calc(33.333% - 7px); + min-width: 160px; + flex: 1 1 auto; + border: 2px solid #e6d27a; + border-radius: 8px; + background: #fffbe3; +} + +/* Form */ +form { + display: grid; + gap: 8px; + max-width: 600px; +} +input[type="text"], input[type="email"], textarea { + width: 100%; + padding: 10px; + border: 2px solid #e6d27a; + border-radius: 8px; + background: #fffef0; + font: inherit; + color: #111; +} +textarea { min-height: 120px; resize: vertical; } + +/* Footer */ +footer { + text-align: center; + color: #444; + margin: 32px 0 24px; +} + +/* Small screens */ +@media (max-width: 640px) { + nav ul { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } + .gallery img { width: calc(50% - 5px); } +} -- cgit v1.2.3