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

(Undo revision 167053 by Rensb (talk))
Line 2: Line 2:
  
 
:root {
 
:root {
−
  --main-color: #33691E;
+
--color-primary: #1B5E20;
−
--secondary-color: #E0E0E0;
+
--color-secondary: #C8E6C9;
−
--wetlab-color: #2E7D32;
+
 
−
  --hardware-color: #3949AB;
+
--color-dark: rgb(50, 50, 50);
−
  --software-color: #424242;
+
 
−
--dark: rgb(50, 50, 50);
+
--color-wetlab: #1B5E20;
 +
 +
--color-hardware: #3949AB;
 +
 
 +
--color-software: #424242;
 +
--color-software-secondary: #6a6a6a;
 +
}
 +
 
 +
/* ------ PAGE ------ */
 +
.page.index {
 +
background: var(--color-secondary);
 +
}
 +
.page.software {
 +
background: var(--color-software-secondary);
 
}
 
}
  
Line 85: Line 98:
 
   align-items: center;
 
   align-items: center;
 
   flex: 1;
 
   flex: 1;
−
   min-height: 44px;
+
   height: 44px;
 
   padding: 5px;
 
   padding: 5px;
 
   text-align: center;
 
   text-align: center;
 
   text-decoration: none;
 
   text-decoration: none;
 
   color: white;
 
   color: white;
−
   background: var(--dark);
+
   background: var(--color-dark);
 
fill: currentColor;
 
fill: currentColor;
 
z-index: 1;
 
z-index: 1;
Line 120: Line 133:
 
   bottom: -80px;
 
   bottom: -80px;
 
   border-radius: 0 0 50% 50%;
 
   border-radius: 0 0 50% 50%;
−
   background: var(--dark);
+
   background: var(--color-dark);
 
}
 
}
  
Line 136: Line 149:
 
   padding: 10px 5px;
 
   padding: 10px 5px;
 
   border-top: rgba(255, 255, 255, 0.25) solid 2px;
 
   border-top: rgba(255, 255, 255, 0.25) solid 2px;
−
   color: var(--dark);
+
   color: var(--color-dark);
 
transition: color 200ms;
 
transition: color 200ms;
 
min-width: 96px;
 
min-width: 96px;
−
min-height: 10px;
+
max-height: fit-content;
 
}
 
}
  
Line 154: Line 167:
 
   font-size: 12px;
 
   font-size: 12px;
 
   color: orange;
 
   color: orange;
−
   background: var(--dark);
+
   background: var(--color-dark);
 
   transform: scale(1, 0);
 
   transform: scale(1, 0);
 
   transform-origin: bottom;
 
   transform-origin: bottom;
Line 285: Line 298:
 
   padding: 50px;
 
   padding: 50px;
 
   padding-top: 125px;
 
   padding-top: 125px;
−
   background: var(--dark);
+
   background: var(--color-dark);
 
   list-style-type: none;
 
   list-style-type: none;
 
   -webkit-font-smoothing: antialiased;
 
   -webkit-font-smoothing: antialiased;
Line 334: Line 347:
 
     height: 50px;
 
     height: 50px;
 
     width: 100%;
 
     width: 100%;
−
     background: var(--dark);
+
     background: var(--color-dark);
 
   }
 
   }
 
    
 
    
Line 416: Line 429:
 
}
 
}
  
−
/* ------ PAGE ------ */
+
/* ------ CONTAINERS ------ */
−
.page {
+
 
−
max-width: 1600px;
+
.nav-cards {
−
margin: 0 auto;
+
  display: flex;
 +
  flex-wrap: wrap;
 +
  justify-content: center;
 +
  margin: 20px auto;
 
}
 
}
  
−
/* ------ CONTAINERS ------ */
+
.nav-card {
−
.text-container {
+
  width: 180px;
 +
  height: 180px;
 +
  margin: 10px;
 
   position: relative;
 
   position: relative;
−
   box-shadow: 2px 2px 20px rgba(0,0,0,0.1);
+
  color: white;
−
   min-height: 380px;
+
  text-align: center;
−
   padding-bottom: 50px;
+
  background: var(--color-software);
−
  margin: 20px;
+
   box-shadow: 2px 2px 10px rgba(0,0,0,0.25);
 +
   transition: 200ms;
 +
   border-radius: 3px;
 
}
 
}
  
