Wikiup:Hauptseite/styles

[Verwendung]   [CSS bearbeiten]

Diese Seite dokumentiert TemplateStyles betreffend Wikiup:Hauptseite.

CSS

ol.breadcrumb-nav-container,
ul.breadcrumb-nav-container {
   list-style-image:    none;
   list-style-position: outside;
   list-style-type:     none;
   margin:              0.2em 0;
   padding-left:        0;
}
ol.breadcrumb-nav-container > li,
ul.breadcrumb-nav-container > li {
   display:      inline;
   margin-right: 1.5em;
   padding:      0;
}
ol.breadcrumb-nav-midsep > li,
ul.breadcrumb-nav-midsep > li,
ol.breadcrumb-nav-pipe > li,
ul.breadcrumb-nav-pipe > li {
   margin-right: 0;
}
ol.breadcrumb-nav-midsep > li::after,
ul.breadcrumb-nav-midsep > li::after,
ol.breadcrumb-nav-pipe > li::after,
ul.breadcrumb-nav-pipe > li::after {
   margin-left:  0.2em;
   margin-right: 0.2em;
}
ol.breadcrumb-nav-midsep > li::after,
ul.breadcrumb-nav-midsep > li::after {
   content: "\A0\25AA";
}
ol.breadcrumb-nav-pipe > li::after,
ul.breadcrumb-nav-pipe > li::after {
   content: "\A0|";
}
ol.breadcrumb-nav-midsep > li:last-child::after,
ul.breadcrumb-nav-midsep > li:last-child::after,
ol.breadcrumb-nav-pipe > li:last-child::after,
ul.breadcrumb-nav-pipe > li:last-child::after {
   display: none;
}
ul + ul.breadcrumb-nav-container,
div + ul.breadcrumb-nav-container {
   margin-top: 0.5em;
}
.center .breadcrumb-nav-container {
   margin-left:  auto;
   margin-right: auto;
   text-align:   center;
}
.center .breadcrumb-nav-container > li {
   margin-left:  0.75em;
   margin-right: 0.75em;
}
#hauptseite-toc,
.hauptseite-upward {
   display: none;
}
.hauptseite-box {
   display:      table;
   margin-left:  auto;
   margin-right: auto;
   margin-top:   1em;
}
#willkommen p:first-child {
   margin-top: 0;
}
.hauptseite-box-title {
   font-family: inherit;
   font-size:   1em;
   font-weight: bold;
   line-height: 1.5;
}
.hauptseite-preview-wikidata {
   color: #444444;
}

