Difference between revisions of "Template:Tel-Hai/CSS"

 
(28 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
/* latin-ext */
 +
@font-face {
 +
  font-family: 'Bree Serif';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Bree Serif'), local('BreeSerif-Regular'), url(/wiki/images/e/e3/T--Tel-Hai--font.ttf) format('opentype');
 +
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 +
}
 +
/* latin */
 +
@font-face {
 +
  font-family: 'Bree Serif';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Bree Serif'), local('BreeSerif-Regular'), url(/wiki/images/e/e3/T--Tel-Hai--font.ttf) format('opentype');
 +
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
 +
}
 +
 +
 
#content {
 
#content {
 
width: 100%;
 
width: 100%;
Line 12: Line 30:
 
#topimg {
 
#topimg {
 
max-width: 100%;
 
max-width: 100%;
−
margin-bottom: -15rem;
+
}
 +
 
 +
body {
 +
font-size: 12px;
 
}
 
}
  
 
#pageContainer {
 
#pageContainer {
−
max-width: 60rem;
+
    font-family: 'Bree Serif';
−
margin: auto;
+
    max-width: 60rem;
−
background-color: rgba(255,255,255,0.8);
+
    margin: auto;
−
position: relative;
+
    background-color: rgba(255,255,255,0.8);
−
padding: 1rem 3rem;
+
    position: relative;
 +
    padding: 1rem 3rem;
 +
}
 +
 
 +
#HQ_page #pageContainer p {
 +
    font-size: 1.1em;
 +
    font-family: 'Bree Serif';
 +
}
 +
 
 +
#pageContainer h2 {
 +
    /*font-variant: unicase;*/
 +
    font-size: 3em;
 +
    text-shadow: 2px 2px 0px #c7e8ff;
 +
}
 +
 
 +
#pageContainer h1, #pageContainer h2, #pageContainer h3, #pageContainer h4, #pageContainer h5, #pageContainer h6 {
 +
  font-family: 'Bree Serif';
 +
}
 +
 
 +
 
 +
#pageContainer h2>span {
 +
  font-variant: normal;
 
}
 
}
  
Line 37: Line 79:
  
 
#menu-nav li {
 
#menu-nav li {
−
    display: inline-block;
+
display: inline-block;
−
    margin: 0;
+
margin: 0;
−
    padding: 0.5em 1em;
+
padding: 0.5em 1em;
−
    background: rgba(255,255,255,0.3);
+
background: rgb(159, 228, 109);
−
    font-weight: bold;
+
font-weight: bold;
−
    color: #444;
+
color: #444;
−
    border-bottom: 1px solid white;
+
border-bottom: 1px solid white;
 +
border-radius: 3em;
 
}
 
}
  
Line 67: Line 110:
 
     margin-left: -1em;
 
     margin-left: -1em;
 
     margin-top: 0.5em;
 
     margin-top: 0.5em;
 +
    z-index: 10;
 +
 
}
 
}
  
Line 75: Line 120:
  
 
#menu-nav li > ul > li {
 
#menu-nav li > ul > li {
 +
display: block;
 +
margin: 0;
 +
border: 0;
 +
padding: 0.1rem 0;
 +
font-weight: normal;
 +
margin-left: -1em;
 +
padding: 0.5em 1em;
 +
margin-bottom: 0.5em;
 +
}
 +
 +
.space-equally {
 +
  display: flex;
 +
  flex-flow: wrap;
 +
}
 +
 +
.flipper > .front >  h3 > span {
 +
    font-style: italic;
 +
}
 +
 +
.flipper > .front > h3 {
 +
    font-size: 3rem;
 +
    line-height: 3rem;
 +
  overflow: initial;
 +
 +
}
 +
 +
 +
/* CSS Flipper */
 +
 +
/* entire container, keeps perspective */
 +
.flip-container {
 +
perspective: 1000px;
 +
}
 +
/* flip the pane when hovered */
 +
.flip-container:hover .flipper, .flip-container.hover .flipper {
 +
transform: rotateY(180deg);
 +
}
 +
 +
