Difference between revisions of "Template:SCSU-New Haven/css/dev"

Revision as of 22:38, 19 October 2016 (view source) Bpasqualucci (Talk | contribs) ← Older edit		Revision as of 22:41, 19 October 2016 (view source) Bpasqualucci (Talk | contribs) Newer edit →
Line 485:		Line 485:
	}		}
	#home #showcase #sc_team {		#home #showcase #sc_team {
−	background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("https://static.igem.org/mediawiki/2016/2/20/SCSU-New_HavenLinkTeam.png");background-size: contain; background-repeat: no-repeat	+	background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("https://static.igem.org/mediawiki/2016/2/20/SCSU-New_HavenLinkTeam.png");background-repeat: no-repeat;background-position: center
	}		}
	#home #showcase #sc_parts {		#home #showcase #sc_parts {

---

Revision as of 22:41, 19 October 2016

@import url("https://fonts.googleapis.com/css?family=Aref+Ruqaa%7CHarmattan%7CRaleway%7CReem+Kufi"); @font-face {

 font-family: Aref Ruqaa;
 font-weight: 300;
 font-style: normal;

} @font-face {

 font-family: Harmattan;
 font-weight: 400;
 font-style: normal;

} @font-face {

 font-family: Raleway;
 font-weight: 400;
 font-style: normal;

} @font-face {

 font-family: Reem Kufi;
 font-weight: 400;
 font-style: normal;

} html, body, div, p, a {

 font-family: Harmattan;
 font-size: 18px;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;

} a, .anchor {

 outline: none;
 color: #28272b;
 text-decoration: none;

} a:hover, .anchor:hover {

 color: #f9f9f9;
 text-decoration: none;

} a:focus, .anchor:focus {

 outline: none;
 text-decoration: none;

} h1 {

 font-family: Reem Kufi;

} h2 {

 font-size: 3em;

} article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {

 display: block;

} audio, canvas, video {

 display: inline-block;

} audio:not([controls]) {

 display: none;
 height: 0;

} [hidden] {

 display: none;

} html {

 font-family: sans-serif;
 -webkit-text-size-adjust: 100%;
 -ms-text-size-adjust: 100%;

} a:focus {

 outline: thin dotted;

} a:active, a:hover {

 outline: 0;

} h1 {

 font-size: 2em;

} abbr[title] {

 border-bottom: 1px dotted;

} b, strong {

 font-weight: 700;

} dfn {

 font-style: italic;

} mark {

 background: #ff0;
 color: #000;

} code, kbd, pre, samp {

 font-family: monospace, serif;
 font-size: 1em;

} pre {

 white-space: pre-wrap;
 word-wrap: break-word;

} q {

 quotes: 2 1C 2 1D 2 18 2 19;

} small {

 font-size: 80%;

} sub, sup {

 font-size: 75%;
 line-height: 0;
 position: relative;
 vertical-align: baseline;

} sup {

 top: -0.5em;

} sub {

 bottom: -0.25em;

} img {

 border: 0;

} svg:not(:root) {

 overflow: hidden;

} fieldset {

 border: 1px solid #c0c0c0;
 margin: 0 2px;
 padding: 0.35em 0.625em 0.75em;

} button, input, select, textarea {

 font-family: inherit;
 font-size: 100%;
 margin: 0;

} button, input {

 line-height: normal;

} button, html input[type=button], input[type=reset], input[type=submit] {

 -webkit-appearance: button;
 cursor: pointer;

} button[disabled], input[disabled] {

 cursor: default;

} input[type=checkbox], input[type=radio] {

 box-sizing: border-box;
 padding: 0;

} input[type=search] {

 -webkit-appearance: textfield;
 -moz-box-sizing: content-box;
 -webkit-box-sizing: content-box;
 box-sizing: content-box;

} input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {

 -webkit-appearance: none;

} textarea {

 overflow: auto;
 vertical-align: top;

} table {

 border-collapse: collapse;
 border-spacing: 0;

} body, figure {

 margin: 0;

} legend, button::-moz-focus-inner, input::-moz-focus-inner {

 border: 0;
 padding: 0;

} .clearfix:after {

 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;

}

• {

 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;

}

• {

 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -o-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-transition: 0.25s ease-in-out;
 -moz-transition: 0.25s ease-in-out;
 -o-transition: 0.25s ease-in-out;
 transition: 0.25s ease-in-out;
 margin: 0;
 padding: 0;

}

1. drawer-toggle:checked ~ #drawer-toggle-label {

 height: 100 $;
 width: calc(100% - 300px);
 background: rgba(255,255,255,0.8);
 left: 300px;

}

1. drawer-toggle:checked ~ header {

 left: 300px;

}

1. drawer-toggle:checked ~ #drawer {

 left: 0px;

}

