Hi all,
after reading a few reactions and also my struggle to get things right (in
*my* opinion), I realize that it really is impossible to please everybody.
Given the fact that also I seem to be the only person not liking the old
CSS and that the new CSS is a "regression" it is much better to restore the
old CSS.
My only purpose is to make the Wiki *more* attractive and not to make it
*worse*.
@AlexB
To not further disturb the community I'd like Alex to restore the previous
CSS (which I also attach here).
BTW. no hard feelings to commenters. I hear you :)
Best wishes to all,
Arie
/* 26apr18edg
* 07aug13abu
* 30jan12jk
* (c) Software Lab. Alexander Burger
*/
/*********/
/* Utils */
.left {float: left}
.right {float: right}
.clr {clear: both}
.norm {text-align: left}
.align {text-align: right}
.center {text-align: center}
.black {color: black}
.red {color: red}
.green {color: green}
.blue {color: blue}
.bold {font-weight: bold}
.mono {font-family: monospace}
/*******************************/
/* Simple responsive container */
.container {
position: relative;
width: 86%;
display: block;
margin: 0 auto;
box-sizing: border-box;
}
@media screen and (min-width: 900px) {
.container {
max-width: 768px;
}
}
/************/
/* Defaults */
fieldset {
padding: 0.3em 0.4em 0.7em 0.8em; /* ie */
}
input, textarea, select {
font-size: smaller;
background-color: #eee;
}
body {
margin: 0;
font-family: 'Open Sans', sans-serif;
}
/**********************/
/* Headers/typography */
h1, h2, h3, h4, h5, h6 {
font-family: 'Exo';
color: #222554;
font-weight: 800;
letter-spacing: -1px;
margin-bottom: 2rem;
}
h5, h6 {
color: #bbbedd;
font-weight: 500;
}
/* adapted from skeleton.css */
h1 { font-size: 3.4rem; line-height: 1.2; }
h2 { font-size: 3.0rem; line-height: 1.25; }
h3 { font-size: 2.6rem; line-height: 1.3; }
h4 { font-size: 2.2rem; line-height: 1.35; }
h5 { font-size: 1.8rem; line-height: 1.5; }
h6 { font-size: 1.4rem; line-height: 1.6; margin-top: 0; }
/**********************/
/* Wiki document body */
#main {
font-size: 16px;
font-weight: 300;
color: #333;
}
p {
margin-top: 0; }
/* List styles */
#main > ul li {
list-style-type: square;
}
#main li {
margin-bottom: 8px;
}
#main img {
max-width: 100%;
height: auto;
}
/* Links */
a {
color: #6067af;
font-weight: 400;
text-decoration: none;
}
a:hover,
a:focus {
color: #6dc066;
text-decoration: underline;
}
/* Larger fonts for larger screens */
@media screen and (min-width: 900px) {
#main { font-size: 18px; }
h1 { font-size: 3.6rem; }
h2 { font-size: 3.2rem; }
h3 { font-size: 2.8rem; }
h4 { font-size: 2.4rem; }
h5 { font-size: 2.0rem; }
h6 { font-size: 1.6rem; }
}
/********/
/* Menu */
#menu {
background: #090910;
width: 100%;
margin-bottom: 64px;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
align-items: center;
-webkit-align-items: center;
justify-content: space-around;
-webkit-justify-content: space-around;
}
/* Logo (homepage link) */
#menu a img {
max-width: 100%;
height: auto;
padding: 12px;
}
/* Menu links */
#menu a {
color: #8c8faf;
text-decoration: none;
text-transform: uppercase;
}
#menu a:hover,
#menu a:focus {
color: #6dc066;
border: none;
}
/* Remove phantom margin/padding */
#menu ul {
margin: initial;
padding: initial;
}
#menu ul li {
list-style: none;
margin: 12px;
padding: none;
}
#menuLogin a {
margin: 12px;
}
/* display "Downloads Documentation Community" inline
* on larger screens */
@media screen and (min-width: 1000px) {
#menu ul {
display: inline-flex;
}
}
/********************/
/* Wiki text search */
#searchGrp {
margin: 8px;
}
#searchGrp form {
margin: 0;
}
#searchGrp input,
#searchGrp .submit {
border-radius: 1px;
padding: 4px;
margin: 4px;
}
#searchGrp input {
background-color: white;
border: 2px solid white;
}
#searchGrp .submit {
background-color: #090910;
border: 2px solid #8c8faf;
color: #8c8faf;
text-transform: uppercase;
}
#searchGrp .submit:hover {
border-color: #6dc066;
color: #6dc066;
}
#searchGrp .submit:active {
color: #090910;
background-color: #6dc066;
}
/* Search Results */
#searchGrp strong {
color: #6dc066; /* PL green */
}
#searchGrp strong,
#searchGrp a {
margin-left: 22px;
text-transform: none;
}
/* Make search pretty on large screens */
@media screen and (min-width: 1400px) {
#searchGrp {
max-height: 66px;
max-width: 300px;
}
/* darker links against white bg */
#searchGrp a {
color: #6067af;
}
}
#expires {
position: absolute;
top: 8px;
right: 44px;
color: #f05658;
font-size: small;
}
/* Code highlighting */
.code {
color: black;
font-size: smaller;
font-family: 'Share Tech Mono', monospace;
background-color: #dddeee;
border-left-color: #6067af;
border-left-style: solid;
border-left-width: 3px;
border-radius: 1px;
padding: 1px 2px;
margin-right: 1px;
overflow-x: auto;
}
.search {
border-style: none;
}
/**********************************/
/* Wiki document login/edit forms */
.edit, .login {
background-color: #F0F0F0;
border-radius: 1px;
border: 2px solid #8c8faf;
}
/* Buttons for login/edit forms */
.edit .submit,
.login .submit {
font-weight: bold;
background-color: #D0D0D0;
background-image: -moz-linear-gradient(top, #eee, #ccc);
background-image: -webkit-linear-gradient(top, #eee, #ccc);
background-image: linear-gradient(top, #eee, #ccc);
border: 1px solid #777;
border-radius: .3em;
box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}
.edit .submit:hover,
.login .submit:hover {
background-image: -moz-linear-gradient(top, #fafafa, #ddd);
background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
background-image: linear-gradient(top, #fafafa, #ddd);
}
.edit .submit:active,
.login .submit:active {
box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
position: relative;
top: 1px;
}
/* From 'form' GUI */
.chart {
width: 100%;
white-space: nowrap;
}
.chart td {
background-color: #E0E0E0;
}
.chart td.T {
background-color: #D0D0D0;
}
.chart td.nil {
background-color: white;
}
.btn {
width: 1em;
}
/* Errors */
.error {
color: red;
background-color: yellow;
}
.tiny {
font-size: xx-small;
padding: 1px;
}
.note, .ask {
font-weight: bold;
}
.alert {
display: inline;
padding: 1ex;
margin: 1ex 0 1ex 5em;
background-color: yellow;
border: dashed thin;
}
.alert input {
margin-top: 1ex;
}
.dialog {
padding: 1ex;
margin: 1ex 5em 1ex 1em;
border: dashed thin;
background-color: #F0F0F0;
}
.hint {
font-size: small;
font-family: sans-serif;
line-height: 140%;
background-color: rgba(112,112,112,0.3);
}
.hints {
font-size: small;
color: black;
padding-left: 0.4em;
padding-top: 2px;
padding-bottom: 2px;
border: 1px solid;
background-color: white;
cursor: default;
}
