post.css (3576B)
1 .index-content { 2 margin-top: 20px; 3 } 4 5 .framed { 6 border: 1px solid var(--accent); 7 padding: 20px; 8 9 *:first-child { 10 margin-top: 0; 11 } 12 13 *:last-child { 14 margin-bottom: 0; 15 } 16 } 17 18 .posts { 19 width: 100%; 20 } 21 22 .post { 23 width: 100%; 24 text-align: left; 25 26 27 &.on-list { 28 margin-top: 1rem; 29 margin-bottom: 1rem; 30 31 .post-title { 32 font-size: 1.2rem; 33 margin-bottom: 0.5rem; 34 padding-bottom: 0.5rem; 35 } 36 37 &:last-of-type { 38 hr.separator { 39 display:none; 40 } 41 } 42 } 43 44 .post-preview { 45 46 margin-top: 1rem; 47 margin-bottom: 1rem; 48 margin-right: 2rem; 49 margin-left: 2rem; 50 51 .read-more { 52 margin-top: 1rem; 53 margin-bottom: 0rem; 54 } 55 56 .post-preview-grid { 57 display: grid; 58 column-gap: 2rem; 59 grid-auto-columns: 1fr 3fr; 60 grid-auto-rows: min-content; 61 62 .post-cover { 63 grid-row: 1 / 3; 64 grid-column: 1; 65 border: 0; 66 padding: 0; 67 margin: 0; 68 contain: style; 69 } 70 71 .post-description { 72 grid-column: 2; 73 } 74 75 .read-more { 76 grid-row: 2; 77 grid-column: 2; 78 } 79 } 80 } 81 82 > .post-series { 83 margin: 0; 84 margin-left: 2px; 85 font-style: italic; 86 opacity: .5; 87 a { 88 text-decoration: none; 89 } 90 } 91 92 > .post-meta { 93 font-size: 1rem; 94 margin-bottom: 10px; 95 color: var(--greyed-out); 96 97 > :not(:first-child) { 98 &::before { 99 content: "::"; 100 display: inline-block; 101 margin: 0 8px; 102 } 103 } 104 } 105 106 > .post-title { 107 --border: 3px dotted var(--accent); 108 position: relative; 109 color: var(--accent); 110 margin: 0 0 15px; 111 padding-bottom: 15px; 112 border-bottom: var(--border); 113 114 &:after { 115 content: ''; 116 position: absolute; 117 bottom: 2px; 118 display: block; 119 width: 100%; 120 border-bottom: var(--border); 121 } 122 123 a { 124 text-decoration: none; 125 } 126 } 127 128 > .post-tags { 129 color: var(--greyed-out); 130 display: block; 131 margin-bottom: 0.5rem; 132 font-size: 1rem; 133 134 a { 135 text-decoration: none; 136 } 137 } 138 139 > .post-content { 140 margin-top: 1.5rem; 141 } 142 143 ul { 144 list-style: none; 145 146 li:not(:empty):before { 147 content: '-'; 148 position: absolute; 149 left: -20px; 150 color: var(--accent); 151 } 152 } 153 } 154 155 .post-cover { 156 border: 1.2rem solid var(--accent); 157 background: transparent; 158 margin-top: 2rem; 159 margin-bottom: 2rem; 160 padding: 20px; 161 162 @media (var(--phone-width)) { 163 padding: 10px; 164 border-width: 10px; 165 } 166 } 167 168 169 .post--regulation { 170 h1 { 171 justify-content: center; 172 } 173 174 h2 { 175 justify-content: center; 176 margin-bottom: 10px; 177 178 & + h2 { 179 margin-top: -10px; 180 margin-bottom: 20px; 181 } 182 } 183 } 184 185 .hanchor { 186 color: var(--accent); 187 text-decoration: none; 188 margin-left: 10px; 189 visibility: hidden; 190 } 191 192 h1:hover a, h2:hover a, h3:hover a, h4:hover a { 193 visibility: visible; 194 } 195 196 .footnotes { 197 color: var(--greyed-out); 198 } 199