diff options
| -rw-r--r-- | style.css | 152 | ||||
| -rw-r--r-- | style2.css | 374 | ||||
| -rw-r--r-- | style3.css | 115 |
3 files changed, 238 insertions, 403 deletions
@@ -1,115 +1,115 @@ +* { + line-height: 1.5em; + margin: 0; + padding: 0; + background-color: #f8f8f8; + color: #222; +} + body { - margin: auto; - padding-left: 11px; - padding-right: 11px; - background-color: #8fbc8f; - color: #ddddce; - font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace; - font-style: normal; - font-variant: normal; - max-width: 900px; + font: normal 14px monospace; + width: 100%; + max-width: 800px; + margin: 2em auto 0; + padding: 0 20px; + display: block; +} + +h1, h2, h3 { + font-weight: bold; + margin-top: 1em; + margin-bottom: 0.75em; } h1 { - padding-top: 23px; - padding-bottom: 23px; - padding-left: 11px; - color: #ffffff; + font-size: 1.5em; + color: #9CFF00; background-color: #000000; - text-decoration: underline; - margin-left: -23px; - max-width: 878px; + padding: 0 10px; } h2 { - padding-top: 23px; - padding-bottom: 23px; - padding-left: 11px; - color: #ffffff; - background-color: #000000; - text-decoration: underline; - margin-left: -11px; - max-width: 889px; + margin-top: 1em; + font-size: 1.25em; } h3 { - padding-top: 23px; - padding-bottom: 23px; - padding-left: 11px; - color: #ffffff; - background-color: #000000; - text-decoration: underline; - margin-left: -5px; - max-width: 895px; + font-size: 1.0em; } a { - color: #ffffff; + color: #248; + font-weight: 600; text-decoration: none; - background-color: #000000; - padding: 2px; - margin: 2px; } a:hover { - color: #000000; + background-color: #9CFF00; text-decoration: underline; - background-color: #ffffff; } -ul { - color: #ffffff; - background-color: #000000; - padding-top: 23px; - padding-bottom: 23px; - padding-right: 23px; - padding-left: 79px; +a:visited { + color: #248; } -img { - max-width: 601; - max-height: 401; - display: block; - margin: auto; +a.textlink:before { + content: "⇒ "; + padding-left: 11px; } -pre { - display: block; - overflow-x: auto; - color: #ffffff; - background-color: #000000; - margin: 5px; - padding: 23px; - border: 29px double #8fbc8f; +p.quote { + font-style: italic; } -a.textlink:before { - content: " ⇒ "; - padding-left: 11px; +p.quote:before { + content: "« "; + padding-left: 2px; +} + +p.quote:after { + content: " »"; + padding-right: 2px; } p { - color: #ffffff; - background-color: #000000; - padding: 23px; + margin: 0.75em 0 0.75em 0; + padding: 0 5px; } -p.quote { - color: #ffffff; - background-color: #000000; +ol { + margin: 0.75em 0 0.75em 0; + padding: 0; } -p.footer { - color: #ffffff; - background-color: #000000; +ul { + list-style: none; + padding-right: 23px; + padding-left: 10px; + margin: 0.75em 0 0.75em 0; } -p.quote:before { - content: " « "; - padding-left: 2px; +li { + margin-left: 1em; + margin-bottom: 0.25em; } -p.quote:after { - content: " » "; - padding-right: 2px; +li:before { + content: "★"; + padding-right: 5px; +} + +img { + max-width: 100%; + display: block; + margin: auto; + border: 1px solid #9CFF00; +} + +pre { + font-family: monospace; + padding: 0; + overflow-x: scroll; + scrollbar-width: none; + border-left: 2px solid #9CFF00; + padding-left: 12px; } @@ -1,8 +1,4 @@ * { - border: 0; - font: inherit; - font-size: 100%; - vertical-align: baseline; line-height: 1.5em; margin: 0; padding: 0; @@ -12,39 +8,24 @@ body { font: normal 14px monospace; -} - -body { - position: relative; width: 100%; max-width: 800px; margin: 2em auto 0; padding: 0 20px; - box-sizing: border-box; -} - -/* For devices larger than 400px */ -@media (min-width: 400px) { - body { - width: 85%; - padding: 0; - } -} - -/* For devices larger than 550px */ -@media (min-width: 550px) { - body { - width: 80%; - } + display: block; } h1, h2, h3 { font-weight: bold; + margin-top: 1em; margin-bottom: 0.75em; } h1 { font-size: 1.5em; + color: #9CFF00; + background-color: #000000; + padding: 0 10px; } h2 { @@ -53,343 +34,82 @@ h2 { } h3 { - font-size: 1.1em; -} - -small { - font-size: 0.8em; -} - -small.date { - padding-left: 2em; - color: #888; + font-size: 1.0em; } a { color: #248; font-weight: 600; + text-decoration: none; } -a:visited { - color: #824; +a:hover { + background-color: #9CFF00; + text-decoration: underline; } -li { - margin-left: 1em; - margin-bottom: 0.25em; +a:visited { + color: #248; } -ol li { - margin-left: 2em; +a.textlink:before { + content: "⇒ "; + padding-left: 11px; } -em { +p.quote { font-style: italic; } -strong { - font-weight: bold; +p.quote:before { + content: "« "; + padding-left: 2px; } -p, ul, ol { - margin: 0 0 0.75em 0; - padding: 0; +p.quote:after { + content: " »"; + padding-right: 2px; } -p code, li code { - color: rgb(66, 146, 41); +p { + margin: 0.75em 0 0.75em 0; + padding: 0 5px; } -article * { - line-height: 1.8em; +ol { + margin: 0.75em 0 0.75em 0; + padding: 0; } -article img { - width: 100%; - margin: 2em 0; +ul { + list-style: none; + padding-right: 23px; + padding-left: 10px; + margin: 0.75em 0 0.75em 0; } -article img.med { - max-width: 400px; - text-align: center; +li { + margin-left: 1em; + margin-bottom: 0.25em; } -div.previously { - margin-top: 6em; - text-align: center; +li:before { + content: "★"; + padding-right: 5px; } -pre, code { - font-family: monospace; +img { + max-width: 100%; + display: block; + margin: auto; + border: 1px solid #9CFF00; } pre { + font-family: monospace; padding: 0; overflow-x: scroll; scrollbar-width: none; - - /* border-left: 3px solid #a8b8c8; - padding-left: 12px; */ -} - -pre * { - line-height: 1.0em; -} - -pre + p { - margin-top: 1em; -} - -pre code { - /* margin: 10px; */ - word-wrap: no; -} - -hr { - display: block; - margin: 8em 0; - border-width: 0; - text-align: center; -} - -hr::after { - content: "················"; -} - -header { - margin-bottom: 40px; -} - -header h1 { - font-size: 2em; - font-weight: 1000; -} - -header h1 img { - width: 32px; - display: inline-block; - padding-right: 12px; - position: relative; - top: 8px; -} - -header h1 a, header h1 a:visited { - color: #222; - text-decoration: none; - font-weight: 1000; -} - -header ul { - margin: 0; - padding: 0; - border: 0; -} - -header li { - list-style: none; - display: inline-block; - margin: 0; - padding: 0; - border: 0; -} - -header li.byline { - margin-right: 20px; - font-weight: 1000; + border-left: 2px solid #9CFF00; + padding-left: 12px; } - -@media (max-width: 500px) { - header li.byline { - display: block; - } -} - -header li a, header li a:visited { - color: #222; - margin: 0 7px; - font-weight: 600; -} - -article.quote_of_the_day { - margin-left: 3em; -} - -article.quote_of_the_day p { - margin-top: 2em; -} - -article h1 { - font-size: 1.5em; - margin-bottom: 0.75em; -} - -article h2 { - font-size: 1.25em; - margin-bottom: 0.75em; -} - -article h3 { - font-weight: bold; - margin-bottom: 0.75em; -} - -h3.date { - color: #888; - font-weight: bold; - margin-bottom: 30px; -} - -article + h3.date { - margin-top: 80px; -} - -iframe { - margin: 20px; - max-width: 530px; -} - -#content img { - max-width: 100%; -} - -table { - margin: 20px 0; - border-collapse: collapse; - border-spacing: 0; -} - -thead th { - border-bottom: 1px solid #666; - padding: 6px 13px 2px 13px; -} - -thead tr { -} - -table td { - padding: 6px 13px 2px; -} - -div.portrait { - float: left; - width: 400px; - padding-right: 20px; - padding-bottom: 20px; -} - -@media (max-width: 640px) { - div.portrait { - float: none; - width: 100%; - padding: 0 0 20px; - } -} - -div.portrait img { - width: 100%; -} - -.clear { - clear: both; -} - -footer { - margin-bottom: 6em; - text-align: center; -} - -blockquote { - font-style: italic; -} - -article blockquote { - border-left: 2px solid #666; - padding-left: 1em; - margin-bottom: 1.5em; -} - -blockquote code { - font-style: normal; - font-weight: bold; -} - -div.highlight { - margin-bottom: 1em; -} - -#previous-link { - text-align: center; - margin: 5em 0 0 0; -} - -.highlight, .highlight * { background: #f8f8f8; } -.highlight .hll { background-color: #ffffcc } -.highlight .c { color: #408080; font-style: italic } /* Comment */ -.highlight .err { border: 1px solid #FF0000 } /* Error */ -.highlight .k { color: #008000; font-weight: bold } /* Keyword */ -.highlight .o { color: #666666 } /* Operator */ -.highlight .ch { color: #408080; font-style: italic } /* Comment.Hashbang */ -.highlight .cm { color: #408080; font-style: italic } /* Comment.Multiline */ -.highlight .cp { color: #BC7A00 } /* Comment.Preproc */ -.highlight .cpf { color: #408080; font-style: italic } /* Comment.PreprocFile */ -.highlight .c1 { color: #408080; font-style: italic } /* Comment.Single */ -.highlight .cs { color: #408080; font-style: italic } /* Comment.Special */ -.highlight .gd { color: #A00000 } /* Generic.Deleted */ -.highlight .ge { font-style: italic } /* Generic.Emph */ -.highlight .gr { color: #FF0000 } /* Generic.Error */ -.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */ -.highlight .gi { color: #00A000 } /* Generic.Inserted */ -.highlight .go { color: #888888 } /* Generic.Output */ -.highlight .gp { color: #000080; font-weight: bold } /* Generic.Prompt */ -.highlight .gs { font-weight: bold } /* Generic.Strong */ -.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */ -.highlight .gt { color: #0044DD } /* Generic.Traceback */ -.highlight .kc { color: #008000; font-weight: bold } /* Keyword.Constant */ -.highlight .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */ -.highlight .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */ -.highlight .kp { color: #008000 } /* Keyword.Pseudo */ -.highlight .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */ -.highlight .kt { color: #B00040 } /* Keyword.Type */ -.highlight .m { color: #666666 } /* Literal.Number */ -.highlight .s { color: #BA2121 } /* Literal.String */ -.highlight .na { color: #7D9029 } /* Name.Attribute */ -.highlight .nb { color: #008000 } /* Name.Builtin */ -.highlight .nc { color: #0000FF; font-weight: bold } /* Name.Class */ -.highlight .no { color: #880000 } /* Name.Constant */ -.highlight .nd { color: #AA22FF } /* Name.Decorator */ -.highlight .ni { color: #999999; font-weight: bold } /* Name.Entity */ -.highlight .ne { color: #D2413A; font-weight: bold } /* Name.Exception */ -.highlight .nf { color: #0000FF } /* Name.Function */ -.highlight .nl { color: #A0A000 } /* Name.Label */ -.highlight .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */ -.highlight .nt { color: #008000; font-weight: bold } /* Name.Tag */ -.highlight .nv { color: #19177C } /* Name.Variable */ -.highlight .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */ -.highlight .w { color: #bbbbbb } /* Text.Whitespace */ -.highlight .mb { color: #666666 } /* Literal.Number.Bin */ -.highlight .mf { color: #666666 } /* Literal.Number.Float */ -.highlight .mh { color: #666666 } /* Literal.Number.Hex */ -.highlight .mi { color: #666666 } /* Literal.Number.Integer */ -.highlight .mo { color: #666666 } /* Literal.Number.Oct */ -.highlight .sa { color: #BA2121 } /* Literal.String.Affix */ -.highlight .sb { color: #BA2121 } /* Literal.String.Backtick */ -.highlight .sc { color: #BA2121 } /* Literal.String.Char */ -.highlight .dl { color: #BA2121 } /* Literal.String.Delimiter */ -.highlight .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */ -.highlight .s2 { color: #BA2121 } /* Literal.String.Double */ -.highlight .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */ -.highlight .sh { color: #BA2121 } /* Literal.String.Heredoc */ -.highlight .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */ -.highlight .sx { color: #008000 } /* Literal.String.Other */ -.highlight .sr { color: #BB6688 } /* Literal.String.Regex */ -.highlight .s1 { color: #BA2121 } /* Literal.String.Single */ -.highlight .ss { color: #19177C } /* Literal.String.Symbol */ -.highlight .bp { color: #008000 } /* Name.Builtin.Pseudo */ -.highlight .fm { color: #0000FF } /* Name.Function.Magic */ -.highlight .vc { color: #19177C } /* Name.Variable.Class */ -.highlight .vg { color: #19177C } /* Name.Variable.Global */ -.highlight .vi { color: #19177C } /* Name.Variable.Instance */ -.highlight .vm { color: #19177C } /* Name.Variable.Magic */ -.highlight .il { color: #666666 } /* Literal.Number.Integer.Long */ - -body { display: block } /* Prevent FUOC */ diff --git a/style3.css b/style3.css new file mode 100644 index 0000000..d62b6ae --- /dev/null +++ b/style3.css @@ -0,0 +1,115 @@ +body { + margin: auto; + padding-left: 11px; + padding-right: 11px; + background-color: #8fbc8f; + color: #ddddce; + font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace; + font-style: normal; + font-variant: normal; + max-width: 900px; +} + +h1 { + padding-top: 23px; + padding-bottom: 23px; + padding-left: 11px; + color: #ffffff; + background-color: #000000; + text-decoration: underline; + margin-left: -23px; + max-width: 878px; +} + +h2 { + padding-top: 23px; + padding-bottom: 23px; + padding-left: 11px; + color: #ffffff; + background-color: #000000; + text-decoration: underline; + margin-left: -11px; + max-width: 889px; +} + +h3 { + padding-top: 23px; + padding-bottom: 23px; + padding-left: 11px; + color: #ffffff; + background-color: #000000; + text-decoration: underline; + margin-left: -5px; + max-width: 895px; +} + +a { + color: #ffffff; + text-decoration: none; + background-color: #000000; + padding: 2px; + margin: 2px; +} + +a:hover { + color: #000000; + text-decoration: underline; + background-color: #ffffff; +} + +ul { + color: #ffffff; + background-color: #000000; + padding-top: 23px; + padding-bottom: 23px; + padding-right: 23px; + padding-left: 79px; +} + +img { + max-width: 601; + max-height: 401; + display: block; + margin: auto; +} + +pre { + display: block; + overflow-x: auto; + color: #ffffff; + background-color: #000000; + margin: 5px; + padding: 23px; + border: 29px double #8fbc8f; +} + +a.textlink:before { + content: " ⇒ "; + padding-left: 11px; +} + +p { + color: #ffffff; + background-color: #000000; + padding: 23px; +} + +p.quote { + color: #ffffff; + background-color: #000000; +} + +p.footer { + color: #ffffff; + background-color: #000000; +} + +p.quote:before { + content: " « "; + padding-left: 2px; +} + +p.quote:after { + content: " » "; + padding-right: 2px; +} |