mirror of
https://github.com/moparisthebest/xeps
synced 2024-11-24 18:22:24 -05:00
Re-Style Iteration 1: CSS rework, some semantic stuff
This commit is contained in:
Jonas Schäfer
parent
3ea8b92714
commit
39199b23d8
663
xmpp.v2.css
Normal file
663
xmpp.v2.css
Normal file
@ -0,0 +1,663 @@
|
||||
/**
|
||||
* "Yet Another Multicolumn Layout" - YAML CSS Framework
|
||||
*
|
||||
* (en) Uniform design of standard content elements
|
||||
* (de) Einheitliche Standardformatierungen für die wichtigten Inhalts-Elemente
|
||||
*
|
||||
* @copyright © 2005-2013, Dirk Jesse
|
||||
* @license CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
|
||||
* YAML-CDL (http://www.yaml.de/license.html)
|
||||
* @link http://www.yaml.de
|
||||
* @package yaml
|
||||
* @version 4.1.2
|
||||
*/
|
||||
@media all {
|
||||
/*
|
||||
* @section global typography settings
|
||||
*
|
||||
* vertical rhythm settings (based on em-unit)
|
||||
* -------------------------------------------
|
||||
* basefont-size: 14px (87.5%)
|
||||
* line-height : 21px (factor: 1.5) */
|
||||
/* (en) reset font size for all elements to standard (16 Pixel) */
|
||||
/* (de) Alle Schriftgrößen auf Standardgröße (16 Pixel) zurücksetzen */
|
||||
html * {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
/**
|
||||
* (en) reset monospaced elements to font size 16px in all browsers
|
||||
* (de) Schriftgröße von monospaced Elemente in allen Browsern auf 16 Pixel setzen
|
||||
*
|
||||
* @see: http://webkit.org/blog/67/strange-medium/
|
||||
*/
|
||||
textarea,
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp,
|
||||
var,
|
||||
tt {
|
||||
font-family: Consolas, "Lucida Console", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier;
|
||||
}
|
||||
|
||||
/* font-size: 14px; */
|
||||
body {
|
||||
font-family: "Droid Serif", Georgia, "Times New Roman", Times, serif;
|
||||
font-size: 87.5%;
|
||||
color: #444444;
|
||||
}
|
||||
|
||||
/*--- Headings | Überschriften ------------------------------------------------------------------------*/
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: "Droid Sans", Arial, Helvetica, sans-serif;
|
||||
font-weight: 400;
|
||||
color: #161e21;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
/* font-size: 48px; */
|
||||
font-size: 342.85714%;
|
||||
line-height: 0.875;
|
||||
margin: 0 0 0.4375em 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
/* font-size: 32px; */
|
||||
font-size: 228.57143%;
|
||||
line-height: 1.3125;
|
||||
margin: 0 0 0.65625em 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
/* font-size: 24px; */
|
||||
font-size: 171.42857%;
|
||||
line-height: 0.875;
|
||||
margin: 0 0 0.875em 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
/* font-size: 21px; */
|
||||
font-size: 150%;
|
||||
line-height: 1;
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
|
||||
h5 {
|
||||
/* font-size: 18px; */
|
||||
font-size: 128.57143%;
|
||||
line-height: 1.16667;
|
||||
margin: 0 0 1.16667em 0;
|
||||
}
|
||||
|
||||
h6 {
|
||||
/* font-size: 14px; */
|
||||
font-size: 100%;
|
||||
font-weight: bold;
|
||||
line-height: 1.5;
|
||||
margin: 0 0 1.5em 0;
|
||||
}
|
||||
|
||||
/* --- Lists | Listen -------------------------------------------------------------------------------- */
|
||||
ul,
|
||||
ol,
|
||||
dl {
|
||||
font-size: 100%;
|
||||
line-height: 1.5;
|
||||
margin: 0 0 1.5em 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
ul ul {
|
||||
list-style-type: circle;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
ol ol {
|
||||
list-style-type: lower-latin;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
ol ul {
|
||||
list-style-type: circle;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: 100%;
|
||||
line-height: 1.5;
|
||||
margin-left: 1.2em;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin: 0 0 1.5em 0.8em;
|
||||
}
|
||||
|
||||
/* --- general text formatting | Allgemeine Textauszeichnung ------------------------------------------ */
|
||||
p {
|
||||
font-size: 100%;
|
||||
line-height: 1.5;
|
||||
margin: 0 0 1.5em 0;
|
||||
}
|
||||
|
||||
blockquote,
|
||||
cite,
|
||||
q {
|
||||
font-family: "Droid Serif", Georgia, "Times New Roman", Times, serif;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
background: transparent;
|
||||
color: #666666;
|
||||
margin: 1.5em 0 0 1.5em;
|
||||
}
|
||||
|
||||
strong,
|
||||
b {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
em,
|
||||
i {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
big {
|
||||
/* font-size: 16px; */
|
||||
font-size: 114.28571%;
|
||||
line-height: 1.3125;
|
||||
}
|
||||
|
||||
small {
|
||||
/* font-size: 12px; */
|
||||
font-size: 85.71429%;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
tt,
|
||||
samp,
|
||||
var {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-size: 100%;
|
||||
line-height: 1.5;
|
||||
margin: 0 0 1.5em 0;
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
pre,
|
||||
code {
|
||||
color: #880000;
|
||||
}
|
||||
|
||||
kbd,
|
||||
samp,
|
||||
var,
|
||||
tt {
|
||||
color: #666666;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
var,
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
acronym,
|
||||
abbr {
|
||||
border-bottom: 1px #aaa dotted;
|
||||
font-variant: small-caps;
|
||||
letter-spacing: .07em;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
mark {
|
||||
background: yellow;
|
||||
color: black;
|
||||
}
|
||||
|
||||
hr {
|
||||
color: #fff;
|
||||
background: transparent;
|
||||
margin: 0 0 0.75em 0;
|
||||
padding: 0 0 0.67857em 0;
|
||||
border: 0;
|
||||
border-bottom: 1px #eeeeee solid;
|
||||
}
|
||||
|
||||
/*--- Links ----------------------------------------------------------------------------------------- */
|
||||
a {
|
||||
color: #4d87c7;
|
||||
background: transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* (en) maximum constrast for tab focus - change with great care */
|
||||
/* (en) Maximaler Kontrast für Tab Focus - Ändern Sie diese Regel mit Bedacht */
|
||||
a:hover,
|
||||
a:focus {
|
||||
background-color: #4d87c7;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* --- images ------------------ */
|
||||
img,
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.flexible {
|
||||
margin-bottom: 1.5em;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* IE6 workaround - 2% space for possible borders */
|
||||
* html .flexible {
|
||||
width: 98%;
|
||||
}
|
||||
|
||||
.bordered {
|
||||
margin-bottom: 1.5em;
|
||||
border: 2px #eee solid;
|
||||
border: 2px white solid;
|
||||
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
|
||||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
/**
|
||||
* ----------------------------------------------------------------------- #
|
||||
*
|
||||
* Generic Content Classes
|
||||
*
|
||||
* (en) standard classes for positioning and highlighting
|
||||
* (de) Standardklassen zur Positionierung und Hervorhebung
|
||||
*
|
||||
* @section content-generic-classes
|
||||
*/
|
||||
.highlight {
|
||||
color: #cc3300;
|
||||
}
|
||||
|
||||
.dimmed {
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-radius: 0.3em;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: #888;
|
||||
border-color: rgba(0, 0, 0, 0.3);
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.2);
|
||||
color: #444;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
padding: 1.42857em;
|
||||
margin: 0 0 1.5em 0;
|
||||
}
|
||||
.box > *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-family: Verdana, Geneva, sans-serif;
|
||||
padding: 1px 6px 2px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
letter-spacing: normal;
|
||||
white-space: nowrap;
|
||||
border-radius: 3px;
|
||||
background: #06C;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
.info {
|
||||
background: #f4f4f4;
|
||||
}
|
||||
|
||||
.success {
|
||||
background: #88cc88;
|
||||
}
|
||||
|
||||
.warning {
|
||||
background: #cccc88;
|
||||
}
|
||||
|
||||
.error {
|
||||
background: #cc8888;
|
||||
}
|
||||
|
||||
.float-left {
|
||||
float: left;
|
||||
display: inline;
|
||||
margin: 0 1em 1.5em 0;
|
||||
}
|
||||
|
||||
.float-right {
|
||||
float: right;
|
||||
display: inline;
|
||||
margin: 0 0 1.5em 1em;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin: 0 auto 1.5em auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------------------------------- #
|
||||
*
|
||||
* Tables | Tabellen
|
||||
*
|
||||
* (en) Generic classes for table-width and design definition
|
||||
* (de) Generische Klassen für die Tabellenbreite und Gestaltungsvorschriften für Tabellen
|
||||
*
|
||||
* @section content-tables
|
||||
*/
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
color: #444444;
|
||||
border-top: 1px #ccc solid;
|
||||
border-bottom: 1px #ccc solid;
|
||||
margin: 0 0 1.35714em 0;
|
||||
}
|
||||
table.narrow {
|
||||
margin: 0 0 1.42857em 0;
|
||||
}
|
||||
table.narrow th,
|
||||
table.narrow td {
|
||||
padding: 0 0.5em;
|
||||
line-height: 1.42857;
|
||||
}
|
||||
table.fixed {
|
||||
table-layout: fixed;
|
||||
}
|
||||
table.bordertable {
|
||||
border: 1px #ccc solid;
|
||||
}
|
||||
table.bordertable thead th {
|
||||
background: #e0e0e0;
|
||||
border-right: 1px #ccc solid;
|
||||
border-bottom: 1px #ccc solid;
|
||||
}
|
||||
table.bordertable tbody th[scope="row"] {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
table.bordertable tbody th {
|
||||
border-right: 1px solid #ccc;
|
||||
}
|
||||
table.bordertable tbody td {
|
||||
border-right: 1px solid #ccc;
|
||||
}
|
||||
|
||||
caption {
|
||||
font-variant: small-caps;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
line-height: 1.5em;
|
||||
vertical-align: top;
|
||||
padding: 0.71429em 0.5em;
|
||||
}
|
||||
|
||||
th *:first-child,
|
||||
td *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
th.nowrap,
|
||||
td.nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
thead th {
|
||||
text-align: left;
|
||||
color: #000;
|
||||
border-bottom: 2px #000 solid;
|
||||
}
|
||||
|
||||
tbody {
|
||||
/* highlight row on mouse over */
|
||||
}
|
||||
tbody th {
|
||||
text-align: left;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
tbody td {
|
||||
text-align: left;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
tbody tr:hover th,
|
||||
tbody tr:hover td {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen {
|
||||
body {
|
||||
max-width: 60em;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
font-family: "Droid Sans", Arial, Helvetica, sans-serif;
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
a.standardsButton {
|
||||
padding: 0.1em;
|
||||
padding-left: 0.5em;
|
||||
padding-right: 0.5em;
|
||||
border: 1px solid rgba(19, 181, 234, 1.0);
|
||||
background-color: rgba(19, 181, 234, 0.2);
|
||||
color: black;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
a.standardsButton:hover,
|
||||
a.standardsButton:focus {
|
||||
border: 1px solid rgba(19, 181, 234, 1.0);
|
||||
background-color: rgba(19, 181, 234, 0.7);
|
||||
color: black;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
|
||||
dl.compact {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
dl.compact > dt {
|
||||
grid-column: 1;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
dl.compact > dd {
|
||||
grid-column: 2;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
div#status-notice {
|
||||
/* margin: 1.5em;
|
||||
padding: 1.5em; */
|
||||
}
|
||||
|
||||
div#status-notice.active,
|
||||
div#status-notice.final,
|
||||
div#status-notice.draft {
|
||||
color: green;
|
||||
}
|
||||
|
||||
div#status-notice.deferred,
|
||||
div#status-notice.deprecated,
|
||||
div#status-notice.experimental,
|
||||
div#status-notice.obsolete,
|
||||
div#status-notice.proposed,
|
||||
div#status-notice.protoxep,
|
||||
div#status-notice.rejected,
|
||||
div#status-notice.retracted {
|
||||
color: red;
|
||||
}
|
||||
|
||||
ol.toc-appendices {
|
||||
padding: 0;
|
||||
list-style-type: upper-alpha;
|
||||
list-style-position: inside;
|
||||
}
|
||||
a {
|
||||
color: #c4410a;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
background-color: #c4410a;
|
||||
color: white;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
figure.code,
|
||||
figure.code-example {
|
||||
/* margin: 1.5em; */
|
||||
padding: 1.5em;
|
||||
border: 1px solid rgba(19, 181, 234, 1.0);
|
||||
}
|
||||
|
||||
figure > figcaption {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
figure > *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
a.anchor-link {
|
||||
opacity: 0.3;
|
||||
margin-left: 0.5em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
a.anchor-link > abbr {
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
h1 > a.anchor-link,
|
||||
h2 > a.anchor-link,
|
||||
h3 > a.anchor-link,
|
||||
h4 > a.anchor-link,
|
||||
h5 > a.anchor-link,
|
||||
h6 > a.anchor-link {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
h1:hover > a.anchor-link,
|
||||
h2:hover > a.anchor-link,
|
||||
h3:hover > a.anchor-link,
|
||||
h4:hover > a.anchor-link,
|
||||
h5:hover > a.anchor-link,
|
||||
h6:hover > a.anchor-link {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
pre.prettyprint {
|
||||
white-space: pre;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
ul.authors {
|
||||
display: inline-block;
|
||||
list-style-type: none;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
ul.authors > li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
ul.authors > li:before {
|
||||
content: ', ';
|
||||
}
|
||||
|
||||
ul.authors > li:first-child:before {
|
||||
content: '';
|
||||
}
|
||||
|
||||
ol.toc,
|
||||
ol.toc ol {
|
||||
counter-reset: item;
|
||||
list-style-type: none;
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
|
||||
ol.toc {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
ol.toc li:before {
|
||||
content: counters(item, ".") ". ";
|
||||
counter-increment: item;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user