Foreground.css: Difference between revisions
Citadel LRP
No edit summary |
No edit summary |
||
(41 intermediate revisions by the same user not shown) | |||
Line 5: | Line 5: | ||
background-position: 0% 30%; |
background-position: 0% 30%; |
||
background-size:180vw; |
background-size:180vw; |
||
− | background-image: url( |
+ | background-image: url(http://citadel.camlarp.co.uk/w/images/5/59/38338630751_7851c952eb_o_smaller.jpg); |
background-color: #69674f; |
background-color: #69674f; |
||
} |
} |
||
Line 15: | Line 15: | ||
background: white; |
background: white; |
||
margin: -45px auto; |
margin: -45px auto; |
||
− | padding: |
+ | padding: 105px 6px 6px; |
min-height: 100vh; |
min-height: 100vh; |
||
box-shadow: 0px 0px 10px 0px; |
box-shadow: 0px 0px 10px 0px; |
||
+ | } |
||
+ | |||
+ | .postedit-container { |
||
+ | margin-top: 45px; |
||
} |
} |
||
Line 24: | Line 28: | ||
} |
} |
||
− | h1,h2,h3,h4 { |
+ | h1,h2,h3,h4,h5,h6 { |
− | font-family: Abel; |
+ | font-family: Abel, sans-serif; |
margin-top: 0.5em; |
margin-top: 0.5em; |
||
margin-bottom: 0.2em; |
margin-bottom: 0.2em; |
||
} |
} |
||
− | h1 span, h2 span, h3 span, h4 span { |
+ | h1 span, h2 span, h3 span, h4 span, h5 span, h6 span { |
display: inline |
display: inline |
||
+ | } |
||
+ | |||
⚫ | |||
+ | margin-top: 0; |
||
} |
} |
||
Line 39: | Line 47: | ||
a { |
a { |
||
− | color: # |
+ | color: #008970; |
+ | } |
||
+ | |||
+ | table { |
||
+ | width: auto; |
||
+ | } |
||
+ | |||
+ | /* Top bar */ |
||
+ | |||
+ | .top-bar { |
||
+ | position: fixed; |
||
+ | width: 100%; |
||
+ | top: 0; |
||
+ | width: 100%; |
||
+ | z-index: 10000; |
||
} |
} |
||
.top-bar .name h1 { |
.top-bar .name h1 { |
||
font-size: 1.7em |
font-size: 1.7em |
||
+ | } |
||
+ | |||
+ | .top-bar .name h1 a:hover { |
||
+ | text-shadow: 0px 0px 10px white; |
||
+ | } |
||
+ | |||
+ | .top-bar li.hover>a { |
||
+ | text-shadow: 0px 0px 10px #f7ffff; |
||
} |
} |
||
Line 51: | Line 81: | ||
font-size: 3em; |
font-size: 3em; |
||
border-bottom: 1px black solid; |
border-bottom: 1px black solid; |
||
− | text-shadow: 3px |
+ | text-shadow: 3px 0px 0px white, -3px 0px 0px white,5px 0px 0px white, -5px 0px 0px white; |
+ | padding-right: 2em; |
||
+ | } |
||
+ | |||
+ | h3#tagline { |
||
+ | text-align: right; |
||
+ | margin-top: -1.7em; |
||
⚫ | |||
+ | font-family: Play; |
||
+ | padding-bottom: 0.8em; |
||
} |
} |
||
Line 59: | Line 98: | ||
padding: 15px; |
padding: 15px; |
||
margin: auto; |
margin: auto; |
||
+ | display: table; |
||
} |
} |
||
Line 68: | Line 108: | ||
div.ic { |
div.ic { |
||
text-align: justify; |
text-align: justify; |
||
⚫ | |||
− | border: 2px solid grey; |
||
⚫ | |||
padding: .3em 1em; |
padding: .3em 1em; |
||
− | color: # |
+ | color: #333; |
− | font-family: |
+ | font-family: Play, sans-serif; |
⚫ | |||
font-weight: 700; |
font-weight: 700; |
||
line-height: 20px; |
line-height: 20px; |
||
Line 82: | Line 120: | ||
div.thumb { |
div.thumb { |
||
− | background: # |
+ | background: #2ba6cb0f; |
padding: 0.5em; |
padding: 0.5em; |
||
font-size: 0.85em; |
font-size: 0.85em; |
||
Line 101: | Line 139: | ||
} |
} |
||
+ | .mw-content-ltr .thumbcaption { |
||
⚫ | |||
+ | line-height: 1.4em; |
||
+ | } |
||
+ | |||
⚫ | |||
.toctoggle { |
.toctoggle { |
||
Line 107: | Line 149: | ||
} |
} |
||
− | .toc { |
+ | .toc,.categorybox { |
display: table; |
display: table; |
||
− | font- |
+ | font-size: 0.85em; |
border: 1px #ccc solid; |
border: 1px #ccc solid; |
||
− | background: # |
+ | background: #2ba6cb0f; |
− | padding: 0. |
+ | padding: 0.3em 0.3em 0 0.3em; |
float: right; |
float: right; |
||
margin: 0 0 1em 1em; |
margin: 0 0 1em 1em; |
||
+ | width: 200px; |
||
max-width: 18em; |
max-width: 18em; |
||
} |
} |
||
Line 125: | Line 168: | ||
} |
} |
||
+ | .categorybox p { |
||
⚫ | |||
+ | line-height: 1.2em; |
||
+ | padding: 0 0.2em; |
||
+ | margin: 0; |
||
+ | font-family: Abel, sans-serif; |
||
+ | text-align: center; |
||
+ | } |
||
+ | |||
+ | #mw-content-text .toc ul, #mw-content-text .categorybox ul { |
||
list-style-image: none; |
list-style-image: none; |
||
padding-left: 0; |
padding-left: 0; |
||
Line 131: | Line 182: | ||
} |
} |
||
− | #mw-content-text .toc ul ul { |
+ | #mw-content-text .toc ul ul, #mw-content-text .categorybox ul ul { |
margin: 0 0 0 1em; |
margin: 0 0 0 1em; |
||
+ | font-size: 90% |
||
} |
} |
||
.tocnumber { |
.tocnumber { |
||
display: none; |
display: none; |
||
+ | } |
||
+ | |||
+ | /* Category Container */ |
||
+ | #categories_container { |
||
+ | width: 200px; |
||
+ | max-width: 30vw; |
||
+ | float: right; |
||
+ | margin-left: 16px; |
||
+ | } |
||
+ | |||
+ | @media only screen and (max-width:600px) { |
||
+ | #categories_container, .toc,.categorybox { |
||
+ | width: 10em; |
||
+ | font-size: 0.9em; |
||
+ | } |
||
} |
} |
Latest revision as of 11:26, 20 September 2018
/* Overall site look */
body {
background-attachment: fixed;
background-position: 0% 30%;
background-size:180vw;
background-image: url(http://citadel.camlarp.co.uk/w/images/5/59/38338630751_7851c952eb_o_smaller.jpg);
background-color: #69674f;
}
#page-content {
width: 800px;
min-width: 70%;
max-width: 100%;
background: white;
margin: -45px auto;
padding: 105px 6px 6px;
min-height: 100vh;
box-shadow: 0px 0px 10px 0px;
}
.postedit-container {
margin-top: 45px;
}
footer {
display: none;
}
h1,h2,h3,h4,h5,h6 {
font-family: Abel, sans-serif;
margin-top: 0.5em;
margin-bottom: 0.2em;
}
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {
display: inline
}
#mw-content-text h3:first-of-type {
margin-top: 0;
}
p {
padding: 0.5em;
}
a {
color: #008970;
}
table {
width: auto;
}
/* Top bar */
.top-bar {
position: fixed;
width: 100%;
top: 0;
width: 100%;
z-index: 10000;
}
.top-bar .name h1 {
font-size: 1.7em
}
.top-bar .name h1 a:hover {
text-shadow: 0px 0px 10px white;
}
.top-bar li.hover>a {
text-shadow: 0px 0px 10px #f7ffff;
}
/* Page titles */
h2.title {
font-size: 3em;
border-bottom: 1px black solid;
text-shadow: 3px 0px 0px white, -3px 0px 0px white,5px 0px 0px white, -5px 0px 0px white;
padding-right: 2em;
}
h3#tagline {
text-align: right;
margin-top: -1.7em;
font-style: normal;
font-family: Play;
padding-bottom: 0.8em;
}
/* IC content boxes */
div.wrap {
padding: 15px;
margin: auto;
display: table;
}
div.small {
max-width: 500px;
margin: auto;
}
div.ic {
text-align: justify;
background-color: #2ba6cb0f;
padding: .3em 1em;
color: #333;
font-family: Play, sans-serif;
font-weight: 700;
line-height: 20px;
margin: 1em 0;
}
/* Image thumbnails */
div.thumb {
background: #2ba6cb0f;
padding: 0.5em;
font-size: 0.85em;
border: 1px #ccc solid;
color: #333;
}
div.tright {
margin-left: 1em;
}
div.tleft {
margin-right: 1em;
}
div.thumb div.thumbinner img {
border: 1px #ccc solid;
}
.mw-content-ltr .thumbcaption {
line-height: 1.4em;
}
/* Table of contents and Series boxes */
.toctoggle {
display: none;
}
.toc,.categorybox {
display: table;
font-size: 0.85em;
border: 1px #ccc solid;
background: #2ba6cb0f;
padding: 0.3em 0.3em 0 0.3em;
float: right;
margin: 0 0 1em 1em;
width: 200px;
max-width: 18em;
}
.toc #toctitle h2 {
font-size: 1.2em;
padding-top: 0;
margin-top: 0;
text-align: center;
}
.categorybox p {
line-height: 1.2em;
padding: 0 0.2em;
margin: 0;
font-family: Abel, sans-serif;
text-align: center;
}
#mw-content-text .toc ul, #mw-content-text .categorybox ul {
list-style-image: none;
padding-left: 0;
line-height: 1.4em;
}
#mw-content-text .toc ul ul, #mw-content-text .categorybox ul ul {
margin: 0 0 0 1em;
font-size: 90%
}
.tocnumber {
display: none;
}
/* Category Container */
#categories_container {
width: 200px;
max-width: 30vw;
float: right;
margin-left: 16px;
}
@media only screen and (max-width:600px) {
#categories_container, .toc,.categorybox {
width: 10em;
font-size: 0.9em;
}
}