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. */
/**
CSS styles for the Twenty-Second Dynasty of Josh
**/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
/* General Styles */
html, body * {
font-family: sans-serif
}
body {
background-image: linear-gradient(to bottom, skyblue, #0f9);
-webkit-backdrop-filter: brightness(100%);
backdrop-filter: brightness(100%);
font-family: serif;
margin: 0 0;
}
/*
body {
background-image: url(https://wiki.blognomic.com/images/2/23/Seamless_stone_wall.jpg);
-webkit-backdrop-filter: brightness(30%);
backdrop-filter: brightness(30%);
font-family: serif;
color: #fff;
margin: 0 0;
}
*/
textarea, input {
color: black;
}
textarea {
font-family: monospace;
}
/* Blog Header */
.blogheader img {
border: 2px solid black;
box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
margin: 0.5em;
}
.blogheader * {
font-family: "Open Sans", sans-serif;
}
.blogheader img {
max-width: 95%;
}
/* Posts and Comments */
.post, #commentbox {
background-image: radial-gradient( circle, white 90%, #ccc);
color: #000;
border: none;
border-radius: 0px;
box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
padding: 1em 2em 2em 2em;
font-size: 18px;
}
.post-title, .post-title a {
font-family: "Open Sans", sans-serif;
font-size: 28px;
font-weight: bold;
color: #400;
}
.stickypost * {
color: black;
}
/* Specifically for the Twenty-Second Dynasty of Josh */
.post img {
max-width: 95%;
border: 1px black solid;
box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}
/* Sidebar */
#sidebar2 {
float: right;
background-color: #fff;
color: #000;
border: 1px solid black;
border-radius: 0px;
box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
padding: 1em 2em 2em 2em;
}
.hiatusbox {
color: black;
}
/* Textboxes */
blockquote {
background-color: #ffe;
border: outset 2px #999;
border-radius: 20px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
padding: 10px;
margin: 10px 0;
color: #000;
}
.adminEdit {
background-color: #999;
border: 2px solid #000;
}
.flavourtext {
background-color: #ccc;
border: outset 2px #999;
border-radius: 20px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
padding: 0.5em 1em;
font-style: italic;
}
.pendinglist {
background-color: #fff;
border: 2px solid #000;
padding: 0.5em 1em;
}
/* Links */
.expiredProposalLink, .expiredProposalLink a {
color: #e11;
font-size: 1em;
}
.newProposalLink, .newProposalLink a {
color: #17b012;
font-size: 1em;
}
.otherProposalLink, .otherProposalLink a {
color: #555;
font-size: 1em;
}
a {
color: blue;
text-decoration: none;
}
a:hover {
color: skyblue;
}
.editlink { word-wrap:normal; }
.whatisthis * {
background: #fff;
color: #000;
}
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:auto; padding:1em !important; margin:4px 5% 4px 5% !important;
border-style:none !important; font-size:0.9em; background:#ffed5f;
-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:0.3em; 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;
font-size: 1.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
----------------------------------------------- */
#commentbox h4 {
margin:1em 0;
font:normal 78%/1.6em Times,"Times New Roman",Serif;
text-transform:uppercase;
letter-spacing:.2em;
}
#commentbox 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: 2px dotted #000;
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;
}
.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% }
.post { padding: 0.1em 0.5em; }
.post blockquote { margin: 1em 0; }
}
/*
@media only screen and (max-width: 500px) {
.blogheader a img { max-width:375px;
max-height:124px;
width: auto;
height: auto; }
}
*/