1. drawer-toggle:checked ~ #page-content {

 margin-left: 300px;

}

1. drawer ul {

 list-style-type: none;

}

1. drawer ul a {

 display: block;
 padding: 10px;
 color: #c7c7c7;
 text-decoration: none;

}

1. drawer ul a:hover {

 color: #fff;

} @media all and (max-width: 350px) {

 #drawer-toggle:checked ~ #drawer-toggle-label {
   height: 100%;
   width: 50px;
 }
 #drawer-toggle:checked ~ #drawer-toggle-label,
 #drawer-toggle:checked ~header {
   left: calc(100% - 50px);
 }
 #drawer-toggle:checked ~ drawer {
   width: calc(100% - 50px);
   padding: 20px;
 }
 #drawer-toggle:checked ~ #page-content {
   margin-left: calc(100% - 50px);
 }

} .kukuri {

 text-transform: uppercase;
 overflow: hidden;
 display: inline-block;

} .kukuri::before {

 content: attr(data-letters);
 position: absolute;
 z-index: 2;
 overflow: hidden;
 color: #424242;
 white-space: nowrap;
 width: 0%;
 -webkit-transition: width 0.4s 0.3s;
 transition: width 0.4s 0.3s;

} .kukuri::after {

 content: ;
 position: absolute;
 height: 16px;
 width: 100%;
 top: 50%;
 margin-top: -8px;
 right: 0;
 background: #f9f9f9;
 -webkit-transform: translate3d(-100%, 0, 0);
 transform: translate3d(-100%, 0, 0);
 -webkit-transition: -webkit-transform 0.4s;
 transition: transform 0.4s;
 -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
 transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);

} .kukuri:hover::before {

 width: 100%;

} .kukuri:hover::after {

 -webkit-transform: translate3d(100%, 0, 0);
 transform: translate3d(100%, 0, 0);

} .mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul {

 margin: 0px;

}

1. HQ_page p {

 font-size: 20px;

}

1. HQ_page .clear {

 height: 0px;

} .clear clear both height 0px,

1. sideMenu {

 display: none;

}

1. top_title {

 display: none;

}

1. content {

 width: 100%;
 margin: 0px auto;
 padding: 0px;
 border: none;
 background: none;

}

1. globalWrapper {

 width: 100%;
 padding: 0px;
 margin-top: -25px;

} .firstHeading {

 display: none;

}

1. bodyContent h1,
2. bodyContent h2 {

 margin: 0;

} html, body {

 height: 100%;
 background-color: #efefef;
 overflow-x: hidden;

} ul {

 list-style-type: none;

} footer {

 padding-top: 1%;
 height: 28vh;
 color: ##a09a9a;
 background-color: #a09a9a;

} footer .container #footer_team_logo {

 width: 100%;
 height: auto;

} footer img {

 width: 100%;
 height: auto;

} hr {

 border-width: 5px;
 clear: both;
 display: block;
 width: 96%;
 background-color: #1e1a1b;
 height: 1px;

}

1. home,
2. safety,
3. attributions {

 min-height: 80vh;

}

1. page-content {

 width: 100%;

} .link {

 outline: none;
 display: inline-block;
 position: relative;
 text-decoration: none;
 font-size: 3em;
 color: #424242;

} .flex {

 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;

} .footer_flex {

 display: flex;
 align-items: center;
 justify-content: center;

}

1. home #home-hero-bg {

 background-image: url("");
 background-size: contain;
 background-repeat: no-repeat;
 height: 70vh;

}

1. home #home-hero-bg .hero {

 width: 100%;
 height: 100%;
 background-color: rgba(50,50,50,0.7);

}

1. home #home-hero-bg .hero div {

 display: flex;
 flex-direction: column;
 justify-content: center;
 color: #fff;
 height: 100%;
 margin-left: 5%;
 font-weight: 500;
 line-height: 1.2;
 letter-spacing: 3px;
 text-transform: uppercase;

}

1. home #desc {

 margin-top: 5%;
 text-align: center;
 width: 70%;

}

1. home #stag_cont {

 margin-top: 5%;
 margin-bottom: 5%;
 width: 70%;

}

1. home #stag_cont .row {

 height: 40vh;

}

1. home #stag_cont .row div {

 margin-top: 5%;
 height: 100%;
 text-align: center;

}

1. home #stag_cont .row div img {

 width: 100%;
 height: auto;

}

1. home #showcase {

 width: 100%;
 margin-bottom: 0%;

}

1. home #showcase .row {

 display: flex;
 justify-content: center;

}

1. home #showcase .row .showcase_item {

 height: calc(30% + 20px);
 width: calc(26vw);
 margin: 20px;
 padding: 60px 0;
 z-index: 1;
 position: relative;
 text-align: center;
 display: inline-block;
 align-items: center;
 justify-content: center;
 -webkit-transform: translate3d(0, 0, 0);

}

