article_style.css (11217B) - raw
1 #article-title { 2 /* text-decoration: underline; */ 3 text-align: left; 4 padding-top: .5em; 5 padding-bottom: .75em; 6 } 7 8 .article-date { 9 font-size: .9em; 10 padding-bottom: 2.75em; 11 /* color: #588B8B; */ 12 color: #9D96B8; 13 font-style: italic; 14 } 15 16 img { 17 padding-top: .75em; 18 padding-bottom: .75em; 19 } 20 21 #article-screenshot { 22 text-align: center; 23 } 24 25 #article-icon { 26 /* text-align: center; */ 27 /* float: center; */ 28 /* max-width: 5em; */ 29 /* flex-basis: 40% */ 30 width: 3em; 31 min-width: 2em; 32 padding-right: .75em; 33 display: inline; 34 } 35 36 #article-icon img { 37 max-width: 3em; 38 vertical-align: middle; 39 padding-top: 0em; 40 } 41 42 #article-title-with-icon { 43 /* display: flex; */ 44 align-items: center; 45 padding-bottom: 1em; 46 padding-top: 1em; 47 } 48 49 #article-title-with-icon #article-title { 50 display: inline; 51 } 52 53 h2 { 54 padding-bottom: 1em; 55 font-size: 1.5em; 56 } 57 h3 { font-size: 1.25em; } 58 h4 { padding-bottom: .5em; } 59 em { font-weight: bold; } 60 61 ul { 62 padding-bottom: 1em; 63 list-style-position: inside; 64 } 65 66 .article_bottom_bar { 67 border: 0; 68 clear:both; 69 70 display:block; 71 72 background-color: #191919; 73 74 width: 60%; 75 max-width: 20em; 76 height: 0px; 77 78 margin-left: auto; 79 margin-right: auto; 80 margin-top: 2em; 81 margin-bottom: 0; 82 83 padding-top: 0; 84 padding-bottom: 0; 85 /*! border-bottom: dashed; */ 86 border-top: 1px dashed peru; 87 } 88 89 /* Monokai theme */ 90 /* Background */ .bg { color: antiquewhite; background-color: #111111; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4 } 91 /* PreWrapper */ .chroma { color: antiquewhite; background-color: #111111; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; } 92 /* Punctuation */ .chroma .p { color: antiquewhite; } 93 /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } 94 /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } 95 /* LineHighlight */ .chroma .hl { background-color: #3d4148 } 96 /* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #58626f } 97 /* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #58626f } 98 /* Line */ .chroma .line { display: flex; } 99 /* Keyword */ .chroma .k { color: #c678dd } 100 /* KeywordConstant */ .chroma .kc { color: #b756ff; font-weight: bold } 101 /* KeywordDeclaration */ .chroma .kd { color: #c678dd } 102 /* KeywordNamespace */ .chroma .kn { color: #c678dd } 103 /* KeywordPseudo */ .chroma .kp { color: #c678dd } 104 /* KeywordReserved */ .chroma .kr { color: #c678dd } 105 /* KeywordType */ .chroma .kt { color: #ef8383 } 106 /* Name */ .chroma .n { color: antiquewhite } 107 /* NameAttribute */ .chroma .na { color: #b3d23c } 108 /* NameBuiltin */ .chroma .nb { color: #ef8383 } 109 /* NameBuiltinPseudo */ .chroma .bp { color: #c1abea } 110 /* NameClass */ .chroma .nc { color: #76a9f9 } 111 /* NameConstant */ .chroma .no { color: #b756ff; font-weight: bold } 112 /* NameDecorator */ .chroma .nd { color: #e5c07b } 113 /* NameEntity */ .chroma .ni { color: #bda26f } 114 /* NameException */ .chroma .ne { color: #fd7474; font-weight: bold } 115 /* NameFunction */ .chroma .nf { color: #00b1f7 } 116 /* NameFunctionMagic */ .chroma .fm { color: #c1abea } 117 /* NameLabel */ .chroma .nl { color: #f5a40d } 118 /* NameNamespace */ .chroma .nn { color: #76a9f9 } 119 /* NameOther */ .chroma .nx { color: antiquewhite } 120 /* NameProperty */ .chroma .py { color: #cebc3a } 121 /* NameTag */ .chroma .nt { color: #e06c75 } 122 /* NameVariable */ .chroma .nv { color: #dcaeea } 123 /* NameVariableClass */ .chroma .vc { color: #c1abea } 124 /* NameVariableGlobal */ .chroma .vg { color: #dcaeea; font-weight: bold } 125 /* NameVariableInstance */ .chroma .vi { color: #e06c75 } 126 /* NameVariableMagic */ .chroma .vm { color: #c1abea } 127 /* Literal */ .chroma .l { color: #98c379 } 128 /* LiteralDate */ .chroma .ld { color: #98c379 } 129 /* LiteralString */ .chroma .s { color: #98c379 } 130 /* LiteralStringAffix */ .chroma .sa { color: #98c379 } 131 /* LiteralStringBacktick */ .chroma .sb { color: #98c379 } 132 /* LiteralStringChar */ .chroma .sc { color: #98c379 } 133 /* LiteralStringDelimiter */ .chroma .dl { color: #98c379 } 134 /* LiteralStringDoc */ .chroma .sd { color: #7e97c3 } 135 /* LiteralStringDouble */ .chroma .s2 { color: #63c381 } 136 /* LiteralStringEscape */ .chroma .se { color: #d26464; font-weight: bold } 137 /* LiteralStringHeredoc */ .chroma .sh { color: #98c379 } 138 /* LiteralStringInterpol */ .chroma .si { color: #98c379 } 139 /* LiteralStringOther */ .chroma .sx { color: #70b33f } 140 /* LiteralStringRegex */ .chroma .sr { color: #56b6c2 } 141 /* LiteralStringSingle */ .chroma .s1 { color: #98c379 } 142 /* LiteralStringSymbol */ .chroma .ss { color: #56b6c2 } 143 /* LiteralNumber */ .chroma .m { color: #d19a66 } 144 /* LiteralNumberBin */ .chroma .mb { color: #d19a66 } 145 /* LiteralNumberFloat */ .chroma .mf { color: #d19a66 } 146 /* LiteralNumberHex */ .chroma .mh { color: #d19a66 } 147 /* LiteralNumberInteger */ .chroma .mi { color: #d19a66 } 148 /* LiteralNumberIntegerLong */ .chroma .il { color: #d19a66 } 149 /* LiteralNumberOct */ .chroma .mo { color: #d19a66 } 150 /* Operator */ .chroma .o { color: #c7bf54 } 151 /* OperatorWord */ .chroma .ow { color: #b756ff; font-weight: bold } 152 /* Comment */ .chroma .c { color: #8a93a5; font-style: italic } 153 /* CommentHashbang */ .chroma .ch { color: #8a93a5; font-weight: bold; font-style: italic } 154 /* CommentMultiline */ .chroma .cm { color: #8a93a5; font-style: italic } 155 /* CommentSingle */ .chroma .c1 { color: #8a93a5; font-style: italic } 156 /* CommentSpecial */ .chroma .cs { color: #8a93a5; font-style: italic } 157 /* CommentPreproc */ .chroma .cp { color: #8a93a5; font-style: italic } 158 /* CommentPreprocFile */ .chroma .cpf { color: #8a93a5; font-style: italic } 159 /* GenericEmph */ .chroma .ge { font-style: italic } 160 /* GenericHeading */ .chroma .gh { color: #a2cbff; font-weight: bold } 161 /* GenericInserted */ .chroma .gi { color: #a6e22e } 162 /* GenericOutput */ .chroma .go { color: #a6e22e } 163 /* GenericPrompt */ .chroma .gp { color: #a6e22e } 164 /* GenericStrong */ .chroma .gs { font-weight: bold } 165 /* GenericSubheading */ .chroma .gu { color: #a2cbff } 166 /* GenericTraceback */ .chroma .gt { color: #a2cbff } 167 /* GenericUnderline */ .chroma .gl { text-decoration: underline } 168 169 @media (max-width: 800px) { 170 .article_bottom_bar { 171 width: 45%; 172 margin-top: 1em; 173 } 174 #article-title { 175 padding-top: .25em; 176 padding-bottom: .5em; 177 font-size: 1.5em; 178 179 } 180 #article-title-with-icon { 181 padding-bottom: .75em; 182 padding-top: .75em; 183 } 184 #article-icon img { 185 max-width: 2.5em; 186 } 187 #article-icon { 188 padding-right: .5em 189 } 190 } 191 192 @media (max-width: 400px) { 193 .article_bottom_bar { 194 margin-top: .5em; 195 } 196 #article-title { 197 padding-top: .25em; 198 padding-bottom: .5em; 199 font-size: 1.4em; 200 } 201 #article-title-with-icon { 202 padding-bottom: .5em; 203 padding-top: .5em; 204 } 205 #article-icon img { 206 max-width: 2em; 207 } 208 #article-icon { 209 padding-right: .25em 210 } 211 h2 { padding-bottom: .5em; } 212 } 213 214 @media (prefers-color-scheme: light) { 215 .article-date { 216 color: #7E5A9B; 217 } 218 .article_bottom_bar{ 219 border-top: 1px dashed white; 220 } 221 222 /* Monokai light theme */ 223 /* Background */ .bg { color: #272822; background-color: #fafafa; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4 } 224 /* PreWrapper */ .chroma { color: #272822; background-color: #fafafa; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; } 225 /* Error */ .chroma .err { color: #960050; background-color: #1e0010 } 226 /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } 227 /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } 228 /* LineHighlight */ .chroma .hl { background-color: #e1e1e1 } 229 /* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } 230 /* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } 231 /* Line */ .chroma .line { display: flex; } 232 /* Keyword */ .chroma .k { color: #00a8c8 } 233 /* KeywordConstant */ .chroma .kc { color: #00a8c8 } 234 /* KeywordDeclaration */ .chroma .kd { color: #00a8c8 } 235 /* KeywordNamespace */ .chroma .kn { color: #f92672 } 236 /* KeywordPseudo */ .chroma .kp { color: #00a8c8 } 237 /* KeywordReserved */ .chroma .kr { color: #00a8c8 } 238 /* KeywordType */ .chroma .kt { color: #00a8c8 } 239 /* Name */ .chroma .n { color: #111111 } 240 /* NameAttribute */ .chroma .na { color: #75af00 } 241 /* NameBuiltin */ .chroma .nb { color: #111111 } 242 /* NameBuiltinPseudo */ .chroma .bp { color: #111111 } 243 /* NameClass */ .chroma .nc { color: #75af00 } 244 /* NameConstant */ .chroma .no { color: #00a8c8 } 245 /* NameDecorator */ .chroma .nd { color: #75af00 } 246 /* NameEntity */ .chroma .ni { color: #111111 } 247 /* NameException */ .chroma .ne { color: #75af00 } 248 /* NameFunction */ .chroma .nf { color: #75af00 } 249 /* NameFunctionMagic */ .chroma .fm { color: #111111 } 250 /* NameLabel */ .chroma .nl { color: #111111 } 251 /* NameNamespace */ .chroma .nn { color: #111111 } 252 /* NameOther */ .chroma .nx { color: #75af00 } 253 /* NameProperty */ .chroma .py { color: #111111 } 254 /* NameTag */ .chroma .nt { color: #f92672 } 255 /* NameVariable */ .chroma .nv { color: #111111 } 256 /* NameVariableClass */ .chroma .vc { color: #111111 } 257 /* NameVariableGlobal */ .chroma .vg { color: #111111 } 258 /* NameVariableInstance */ .chroma .vi { color: #111111 } 259 /* NameVariableMagic */ .chroma .vm { color: #111111 } 260 /* Literal */ .chroma .l { color: #ae81ff } 261 /* LiteralDate */ .chroma .ld { color: #d88200 } 262 /* LiteralString */ .chroma .s { color: #d88200 } 263 /* LiteralStringAffix */ .chroma .sa { color: #d88200 } 264 /* LiteralStringBacktick */ .chroma .sb { color: #d88200 } 265 /* LiteralStringChar */ .chroma .sc { color: #d88200 } 266 /* LiteralStringDelimiter */ .chroma .dl { color: #d88200 } 267 /* LiteralStringDoc */ .chroma .sd { color: #d88200 } 268 /* LiteralStringDouble */ .chroma .s2 { color: #d88200 } 269 /* LiteralStringEscape */ .chroma .se { color: #8045ff } 270 /* LiteralStringHeredoc */ .chroma .sh { color: #d88200 } 271 /* LiteralStringInterpol */ .chroma .si { color: #d88200 } 272 /* LiteralStringOther */ .chroma .sx { color: #d88200 } 273 /* LiteralStringRegex */ .chroma .sr { color: #d88200 } 274 /* LiteralStringSingle */ .chroma .s1 { color: #d88200 } 275 /* LiteralStringSymbol */ .chroma .ss { color: #d88200 } 276 /* LiteralNumber */ .chroma .m { color: #ae81ff } 277 /* LiteralNumberBin */ .chroma .mb { color: #ae81ff } 278 /* LiteralNumberFloat */ .chroma .mf { color: #ae81ff } 279 /* LiteralNumberHex */ .chroma .mh { color: #ae81ff } 280 /* LiteralNumberInteger */ .chroma .mi { color: #ae81ff } 281 /* LiteralNumberIntegerLong */ .chroma .il { color: #ae81ff } 282 /* LiteralNumberOct */ .chroma .mo { color: #ae81ff } 283 /* Operator */ .chroma .o { color: #f92672 } 284 /* OperatorWord */ .chroma .ow { color: #f92672 } 285 /* Punctuation */ .chroma .p { color: #111111 } 286 /* Comment */ .chroma .c { color: #75715e } 287 /* CommentHashbang */ .chroma .ch { color: #75715e } 288 /* CommentMultiline */ .chroma .cm { color: #75715e } 289 /* CommentSingle */ .chroma .c1 { color: #75715e } 290 /* CommentSpecial */ .chroma .cs { color: #75715e } 291 /* CommentPreproc */ .chroma .cp { color: #75715e } 292 /* CommentPreprocFile */ .chroma .cpf { color: #75715e } 293 /* GenericEmph */ .chroma .ge { font-style: italic } 294 /* GenericStrong */ .chroma .gs { font-weight: bold } 295 }