User:Tarulia/common.css

Revision as of 23:56, 25 February 2018 by Tarulia (talk | contribs)

Note: After saving, 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: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
#tarulia_customcss_container #tarulia_doctest_title {
    background-color: rebeccapurple;
  background-image: url("[[File:Map27_Icon.png|link=]]");
}

/***************************************************
 *                                                 *
 *          Responsive Main Page Draft             *
 *                                                 *
 ***************************************************/
#wrapper-main_page {
  box-sizing: border-box;
  --color-accent: #be2819;
}

#wrapper-main_page *,
#wrapper-main_page *:before,
#wrapper-main_page *:after {
  box-sizing: inherit;
}

/*
 *         News Section
 */

#wrapper-main_page #news {
  display: flex;
  flex-wrap: wrap;
}

#wrapper-main_page #news > div {
  margin-bottom: 1em;
  padding: 1em;
  padding-top: 0;

  flex-grow: 1;
  max-width: 50%;

  color: white;
}

#wrapper-main_page #news h2,
#wrapper-main_page #news li a {
  color: inherit;
}

#wrapper-main_page #news > div:first-child {
  margin-right: .5em;
}

#wrapper-main_page #news > div:last-child {
  margin-left: .5em;
}

#wrapper-main_page #news ul {
  list-style: none;
  margin-left: 0;
}

#wrapper-main_page #news time {
  color: var(--color-accent);
  font-weight: bold;
}

#wrapper-main_page #news time::before {
  content: "[";
}
#wrapper-main_page #news time::after {
  content: "]";
}

/* There's a "min-width: 1200px" breakpoint on the WP skin */
@media (max-width: 1199px) {
  #wrapper-main_page #news div {
    max-width: none;
  }

  #wrapper-main_page #news > div:first-child, 
  #wrapper-main_page #news > div:last-child {
    margin: 0;
    margin-bottom: 1em;
  }
}

/*
 *    Features
 */
#wrapper-main_page #features {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

#wrapper-main_page #features a:first-child img {
  border-radius: 5px 0 0 5px;
}

#wrapper-main_page #features a:last-child img {
  border-radius: 0 5px 5px 0;
}

/*
 *    Statistics
 */
#wrapper-main_page #statistics {
  padding: 1em;
  padding-top: 0;
  margin-top: 1em;
  color: white;
}

#wrapper-main_page #statistics h2 {
  color: inherit;
}

/*
 *    Quick Links
 */

#wrapper-main_page #quicklinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#wrapper-main_page #quicklinks h2 {
  width: 100%;
}

#wrapper-main_page #quicklinks h3 {
  background-color: var(--color-accent);
  
  padding-left: .5em;

  color: white;
  font-size: 110%;
  font-family: Play;
}

#wrapper-main_page #quicklinks li {
  /* hard-coded since I can't get it to work with a template
   * {{filepath:{{PAGENAME:File:Map27_Icon.png}}}}
   * -> url("/w/{{filepath:{{PAGENAME:File:Map27_Icon.png}}}}")
   */
  list-style-image: url("/w/images/4/46/Map27_Icon.png");
}

#wrapper-main_page #quicklinks li:last-child {
  list-style-image: url("/w/images/6/64/Map28_Icon.png");
}