Re-Style Iteration 1: CSS rework, some semantic stuff

This commit is contained in:
Jonas Schäfer 2019-04-04 16:36:31 +02:00
parent 3ea8b92714
commit 39199b23d8
2 changed files with 1057 additions and 399 deletions

793
xep.xsl

File diff suppressed because it is too large Load Diff

663
xmpp.v2.css Normal file
View 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;
}
}