Difference between revisions of "Template:Groningen/index css"

 
Line 186: Line 186:
 
}
 
}
  
−
#HQ_page img{
+
#HQ_page img,#HQ_page video{
 
border: 3px solid transparent;
 
border: 3px solid transparent;
 
}
 
}
Line 368: Line 368:
 
flex-flow: row wrap;
 
flex-flow: row wrap;
 
align-items: stretch;
 
align-items: stretch;
−
 
−
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wgMCQoaXUbaXAAAAG5JREFUOMulkksSwEAERNucvG8ui0wy+SCIHep1aQBGEFACikQMC0YhxIP56H0KdOBToAsDgFjwUcuIjaiZWahrIWsrXGJGZHSXZ/5B/BOcOSez55KDF1B65d9ndMzJsmFPYFyGWprgPvoV5svSBqA6KpTJOjxSAAAAAElFTkSuQmCC");
 
−
background-repeat: no-repeat;
 
−
background-position: right bottom;
 
 
}
 
}
  
Line 599: Line 595:
 
#ayoop-wrap{
 
#ayoop-wrap{
 
right: 30px;
 
right: 30px;
 +
}
 +
 +
video{
 +
max-width: 960px;
 
}
 
}
 
}
 
}
Line 633: Line 633:
 
.small-device{
 
.small-device{
 
display: block;
 
display: block;
 +
}
 +
video{
 +
max-width: 600px;
 
}
 
}
 
}
 
}

Latest revision as of 21:42, 30 November 2016

@font-face{ font-family: "noto sans"; src: local("noto sans"), local("notosans"), url("https://static.igem.org/mediawiki/2016/3/3e/T--Groningen--noto-sans-regular.ttf"); font-weight: normal; font-style: normal; } @font-face{ font-family: "noto sans"; src: local("noto sans"), local("noto sans bold"), local("notosans"), url("https://static.igem.org/mediawiki/2016/f/ff/T--Groningen--noto-sans-bold.ttf"); font-weight: bold; font-style: normal; } @font-face{ font-family: "noto sans"; src: local("noto sans"), local("noto sans italic"), local("notosans"), url("https://static.igem.org/mediawiki/2016/5/5f/T--Groningen--noto-sans-italic.ttf"); font-weight: normal; font-style: italic; } @font-face{ font-family: "noto sans"; src: local("noto sans"), local("noto sans bold italic"), local("notosans"), url("https://static.igem.org/mediawiki/2016/4/4a/T--Groningen--noto-sans-bold-italic.ttf"); font-weight: bold; font-style: italic; } @font-face{ font-family: "noto mono"; src: local("noto mono"), local("noto mono regular"), local("notomono"), url("https://static.igem.org/mediawiki/2016/8/89/T--Groningen--noto-mono-regular.ttf"); font-weight: normal; font-style: normal; } @font-face{ font-family: "roboto"; src: local("roboto"), local("roboto regular"), local("robotoregular"), url("https://static.igem.org/mediawiki/2016/c/cf/T--Groningen--font-roboto-regular.ttf"); font-weight: normal; font-style: normal; } @font-face{ font-family: "roboto light"; src: local("roboto light"), local("robotolight"), local("roboto-light"), url("https://static.igem.org/mediawiki/2016/7/75/T--Groningen--font-roboto-light.ttf"); font-weight: light; font-style: normal; } @font-face{ font-family: "roboto"; src: local("roboto bold"), local("robotobold"), local("roboto-bold"), url("https://static.igem.org/mediawiki/2016/2/29/T--Groningen--font-roboto-bold.ttf"); font-weight: bold; font-style: normal; }

/************************** DEFAULT WIKI SETTINGS ************************/

  1. sideMenu, #top_title {display:none;}

/* #content { padding:0px; width:1000px; margin-top:-7px; margin-left:0px;}*/ body {background-color: #222; color: #eee; }

  1. bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }

/*************************** CONTENT OF THE PAGE **************************/

/* Wrapper for the wrapper wrapper */

  1. content{

width: 100vw; max-width: 100%; margin: 0; padding: 0; background-color: #222; color: #eee; }

/* Wrapper for the wrapper */

  1. mw-content-text {

display: flex; flex-direction: row nowrap; }

/* Wrapper for the content */ div#content_wrapper { position: relative; max-width: 960px; margin: auto; padding:0 0; }

  1. HQ_page,#bodyContent,#mw-content-text{

padding: 0 !important; margin: 0 !important; }

  1. HQ_page p,div#content-wrapper p,h1,h2,h3,h4,h5,h6,table,td,figcaption,div{

