From 9c8df03c362cc766d579ab7ea7ad4fdb8297e9b9 Mon Sep 17 00:00:00 2001 From: Timothy J Warren Date: Wed, 4 Jan 2017 13:40:46 -0500 Subject: [PATCH] Update css to fit blocks within poster images --- public/css/base.css | 813 +++++++++++++++------------------ public/css/base.myth.css | 5 +- public/css/marx.css | 957 +++++++++++++++++++-------------------- public/package.json | 26 +- 4 files changed, 842 insertions(+), 959 deletions(-) diff --git a/public/css/base.css b/public/css/base.css index 95f19e2a..d0610647 100644 --- a/public/css/base.css +++ b/public/css/base.css @@ -1,45 +1,49 @@ -template, -[hidden="hidden"], -.media[hidden] { - display: none; +:root { + --link-shadow: 1px 1px 1px #000; + --shadow: 1px 2px 1px rgba(0, 0, 0, 0.85); + --title-overlay: rgba(0, 0, 0, 0.45); + --text-color: #ffffff; + --normal-padding: 0.25em 0.125em; + --link-hover-color: #7d12db; + --edit-link-hover-color: #db7d12; + --edit-link-color: #12db18; + --radius: 5px; } -body { - margin: 0.5em; -} +template, [hidden="hidden"], .media[hidden] {display:none} + +body {margin: 0.5em;} button { - background: rgba(255,255,255,0.65); - margin: 0; + background:rgba(255,255,255,0.65); + margin: 0; } table { - min-width: 85%; - margin: 0 auto; + min-width:85%; + margin: 0 auto; } td { - padding: 1em; - padding: 1rem; + padding:1em; + padding:1rem; } -thead td, -thead th { - padding: 0.5em; - padding: 0.5rem; +thead td, thead th { + padding:0.5em; + padding:0.5rem; } input[type=number] { - width: 4em; + width: 4em; } tbody > tr:nth-child(odd) { - background: #ddd; + background: #ddd; } -a:hover, -a:active { - color: #7d12db; +a:hover, a:active { + color: var(--link-hover-color) } /* ----------------------------------------------------------------------------- @@ -47,136 +51,66 @@ a:active { ------------------------------------------------------------------------------*/ .bracketed { - color: #12db18; + color: var(--edit-link-color); +} +.bracketed, h1 a { + text-shadow: var(--link-shadow); +} +.bracketed:before {content: '[\00a0'} +.bracketed:after {content: '\00a0]'} +.bracketed:hover, .bracketed:active { + color: var(--edit-link-hover-color) } -.bracketed, -h1 a { - text-shadow: 1px 1px 1px #000; -} - -.bracketed:before { - content: '[\00a0'; -} - -.bracketed:after { - content: '\00a0]'; -} - -.bracketed:hover, -.bracketed:active { - color: #db7d12; -} - -.grow-1 { - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; -} - -.flex-wrap { - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; -} - -.flex-no-wrap { - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; -} - -.flex-align-end { - -webkit-box-align: end; - -webkit-align-items: flex-end; - -ms-flex-align: end; - align-items: flex-end; -} - -.flex-align-space-around { - -webkit-align-content: space-around; - -ms-flex-line-pack: distribute; - align-content: space-around; -} - -.flex-justify-space-around { - -webkit-justify-content: space-around; - -ms-flex-pack: distribute; - justify-content: space-around; -} - -.flex-self-center { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; -} - -.flex { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} +.grow-1 {-webkit-box-flex: 1;flex-grow: 1} +.flex-wrap {flex-wrap: wrap} +.flex-no-wrap {flex-wrap: nowrap} +.flex-align-end {-webkit-box-align: end;align-items: flex-end} +.flex-align-space-around {align-content: space-around} +.flex-justify-space-around {justify-content: space-around} +.flex-self-center {align-self:center} +.flex {display: -webkit-box;display: flex} .small-font { - font-size: 1.6rem; + font-size:1.6rem; } -.justify { - text-align: justify; -} +.justify {text-align:justify} +.align_center {text-align:center} +.align_left {text-align:left} +.align_right {text-align:right} -.align_center { - text-align: center; -} +.valign_top {vertical-align:top} -.align_left { - text-align: left; -} - -.align_right { - text-align: right; -} - -.valign_top { - vertical-align: top; -} - -.no_border { - border: none; -} +.no_border {border:none} .media-wrap { - text-align: center; - margin: 0 auto; + text-align:center; + margin:0 auto; } .danger { - background-color: #ff4136; - border-color: #924949; - color: #fff; + background-color: #ff4136; + border-color: #924949; + color:#fff; } -.danger:hover, -.danger:active { - background-color: #924949; - border-color: #ff4136; - color: #fff; +.danger:hover, .danger:active { + background-color: #924949; + border-color: #ff4136; + color:#fff; } .user-btn { - border-color: #12db18; - color: #12db18; - text-shadow: 1px 1px 1px #000; - padding: 0 0.5em; - padding: 0 0.5rem; + border-color: var(--edit-link-color); + color: var(--edit-link-color); + text-shadow: var(--link-shadow); + padding:0 0.5em; + padding:0 0.5rem; } - -.user-btn:hover, -.user-btn:active { - border-color: #db7d12; - background-color: #db7d12; +.user-btn:hover, .user-btn:active { + border-color: var(--edit-link-hover-color); + background-color: var(--edit-link-hover-color); } /* ----------------------------------------------------------------------------- @@ -184,317 +118,300 @@ h1 a { ------------------------------------------------------------------------------*/ .cssload-loader { - position: relative; - left: calc(50% - 31px); - width: 62px; - height: 62px; - border-radius: 50%; - -webkit-perspective: 780px; - perspective: 780px; + position: relative; + left: calc(50% - 31px); + width: 62px; + height: 62px; + border-radius: 50%; + -webkit-perspective: 780px; + perspective: 780px; } .cssload-inner { - position: absolute; - width: 100%; - height: 100%; - box-sizing: border-box; - border-radius: 50%; + position: absolute; + width: 100%; + height: 100%; + box-sizing: border-box; + border-radius: 50%; } .cssload-inner.cssload-one { - left: 0%; - top: 0%; - -webkit-animation: cssload-rotate-one 1.15s linear infinite; - animation: cssload-rotate-one 1.15s linear infinite; - border-bottom: 3px solid rgb(0,0,0); + left: 0%; + top: 0%; + -webkit-animation: cssload-rotate-one 1.15s linear infinite; + animation: cssload-rotate-one 1.15s linear infinite; + border-bottom: 3px solid rgb(0,0,0); } .cssload-inner.cssload-two { - right: 0%; - top: 0%; - -webkit-animation: cssload-rotate-two 1.15s linear infinite; - animation: cssload-rotate-two 1.15s linear infinite; - border-right: 3px solid rgb(0,0,0); + right: 0%; + top: 0%; + -webkit-animation: cssload-rotate-two 1.15s linear infinite; + animation: cssload-rotate-two 1.15s linear infinite; + border-right: 3px solid rgb(0,0,0); } .cssload-inner.cssload-three { - right: 0%; - bottom: 0%; - -webkit-animation: cssload-rotate-three 1.15s linear infinite; - animation: cssload-rotate-three 1.15s linear infinite; - border-top: 3px solid rgb(0,0,0); + right: 0%; + bottom: 0%; + -webkit-animation: cssload-rotate-three 1.15s linear infinite; + animation: cssload-rotate-three 1.15s linear infinite; + border-top: 3px solid rgb(0,0,0); } @-webkit-keyframes cssload-rotate-one { - 0% { - -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); - transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); - } - - 100% { - -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); - transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); - } + 0% { + -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); + transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); + } + 100% { + -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); + transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); + } } @keyframes cssload-rotate-one { - 0% { - -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); - transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); - } - - 100% { - -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); - transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); - } + 0% { + -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); + transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); + } + 100% { + -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); + transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); + } } @-webkit-keyframes cssload-rotate-two { - 0% { - -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); - transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); - } - - 100% { - -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); - transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); - } + 0% { + -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); + transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); + } + 100% { + -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); + transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); + } } @keyframes cssload-rotate-two { - 0% { - -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); - transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); - } - - 100% { - -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); - transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); - } + 0% { + -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); + transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); + } + 100% { + -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); + transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); + } } @-webkit-keyframes cssload-rotate-three { - 0% { - -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); - transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); - } - - 100% { - -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); - transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); - } + 0% { + -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); + transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); + } + 100% { + -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); + transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); + } } @keyframes cssload-rotate-three { - 0% { - -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); - transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); - } - - 100% { - -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); - transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); - } + 0% { + -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); + transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); + } + 100% { + -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); + transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); + } } /* ----------------------------------------------------------------------------- Table sorting and form styles ------------------------------------------------------------------------------*/ - .sorting, .sorting_asc, .sorting_desc { - vertical-align: text-bottom; + vertical-align:text-bottom; } - .sorting::before { - content: " ↕\00a0"; + content: " ↕\00a0"; } - .sorting_asc::before { - content: " ↑\00a0"; + content: " ↑\00a0"; } - .sorting_desc::before { - content: " ↓\00a0"; + content: " ↓\00a0"; } -.form { - width: 100%; -} +.form { width:100%; } -.form thead th, -.form thead tr { - background: inherit; - border: 0; +.form thead th, .form thead tr { + background: inherit; + border:0; } .form tr > td:nth-child(odd) { - text-align: right; - min-width: 25px; - max-width: 30%; + text-align:right; + min-width:25px; + max-width:30%; } - .form tr > td:nth-child(even) { - text-align: left; - width: 70%; + text-align:left; + width:70%; } .invisible tbody > tr:nth-child(odd) { - background: inherit; + background: inherit; } - -.invisible tr, -.invisible td, -.invisible th { - border: 0; +.invisible tr, .invisible td, .invisible th { + border:0; } /* ----------------------------------------------------------------------------- Message boxes ------------------------------------------------------------------------------*/ -.message { - position: relative; - margin: 0.5em auto; - padding: 0.5em; - width: 95%; +.message{ + position:relative; + margin:0.5em auto; + padding:0.5em; + width:95%; } -.message .close { - width: 1em; - height: 1em; - position: absolute; - right: 0.5em; - top: 0.5em; - text-align: center; - vertical-align: middle; - line-height: 1em; +.message .close{ + width:1em; + height:1em; + position:absolute; + right:0.5em; + top:0.5em; + text-align:center; + vertical-align:middle; + line-height:1em; } .message:hover .close:after { - content: '☒'; + content: '☒'; } .message:hover { - cursor: pointer; + cursor:pointer; } -.message .icon { - left: 0.5em; - top: 0.5em; - margin-right: 1em; +.message .icon{ + left:0.5em; + top:0.5em; + margin-right:1em; } -.message.error { - border: 1px solid #924949; - background: #f3e6e6; +.message.error{ + border:1px solid #924949; + background: #f3e6e6; } -.message.error .icon::after { - content: '✘'; + .message.error .icon::after { + content: '✘'; + } + +.message.success{ + border:1px solid #1f8454; + background: #70dda9; +} + .message.success .icon::after { + content: '✔' + } + +.message.info{ + border:1px solid #bfbe3a; + background: #FFFFCC; } -.message.success { - border: 1px solid #1f8454; - background: #70dda9; -} - -.message.success .icon::after { - content: '✔'; -} - -.message.info { - border: 1px solid #bfbe3a; - background: #FFFFCC; -} - -.message.info .icon::after { - content: '⚠'; -} + .message.info .icon::after { + content: '⚠'; + } /* ----------------------------------------------------------------------------- Base list styles ------------------------------------------------------------------------------*/ .media { - position: relative; - vertical-align: top; - display: inline-block; - text-align: center; - width: 220px; - height: 319px; - margin: 0.25em 0.125em; + position:relative; + vertical-align:top; + display:inline-block; + text-align:center; + width:220px; + height:311px; + margin: var(--normal-padding); } .media .edit_buttons > button { - margin: 0.5em auto; + margin:0.5em auto; } -.name, -.media_metadata > div, -.medium_metadata > div, -.row { - text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.85); - background: rgba(0, 0, 0, 0.45); - color: #ffffff; - padding: 0.25em 0.125em; - text-align: right; -} + .name, + .media_metadata > div, + .medium_metadata > div, + .row { + text-shadow: var(--shadow); + background: var(--title-overlay); + color: var(--text-color); + padding: var(--normal-padding); + text-align:right; + } -.media_type, -.age_rating { - text-align: left; -} + .media_type, .age_rating { + text-align:left; + } -.media > .media_metadata { - position: absolute; - bottom: 0; - right: 0; -} + .media > .media_metadata { + position:absolute; + bottom:0; + right:0; + } -.media > .medium_metadata { - position: absolute; - bottom: 0; - left: 0; -} + .media > .medium_metadata { + position:absolute; + bottom: 0; + left:0; + } -.media > .name { - position: absolute; - top: 0; -} + .media > .name { + position:absolute; + top: 0; + } -.media:hover > .name, -.media:hover > .media_metadata > div, -.media:hover > .medium_metadata > div, -.media:hover > .table .row { - -webkit-transition: .25s ease; - transition: .25s ease; - background: rgba(0,0,0,0.75); -} + .media:hover > .name, + .media:hover > .media_metadata > div, + .media:hover > .medium_metadata > div, + .media:hover > .table .row + { + -webkit-transition: .25s ease; + transition: .25s ease; + background:rgba(0,0,0,0.75); + } + + .media:hover > button[hidden], + .media:hover > .edit_buttons[hidden] + { + -webkit-transition: .25s ease; + transition: .25s ease; + display:block; + } + + .media > .name > a { + background:none; + color:#fff; + text-shadow: var(--shadow); + } -.media:hover > button[hidden], -.media:hover > .edit_buttons[hidden] { - -webkit-transition: .25s ease; - transition: .25s ease; - display: block; -} -.media > .name > a { - background: none; - color: #fff; - text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.85); -} /* ----------------------------------------------------------------------------- Anime-list-specific styles ------------------------------------------------------------------------------*/ - -.anime .name, -.manga .name { - text-align: center; - width: 100%; - padding: 0.5em 0.25em; +.anime .name, .manga .name { + text-align:center; + width:100%; + padding:0.5em 0.25em; } .anime .media_type, @@ -504,176 +421,158 @@ h1 a { .anime .age_rating, .anime .edit, .anime .delete { - background: none; - text-align: center; + background: none; + text-align:center; } -.anime .table, -.manga .table { - position: absolute; - bottom: 0; - left: 0; - width: 100%; + +.anime .table, .manga .table { + position:absolute; + bottom:0; + left:0; + width:100%; } -.anime .row, -.manga .row { - width: 100%; - background: rgba(0, 0, 0, 0.45); - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-content: space-around; - -ms-flex-line-pack: distribute; - align-content: space-around; - -webkit-justify-content: space-around; - -ms-flex-pack: distribute; - justify-content: space-around; - text-align: center; - padding: 0 inherit; +.anime .row, .manga .row { + width:100%; + background: var(--title-overlay); + display: -webkit-box; + display: flex; + align-content: space-around; + justify-content: space-around; + text-align:center; + padding:0 inherit; } -.anime .row > span, -.manga .row > span { - text-align: left; +.anime .row > span, .manga .row > span { + text-align:left; } -.anime .row > div, -.manga .row > div { - font-size: 0.8em; - display: flex-item; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - text-align: center; - vertical-align: middle; +.anime .row > div, .manga .row > div { + font-size:0.8em; + display:flex-item; + align-self:center; + text-align:center; + vertical-align:middle; } .anime .media > button.plus_one { - position: absolute; - top: 138px; - top: calc(50% - 21.5px); - left: 44px; - left: calc(50% - 66.5px); + position:absolute; + top: 138px; + top: calc(50% - 21.5px); + left: 44px; + left: calc(50% - 66.5px); } /* ----------------------------------------------------------------------------- Manga-list-specific styles ------------------------------------------------------------------------------*/ - .manga .row { - padding: 1px; + padding:1px; } .manga .media { - border: 1px solid #ddd; - width: 200px; - height: 290px; - margin: 0.25em; + border:1px solid #ddd; + height:310px; + margin:0.25em; } .manga .media > .edit_buttons { - position: absolute; - top: 86px; - top: calc(50% - 58.5px); - left: 5px; - left: calc(50% - 95px); + position:absolute; + top: 86px; + top: calc(50% - 58.5px); + left: 5px; + left: calc(50% - 95px); } + /* ----------------------------------------------------------------------------- Search page styles ------------------------------------------------------------------------------*/ - .media.search > .name { - background-color: #555; - background-color: rgba(000,000,000,0.35); - background-size: cover; - background-size: contain; - background-repeat: no-repeat; + background-color:#555; + background-color: rgba(000,000,000,0.35); + background-size: cover; + background-size: contain; + background-repeat: no-repeat; } .big-check { - display: none; + display:none; } .big-check:checked + label { - -webkit-transition: .25s ease; - transition: .25s ease; - background: rgba(0,0,0,0.75); + -webkit-transition: .25s ease; + transition: .25s ease; + background:rgba(0,0,0,0.75); } .big-check:checked + label:after { - content: '✓'; - font-size: 15em; - font-size: 15rem; - text-align: center; - color: greenyellow; - position: absolute; - top: 5px; - left: 0; - height: 100%; - width: 100%; + content: '✓'; + font-size: 15em; + font-size: 15rem; + text-align:center; + color: greenyellow; + position:absolute; + top:5px; + left:0; + height:100%; + width:100%; } #series_list article.media { - position: relative; + position:relative; } - -#series_list .name, -#series_list .name label { - position: absolute; - display: block; - top: 0; - height: 100%; - width: 100%; - vertical-align: middle; +#series_list .name, #series_list .name label { + position:absolute; + display:block; + top:0; + height:100%; + width:100%; + vertical-align:middle; } /* ---------------------------------------------------------------------------- Details page styles -----------------------------------------------------------------------------*/ - .details { - margin: 1.5rem auto 0 auto; - max-width: 93rem; - padding: 1rem; - font-size: inherit; + margin: 1.5rem auto 0 auto; + max-width:93rem; + padding:1rem; + font-size:inherit; } .details .cover { - max-width: 300px; - max-height: 435px; + max-width: 300px; + max-height: 435px; } .details h2 { - margin-top: 0; + margin-top: 0; } .details .flex > div { - margin: 1rem; + margin: 1rem; } .details table { - max-width: 300px; -} - -.details td { - padding: 0 1.5rem; + max-width:300px; } + .details td { + padding:0 1.5rem; + } .details p { - text-align: justify; + text-align:justify; } .details td:nth-child(odd) { - width: 1%; - white-space: nowrap; - text-align: right; + width:1%; + white-space:nowrap; + text-align:right; } - .details td:nth-child(even) { - text-align: left; + text-align:left; } /* ---------------------------------------------------------------------------- @@ -681,17 +580,17 @@ h1 a { -----------------------------------------------------------------------------*/ @media screen and (max-width: 40em) { - nav a { - line-height: 4em; - line-height: 4rem; - } + nav a { + line-height:4em; + line-height:4rem; + } - .media { - margin: 2px 0; - } + .media { + margin:2px 0; + } - main { - padding: 0 0,5em 0.5em; - padding: 0 0.5rem 0.5rem; - } + main { + padding:0 0,5em 0.5em; + padding:0 0.5rem 0.5rem; + } } \ No newline at end of file diff --git a/public/css/base.myth.css b/public/css/base.myth.css index 1cdfc5b5..56cf4a91 100644 --- a/public/css/base.myth.css +++ b/public/css/base.myth.css @@ -296,7 +296,7 @@ a:hover, a:active { display:inline-block; text-align:center; width:220px; - height:319px; + height:311px; margin: var(--normal-padding); } @@ -427,8 +427,7 @@ a:hover, a:active { .manga .media { border:1px solid #ddd; - width:200px; - height:290px; + height:310px; margin:0.25em; } diff --git a/public/css/marx.css b/public/css/marx.css index cc192a04..8e25ba1b 100644 --- a/public/css/marx.css +++ b/public/css/marx.css @@ -1,629 +1,608 @@ -:root { - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - box-sizing: border-box; - cursor: default; - font-family: 'Open Sans', 'Nimbus Sans L', 'Helvetica Neue', Helvetica, 'Lucida Grande', sans-serif; - line-height: 1.4; - overflow-y: scroll; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; - text-size-adjust: 100%; +:root +{ + --default-font-list:'Open Sans', 'Nimbus Sans L', 'Helvetica Neue', Helvetica, 'Lucida Grande', sans-serif; + -ms-text-size-adjust:100%; + -webkit-text-size-adjust:100%; + box-sizing:border-box; + cursor:default; + font-family:var(--default-font-list); + line-height:1.4; + overflow-y:scroll; + text-size-adjust:100%; + scroll-behavior: smooth; } -audio:not([controls]) { - display: none; +audio:not([controls]) +{ + display:none; } -details { - display: block; +details +{ + display:block; } -input[type=search] { - -webkit-appearance: textfield; +input[type=search] +{ + -webkit-appearance:textfield; } -input[type=search]::-webkit-search-cancel-button, -input[type=search]::-webkit-search-decoration { - -webkit-appearance: none; +input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration +{ + -webkit-appearance:none; } -main { - display: block; - margin: 0 auto; - padding: 0 1.6em 1.6em; - padding: 0 1.6rem 1.6rem; +main +{ + display:block; + margin:0 auto; + padding:0 1.6em 1.6em; + padding:0 1.6rem 1.6rem; } -summary { - display: block; +summary +{ + display:block; } -pre { - background: #efefef; - color: #444; - display: block; - font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; - font-size: 1.4em; - font-size: 1.4rem; - margin: 1.6em 0; - margin: 1.6rem 0; - overflow: auto; - padding: 1.6em; - padding: 1.6rem; - word-break: break-all; - word-wrap: break-word; +pre +{ + background:#efefef; + color:#444; + display:block; + font-family:Menlo, Monaco, Consolas, 'Courier New', monospace; + font-size:1.4em; + font-size:1.4rem; + margin:1.6em 0; + margin:1.6rem 0; + overflow:auto; + padding:1.6em; + padding:1.6rem; + word-break:break-all; + word-wrap:break-word; } -progress { - display: inline-block; +progress +{ + display:inline-block; } -small { - color: #777; - font-size: 75%; +small +{ + color:#777; + font-size:75%; } -big { - font-size: 125%; +big +{ + font-size:125%; } -template { - display: none; +template +{ + display:none; } -textarea { - border: .1rem solid #ccc; - border-radius: 0; - display: block; - margin-bottom: .8rem; - overflow: auto; - padding: .8rem; - resize: vertical; - vertical-align: middle; +textarea +{ + border:.1rem solid #ccc; + border-radius:0; + display:block; + margin-bottom:.8rem; + overflow:auto; + padding:.8rem; + resize:vertical; + vertical-align:middle; } -[hidden] { - display: none; +[hidden] +{ + display:none; } -[unselectable] { - -moz-user-select: none; - -ms-user-select: none; - -webkit-user-select: none; - user-select: none; +[unselectable] +{ + -webkit-user-select:none; + user-select:none; } -*, -::before, -::after { - border-style: solid; - border-width: 0; - box-sizing: inherit; +*,::before,::after +{ + border-style:solid; + border-width:0; + box-sizing:inherit; } -* { - font-size: inherit; - line-height: inherit; - margin: 0; - padding: 0; +* +{ + font-size:inherit; + line-height:inherit; + margin:0; + padding:0; } -::before, -::after { - text-decoration: inherit; - vertical-align: inherit; +::before,::after +{ + text-decoration:inherit; + vertical-align:inherit; } -a { - -webkit-transition: .25s ease; - color: #1271db; - text-decoration: none; - -webkit-transition: .25s ease; - transition: .25s ease; +a +{ + -webkit-transition:.25s ease; + color:#1271db; + text-decoration:none; + transition:.25s ease; } -audio, -canvas, -iframe, -img, -svg, -video { - vertical-align: middle; +audio,canvas,iframe,img,svg,video +{ + vertical-align:middle; } -button, -input, -select, -textarea { - border: .1rem solid #ccc; - color: inherit; - font-family: inherit; - font-style: inherit; - font-weight: inherit; - min-height: 1.4em; +button,input,select,textarea +{ + border:.1rem solid #ccc; + color:inherit; + font-family:inherit; + font-style:inherit; + font-weight:inherit; + min-height:1.4em; } -code, -kbd, -pre, -samp { - font-family: Menlo, Monaco, Consolas, 'Courier New', monospace, monospace; +code,kbd,pre,samp +{ + font-family:Menlo, Monaco, Consolas, 'Courier New', monospace, monospace; } -table { - border-collapse: collapse; - border-spacing: 0; - margin-bottom: 1.6rem; +table +{ + border-collapse:collapse; + border-spacing:0; + margin-bottom:1.6rem; } -::-moz-selection { - background-color: #b3d4fc; - text-shadow: none; +::selection +{ + background-color:#b3d4fc; + text-shadow:none; } -::selection { - background-color: #b3d4fc; - text-shadow: none; +button::-moz-focus-inner +{ + border:0; } -button::-moz-focus-inner { - border: 0; +body +{ + color:#444; + font-family:var(--default-font-list); + font-size:1.6rem; + font-style:normal; + font-weight:400; + padding:0; } -body { - color: #444; - font-family: 'Open Sans', 'Nimbus Sans L', 'Helvetica Neue', Helvetica, 'Lucida Grande', sans-serif; - font-size: 1.6rem; - font-style: normal; - font-weight: 400; - padding: 0; +p +{ + margin:0 0 1.6rem; } -p { - margin: 0 0 1.6rem; +h1,h2,h3,h4,h5,h6 +{ + font-family:Lato, var(--default-font-list); + margin:2em 0 1.6em; + margin:2rem 0 1.6rem; } -h1, -h2, -h3, -h4, -h5, -h6 { - font-family: Lato, 'Open Sans', 'Nimbus Sans L', 'Helvetica Neue', Helvetica, 'Lucida Grande', sans-serif; - margin: 2em 0 1.6em; - margin: 2rem 0 1.6rem; +h1 +{ + border-bottom:.1rem solid rgba(0,0,0,0.2); + font-size:3.6em; + font-size:3.6rem; + font-style:normal; + font-weight:500; } -h1 { - border-bottom: .1rem solid rgba(0,0,0,0.2); - font-size: 3.6em; - font-size: 3.6rem; - font-style: normal; - font-weight: 500; +h2 +{ + font-size:3em; + font-size:3rem; + font-style:normal; + font-weight:500; } -h2 { - font-size: 3em; - font-size: 3rem; - font-style: normal; - font-weight: 500; +h3 +{ + font-size:2.4em; + font-size:2.4rem; + font-style:normal; + font-weight:500; + margin:1.6rem 0 .4rem; } -h3 { - font-size: 2.4em; - font-size: 2.4rem; - font-style: normal; - font-weight: 500; - margin: 1.6rem 0 .4rem; +h4 +{ + font-size:1.8em; + font-size:1.8rem; + font-style:normal; + font-weight:600; + margin:1.6rem 0 .4rem; } -h4 { - font-size: 1.8em; - font-size: 1.8rem; - font-style: normal; - font-weight: 600; - margin: 1.6rem 0 .4rem; +h5 +{ + font-size:1.6em; + font-size:1.6rem; + font-style:normal; + font-weight:600; + margin:1.6rem 0 .4rem; } -h5 { - font-size: 1.6em; - font-size: 1.6rem; - font-style: normal; - font-weight: 600; - margin: 1.6rem 0 .4rem; +h6 +{ + color:#777; + font-size:1.4em; + font-size:1.4rem; + font-style:normal; + font-weight:600; + margin:1.6rem 0 .4rem; } -h6 { - color: #777; - font-size: 1.4em; - font-size: 1.4rem; - font-style: normal; - font-weight: 600; - margin: 1.6rem 0 .4rem; +code +{ + background:#efefef; + color:#444; + font-family:Menlo, Monaco, Consolas, 'Courier New', monospace; + font-size:1.4rem; + word-break:break-all; + word-wrap:break-word; } -code { - background: #efefef; - color: #444; - font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; - font-size: 1.4rem; - word-break: break-all; - word-wrap: break-word; +a:hover,a:focus +{ + text-decoration:none; } -a:hover, -a:focus { - text-decoration: none; +dl +{ + margin-bottom:1.6rem; } -dl { - margin-bottom: 1.6rem; +dd +{ + margin-left:4rem; } -dd { - margin-left: 4rem; +ul,ol +{ + margin-bottom:.8rem; + padding-left:2rem; } -ul, -ol { - margin-bottom: .8rem; - padding-left: 2rem; +blockquote +{ + border-left:.2rem solid #1271db; + font-family:Georgia, Times, 'Times New Roman', serif; + font-style:italic; + margin:1.6rem 0; + padding-left:1.6rem; } - -blockquote { - border-left: .2rem solid #1271db; - font-family: Georgia, Times, 'Times New Roman', serif; - font-style: italic; - margin: 1.6rem 0; - padding-left: 1.6rem; -} - -figcaption { - font-family: Georgia, Times, 'Times New Roman', serif; -} - -html { - font-size: 62.5%; -} - -main, -header, -footer, -article, -section, -aside, -details, -summary { - display: block; - height: auto; - margin: 0 auto; - width: 100%; + +figcaption +{ + font-family:Georgia, Times, 'Times New Roman', serif; +} + +html +{ + font-size:62.5%; +} + +main,header,footer,article,section,aside,details,summary +{ + display:block; + height:auto; + margin:0 auto; + width:100%; +} + +footer +{ + border-top:.1rem solid rgba(0,0,0,0.2); + clear:both; + display:inline-block; + float:left; + max-width:100%; + padding:1rem 0; + text-align:center; +} + +hr +{ + border-top:.1rem solid rgba(0,0,0,0.2); + display:block; + margin-bottom:1.6rem; + width:100%; +} + +img +{ + height:auto; + max-width:100%; + vertical-align:baseline; +} + +input[type=text],input[type=password],input[type=email],input[type=url],input[type=date],input[type=month],input[type=time],input[type=datetime],input[type=datetime-local],input[type=week],input[type=number],input[type=search],input[type=tel],input[type=color],select +{ + border:.1rem solid #ccc; + border-radius:0; + display:inline-block; + padding:.8rem; + vertical-align:middle; +} + +input:not([type]) +{ + -webkit-appearance:none; + background-clip:padding-box; + background-color:#fff; + border:.1rem solid #ccc; + border-radius:0; + color:#444; + display:inline-block; + padding:.8rem; + text-align:left; +} + +input[type=color] +{ + padding:.8rem 1.6rem; +} + +input[type=text]:focus,input[type=password]:focus,input[type=email]:focus,input[type=url]:focus,input[type=date]:focus,input[type=month]:focus,input[type=time]:focus,input[type=datetime]:focus,input[type=datetime-local]:focus,input[type=week]:focus,input[type=number]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=color]:focus,select:focus,textarea:focus +{ + border-color:#b3d4fc; +} + +input:not([type]):focus +{ + border-color:#b3d4fc; +} + +input[type=radio],input[type=checkbox] +{ + vertical-align:middle; +} + +input[type=file]:focus,input[type=radio]:focus,input[type=checkbox]:focus +{ + outline:.1rem solid thin #444; +} + +input[type=text][disabled],input[type=password][disabled],input[type=email][disabled],input[type=url][disabled],input[type=date][disabled],input[type=month][disabled],input[type=time][disabled],input[type=datetime][disabled],input[type=datetime-local][disabled],input[type=week][disabled],input[type=number][disabled],input[type=search][disabled],input[type=tel][disabled],input[type=color][disabled],select[disabled],textarea[disabled] +{ + background-color:#efefef; + color:#777; + cursor:not-allowed; +} + +input:not([type])[disabled] +{ + background-color:#efefef; + color:#777; + cursor:not-allowed; +} + +input[readonly],select[readonly],textarea[readonly] +{ + background-color:#efefef; + border-color:#ccc; + color:#777; } -footer { - border-top: .1rem solid rgba(0,0,0,0.2); - clear: both; - display: inline-block; - float: left; - max-width: 100%; - padding: 1rem 0; - text-align: center; -} - -hr { - border-top: .1rem solid rgba(0,0,0,0.2); - display: block; - margin-bottom: 1.6rem; - width: 100%; -} - -img { - height: auto; - max-width: 100%; - vertical-align: baseline; -} - -input[type=text], -input[type=password], -input[type=email], -input[type=url], -input[type=date], -input[type=month], -input[type=time], -input[type=datetime], -input[type=datetime-local], -input[type=week], -input[type=number], -input[type=search], -input[type=tel], -input[type=color], -select { - border: .1rem solid #ccc; - border-radius: 0; - display: inline-block; - padding: .8rem; - vertical-align: middle; -} - -input:not([type]) { - -webkit-appearance: none; - background-clip: padding-box; - background-color: #fff; - border: .1rem solid #ccc; - border-radius: 0; - color: #444; - display: inline-block; - padding: .8rem; - text-align: left; +input:focus:invalid,textarea:focus:invalid,select:focus:invalid +{ + border-color:#e9322d; + color:#b94a48; } -input[type=color] { - padding: .8rem 1.6rem; -} - -input[type=text]:focus, -input[type=password]:focus, -input[type=email]:focus, -input[type=url]:focus, -input[type=date]:focus, -input[type=month]:focus, -input[type=time]:focus, -input[type=datetime]:focus, -input[type=datetime-local]:focus, -input[type=week]:focus, -input[type=number]:focus, -input[type=search]:focus, -input[type=tel]:focus, -input[type=color]:focus, -select:focus, -textarea:focus { - border-color: #b3d4fc; -} - -input:not([type]):focus { - border-color: #b3d4fc; -} - -input[type=radio], -input[type=checkbox] { - vertical-align: middle; -} - -input[type=file]:focus, -input[type=radio]:focus, -input[type=checkbox]:focus { - outline: .1rem solid thin #444; -} - -input[type=text][disabled], -input[type=password][disabled], -input[type=email][disabled], -input[type=url][disabled], -input[type=date][disabled], -input[type=month][disabled], -input[type=time][disabled], -input[type=datetime][disabled], -input[type=datetime-local][disabled], -input[type=week][disabled], -input[type=number][disabled], -input[type=search][disabled], -input[type=tel][disabled], -input[type=color][disabled], -select[disabled], -textarea[disabled] { - background-color: #efefef; - color: #777; - cursor: not-allowed; -} - -input:not([type])[disabled] { - background-color: #efefef; - color: #777; - cursor: not-allowed; -} - -input[readonly], -select[readonly], -textarea[readonly] { - background-color: #efefef; - border-color: #ccc; - color: #777; -} - -input:focus:invalid, -textarea:focus:invalid, -select:focus:invalid { - border-color: #e9322d; - color: #b94a48; -} - -input[type=file]:focus:invalid:focus, -input[type=radio]:focus:invalid:focus, -input[type=checkbox]:focus:invalid:focus { - outline-color: #ff4136; +input[type=file]:focus:invalid:focus,input[type=radio]:focus:invalid:focus,input[type=checkbox]:focus:invalid:focus +{ + outline-color:#ff4136; } -select { - background-color: #fff; - border: .1rem solid #ccc; +select +{ + background-color:#fff; + border:.1rem solid #ccc; } -select[multiple] { - height: auto; +select[multiple] +{ + height:auto; } -label { - line-height: 2; +label +{ + line-height:2; } -fieldset { - border: 0; - margin: 0; - padding: .8rem 0; +fieldset +{ + border:0; + margin:0; + padding:.8rem 0; } -legend { - border-bottom: .1rem solid #ccc; - color: #444; - display: block; - margin-bottom: .8rem; - padding: .8rem 0; - width: 100%; +legend +{ + border-bottom:.1rem solid #ccc; + color:#444; + display:block; + margin-bottom:.8rem; + padding:.8rem 0; + width:100%; } -input[type=submit], -button { - -moz-user-select: none; - -ms-user-select: none; - -webkit-transition: .25s ease; - -webkit-user-drag: none; - -webkit-user-select: none; - border: .2rem solid #444; - border-radius: 0; - color: #444; - cursor: pointer; - display: inline-block; - margin-bottom: .8rem; - margin-right: .4rem; - padding: .8rem 1.6rem; - text-align: center; - text-decoration: none; - text-transform: uppercase; - -webkit-transition: .25s ease; - transition: .25s ease; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - vertical-align: baseline; +input[type=submit],button +{ + -moz-user-select:none; + -ms-user-select:none; + -webkit-transition:.25s ease; + -webkit-user-drag:none; + -webkit-user-select:none; + border:.2rem solid #444; + border-radius:0; + color:#444; + cursor:pointer; + display:inline-block; + margin-bottom:.8rem; + margin-right:.4rem; + padding:.8rem 1.6rem; + text-align:center; + text-decoration:none; + text-transform:uppercase; + transition:.25s ease; + user-select:none; + vertical-align:baseline; } -input[type=submit] a, -button a { - color: #444; +input[type=submit] a,button a +{ + color:#444; } -input[type=submit]::-moz-focus-inner, -button::-moz-focus-inner { - padding: 0; +input[type=submit]::-moz-focus-inner,button::-moz-focus-inner +{ + padding:0; } -input[type=submit]:hover, -button:hover { - background: #444; - border-color: #444; - color: #fff; +input[type=submit]:hover,button:hover +{ + background:#444; + border-color:#444; + color:#fff; } -input[type=submit]:hover a, -button:hover a { - color: #fff; +input[type=submit]:hover a,button:hover a +{ + color:#fff; } -input[type=submit]:active, -button:active { - background: #6a6a6a; - border-color: #6a6a6a; - color: #fff; +input[type=submit]:active,button:active +{ + background:#6a6a6a; + border-color:#6a6a6a; + color:#fff; } -input[type=submit]:active a, -button:active a { - color: #fff; +input[type=submit]:active a,button:active a +{ + color:#fff; } -input[type=submit]:disabled, -button:disabled { - box-shadow: none; - cursor: not-allowed; - opacity: .40; +input[type=submit]:disabled,button:disabled +{ + box-shadow:none; + cursor:not-allowed; + opacity:.40; } -nav ul { - list-style: none; - margin: 0; - padding: 0; - text-align: center; +nav ul +{ + list-style:none; + margin:0; + padding:0; + text-align:center; } -nav ul li { - display: inline; +nav ul li +{ + display:inline; } -nav a { - -webkit-transition: .25s ease; - border-bottom: .2rem solid transparent; - color: #444; - padding: .8rem 1.6rem; - text-decoration: none; - -webkit-transition: .25s ease; - transition: .25s ease; +nav a +{ + -webkit-transition:.25s ease; + border-bottom:.2rem solid transparent; + color:#444; + padding:.8rem 1.6rem; + text-decoration:none; + transition:.25s ease; } -nav a:hover, -nav li.selected a { - border-color: rgba(0,0,0,0.2); +nav a:hover,nav li.selected a +{ + border-color:rgba(0,0,0,0.2); } -nav a:active { - border-color: rgba(0,0,0,0.56); +nav a:active +{ + border-color:rgba(0,0,0,0.56); } -caption { - padding: .8rem 0; +caption +{ + padding:.8rem 0; } -thead th { - background: #efefef; - color: #444; +thead th +{ + background:#efefef; + color:#444; } -tr { - background: #fff; - margin-bottom: .8rem; +tr +{ + background:#fff; + margin-bottom:.8rem; } -th, -td { - border: .1rem solid #ccc; - padding: .8rem 1.6rem; - text-align: center; - vertical-align: inherit; +th,td +{ + border:.1rem solid #ccc; + padding:.8rem 1.6rem; + text-align:center; + vertical-align:inherit; } -tfoot tr { - background: none; +tfoot tr +{ + background:none; } -tfoot td { - color: #efefef; - font-size: .8rem; - font-style: italic; - padding: 1.6rem .4rem; +tfoot td +{ + color:#efefef; + font-size:.8rem; + font-style:italic; + padding:1.6rem .4rem; } @media screen { - [hidden~=screen] { - display: inherit; - } + [hidden~=screen] + { + display:inherit; + } - [hidden~=screen]:not(:active):not(:focus):not(:target) { - clip: rect(0000)!important; - position: absolute!important; - } + [hidden~=screen]:not(:active):not(:focus):not(:target) + { + clip:rect(0000)!important; + position:absolute!important; + } } @media screen and max-width 40rem { - article, - section, - aside { - clear: both; - display: block; - max-width: 100%; - } + article,section,aside + { + clear:both; + display:block; + max-width:100%; + } - img { - margin-right: 1.6rem; - } + img + { + margin-right:1.6rem; + } } \ No newline at end of file diff --git a/public/package.json b/public/package.json index 6d6d0940..17f500c7 100644 --- a/public/package.json +++ b/public/package.json @@ -1,11 +1,17 @@ { - "scripts": { - "watch": "npm-run-all --parallel watch:base watch:marx", - "watch:base": "myth -w css/base.myth.css css/base.css", - "watch:marx": "myth -w css/marx.myth.css css/marx.css" - }, - "devDependencies": { - "myth": "^1.5.0", - "npm-run-all": "^1.7.0" - } -} + "scripts": { + "build": "npm-run-all --parallel build:base build:marx", + "build:base": "postcss --use autoprefixer --autoprefixer.browsers \"> 5%\" -o css/base.css css/base.myth.css", + "build:marx": "postcss --use autoprefixer --autoprefixer.browsers \"> 5%\" -o css/marx.css css/marx.myth.css", + "watch": "npm-run-all --parallel watch:base watch:marx", + "watch:base": "postcss --use autoprefixer --autoprefixer.browsers \"> 5%\" -w -o css/base.css css/base.myth.css", + "watch:marx": "postcss --use autoprefixer --autoprefixer.browsers \"> 5%\" -w -o css/marx.css css/marx.myth.css" + }, + "devDependencies": { + "autoprefixer": "^6.6.1", + "npm-run-all": "^4.0.0", + "postcss-cachify": "^1.3.1", + "postcss-cli": "^2.6.0", + "postcss-cssnext": "^2.9.0" + } +} \ No newline at end of file