Stylesheet template backup
Jump to navigation
Jump to search
This is a periodic backup of the blog's "blognomic/stylesheet" CSS template, so that we can restore parts of earlier versions if required, and see whether anything has been changed or lost over time. This page was started after noticing that the "revision history" within ExpressionEngine only goes back a couple of dozen revisions.
/* Styles that tend to change from dynasty to dynasty are grouped at the top here. */
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
body {
background-image: url('https://wiki.blognomic.com/images/d/d5/Seamless_wood_planks.jpg?x');
background-repeat: repeat;
background-color: #e70;
font-family: "Verdana", sans-serif;
color: #222;
}
.dynastic-banner { border-radius: 1em; }
.blogheader h1, .blogheader h3 {
font-family:monospace;
color: #222;
filter: drop-shadow(0px 0px 5px #fff);
}
.blogheader { image: margin:32px; } /* when not an image: margin:32px; -- when an image: text-align: left; margin:8px;*/
.blogheader a:link { background-color: transparent; display: block; }
.blogheader a img { display: block; margin: 0 auto; }
h1 {
font-family: "Oswald", sans-serif;
color: #000;
font-size: 3.0em;
padding: 0px;
margin: 0px;
font-weight: bold;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #222;
}
h2 { margin:0px; padding:0px; }
h3 { font-family: sans-serif; line-height:1; }
.comment h3, .hiatushead { font-family:serif }
.pronoun { opacity: 0.5; transition: opacity 0.3s; text-transform: uppercase; }
.pronoun:hover { opacity: 0.8; }
.emperortag { opacity: 0.7; transition: opacity 0.3s; }
.emperortag:hover { opacity: 1; }
a, a:link {
color: white;
}
a:visited {
color: purple;
}
a img {
border-width:0;
}
a { word-wrap:break-word; }
.editlink { word-wrap:normal; }
.pendinglist {
background-color: rgb(222,222,222);
border:3px inset #222;
border-radius:10px;
color:#333;
padding:8px;
}
.expiredProposalLink, .expiredProposalLink a {
color: #e11;
}
.newProposalLink, .newProposalLink a {
color: #17b012;
}
.otherProposalLink, .otherProposalLink a {
color: #421;
}
img {
max-width: 100%; height: auto;
}
.post, #comments /* additional markup for Jumble III */
{background: #cea263de;
padding: 1em 2em 2em 2em;
border: 4px outset #ffc575 !important;}
#sidebar2 /* additional markup for Jumble III */
{background: #cea263de;
padding: 0.5em;
border: 4px outset #ffc575 !important;}
@media only screen and (max-width: 750px) /* additional markup for Jumble III */
{
.post, #comments, #sidebar2 { padding:0em 1em; }
.post blockquote { margin:1.0em 0em; }
body { background-size: 800px; }
}
.post-title, .post-title a {
font-family:"Oswald", sans-serif;
font-weight: bold;
font-size:1.3em;
color:#222;
}
.flavourtext {
background: #f7cb8c6b;
border: 2px inset #ffc575 !important;
color:#222;
font-family: sans-serif;
font-style: italic;
font-size:1.1em;
border: 3px #000 solid;
padding:1em 2em;
}
.post blockquote {
background: #fff;
border: 1px #222 solid;
color: #000;
filter: none;
padding:1em 2em;
}
.post blockquote a:link {
color: #421;
}
.post blockquote a:visited {
color: #421;
}
a {
color: #222;
}
/*
quote shading:
-webkit-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);;
*/
p.post-footer { }
/* Make sure to update the color and background-color when you make changes to <hr>. IE uses one, and the rest of the sensible world uses the other. This code blocks the HR bar, which is wonky under CSS, with a 5px bar the same color as the background. We then make the bottom border behave nicely. --AG*/
hr { color: #aaa;
background-color: #aaa;
border-style:none;
/*border-bottom:1px solid #fff; */
height: 1px;}
/* BlogNomic custom CSS: */
.stickyheader { display: none; }
.stickypost { color:#000 !important; width:90%; padding:4px 12px !important; margin:4px 5% 4px 5% !important;
border-style:none !important; font-size:0.9em; background:#aaa;
-webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px;
-webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.5);;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.5);; }
.stickypost h3 { margin:2px; padding:0px; font-size:1.2em; font-weight:normal; overflow:hidden}
.stickypost a { color:#000 !important }
.stickybody { display:none; }
.stickycount { font-size:0.7em; font-style:italic; color:#664 }
.opensticky { float:right; }
.closesticky { float:right; display:none; }
.archive .stickybody { display:block !important; }
.archive .opensticky { display:none !important; }
.archive .stickyfade { display:none !important; }
.stickyfade { font-size:0.7em; font-weight:normal;
background-image: linear-gradient(90deg,#000000 0%,rgba(0,0,0,0));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;white-space: nowrap;max-width:40%;overflow:hidden;
position:relative; }
.whatisthis { border:8px solid #f00; padding:1em 2em; margin:0px 0px 2em 0px; color:#000; background:#fff; border-radius: 0.9em; }
.whatisthis a { color:#c00 }
.whatisthis h3 { text-align:center }
#powered-by { font-size:0.8em; text-align:right }
/* Past dynasties */
.tarot { width:200px; }
.reversed { -webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);-o-transform: rotate(180deg);-ms-transform: rotate(180deg);
transform: rotate(180deg);
filter: progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, DX=0, DY=0, SizingMethod='auto expand'); }
@media only screen and (max-width: 750px) { .tarot { width:100px; } }
/* Header
----------------------------------------------- */
#header {
text-align:center;
margin:0 auto 10px;
}
#blog-title {
margin:5px 5px 0;
padding:0px;
border:0px;
border-width:1px 1px 0;
font: xx-large Trebuchet,Times New Roman,Verdana,Sans-serif;
font-weight: bold;
color:#c00;
letter-spacing:.2em;
}
#blog-title a {
text-decoration:none;
}
#description {
margin:0 5px 5px;
padding:0px;
border:0px;
border-width:0 1px 1px;
font-family: Trebuchet,Times New Roman,Verdana,Sans-serif;
font-weight: normal;
letter-spacing:.2em;
color:#c00;
}
/* Content
----------------------------------------------- */
#content {
width:95%;
margin:0 auto;
text-align:left;
min-width:640px;
}
#main {
width:70%;
float:left;
padding-right:1em;
border:1px solid none;
border-width:1px 1px 0;
}
#sidebar {
width:25%;
float:right;
padding-left:1em;
padding-right:0.2em;
}
/* Headings
----------------------------------------------- */
h2 {
margin:1.5em 0 .75em;
font-size:0.8em;
letter-spacing:.2em;
}
/* Posts
----------------------------------------------- */
.date-header {
margin:1.5em 0 0em;
}
.post {
margin:.5em 0 1.5em;
border-bottom:2px dashed;
padding-bottom:1.5em;
overflow-wrap: break-word;
}
.post:not(.stickypost) {
margin:1.5em 0 1.5em;
}
.post-title a {
text-decoration:none;
text-transform:none;
}
.post div {
margin:0 0 .75em;
line-height:1.6em;
}
p.post-footer {
margin:-.25em 0 0;
}
.post-footer em, .comment-link {
font:Times,"Times New Roman",serif;
text-transform:uppercase;
letter-spacing:.1em;
}
.post-footer em {
font-weight:bold;
margin-right:.6em;
}
.comment-link {
margin-left:.6em;
}
.post img {
padding:4px;
}
.post blockquote p {
margin:.75em 0;
}
/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font:normal 78%/1.6em Times,"Times New Roman",Serif;
text-transform:uppercase;
letter-spacing:.2em;
}
#comments h4 strong {
font-family:Times, "Times New Roman", serif;
font-size:130%;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block dt {
font-family:Times, "Times New Roman", serif;
margin:.5em 0;
}
#comments-block dd {
font-family:Times, "Times New Roman", serif;
margin:.25em 0 0;
}
#comments-block dd.comment-timestamp {
margin:-.25em 0 2em;
font:78%/1.4em Trebuchet,Times New Roman,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
color:#bcd;
}
#comments-block dd p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
.pronoun {
font-family: Montserrat, sans-serif;
color: white;
text-transform: uppercase;
padding: 0.2em;
border-radius: 0.4em;
background: #990099;
font-size: 0.6em;
font-weight: bold;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: inline-block;
position: relative;
bottom: 0.2em;
}
.pronoun.hehim {
background: #000099
}
.pronoun.sheher {
background: #990000
}
.pronoun.hethey {
background: linear-gradient(90deg, #000099, #990099);
}
.pronoun.shethey {
background: linear-gradient(90deg, #990099, #990000)
}
.emperortag {
font-family: Montserrat, sans-serif;
color: white;
text-transform: uppercase;
padding: 0.2em;
border-radius: 0.4em;
background: linear-gradient(90deg, red 50%, green 50%);
font-size: 0.6em;
font-weight: bold;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: inline-block;
position: relative;
bottom: 0.2em;
}
/* Sidebar Content
----------------------------------------------- */
#sidebar ul {
margin:0 0 1.5em;
padding:0 0 1.5em;
border-bottom:1px dotted #4a4;
list-style:none;
}
#sidebar li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
}
#sidebar p {
line-height:1.5em;
}
#sidebar hr {border:1px dotted #333}
/* Hiatus Box
----------------------------------------------- */
.hiatusbox {
border-width: 46px;
font-size: 1.2em;
color: black;
border-style:solid;
-moz-border-image: url('https://wiki.blognomic.com/images/7/7a/HiatusBack.png') 46 fill stretch;
border-image: url('https://wiki.blognomic.com/images/7/7a/HiatusBack.png') 46 fill stretch;
text-align: center
}
@media (max-width: 1080px) and (min-width: 750px) {
.hiatusbox {
border-width: 23px;
}
}
@media (max-width: 300px) {
.hiatusbox {
border-width: 23px;
}
}
/* Profile
----------------------------------------------- */
#profile-container {
margin:0 0 1.5em;
border-bottom:1px dotted #339;
padding-bottom:1.5em;
}
.profile-datablock {
margin:.5em 0 .5em;
}
.profile-img {
display:inline;
}
.profile-img img {
float:left;
padding:4px;
border:1px solid #339;
margin:0 8px 3px 0;
}
.profile-data {
margin:0;
font:normal 78%/1.6em Times New Roman,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
.profile-data strong {
display:none;
}
.profile-textblock {
margin:0 0 .5em;
}
.profile-link {
margin:0;
font:78%/1.4em Times New Roman,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
}
#footer hr {
display:none;
}
#footer p {
margin:0;
padding-top:15px;
font:78%/1.6em Trebuchet,Times New Roman,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
/* BlogNomic-specific bits
----------------------------------------------- */
#PlayerList a {display: block;}
.admin {font-weight: bold;}
.idleplayers {font-size:x-small;}
dt {font-weight: normal;margin: 0;font-size: 1.1em;}
dd a {font-weight: normal;}
dd {margin: 0 0 0 2em;}
* html #recently {
height: 15em;
overflow: auto;
}
html>body #recently {
max-height: 15em;
overflow: auto;
}
* html #archive-list {
height: 10em;
overflow: auto;
}
html>body #archive-list {
max-height: 15em;
overflow: auto;
}
* html #proposal-list {
height: 2em;
overflow: auto;
}
html>body #proposal-list {
max-height: 15em;
overflow: auto;
}
* html #cfj-list {
height: 4em;
overflow: auto;
}
html>body #cfj-list {
max-height: 15em;
overflow: auto;
}
* html #dov-list {
height: 4em;
overflow: auto;
}
html>body #dov-list {
max-height: 15em;
overflow: auto;
}
.tooltext
{
width:100%;
}
.tooltext *
{
width:100%;
font-family: Times New Roman,Verdana,Sans-serif;
font-size: x-small;
}
img.admin {
margin: 0.7ex 0 0.7ex 0;
}
/* .postStatus {
float: left;
margin: 1ex 0 1ex 0; 4
} */
p.post-footer {
clear: both;
margin-top: 0ex;
}
.proposalage{
font-size: 75%;
font-style: italic;
display: block;
margin: -0.5ex 0px -0.5ex 1em;
}
.proposalage a {
color: inherit;
text-decoration: inherit;
}
.proposalage a:hover {
color: inherit;
opacity: 0.9;
}
.proposalage a:visited {
color: inherit;
}
div.adminEdit {
margin: 2ex 0 0 0;
padding: 0.5em 1em 0.5em 1em;
font-size: 90%;
background-color: #eee;
color: #000;
border: solid 2px #aaa;
font-weight: bold;
}
.adminEdit p {
margin: 1ex 0;
}
a.editlink {
font-size: 70%;
text-decoration: underline;
display: block;
width: 2em;
height: 2ex;
margin: -5ex 5px 0ex;
float: right;
}
a.editlink:link {
text-transform: uppercase;
}
a.editlink:visited {
text-transform: uppercase;
}
a.editlink:hover,
a.editlink:active {
text-transform: uppercase;
}
.comment {
margin: 0;
}
.comment h3 {
margin-bottom: 0;
}
.commentdate {
margin: 0 0 0 1em;
font-size: 90%;
font-style: italic;
}
.commentbody {
margin: 0 0 0 1em;
}
.proposal, .dov, .cfj, .amendment, .votablematter, .deliberation {
min-height: 22px;
padding: 0 0 0 32px;
}
.Enacted {
background: url(/images/vote/for.gif) left no-repeat;
}
.open {
background: url(/images/vote/open.gif) left no-repeat;
}
.Failed {
background: url(/images/vote/against.gif) left no-repeat;
}
.Vetoed {
background: url(/images/vote/seal.gif) left no-repeat;
}
.Illegal {
background: url(/images/vote/illegal.gif) left no-repeat;
}
.cfj.open {
background: url(/images/vote/cfj.gif) left no-repeat;
}
.dov.open {
background: url(/images/vote/dov.gif) left no-repeat;
}
ins {
text-decoration: underline;
color: #000;
}
del {
text-decoration: line-through;
color: #000;
}
.flavor {
font-size:0.9em;
font-style: italic;
}
#commentformfields a {
margin: 2px;
}
.ircbox { border:1px solid #000; }
.ircsubject { background:#055; margin:0px; padding:4px; color:#eee; font-size:0.7em; font-weight:bold }
.irctalking { background:#055; padding:4px; margin:0px; color:#eee; font-size:0.8em; }
font { display:inline }
@media only screen and (max-width: 750px) {
body {
min-width: 0px;
}
#content {
min-width: 0px;
}
#main {
float: none;
width: 100%;
padding-left: 0px;
padding-right: 0px;
min-width: 0px;
}
#sidebar {
float: none;
width: 100%;
padding-left: 0px;
padding-right: 0px;
}
#footer { width:100% }
#main2 > h2 {
display: none;
}
#frontpage > h2 {
display: none;
}
#frontpage > .post:nth-of-type(n+11) {
display: none;
}
h1 { font-size:3.0em; }
textarea { width:100% }
}
@media only screen and (max-width: 500px) {
.blogheader a img { max-width:375px;
max-height:124px;
width: auto;
height: auto; }
}
