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

Line 98: Line 98:
 
.space-equally {
 
.space-equally {
 
   display: flex;
 
   display: flex;
 +
  flex-flow: wrap;
 +
}
 +
 +
.flipper > .front >  h3 > span {
 +
    font-style: italic;
 +
}
 +
 +
.flipper > .front > h3 {
 +
    font-size: 3rem;
 +
    line-height: 3rem;
 
}
 
}
  
Line 113: Line 123:
  
 
.flip-container, .front, .back {
 
.flip-container, .front, .back {
−
width: 320px;
+
width: 300px;
 
height: 480px;
 
height: 480px;
 +
  box-sizing: border-box;
 +
  margin: 5px;
 
}
 
}
  
Line 131: Line 143:
 
top: 0;
 
top: 0;
 
left: 0;
 
left: 0;
−
        background: white;
+
background: rgba(0, 50, 200, 0.1);
 +
border-radius: 1em;
 +
padding: 2em;
 
}
 
}
  

Revision as of 09:46, 13 October 2016

  1. content {

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


  1. sideMenu, #top_title {
 display: none;

}

  1. topimg {

max-width: 100%; margin-bottom: -15rem; }

  1. pageContainer {
   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;

}

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

}


  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: rgba(255,255,255,0.3);
   font-weight: bold;
   color: #444;
   border-bottom: 1px solid white;

}

  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;

}


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

}

  1. menu-nav li > ul > li {
   display: block;
   margin: 0;
   border: 0;
   padding: 0.1rem 0;

}

.space-equally { 

 display: flex;
 flex-flow: wrap;

}

.flipper > .front > h3 > span { 

   font-style: italic;

}

.flipper > .front > h3 { 

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

}


/* 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: 2em; }

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

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