From 4c3fc4ab3f012afc48be15193595c6b945496288 Mon Sep 17 00:00:00 2001 From: Thomas Lange Date: Sat, 12 Jun 2021 00:56:45 +0200 Subject: Use SCSS for stylesheets --- theme/admin/html/main.php | 2 +- theme/admin/rsrc/css/import/_font-awesome.scss | 138 ++++ theme/admin/rsrc/css/import/_fonts.scss | 32 + theme/admin/rsrc/css/import/_responsive.scss | 80 ++ theme/admin/rsrc/css/main.css | 904 +++++++++++++++++++++ theme/admin/rsrc/css/main.css.map | 1 + theme/admin/rsrc/css/main.scss | 726 +++++++++++++++++ theme/admin/rsrc/main.css | 979 ----------------------- theme/default/html/main.php | 2 +- theme/default/rsrc/css/import/_font-awesome.scss | 65 ++ theme/default/rsrc/css/import/_fonts.scss | 23 + theme/default/rsrc/css/import/_responsive.scss | 77 ++ theme/default/rsrc/css/main.css | 546 +++++++++++++ theme/default/rsrc/css/main.css.map | 1 + theme/default/rsrc/css/main.scss | 412 ++++++++++ theme/default/rsrc/main.css | 573 ------------- 16 files changed, 3007 insertions(+), 1554 deletions(-) create mode 100644 theme/admin/rsrc/css/import/_font-awesome.scss create mode 100644 theme/admin/rsrc/css/import/_fonts.scss create mode 100644 theme/admin/rsrc/css/import/_responsive.scss create mode 100644 theme/admin/rsrc/css/main.css create mode 100644 theme/admin/rsrc/css/main.css.map create mode 100644 theme/admin/rsrc/css/main.scss delete mode 100644 theme/admin/rsrc/main.css create mode 100644 theme/default/rsrc/css/import/_font-awesome.scss create mode 100644 theme/default/rsrc/css/import/_fonts.scss create mode 100644 theme/default/rsrc/css/import/_responsive.scss create mode 100644 theme/default/rsrc/css/main.css create mode 100644 theme/default/rsrc/css/main.css.map create mode 100644 theme/default/rsrc/css/main.scss delete mode 100644 theme/default/rsrc/main.css diff --git a/theme/admin/html/main.php b/theme/admin/html/main.php index 2020555..874ae81 100644 --- a/theme/admin/html/main.php +++ b/theme/admin/html/main.php @@ -4,7 +4,7 @@ - + <?=escapeHTML($NAME)?> | Administration diff --git a/theme/admin/rsrc/css/import/_font-awesome.scss b/theme/admin/rsrc/css/import/_font-awesome.scss new file mode 100644 index 0000000..448491f --- /dev/null +++ b/theme/admin/rsrc/css/import/_font-awesome.scss @@ -0,0 +1,138 @@ +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# FontAwesome Main +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +.fa { + font: normal normal normal 14px/1 "FontAwesome"; + font-size: inherit; + speak: none; + display: inline-block; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# FontAwesome Icons +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +.fa-bug:before { + content: "\f188"; +} + +.fa-key:before { + content: "\f084"; +} + +.fa-link:before { + content: "\f0c1"; +} + +.fa-bold:before { + content: "\f032"; +} + +.fa-code:before { + content: "\f121"; +} + +.fa-user:before { + content: "\f007"; +} + +.fa-book:before { + content: "\f02d"; +} + +.fa-italic:before { + content: "\f033"; +} + +.fa-header:before { + content: "\f1dc"; +} + +.fa-search:before { + content: "\f002"; +} + +.fa-trash-o:before { + content: "\f014"; +} + +.fa-sign-in:before { + content: "\f090"; +} + +.fa-clock-o:before { + content: "\f017"; +} + +.fa-list-ul:before { + content: "\f0ca"; +} + +.fa-list-ol:before { + content: "\f0cb"; +} + +.fa-database:before { + content: "\f1c0"; +} + +.fa-language:before { + content: "\f1ab"; +} + +.fa-sign-out:before { + content: "\f08b"; +} + +.fa-dashboard:before { + content: "\f0e4"; +} + +.fa-picture-o:before { + content: "\f03e"; +} + +.fa-envelope-o:before { + content: "\f003"; +} + +.fa-arrow-left:before { + content: "\f060"; +} + +.fa-quote-right:before { + content: "\f10e"; +} + +.fa-user-secret:before { + content: "\f21b"; +} + +.fa-file-text-o:before { + content: "\f0f6"; +} + +.fa-newspaper-o:before { + content: "\f1ea"; +} + +.fa-arrow-right:before { + content: "\f061"; +} + +.fa-external-link:before { + content: "\f08e"; +} + +.fa-github-square:before { + content: "\f092"; +} + +.fa-pencil-square-o:before { + content: "\f044"; +} + +.fa-exclamation-triangle:before { + content: "\f071"; +} diff --git a/theme/admin/rsrc/css/import/_fonts.scss b/theme/admin/rsrc/css/import/_fonts.scss new file mode 100644 index 0000000..2145065 --- /dev/null +++ b/theme/admin/rsrc/css/import/_fonts.scss @@ -0,0 +1,32 @@ +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Font "Font Awesome" [4.7.0] (by Fontello): SIL Open Font License (OFL) +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +@font-face { + font-family: "FontAwesome"; + font-weight: 400; + src: url("../font/font-awesome-fontello.woff2") format("woff2"); +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Font "Kadwa": SIL Open Font License (OFL) +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +@font-face { + font-family: "Kadwa"; + font-weight: 400; + src: url("../font/kadwa-n-400.woff2") format("woff2"); +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Font "Ruda": SIL Open Font License (OFL) +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +@font-face { + font-family: "Ruda"; + font-weight: 400; + src: url("../font/ruda-n-400.woff2") format("woff2"); +} + +@font-face { + font-family: "Ruda"; + font-weight: 700; + src: url("../font/ruda-n-700.woff2") format("woff2"); +} diff --git a/theme/admin/rsrc/css/import/_responsive.scss b/theme/admin/rsrc/css/import/_responsive.scss new file mode 100644 index 0000000..a8275bf --- /dev/null +++ b/theme/admin/rsrc/css/import/_responsive.scss @@ -0,0 +1,80 @@ +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Responsive Level #1 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +@media only screen and (max-width: 50em) { + html { + font-size: 1.125rem; /*18px*/ + background-image: none !important; + } +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Responsive Level #2 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +@media only screen and (max-width: 37.5em) { + .flex.flex-responsive { + display: block; + width: auto; + + > .flex-item { + width: 100%; + + + .flex-item { + border-top: 0.05rem solid #AAA; + } + } + } + + #main-navi { + font-size: 1rem; + + li { + span { + display: none; + } + + .fa { + margin-right: 0; + } + } + + a { + padding: 0.5rem; + } + } + + .flex-emoticons { + display: none; + } + + .actions { + float: none; + display: flex; + width: 100%; + flex-grow: 1; + justify-content: center; + overflow: hidden; + box-sizing: border-box; + + li { + flex-grow: 1; + + + li { + border-left: none; + } + } + } + + .actions-before { + float: none; + } + + .arguments { + font-size: 0.5rem; + line-height: 0.75rem; + } + + main { + padding: 0.5rem; + } +} diff --git a/theme/admin/rsrc/css/main.css b/theme/admin/rsrc/css/main.css new file mode 100644 index 0000000..6f87bf1 --- /dev/null +++ b/theme/admin/rsrc/css/main.css @@ -0,0 +1,904 @@ +@charset "UTF-8"; +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Selection +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +::-moz-selection { + background: #BBB; + color: #000; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Hyperlinks +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +a { + color: #0060A0; + text-decoration: none; +} +a:focus { + background: #CCC; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Headings +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +h1, h2, h3, h4, h5, h6 { + margin: 0; + text-transform: uppercase; +} +h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p { + margin-top: 0; +} +h1 .fa, h2 .fa, h3 .fa, h4 .fa, h5 .fa, h6 .fa { + margin-right: 0.25rem; +} + +h1 { + font-size: 0.8rem; +} + +h2 { + font-size: 0.7rem; +} + +h3 { + font-size: 0.65rem; +} + +h4 { + font-size: 0.6rem; +} + +h5 { + font-size: 0.55rem; +} + +h6 { + font-size: 0.5rem; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Document +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +html, body { + margin: 0; + padding: 0; +} + +html { + font-size: 1.25rem; + color: #333; + background: #DDD; + -webkit-hyphens: auto; + hyphens: auto; +} + +body { + font-family: "Ruda", "sans-serif"; + font-size: 0.7rem; + line-height: 1.2rem; + display: flex; + min-height: 100vh; + flex-direction: column; +} + +main { + padding: 0.75rem; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Main content +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +#main-content { + flex: 1; + width: 100%; + background: #FFF; + box-sizing: border-box; + border: 0.05rem solid #AAA; + border-top: none; + border-bottom: none; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Width +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +#main-content, .header-content { + max-width: 50rem; + margin: 0 auto; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Header +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +#main-header { + font-size: 0.6rem; +} + +#header-text, #header-desc { + text-shadow: 0 -1px #4E718F, 1px 0 #4E718F, 0 1px #4E718F, -1px 0 #4E718F; +} + +#header-text { + font-size: 0.8rem; + font-weight: 700; + text-transform: uppercase; +} + +#header-desc { + font-size: 0.6rem; + font-weight: 700; + line-height: 1rem; +} +#header-desc span { + color: #CCC; +} + +#header-logo { + display: block; + max-height: 5rem; + float: left; + margin-right: 0.5rem; +} + +.header-line { + padding: 0.5rem 0.75rem; + overflow: hidden; +} +.header-line:first-child { + background: #5E819F; + position: sticky; + top: 0; +} +.header-line:last-child { + background: #EEE; + border: 0.05rem solid #AAA; + border-left: none; + border-right: none; + padding: 0.25rem 0.75rem; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Footer +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +#main-footer { + font-size: 0.6rem; + background: #EEE; + border-top: 0.05rem solid #AAA; + padding: 0.5rem 0.75rem; + text-align: center; +} +#main-footer ul { + margin: 0; + padding: 0; + list-style: none; +} +#main-footer ul li { + display: inline; +} +#main-footer ul li .fa { + margin-right: 0.125rem; +} +#main-footer ul li:after { + content: " · "; + font-weight: bold; +} +#main-footer ul li:last-child:after { + content: none; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Main Navigation +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +#main-navi ul { + list-style: none; + margin: 0; + padding: 0; +} +#main-navi ul li { + display: inline; +} +#main-navi ul li .fa { + margin-right: 0.25rem; +} +#main-navi ul li:last-child { + float: right; +} +#main-navi ul li:first-child { + float: none; +} +#main-navi a { + padding: 0.1rem 0.3rem; + background: #DDD; + border: 0.05rem solid #AAA; + color: inherit; + text-decoration: none; + text-align: center; + display: inline-block; +} +#main-navi a:hover, #main-navi a:focus { + text-decoration: none; + background: #CCC; +} +#main-navi a:focus { + background: #CCC; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Site Navigation +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +#site-navi { + clear: both; + display: flex; + box-sizing: border-box; + justify-content: space-between; +} +#site-navi > div { + display: flex; + align-items: center; + border: 0.05rem solid #AAA; + background: #EEE; +} +#site-navi > div > a { + display: block; +} +#site-navi .disabled { + pointer-events: none; + color: #AAA; +} +#site-navi .active a { + background: #CCC !important; + font-weight: 600; + pointer-events: none; +} +#site-navi ol { + list-style: none; + margin: 0; + padding: 0; +} +#site-navi ol li { + float: left; + display: inline-block; +} +#site-navi ol li + li { + border-left: 0.05rem solid #AAA; +} +#site-navi a { + padding: 0 0.5rem; + text-decoration: none; + color: inherit; + display: inline-block; +} +#site-navi a:hover, #site-navi a:focus { + background: #CCC; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Actions +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +.actions { + margin: 0 0 0.5rem 0; + padding: 0; + list-style: none; + font-size: 0.6rem; + float: right; + text-align: center; +} +.actions .fa { + margin-right: 0.1rem; +} +.actions li { + display: inline-block; + font-weight: bold; + background: #EEE; + border: 0.05rem solid #AAA; +} +.actions a { + color: inherit; + display: block; + padding: 0 0.25rem; +} + +.actions-before { + float: left; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Elements +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +pre { + margin-bottom: 1rem; + overflow: auto; + -moz-tab-size: 4; + tab-size: 4; +} + +code, pre { + font-family: "monospace"; + color: #B03060; +} + +p { + margin-top: 0; +} + +img { + border: none; + max-width: 100%; +} + +.red { + color: #B03060; +} + +.blue { + color: #40779A; +} + +.green { + color: #008B45; +} + +.right { + float: right; +} + +.hidden { + display: none; +} + +#database-result { + color: inherit; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Tables +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +table { + width: 100%; + margin-bottom: 1rem; +} + +td { + vertical-align: middle; +} + +table, td { + padding: 0.5rem; + border: 0.05rem solid #AAA; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Brackets +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +.brackets:after, .brackets:before { + color: #222; +} +.brackets:before { + content: "["; +} +.brackets:after { + content: "]"; +} + +.brackets a, a.brackets { + text-decoration: none; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Item Element +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +.item { + display: block; + border: 0.05rem solid #AAA; + margin-bottom: 1rem; + clear: both; +} +.item header { + padding: 0.5rem 0.75rem; + border-bottom: 0.05rem solid #AAA; + position: sticky; + top: 0; +} +.item footer { + border-top: 0.05rem solid #AAA; +} +.item footer ul { + margin: 0; + padding: 0; + list-style: none; +} +.item footer ul li { + display: inline-block; + float: left; +} +.item footer ul li:last-child { + float: right; +} +.item footer a { + color: inherit; + display: inline-block; + padding: 0.25rem 2rem; +} +.item footer a:hover, .item footer a:active { + background: #DDD; +} +.item header, .item footer { + background: #EEE; + overflow: hidden; +} +.item blockquote { + margin: 0; + padding: 0.75rem; + font-family: inherit; +} +.item blockquote p { + margin-bottom: 0; +} + +.item-id { + float: right; + color: #666; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Argument list +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +.arguments { + list-style: none; + margin: 0; + padding: 0.25rem 0.75rem; + background: #EEE; + font-size: 0.6rem; + text-align: center; + border-top: 0.05rem solid #AAA; +} +.arguments li { + display: inline; +} +.arguments li > span { + color: #40779A; +} +.arguments li:after { + content: " · "; + font-weight: bold; +} +.arguments li:last-child:after { + content: none; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Form flex-box +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +form { + border: 0.05rem solid #AAA; +} + +.flex { + display: flex; + width: 100%; + justify-content: center; + overflow: hidden; + box-sizing: border-box; +} +.flex + .flex { + border-top: 0.05rem solid #AAA; +} + +.flex > .flex-item { + border-right: 0.05rem solid #AAA; + display: flex; + width: 100%; +} +.flex > .flex-item:last-child { + border-right: none; +} +.flex > .flex-item > div { + display: flex; + align-items: center; + padding: 0.5rem; + box-sizing: border-box; +} +.flex > .flex-item > div + div { + border-left: 0.05rem solid #AAA; +} + +.flex.flex-responsive > .flex-item { + width: 50%; +} + +.form-icon-flex { + background: #DDD; + width: 10%; + justify-content: center; +} + +.form-label-flex { + background: #DDD; + width: 30%; + border-left: none !important; +} + +.form-field-flex { + width: 60%; +} + +.background { + background: #DDD; +} + +.flex-padding { + padding: 0.5rem; +} + +.flex-direction-column { + flex-direction: column; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Form buttons +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +#button-list-wrapper { + border-bottom: 0.05rem solid #AAA; + background: #EEE; +} + +.button-list { + margin: 0; + padding: 0; + list-style: none; +} + +.button-list.emoticons > li { + font-size: 1.25rem; + display: inline-block; + padding: 0.2rem; + border-bottom: 0.2rem solid transparent; + border-radius: 0.1rem; + cursor: pointer; +} +.button-list.emoticons > li:hover, .button-list.emoticons > li:active { + border-bottom: 0.2rem solid #AAA; +} + +.button-list.markdown > li { + float: left; + padding: 0.5rem; + cursor: pointer; + width: 1.75rem; + box-sizing: border-box; + text-align: center; +} +.button-list.markdown > li:hover, .button-list.markdown > li:active { + color: #40779A; +} + +#content-editor { + border: none; + margin: 0; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Form elements +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +input, select, textarea { + width: 100%; + background: #EEE; + color: #404040; + font-family: inherit; + font-size: 0.7rem; + padding: 0.25rem; + border: 0.05rem solid #AAA; + box-sizing: border-box; +} + +textarea { + font-family: "Kadwa", "sans-serif"; + box-sizing: border-box; + display: inline-block; + resize: vertical; + min-height: 15rem; + line-height: 1.2rem; + padding: 0.5rem; + -webkit-hyphens: none; + hyphens: none; +} + +input[type=submit] { + text-transform: uppercase; + border-radius: 0.1rem; +} +input:disabled { + background: #DDD; + color: #888; +} +input:disabled:hover { + cursor: not-allowed; +} + +label { + text-transform: uppercase; + font-weight: normal; +} +label:after { + content: ":"; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Form buttons +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +#insert-button, #update-button, #delete-button { + color: #EEE; + border: 0.05rem solid #404040; +} + +#insert-button { + background: #4D8D5D; +} + +#update-button { + background: #6A8AA5; +} + +#delete-button { + background: #C45C66; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Form message list +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +#message-list { + margin: 0; + padding: 0.5rem; + list-style: none; + background: #C45C66; + color: #EEE; + font-size: 0.6rem; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Search form +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +#search-form { + margin-bottom: 1rem; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Responsive Level #1 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +@media only screen and (max-width: 50em) { + html { + font-size: 1.125rem; + /*18px*/ + background-image: none !important; + } +} +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Responsive Level #2 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +@media only screen and (max-width: 37.5em) { + .flex.flex-responsive { + display: block; + width: auto; + } + .flex.flex-responsive > .flex-item { + width: 100%; + } + .flex.flex-responsive > .flex-item + .flex-item { + border-top: 0.05rem solid #AAA; + } + + #main-navi { + font-size: 1rem; + } + #main-navi li span { + display: none; + } + #main-navi li .fa { + margin-right: 0; + } + #main-navi a { + padding: 0.5rem; + } + + .flex-emoticons { + display: none; + } + + .actions { + float: none; + display: flex; + width: 100%; + flex-grow: 1; + justify-content: center; + overflow: hidden; + box-sizing: border-box; + } + .actions li { + flex-grow: 1; + } + .actions li + li { + border-left: none; + } + + .actions-before { + float: none; + } + + .arguments { + font-size: 0.5rem; + line-height: 0.75rem; + } + + main { + padding: 0.5rem; + } +} +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# FontAwesome Main +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +.fa { + font: normal normal normal 14px/1 "FontAwesome"; + font-size: inherit; + speak: none; + display: inline-block; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# FontAwesome Icons +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +.fa-bug:before { + content: ""; +} + +.fa-key:before { + content: ""; +} + +.fa-link:before { + content: ""; +} + +.fa-bold:before { + content: ""; +} + +.fa-code:before { + content: ""; +} + +.fa-user:before { + content: ""; +} + +.fa-book:before { + content: ""; +} + +.fa-italic:before { + content: ""; +} + +.fa-header:before { + content: ""; +} + +.fa-search:before { + content: ""; +} + +.fa-trash-o:before { + content: ""; +} + +.fa-sign-in:before { + content: ""; +} + +.fa-clock-o:before { + content: ""; +} + +.fa-list-ul:before { + content: ""; +} + +.fa-list-ol:before { + content: ""; +} + +.fa-database:before { + content: ""; +} + +.fa-language:before { + content: ""; +} + +.fa-sign-out:before { + content: ""; +} + +.fa-dashboard:before { + content: ""; +} + +.fa-picture-o:before { + content: ""; +} + +.fa-envelope-o:before { + content: ""; +} + +.fa-arrow-left:before { + content: ""; +} + +.fa-quote-right:before { + content: ""; +} + +.fa-user-secret:before { + content: ""; +} + +.fa-file-text-o:before { + content: ""; +} + +.fa-newspaper-o:before { + content: ""; +} + +.fa-arrow-right:before { + content: ""; +} + +.fa-external-link:before { + content: ""; +} + +.fa-github-square:before { + content: ""; +} + +.fa-pencil-square-o:before { + content: ""; +} + +.fa-exclamation-triangle:before { + content: ""; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Font "Font Awesome" [4.7.0] (by Fontello): SIL Open Font License (OFL) +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +@font-face { + font-family: "FontAwesome"; + font-weight: 400; + src: url("../font/font-awesome-fontello.woff2") format("woff2"); +} +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Font "Kadwa": SIL Open Font License (OFL) +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +@font-face { + font-family: "Kadwa"; + font-weight: 400; + src: url("../font/kadwa-n-400.woff2") format("woff2"); +} +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Font "Ruda": SIL Open Font License (OFL) +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +@font-face { + font-family: "Ruda"; + font-weight: 400; + src: url("../font/ruda-n-400.woff2") format("woff2"); +} +@font-face { + font-family: "Ruda"; + font-weight: 700; + src: url("../font/ruda-n-700.woff2") format("woff2"); +} + +/*# sourceMappingURL=main.css.map */ diff --git a/theme/admin/rsrc/css/main.css.map b/theme/admin/rsrc/css/main.css.map new file mode 100644 index 0000000..ea7e511 --- /dev/null +++ b/theme/admin/rsrc/css/main.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["main.scss","import/_responsive.scss","import/_font-awesome.scss","import/_fonts.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;AAEA;EACC;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;;AAEA;EACC;;AAGD;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;AAEA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;EACC;;;AAKH;AAAA;AAAA;AAIC;EACC;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAIF;EACC;;AAGD;EACC;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;;AAKH;EACC;EACA;EACA;EACA;;AAEA;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;EACA;EACA;;AAGD;EACG;EACA;EACA;;;AAIJ;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;AAAA;AAAA;AAIC;EACC;;AAGD;EACC;;AAGD;EACC;;;AAIF;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;;AAEA;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;;AAKH;EACC;EACA;EACA;;AAEA;EACC;;AAKH;EACC;EACA;;AAGD;EACC;EACA;EACA;;AAEA;EACC;;;AAKH;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;;;AAKH;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIA;EACC;EACA;;AAGD;EACC;EACA;;AAEA;EACC;;;AAKH;EACC;EACA;;AAEA;EACC;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;;;AChtBD;AAAA;AAAA;AAGA;EACC;IACC;AAAqB;IACrB;;;AAIF;AAAA;AAAA;AAGA;EACC;IACC;IACA;;EAEA;IACC;;EAEA;IACC;;;EAKH;IACC;;EAGC;IACC;;EAGD;IACC;;EAIF;IACC;;;EAIF;IACC;;;EAGD;IACC;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACC;;EAEA;IACC;;;EAKH;IACC;;;EAGD;IACC;IACA;;;EAGD;IACC;;;AC7EF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;ACxID;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA","file":"main.css"} \ No newline at end of file diff --git a/theme/admin/rsrc/css/main.scss b/theme/admin/rsrc/css/main.scss new file mode 100644 index 0000000..e5fdf5a --- /dev/null +++ b/theme/admin/rsrc/css/main.scss @@ -0,0 +1,726 @@ +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Selection +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +::-moz-selection { + background: #BBB; + color: #000; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Hyperlinks +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +a { + color: #0060A0; + text-decoration: none; + + &:focus { + background: #CCC; + } +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Headings +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +h1, h2, h3, h4, h5, h6 { + margin: 0; + text-transform: uppercase; + + +p { + margin-top: 0; + } + + .fa { + margin-right: 0.25rem; + } +} + +h1 { + font-size: 0.80rem; +} + +h2 { + font-size: 0.70rem; +} + +h3 { + font-size: 0.65rem; +} + +h4 { + font-size: 0.60rem; +} + +h5 { + font-size: 0.55rem; +} + +h6 { + font-size: 0.50rem; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Document +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +html, body { + margin: 0; + padding: 0; +} + +html { + font-size: 1.25rem; + color: #333; + background: #DDD; + -webkit-hyphens: auto; + hyphens: auto; +} + +body { + font-family: "Ruda", "sans-serif"; + font-size: 0.7rem; + line-height: 1.2rem; + display: flex; + min-height: 100vh; + flex-direction: column; +} + +main { + padding: 0.75rem; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Main content +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +#main-content { + flex: 1; + width: 100%; + background: #FFF; + box-sizing: border-box; + border: 0.05rem solid #AAA; + border-top: none; + border-bottom: none; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Width +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +#main-content, .header-content { + max-width: 50rem; + margin: 0 auto; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Header +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +#main-header { + font-size: 0.6rem; +} + +#header-text, #header-desc { + text-shadow: 0 -1px #4E718F, 1px 0 #4E718F, 0 1px #4E718F, -1px 0 #4E718F; +} + +#header-text { + font-size: 0.8rem; + font-weight: 700; + text-transform: uppercase; +} + +#header-desc { + font-size: 0.6rem; + font-weight: 700; + line-height: 1rem; + + span { + color: #CCC; + } +} + +#header-logo { + display: block; + max-height: 5rem; + float: left; + margin-right: 0.5rem; +} + +.header-line { + padding: 0.5rem 0.75rem; + overflow: hidden; + + &:first-child { + background: #5E819F; + position: sticky; + top: 0; + } + + &:last-child { + background: #EEE; + border: 0.05rem solid #AAA; + border-left: none; + border-right: none; + padding: 0.25rem 0.75rem; + } +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Footer +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +#main-footer { + font-size: 0.6rem; + background: #EEE; + border-top: 0.05rem solid #AAA; + padding: 0.5rem 0.75rem; + text-align: center; + + ul { + margin: 0; + padding: 0; + list-style: none; + + li { + display: inline; + + .fa { + margin-right: 0.125rem; + } + } + + li:after { + content: " · "; + font-weight: bold; + } + + li:last-child:after { + content: none; + } + } +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Main Navigation +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +#main-navi { + ul { + list-style: none; + margin: 0; + padding: 0; + + li { + display: inline; + + .fa { + margin-right: 0.25rem; + } + } + + li:last-child { + float: right; + } + + li:first-child { + float: none; + } + } + + a { + padding: 0.1rem 0.3rem; + background: #DDD; + border: 0.05rem solid #AAA; + color: inherit; + text-decoration: none; + text-align: center; + display: inline-block; + + &:hover, &:focus { + text-decoration: none; + background: #CCC; + } + + &:focus { + background: #CCC; + } + } +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Site Navigation +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +#site-navi { + clear: both; + display: flex; + box-sizing: border-box; + justify-content: space-between; + + > div { + display: flex; + align-items: center; + border: 0.05rem solid #AAA; + background: #EEE; + + > a { + display: block; + } + } + + .disabled { + pointer-events: none; + color: #AAA; + } + + .active a { + background: #CCC !important; + font-weight: 600; + pointer-events: none; + } + + ol { + list-style: none; + margin: 0; + padding: 0; + + li { + float: left; + display: inline-block; + + + li { + border-left: 0.05rem solid #AAA; + } + } + } + + a { + padding: 0 0.5rem; + text-decoration: none; + color: inherit; + display: inline-block; + + &:hover, &:focus { + background: #CCC; + } + } +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Actions +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +.actions { + margin: 0 0 0.5rem 0; + padding: 0; + list-style: none; + font-size: 0.6rem; + float: right; + text-align: center; + + .fa { + margin-right: 0.1rem; + } + + li { + display: inline-block; + font-weight: bold; + background: #EEE; + border: 0.05rem solid #AAA; + } + + a { + color: inherit; + display: block; + padding: 0 0.25rem; + } +} + +.actions-before { + float: left; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Elements +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +pre { + margin-bottom: 1rem; + overflow: auto; + -moz-tab-size: 4; + tab-size: 4; +} + +code, pre { + font-family: "monospace"; + color: #B03060; +} + +p { + margin-top: 0; +} + +img { + border: none; + max-width: 100%; +} + +.red { + color: #B03060; +} + +.blue { + color: #40779A; +} + +.green { + color: #008B45; +} + +.right { + float: right; +} + +.hidden { + display: none; +} + +#database-result { + color: inherit; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Tables +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +table { + width: 100%; + margin-bottom: 1rem; +} + +td { + vertical-align: middle; +} + +table, td { + padding: 0.5rem; + border: 0.05rem solid #AAA; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Brackets +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +.brackets { + &:after, &:before { + color: #222; + } + + &:before { + content: "["; + } + + &:after { + content: "]"; + } +} + +.brackets a, a.brackets { + text-decoration: none; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Item Element +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +.item { + display: block; + border: 0.05rem solid #AAA; + margin-bottom: 1rem; + clear: both; + + header { + padding: 0.5rem 0.75rem; + border-bottom: 0.05rem solid #AAA; + position: sticky; + top: 0; + } + + footer { + border-top: 0.05rem solid #AAA; + + ul { + margin: 0; + padding: 0; + list-style: none; + + li { + display: inline-block; + float: left; + + &:last-child { + float: right; + } + } + } + + a { + color: inherit; + display: inline-block; + padding: 0.25rem 2rem; + + &:hover, &:active { + background: #DDD; + } + } + } + + header, footer { + background: #EEE; + overflow: hidden; + } + + blockquote { + margin: 0; + padding: 0.75rem; + font-family: inherit; + + p { + margin-bottom: 0; + } + } +} + +.item-id { + float: right; + color: #666; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Argument list +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +.arguments { + list-style: none; + margin: 0; + padding: 0.25rem 0.75rem; + background: #EEE; + font-size: 0.6rem; + text-align: center; + border-top: 0.05rem solid #AAA; + + li { + display: inline; + + > span { + color: #40779A; + } + + &:after { + content: " · "; + font-weight: bold; + } + + &:last-child:after { + content: none; + } + } +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Form flex-box +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +form { + border: 0.05rem solid #AAA; +} + +.flex { + display: flex; + width: 100%; + justify-content: center; + overflow: hidden; + box-sizing: border-box; + + + .flex { + border-top: 0.05rem solid #AAA; + } +} + +.flex > .flex-item { + border-right: 0.05rem solid #AAA; + display: flex; + width: 100%; + + &:last-child { + border-right: none; + } + + > div { + display: flex; + align-items: center; + padding: 0.5rem; + box-sizing: border-box; + + + div { + border-left: 0.05rem solid #AAA; + } + } +} + +.flex.flex-responsive > .flex-item { + width: 50%; +} + +.form-icon-flex { + background: #DDD; + width: 10%; + justify-content: center; +} + +.form-label-flex { + background: #DDD; + width: 30%; + border-left: none !important; +} + +.form-field-flex { + width: 60%; +} + +.background { + background: #DDD; +} + +.flex-padding { + padding: 0.5rem; +} + +.flex-direction-column { + flex-direction: column; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Form buttons +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +#button-list-wrapper { + border-bottom: 0.05rem solid #AAA; + background: #EEE; +} + +.button-list { + margin: 0; + padding: 0; + list-style: none; +} + +.button-list.emoticons > li { + font-size: 1.25rem; + display: inline-block; + padding: 0.2rem; + border-bottom: 0.2rem solid transparent; + border-radius: 0.1rem; + cursor: pointer; + + &:hover, &:active { + border-bottom: 0.2rem solid #AAA; + } +} + +.button-list.markdown > li { + float: left; + padding: 0.5rem; + cursor: pointer; + width: 1.75rem; + box-sizing: border-box; + text-align: center; + + &:hover, &:active { + color: #40779A; + } +} + +#content-editor { + border: none; + margin: 0; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Form elements +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +input, select, textarea { + width: 100%; + background: #EEE; + color: #404040; + font-family: inherit; + font-size: 0.7rem; + padding: 0.25rem; + border: 0.05rem solid #AAA; + box-sizing: border-box; +} + +textarea { + font-family: "Kadwa", "sans-serif"; + box-sizing: border-box; + display: inline-block; + resize: vertical; + min-height: 15rem; + line-height: 1.2rem; + padding: 0.5rem; + -webkit-hyphens: none; + hyphens: none; +} + +input { + &[type="submit"] { + text-transform: uppercase; + border-radius: 0.1rem; + } + + &:disabled { + background: #DDD; + color: #888; + + &:hover { + cursor: not-allowed; + } + } +} + +label { + text-transform: uppercase; + font-weight: normal; + + &:after { + content: ":"; + } +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Form buttons +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +#insert-button, #update-button, #delete-button { + color: #EEE; + border: 0.05rem solid #404040; +} + +#insert-button { + background: #4D8D5D; +} + +#update-button { + background: #6A8AA5; +} + +#delete-button { + background: #C45C66; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Form message list +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +#message-list { + margin: 0; + padding: 0.5rem; + list-style: none; + background: #C45C66; + color: #EEE; + font-size: 0.6rem; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Search form +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +#search-form { + margin-bottom: 1rem; +} + +@import "import/responsive"; +@import "import/font-awesome"; +@import "import/fonts"; diff --git a/theme/admin/rsrc/main.css b/theme/admin/rsrc/main.css deleted file mode 100644 index f9560e9..0000000 --- a/theme/admin/rsrc/main.css +++ /dev/null @@ -1,979 +0,0 @@ -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Selection -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -::-moz-selection { - background: #BBB; - color: #000; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Hyperlinks -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -a { - color: #0060A0; - text-decoration: none; -} - -a:focus { - background: #CCC; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Paragraphs -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p { - margin-top: 0; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Icons -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -h1 .fa, h2 .fa, h3 .fa, h4 .fa, h5 .fa, h6 .fa { - margin-right: 0.25rem; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Headings -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -h1, h2, h3, h4, h5, h6 { - margin: 0; - text-transform: uppercase; -} - -h1 { - font-size: 0.80rem; -} - -h2 { - font-size: 0.70rem; -} - -h3 { - font-size: 0.65rem; -} - -h4 { - font-size: 0.60rem; -} - -h5 { - font-size: 0.55rem; -} - -h6 { - font-size: 0.50rem; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Document -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -html, body { - margin: 0; - padding: 0; -} - -main { - padding: 0.75rem; -} - -html { - font-size: 1.25rem; - color: #333; - background: #DDD; - -webkit-hyphens: auto; - hyphens: auto; -} - -body { - font-family: Ruda, sans-serif; - font-size: 0.7rem; - line-height: 1.2rem; - display: flex; - min-height: 100vh; - flex-direction: column; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Main content -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -#main-content { - flex: 1; - width: 100%; - background: #FFF; - box-sizing: border-box; - border: 0.05rem solid #AAA; - border-top: none; - border-bottom: none; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Width -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -#main-content, .header-content { - max-width: 50rem; - margin: 0 auto; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Header -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -#main-header { - font-size: 0.6rem; -} - -#header-text, #header-desc { - text-shadow: 0 -1px #4E718F, 1px 0 #4E718F, 0 1px #4E718F, -1px 0 #4E718F; -} - -#header-text { - font-size: 0.8rem; - font-weight: 700; - text-transform: uppercase; -} - -#header-desc { - font-size: 0.6rem; - font-weight: 700; - line-height: 1rem; -} - -#header-desc span { - color: #CCC; -} - -#header-logo { - display: block; - max-height: 5rem; - float: left; - margin-right: 0.5rem; -} - -.header-line { - padding: 0.5rem 0.75rem; - overflow: hidden; -} - -.header-line:first-child { - background: #5E819F; - position: sticky; - top: 0; -} - -.header-line:last-child { - background: #EEE; - border: 0.05rem solid #AAA; - border-left: none; - border-right: none; - padding: 0.25rem 0.75rem; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Footer -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -#main-footer { - font-size: 0.6rem; - background: #EEE; - border-top: 0.05rem solid #AAA; - padding: 0.5rem 0.75rem; - text-align: center; -} - -#main-footer > ul { - margin: 0; - padding: 0; - list-style: none; -} - -#main-footer > ul > li { - display: inline; -} - -#main-footer > ul > li .fa { - margin-right: 0.125rem; -} - -#main-footer li:after { - content: " · "; - font-weight: bold; -} - -#main-footer li:last-child:after { - content: none; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Main Navigation -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -#main-navi ul { - list-style: none; - margin: 0; - padding: 0; -} - -#main-navi li { - display: inline; -} - -#main-navi li .fa { - margin-right: 0.25rem; -} - -#main-navi li:last-child { - float: right; -} - -#main-navi li:first-child { - float: none; -} - -#main-navi a { - padding: 0.1rem 0.3rem; - background: #DDD; - border: 0.05rem solid #AAA; - color: inherit; - text-decoration: none; - text-align: center; - display: inline-block; -} - -#main-navi a:hover, #main-navi a:focus { - text-decoration: none; - background: #CCC; -} - -#main-navi a:focus { - background: #CCC; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Site Navigation -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -#site-navi { - clear: both; - display: flex; - box-sizing: border-box; - justify-content: space-between; -} - -#site-navi > div { - display: flex; - align-items: center; - border: 0.05rem solid #AAA; - background: #EEE; -} - -#site-navi > div > a { - display: block; -} - -#site-navi .disabled { - pointer-events: none; - color: #AAA; -} - -#site-navi .active a { - background: #CCC !important; - font-weight: 600; - pointer-events: none; -} - -#site-navi ol { - list-style: none; - margin: 0; - padding: 0; -} - -#site-navi li { - float: left; - display: inline-block; -} - -#site-navi li + li { - border-left: 0.05rem solid #AAA; -} - -#site-navi a { - padding: 0 0.5rem; - text-decoration: none; - color: inherit; - display: inline-block; -} - -#site-navi a:hover, #site-navi a:focus { - background: #CCC; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Actions -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -.actions { - margin: 0 0 0.5rem 0; - padding: 0; - list-style: none; - font-size: 0.6rem; - float: right; - text-align: center; -} - -.actions .fa { - margin-right: 0.1rem; -} - -.actions li { - display: inline-block; - font-weight: bold; - background: #EEE; - border: 0.05rem solid #AAA; -} - -.actions a { - color: inherit; - display: block; - padding: 0 0.25rem; -} - -.actions-before { - float: left; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Elements -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -pre { - margin-bottom: 1rem; - overflow: auto; - -moz-tab-size: 4; - tab-size: 4; -} - -code, pre { - font-family: monospace; - color: #B03060; -} - -p { - margin-top: 0; -} - -img { - border: none; - max-width: 100%; -} - -.red { - color: #B03060; -} - -.blue { - color: #40779A; -} - -.green { - color: #008B45; -} - -.right { - float: right; -} - -.hidden { - display: none; -} - -#database-result { - color: inherit; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Tables -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -table { - width: 100%; - margin-bottom: 1rem; -} - -td { - vertical-align: middle; -} - -table, td { - padding: 0.5rem; - border: 0.05rem solid #AAA; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Brackets -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -.brackets a, a.brackets { - text-decoration: none; -} - -.brackets:before, .brackets:after { - color: #222; -} - -.brackets:after { - content: "]"; -} - -.brackets:before { - content: "["; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Item Element -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -.item { - display: block; - border: 0.05rem solid #AAA; - margin-bottom: 1rem; - clear: both; -} - -.item > header, -.item > footer { - background: #EEE; - overflow: hidden; -} - -.item > blockquote { - margin: 0; - padding: 0.75rem; - font-family: inherit; -} - -.item > blockquote p { - margin-bottom: 0; -} - -.item > header { - padding: 0.5rem 0.75rem; - border-bottom: 0.05rem solid #AAA; - position: sticky; - top: 0; -} - -.item > footer { - border-top: 0.05rem solid #AAA; -} - -.item > footer > ul { - margin: 0; - padding: 0; - list-style: none; -} - -.item > footer > ul > li { - display: inline-block; - float: left; -} - -.item > footer > ul > li:last-child { - float: right; -} - -.item > footer > ul > li > a { - color: inherit; - display: inline-block; - padding: 0.25rem 2rem; -} - -.item > footer > ul > li > a:hover, -.item > footer > ul > li > a:active { - background: #DDD; -} - -.item-id { - float: right; - color: #666; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Argument list -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -.arguments { - list-style: none; - margin: 0; - padding: 0.25rem 0.75rem; - background: #EEE; - font-size: 0.6rem; - text-align: center; - border-top: 0.05rem solid #AAA; -} - -.arguments > li { - display: inline; -} - -.arguments > li > span { - color: #40779A; -} - -.arguments > li:after { - content: " · "; - font-weight: bold; -} -.arguments > li:last-child:after{ - content:none; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Form flex-box -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -form { - border: 0.05rem solid #AAA; -} - -.flex { - display: flex; - width: 100%; - justify-content: center; - overflow: hidden; - box-sizing: border-box; -} - -.flex + .flex { - border-top: 0.05rem solid #AAA; -} - -.flex > .flex-item { - display: flex; - width: 100%; -} - -.flex > .flex-item { - border-right: 0.05rem solid #AAA; -} - -.flex > .flex-item:last-child { - border-right: none; -} - -.flex > .flex-item > div { - display: flex; - align-items: center; - padding: 0.5rem; - box-sizing: border-box; -} - -.flex > .flex-item > div + div { - border-left: 0.05rem solid #AAA; -} - -.flex.flex-responsive > .flex-item { - width: 50%; -} - -.form-icon-flex { - background: #DDD; - width: 10%; - justify-content: center; -} - -.form-label-flex { - background: #DDD; - width: 30%; - border-left: none !important; -} - -.form-field-flex { - width: 60%; -} - -.background { - background: #DDD; -} - -.flex-padding { - padding: 0.5rem; -} - -.flex-direction-column { - flex-direction: column; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Form buttons -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -#button-list-wrapper { - border-bottom: 0.05rem solid #AAA; - background: #EEE; -} - -.button-list { - margin: 0; - padding: 0; - list-style: none; -} - -.button-list.emoticons > li { - font-size: 1.25rem; - display: inline-block; - padding: 0.2rem; - border-bottom: 0.2rem solid transparent; - border-radius: 0.1rem; - cursor: pointer; -} - -.button-list.emoticons > li:hover, -.button-list.emoticons > li:active { - border-bottom: 0.2rem solid #AAA; -} - -.button-list.markdown > li { - float: left; - padding: 0.5rem; - cursor: pointer; - width: 1.75rem; - box-sizing: border-box; - text-align: center; -} - -.button-list.markdown > li:hover, -.button-list.markdown > li:active { - color: #40779A; -} - -#content-editor { - border: none; - margin: 0; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Form elements -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -input, select, textarea { - width: 100%; - background: #EEE; - color: #404040; - font-family: inherit; - font-size: 0.7rem; - padding: 0.25rem; - border: 0.05rem solid #AAA; - box-sizing: border-box; -} - -textarea { - font-family: Kadwa, sans-serif; - box-sizing: border-box; - display: inline-block; - resize: vertical; - min-height: 15rem; - line-height: 1.2rem; - padding: 0.5rem; - -webkit-hyphens: none; - hyphens: none; -} - -input[type="submit"] { - text-transform: uppercase; - border-radius: 0.1rem; -} - -input:disabled { - background: #DDD; - color: #888; -} - -input:disabled:hover { - cursor: not-allowed; -} - -label { - text-transform: uppercase; - font-weight: normal; -} - -label:after { - content: ":"; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Form buttons -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -#insert-button, #update-button, #delete-button { - color: #EEE; - border: 0.05rem solid #404040; -} - -#insert-button { - background: #4D8D5D; -} - -#update-button { - background: #6A8AA5; -} - -#delete-button { - background: #C45C66; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Form message list -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -#message-list { - margin: 0; - padding: 0.5rem; - list-style: none; - background: #C45C66; - color: #EEE; - font-size: 0.6rem; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Search form -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -#search-form { - margin-bottom: 1rem; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# FontAwesome Main -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -.fa { - font: normal normal normal 14px/1 FontAwesome; - font-size: inherit; - speak: none; - display: inline-block; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# FontAwesome Icons -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -.fa-bug:before { - content: "\f188"; -} - -.fa-key:before { - content: "\f084"; -} - -.fa-link:before { - content: "\f0c1"; -} - -.fa-bold:before { - content: "\f032"; -} - -.fa-code:before { - content: "\f121"; -} - -.fa-user:before { - content: "\f007"; -} - -.fa-book:before { - content: "\f02d"; -} - -.fa-italic:before { - content: "\f033"; -} - -.fa-header:before { - content: "\f1dc"; -} - -.fa-search:before { - content: "\f002"; -} - -.fa-trash-o:before { - content: "\f014"; -} - -.fa-sign-in:before { - content: "\f090"; -} - -.fa-clock-o:before { - content: "\f017"; -} - -.fa-list-ul:before { - content: "\f0ca"; -} - -.fa-list-ol:before { - content: "\f0cb"; -} - -.fa-database:before { - content: "\f1c0"; -} - -.fa-language:before { - content: "\f1ab"; -} - -.fa-sign-out:before { - content: "\f08b"; -} - -.fa-dashboard:before { - content: "\f0e4"; -} - -.fa-picture-o:before { - content: "\f03e"; -} - -.fa-envelope-o:before { - content: "\f003"; -} - -.fa-arrow-left:before { - content: "\f060"; -} - -.fa-quote-right:before { - content: "\f10e"; -} - -.fa-user-secret:before { - content: "\f21b"; -} - -.fa-file-text-o:before { - content: "\f0f6"; -} - -.fa-newspaper-o:before { - content: "\f1ea"; -} - -.fa-arrow-right:before { - content: "\f061"; -} - -.fa-external-link:before { - content: "\f08e"; -} - -.fa-github-square:before { - content: "\f092"; -} - -.fa-pencil-square-o:before { - content: "\f044"; -} - -.fa-exclamation-triangle:before { - content: "\f071"; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Responsive Level #1 -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -@media only screen and (max-width: 50em) { - html { - font-size: 1.125rem; /*18px*/ - background-image: none !important; - } -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Responsive Level #2 -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -@media only screen and (max-width: 37.5em) { - .flex.flex-responsive { - display: block; - width: auto; - } - - .flex.flex-responsive > .flex-item { - width: 100%; - } - - .flex.flex-responsive > .flex-item + .flex-item { - border-top: 0.05rem solid #AAA; - } - - #main-navi { - font-size: 1rem; - } - - #main-navi li span { - display: none; - } - - #main-navi li .fa { - margin-right: 0; - } - - #main-navi a { - padding: 0.5rem; - } - - .flex-emoticons { - display: none; - } - - .actions { - float: none; - display: flex; - width: 100%; - flex-grow: 1; - justify-content: center; - overflow: hidden; - box-sizing: border-box; - } - - .actions li { - flex-grow: 1; - } - - .actions li + li { - border-left: none; - } - - .actions-before { - float: none; - } - - .arguments { - font-size: 0.5rem; - line-height: 0.75rem; - } - - main { - padding: 0.5rem; - } -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Font "Font Awesome" [4.7.0] (by Fontello): SIL Open Font License (OFL) -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -@font-face { - font-family: FontAwesome; - font-weight: 400; - src: url("font/font-awesome-fontello.woff2") format("woff2"); -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Font "Kadwa": SIL Open Font License (OFL) -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -@font-face { - font-family: Kadwa; - font-weight: 400; - src: url("font/kadwa-n-400.woff2") format("woff2"); -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Font "Ruda": SIL Open Font License (OFL) -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -@font-face { - font-family: Ruda; - font-weight: 400; - src: url("font/ruda-n-400.woff2") format("woff2"); -} - -@font-face { - font-family: Ruda; - font-weight: 700; - src: url("font/ruda-n-700.woff2") format("woff2"); -} diff --git a/theme/default/html/main.php b/theme/default/html/main.php index 5d9284a..e84618b 100644 --- a/theme/default/html/main.php +++ b/theme/default/html/main.php @@ -41,7 +41,7 @@ $BLOGMETA_DESC = escapeHTML($BLOGMETA['DESC']); - + diff --git a/theme/default/rsrc/css/import/_font-awesome.scss b/theme/default/rsrc/css/import/_font-awesome.scss new file mode 100644 index 0000000..733022c --- /dev/null +++ b/theme/default/rsrc/css/import/_font-awesome.scss @@ -0,0 +1,65 @@ +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# FontAwesome Main +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +.fa { + display: inline-block; + font: normal normal normal 14px/1 "FontAwesome"; + font-size: inherit; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# FontAwesome Icons +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +.fa-rss:before { + content: "\f09e"; +} + +.fa-key:before { + content: "\f084"; +} + +.fa-bars:before { + content: "\f0c9"; +} + +.fa-user:before { + content: "\f007"; +} + +.fa-home:before { + content: "\f015"; +} + +.fa-search:before { + content: "\f002"; +} + +.fa-rss-square:before { + content: "\f143"; +} + +.fa-arrow-left:before { + content: "\f060"; +} + +.fa-user-secret:before { + content: "\f21b"; +} + +.fa-file-text-o:before { + content: "\f0f6"; +} + +.fa-newspaper-o:before { + content: "\f1ea"; +} + +.fa-arrow-right:before { + content: "\f061"; +} + +.fa-exclamation-triangle:before { + content: "\f071"; +} diff --git a/theme/default/rsrc/css/import/_fonts.scss b/theme/default/rsrc/css/import/_fonts.scss new file mode 100644 index 0000000..2477120 --- /dev/null +++ b/theme/default/rsrc/css/import/_fonts.scss @@ -0,0 +1,23 @@ +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Font "Font Awesome" [4.7.0]: SIL Open Font License (OFL) +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +@font-face { + font-family: "FontAwesome"; + font-weight: 400; + src: url("../font/font-awesome.woff2") format("woff2"); +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Font "Ruda": SIL Open Font License (OFL) +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +@font-face { + font-family: "Ruda"; + font-weight: 400; + src: url("../font/ruda-n-400.woff2") format("woff2"); +} + +@font-face { + font-family: "Ruda"; + font-weight: 700; + src: url("../font/ruda-n-700.woff2") format("woff2"); +} diff --git a/theme/default/rsrc/css/import/_responsive.scss b/theme/default/rsrc/css/import/_responsive.scss new file mode 100644 index 0000000..d248bf4 --- /dev/null +++ b/theme/default/rsrc/css/import/_responsive.scss @@ -0,0 +1,77 @@ +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Responsive Level #1 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +@media only screen and (max-width: 50em) { + html { + font-size: 1.125rem; /*18px*/ + background-image: none !important; + } + + body { + line-height: 1.2rem; + } + + #container { + margin: 0; + border-right: none; + border-left: none; + } +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Responsive Level #2 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +@media only screen and (max-width: 37.5em) { + main, #main-header > div { + padding: 1rem; + } + + #main-navi { + padding: 0.25rem 1rem; + } + + #main-navi a { + border: 0.05rem solid transparent; + } + + #main-navi a:hover, #main-navi a:focus { + border: 0.05rem solid #BBB; + } + + #main-navi > ul { + display: none; + float: none; + } + + #main-navi > ul > li a { + display: block; + text-align: left; + padding: 0 0.25rem; + } + + #main-navi { + overflow: hidden; + } + + #toogle-nav-label { + display: block; + } + + #toogle-nav:checked + ul { + display: block; + } + + #main-navi li:last-child { + float: none; + } + + .item > header { + text-align: center; + } + + .item > header > h2, + .item > header > .info { + float: none; + display: block; + } +} diff --git a/theme/default/rsrc/css/main.css b/theme/default/rsrc/css/main.css new file mode 100644 index 0000000..5797447 --- /dev/null +++ b/theme/default/rsrc/css/main.css @@ -0,0 +1,546 @@ +@charset "UTF-8"; +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Hyperlinks +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +a { + color: #0060A0; + text-decoration: none; +} +a:focus { + background: #CCC; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Headings +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +h1, h2, h3, h4, h5, h6 { + margin: 0; + font-weight: 600; +} +h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p { + margin-top: 0; +} + +h1 { + font-size: 0.8rem; +} + +h2 { + font-size: 0.7rem; +} + +h3 { + font-size: 0.65rem; +} + +h4 { + font-size: 0.6rem; +} + +h5 { + font-size: 0.55rem; +} + +h6 { + font-size: 0.5rem; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Document +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +html, body { + margin: 0; + padding: 0; +} + +html { + font-size: 1.25rem; + color: #333; + background: #CCC; + -webkit-hyphens: auto; + hyphens: auto; +} + +body { + font-family: "Ruda", "sans-serif"; + font-size: 0.7rem; + line-height: 1.2rem; +} + +#container { + max-width: 45rem; + margin: 1rem auto; + border: 0.05rem solid #AAA; + background: #FFF; +} + +main, #main-header > div { + padding: 1rem; + box-sizing: border-box; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Header +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +#main-header > div { + overflow: hidden; +} + +#main-logo { + height: 1.75rem; + display: block; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Footer +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +#main-footer { + background: #EEE; + border-top: 0.05rem solid #AAA; + padding: 0.25rem 1rem; + text-align: center; + font-size: 0.6rem; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Main Navigation +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +#main-navi { + font-size: 0.6rem; + background: #EEE; + border: 0.05rem solid #AAA; + border-left: none; + border-right: none; + padding: 0 1rem; +} +#main-navi ul { + list-style: none; + margin: 0; + padding: 0; +} +#main-navi ul li { + display: inline; +} +#main-navi ul li:last-child { + float: right; +} +#main-navi a { + padding: 0.25rem 0.3rem; + color: inherit; + text-decoration: none; + text-align: center; + display: inline-block; + border: 0.05rem solid transparent; + border-top: none; + border-bottom: none; +} +#main-navi a:hover, #main-navi a:focus { + text-decoration: none; + background: #DDD; + border: 0.05rem solid #AAA; + border-top: none; + border-bottom: none; +} + +#main-navi li .fa, h1 > .fa, h2 > .fa { + margin-right: 0.25rem; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Site Navigation +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +#site-navi { + clear: both; + display: flex; + box-sizing: border-box; + justify-content: space-between; +} +#site-navi > div { + display: flex; + align-items: center; + border: 0.05rem solid #AAA; + background: #EEE; +} +#site-navi > div > a { + display: block; +} +#site-navi > section { + display: flex; + overflow: hidden; + align-items: center; +} +#site-navi > section > div { + border: 0.05rem solid #AAA; + background: #EEE; +} +#site-navi .disabled { + pointer-events: none; + color: #AAA; +} +#site-navi .active a { + background: #CCC !important; + font-weight: 600; + pointer-events: none; +} +#site-navi ol { + list-style: none; + margin: 0; + padding: 0; +} +#site-navi ol li { + float: left; + display: inline-block; +} +#site-navi ol li + li { + border-left: 0.05rem solid #AAA; +} +#site-navi a { + padding: 0 0.5rem; + text-decoration: none; + color: inherit; + display: inline-block; +} +#site-navi a:hover, #site-navi a:focus { + background: #CCC; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Elements +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +pre { + font-family: "monospace"; + margin-bottom: 1rem; + overflow: auto; + -moz-tab-size: 4; + tab-size: 4; +} + +code, pre { + font-family: "monospace"; + color: #008B45; +} + +strong, label { + font-weight: 600; +} + +img { + border: none; + max-width: 100%; +} + +main img { + border: 0.05rem solid #000; + border-radius: 0.15rem; +} + +table img { + border: none; + border-radius: 0; +} + +.red { + color: #B03060; +} + +.head-link { + font-size: 0.6rem; + float: right; +} +.head-link .fa { + margin-right: 0.125rem; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Brackets +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +.brackets:before { + content: "["; +} +.brackets:after { + content: "]"; +} +.brackets:before, .brackets:after { + color: #222; +} + +.brackets a, a.brackets { + text-decoration: none; +} + +a.brackets:before, a.brackets:after { + color: #222; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Item Element +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +.item { + background: #EEE; + border: 0.05rem solid #AAA; + overflow: hidden; + margin: 0.5rem 0; +} +.item header { + padding: 0.25rem 1rem; + border-bottom: 0.05rem solid #AAA; + overflow: hidden; + text-transform: uppercase; +} +.item header h2 { + font-size: 0.65rem; + float: left; +} +.item header .info { + float: right; + font-size: 0.6rem; + font-weight: 400; +} +.item header a { + color: inherit; +} +.item blockquote { + margin: 0; + padding: 0 1rem; + font-family: inherit; +} +.item blockquote img { + display: block; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Item content on main sites +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +#content { + background: #EEE; + border: 0.05rem solid #AAA; + margin: 0.5rem 0; + padding: 0 1rem; +} +#content img { + display: block; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Responsive +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +#toogle-nav { + display: none; + clear: both; +} + +#toogle-nav-label { + display: none; + cursor: pointer; + font-size: 1.25rem; + text-align: center; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Form elements +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +input, select { + background: #EEE; + color: inherit; + padding: 0.2rem; + border: 0.1rem solid #AAA; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Table elements +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +table { + width: 100%; + margin: 0 0 1rem; +} + +td { + vertical-align: middle; +} + +table, td { + border-spacing: 0; + border-collapse: collapse; + padding: 0.5rem; + border: 0.05rem solid #000; +} + +thead, tr:nth-child(even) { + background: #EEE; +} + +thead > tr, th { + font-weight: 600; + font-style: italic; +} + +thead > tr > td, th > td { + text-align: center; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Responsive Level #1 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +@media only screen and (max-width: 50em) { + html { + font-size: 1.125rem; + /*18px*/ + background-image: none !important; + } + + body { + line-height: 1.2rem; + } + + #container { + margin: 0; + border-right: none; + border-left: none; + } +} +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Responsive Level #2 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +@media only screen and (max-width: 37.5em) { + main, #main-header > div { + padding: 1rem; + } + + #main-navi { + padding: 0.25rem 1rem; + } + + #main-navi a { + border: 0.05rem solid transparent; + } + + #main-navi a:hover, #main-navi a:focus { + border: 0.05rem solid #BBB; + } + + #main-navi > ul { + display: none; + float: none; + } + + #main-navi > ul > li a { + display: block; + text-align: left; + padding: 0 0.25rem; + } + + #main-navi { + overflow: hidden; + } + + #toogle-nav-label { + display: block; + } + + #toogle-nav:checked + ul { + display: block; + } + + #main-navi li:last-child { + float: none; + } + + .item > header { + text-align: center; + } + + .item > header > h2, +.item > header > .info { + float: none; + display: block; + } +} +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# FontAwesome Main +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +.fa { + display: inline-block; + font: normal normal normal 14px/1 "FontAwesome"; + font-size: inherit; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# FontAwesome Icons +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +.fa-rss:before { + content: ""; +} + +.fa-key:before { + content: ""; +} + +.fa-bars:before { + content: ""; +} + +.fa-user:before { + content: ""; +} + +.fa-home:before { + content: ""; +} + +.fa-search:before { + content: ""; +} + +.fa-rss-square:before { + content: ""; +} + +.fa-arrow-left:before { + content: ""; +} + +.fa-user-secret:before { + content: ""; +} + +.fa-file-text-o:before { + content: ""; +} + +.fa-newspaper-o:before { + content: ""; +} + +.fa-arrow-right:before { + content: ""; +} + +.fa-exclamation-triangle:before { + content: ""; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Font "Font Awesome" [4.7.0]: SIL Open Font License (OFL) +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +@font-face { + font-family: "FontAwesome"; + font-weight: 400; + src: url("../font/font-awesome.woff2") format("woff2"); +} +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Font "Ruda": SIL Open Font License (OFL) +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +@font-face { + font-family: "Ruda"; + font-weight: 400; + src: url("../font/ruda-n-400.woff2") format("woff2"); +} +@font-face { + font-family: "Ruda"; + font-weight: 700; + src: url("../font/ruda-n-700.woff2") format("woff2"); +} + +/*# sourceMappingURL=main.css.map */ diff --git a/theme/default/rsrc/css/main.css.map b/theme/default/rsrc/css/main.css.map new file mode 100644 index 0000000..8e8cbbf --- /dev/null +++ b/theme/default/rsrc/css/main.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["main.scss","import/_responsive.scss","import/_font-awesome.scss","import/_fonts.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAGA;EACC;EACA;;AAEA;EACC;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;;AAEA;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;;;AAGD;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAKH;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;;;AAKH;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAIF;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAIF;EACC;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;;AAKH;EACC;EACA;EACA;EACA;;AAEA;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;AAEA;EACC;;;AAIF;AAAA;AAAA;AAIC;EACC;;AAGD;EACC;;AAGD;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;;;ACtZD;AAAA;AAAA;AAGA;EACC;IACC;AAAqB;IACrB;;;EAGD;IACC;;;EAGD;IACC;IACA;IACA;;;AAIF;AAAA;AAAA;AAGA;EACC;IACC;;;EAGD;IACC;;;EAGD;IACC;;;EAGD;IACC;;;EAGD;IACC;IACA;;;EAGD;IACC;IACA;IACA;;;EAGD;IACC;;;EAGD;IACC;;;EAGD;IACC;;;EAGD;IACC;;;EAGD;IACC;;;EAGD;AAAA;IAEC;IACA;;;AC1EF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AC/DD;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA","file":"main.css"} \ No newline at end of file diff --git a/theme/default/rsrc/css/main.scss b/theme/default/rsrc/css/main.scss new file mode 100644 index 0000000..8215934 --- /dev/null +++ b/theme/default/rsrc/css/main.scss @@ -0,0 +1,412 @@ +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Hyperlinks +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +a { + color: #0060A0; + text-decoration: none; + + &:focus { + background: #CCC; + } +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Headings +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +h1, h2, h3, h4, h5, h6 { + margin: 0; + font-weight: 600; + + + p { + margin-top: 0; + } +} + +h1 { + font-size: 0.80rem; +} + +h2 { + font-size: 0.70rem; +} + +h3 { + font-size: 0.65rem; +} + +h4 { + font-size: 0.60rem; +} + +h5 { + font-size: 0.55rem; +} + +h6 { + font-size: 0.50rem; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Document +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +html, body { + margin: 0; + padding: 0; +} + +html { + font-size: 1.25rem; + color: #333; + background: #CCC; + -webkit-hyphens: auto; + hyphens: auto; +} + +body { + font-family: "Ruda", "sans-serif"; + font-size: 0.7rem; + line-height: 1.2rem; +} + +#container { + max-width: 45rem; + margin: 1rem auto; + border: 0.05rem solid #AAA; + background: #FFF; +} + +main, #main-header > div { + padding: 1rem; + box-sizing: border-box; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Header +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +#main-header > div { + overflow: hidden; +} + +#main-logo { + height: 1.75rem; + display: block; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Footer +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +#main-footer { + background: #EEE; + border-top: 0.05rem solid #AAA; + padding: 0.25rem 1rem; + text-align: center; + font-size: 0.6rem; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Main Navigation +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +#main-navi { + font-size: 0.6rem; + background: #EEE; + border: 0.05rem solid #AAA; + border-left: none; + border-right: none; + padding: 0 1rem; + + ul { + list-style: none; + margin: 0; + padding: 0; + + li { + display: inline; + + &:last-child { + float: right; + } + } + } + + a { + padding: 0.25rem 0.3rem; + color: inherit; + text-decoration: none; + text-align: center; + display: inline-block; + border: 0.05rem solid transparent; + border-top: none; + border-bottom: none; + + &:hover, &:focus { + text-decoration: none; + background: #DDD; + border: 0.05rem solid #AAA; + border-top: none; + border-bottom: none; + } + } +} + +#main-navi li .fa, h1 > .fa, h2 > .fa { + margin-right: 0.25rem; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Site Navigation +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +#site-navi { + clear: both; + display: flex; + box-sizing: border-box; + justify-content: space-between; + + > div { + display: flex; + align-items: center; + border: 0.05rem solid #AAA; + background: #EEE; + + > a { + display: block; + } + } + + > section { + display: flex; + overflow: hidden; + align-items: center; + + > div { + border: 0.05rem solid #AAA; + background: #EEE; + } + } + + .disabled { + pointer-events: none; + color: #AAA; + } + + .active a { + background: #CCC !important; + font-weight: 600; + pointer-events: none; + } + + ol { + list-style: none; + margin: 0; + padding: 0; + + li { + float: left; + display: inline-block; + + + li { + border-left: 0.05rem solid #AAA; + } + } + } + + a { + padding: 0 0.5rem; + text-decoration: none; + color: inherit; + display: inline-block; + + &:hover, &:focus { + background: #CCC; + } + } +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Elements +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +pre { + font-family: "monospace"; + margin-bottom: 1rem; + overflow: auto; + -moz-tab-size: 4; + tab-size: 4; +} + +code, pre { + font-family: "monospace"; + color: #008B45; +} + +strong, label { + font-weight: 600; +} + +img { + border: none; + max-width: 100%; +} + +main img { + border: 0.05rem solid #000; + border-radius: 0.15rem; +} + +table img { + border: none; + border-radius: 0; +} + +.red { + color: #B03060; +} + +.head-link { + font-size: 0.6rem; + float: right; + + .fa { + margin-right: 0.125rem; + } +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Brackets +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +.brackets { + &:before { + content: "["; + } + + &:after { + content: "]"; + } + + &:before, &:after { + color: #222; + } +} + +.brackets a, a.brackets { + text-decoration: none; +} + +a.brackets:before, a.brackets:after { + color: #222; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Item Element +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +.item { + background: #EEE; + border: 0.05rem solid #AAA; + overflow: hidden; + margin: 0.5rem 0; + + header { + padding: 0.25rem 1rem; + border-bottom: 0.05rem solid #AAA; + overflow: hidden; + text-transform: uppercase; + + h2 { + font-size: 0.65rem; + float: left; + } + + .info { + float: right; + font-size: 0.6rem; + font-weight: 400; + } + + a { + color: inherit; + } + } + + blockquote { + margin: 0; + padding: 0 1rem; + font-family: inherit; + + img { + display: block; + } + } +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Item content on main sites +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +#content { + background: #EEE; + border: 0.05rem solid #AAA; + margin: 0.5rem 0; + padding: 0 1rem; + + img { + display: block; + } +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Responsive +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +#toogle-nav { + display: none; + clear: both; +} + +#toogle-nav-label { + display: none; + cursor: pointer; + font-size: 1.25rem; + text-align: center; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Form elements +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +input, select { + background: #EEE; + color: inherit; + padding: 0.2rem; + border: 0.1rem solid #AAA; +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Table elements +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +table { + width: 100%; + margin: 0 0 1rem; +} + +td { + vertical-align: middle; +} + +table, td { + border-spacing: 0; + border-collapse: collapse; + padding: 0.5rem; + border: 0.05rem solid #000; +} + +thead, tr:nth-child(even) { + background: #EEE; +} + +thead > tr, th { + font-weight: 600; + font-style: italic; +} + +thead > tr > td, th > td { + text-align: center; +} + +@import "import/responsive"; +@import "import/font-awesome"; +@import "import/fonts"; diff --git a/theme/default/rsrc/main.css b/theme/default/rsrc/main.css deleted file mode 100644 index 83e729e..0000000 --- a/theme/default/rsrc/main.css +++ /dev/null @@ -1,573 +0,0 @@ -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Hyperlinks -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -a { - color: #0060A0; - text-decoration: none; -} - -a:focus { - background: #CCC; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Paragraphs -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p { - margin-top: 0; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Headings -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -h1, h2, h3, h4, h5, h6 { - margin: 0; - font-weight: 600; -} - -h1 { - font-size: 0.80rem; -} - -h2 { - font-size: 0.70rem; -} - -h3 { - font-size: 0.65rem; -} - -h4 { - font-size: 0.60rem; -} - -h5 { - font-size: 0.55rem; -} - -h6 { - font-size: 0.50rem; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Document -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -html, body { - margin: 0; - padding: 0; -} - -html { - font-size: 1.25rem; - color: #333; - background: #CCC; - -webkit-hyphens: auto; - hyphens: auto; -} - -body { - font-family: Ruda, sans-serif; - font-size: 0.7rem; - line-height: 1.2rem; -} - -#container { - max-width: 45rem; - margin: 1rem auto; - border: 0.05rem solid #AAA; - background: #FFF; -} - -main, #main-header > div { - padding: 1rem; - box-sizing: border-box; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Header -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -#main-header > div { - overflow: hidden; -} - -#main-logo { - height: 1.75rem; - display: block; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Footer -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -#main-footer { - background: #EEE; - border-top: 0.05rem solid #AAA; - padding: 0.25rem 1rem; - text-align: center; - font-size: 0.6rem; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Main Navigation -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -#main-navi { - font-size: 0.6rem; - background: #EEE; - border: 0.05rem solid #AAA; - border-left: none; - border-right: none; - padding: 0 1rem; -} - -#main-navi ul { - list-style: none; - margin: 0; - padding: 0; -} - -#main-navi li { - display: inline; -} - -#main-navi li .fa, h1 > .fa, h2 > .fa { - margin-right: 0.25rem; -} - -#main-navi a { - padding: 0.25rem 0.3rem; - color: inherit; - text-decoration: none; - text-align: center; - display: inline-block; - border: 0.05rem solid transparent; - border-top: none; - border-bottom: none; -} - -#main-navi a:hover, #main-navi a:focus { - text-decoration: none; - background: #DDD; - border: 0.05rem solid #AAA; - border-top: none; - border-bottom: none; -} - -#main-navi li:last-child { - float: right; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Site Navigation -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -#site-navi { - clear: both; - display: flex; - box-sizing: border-box; - justify-content: space-between; -} - -#site-navi > div { - display: flex; - align-items: center; - border: 0.05rem solid #AAA; - background: #EEE; -} - -#site-navi > div > a { - display: block; -} - -#site-navi > section { - display: flex; - overflow: hidden; - align-items: center; -} - -#site-navi > section > div { - border: 0.05rem solid #AAA; - background: #EEE; -} - -#site-navi .disabled { - pointer-events: none; - color: #AAA; -} - -#site-navi .active a { - background: #CCC !important; - font-weight: 600; - pointer-events: none; -} - -#site-navi ol { - list-style: none; - margin: 0; - padding: 0; -} - -#site-navi li { - float: left; - display: inline-block; -} - -#site-navi li + li { - border-left: 0.05rem solid #AAA; -} - -#site-navi a { - padding: 0 0.5rem; - text-decoration: none; - color: inherit; - display: inline-block; -} - -#site-navi a:hover, #site-navi a:focus { - background: #CCC; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Elements -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -pre { - font-family: monospace; - margin-bottom: 1rem; - overflow: auto; - -moz-tab-size: 4; - tab-size: 4; -} - -code, pre { - font-family: monospace; - color: #008B45; -} - -strong, label { - font-weight: 600; -} - -img { - border: none; - max-width: 100%; -} - -main img { - border: 0.05rem solid #000; - border-radius: 0.15rem; -} - -table img { - border: none; - border-radius: 0; -} - -.red { - color: #B03060; -} - -.head-link { - font-size: 0.6rem; - float: right; -} - -.head-link .fa { - margin-right: 0.125rem; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Brackets -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -.brackets a, a.brackets { - text-decoration: none; -} - -.brackets:after { - content: "]"; -} - -.brackets:before { - content: "["; -} - -a.brackets:before, a.brackets:after { - color: #222; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Item Element -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -.item { - background: #EEE; - border: 0.05rem solid #AAA; - overflow: hidden; - margin: 0.5rem 0; -} - -.item > header { - padding: 0.25rem 1rem; - border-bottom: 0.05rem solid #AAA; - overflow: hidden; - text-transform: uppercase; -} - -.item > header h2 { - font-size: 0.65rem; - float: left; -} - -.item > header .info { - float: right; - font-size: 0.6rem; - font-weight: 400; -} - -.item > header a { - color: inherit; -} - -.item > blockquote { - margin: 0; - padding: 0 1rem; - font-family: inherit; -} - -.item > blockquote img { - display: block; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Item content on main sites -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -#content { - background: #EEE; - border: 0.05rem solid #AAA; - margin: 0.5rem 0; - padding: 0 1rem; -} - -#content img { - display: block; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Responsive -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -#toogle-nav { - display: none; - clear: both; -} - -#toogle-nav-label { - display: none; - cursor: pointer; - font-size: 1.25rem; - text-align: center; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Form elements -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -input, select { - background: #EEE; - color: inherit; - padding: 0.2rem; - border: 0.1rem solid #AAA; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Table elements -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -table { - width: 100%; - margin: 0 0 1rem; -} - -td { - vertical-align: middle; -} - -table, td { - border-spacing: 0; - border-collapse: collapse; - padding: 0.5rem; - border: 0.05rem solid #000; -} - -thead, tr:nth-child(even) { - background: #EEE; -} - -thead > tr, th { - font-weight: 600; - font-style: italic; -} - -thead > tr > td, th > td { - text-align: center; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Responsive Level #1 -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -@media only screen and (max-width: 50em) { - html { - font-size: 1.125rem; /*18px*/ - background-image: none !important; - } - - body { - line-height: 1.2rem; - } - - #container { - margin: 0; - border-right: none; - border-left: none; - } -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Responsive Level #2 -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -@media only screen and (max-width: 37.5em) { - main, #main-header > div { - padding: 1rem; - } - - #main-navi { - padding: 0.25rem 1rem; - } - - #main-navi a { - border: 0.05rem solid transparent; - } - - #main-navi a:hover, #main-navi a:focus { - border: 0.05rem solid #BBB; - } - - #main-navi > ul { - display: none; - float: none; - } - - #main-navi > ul > li a { - display: block; - text-align: left; - padding: 0 0.25rem; - } - - #main-navi { - overflow: hidden; - } - - #toogle-nav-label { - display: block; - } - - #toogle-nav:checked + ul { - display: block; - } - - #main-navi li:last-child { - float: none; - } - - .item > header { - text-align: center; - } - - .item > header > h2, - .item > header > .info { - float: none; - display: block; - } -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# FontAwesome Main -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -.fa { - display: inline-block; - font: normal normal normal 14px/1 "FontAwesome"; - font-size: inherit; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# FontAwesome Icons -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -.fa-rss:before { - content: "\f09e"; -} - -.fa-key:before { - content: "\f084"; -} - -.fa-bars:before { - content: "\f0c9"; -} - -.fa-user:before { - content: "\f007"; -} - -.fa-home:before { - content: "\f015"; -} - -.fa-search:before { - content: "\f002"; -} - -.fa-rss-square:before { - content: "\f143"; -} - -.fa-arrow-left:before { - content: "\f060"; -} - -.fa-user-secret:before { - content: "\f21b"; -} - -.fa-file-text-o:before { - content: "\f0f6"; -} - -.fa-newspaper-o:before { - content: "\f1ea"; -} - -.fa-arrow-right:before { - content: "\f061"; -} - -.fa-exclamation-triangle:before { - content: "\f071"; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Font "Font Awesome" [4.7.0]: SIL Open Font License (OFL) -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -@font-face { - font-family: "FontAwesome"; - font-weight: 400; - src: url("font/font-awesome.woff2") format("woff2"); -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Font "Ruda": SIL Open Font License (OFL) -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -@font-face { - font-family: Ruda; - font-weight: 400; - src: url("font/ruda-n-400.woff2") format("woff2"); -} - -@font-face { - font-family: Ruda; - font-weight: 700; - src: url("font/ruda-n-700.woff2") format("woff2"); -} -- cgit v1.2.3