MediaWiki:Common.css

From Symmetry of Soul

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* CSS placed here will be applied to all skins */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&display=swap');

body {
   font-family: "Georgia", serif, "Segoe UI","Segoe UI Emoji","Segoe UI Symbol","Lato","Liberation Sans","Noto Sans","Helvetica Neue","Helvetica",sans-serif;
   font-size: 115%;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
}

/* Content styling we like */
#mw-header-container {
   font-family: "Cormorant Garamond", Georgia, serif;
   font-variant: small-caps;
   font-weight: 500;
}
#mw-site-navigation, #mw-related-navigation {
   font-family: "Cormorant Garamond", Georgia, serif;
   font-weight: 500;
}
.mw-body h1, .mw-body h2, .mw-body h3 {
   font-family: "Cormorant Garamond", Georgia, serif;
   font-weight: 500;
   font-variant-numeric: lining-nums;
}
.mw-body h1, .mw-body h2 {
   font-variant: small-caps;
   font-variant-numeric: lining-nums;
}
.mw-body h3 {
   text-align: center;
   font-size: 1.4em;
}
.tocnumber {
   display: none; /* confusing to see numbers when items also have SRT numbers */
}
.portable-infobox .pi-title {
   font-family: initial;
}

.said-jesus {
   color: darkred;
}

.wikitable-compact {
    line-height: 0.8;
}

.portable-infobox {
    background: #eee;
    border: 1px solid #aaa;
}

/* Hide things for a less wiki-like experience */
/* https://www.mediawiki.org/wiki/Manual:Using_MediaWiki_as_a_content_management_system */
#ca-viewsource,
#ca-talk,
#ca-nstab-main,
#ca-history,
#user-tools {
    display: none;
}

/* Message-box styling, from https://en.wikipedia.org/wiki/Module:Message_box/ombox.css on 2022-10-20 */
/* {{pp|small=y}} */
.ombox {
	margin: 4px 0;
	border-collapse: collapse;
	border: 1px solid #a2a9b1;    /* Default "notice" gray */
	background-color: #f8f9fa;
	box-sizing: border-box;
}

/* For the "small=yes" option. */
.ombox.mbox-small {
	font-size: 88%;
	line-height: 1.25em;
}

.ombox-speedy {
	border: 2px solid #b32424;    /* Red */
	background-color: #fee7e6;    /* Pink */
}

.ombox-delete {
	border: 2px solid #b32424;    /* Red */
}

.ombox-content {
	border: 1px solid #f28500;    /* Orange */
}

.ombox-style {
	border: 1px solid #fc3;       /* Yellow */
}

.ombox-move {
	border: 1px solid #9932cc;    /* Purple */
}

.ombox-protection {
	border: 2px solid #a2a9b1;    /* Gray-gold */
}

.ombox .mbox-text {
	border: none;
	/* @noflip */
	padding: 0.25em 0.9em;
	width: 100%;
}

.ombox .mbox-image {
	border: none;
	/* @noflip */
	padding: 2px 0 2px 0.9em;
	text-align: center;
}

.ombox .mbox-imageright {
	border: none;
	/* @noflip */
	padding: 2px 0.9em 2px 0;
	text-align: center;
}

/* An empty narrow cell */
.ombox .mbox-empty-cell {
	border: none;
	padding: 0;
	width: 1px;
}

.ombox .mbox-invalid-type {
	text-align: center;
}

@media (min-width: 720px) {
	.ombox {
		margin: 4px 10%;
	}
	
	.ombox.mbox-small {
		/* @noflip */
		clear: right;
		/* @noflip */
		float: right;
		/* @noflip */
		margin: 4px 0 4px 1em;
		width: 238px;
	}
}

/* -- ---- ------- Feb 2024 Homepage styling ------- ---- -- */

/* Assign widgets to named grid areas. */
#mainpage-header-container {
  grid-area: header;
}

#mainpage-flagship-container {
  grid-area: flagship;
}

#mainpage-flaghosts-container {
  grid-area: flaghosts;
}

#mainpage-podcast-container {
  grid-area: podcast;
}

#mainpage-podhosts-container {
  grid-area: podhosts;
}

#mainpage-contact-container {
  grid-area: contact;
}

#mainpage-content {
  /* keep the mw-indicators above the main content
   * normally, they go next to the H1 title, but there isn't one here */
  clear: both;
  display: grid;
  grid-gap: 0 1em;
  grid-template-areas: 
  "header"
  "flagship"
  "flaghosts"
  "podcast"
  "podhosts"
  "contact";
  margin-right: 1em;
}

#mainpage-content h2 {
  margin: 0;
}

#mainpage-content h2::after {
  display: none;
}

div.gallerytext {
  font-size: 80%;
}

@media all and (min-width: 1000px) {

  /* The container for the flexible middle section of the main page that contains the content boxes. */
  #mainpage-content {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-areas: 
      "header    header"
      "flagship  podcast"
      "flaghosts podhosts"
      "flaghosts podhosts"
      "contact contact";
  }

  /* Each content box. */
  .mainpage-widget-content {
    margin: 1em;
  }

  .mainpage-widget-header {
    background-color: #5090C0;
    font-weight: bold;
    color: white;
    padding: 0.3em 1em;
    margin: 0 0 1em 0;
    font-size: inherit;
    text-align: center;
  }

  .mainpage-widget {
    border: 1px solid #5090C0;
    margin: 0 0 0 0;
  }

  #mainpage-header-container {
    margin-bottom: 1em;
  }

  #mainpage-contact-container {
    margin-top: 1em;
  }
} /* END: @media all and (min-width: 720px) */