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