diff --git a/static/css/lanyon.css b/static/css/lanyon.css index 721c9d3..1d57108 100644 --- a/static/css/lanyon.css +++ b/static/css/lanyon.css @@ -75,12 +75,12 @@ h1, h2, h3, h4, h5, h6 { .container { max-width: 28rem; } -@media (min-width: 38rem) { +@media (min-width: 38em) { .container { max-width: 32rem; } } -@media (min-width: 56rem) { +@media (min-width: 56em) { .container { max-width: 38rem; } @@ -114,7 +114,7 @@ h1, h2, h3, h4, h5, h6 { letter-spacing: 0; } -@media (max-width: 48rem) { +@media (max-width: 48em) { .masthead-title { text-align: center; } @@ -155,7 +155,7 @@ h1, h2, h3, h4, h5, h6 { -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } -@media (min-width: 30rem) { +@media (min-width: 30em) { .sidebar { font-size: .75rem; /* 14px */ } @@ -190,7 +190,7 @@ a.sidebar-nav-item:focus { border-color: transparent; } -@media (min-width: 48rem) { +@media (min-width: 48em) { .sidebar-item { padding: 1.5rem; } @@ -202,54 +202,64 @@ a.sidebar-nav-item:focus { /* Hide the sidebar checkbox that we toggle with `.sidebar-toggle` */ .sidebar-checkbox { - display: none; + position: absolute; + opacity: 0; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; } /* Style the `label` that we use to target the `.sidebar-checkbox` */ .sidebar-toggle { position: absolute; - top: 1rem; + top: .8rem; left: 1rem; display: block; - width: 2.2rem; - padding: .5rem .65rem; + padding: .25rem .75rem; color: #505050; background-color: #fff; - border-radius: 4px; + border-radius: .25rem; cursor: pointer; } + .sidebar-toggle:before { - display: block; + display: inline-block; + width: 1rem; + height: .75rem; content: ""; - width: 100%; - padding-bottom: .125rem; - border-top: .375rem double; - border-bottom: .125rem solid; - - /* Make the border inside the box */ - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; + background-image: -webkit-linear-gradient(to bottom, #555, #555 20%, #fff 20%, #fff 40%, #555 40%, #555 60%, #fff 60%, #fff 80%, #555 80%, #555 100%); + background-image: -moz-linear-gradient(to bottom, #555, #555 20%, #fff 20%, #fff 40%, #555 40%, #555 60%, #fff 60%, #fff 80%, #555 80%, #555 100%); + background-image: -ms-linear-gradient(to bottom, #555, #555 20%, #fff 20%, #fff 40%, #555 40%, #555 60%, #fff 60%, #fff 80%, #555 80%, #555 100%); + background-image: linear-gradient(to bottom, #555, #555 20%, #fff 20%, #fff 40%, #555 40%, #555 60%, #fff 60%, #fff 80%, #555 80%, #555 100%); } .sidebar-toggle:active, +#sidebar-checkbox:focus ~ .sidebar-toggle, #sidebar-checkbox:checked ~ .sidebar-toggle { color: #fff; - background-color: #505050; + background-color: #555; +} + +.sidebar-toggle:active:before, +#sidebar-checkbox:focus ~ .sidebar-toggle:before, +#sidebar-checkbox:checked ~ .sidebar-toggle:before { + background-image: -webkit-linear-gradient(to bottom, #fff, #fff 20%, #555 20%, #555 40%, #fff 40%, #fff 60%, #555 60%, #555 80%, #fff 80%, #fff 100%); + background-image: -moz-linear-gradient(to bottom, #fff, #fff 20%, #555 20%, #555 40%, #fff 40%, #fff 60%, #555 60%, #555 80%, #fff 80%, #fff 100%); + background-image: -ms-linear-gradient(to bottom, #fff, #fff 20%, #555 20%, #555 40%, #fff 40%, #fff 60%, #555 60%, #555 80%, #fff 80%, #fff 100%); + background-image: linear-gradient(to bottom, #fff, #fff 20%, #555 20%, #555 40%, #fff 40%, #fff 60%, #555 60%, #555 80%, #fff 80%, #fff 100%); } -@media (min-width: 30.1rem) { +@media (min-width: 30.1em) { .sidebar-toggle { position: fixed; - width: 2.25rem; - } - .sidebar-toggle:before { - padding-bottom: .15rem; - border-top-width: .45rem; - border-bottom-width: .15rem; } } +@media print { + .sidebar-toggle { + display: none; + } +} /* Slide effect * @@ -278,6 +288,7 @@ a.sidebar-nav-item:focus { } #sidebar-checkbox:checked + .sidebar { + z-index: 10; visibility: visible; } #sidebar-checkbox:checked ~ .sidebar, @@ -377,7 +388,7 @@ a.pagination-item:hover { background-color: #f5f5f5; } -@media (min-width: 30rem) { +@media (min-width: 30em) { .pagination { margin: 3rem 0; } @@ -525,3 +536,28 @@ a.pagination-item:hover { .theme-base-0f .related-posts li a:hover { color: #8f5536; } + + +/* + * Overlay sidebar + * + * Make the sidebar content overlay the viewport content instead of pushing it + * aside when toggled. + */ + +.sidebar-overlay #sidebar-checkbox:checked ~ .wrap { + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); +} +.sidebar-overlay #sidebar-checkbox:checked ~ .sidebar-toggle { + box-shadow: 0 0 0 .25rem #fff; +} +.sidebar-overlay #sidebar-checkbox:checked ~ .sidebar { + box-shadow: .25rem 0 .5rem rgba(0,0,0,.1); +} + +/* Only one tweak for a reverse layout */ +.layout-reverse.sidebar-overlay #sidebar-checkbox:checked ~ .sidebar { + box-shadow: -.25rem 0 .5rem rgba(0,0,0,.1); +} diff --git a/static/css/poole.css b/static/css/poole.css index 5e3dabe..8ec27e7 100644 --- a/static/css/poole.css +++ b/static/css/poole.css @@ -52,7 +52,7 @@ html { font-size: 16px; line-height: 1.5; } -@media (min-width: 38rem) { +@media (min-width: 38em) { html { font-size: 20px; } @@ -70,6 +70,9 @@ a { color: #268bd2; text-decoration: none; } +a strong { + color: inherit; +} /* `:focus` is linked to `:hover` for basic accessibility */ a:hover, a:focus { @@ -175,6 +178,8 @@ pre code { color: inherit; background-color: transparent; } + +/* Pygments via Jekyll */ .highlight { margin-bottom: 1rem; border-radius: 4px; @@ -183,6 +188,28 @@ pre code { margin-bottom: 0; } +/* Gist via GitHub Pages */ +.gist .gist-file { + font-family: Menlo, Monaco, "Courier New", monospace !important; +} +.gist .markdown-body { + padding: 15px; +} +.gist pre { + padding: 0; + background-color: transparent; +} +.gist .gist-file .gist-data { + font-size: .8rem !important; + line-height: 1.4; +} +.gist code { + padding: 0; + color: inherit; + background-color: transparent; + border-radius: 0; +} + /* Quotes */ blockquote { padding: .5rem 1rem; @@ -193,7 +220,7 @@ blockquote { blockquote p:last-child { margin-bottom: 0; } -@media (min-width: 30rem) { +@media (min-width: 30em) { blockquote { padding-right: 5rem; padding-left: 1.25rem; @@ -202,6 +229,7 @@ blockquote p:last-child { img { display: block; + max-width: 100%; margin: 0 0 1rem; border-radius: 5px; } @@ -381,7 +409,7 @@ a.pagination-item:hover { background-color: #f5f5f5; } -@media (min-width: 30rem) { +@media (min-width: 30em) { .pagination { margin: 3rem 0; } diff --git a/static/css/syntax.css b/static/css/syntax.css index 1264b87..15ad797 100644 --- a/static/css/syntax.css +++ b/static/css/syntax.css @@ -1,65 +1,64 @@ -.hll { background-color: #ffffcc } - /*{ background: #f0f3f3; }*/ -.c { color: #999; } /* Comment */ -.err { color: #AA0000; background-color: #FFAAAA } /* Error */ -.k { color: #006699; } /* Keyword */ -.o { color: #555555 } /* Operator */ -.cm { color: #0099FF; font-style: italic } /* Comment.Multiline */ -.cp { color: #009999 } /* Comment.Preproc */ -.c1 { color: #999; } /* Comment.Single */ -.cs { color: #999; } /* Comment.Special */ -.gd { background-color: #FFCCCC; border: 1px solid #CC0000 } /* Generic.Deleted */ -.ge { font-style: italic } /* Generic.Emph */ -.gr { color: #FF0000 } /* Generic.Error */ -.gh { color: #003300; } /* Generic.Heading */ -.gi { background-color: #CCFFCC; border: 1px solid #00CC00 } /* Generic.Inserted */ -.go { color: #AAAAAA } /* Generic.Output */ -.gp { color: #000099; } /* Generic.Prompt */ -.gs { } /* Generic.Strong */ -.gu { color: #003300; } /* Generic.Subheading */ -.gt { color: #99CC66 } /* Generic.Traceback */ -.kc { color: #006699; } /* Keyword.Constant */ -.kd { color: #006699; } /* Keyword.Declaration */ -.kn { color: #006699; } /* Keyword.Namespace */ -.kp { color: #006699 } /* Keyword.Pseudo */ -.kr { color: #006699; } /* Keyword.Reserved */ -.kt { color: #007788; } /* Keyword.Type */ -.m { color: #FF6600 } /* Literal.Number */ -.s { color: #d44950 } /* Literal.String */ -.na { color: #4f9fcf } /* Name.Attribute */ -.nb { color: #336666 } /* Name.Builtin */ -.nc { color: #00AA88; } /* Name.Class */ -.no { color: #336600 } /* Name.Constant */ -.nd { color: #9999FF } /* Name.Decorator */ -.ni { color: #999999; } /* Name.Entity */ -.ne { color: #CC0000; } /* Name.Exception */ -.nf { color: #CC00FF } /* Name.Function */ -.nl { color: #9999FF } /* Name.Label */ -.nn { color: #00CCFF; } /* Name.Namespace */ -.nt { color: #2f6f9f; } /* Name.Tag */ -.nv { color: #003333 } /* Name.Variable */ -.ow { color: #000000; } /* Operator.Word */ -.w { color: #bbbbbb } /* Text.Whitespace */ -.mf { color: #FF6600 } /* Literal.Number.Float */ -.mh { color: #FF6600 } /* Literal.Number.Hex */ -.mi { color: #FF6600 } /* Literal.Number.Integer */ -.mo { color: #FF6600 } /* Literal.Number.Oct */ -.sb { color: #CC3300 } /* Literal.String.Backtick */ -.sc { color: #CC3300 } /* Literal.String.Char */ -.sd { color: #CC3300; font-style: italic } /* Literal.String.Doc */ -.s2 { color: #CC3300 } /* Literal.String.Double */ -.se { color: #CC3300; } /* Literal.String.Escape */ -.sh { color: #CC3300 } /* Literal.String.Heredoc */ -.si { color: #AA0000 } /* Literal.String.Interpol */ -.sx { color: #CC3300 } /* Literal.String.Other */ -.sr { color: #33AAAA } /* Literal.String.Regex */ -.s1 { color: #CC3300 } /* Literal.String.Single */ -.ss { color: #FFCC33 } /* Literal.String.Symbol */ -.bp { color: #336666 } /* Name.Builtin.Pseudo */ -.vc { color: #003333 } /* Name.Variable.Class */ -.vg { color: #003333 } /* Name.Variable.Global */ -.vi { color: #003333 } /* Name.Variable.Instance */ -.il { color: #FF6600 } /* Literal.Number.Integer.Long */ +.highlight .hll { background-color: #ffc; } +.highlight .c { color: #999; } /* Comment */ +.highlight .err { color: #a00; background-color: #faa } /* Error */ +.highlight .k { color: #069; } /* Keyword */ +.highlight .o { color: #555 } /* Operator */ +.highlight .cm { color: #09f; font-style: italic } /* Comment.Multiline */ +.highlight .cp { color: #099 } /* Comment.Preproc */ +.highlight .c1 { color: #999; } /* Comment.Single */ +.highlight .cs { color: #999; } /* Comment.Special */ +.highlight .gd { background-color: #fcc; border: 1px solid #c00 } /* Generic.Deleted */ +.highlight .ge { font-style: italic } /* Generic.Emph */ +.highlight .gr { color: #f00 } /* Generic.Error */ +.highlight .gh { color: #030; } /* Generic.Heading */ +.highlight .gi { background-color: #cfc; border: 1px solid #0c0 } /* Generic.Inserted */ +.highlight .go { color: #aaa } /* Generic.Output */ +.highlight .gp { color: #009; } /* Generic.Prompt */ +.highlight .gs { } /* Generic.Strong */ +.highlight .gu { color: #030; } /* Generic.Subheading */ +.highlight .gt { color: #9c6 } /* Generic.Traceback */ +.highlight .kc { color: #069; } /* Keyword.Constant */ +.highlight .kd { color: #069; } /* Keyword.Declaration */ +.highlight .kn { color: #069; } /* Keyword.Namespace */ +.highlight .kp { color: #069 } /* Keyword.Pseudo */ +.highlight .kr { color: #069; } /* Keyword.Reserved */ +.highlight .kt { color: #078; } /* Keyword.Type */ +.highlight .m { color: #f60 } /* Literal.Number */ +.highlight .s { color: #d44950 } /* Literal.String */ +.highlight .na { color: #4f9fcf } /* Name.Attribute */ +.highlight .nb { color: #366 } /* Name.Builtin */ +.highlight .nc { color: #0a8; } /* Name.Class */ +.highlight .no { color: #360 } /* Name.Constant */ +.highlight .nd { color: #99f } /* Name.Decorator */ +.highlight .ni { color: #999; } /* Name.Entity */ +.highlight .ne { color: #c00; } /* Name.Exception */ +.highlight .nf { color: #c0f } /* Name.Function */ +.highlight .nl { color: #99f } /* Name.Label */ +.highlight .nn { color: #0cf; } /* Name.Namespace */ +.highlight .nt { color: #2f6f9f; } /* Name.Tag */ +.highlight .nv { color: #033 } /* Name.Variable */ +.highlight .ow { color: #000; } /* Operator.Word */ +.highlight .w { color: #bbb } /* Text.Whitespace */ +.highlight .mf { color: #f60 } /* Literal.Number.Float */ +.highlight .mh { color: #f60 } /* Literal.Number.Hex */ +.highlight .mi { color: #f60 } /* Literal.Number.Integer */ +.highlight .mo { color: #f60 } /* Literal.Number.Oct */ +.highlight .sb { color: #c30 } /* Literal.String.Backtick */ +.highlight .sc { color: #c30 } /* Literal.String.Char */ +.highlight .sd { color: #c30; font-style: italic } /* Literal.String.Doc */ +.highlight .s2 { color: #c30 } /* Literal.String.Double */ +.highlight .se { color: #c30; } /* Literal.String.Escape */ +.highlight .sh { color: #c30 } /* Literal.String.Heredoc */ +.highlight .si { color: #a00 } /* Literal.String.Interpol */ +.highlight .sx { color: #c30 } /* Literal.String.Other */ +.highlight .sr { color: #3aa } /* Literal.String.Regex */ +.highlight .s1 { color: #c30 } /* Literal.String.Single */ +.highlight .ss { color: #fc3 } /* Literal.String.Symbol */ +.highlight .bp { color: #366 } /* Name.Builtin.Pseudo */ +.highlight .vc { color: #033 } /* Name.Variable.Class */ +.highlight .vg { color: #033 } /* Name.Variable.Global */ +.highlight .vi { color: #033 } /* Name.Variable.Instance */ +.highlight .il { color: #f60 } /* Literal.Number.Integer.Long */ .css .o, .css .o + .nt,