.flip-container, .front, .back {
 +
width: 300px;
 +
height: 480px;
 +
  box-sizing: border-box;
 +
  margin: 5px;
 +
}
 +
 +
/* flip speed goes here */
 +
.flipper {
 +
transition: 0.6s;
 +
transform-style: preserve-3d;
 +
 +
position: relative;
 +
}
 +
 +
/* hide back of pane during swap */
 +
.front, .back {
 +
backface-visibility: hidden;
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
background: rgba(0, 50, 200, 0.1);
 +
border-radius: 1em;
 +
padding: 1.5em;
 +
}
 +
 +
/* front pane, placed above back */
 +
.front {
 +
z-index: 2;
 +
/* for firefox 31 */
 +
transform: rotateY(0deg);
 +
  text-align: center;
 +
}
 +
 +
/* back, initially hidden pane */
 +
.back {
 +
transform: rotateY(180deg);
 +
  font-size: 1.3em;
 +
}
 +
 +
 +
.notebook-entry figure {
 
     display: block;
 
     display: block;
−
     margin: 0;
+
     margin: 0 auto;
−
     border: 0;
+
     text-align: center;
−
    padding: 0.1rem 0;
+
 
}
 
}
 +
 +
 +
.engagement img, .collaborations img, .practices img {
 +
  max-width: 100%;
 +
  padding: 1em;
 +
  box-sizing: border-box;
 +
}
 +
 +
.description .image-holder, .proof .image-holder, .entrepreneurship .image-holder, .practices .image-holder {
 +
  text-align: center;
 +
}
 +
 +
.description .image-holder img, .entrepreneurship .image-holder img {
 +
  max-width: 75%;
 +
}
 +
 +
.person-card img {
 +
    float: right;
 +
    max-width: 300px;
 +
    margin-left: 2em;
 +
    max-height: 300px;
 +
}
 +
 +
.person-card {
 +
  clear: both;
 +
  margin-bottom: 15em;
 +
}
 +
 +
#HQ_page #pageContainer .person-card p {
 +
    font-size: 1.3em;
 +
}
 +
 +
.person-card p span {
 +
  font-weight: bold;
 +
}
 +
 +
.person-card:nth-child(2n) img {
 +
    float: left;
 +
    margin-left: 0;
 +
    margin-right: 2em;
 +
}
 +
 +
.sponsor {
 +
  clear: both;
 +
}
 +
 +
.sponsor img {
 +
  float: right;
 +
  margin-left: 2em;
 +
  max-width: 300px;
 +
  max-height: 300px;
 +
  margin-bottom: 2em;
 +
}
 +
 +
#pageContainer h5 { font-size: 1.2em; }
 +
#pageContainer h4 { font-size: 1.4em; }
 +
#pageContainer h3 { font-size: 1.7em; }

Latest revision as of 19:33, 19 October 2016

/* latin-ext */ @font-face { 

 font-family: 'Bree Serif';
 font-style: normal;
 font-weight: 400;
 src: local('Bree Serif'), local('BreeSerif-Regular'), url(/wiki/images/e/e3/T--Tel-Hai--font.ttf) format('opentype');
 unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;

} /* latin */ @font-face { 

 font-family: 'Bree Serif';
 font-style: normal;
 font-weight: 400;
 src: local('Bree Serif'), local('BreeSerif-Regular'), url(/wiki/images/e/e3/T--Tel-Hai--font.ttf) format('opentype');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;

}


  1. content {

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


  1. sideMenu, #top_title {
 display: none;

}

  1. topimg {

max-width: 100%; }

body { font-size: 12px; }

  1. pageContainer {
   font-family: 'Bree Serif';
   max-width: 60rem;
   margin: auto;
   background-color: rgba(255,255,255,0.8);
   position: relative;
   padding: 1rem 3rem;

}

  1. HQ_page #pageContainer p {
   font-size: 1.1em;
   font-family: 'Bree Serif';

}

  1. pageContainer h2 {
   /*font-variant: unicase;*/
   font-size: 3em;
   text-shadow: 2px 2px 0px #c7e8ff;

}

  1. pageContainer h1, #pageContainer h2, #pageContainer h3, #pageContainer h4, #pageContainer h5, #pageContainer h6 {
 font-family: 'Bree Serif';

}


  1. pageContainer h2>span {
  font-variant: normal;

}

