Difference between revisions of "User:Tarulia/common.css"

Line 120: Line 120:
  
 
#page-User_Tarulia_responsive_Main_Page #quicklinks li {
 
#page-User_Tarulia_responsive_Main_Page #quicklinks li {
   list-style-image: url({{filepath:{{PAGENAME:File:Map27_Icon.png}}}});
+
   /* hard-coded since I can't get it to work with a template
 +
  * {{filepath:{{PAGENAME:File:Map27_Icon.png}}}}
 +
  */
 +
  list-style-image: url("/w/images/4/46/Map27_Icon.png");
 
}
 
}
  
 
#page-User_Tarulia_responsive_Main_Page #quicklinks li:last-child {
 
#page-User_Tarulia_responsive_Main_Page #quicklinks li:last-child {
   list-style-image: url({{filepath:{{PAGENAME:File:Map28_Icon.png}}}});
+
   list-style-image: url("/w/images/4/46/Map28_Icon.png");
 
}
 
}

Revision as of 23:58, 24 February 2018

#tarulia_customcss_container #tarulia_doctest_title {
    background-color: rebeccapurple;
}

/***************************************************
 *                                                 *
 *          Responsive Main Page Draft             *
 *                                                 *
 ***************************************************/

#page-User_Tarulia_responsive_Main_Page {
  box-sizing: border-box;
  --color-accent: #be2819;
}

#page-User_Tarulia_responsive_Main_Page *,
#page-User_Tarulia_responsive_Main_Page *:before,
#page-User_Tarulia_responsive_Main_Page *:after {
  box-sizing: inherit;
}

/*
 *         News Section
 */

#page-User_Tarulia_responsive_Main_Page #news {
  display: flex;
  flex-wrap: wrap;
}

#page-User_Tarulia_responsive_Main_Page #news > div {
  padding: 1em;
  flex-grow: 1;
  max-width: 50%;
  color: white;
}

#page-User_Tarulia_responsive_Main_Page #news h2,
#page-User_Tarulia_responsive_Main_Page #news li a {
  color: inherit;
}

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

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

#page-User_Tarulia_responsive_Main_Page #news ul {
  list-style: none;
  margin-left: 0;
}

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

#page-User_Tarulia_responsive_Main_Page #news time::before {
  content: "[";
}
#page-User_Tarulia_responsive_Main_Page #news time::after {
  content: "]";
}

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

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


/*
 *    Statistics
 */
#page-User_Tarulia_responsive_Main_Page #statistics {
  padding: 1em;
  margin-top: 1em;
  color: white;
}

#page-User_Tarulia_responsive_Main_Page #statistics h2 {
  color: inherit;
}

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

#page-User_Tarulia_responsive_Main_Page #features a {
  margin-top: 1em;
}
/*
 *    Quick Links
 */

#page-User_Tarulia_responsive_Main_Page #quicklinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

#page-User_Tarulia_responsive_Main_Page #quicklinks h2 {
  width: 100%;
}

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

#page-User_Tarulia_responsive_Main_Page #quicklinks li:last-child {
  list-style-image: url("/w/images/4/46/Map28_Icon.png");
}