Difference between revisions of "Template:TPHS San Diego"

Line 15: Line 15:
 
     - pros: easier to read, very organized
 
     - pros: easier to read, very organized
 
     - cons: might require some nasty workarounds
 
     - cons: might require some nasty workarounds
 +
- use vw and vh instead of % as a workaround for MediaWiki
 
- strive for material theme (https://material.io/)
 
- strive for material theme (https://material.io/)
 
     - solid, paper-like design
 
     - solid, paper-like design
Line 22: Line 23:
 
     margin: 0;
 
     margin: 0;
 
     padding: 0;
 
     padding: 0;
    width: 100%;
 
    height: auto;
 
 
}
 
}
  
 
.fullscreen_section{
 
.fullscreen_section{
     width: 100%;
+
     width: 100vw;
     height: 100vh !important;
+
     height: 100vh;
 
}
 
}
  
 
.small_section{
 
.small_section{
     width: 100%;
+
     width: 100vw;
     height: 30vh !important;
+
     height: 30vh;
 
}
 
}
  
Line 44: Line 43:
  
 
#section1 > .content_wrapper > .title{
 
#section1 > .content_wrapper > .title{
 +
    height: auto;
 
     text-align: center;
 
     text-align: center;
 
     font-family: Arial;
 
     font-family: Arial;
Line 104: Line 104:
  
 
#section4{
 
#section4{
     margin-bottom: 10%;
+
     margin-bottom: 10vh;
 
     background-color: rgb(68, 68, 68);
 
     background-color: rgb(68, 68, 68);
 
}
 
}
Line 122: Line 122:
 
#section5{
 
#section5{
 
     position: relative;
 
     position: relative;
     left: 15%;
+
     left: 15vw;
     width: 70%;
+
     width: 70vw;
     margin-bottom: 5%;
+
     margin-bottom: 5vh;
 
}
 
}
  
Line 135: Line 135:
  
 
#section5 > .menu{
 
#section5 > .menu{
     width: 100%;
+
     width: 100vw;
 
}
 
}
  
Line 191: Line 191:
  
 
#section5 > .menu > .project{
 
#section5 > .menu > .project{
     width: 100%;
+
     width: 100vw;
 
     min-width: 400px;
 
     min-width: 400px;
 
     background: url(https://images-na.ssl-images-amazon.com/images/I/41JvAoqeMfL._SY300_QL70_.jpg) no-repeat;
 
     background: url(https://images-na.ssl-images-amazon.com/images/I/41JvAoqeMfL._SY300_QL70_.jpg) no-repeat;
Line 199: Line 199:
  
 
#section5 > .menu > .outreach{
 
#section5 > .menu > .outreach{
     width: 40%;
+
     width: 40vw;
 
     min-width: 200px;
 
     min-width: 200px;
 
     background: url(https://images-na.ssl-images-amazon.com/images/I/41JvAoqeMfL._SY300_QL70_.jpg) no-repeat;
 
     background: url(https://images-na.ssl-images-amazon.com/images/I/41JvAoqeMfL._SY300_QL70_.jpg) no-repeat;
Line 207: Line 207:
  
 
#section5 > .menu > .team{
 
#section5 > .menu > .team{
     width: 40%;
+
     width: 40vw;
 
     min-width: 200px;
 
     min-width: 200px;
 
     background: url(https://images-na.ssl-images-amazon.com/images/I/41JvAoqeMfL._SY300_QL70_.jpg) no-repeat;
 
     background: url(https://images-na.ssl-images-amazon.com/images/I/41JvAoqeMfL._SY300_QL70_.jpg) no-repeat;
Line 215: Line 215:
  
 
#section5 > .menu > .attribution{
 
#section5 > .menu > .attribution{
     width: 40%;
+
     width: 40vw;
 
     min-width: 200px;
 
     min-width: 200px;
 
     background: url(https://images-na.ssl-images-amazon.com/images/I/41JvAoqeMfL._SY300_QL70_.jpg) no-repeat;
 
     background: url(https://images-na.ssl-images-amazon.com/images/I/41JvAoqeMfL._SY300_QL70_.jpg) no-repeat;

Revision as of 01:37, 20 August 2018