1. home #showcase .row .showcase_item_long {

 height: calc(40% + 20px);
 width: calc(45vw);
 margin: 20px;
 padding: 80px 0;
 z-index: 1;
 position: relative;
 text-align: center;
 display: inline-block;
 align-items: center;
 justify-content: center;
 -webkit-transform: translate3d(0, 0, 0);

}

1. home #showcase #sc_team {

 background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("");background-repeat: no-repeat;background-position: center 

}

1. home #showcase #sc_parts {

 background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("");

}

1. home #showcase #sc_results {

 background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("");

}

1. home #showcase #sc_notebook {

 background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("");

}

1. home #showcase #sc_attribution {

 background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("");

}

1. team #team_hero_bg {

 background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/attributions_hero.png");
 background-size: cover;
 background-repeat: no-repeat;
 height: 40vh;
 color: #fff;
 text-align: center;
 margin-top: 4%;
 margin-bottom: 7%;

}

1. team #team_hero_bg div {

 width: 50%;

}

1. team .baraja-demo {

 width: 200px;
 margin: 30px auto;
 color: #aaa;
 height: 50vh;

}

1. team .baraja-demo h4 {

 color: #666;
 font-size: 14px;
 padding: 8px 10px 5px;
 margin: 20px 3px 5px;
 border-bottom: 1px solid #f0f0f0;

}

1. team .baraja-demo p {

 font-size: 12px;
 font-weight: 700;
 padding: 0 10px;
 margin: 10px 3px 0;

}

1. team .baraja-demo li img {

 display: block;
 margin: 0 auto;
 width: 100%;
 border-radius: 10px 10px 0 0;

}

1. team .baraja-demo .baraja-container {

 width: 200px;
 height: 310px;
 margin: 0 auto 30px;
 position: relative;
 padding: 0;
 list-style-type: none;

}

1. team .baraja-demo .baraja-container li {

 width: 100%;
 height: 100%;
 margin: 0;
 position: absolute;
 top: 0;
 left: 0;
 cursor: pointer;
 background: #fff;
 pointer-events: auto;
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 -ms-backface-visibility: hidden;
 -o-backface-visibility: hidden;
 backface-visibility: hidden;
 border-radius: 10px;
 padding: 5px;
 box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;

}

1. team #thanks {

 margin-bottom: 5%;

}

1. team #thanks div {

 margin-left: 5%;

}

1. team #sponsor_list .row {

 display: flex;
 align-items: center;
 justify-content: center;

}

1. team img {

 width: 100%;
 height: auto;

}

1. parts #parts_hero_bg {

 background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/attributions_hero.png");
 background-size: cover;
 background-repeat: no-repeat;
 height: 40vh;
 color: #fff;
 text-align: center;
 margin-top: 4%;
 margin-bottom: 7%;

}

1. parts #parts_hero_bg div {

 width: 50%;

}

1. parts #parts_content .sub_section {

 margin-left: 5%;

}

1. attributions #attr_hero_bg {

 background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/attributions_hero.png");
 background-size: cover;
 background-repeat: no-repeat;
 height: 40vh;
 color: #fff;
 text-align: center;
 margin-top: 4%;
 margin-bottom: 7%;

}

1. attributions #attr_hero_bg div {

 width: 50%;

}

1. attributions #attr_content {

 margin-bottom: 5%;

}

1. attributions #attr_content .sub_section {

 margin-left: 5%;

} /* .bump_up margin-top 6% .bump_down margin-bottom 5%

.text-center text-align center

// Testing Grounds for fonts .font-raleway font-family Raleway .font-aref font-family Aref Ruqaa .font-harmattan font-family Harmattan .font-reem font-family Reem Kufi

.black background-color black

.blue background-color blue

.container ../ .section-div height 40vh ../ img width 100% height auto ../ .link_box height 30vh background-color pink margin auto margin-left 5% ../ img border-radius 25px ../ .section-div text-align center div display inline-block #lbox_1 margin-left 6.5%

1. safety

#theme1 background-image url('../img/human_practices_1.jpg') #theme2 background-image url('../img/human_practices_2.jpg') #theme3 background-image url('../img/human_practices_3.jpg') .safety-div display flex flex-direction column justify-content center color white

1. human_practices

#theme1 background-image url('../img/human_practices_1.jpg') #theme2 background-image url('../img/human_practices_2.jpg') #theme3 background-image url('../img/human_practices_3.jpg') .hp_div display flex flex-direction column justify-content center color white */ .bckgnd_image {

 position: static;
 min-height: 945px;
 height: 100%;
 background-image: url("../img/safety_visions.jpg");
 background-attachment: fixed;
 background-position: center center;
 background-size: cover;

}