Difference between revisions of "Template:Linkoping Sweden/Style"

Line 1: Line 1:
−
<html>
 
−
<style>
 
 
/********************************* DEFAULT WIKI SETTINGS  ********************************/
 
/********************************* DEFAULT WIKI SETTINGS  ********************************/
  
Line 185: Line 183:
 
     margin-top: 10px;
 
     margin-top: 10px;
 
     font-weight: 700;
 
     font-weight: 700;
 +
}
 +
 +
.mw-headline {
 +
    display: inline-block;
 +
    width: 100%;
 +
    padding-top: 40px;
 +
    margin-top: -30px;
 
}
 
}
  
Line 374: Line 379:
 
     width: 100%;
 
     width: 100%;
 
}
 
}
 +
 +
.content {
 +
    position: relative;
 +
}
 +
 +
#toc {
 +
    position: absolute;
 +
    display: inline-block;
 +
    border: none;
 +
    border-right: 1px solid #888;
 +
    background: none;
 +
    margin-right: 10px;
 +
    margin-top: -20px;
 +
    padding-right: 10px;
 +
    width: 200px;
 +
    height: 100%;
 +
    left: 30px;
 +
}
 +
 +
#toc #toctitle {
 +
    text-align: left;
 +
    font-size: 18px;
 +
    padding-top: 12px;
 +
}
 +
 +
#toc > ul {
 +
    padding-top: 12px;
 +
    font-family: 'Raleway', sans-serif;
 +
    font-size: 14px;
 +
}
 +
 +
#toc a {
 +
    color: #333;
 +
}
 +
 +
#toc a {
 +
    display: inline-block;
 +
    border-left: 3px solid transparent;
 +
    padding-left: 5px;
 +
}
 +
 +
#toc ul {
 +
    margin: 0 !important;
 +
    width: 200px;
 +
}
 +
 +
.toc-fixed #toctitle {
 +
    position: fixed;
 +
    top: 40px;
 +
}
 +
 +
.toc-fixed > ul {
 +
    position: fixed;
 +
    top: 71px;
 +
}
 +
 +
#toc a.toc-selected {
 +
    border-left: 3px solid #019966;
 +
}
 +
 +
.content.toc-exist {
 +
    padding-left: 260px;
 +
}
 +
 +
  
 
/** Small screen **/
 
/** Small screen **/
Line 393: Line 463:
 
     .content-container {
 
     .content-container {
 
         width: 100%;
 
         width: 100%;
 +
    }
 +
 +
    #toc {
 +
        display: none;
 +
    }
 +
 +
    .content.toc-exist {
 +
        padding-left: 30px;
 
     }
 
     }
 
}
 
}
Line 543: Line 621:
  
 
}
 
}
−
</style>
 
−
</html>
 

Revision as of 21:16, 12 October 2016

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

  1. sideMenu, #top_title {
   display: none;

}

  1. content {
   padding: 0;
   width: 100%;
   margin-top: -7px;
   margin: auto;
   background-color: #f9f9f9

}

body { 

   background-color: #f9f9f9;

}

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

}

/*****************************************************************************************/

.menu { 

   margin: 30px auto 0;
   width: 1100px;

   background: #fff;

}

.menu img { 

   width: 200px;
   height: 141px;
   padding: 10px 30px 30px;

}

.menu .head { 

   position: relative;
   #overflow: hidden;
   background: url('https://static.igem.org/mediawiki/2016/b/bf/T--Linkoping_Sweden--LiU_bike_bg.jpg');
   background-size: cover;
   padding-top: 10px;
   padding-right: 13px;

}

  1. bodyContent .menu .head #social-media {
   display: flex;
   justify-content: center;
   float: right;

}

  1. bodyContent .menu .head #social-media a {
   display: block;
   align-items: stretch;
   text-align: center;
   vertical-align: top;
   width: 38px;
   height: 44px;
   cursor: pointer;
   padding-right: 0;

   transition: all .2s;

}

.menu .head #social-media a:hover { 

   transform: scale(1.2);

}

.menu .head a:first-child { 

   #margin-right: auto;

}

.menu .head #social-media img { 

   width: 24px;
   height: 24px;
   padding: 10px 7px;

}