font-family: "roboto light", sans-serif; /* font-weight: light;*/ font-weight: normal; font-size: 12pt; line-height: 1.3em;

background-color: #222; color: #eee; } figcaption{ display: block; font-size: 0.9rem; } th td{ backgound-color: #eee; color: #222; font-size: 12pt;

font-weight: bold; }

h1{ color: #07b2c5; font-size: 1.8rem; line-height: 3.6rem; } h2{ color: #07b2c5; font-size: 1.8rem; line-height: 3.6rem; font-weight: bold; border-top: 1px solid #aaa; margin-top: 2px; } h3{ color: #07b2c5; font-size: 1.6rem; line-height: 3.2rem; font-weight: bold; border-top: 1px solid #444; margin-top: 2px; } h4{ font-size: 1.4rem; line-height: 2.6rem; font-weight: bold; margin-top: 2px; } h5{ font-size: 1.2rem; font-weight: normal; margin-top: 2px; } h6{ font-size: 1.1rem; font-weight: bold; margin-top: 2px; }

hr{ margin: 5px 0; }

textarea{ font-size: 1rem; font-family: "noto mono", monspace;

background-color: #222; color: #eee; }

code,pre{ font-size: 1rem; font-family: "noto mono", monospace;

background-color: #333; color: #fff; border: 0; }

figure{ text-align: center; margin: 0; padding: 0; }

figure video,figure img{ margin: auto; border: 5px solid transparent; }

  1. HQ_page img,#HQ_page video{

border: 3px solid transparent; }

blockquote{ font-size: 1.4rem; line-height: 2rem; margin: 0; padding: 0.5em;

background-color: #333; font-style: italic; }

.break-word{ word-break: break-all; word-wrap: break-word; }

  1. bodyContent a,#bodyContent a[href^="https://"]{

text-decoration: underline; padding: 2px; border-radius: 1px; color: #07b2c5; background-color: #222;

cursor: pointer; }

  1. bodyContent a:visited,#bodyContent a[href^="https://"]:visited{

color: #aaa; background-color: #222; }

  1. bodyContent a:hover,#bodyContent a[href^="https://"]:hover{

color: #222; background-color: #eee; }

  1. bodyContent a.img:hover,#bodyContent a[href^="https://"].img:hover{

background-color: transparent !important; }

article img,.aside img,article video{ max-width: 98%; }

/*article.columnize p{ column-count: 2; margin-bottom: 1.2rem; } article.columnize p.img{ column-count: 1; margin: auto; text-align: center; }*/

.mw-content-ltr article ul, .mw-content-ltr article ol{ margin-left: 1.5rem; } article ul > li, article ol > li{ /*width: 75%;*/ /*margin: auto;*/ margin-top: 0.8rem; margin-left: 1rem; font-size: 12pt; } article ul > li{ list-style-type: disc; list-style-image: none; }

article li:last-child{ margin-bottom: 0.8rem; }

.clearfx { clear:both; }

.hide{ display: none !important; } .dark{ background-color: #222; }

  1. ayoop-wrap{

position: absolute; top: 0; right: 0; text-decoration: none !important; }

  1. ayoop{

position: fixed; bottom: 10px;

z-index: 100; display: inline-block; }

  1. ayoop-wrap img{

max-width: 30px; max-height: 30px; } a#ayoop:visited{ color: #07b2c5; }

  1. ayoop.fix{

position: fixed; }

  1. ayoop.static{

position: static; }

  1. collapse-all{

position: fixed; bottom: 50px;

z-index: 100; display: inline-block; }

.collapser{ cursor: pointer; } .collapser{ background-image: url("T--Groningen--minux.png"); background-size: 30px 30px; background-repeat: no-repeat; background-position: right center; } .collapser.collapsed{ background-image: url("T--Groningen--plus.png"); } /*.collapser:after{ float: right; content: "⊖"; font-weight: normal; } .collapser.collapsed:after{ float: right; content: "⊕"; font-weight: normal; }*/

.judges-will-not-evaluate { border: 4px solid #72c9b6; display: block; margin: 5px 15px; width: 95%; font-weight:bold; }

/* Customizationen */

  1. team_name,#page_name,#top_title {

display: none; }

  1. content-header{

position: relative; font-size: 1.2rem; line-height: 1.6rem; display: flex; flex-flow: row nowrap; justify-content: space-between; align-content: stretch; align-items: flex-end; }

  1. content-header .menu-item{

flex: 1 1 auto; /* max-width: 120px; */ }

  1. content-header .menu-item img{

cursor: pointer; max-width: 60px; }

  1. content-header .menu-item#logo-container img{

max-width: 150px; }

  1. page-footer.page-footer {

display: flex !important; position: relative;

flex-flow: row wrap; align-items: stretch; }

  1. page-footer.page-footer li,#page-footer.page-footer ul{

margin-left: 0.5em !important; }

  1. page-footer.page-footer section{

flex: 1 1 auto; display: inline-block; width: 19%; }

  1. page-footer.page-footer section.double{

width: 39%; flex: 2 1 auto; } .menu-item li,.menu-item ul{ list-style: none outside; margin-left: 0; padding-left: 0; width: 100%; } .sub-menu-wrap{ position: relative; padding: 0; margin: 0; height: 4px; max-width: 100%; /*display: inline-block;*/ /*border: 1px solid green;*/ } .menu-item .sub-menu{ display: flex; flex-flow: column nowrap; align-items: stretch; position: absolute; top: 0; /*left: -10%;*/ padding: 0; margin: 0; display: none; min-width: 100%; z-index: 10;

background-color: #222; /*border: 1px solid red;*/ border: 1px solid #222; padding: 2px; } .sub-menu li{ margin: 4px; width: 100%; } .sub-menu li a{ padding: 4px; width: 100%; } .menu-item{ text-align: center; border: 1px solid #222; /*border: 1px solid yellow;*/ } .menu-item:hover .sub-menu,.menu-item.hover .sub-menu{ display: flex; border: 1px solid #eee; border-left: 1px solid #eee; border-right: 1px solid #eee; } .menu-item:hover .sub-menu{ z-index: 11; }

.split{ position: relative; display: flex; flex-flow: row nowrap; justify-content: space-between; } .split > .left{ order: 1; margin-right: 3px; } .split > .right{ order: 2; margin-left: 3px; } .split > .flone{ flex: 1 1; position: relative; } .split > .fltwo{ flex: 2 1; position: relative; } .split > .flthree{ flex: 3 1; position: relative; } .split > .flfour{ flex: 4 1; position: relative; } .split > .flfive{ flex: 5 1; position: relative; } .split > .flsix{ flex: 6 1; position: relative; } .split > .flseven{ flex: 7 1; position: relative; } .split img,.split video{ max-width: 98%; } .split > .half{ flex: 0 1 auto; width: 48%; } .split > .threeQuart{ flex: 0 1 auto; width: 73%; } .split > .oneQuart{ flex: 0 1 auto; width: 23%; } .split > .half-left{ display: inline-block; width: 48%; flex: 0 1 auto; order: 1; } .split > .half-right{ display: inline-block; width: 48%; flex: 0 1 auto; order: 2; } .fix.static{ position: static; } .fix.fixed{ position: fixed; } ul.disc li{ list-style-type: disc; list-style-image: none; }

  1. bodyContent a.biglink{

font-size: 1.8rem; font-weight: bold; padding: 5px; margin: 7px; } .centrate{ text-align: center !important; } .incenter{ display: inline-block; margin: auto; }

div#groningen-wrapper{ /*display: flex; flex-flow: row nowrap;*/ } .fourth-width{ flex: 3 1; position: relative; } .aside{ flex: 2 1; position: relative; }

.bleu{ color: #07b2c5 !important; } .rouge{ color: #FF3333 !important; } .small-device{ display: none; } .down-one{ margin-top: 1.5em; }

/* Source: http://www.simonbattersby.com/blog/simple-jquery-image-crossfade/ */ .cycler{ position: relative; } .cycler > img{ position: absolute; top: 0; left: 0; z-index: 2; cursor: pointer; } .cycler > img.active{ z-index: 4; } .cycler > img.base{ z-index: 1; position: static; display: block; }

/* Remove trailing line. yuo are the wrost! */ .MathJax nobr>span.math>span{ border-left-width:0 !important }

/*************************** RESPONSIVE STYLING **************************/

/* IF THE SCREEN IS LESS THAN 970PX */

@media only screen and (max-width: 960px) { div#content_wrapper{ /* width: 100vw; */ max-width: 100%; }

#ayoop-wrap{ right: 30px; }

video{ max-width: 960px; } }

@media only screen and (max-width: 600px) {

#content-header{ flex-flow: column nowrap; align-items: center; } .menu-item{ min-width: 50%; } .menu-title{ text-decoration: underline; font-weight: bold; } .menu-item:not(#logo-container) img{ display: none; }

.split{ flex-flow: column nowrap; max-width: 100%; } .split > .left,.split > .right{ max-width: 100%; }

#page-footer.page-footer section,#page-footer.page-footer section.double{ width: auto; flex: 1 1 auto; } .small-device{ display: block; } video{ max-width: 600px; } }