.sideBox { 

   max-width: 30%;
   float: right;
   margin: 0 0 2rem 2rem;

}


blockquote { margin: 0; border-left: solid 2px #2196ed; padding-left: 0.5rem; }

  1. menu-nav li {

display: inline-block; margin: 0; padding: 0.5em 1em; background: rgb(159, 228, 109); font-weight: bold; color: #444; border-bottom: 1px solid white; border-radius: 3em; }

  1. menu-nav li a {
   color: #444;
   text-decoration: none;

}

  1. menu-nav li.active a, #menu-nav li:hover a {
   color: #000;

}

  1. menu-nav {
   float: right;

}

  1. menu-nav li>ul {
   display: none;
   position: absolute;
   margin: 0;
   background: rgba(255,255,255,0.7);
   padding: 0.5em 1em;
   margin-left: -1em;
   margin-top: 0.5em;
   z-index: 10;

}


  1. menu-nav li:hover>ul {
   display: block;

}

  1. menu-nav li > ul > li {

display: block; margin: 0; border: 0; padding: 0.1rem 0; font-weight: normal; margin-left: -1em; padding: 0.5em 1em; margin-bottom: 0.5em; }

.space-equally { 

 display: flex;
 flex-flow: wrap;

}

.flipper > .front > h3 > span { 

   font-style: italic;

}

.flipper > .front > h3 { 

   font-size: 3rem;
   line-height: 3rem;
 overflow: initial;

}


/* CSS Flipper */

/* entire container, keeps perspective */ .flip-container { perspective: 1000px; } /* flip the pane when hovered */ .flip-container:hover .flipper, .flip-container.hover .flipper { transform: rotateY(180deg); }

.flip-container, .front, .back { width: 300px; height: 480px; 

 box-sizing: border-box;
 margin: 5px;

}

/* flip speed goes here */ .flipper { transition: 0.6s; transform-style: preserve-3d;

position: relative; }

/* hide back of pane during swap */ .front, .back { backface-visibility: hidden; position: absolute; top: 0; left: 0; background: rgba(0, 50, 200, 0.1); border-radius: 1em; padding: 1.5em; }

/* front pane, placed above back */ .front { z-index: 2; /* for firefox 31 */ transform: rotateY(0deg); 

 text-align: center;

}

/* back, initially hidden pane */ .back { transform: rotateY(180deg); 

 font-size: 1.3em;

}


.notebook-entry figure { 

   display: block;
   margin: 0 auto;
   text-align: center;

}


.engagement img, .collaborations img, .practices img { 

 max-width: 100%;
 padding: 1em;
 box-sizing: border-box;

}

.description .image-holder, .proof .image-holder, .entrepreneurship .image-holder, .practices .image-holder { 

 text-align: center;

}

.description .image-holder img, .entrepreneurship .image-holder img { 

 max-width: 75%;

}

.person-card img { 

   float: right;
   max-width: 300px;
   margin-left: 2em;
   max-height: 300px;

}

.person-card { 

 clear: both;
 margin-bottom: 15em;

}

  1. HQ_page #pageContainer .person-card p {
   font-size: 1.3em;

}

.person-card p span { 

 font-weight: bold;

}

.person-card:nth-child(2n) img { 

   float: left;
   margin-left: 0;
   margin-right: 2em;

}

.sponsor { 

 clear: both;

}

.sponsor img { 

 float: right;
 margin-left: 2em;
 max-width: 300px;
 max-height: 300px;
 margin-bottom: 2em;

}

  1. pageContainer h5 { font-size: 1.2em; }
  2. pageContainer h4 { font-size: 1.4em; }
  3. pageContainer h3 { font-size: 1.7em; }