Foreground.css: Difference between revisions
Citadel LRP
(Style contents boxes) |
No edit summary |
||
(51 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
+ | /* Overall site look */ |
||
− | h1,h2,h3,h4 { |
||
+ | |||
− | font-family: Abel; |
||
+ | 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-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 |
||
} |
} |
||
+ | |||
+ | #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 { |
div.wrap { |
||
padding: 15px; |
padding: 15px; |
||
margin: auto; |
margin: auto; |
||
+ | display: table; |
||
} |
} |
||
Line 17: | Line 104: | ||
max-width: 500px; |
max-width: 500px; |
||
margin: auto; |
margin: auto; |
||
− | } |
||
− | |||
− | p { |
||
− | padding: 0.5em; |
||
} |
} |
||
div.ic { |
div.ic { |
||
text-align: justify; |
text-align: justify; |
||
+ | background-color: #2ba6cb0f; |
||
− | border: 2px solid grey; |
||
− | background-color: #191970; |
||
padding: .3em 1em; |
padding: .3em 1em; |
||
− | color: # |
+ | color: #333; |
− | font-family: |
+ | font-family: Play, sans-serif; |
− | font-size: 1.1em; |
||
font-weight: 700; |
font-weight: 700; |
||
line-height: 20px; |
line-height: 20px; |
||
Line 36: | Line 117: | ||
} |
} |
||
+ | /* Image thumbnails */ |
||
− | 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: 45px 6px 6px; |
||
− | min-height: 100vh; |
||
− | box-shadow: 0px 0px 10px 0px; |
||
− | } |
||
− | |||
− | footer { |
||
− | display: none; |
||
− | } |
||
div.thumb { |
div.thumb { |
||
− | background: # |
+ | background: #2ba6cb0f; |
padding: 0.5em; |
padding: 0.5em; |
||
font-size: 0.85em; |
font-size: 0.85em; |
||
Line 79: | Line 139: | ||
} |
} |
||
+ | .mw-content-ltr .thumbcaption { |
||
− | a { |
||
− | + | line-height: 1.4em; |
|
} |
} |
||
+ | /* Table of contents and Series boxes */ |
||
− | .toc { |
||
+ | |||
+ | .toctoggle { |
||
+ | display: none; |
||
+ | } |
||
+ | |||
+ | .toc,.categorybox { |
||
display: table; |
display: table; |
||
− | font- |
+ | font-size: 0.85em; |
border: 1px #ccc solid; |
border: 1px #ccc solid; |
||
− | background: # |
+ | background: #2ba6cb0f; |
− | padding: |
+ | padding: 0.3em 0.3em 0 0.3em; |
+ | float: right; |
||
+ | margin: 0 0 1em 1em; |
||
+ | width: 200px; |
||
+ | max-width: 18em; |
||
} |
} |
||
− | .toc |
+ | .toc #toctitle h2 { |
font-size: 1.2em; |
font-size: 1.2em; |
||
− | padding: 0; |
+ | padding-top: 0; |
+ | margin-top: 0; |
||
+ | text-align: center; |
||
+ | } |
||
+ | |||
+ | .categorybox p { |
||
+ | line-height: 1.2em; |
||
+ | padding: 0 0.2em; |
||
margin: 0; |
margin: 0; |
||
+ | font-family: Abel, sans-serif; |
||
+ | text-align: center; |
||
} |
} |
||
+ | #mw-content-text .toc ul, #mw-content-text .categorybox ul { |
||
− | .toc ul { |
||
− | list-style-type: none; |
||
list-style-image: none; |
list-style-image: none; |
||
− | margin-left: 0; |
||
padding-left: 0; |
padding-left: 0; |
||
+ | line-height: 1.4em; |
||
} |
} |
||
+ | #mw-content-text .toc ul ul, #mw-content-text .categorybox ul ul { |
||
− | .toc ul ul { |
||
− | margin: 0 0 0 |
+ | margin: 0 0 0 1em; |
+ | font-size: 90% |
||
} |
} |
||
− | .tocnumber |
+ | .tocnumber { |
− | display: |
+ | display: none; |
} |
} |
||
+ | /* Category Container */ |
||
− | .tocnumber { |
||
+ | #categories_container { |
||
− | color: #000; |
||
+ | 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;
}
}