From 8d11c7327d9c0d5d0c78bdfefab84bfcad6daedb Mon Sep 17 00:00:00 2001 From: Sophia Date: Sat, 26 Nov 2022 00:00:51 -0800 Subject: [PATCH] fixed p{} spacing that looked funky on mobile --- themes/hugo-coder/assets/scss/coder.scss | 1344 ++++++---------------- 1 file changed, 341 insertions(+), 1003 deletions(-) diff --git a/themes/hugo-coder/assets/scss/coder.scss b/themes/hugo-coder/assets/scss/coder.scss index 2ebe5b9..6c79455 100644 --- a/themes/hugo-coder/assets/scss/coder.scss +++ b/themes/hugo-coder/assets/scss/coder.scss @@ -1,22 +1,13 @@ -@charset "UTF-8";/*!normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css*/html { - line-height: 1.15; - -webkit-text-size-adjust: 100%; +body.colorscheme-dark { + color: #fff; + background-color: #383C4A; } - -body { - margin: 0; +nav.navigation{ + background-color: #2E323E; } ::-webkit-scrollbar { display: none; } -main { - display: block; -} - -h1 { - font-size: 2em; - margin: .67em 0; -} /* Make sure embeds and iframes fit their containers */ embed, @@ -24,458 +15,388 @@ iframe, object { max-width: 100%; } -hr { - box-sizing: content-box; - height: 0; - overflow: visible; +p{ + word-break: break-all; + text-align: justify; } - -pre { - font-family: monospace,monospace; - font-size: 1em; +body.colorscheme-dark a { + color: #fff; + text-decoration: underline; } - -a { - background-color: transparent; - word-wrap: break-word; +body.colorscheme-dark a:hover, a:focus, a:active{ + color: #7289DA; } - -abbr[title] { - border-bottom: none; - text-decoration: underline; - text-decoration: underline dotted; -} - -b,strong { - font-weight: bolder; -} - -code,kbd,samp { - font-family: monospace,monospace; - font-size: 1em; -} - -small { - font-size: 80%; -} - -sub,sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -.25em; -} - -sup { - top: -.5em; -} - -img { - border-style: none; -} - -button,input,optgroup,select,textarea { - font-family: inherit; - font-size: 100%; - line-height: 1.15; - margin: 0; -} - -button,input { - overflow: visible; -} - -button,select { - text-transform: none; -} - -button,[type=button],[type=reset],[type=submit] { - -webkit-appearance: button; -} - -button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner { - border-style: none; - padding: 0; -} - -button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring { - outline: 1px dotted ButtonText; -} - -fieldset { - padding: .35em .75em .625em; -} - -legend { - box-sizing: border-box; - color: inherit; - display: table; - max-width: 100%; - padding: 0; - white-space: normal; -} - -progress { - vertical-align: baseline; -} - -textarea { - overflow: auto; -} - -[type=checkbox],[type=radio] { - box-sizing: border-box; - padding: 0; -} - -[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button { - height: auto; -} - -[type=search] { - -webkit-appearance: textfield; - outline-offset: -2px; -} - -[type=search]::-webkit-search-decoration { - -webkit-appearance: none; -} - -::-webkit-file-upload-button { - -webkit-appearance: button; - font: inherit; -} - -details { - display: block; -} - -summary { - display: list-item; -} - -template { - display: none; -} - -[hidden] { - display: none; -} - -*,*:after,*:before { - box-sizing: inherit; -} - -html { - box-sizing: border-box; - font-size: 62.5%; -} - -body { - color: #212121; - background-color: #fafafa; - font-family: -apple-system,BlinkMacSystemFont,segoe ui,Roboto,Oxygen-Sans,Ubuntu,Cantarell,helvetica neue,Helvetica,pingfang sc,STXihei,华文细黑,microsoft yahei,微软雅黑,SimSun,宋体,Heiti,黑体,sans-serif; - font-size: 1.8em; - font-weight: 400; - line-height: 1.8em; -} - -@media only screen and (max-width:768px) { - body { - font-size: 1.6em; - line-height: 1.6em; - } -} - -a { - font-weight: 500; - color: #4e5d94; - text-decoration: none; - transition: all .25s ease-in; +body.colorscheme-dark h1,body.colorscheme-dark h2,body.colorscheme-dark h3,body.colorscheme-dark h4,body.colorscheme-dark h5,body.colorscheme-dark h6 { + color: #fff; } li.navigation-item a{ - text-decoration: none; - } - section.title-container a{ - text-decoration: none; - } -a:focus,a:hover { - text-decoration: underline; + color: #fff; + text-decoration: none; } - -p { - margin: 2rem 0; +section.title-container a{ + color: #fff; + text-decoration: none; } - -h1,h2,h3,h4,h5,h6 { - font-family: -apple-system,BlinkMacSystemFont,segoe ui,Roboto,Oxygen-Sans,Ubuntu,Cantarell,helvetica neue,Helvetica,pingfang sc,STXihei,华文细黑,microsoft yahei,微软雅黑,SimSun,宋体,Heiti,黑体,sans-serif; - font-weight: 600; - color: #000; - margin: 4rem 0 2.5rem; -} - -h1:hover .heading-link,h2:hover .heading-link,h3:hover .heading-link,h4:hover .heading-link,h5:hover .heading-link,h6:hover .heading-link { +.title-container { + margin: 1rem auto; + max-width: 90rem; + width: 100%; + padding-left: 2rem; + padding-right: 2rem; } +body.colorscheme-dark h1:hover .heading-link,body.colorscheme-dark h2:hover .heading-link,body.colorscheme-dark h3:hover .heading-link,body.colorscheme-dark h4:hover .heading-link,body.colorscheme-dark h5:hover .heading-link,body.colorscheme-dark h6:hover .heading-link { visibility: visible; } -h1 .heading-link,h2 .heading-link,h3 .heading-link,h4 .heading-link,h5 .heading-link,h6 .heading-link { - color: #4e5d94; +body.colorscheme-dark h1 .heading-link,body.colorscheme-dark h2 .heading-link,body.colorscheme-dark h3 .heading-link,body.colorscheme-dark h4 .heading-link,body.colorscheme-dark h5 .heading-link,body.colorscheme-dark h6 .heading-link { + color: #7289da; font-weight: inherit; text-decoration: none; font-size: 80%; visibility: hidden; } - -h1 .title-link,h2 .title-link,h3 .title-link,h4 .title-link,h5 .title-link,h6 .title-link { +body.colorscheme-dark h1 .title-link,body.colorscheme-dark h2 .title-link,body.colorscheme-dark h3 .title-link,body.colorscheme-dark h4 .title-link,body.colorscheme-dark h5 .title-link,body.colorscheme-dark h6 .title-link { color: inherit; font-weight: inherit; text-decoration: none; } -h1 { - font-size: 3.2rem; - line-height: 3.6rem; +body.colorscheme-dark code { + background-color: #424242; + color: #fff; } -@media only screen and (max-width:768px) { - h1 { - font-size: 3rem; - line-height: 3.4rem; - } +body.colorscheme-dark .highlight pre { + background-color: #424242; + color: #fff; } -h2 { - font-size: 2.8rem; - line-height: 3.2rem; -} - -@media only screen and (max-width:768px) { - h2 { - font-size: 2.6rem; - line-height: 3rem; - } -} - -h3 { - font-size: 2.4rem; - line-height: 2.8rem; -} - -@media only screen and (max-width:768px) { - h3 { - font-size: 2.2rem; - line-height: 2.6rem; - } -} - -h4 { - font-size: 2.2rem; - line-height: 2.6rem; -} - -@media only screen and (max-width:768px) { - h4 { - font-size: 2rem; - line-height: 2.4rem; - } -} - -h5 { - font-size: 2rem; - line-height: 2.4rem; -} - -@media only screen and (max-width:768px) { - h5 { - font-size: 1.8rem; - line-height: 2.2rem; - } -} - -h6 { - font-size: 1.8rem; - line-height: 2.2rem; -} - -@media only screen and (max-width:768px) { - h6 { - font-size: 1.6rem; - line-height: 2rem; - } -} - -b,strong { - font-weight: 700; -} - -.highlight>div,.highlight>pre { - margin: 2rem 0; - padding: 1rem; - border-radius: 1rem; -} - -pre { - display: block; - font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace; - font-size: 1.6rem; - font-weight: 400; - line-height: 2.6rem; - overflow-x: auto; - margin: 0; -} - -pre code { - display: inline-block; +body.colorscheme-dark :not(.highlight)>pre code { background-color: inherit; color: inherit; } -code { - font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace; - font-size: 1.6rem; - font-weight: 400; - background-color: #e0e0e0; - color: #212121; - border-radius: .6rem; - padding: .3rem .6rem; +body.colorscheme-dark blockquote { + border-left: 2px solid #424242; } -blockquote { - border-left: 2px solid #e0e0e0; - padding-left: 2rem; - line-height: 2.2rem; - font-weight: 400; - font-style: italic; -} - -th,td { +body.colorscheme-dark th,body.colorscheme-dark td { padding: 1.6rem; } -table { +body.colorscheme-dark table { border-collapse: collapse; } -table td,table th { - border: 2px solid #000; +body.colorscheme-dark table td,body.colorscheme-dark table th { + border: 2px solid #fff; } -table tr:first-child th { +body.colorscheme-dark table tr:first-child th { border-top: 0; } -table tr:last-child td { +body.colorscheme-dark table tr:last-child td { border-bottom: 0; } -table tr td:first-child,table tr th:first-child { +body.colorscheme-dark table tr td:first-child,body.colorscheme-dark table tr th:first-child { border-left: 0; } -table tr td:last-child,table tr th:last-child { +body.colorscheme-dark table tr td:last-child,body.colorscheme-dark table tr th:last-child { border-right: 0; } -img { - max-width: 100%; -} +@media(prefers-color-scheme:dark) { + body.colorscheme-auto { + color: #fff; + background-color: #212121; + } -figure { - text-align: center; -} + body.colorscheme-auto a { + color: #7289da; + } -.preload-transitions * { - -webkit-transition: none!important; - -moz-transition: none!important; - -ms-transition: none!important; - -o-transition: none!important; - transition: none!important; -} + body.colorscheme-auto h1,body.colorscheme-auto h2,body.colorscheme-auto h3,body.colorscheme-auto h4,body.colorscheme-auto h5,body.colorscheme-auto h6 { + color: #fff; + } -.wrapper { - display: flex; - flex-direction: column; - min-height: 100vh; - width: 100%; -} + body.colorscheme-auto h1:hover .heading-link,body.colorscheme-auto h2:hover .heading-link,body.colorscheme-auto h3:hover .heading-link,body.colorscheme-auto h4:hover .heading-link,body.colorscheme-auto h5:hover .heading-link,body.colorscheme-auto h6:hover .heading-link { + visibility: visible; + } -.container { - margin: 1rem auto; - max-width: 90rem; - width: 100%; - padding-left: 2rem; - padding-right: 2rem; -} -.title-container { - margin: 1rem auto; - max-width: 90rem; - width: 100%; - padding-left: 2rem; - padding-right: 2rem; -} + body.colorscheme-auto h1 .heading-link,body.colorscheme-auto h2 .heading-link,body.colorscheme-auto h3 .heading-link,body.colorscheme-auto h4 .heading-link,body.colorscheme-auto h5 .heading-link,body.colorscheme-auto h6 .heading-link { + color: #7289da; + font-weight: inherit; + text-decoration: none; + font-size: 80%; + visibility: hidden; + } -.fab { - font-weight: 400; -} + body.colorscheme-auto h1 .title-link,body.colorscheme-auto h2 .title-link,body.colorscheme-auto h3 .title-link,body.colorscheme-auto h4 .title-link,body.colorscheme-auto h5 .title-link,body.colorscheme-auto h6 .title-link { + color: inherit; + font-weight: inherit; + text-decoration: none; + } -.fas { - font-weight: 700; -} + body.colorscheme-auto code { + background-color: #424242; + color: #fff; + } -.float-right { - float: right; -} + body.colorscheme-auto .highlight pre { + background-color: #424242; + color: #fff; + } -.float-left { - float: left; -} + body.colorscheme-auto :not(.highlight)>pre code { + background-color: inherit; + color: inherit; + } -.fab { - font-weight: 400; -} + body.colorscheme-auto blockquote { + border-left: 2px solid #424242; + } -.fas { - font-weight: 900; -} + body.colorscheme-auto th,body.colorscheme-auto td { + padding: 1.6rem; + } -.content { - flex: 1; - display: flex; - margin-top: 1.6rem; - margin-bottom: 3.2rem; -} + body.colorscheme-auto table { + border-collapse: collapse; + } -.content article details summary { - cursor: pointer; -} + body.colorscheme-auto table td,body.colorscheme-auto table th { + border: 2px solid #fff; + } -.content article header { - margin-top: 6.4rem; - margin-bottom: 3.2rem; -} + body.colorscheme-auto table tr:first-child th { + border-top: 0; + } -.content article header h1 { - font-size: 4.2rem; - line-height: 4.6rem; - margin: 0; -} + body.colorscheme-auto table tr:last-child td { + border-bottom: 0; + } -@media only screen and (max-width:768px) { - .content article header h1 { - font-size: 4rem; - line-height: 4.4rem; + body.colorscheme-auto table tr td:first-child,body.colorscheme-auto table tr th:first-child { + border-left: 0; + } + + body.colorscheme-auto table tr td:last-child,body.colorscheme-auto table tr th:last-child { + border-right: 0; } } -.content article footer { - margin-top: 4rem; +body.colorscheme-dark .content .post .tags .tag { + background-color: #424242; } + +body.colorscheme-dark .content .post .tags .tag a { + color: #fff; +} + +body.colorscheme-dark .content .post .tags .tag a:active { + color: #fff; +} + +body.colorscheme-dark .content .list ul li .title { + color: #fff; +} + +body.colorscheme-dark .content .list ul li .title:hover,body.colorscheme-dark .content .list ul li .title:focus { + color: #7289da; +} + +body.colorscheme-dark .content .centered .about ul li a { + color: #fff; +} + +body.colorscheme-dark .content .centered .about ul li a:hover,body.colorscheme-dark .content .centered .about ul li a:focus { + color: #7289da; +} + +@media(prefers-color-scheme:dark) { + body.colorscheme-auto .content .post .tags .tag { + background-color: #424242; + } + + body.colorscheme-auto .content .post .tags .tag a { + color: #fff; + } + + body.colorscheme-auto .content .post .tags .tag a:active { + color: #fff; + } + + body.colorscheme-auto .content .list ul li .title { + color: #fff; + } + + body.colorscheme-auto .content .list ul li .title:hover,body.colorscheme-auto .content .list ul li .title:focus { + color: #4e5d94; + } + + body.colorscheme-auto .content .centered .about ul li a { + color: #fff; + } + + body.colorscheme-auto .content .centered .about ul li a:hover,body.colorscheme-auto .content .centered .about ul li a:focus { + color: #4e5d94; + } +} + +body.colorscheme-dark .notice .notice-title { + border-bottom: 1px solid #212121; +} + +@media(prefers-color-scheme:dark) { + body.colorscheme-auto .notice .notice-title { + border-bottom: 1px solid #212121; + } +} + +body.colorscheme-dark .navigation a,body.colorscheme-dark .navigation span { + color: #fff; +} + +body.colorscheme-dark .navigation a:hover,body.colorscheme-dark .navigation a:focus { + color: #7289da; +} + +@media only screen and (max-width:768px) { + body.colorscheme-dark .navigation .navigation-list { + background-color: #2E323E; + border-top: solid 2px #4E5D94; + border-bottom: solid 2px #4E5D94; + } +} + +@media only screen and (max-width:768px) { + body.colorscheme-dark .navigation .navigation-list .menu-separator { + border-top: 2px solid #fff; + } +} + +@media only screen and (max-width:768px) { + body.colorscheme-dark .navigation #menu-toggle:checked+label>i { + color: #424242; + } +} + +body.colorscheme-dark .navigation i { + color: #fff; +} + +body.colorscheme-dark .navigation i:hover,body.colorscheme-dark .navigation i:focus { + color: #7289da; +} + +body.colorscheme-dark .navigation .menu-button i:hover,body.colorscheme-dark .navigation .menu-button i:focus { + color: #fff; +} + +@media(prefers-color-scheme:dark) { + body.colorscheme-auto .navigation a,body.colorscheme-auto .navigation span { + color: #fff; + } + + body.colorscheme-auto .navigation a:hover,body.colorscheme-auto .navigation a:focus { + color: #7289da; + } +} + +@media only screen and (prefers-color-scheme:dark) and (max-width:768px) { + body.colorscheme-auto .navigation .navigation-list { + background-color: #212121; + border-top: solid 2px #424242; + border-bottom: solid 2px #424242; + } +} + +@media only screen and (prefers-color-scheme:dark) and (max-width:768px) { + body.colorscheme-auto .navigation .navigation-list .menu-separator { + border-top: 2px solid #fff; + } +} + +@media only screen and (prefers-color-scheme:dark) and (max-width:768px) { + body.colorscheme-auto .navigation #menu-toggle:checked+label>i { + color: #424242; + } +} + +@media(prefers-color-scheme:dark) { + body.colorscheme-auto .navigation i { + color: #fff; + } + + body.colorscheme-auto .navigation i:hover,body.colorscheme-auto .navigation i:focus { + color: #7289da; + } + + body.colorscheme-auto .navigation .menu-button i:hover,body.colorscheme-auto .navigation .menu-button i:focus { + color: #fff; + } +} + +body.colorscheme-dark .tabs label.tab-label { + background-color: #424242; + border-color: #4f4f4f; +} + +body.colorscheme-dark .tabs input.tab-input:checked+label.tab-label { + background-color: #212121; +} + +body.colorscheme-dark .tabs .tab-content { + background-color: #212121; + border-color: #4f4f4f; +} + +@media(prefers-color-scheme:dark) { + body.colorscheme-auto .tabs label.tab-label { + background-color: #424242; + border-color: #4f4f4f; + } + + body.colorscheme-auto .tabs input.tab-input:checked+label.tab-label { + background-color: #212121; + } + + body.colorscheme-auto .tabs .tab-content { + background-color: #212121; + border-color: #4f4f4f; + } +} + +body.colorscheme-dark .taxonomy-element { + background-color: #424242; +} + +body.colorscheme-dark .taxonomy-element a { + color: #fff; +} + +body.colorscheme-dark .taxonomy-element a:active { + color: #fff; +} + +@media(prefers-color-scheme:dark) { + body.colorscheme-auto .taxonomy-element { + background-color: #424242; + } + + body.colorscheme-auto .taxonomy-element a { + color: #fff; + } + + body.colorscheme-auto .taxonomy-element a:active { + color: #fff; + } +} + body.colorscheme-dark .footer a { - color: #000; + color: #fff; text-decoration: none; } body.colorscheme-dark .footer a:hover, a:focus, a:active { @@ -487,629 +408,46 @@ body.colorscheme-dark .footer a:hover, a:focus, a:active { color: #7289da; } } -.content article footer .see-also { - margin: 3.2rem 0; + +body.colorscheme-adark .float-container a { + color: #fff; + background-color: #424242; } -.content article footer .see-also h3 { - margin: 3.2rem 0; -} - -.content article p { - text-align: justify; - text-justify: auto; - hyphens: auto; -} - -.content .post .post-title { - margin-bottom: .75em; -} - -.content .post .post-meta i { - text-align: center; - width: 1.6rem; - margin-left: 0; - margin-right: .5rem; -} - -.content .post .post-meta .date .posted-on { - margin-left: 0; - margin-right: 1.5rem; -} - -.content .post .post-meta .tags .tag { - display: inline-block; - padding: .3rem .6rem; - background-color: #e0e0e0; - border-radius: .6rem; - line-height: 1.4em; -} - -.content .post .post-meta .tags .tag a { - color: #212121; -} - -.content .post .post-meta .tags .tag a:active { - color: #212121; -} - -.content figure { - margin: 0; - padding: 0; -} - -.content figcaption p { - text-align: center; - font-style: italic; - font-size: 1.6rem; - margin: 0; -} - -.avatar img { - width: 20rem; - height: auto; - border-radius: 50%; +body.colorscheme-dark .float-container a:hover,body.colorscheme-dark .float-container a:focus { + color: #7289da; } @media only screen and (max-width:768px) { - .avatar img { - width: 10rem; + body.colorscheme-dark .float-container a:hover,body.colorscheme-dark .float-container a:focus { + color: #fff; } } -.list ul { - margin: 3.2rem 0; - list-style: none; - padding: 0; -} +@media(prefers-color-scheme:dark) { + body.colorscheme-auto .float-container a { + color: #fff; + background-color: #424242; + } -.list ul li { - font-size: 1.8rem; -} - -@media only screen and (max-width:768px) { - .list ul li { - margin: 1.6rem 0; + body.colorscheme-auto .float-container a:hover,body.colorscheme-auto .float-container a:focus { + color: #7289da; } } -.list ul li .date { - display: inline-block; - flex: 1; - width: 20rem; - text-align: right; - margin-right: 3rem; +@media only screen and (prefers-color-scheme:dark) and (max-width:768px) { + body.colorscheme-auto .float-container a:hover,body.colorscheme-auto .float-container a:focus { + color: #4e5d94; + } } - -@media only screen and (max-width:768px) { - .list ul li .date { - display: block; + .align-left { text-align: left; } -} -.list ul li .title { - font-size: 1.8rem; - flex: 2; - color: #212121; - font-family: -apple-system,BlinkMacSystemFont,segoe ui,Roboto,Oxygen-Sans,Ubuntu,Cantarell,helvetica neue,Helvetica,pingfang sc,STXihei,华文细黑,microsoft yahei,微软雅黑,SimSun,宋体,Heiti,黑体,sans-serif; - font-weight: 700; -} - -.list ul li .title:hover,.list ul li .title:focus { - color: #7289DA; -} - -@media only screen and (min-width:768.1px) { - .list ul:not(.pagination) li { - display: flex; - } -} - -.centered { - display: flex; - align-items: center; - justify-content: center; -} - -.centered .about { - text-align: center; -} - -.centered .about h1 { - margin-top: 2rem; - margin-bottom: .5rem; -} - -.centered .about h2 { - margin-top: 1rem; - margin-bottom: .5rem; - font-size: 2.4rem; -} - -@media only screen and (max-width:768px) { - .centered .about h2 { - font-size: 2rem; - } -} - -.centered .about ul { - list-style: none; - margin: 3rem 0 1rem; - padding: 0; -} - -.centered .about ul li { - display: inline-block; - position: relative; -} - -.centered .about ul li a { - color: #212121; - text-transform: uppercase; - margin-left: 1rem; - margin-right: 1rem; - font-size: 1.6rem; -} - -.centered .about ul li a:hover,.centered .about ul li a:focus { - color: #7289DA; -} - -@media only screen and (max-width:768px) { - .centered .about ul li a { - font-size: 1.4rem; - } -} - -.centered .error { - text-align: center; -} - -.centered .error h1 { - margin-top: 2rem; - margin-bottom: .5rem; - font-size: 4.6rem; -} - -@media only screen and (max-width:768px) { - .centered .error h1 { - font-size: 3.2rem; - } -} - -.centered .error h2 { - margin-top: 2rem; - margin-bottom: 3.2rem; - font-size: 3.2rem; -} - -@media only screen and (max-width:768px) { - .centered .error h2 { - font-size: 2.8rem; - } -} - -.notice { - border-radius: .2rem; - position: relative; - margin: 2rem 0; - padding: 0 .75rem; - overflow: auto; -} - -.notice .notice-title { - position: relative; - font-weight: 700; - margin: 0 -.75rem; - padding: .2rem 3.5rem; - border-bottom: 1px solid #fafafa; -} - -.notice .notice-title i { - position: absolute; - top: 50%; - left: 1.8rem; - transform: translate(-50%,-50%); -} - -.notice .notice-content { - display: block; - margin: 2rem; -} - -.notice.note { - background-color: #7e57c21a; -} - -.notice.note .notice-title { - background-color: #673ab71a; -} - -.notice.note .notice-title i { - color: #5e35b1; -} - -.notice.tip { - background-color: #26a69a1a; -} - -.notice.tip .notice-title { - background-color: #0096881a; -} - -.notice.tip .notice-title i { - color: #00897b; -} - -.notice.example { - background-color: #8d6e631a; -} - -.notice.example .notice-title { - background-color: #7955481a; -} - -.notice.example .notice-title i { - color: #6d4c41; -} - -.notice.question { - background-color: #9ccc651a; -} - -.notice.question .notice-title { - background-color: #8bc34a1a; -} - -.notice.question .notice-title i { - color: #7cb342; -} - -.notice.info { - background-color: #42a5f51a; -} - -.notice.info .notice-title { - background-color: #2196f31a; -} - -.notice.info .notice-title i { - color: #1e88e5; -} - -.notice.warning { - background-color: #ffca281a; -} - -.notice.warning .notice-title { - background-color: #ffc1071a; -} - -.notice.warning .notice-title i { - color: #ffb300; -} - -.notice.error { - background-color: #ef53501a; -} - -.notice.error .notice-title { - background-color: #f443361a; -} - -.notice.error .notice-title i { - color: #e53935; -} - -.navigation { - height: 6rem; - width: 100%; -} - -.navigation a,.navigation span { - display: inline; - font-size: 1.7rem; - font-family: -apple-system,BlinkMacSystemFont,segoe ui,Roboto,Oxygen-Sans,Ubuntu,Cantarell,helvetica neue,Helvetica,pingfang sc,STXihei,华文细黑,microsoft yahei,微软雅黑,SimSun,宋体,Heiti,黑体,sans-serif; - font-weight: 600; - color: #212121; -} - -.navigation a:hover,.navigation a:focus { - color: #7289DA; -} - -.navigation .navigation-title { - letter-spacing: .1rem; - text-transform: uppercase; -} - -.navigation .navigation-list { - float: right; - list-style: none; - margin-bottom: 0; - margin-top: 0; -} - -@media only screen and (max-width:768px) { - .navigation .navigation-list { - position: relative; - top: 2rem; - right: 0; - z-index: 5; - visibility: hidden; - opacity: 0; - padding: 0; - max-height: 0; - width: 100%; - background-color: #fafafa; - border-top: solid 2px #e0e0e0; - border-bottom: solid 2px #e0e0e0; - transition: opacity .25s,max-height .15s linear; - } -} - -.navigation .navigation-list .navigation-item { - float: left; - margin: 0; - position: relative; -} - -@media only screen and (max-width:768px) { - .navigation .navigation-list .navigation-item { - float: none!important; + .align-center { text-align: center; } - .navigation .navigation-list .navigation-item a,.navigation .navigation-list .navigation-item span { - line-height: 5rem; - } -} - -.navigation .navigation-list .navigation-item a,.navigation .navigation-list .navigation-item span { - margin-left: 1rem; - margin-right: 1rem; -} - -@media only screen and (max-width:768px) { - .navigation .navigation-list .separator { - display: none; - } -} - -@media only screen and (max-width:768px) { - .navigation .navigation-list .menu-separator { - border-top: 2px solid #212121; - margin: 0 8rem; - } - - .navigation .navigation-list .menu-separator span { - display: none; - } -} - -.navigation #dark-mode-toggle { - margin: 1.7rem 0; - font-size: 2.4rem; - line-height: inherit; - bottom: 2rem; - left: 2rem; - z-index: 100; - position: fixed; -} - -.navigation #menu-toggle { - display: none; -} - -@media only screen and (max-width:768px) { - .navigation #menu-toggle:checked+label>i { - color: #e0e0e0; - } - - .navigation #menu-toggle:checked+label+ul { - visibility: visible; - opacity: 1; - max-height: 100rem; - } -} - -.navigation .menu-button { - display: none; -} - -@media only screen and (max-width:768px) { - .navigation .menu-button { - position: relative; - display: block; - font-size: 2.4rem; - font-weight: 400; - } -} - -.navigation .menu-button i:hover,.navigation .menu-button i:focus { - color: #000; -} - -.navigation i { - color: #212121; - cursor: pointer; -} - -.navigation i:hover,.navigation i:focus { - color: #7289DA; -} - -.pagination { - margin-top: 6rem; - text-align: center; - font-family: -apple-system,BlinkMacSystemFont,segoe ui,Roboto,Oxygen-Sans,Ubuntu,Cantarell,helvetica neue,Helvetica,pingfang sc,STXihei,华文细黑,microsoft yahei,微软雅黑,SimSun,宋体,Heiti,黑体,sans-serif; -} - -.pagination li { - display: inline; - text-align: center; - font-weight: 700; -} - -.pagination li span { - margin: 0; - text-align: center; - width: 3.2rem; -} - -.pagination li a { - font-weight: 300; -} - -.pagination li a span { - margin: 0; - text-align: center; - width: 3.2rem; -} - -.tabs { - display: flex; - flex-wrap: wrap; - margin: 2rem 0; - position: relative; -} - -.tabs.tabs-left { - justify-content: flex-start; -} - -.tabs.tabs-left label.tab-label { - margin-right: .5rem; -} - -.tabs.tabs-left .tab-content { - border-radius: 0 4px 4px 4px; -} - -.tabs.tabs-right { - justify-content: flex-end; -} - -.tabs.tabs-right label.tab-label { - margin-left: .5rem; -} - -.tabs.tabs-right .tab-content { - border-radius: 4px 0 4px 4px; -} - -.tabs input.tab-input { - display: none; -} - -.tabs label.tab-label { - background-color: #e0e0e0; - border-color: #ccc; - border-radius: 4px 4px 0 0; - border-style: solid; - border-bottom-style: hidden; - border-width: 1px; - cursor: pointer; - display: inline-block; - order: 1; - padding: .3rem .6rem; - position: relative; - top: 1px; - user-select: none; -} - -.tabs input.tab-input:checked+label.tab-label { - background-color: #fafafa; -} - -.tabs .tab-content { - background-color: #fafafa; - border-color: #ccc; - border-style: solid; - border-width: 1px; - display: none; - order: 2; - padding: 1rem; - width: 100%; -} - -.tabs.tabs-code .tab-content { - padding: .5rem; -} - -.tabs.tabs-code .tab-content pre { - margin: 0; -} - -.taxonomy li { - display: inline-block; - margin: .9rem; -} - -.taxonomy .taxonomy-element { - display: block; - padding: .3rem .9rem; - background-color: #e0e0e0; - border-radius: .6rem; -} - -.taxonomy .taxonomy-element a { - color: #212121; -} - -.taxonomy .taxonomy-element a:active { - color: #212121; -} - -.footer { - width: 100%; - text-align: center; - font-size: 1.6rem; - line-height: 2rem; - margin-bottom: 1rem; -} - -.footer a { - color: #7289DA; -} - -.float-container { - bottom: 2rem; - right: 2rem; - z-index: 100; - position: fixed; - font-size: 1.6em; -} - -.float-container a { - position: relative; - display: inline-block; - width: 3rem; - height: 3rem; - font-size: 2rem; - color: #000; - background-color: #e0e0e0; - border-radius: .2rem; - opacity: .5; - transition: all .25s ease-in; -} - -.float-container a:hover,.float-container a:focus { - color: #7289DA; - opacity: 1; -} - -@media only screen and (max-width:768px) { - .float-container a:hover,.float-container a:focus { - color: #000; - opacity: .5; - } -} - -.float-container a i { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%,-50%); -} \ No newline at end of file + .align-right { + text-align: right; + } \ No newline at end of file