.content-container { 

   width: 1100px;
   margin: 0 auto;
   background-color: #fff;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}

.content { 

   background: #fff;
   padding: 30px;
   padding-top: 0;

}

.closed-menu { 

   border: 1px solid #888;
   border-left: none;
   border-right: none;
   margin: 0 20px;
   margin-top: 30px;
   margin-bottom: 20px;

   font-family: 'Open Sans', sans-serif;
   font-size: 15px;

}

.menu-category { 

   display: inline-block;
   position: relative;

   text-align: center;
   width: 19%;
   box-sizing: border-box;

}

.menu-category a, .menu-category span { 

   display: block;
   padding: 13px;

   color: #000;

}

.menu-category .menu-items { 

   display: none;
   position: absolute;
   background: #fff;
   width: 100%;
   border: 1px solid #888;
   border-top: none;

}

.menu-category .menu-items a { 

   display: block;
   padding: 10px 0;
   border-bottom: 1px solid #888;
   margin: 0 15px;

   color: #000;

}

.menu-category .menu-items a:first-child { 

   border-top: 1px solid #888;

}

.menu-category .menu-items a:last-child { 

   border-bottom: none;

}

.menu-category a:hover { 

   color: #019966;
   text-decoration: none;

}

.menu-category:hover .menu-items { 

   display: block;

}

.open-menu { 

   width: 1000px;
   margin: 0 auto;
   background: #FFF;

   font-family: 'Open Sans', sans-serif;
   font-size: 14px;

}

.open-menu div { 

   display: inline-block;
   width: 19%;
   vertical-align: top;
   padding: 20px;
   box-sizing: border-box;

}

.open-menu div a { 

   display: block;
   color: #222;

   padding: 10px;

}

  1. HQ_page .content h1, .content h2, .content h3, .content h4, .content h5 {
   font-family: 'Playfair Display', serif;
   font-size: 187%;
   margin-top: 10px;
   font-weight: 700;

}

.mw-headline { 

   display: inline-block;
   width: 100%;
   padding-top: 40px;
   margin-top: -30px;

}

.content .mw-editsection { 

   display: none;

}

  1. HQ_page .content p {
   font-family: 'Raleway', sans-serif;
   font-size: 110%;
   line-height: 22px;

}

.content p i { 

   color: #222;

}

.footer { 

   margin-top: 60px;
   background-color: #000;
   color: #fff;
   font-family: 'Open Sans', sans-serif;

   display: flex;
   justify-content: space-between;

}

.footer img { 

   height: 140px;
   vertical-align: top;

}

.footer > div { 

   display: flex;
   padding: 20px;
   flex-grow: 2;
   flex-direction: row-reverse;
   justify-content: space-around;

}

.footer a { 

   color: #fff;
   float: left;

}

.footer > div div { 

   float: right;

}

.team-container { 

   position: relative;
   margin-top: 30px;
   display: flex;
   width: 100%;

   justify-content: flex-start;

}

.team-container div { 

   overflow: hidden;
   position: relative;



   transition: all 0.6s;

}

.team-container.images-3 div { 

   max-width: 33.4%;

}

.team-container.images-11 div { 

   max-width: 9.1%;

}

.team-container img { 

   height: 600px;
   margin: auto;
   position: relative;
   left: 50%;
   transform: translateX(-50%);
   display: block; /* optional */

   cursor: pointer;

   -webkit-filter: grayscale(100%);
   filter: grayscale(100%);
   filter: gray;
   filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");

   -webkit-transition: -webkit-filter 0.4s, transform 0.4s;
   -moz-transition: filter 0.4s, transform 0.4s;
   -ms-transition: filter 0.4s, transform 0.4s;
   -o-transition: filter 0.4s, transform 0.4s;
   transition: filter 0.4s, transform 0.4s;
   transition: -webkit-filter 0.4s, transform 0.4s;

}

.team-container img:hover, .team-container .active img { 

   -webkit-filter: none;
   filter: none;

}

.team-container.displaying div { 

   max-width: 0;

}

.team-container.displaying div.active { 

   max-width: 400px;

}

.team-container.displaying div.info, .team-container.displaying div.member-info { 

   max-width: 100%;

}

.team-container div.info p { 

   margin-top: 30px;

}

.team-container div.info { 

   position: absolute;
   top: 0;
   left: 400px;
   bottom: 0;
   right: 0;
   margin: 20px;
   max-width: 100%;

}

.team-container div.member-info { 

   max-width: 100%;

}

.team-container div.info .info-close { 

   float: right;
   margin-top: 17px;
   background: #000;
   padding: 5px 10px;
   color: #fff;

   cursor: pointer;

   -webkit-transition: background 0.4s;
   -moz-transition: background 0.4s;
   -ms-transition: background 0.4s;
   -o-transition: background 0.4s;
   transition: background 0.4s;

}

.team-container div.info .info-close:hover { 

   background: #666;

}

  1. member-info {
   display: none;

}

img.cover { 

   width: 100%;
   height: auto;

}

.menu-button { 

   display: none;

}

  1. mobile-menu {
   display: none;

}

  1. sponsors {
   font-size: 0;
   margin: 10px;

}

  1. sponsors p {
   margin-left: 20px;
   font-family: 'Raleway', sans-serif;
   margin-bottom: 0;

}

  1. sponsors a {
   display: inline-block;
   width: 20%;
   box-sizing: border-box;
   padding: 0 20px;

}

  1. sponsors img {
   width: 100%;

}

.content { 

   position: relative;

}

  1. toc {
   position: absolute;
   display: inline-block;
   border: none;
   border-right: 1px solid #888;
   background: none;
   margin-right: 10px;
   margin-top: -20px;
   padding-right: 10px;
   width: 200px;
   height: 100%;
   left: 30px;

}

  1. toc #toctitle {
   text-align: left;
   font-size: 18px;
   padding-top: 12px;

}

  1. toc > ul {
   padding-top: 12px;
   font-family: 'Raleway', sans-serif;
   font-size: 14px;

}

  1. toc a {
   color: #333;

}

  1. toc a {
   display: inline-block;
   border-left: 3px solid transparent;
   padding-left: 5px;

}

  1. toc ul {
   margin: 0 !important;
   width: 200px;

}