@media only screen {
   /* klassischer Desktop, zweispaltig; Grundstruktur */
   #spalten {
      overflow:       auto;
      padding-bottom: 1px;
   }
   #links,
   #rechts {
      float: left;
      width: calc(50% - 0.5em - 0.005px);
   }
   #links {
      margin-right: 1em;
   }
   #links .hauptseite-box {
      margin-left: 0;
   }
   #unten {
      clear: both;
   }
   .hauptseite-portale a,
   #schwesterprojekte a {
      font-weight: bold;
   }
   .hauptseite-box {
      width: 100%;
   }
   .hauptseite-box-content,
   .hauptseite-box-title {
      border: #8898BF thin solid;
   }
   .hauptseite-box-title {
      background-color: #D8E8FF;
      margin-bottom:    0;
      margin-top:       0;
      padding:          0.2em 0.8em;
   }
   .hauptseite-box-content,
   .hauptseite-preview-wikidata {
      background-color: #FFFFFF;
      border-top: none;
      min-width: 20em;
      overflow:  auto;
      padding:   0.3em 0.8em 0.3em;
   }
   .hauptseite-mehr {
      font-size:  90%;
      margin-top: 0.8em;
      text-align: right;
   }
   .hauptseite-audiodesc {
      font-family: monospace;
   }
   .hauptseite-item {
      white-space: nowrap;
   }
   .hauptseite-item-long {
      white-space: normal;
   }
   #oben  .hauptseite-box-title,
   #unten .hauptseite-box-title {
      text-align: center;
   }
}
@media only screen and (max-width: 54rem) {
   /* Platzmangel */
   #links,
   #rechts {
      float:        none;
      margin-right: 0;
      width:        auto;
   }
   .hauptseite-box {
      width: 99%;
   }
   .hauptseite-box-content,
   .hauptseite-preview-wikidata {
      border-bottom: none;
      border-left:   none;
      border-right:  none;
      min-width:     inherit;
      padding:       0.5em 0;
   }
   ul:not(.breadcrumb-nav-container) li:not(.hauptseite-item) {
      margin-left: 0.5em;
   }
   .hauptseite-details,
   .breadcrumb-nav-container > li.hauptseite-details {
      display: none;
   }
   #hauptseite-toc {
      display:       block;
      font-size:     92%;
      line-height:   1.4em;
      margin-bottom: 1em;
   }
   .hauptseite-upward {
      display:     block;
      float:       right;
      margin-left: 2em;
   }
   #oben  .hauptseite-box-title,
   #unten .hauptseite-box-title,
   #willkommen p:first-child {
      text-align: left;
   }
}
@media only screen and (max-width: 42rem) {
   /* Besonders kleiner Screen */
   #hauptseite-toc {
      display: none;
   }
   #oben .hauptseite-upward {
      display: none;
   }
}
@media only screen and (min-width: 180rem) {
   /* Mehr als zweispaltig; 121rem */
   #links {
      float:        none;
      margin-right: 0;
      width:        auto;
   }
   #links-oben,
   #links-unten {
      float: left;
   }
   #oben  .hauptseite-box,
   #unten .hauptseite-box {
      max-width: none;
      width:     auto;
   }
}
@media only screen and (min-width: 99999rem) {
   /* Dreispaltig */
   #links-oben,
   #links-unten {
      margin-right: 3%;
      width:        28%;
   }
   #rechts {
      width: 38%;
   }
}
@media only screen and (min-width: 180rem) {
   /* Vierspaltig */
   #rechts {
      float: none;
      width: auto;
   }
   #links-oben,
   #links-unten,
   #rechts-oben,
   #rechts-unten {
      width: 23%;
   }
   #links-oben,
   #links-unten,
   #rechts-oben,
   #rechts-unten {
      margin-left:  1%;
      margin-right: 1%;
   }
   #rechts-oben,
   #rechts-unten {
      float: left;
   }
}
@media only screen and (min-width: 260rem) {
   /* Fünfspaltig */
   #rechts-unten {
      float: none;
      width: auto;
   }
   #links-oben,
   #links-unten,
   #rechts-oben,
   #rechts-unten-1,
   #rechts-unten-2 {
      margin-left:  1%;
      margin-right: 1%;
      width: 18%;
   }
   #rechts-unten-1,
   #rechts-unten-2 {
      float: left;
   }
   #rechts-unten-2 {
      margin-right: 0;
   }
   .hauptseite-box {
      max-width: 75em;
   }
   #unten .hauptseite-box {
      max-width: none;
   }
}
@media print {
   .hauptseite-portale,
   #intern,
   #schwesterprojekte,
   .hauptseite-mehr {
      display: none;
   }
   .hauptseite-box {
      margin-left: 10%;
      max-width:   70em;
      width:       80%;
   }
}

Die Programmierung ist gegen Bearbeitung geschützt ((Sichter) Dreiviertelschutz).

Kopiervorlage

<templatestyles src="Wikiup:Hauptseite/styles.css" />

---

Gestaltung der Wikipedia:Hauptseite.

Klassen

breadcrumb-nav-container

Markierung einer Aufzählung als horizontal Screenreader-gerecht dargestellt

Mehr unter Vorlage:Subpage/styles.

breadcrumb-nav-midsep

Aufzählungstrennung als mittiges Symbol

Mögliche Zeichen:

• U+2726 ✦ BLACK FOUR POINTED STAR
• U+25A0 ■ BLACK SQUARE
• U+2605 ★ BLACK STAR
• U+2731 ✱ HEAVY ASTERISK

Schwarze Bullets sollen wegen irritierender Verwechslung mit den üblichen Aufzählungszeichen, jedoch hier am Schluss stehend, nicht verwendet werden.

breadcrumb-nav-pipe

Aufzählungstrennung durch Pipe

hauptseite-absatz

Textinhalt eines Absatzes (nicht die Gesamtbreite der umschließenden Box)

Begrenzung der lesbaren Zeilenlänge; etwas über 100 Buchstaben je nach Sprach- und Lesekompetenz

hauptseite-audiodesc

Linktext zur Beschreibung einer Audiodatei

hauptseite-box

Container für die Boxen mit Titelleiste

hauptseite-box-content

Nutzinhalt einer Box mit Titelleiste

hauptseite-box-title

Titelleiste für eine Box

hauptseite-details

Nachrangige und redundante Elemente, auf die bei Platzmangel verzichtet werden kann.

hauptseite-item

Element einer Aufzählung für breadcrumb-nav-container

hauptseite-item-long

Besonders langes Element einer Aufzählung, in dem Zeilenumbruch erlaubt wird

hauptseite-mehr

• Block „Mehr zu dieser Thematik …“

hauptseite-portale

Aufzählung von Themenportalen usw.

hauptseite-upward

Anklickbares Zeichen „zum Seitenanfang springen“

Elementstruktur

Siehe !DOKU#Elementstruktur