style.css (3467B)
1 /* Layout & Typography */ 2 html { 3 margin: 1em auto; 4 max-width: 42em; 5 font-family: sans-serif; 6 line-height: 1.5; 7 } 8 body { 9 margin: auto 8px 20px 8px; 10 background: #fff; 11 color: #000; 12 } 13 14 /* Header and Navigation (Table-based) */ 15 header nav table { width: 100%; border-collapse: collapse; border} 16 .logo img { max-width: 3em; margin: 0; } 17 .logo pre { background-color: transparent; border: none; padding: 0; margin: 0; 18 overflow: hidden; height: auto; width: auto; line-height: 1; letter-spacing: 0; 19 font-family: monospace; display: inline-block; vertical-align: middle; } 20 .logo a { color: #000 !important; text-decoration: none; display: inline-block; } 21 .logo a:hover { color: #000; background-color: yellow; text-decoration: none; } 22 .links { text-align: right; font-weight: bold; } 23 .links a { font-weight: bold; color: black; margin-left: 10px; } 24 25 26 /* Content Headers */ 27 h1 { font-size: 1.8em; text-align: center; margin: 1em 0; } 28 h2 { font-size: 1.6em; margin-top: 1.5em; } 29 h3 { font-size: 1.05em; } 30 31 /* Metadata line */ 32 .meta { 33 text-align: center; 34 font-style: italic; 35 color: #555; 36 margin-bottom: 2em; 37 } 38 39 /* Links */ 40 a { color: #000; text-decoration: underline; } 41 a:hover { background-color: yellow; } 42 43 /* Code Blocks */ 44 pre { 45 background-color: #eeeeee; 46 border: 2px solid #000; 47 padding: 6px; 48 overflow-x: auto; 49 } 50 code { background-color: #eeeeee; padding: 2px; font-family: monospace; } 51 pre code { padding: 0px; background: none; } 52 53 /* Tables (Post lists/File lists) */ 54 table { width: 100%; border-collapse: collapse; } 55 #log tr:hover td, #files tr:hover td { background-color: #eeeeee; } 56 #files td { font-family: monospace; font-size: 1.1em; padding: 4px 0; } 57 58 /* Footer */ 59 footer { margin-top: 2em; border-top: 1px solid #ccc; padding-top: 1em; } 60 footer table { font-style: italic; width: 100%; } 61 .hosted { text-align: right; } 62 63 /* Print settings */ 64 @media print { 65 .page-break { break-before: always; } 66 img, p { break-inside: avoid; } 67 h1, h2, h3 { break-after: avoid; } 68 } 69 70 /* Song Gallery Stuff */ 71 .song-gallery { 72 display: grid; 73 /* Fits roughly 3 columns in your 42em max-width */ 74 grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); 75 gap: 1em; 76 margin: 2em 0; 77 } 78 79 .song-card { 80 background: #fff; 81 border: 2px solid #000; /* Match pre block border */ 82 padding: 8px; /* Give it that nested border look */ 83 display: flex; 84 flex-direction: column; 85 } 86 87 .song-card:hover { 88 background-color: #eeeeee; /* Match table hover effect */ 89 outline: 2px solid yellow; /* Hint at the link hover style */ 90 } 91 92 .song-card img { 93 width: 100%; 94 aspect-ratio: 1/1; 95 object-fit: cover; 96 border: 1px solid #000; /* Hard edge on art */ 97 margin-bottom: 8px; 98 } 99 100 .song-info { 101 display: flex; 102 flex-direction: column; 103 flex-grow: 1; 104 } 105 106 .song-title { 107 font-weight: bold; 108 font-size: 1em; 109 line-height: 1.2; 110 display: block; 111 } 112 113 .artist-name { 114 color: #555; /* Match .meta color */ 115 font-size: 0.9em; 116 font-style: italic; 117 margin-bottom: 12px; 118 } 119 120 .song-link { 121 margin-top: auto; 122 text-align: center; 123 font-weight: bold; 124 font-family: monospace; /* Match your logo/code style */ 125 text-transform: uppercase; 126 text-decoration: none; 127 border: 1px solid #000; 128 padding: 4px; 129 background: #fff; 130 color: #000; 131 } 132 133 .song-link:hover { 134 background-color: yellow; /* The classic Verso 2 hover */ 135 }