codex-mythica/public/styles/styles.css

897 lines
16 KiB
CSS

/*!
* @project The Codex Mythica
*
* @copyright Copyright 2017-2018 Eric Woodward
* @license CC0 Public Domain License v1.0
* http://creativecommons.org/publicdomain/zero/1.0/
*
*/
@font-face {
font-family: 'liberation_serif';
src: url('https://mythicwarsgame.com/fonts/ls/LiberationSerif-Regular-webfont.eot');
src: url('https://mythicwarsgame.com/fonts/ls/LiberationSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('https://mythicwarsgame.com/fonts/ls/LiberationSerif-Regular-webfont.woff') format('woff'),
url('https://mythicwarsgame.com/fonts/ls/LiberationSerif-Regular-webfont.ttf') format('truetype'),
url('https://mythicwarsgame.com/fonts/ls/LiberationSerif-Regular-webfont.svg#liberation_serif') format('svg');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'liberation_serif';
src: url('https://mythicwarsgame.com/fonts/ls/LiberationSerif-Italic-webfont.eot');
src: url('https://mythicwarsgame.com/fonts/ls/LiberationSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('https://mythicwarsgame.com/fonts/ls/LiberationSerif-Italic-webfont.woff') format('woff'),
url('https://mythicwarsgame.com/fonts/ls/LiberationSerif-Italic-webfont.ttf') format('truetype'),
url('https://mythicwarsgame.com/fonts/ls/LiberationSerif-Italic-webfont.svg#liberation_serif') format('svg');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'liberation_serif';
src: url('https://mythicwarsgame.com/fonts/ls/LiberationSerif-Bold-webfont.eot');
src: url('https://mythicwarsgame.com/fonts/ls/LiberationSerif-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('https://mythicwarsgame.com/fonts/ls/LiberationSerif-Bold-webfont.woff') format('woff'),
url('https://mythicwarsgame.com/fonts/ls/LiberationSerif-Bold-webfont.ttf') format('truetype'),
url('https://mythicwarsgame.com/fonts/ls/LiberationSerif-Bold-webfont.svg#liberation_serif') format('svg');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'liberation_serif';
src: url('https://mythicwarsgame.com/fonts/ls/LiberationSerif-BoldItalic-webfont.eot');
src: url('https://mythicwarsgame.com/fonts/ls/LiberationSerif-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('https://mythicwarsgame.com/fonts/ls/LiberationSerif-BoldItalic-webfont.woff') format('woff'),
url('https://mythicwarsgame.com/fonts/ls/LiberationSerif-BoldItalic-webfont.ttf') format('truetype'),
url('https://mythicwarsgame.com/fonts/LiberationSerif-BoldItalic-webfont.svg#liberation_serif') format('svg');
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: 'marcellus_sc';
src: url('https://mythicwarsgame.com/fonts/msc/MarcellusSC.eot');
src: url('https://mythicwarsgame.com/fonts/msc/MarcellusSC.eot?#iefix') format('embedded-opentype'),
url('https://mythicwarsgame.com/fonts/msc/MarcellusSC.woff') format('woff'),
url('https://mythicwarsgame.com/fonts/msc/MarcellusSC.ttf') format('truetype'),
url('https://mythicwarsgame.com/fonts/msc/MarcellusSC.svg#marcellus_sc') format('svg');
font-weight: 400;
font-style: normal;
}
/****************************************************************************
* Palette settings (http://paletton.com)
****************************************************************************/
/* Palette URL: http://paletton.com/#uid=11J0u0kenvS54RW9DHii+r8ntmN */
/* Generated by Paletton.com © 2002-2014 */
/* As hex codes */
.color-primary-0 { color: #FEF78C } /* Main Primary color - bright golden yellow */
.color-primary-1 { color: #FFFDD7 } /* practically white */
.color-primary-2 { color: #FFFAB2 }
.color-primary-3 { color: #D8D058 }
.color-primary-4 { color: #B6AD30 } /* golden greeish */
/* As RGBa codes */
.rgba-primary-0 { color: rgba(254,247,140,1) } /* Main Primary color */
.rgba-primary-1 { color: rgba(255,253,215,1) }
.rgba-primary-2 { color: rgba(255,250,178,1) }
.rgba-primary-3 { color: rgba(216,208, 88,1) }
.rgba-primary-4 { color: rgba(182,173, 48,1) }
/****************************************************************************
* Site styles
****************************************************************************/
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
background-color: #281c1c;
background: url('/images/tile-bg.jpg');
color: #FFFDD7;
font-family: 'liberation_serif', serif;
font-size: 12pt;
line-height: 1.35em;
}
a {
border-bottom: 1px solid #91803a;
color: #fef78c;
font-weight: bold;
text-decoration: none;
transition: .3s background-color, .3s border, .3s color, .3s text-shadow;
-webkit-transition: .3s background-color, .3s border, .3s color, .3s text-shadow;
}
a:hover {
border: none;
background-color: #91803a;
color: #fffdd7;
text-shadow: .05em .05em #51471e;
}
h1 {
font-family: 'marcellus_sc', serif;
text-align: center;
}
h2 {
line-height: 1.35em;
padding-top: 1em;
text-align: center;
}
h3 {
padding: .5em;
}
p {
line-height: 1.25em;
text-align: justify;
}
.card {
font-size: 1em;
margin: 0 auto 2em;
max-width: 50em;
padding: 1em;
text-align: center;
}
.card-ability > dd {
display: inline;
margin-left: 0;
}
.card-ability > dt {
display: inline;
font-weight: bold;
margin-left: 0;
}
.card-ability > dt::after {
content: " \2014 ";
}
.card-data {
margin: 1em auto;
max-width: 30em;
width: 100%;
}
.card-element {
max-width: 1.1em;
vertical-align: middle;
}
.card-imageLink {
border: 1px solid #91803a;
display: inline-block;
padding: .25em;
line-height: 0;
margin: 0;
}
.card-imageLink:hover {
border: 1px solid #91803a;
}
.card-imageLink > .card-image {
display: inline;
padding: 0;
margin: 0;
}
.card-image {
border-radius: .7em;
margin: 1em auto;
max-width: 14em;
vertical-align: middle;
width: 100%;
}
.card-info {
display: block;
line-height: 1.35em;
}
.card-info > img {
}
.card-pantheon {
max-width: 1.1em;
vertical-align: middle;
}
.card-score {
max-width: 1.1em;
vertical-align: middle;
}
.dataBox {
text-align: left;
}
.dataBox > dd {
float: left;
margin-left: .5em;
}
.dataBox > dt {
clear: left;
float: left;
font-weight: bold;
}
.dataBox > dt:after {
content: ":";
}
.footer {
border-top: 1px solid #FFFDD7;
clear: both;
margin: 1em auto;
padding: .5em 1em;
width: 100%
}
.footer-inner {
font-size: .8em;
width: 100%
}
.footer-logo-excal-link {
float: right;
margin: 1em 0 1em 1em;
}
.footer-logo-excal-img {
height: auto;
max-width: 20em;
}
.footer-nav:before {
content:"Pages: ";
}
.footer-nav {
clear: both;
display: none;
border-top: 1px solid #B6AD30;
list-style: none;
margin-top: 1em;
padding: .5em;
}
.footer-nav li {
display: inline;
}
.footer-nav li:before {
content:" | ";
}
.footer-nav li:first-child:before {
content:"";
}
.header {
border-bottom: 1px solid #fffdd7;
padding-bottom: .5em;
}
.intro {
font-size: larger;
}
.linkButton {
color: #fef78c;
display: block;
font-family: 'Verdana', sans-serif;
margin: auto;
padding: .5em;
text-align: center;
text-decoration: none;
-webkit-transition: .3s background-color, .3s color;
transition: .3s background-color, .3s color;
}
.linkButton:hover {
background-color: #91803a;
color: #FFFDD7;
}
.linkButton-navMenu {
width: 4em;
}
.linkButton-pageMenu {
float: right;
}
.main {
margin: 0 auto;
max-width: 50em;
padding: .5em;
text-align: center;
width: 100%;
}
.main-inner {
font-size: 1.2em;
width: 100%;
}
.mwCardLink {
display: inline-block;
margin: 1em 1em;
max-width: 14em;
padding: .3em .3em .1em;
}
.mwCardThumb {
border-radius: 0.6em;
}
.navMenu {
}
.navMenu ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
.navMenu ul li {
display: inline-block;
margin: auto;
width: 100%;
}
.navMenu-logoBtn {
border: none;
display: block;
padding: .25em;
}
.navMenu-logoImg {
height: auto;
max-width: 18em;
vertical-align: middle;
width: auto;
}
.navMenu-search-fieldset {
border: none;
margin-top: .9em;
padding: 0;
}
.navMenu-title {
clear: left;
}
.navMenu-title-header {
font-size: 2em;
letter-spacing: .1em;
margin: 0;
padding: 0;
line-height: 1em;
}
.navMenu-title-link {
border: none;
display: inline-block;
margin: .6em;
padding: .5em;
text-shadow: .2em .2em #51471e;
}
.preview {
border: 1px solid #ccc;
font-size: .9em;
margin: 0 auto 2em;
max-width: 50em;
padding: 1em;
text-align: left;
}
.preview p {
margin: 0 auto;
text-align: justify;
}
.preview-element {
max-width: 1em;
vertical-align: middle;
}
.preview-imageLink {
border: none;
display: inline-block;
}
.preview-image {
border-radius: .7em;
margin: .5em;
max-width: 8em;
vertical-align: middle;
}
.preview-info {
align-items: center;
display: grid;
grid-template-columns: 1fr 3fr;
}
.preview-pantheon {
max-width: 1em;
vertical-align: middle;
}
.preview-score {
max-width: 1em;
vertical-align: middle;
}
.randomLink {
border: none;
display: inline-block;
padding: 0;
line-height: 0;
margin: 0;
}
.randomLink:hover {
border: none;
}
.randomLink > figure {
border: none;
margin: .5em 2em;
}
.randomLink > figure > figcaption {
line-height: 1.35em;
}
.randomLink > .card-image {
display: inline;
padding: 0;
margin: 0;
}
.randomLink-title {
line-height: 1.35em;
margin: .5em auto 0;
padding: 0;
}
.randomLink-wrapper {
border-bottom: 1px solid #91803a;
}
.randomWrapper {
margin-top: 0;
text-align: center;
}
.searchForm {
border: 1px solid #666;
display: block;
margin: 2em auto 1em;
max-width: 44em;
text-align: left;
width: 100%;
}
.searchForm legend {
color: #FFFDD7;
}
.searchForm ul {
list-style-type: none;
padding: 0;
}
.searchForm-controlSet {
border: none;
}
.searchForm-controlSet > legend {
position: absolute;
top: -9999px;
left: -999px;
}
.searchForm-controlSet > ul {
margin: 1em;
text-align: center;
}
.searchForm-controlSet > ul > li {
align-items: center;
display: inline;
}
.searchForm-controlSet > ul > li:not(:last-child) {
margin-bottom: 1em;
}
.searchForm-filterSet {
border: none;
}
.searchForm-filterSet > legend {
font-size: 1.5em;
}
.searchForm-filterSet > ul {
margin: 1em;
}
.searchForm-filterSet > ul > li {
align-items: center;
display: flex;
flex-wrap: wrap;
}
.searchForm-filterSet > ul > li:not(:last-child) {
margin-bottom: 1em;
}
.searchForm-filterSet > ul > li > label {
flex: 1 0 8em;
max-width: 8em;
padding-right: 1em;
text-align: right;
}
.searchForm-filterSet > ul li ul li {
align-items: center;
display: inline-block;
flex: 1 0 8em;
flex-wrap: wrap;
justify-content: space-between;
list-style-type: none;
margin: 0 .8em 0 0;
padding: 0;
}
.searchForm-filterSet > ul > li > label {
font-weight: bold;
}
.searchForm-filterSet > ul > li > label + * {
flex: 1 0 8em;
}
.searchForm-searchSet {
border: none;
margin: 1em 0;
}
.searchForm-searchSet > legend {
font-size: 1.5em;
}
.searchForm-searchSet > ul {
margin: 1em;
}
.searchForm-searchSet > ul > li {
align-items: center;
display: flex;
flex-wrap: wrap;
}
.searchForm-searchSet > ul > li:not(:last-child) {
margin-bottom: 1em;
}
.searchForm-searchSet > ul > li > label {
flex: 1 0 8em;
max-width: 8em;
padding-right: 1em;
text-align: right;
}
.searchForm-searchSet > ul li ul li {
align-items: center;
display: inline-block;
flex-wrap: wrap;
justify-content: space-between;
list-style-type: none;
margin: 0 .8em 0 0;
padding: 0;
flex: 1 0 8em;
}
.searchForm-searchSet > ul li ul li input[type="checkbox"] {
vertical-align: bottom;
}
.searchForm-searchSet > ul > li > label + * {
flex: 1 0 8em;
}
.searchForm-element {
max-width: 1.5em;
vertical-align: top;
}
.searchForm-filterNotes {
font-style: italic;
overflow-y: hidden;
max-height: 0; /* hidden unless JS is active */
text-align: center;
transition-property: all;
transition-duration: .5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.searchForm-pantheon {
max-width: 1.5em;
vertical-align: top;
}
.setLink {
font-style: italic;
}
.topLink {
display: block;
margin: 1em auto;
text-align: center;
white-space: nowrap;
width: 6em;
}
/****************************************************************************
* JS classes
****************************************************************************/
.js .js-checkToggle {
color: #fef78c;
cursor: pointer;
font-weight: bold;
text-decoration: none;
transition: .3s background-color, .3s border, .3s color;
-webkit-transition: .3s background-color, .3s border, .3s color;
}
.js .js-checkToggle {
font-weight: bold;
}
.js .js-searchForm-filterNotes {
max-height: 10em; /* just in case */
}
.js.js-hasFontsLoaded body {
font-size: 14pt;
}
/*
* Didn't use this, saving it unless I decie to use it later.
.js .js-ulToggle {
cursor: pointer;
}
.js .js-ulToggle::after {
content: ' \25BC';
font-size: .5em;
vertical-align: text-top;
}
.js .js-ulToggle-hidden ul {
display: none;
}
.js .js-ulToggle-hidden .js-ulToggle::after {
content: ' \25B2';
}
*/
/****************************************************************************
* Responsive Media Queries
****************************************************************************/
@media screen and (min-width: 30em) {
.dataBox {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(5em, 1fr));
}
.dataBox > dd {
float: none;
grid-column: auto / span 3;
margin: 0;
text-align: left;
}
.dataBox > dt {
float: none;
font-weight: bold;
margin: 0 .5em;
text-align: right;
}
}
@media screen and (min-width: 33em) {
.dataBox {
grid-template-columns: repeat(auto-fill, minmax(6em, 1fr)) ;
}
}
@media screen and (min-width: 37em) {
.dataBox {
grid-template-columns: repeat(auto-fill, minmax(7em, 1fr)) ;
}
}
@media screen and (min-width: 40em) {
.navMenu ul li {
display: block;
width: auto;
}
.navMenu ul li h1 {
white-space: nowrap;
}
.navMenu-logoBtn {
float: left;
}
.navMenu-search {
float: right;
padding: .25em;
}
}
@media screen and (min-width: 58em) {
.card-data {
grid-column: auto / span 2;
max-width: 35em;
width: auto;
}
.card-image {
display: block;
width: auto;
}
.card-info {
align-items: center;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(12em, 1fr)) ;
}
.dataBox {
grid-template-columns: repeat(auto-fill, minmax(8em, 1fr)) ;
}
}
@media screen and (min-width: 67em) {
.navMenu-title {
clear: none;
}
}
/****************************************************************************
* Helper classes
****************************************************************************/
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.pullRight{
float: right;
}
code, kbd, pre, samp {
font-size: .8em;
}
/****************************************************************************
* Print styles
****************************************************************************/
@media print {
* {
text-shadow: none !important;
color: #000 !important;
background: transparent !important;
box-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
select {
background: #FFFDD7 !important;
}
.navbar {
display: none;
}
.table td,
.table th {
background-color: #FFFDD7 !important;
}
.btn > .caret,
.dropup > .btn > .caret {
border-top-color: #000 !important;
}
.label {
border: 1px solid #000;
}
.table {
border-collapse: collapse !important;
}
.table-bordered th,
.table-bordered td {
border: 1px solid #ddd !important;
}
}