To get updates on new site content, like us on Facebook or follow us on Twitter.

Difference between revisions of "MediaWiki:Common.css"

From JFA Wiki
Line 5: Line 5:
 
/*redo header */
 
/*redo header */
  
@media (min-width: 601px) { /* tablet and desktop */
 
 
 
#header-wrapper: {
 
#header-wrapper: {
 
height: 80px !important;
 
height: 80px !important;
 
}
 
}
 +
 +
 +
@media (min-width: 601px) { /* tablet and desktop */
 +
 +
 
 
 
#site-info img {
 
#site-info img {

Revision as of 09:08, 12 February 2019

/* Refreshed Skin Tweaks */ /* Google Fonts */ @import url('https://fonts.googleapis.com/css?family=Libre+Baskerville%7COvo');

/*redo header */

#header-wrapper: { height: 80px !important; }


@media (min-width: 601px) { /* tablet and desktop */


#site-info img { width: 130px; height: 130px; top: 20px; position: absolute; left: 30px; }

#sidebar-wrapper { position: relative; float:left; margin-top: 70px; }

#sidebar { position: relative; float: left; }

#header-wrapper { position: relative; }

.fixed-toolbox { top: .3em; }

#content-wrapper { top: 0; } }

@media (max-width: 1000px) and (min-width: 601px) { /* tablet */ #site-info img { left: 12px; } }

/* major fixes */

/* titles should wrap no matter where */ @media (max-width: 1000px) and (min-width: 601px) {

 #firstHeading { 
 	white-space: normal;
 }

} @media (max-width: 600px) { #firstHeading { white-space: normal; } }

/* global styling */

body { font-family: "Ovo", sans-serif; background-color: #7a7a7a; /* bg-color of site */ ; background-color: #f7f7f7; color: #555; /* content/text color of site */ ; }

DIV#bodyContent { font-family: "Ovo", sans-serif; }

h1, #firstHeading { font-family: "Libre+Baskerville", serif; color: #555; font-weight: normal; }

h2, h3, h4, h5, h6 { font-family: "Libre+Baskerville", serif; color: rgb(198, 93, 25); font-weight: normal; }

a, a:visited { color: #5a7c9f; }

a.new, a.new:visited { color: #5a7c9f; text-decoration: line-through; }

/* header */

  1. header-wrapper {

background: #7a7a7a; /* bg-color/gradient of header web component */ ; border-bottom: 3px solid rgb(198, 93, 25);; }

.header-button:hover, .header-dropdown-item:hover, .header-button-active, .sitedropdown-highlighted, .dropdown-highlighted { /*background-color: bg-color of header items and dropdown menus */ ; /* color: content/text color of header items and dropdown menus */ ; }

/* sidebar */

  1. sidebar-wrapper {

color: #444; }

  1. sidebar a, #sidebar a:hover, #sidebar a:visited {

color: #444; xfont-weight: bold; color: #5a7c9f; margin-right: 10px; margin-bottom: 5px; line-height: 18px; }

/* menu headings */

  1. sidebar h1 {

color: rgb(198, 93, 25); xfont-weight: bold; margin-left: 20px; margin-right: 20px; margin-top: 12px; margin-bottom: 6px; border-bottom: 1px solid; font-size: 16px; }

/* content */

  1. bodyContent {

padding: 0 1em; line-height: 1.5em; font-size: 1.10em; word-wrap: break-word; font-family: "Helvetica Neue","Helvetica","Arial",sans-serif; color: #555; }

.mw-parser-output a.external, .mw-parser-output a.external:visited { color: #5a7c9f; }

/* give [expand] [collapse] some breathing room */ .mw-collapsible-toggle { margin-left: 10px; }

/* toc */

  1. jfa-toc {

}

  1. toc {

float: right; margin-left: 20px; margin-bottom: 20px; max-width: 50%; background-color: #fff; padding: 16px; }


/* hide table of contents numbering */ .tocnumber { display: none; }

.toctext, .tocnumber {

   font-size: .95em;
   color: #5a7c9f;

}

/* the little show/hide on toc */

  1. toc .toctogglelabel, #toc .toctogglecheckbox {

color: #5a7c9f; }

.toclevel-2, .toclevel-3, .toclevel-4 {

   list-style-type: circle;

}

.header-button:hover, .header-button-active, .header-dropdown-item:hover {

   background-color: rgb(198, 93, 25);

}

/* templates */ .jfastart { font-style: italic; text-align: center; font-size: .95em; color: rgb(198, 93, 25); margin-bottom: 10px; }


/* mobile ?? */

  1. user-info .header-menu {
   top: 2.75em;
   background-color: rgb(198, 93, 25);
   padding: 0.15em 0 0.15em 0

}


.sidebar-shower { background-color: rgb(198, 93, 25); }

  1. header-wrapper .search-form {

xbackground-color: rgb(198, 93, 25); }

/* styling for medium and large sized tablets */ @media (max-width: 1000px) and (min-width: 601px) { #header-wrapper .search-form { background-color: rgb(198, 93, 25); /* bg-color of search on tablet */ ; } }

/* styling for phones and smaller tablets */ @media (max-width: 600px) { #sidebar-wrapper { background-color: #f7f7f7/* bg-color of sidebar on phones */ ; color: #444;

} #user-info .header-menu { background-color: #333 /* bg-color of user dropdown menu */ ; }

#toc { float: none; margin-left: 0; width: 100%; max-width: 100%; }

}