Difference between revisions of "Template:Rotterdam HR/css/main"

Revision as of 09:33, 16 August 2018 (view source) Rensb (Talk | contribs) ← Older edit		Revision as of 09:44, 16 August 2018 (view source) Rensb (Talk | contribs) Newer edit →
Line 194:		Line 194:
	right: 0;		right: 0;
	bottom: 0;		bottom: 0;
−	background-size: 100%;
	}		}

---

Revision as of 09:44, 16 August 2018

/* ----- color palet ----- */

root {

 --main-color: #33691E;

--secondary-color: #E0E0E0; --wetlab-color: #2E7D32;

 --hardware-color: #3949AB;
 --software-color: #424242;

--dark: rgb(50, 50, 50); }

/* ----- iGEM STYLE FIXES ----- */

ul { list-style-image: none; }

1. content {

width: 100%; margin: 0; padding: 0; background: none; }

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

   background: whitesmoke;
   padding: 5px 0;

}

1. HQ_page h1, #HQ_page h2, #HQ_page h3, #HQ_page p, #HQ_page span, #HQ_page a{

font-family: "Century Gothic"; line-height: initial; }

1. bodyContent h3, #bodyContent h4, #bodyContent h5 {

margin-bottom: 0; padding: 0 5px; line-height: 1.1em; }

1. top_title, #top_menu_under {

display: none; }

1. top_menu_14 {

position: initial; }

1. top_menu_inside #user_item {

margin-right: 0; float: none; }

1. top_menu_inside {

margin: 0 auto; width: 90%; }

/* ----- NAVBAR ----- */ body { font-family: "Century Gothic"; background: white; }

.menu {

 /*   position: absolute; */
 /*   top: 0; */
 /*   left: 0; */
 /*   right: 0; */
 display: flex;

}

.menu, .sub-menu {

 margin: 0;
 padding: 0;
 list-style: none;
 box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1);

}

.menu .main-item {

 position: relative;
 display: flex;
 flex-direction: column;
 align-items: center;
 flex: 1;
 /*   min-width: 135px; */
 padding: 5px;
 text-align: center;
 text-decoration: none;
 color: white;
 background: var(--dark);
 fill: currentColor;

}

.menu .main-item::before {

 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 height: 3px;
 background: currentColor;
 transform: scale(0, 1);
 transform-origin: left;
 transition: transform 200ms;

}

.menu .home-button {

 width: 200px;
 position: relative;

}

.menu .home-button a {

 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: -100px;
 border-radius: 0 0 50% 50%;
 background: var(--dark);

}

.sub-menu {

 position: absolute;
 top: 48px;
 left: 0;
 right: 0;
 transform: scale(1, 0);
 transform-origin: top;
 transition: transform 250ms;

}

.sub-menu .sub-item {

 padding: 10px 5px;
 border-top: rgba(255, 255, 255, 0.25) solid 2px;
 color: var(--dark);
 transition: color 200ms;

}

.menu .construction::after {

 content: url('https://static.igem.org/mediawiki/2018/4/4a/T--Rotterdam_HR--wrench.svg');
 position: absolute;
 top: 5px;
 left: 0;
 right: 0;
 bottom: 5px;
 display: flex;
 flex-direction: column;
 align-items: center;
 font-size: 12px;
 color: orange;
 background: var(--dark);
 transform: scale(1, 0);
 transform-origin: bottom;
 transition: transform 250ms;

}

.menu .main-item:hover::before {

 transform: scale(1, 1);

}

.menu .construction:hover::after {

 transform: scale(1, 1);

}

.menu .main-item:hover .sub-menu {

 transform: scale(1, 1);

}

.menu .main-item:hover .sub-menu .sub-item {

 color: white;
 transition: color 200ms 100ms;

}

/* ------ HEADER ------ */

.header {

 position: relative;
 height: 400px;
 width: 100%;
 background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.5), rgba(255,255,255,0.3));
 display: flex;
 align-items: center;
 text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.4);

}

.header::before {

 content: ;
 position: absolute;
 z-index: -1;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;

}

.header div {

 margin: auto;
 display: flex;
 flex-direction: column;
 align-items: center;

}

.header div svg {

 width: 160px;
 height: 160px;

}

.header div h1 {

 margin-top: 0;
 font-size: 50px;

}

/* ------ FOOTER ------ */

.multiple-items-footer { margin: 0 auto; display: flex; justify-content: space-around; width: 250px; }

.item-footer { width: 50px; height: 50px; margin: 5px; filter: invert(50%); transition: 0.4s; }

.item-footer:hover { filter: invert(100%); transition: 0.1s; }

1. footer {

padding: 40px; background: rgb(50, 50, 50); text-align: center; color: white; font-size: 18px; }

/* ------ PAGE ------ */ .page { max-width: 1600px; margin: 0 auto; }

/* ------ CONTAINERS ------ */ .text-container {

 position: relative;
 box-shadow: 2px 2px 20px rgba(0,0,0,0.1);
 min-height: 380px;
 padding-bottom: 50px;
 margin: 20px;

}

.text-container .title {

 color: white;
 background: var(--main-color);
 padding: 10px;

margin-top: 0; text-align: center; }

.text-container .title::after {

 content: ;
 display: block;

width: 90%; margin: 0 auto;

 height: 4px;
 background: currentColor;

}

.text-container .content {

 margin: 10px 20px;

}

.text-container img {

 float: right;
 height: 280px;
 margin-left: 20px;
 box-shadow: 2px 2px 20px rgba(0,0,0,0.1);

}

.nav-button {

 position: absolute;
 bottom: 20px;
 right: 20px;
 padding: 10px 20px;
 background: var(--main-color);
 color: white;
 text-decoration: none;
 box-shadow: 2px 2px 5px rgba(0,0,0,0.1);

}

.nav-button::before {

 content: '> ';

}

.nav-button::after {

 content: ;
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 height: 3px;
 background: white;
 transform: scale(0, 1);
 transform-origin: left;
 transition: transform 200ms;

}

.nav-button:hover::after {

 transform: scale(1, 1);

}

.item-container {

 display: flex;

}

.item-container div {

 position: relative;
 flex: 1;

margin: 20px; padding-bottom: 20px;

 text-align: center;
 box-shadow: 2px 2px 20px rgba(0,0,0,0.1);
 background: white;

}

.item-container .title {

 background: #2E7D32;
 margin-top: 0;
 padding: 10px;
 color: white;

}

.item-container .title::after {

 content: ;
 display: block;
 width: 90%;
 height: 4px;
 margin: 0 auto;
 background: currentColor;

}

.item-container .content {

 padding: 10px 20px;

}

.item-container .problem {

 margin-right: 40px;

}

.item-container .solution {

 margin-left: 40px;

}

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

 .container {
   flex-direction: column;
   padding: 10px;
   margin: 10px auto;
   width: 95%;
 }
 
 .text-pic .photo {
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   order: -1;
 }
 
 .container {
   text-align: center;
 }
 
 .container .title::after {
   width: 100%;
 }
 
 .container .nav-button {
   left: 10px;
   right: 10px;

}

.item-container { flex-direction: column; align-items: center; }

.item-container div { margin: 20px 0; } }