.toc-fixed #toctitle { 

   position: fixed;
   top: 40px;

}

.toc-fixed > ul { 

   position: fixed;
   top: 71px;

}

  1. toc a.toc-selected {
   border-left: 3px solid #019966;

}

.content.toc-exist { 

   padding-left: 260px;

}


/** Small screen **/

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

   .menu {
       margin-top: 0;
       width: 100%;
   }

   #mw-content-text>p {
       margin: 0;
   }

   #globalWrapper {
       padding-bottom: 0;
   }

   .content-container {
       width: 100%;
   }

   #toc {
       display: none;
   }

   .content.toc-exist {
       padding-left: 30px;
   }

}

/** Mobile **/ @media screen and (max-width: 768px) { 

   .menu .head {
       display: block;
   }

   .menu .head a:first-child {
       width: 100%;
       display: block;
   }

   .menu .head > a:first-child img {
       width: 50%;
       height: auto;
       box-sizing: border-box;
   }

   #bodyContent .menu .head #social-media {
       display: none;
   }

   .menu-button {
       display: block;
       background: none;
       border-color: transparent;
       position: absolute;
       top: 10px;
       right: 10px;

       width: 48px;
       height: 48px;
   }

   .menu .menu-button {
       top: 11px;
   }

   .menu-button span {
       display: block;
       height: 3px;
       width: auto;
       border-radius: 2px;
       background: #000;
       margin-bottom: 4px;
       margin-left: 4px;
       margin-right: 4px;
   }

   .menu-button span:first-child {
       margin-top: 10px;
   }

   .closed-menu {
       display: none;

       position: fixed;
       top: 18px;
       left: 0;
       background: #fff;
       margin: 0;
       width: 100%;
       height: 100%;
       overflow: scroll;

       z-index: 888;
   }

   .closed-menu .menu-category {
       display: block;
       width: 100%;
       text-align: left;
       padding-left: 20px;
   }

   .closed-menu .menu-category:last-child {
       padding-bottom: 30px;
   }

   .menu-category .menu-items {
       display: block;
       position: relative;

       border: none;
   }

   .menu-category .menu-items a {
       border: none !important;
       margin-left: 30px;
   }

   .menu-category > a {
       font-size: 18px;
   }

   #mobile-menu {
       display: block;
       padding: 26px;
       font-size: 24px;
       padding-left: 20px;
       box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
       margin-bottom: 16px;
   }

   #mobile-menu div {
       display: inline-block;
   }

   #bodyContent #mobile-menu a {
       padding: 0 3px;
       text-decoration: none;
   }

   #mobile-menu img {
       width: 24px;
       height: 24px;
       -webkit-filter: invert(1);
       margin-bottom: 6px;
   }

   .footer {
       flex-wrap: wrap;
       flex-direction: row;
   }

   .footer > div {
       display: flex;
       justify-content: space-around;
   }

   .footer img {
       height: auto;
       width: 100%;
   }

   .footer > div div {
       margin: 0;
       float: none;
   }

   #sponsors a {
       display: block;
       width: 100%;
       padding: 20px;
   }


}