article.css (3320B)
1 body { 2 background-color: rgb(255, 255, 255); 3 color: rgb(28, 28, 28); 4 /* font-family: 'Times New Roman', Times, serif; */ 5 /* font-weight: 300; */ 6 /* line-height: 1.5; */ 7 /* text-align: justify; */ 8 max-width: 130ex; 9 margin-left: auto; 10 margin-right: auto; 11 padding: 2em; 12 /* letter-spacing: 1px; */ 13 /* overflow-wrap: break-word; */ 14 } 15 16 hr { 17 height: 0.5px; 18 border: none; 19 background-color: #ddd; 20 width: 50%; 21 margin: 30px auto; 22 } 23 24 header { 25 text-align: center; 26 } 27 28 .title { 29 font-size: 28px; 30 line-height: 1em; 31 margin-bottom: 20px; 32 } 33 34 .date { 35 font-size: 14px; 36 color: grey; 37 font-style: italic; 38 } 39 40 h1, h2, h3 { 41 padding-top: 1em; 42 font-weight: normal; 43 line-height: 1em; 44 margin-bottom: 20px; 45 } 46 47 a { 48 text-decoration: none; 49 border-bottom: 1px dotted; 50 cursor: pointer; 51 transition: color .2s ease-out; 52 } 53 54 a:hover { 55 color: #005577; 56 } 57 58 img { 59 display: block; 60 margin-left: auto; 61 margin-right: auto; 62 width: 80%; 63 } 64 65 cita { 66 display: block; 67 color: #333; 68 margin: 1em 0; 69 padding: 1em; 70 border-left: 1px solid #ddd; 71 font-style: italic; 72 } 73 74 cita p:last-of-type { 75 margin-bottom: 0; 76 text-align: right; 77 font-style: normal; 78 } 79 80 code { 81 font-family: monospace; 82 font-size: inherit; 83 color: #ffffff; 84 background-color: #333; 85 display: block; 86 padding-right: 1%; 87 padding-left: 1%; 88 padding-top: 1%; 89 padding-bottom: 1%; 90 word-wrap: normal; 91 overflow-x: auto; 92 } 93 94 .diff .add {color:#00ff9d;} 95 .diff .del {color:#ff5f5f;} 96 .diff .header {color:#569cd6;} 97 .diff .hunk {color:#d7ba7d;} 98 .diff .info {color:#848484;} 99 100 codeb { 101 font-family: monospace; 102 font-size: inherit; 103 color: #ffffff; 104 background-color: #333; 105 display: block; 106 padding: 1%; /* más simple */ 107 108 /* Lo importante para wrapping: */ 109 white-space: pre-wrap; /* mantiene indentación y hace wrap */ 110 word-break: break-word; /* rompe palabras largas si es necesario */ 111 overflow-x: hidden; /* o "visible", pero hidden es más limpio */ 112 overflow-wrap: break-word; /* respaldo moderno */} 113 114 emb { 115 font-family: monospace; 116 background-color: #f0f0f0; 117 border-radius: 3px; 118 padding: 2px 4px; 119 font-size: 0.9em; 120 color: #333; 121 } 122 123 kbd { 124 font-family: monospace; 125 background-color: #f0f0f0; 126 border-radius: 3px; 127 padding: 2px 4px; 128 font-size: 0.9em; 129 color: #333; 130 white-space: nowrap; 131 border: 1px solid #ccc; 132 box-shadow: inset 0 -1px 0 #fff; 133 } 134 135 math { 136 font-family: monospace; 137 display: block; 138 margin: 10px; 139 word-wrap: normal; 140 overflow-x: auto; 141 } 142 143 .subrayado {background-color:#fff981;} 144 145 @media screen and (max-width: 768px) { 146 body { 147 /* padding: 2em; */ 148 /* font-size: 85%; */ 149 } 150 } 151 152 @media (prefers-color-scheme: dark) { 153 body { 154 color: rgb(234, 234, 234); 155 background-color: black; 156 } 157 158 a { 159 color: #349dc6; 160 } 161 162 a:hover { 163 color: antiquewhite; 164 } 165 166 .color-invertible { 167 filter: invert(100%); 168 } 169 170 cita { 171 color: lightcyan; 172 border-left: 1px solid lightcyan; 173 } 174 175 code { 176 color: lightcyan; 177 background-color: rgb(27, 27, 27); 178 } 179 180 codeb { 181 color: lightcyan; 182 background-color: rgb(27, 27, 27); 183 } 184 185 emb { 186 background-color: #343434; 187 color: lightcyan; 188 } 189 190 kbd { 191 background-color: #343434; 192 color: #ffffff; 193 border: 1px solid #211e1e; 194 box-shadow: inset 0 -1px 0 #000000; 195 } 196 197 .subrayado {background-color:#373400;} 198 199 }