Wikipedia:Hauptseite/styles

aus Wikipedia, der freien Enzyklopädie
Zur Navigation springen Zur Suche springen
[Verwendung]   [CSS bearbeiten]

Diese Seite dokumentiert TemplateStyles betreffend Wikipedia: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;
   display: 	block !important; /* zur Korrektur unerwünschter Effekte mit display:flex in Mobilversion */
}
.hauptseite-preview-wikidata {
   color: var(--color-subtle, #54595d);
}

@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: var(--dewiki-hintergrundfarbe-basis);
      border-top: none;
      overflow:  auto;
      padding:   0.3em 0.8em 0.3em;
   }
   .hauptseite-mehr {
      font-size:  90%;
      margin: 0.5em 0 0.2em 0;
      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;
      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%;
   }
}

/* Dunkelmodus */
@media screen {
	html.skin-theme-clientpref-night .hauptseite-box-title {
        color: var(--color-base, #eaecf0);
	    background-color: var(--dewiki-hintergrundfarbe5);
	    border-color: #72777d;
	}
	html.skin-theme-clientpref-night .hauptseite-box-content {
        color: var(--color-base, #eaecf0);
	    border-color: #72777d;
	}
}
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .hauptseite-box-title {
        color: var(--color-base, #eaecf0);
    	background-color: var(--dewiki-hintergrundfarbe5);
    	border-color: #72777d;
	}
	html.skin-theme-clientpref-os .hauptseite-box-content {
        color: var(--color-base, #eaecf0);
	    border-color: #72777d;
	}
}

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

Kopiervorlage

[Quelltext bearbeiten]
<templatestyles src="Wikipedia:Hauptseite/styles.css" />


Gestaltung der Wikipedia:Hauptseite.

Klassen

[Quelltext bearbeiten]
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

[Quelltext bearbeiten]

Siehe !DOKU#Elementstruktur

Abgerufen von „https://de.wikipedia.org/w/index.php?title=Wikipedia:Hauptseite/styles&oldid=201833617“