−
.text-container .title {
+
.nav-card svg {
−
   color: white;
+
  position: absolute;
−
   background: var(--main-color);
+
  fill: white;
 +
  width: 50%;
 +
  height: 50%;
 +
  top: 10%;
 +
  left: 25%;
 +
}
 +
 
 +
.nav-card h2 {
 +
   position: absolute;
 +
  bottom: 0;
 +
  left: 5px;
 +
right: 5px;
 +
color: white;
 +
}
 +
 
 +
.nav-card::before, .nav-card::after {
 +
   content: '';
 +
  position: absolute;
 +
  top: 5px;
 +
  left: 5px;
 +
  right: 5px;
 +
  bottom: 5px;
 +
  transition: transform 400ms;
 +
}
 +
 
 +
.nav-card::before {
 +
  border-top: white solid 1px;
 +
  border-bottom: white solid 1px;
 +
  transform: scale(0, 1);
 +
}
 +
 
 +
.nav-card::after {
 +
  border-left: white solid 1px;
 +
  border-right: white solid 1px;
 +
  transform: scale(1, 0);
 +
}
 +
 
 +
.nav-card:hover::before {
 +
  transform: scale(1, 1);
 +
}
 +
 
 +
.nav-card:hover::after {
 +
  transform: scale(1, 1);
 +
}
 +
 
 +
.text-container {
 +
  position: relative;
 +
  text-align: center;
 +
  margin: 60px auto;
 
   padding: 10px;
 
   padding: 10px;
−
margin-top: 0;
+
  max-width: 1000px;
−
text-align: center;
+
 
}
 
}
  
−
.text-container .title::after {
+
.text-container h1 {
 +
  position: relative;
 +
  color: var(--color-primary);
 +
}
 +
 
 +
.text-container h1::after {
 
   content: '';
 
   content: '';
−
   display: block;
+
   position: absolute;
−
width: 90%;
+
  bottom: 0;
−
margin: 0 auto;
+
  left: 10%;
 +
  right: 10%;
 
   height: 4px;
 
   height: 4px;
 +
  border-radius: 2px;
 
   background: currentColor;
 
   background: currentColor;
 
}
 
}
  
−
.text-container .content {
+
.text-container p {
−
   margin: 10px 20px;
+
   margin-bottom: 20px;
−
}
+
−
 
+
−
.text-container img {
+
−
  float: right;
+
−
  height: 280px;
+
−
  margin-left: 20px;
+
−
  box-shadow: 2px 2px 20px rgba(0,0,0,0.1);
+
 
}
 
}
  
 
.nav-button {
 
.nav-button {
−
  position: absolute;
+
position: relative;
−
  bottom: 20px;
+
−
  right: 20px;
+
 
   padding: 10px 20px;
 
   padding: 10px 20px;
−
   background: var(--main-color);
+
   background: var(--color-primary);
 
   color: white;
 
   color: white;
 
   text-decoration: none;
 
   text-decoration: none;
Line 489: Line 554:
 
.nav-button:hover::after {
 
.nav-button:hover::after {
 
   transform: scale(1, 1);
 
   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;
 
−
}
 
 
}
 
}

Revision as of 13:53, 25 September 2018

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

root {

--color-primary: #1B5E20; --color-secondary: #C8E6C9;

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

--color-wetlab: #1B5E20;

--color-hardware: #3949AB;

--color-software: #424242; --color-software-secondary: #6a6a6a; }

/* ------ PAGE ------ */ .page.index { background: var(--color-secondary); } .page.software { background: var(--color-software-secondary); }

/* ----- 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%; }

body { font-family: "Century Gothic"; background: white; 

 font-size: 13px;

}

/* ----- NAVBAR ----- */ .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;
 height: 44px;
 padding: 5px;
 text-align: center;
 text-decoration: none;
 color: white;
 background: var(--color-dark);

fill: currentColor; z-index: 1; }

.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: -80px;
 border-radius: 0 0 50% 50%;
 background: var(--color-dark);

}

.sub-menu { 

 position: absolute;
 top: 54px;
 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(--color-dark);

transition: color 200ms; min-width: 96px; max-height: fit-content; }

.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(--color-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;

}

  1. menuToggle a {
 text-decoration: none;
 color: white;
 transition: color 0.3s ease;

}

  1. menuToggle a:hover {
 color: gray;

}

  1. menuToggle {
 display: none;
 position: relative;
 top: -35px;

left: 20px; width: 50px; 

 z-index: 1;
 -webkit-user-select: none;
 user-select: none;

}

  1. menuToggle input {
 display: block;
 width: 40px;
 height: 32px;
 position: absolute;
 top: -7px;
 left: -5px;
 
 cursor: pointer;
 
 opacity: 0; /* hide this */
 z-index: 2; /* and place it over the hamburger */
 
 -webkit-touch-callout: none;

}

/* 

* Just a quick hamburger
*/
  1. menuToggle span {
 display: block;
 width: 33px;
 height: 4px;
 margin-bottom: 5px;
 position: relative;
 background: white;
 border-radius: 3px;
 
 z-index: 1;
 
 transform-origin: 4px 0px;
 
 transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
             background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
             opacity 0.55s ease;

}

  1. menuToggle span:first-child

{ 

 transform-origin: 0% 0%;

}

  1. menuToggle span:nth-last-child(2)

{ 

 transform-origin: 0% 100%;

}

/* 

* Transform all the slices of hamburger
* into a crossmark.
*/
  1. menuToggle input:checked ~ span

{ 

 opacity: 1;
 transform: rotate(45deg) translate(-2px, -1px);
 background: white;

}

/* 

* But let's hide the middle one.
*/
  1. menuToggle input:checked ~ span:nth-last-child(3)

{ 

 opacity: 0;
 transform: rotate(0deg) scale(0.2, 0.2);

}

/* 

* Ohyeah and the last one should go the other direction
*/
  1. menuToggle input:checked ~ span:nth-last-child(2)

{ 

 transform: rotate(-45deg) translate(0, -1px);

}

/* 

* Make this absolute positioned
* at the top left of the screen
*/
  1. mobile-menu

{ 

 position: absolute;

width: 200px; 

 margin: -100px 0 0 -50px;
 padding: 50px;
 padding-top: 125px;
 background: var(--color-dark);
 list-style-type: none;
 -webkit-font-smoothing: antialiased;

/* to stop flickering of text in safari */ 

 transform-origin: 0% 0%;
 transform: translate(-100%, 0);
 
 transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);

}

  1. mobile-menu li

{ 

 padding: 5px 0;
 font-size: 16px;
 height: 0.75em;
 display: flex;
 align-items: center;

}

  1. mobile-menu li svg {
 width: 1em;
 height: 1em;
 margin-right: 10px;
 fill: currentColor;

}

  1. mobile-menu li span {
 width: 100%;
 height: 0.75em;
 background: none;

}

/* 

* And let's slide it in from the left
*/
  1. menuToggle input:checked ~ ul

{ 

 transform: none;

}

@media only screen and (max-width: 900px) { .home-button { display: none; } 

 .menu {
   height: 50px;
   width: 100%;
   background: var(--color-dark);
 }
 
 .menu .main-item {
   display: none;

}

#menuToggle { display: block; } }

/* ------ 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 { padding: 0; 

 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 0; background: rgb(50, 50, 50); text-align: center; color: white; font-size: 18px; }

/* ------ CONTAINERS ------ */

.nav-cards { 

 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 margin: 20px auto;

}

.nav-card { 

 width: 180px;
 height: 180px;
 margin: 10px;
 position: relative;
 color: white;
 text-align: center;
 background: var(--color-software);
 box-shadow: 2px 2px 10px rgba(0,0,0,0.25);
 transition: 200ms;
 border-radius: 3px;

}

.nav-card svg { 

 position: absolute;
 fill: white;
 width: 50%;
 height: 50%;
 top: 10%;
 left: 25%;

}

.nav-card h2 { 

 position: absolute;
 bottom: 0;
 left: 5px;

right: 5px; color: white; }

.nav-card::before, .nav-card::after { 

 content: ;
 position: absolute;
 top: 5px;
 left: 5px;
 right: 5px;
 bottom: 5px;
 transition: transform 400ms;

}

.nav-card::before { 

 border-top: white solid 1px;
 border-bottom: white solid 1px;
 transform: scale(0, 1);

}

.nav-card::after { 

 border-left: white solid 1px;
 border-right: white solid 1px;
 transform: scale(1, 0);

}

.nav-card:hover::before { 

 transform: scale(1, 1);

}

.nav-card:hover::after { 

 transform: scale(1, 1);

}

.text-container { 

 position: relative;
 text-align: center;
 margin: 60px auto;
 padding: 10px;
 max-width: 1000px;

}

.text-container h1 { 

 position: relative;
 color: var(--color-primary);

}

.text-container h1::after { 

 content: ;
 position: absolute;
 bottom: 0;
 left: 10%;
 right: 10%;
 height: 4px;
 border-radius: 2px;
 background: currentColor;

}

.text-container p { 

 margin-bottom: 20px;

}

.nav-button { position: relative; 

 padding: 10px 20px;
 background: var(--color-primary);
 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);

}