Difference between revisions of "Template:Lethbridge/css"

 
(57 intermediate revisions by one other user not shown)
Line 2: Line 2:
 
<head>
 
<head>
 
<!-- Fonts will be selected and then uploaded to the iGEM server when the decision is made -->
 
<!-- Fonts will be selected and then uploaded to the iGEM server when the decision is made -->
−
    <link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
+
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
−
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
+
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
−
    <link href="https://fonts.googleapis.com/css?family=Signika" rel="stylesheet">
+
−
    <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans" rel="stylesheet">
+
−
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
+
 
</head>
 
</head>
 
<style>
 
<style>
Line 16: Line 13:
 
#gear {z-index: 888; padding-top: 80px; padding-left: 100px;}
 
#gear {z-index: 888; padding-top: 80px; padding-left: 100px;}
 
#img-gear {-webkit-animation: rotation 2s infinite linear;}
 
#img-gear {-webkit-animation: rotation 2s infinite linear;}
−
@-webkit-keyframes rotation { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(359deg);}}
+
@-webkit-keyframes rotation {
 +
    from {
 +
        -webkit-transform: rotate(0deg);
 +
-moz-transform: rotate(0deg);
 +
-o-transform: rotate(0deg);
 +
transform: rotate(0deg);}
 +
    to {
 +
-webkit-transform: rotate(359deg);
 +
-moz-transform: rotate(359deg);
 +
-o-transform: rotate(359deg);
 +
transform: rotate(359deg);
 +
        }}
 
/* END LOGO CONTAINER */
 
/* END LOGO CONTAINER */
  
 
div#top_title {/*visibility: hidden;*/ display: none;}
 
div#top_title {/*visibility: hidden;*/ display: none;}
  
−
body {font-family: 'Ralway', sans-serif; background-color: #ffffff; color: darkslategrey !important; margin-left: 3% !important; margin-right: 3% !important;}
+
body {background-color: white; }
 +
/*background-image: url(https://static.igem.org/mediawiki/2018/c/c0/T--Lethbridge--backgroundTexture.jpg)*/
 +
/* Background cardboard texture designed by kues1@Freepik */
 +
 
 +
/* Alternative to body section, so we don't get the navbar or other components affected */
 +
.content {font-family: 'Ralway', sans-serif; color: darkslategrey !important; margin-left: 3% !important; margin-right: 3% !important; opacity: 0.999}
  
 
/* HEADERS */
 
/* HEADERS */
−
h1, h2, h3, h4, h5, h6 {color: black !important; font-family: 'Raleway', sans-serif;}
+
h1, h2, h3, h4, h5, h6 {/*color: black !important;*/ font-family: 'Permanent Marker', cursive !important;}
 
h1 {text-align: center; font-size: 24pt}
 
h1 {text-align: center; font-size: 24pt}
−
h2 {text-align: left; font-size: 18pt}
+
h2 {text-align: left; margin-left: 2em;font-size: 18pt}
−
h3 {text-align: left; font-size: 16pt}
+
h3 {text-align: left; margin-left: 2em font-size: 16pt}
−
h4 {text-align: left; font-size: 14pt}
+
h4 {text-align: left; margin-left: 2em font-size: 14pt}
−
h5 {text-align: left; font-size: 12pt}
+
h5 {text-align: left; margin-left: 2em font-size: 12pt}
 
h6 {text-align: center; font-size: 10pt}
 
h6 {text-align: center; font-size: 10pt}
  
−
/* INLINE BLOCK - div percentage width and alignment */
+
/* INLINE BLOCK - DIV % WIDTH, ALIGNMENT */
 
#div60mid {width: 60%; vertical-align:middle;}
 
#div60mid {width: 60%; vertical-align:middle;}
 
#div50mid {width: 50%; vertical-align:middle;}
 
#div50mid {width: 50%; vertical-align:middle;}
Line 54: Line 67:
 
#div20top {width: 20%; vertical-align:top;}
 
#div20top {width: 20%; vertical-align:top;}
  
−
/* font size */
+
/* FONT SIZE */
−
.f10 {font-size: calc(10px + 0.45vw) !important; line-height: calc (1.1em + 0.45vw) !important;}
+
.f10 {font-size: calc(10px + 0.45vw) !important; line-height: calc(1.1em + 0.45vw) !important;}
 +
.f11 {font-size: calc(11px + 0.45vw) !important; line-height: calc(1.1em + 0.45vw) !important;}
 
.f12 {font-size: calc(12px + 0.5vw) !important; line-height: calc(1.1em + 0.5vw) !important;}
 
.f12 {font-size: calc(12px + 0.5vw) !important; line-height: calc(1.1em + 0.5vw) !important;}
−
.f14 {font-size: calc(14px + 0.5vw) !important; line-height: calc(1.1em + 0.5vw) !important;}
+
.f13 {font-size: calc(13px + 0.5vw) !important; line-height: calc(1.1em + 0.45vw) !important;}
−
.f16 {font-size: calc(16px + 0.5vw) !important; line-height: calc(1.1em + 0.5vw) !important;}
+
.f14 {font-size: calc(14px + 0.5vw) !important; line-height: calc(1.1em + 0.55vw) !important;}
−
.f18 {font-size: calc(18px + 0.5vw) !important; line-height: calc(1.1em + 0.5vw) !important;}
+
.f16 {font-size: calc(16px + 0.5vw) !important; line-height: calc(1.1em + 0.60vw) !important;}
−
.f22 {font-size: calc(22px + 0.5vw) !important; line-height: calc(1.1em + 0.5vw) !important;}
+
.f18 {font-size: calc(18px + 0.5vw) !important; line-height: calc(1.1em + 0.65vw) !important;}
−
.f26 {font-size: calc(26px + 0.5vw) !important; line-height: calc(1.1em + 0.5vw) !important;}
+
.f22 {font-size: calc(22px + 0.5vw) !important; line-height: calc(1.1em + 0.70vw) !important;}
−
.f34 {font-size: calc(34px + 0.5vw) !important; line-height: calc(1.1em + 0.5vw) !important;}
+
.f26 {font-size: calc(26px + 0.5vw) !important; line-height: calc(1.1em + 0.75vw) !important;}
 +
.f34 {font-size: calc(34px + 0.5vw) !important; line-height: calc(1.1em + 0.80vw) !important;}
  
−
/* alignment, weight, and style */
+
/* ALIGNMENT, WEIGHT, AND STYLE */
 
#left {text-align: left !important; font-weight: normal;}
 
#left {text-align: left !important; font-weight: normal;}
 
#left-bold {text-align: left !important; font-weight: bold;}
 
#left-bold {text-align: left !important; font-weight: bold;}
Line 89: Line 104:
 
#justify-italic-bold {text-align: justify !important; font-weight: bold; font-style: italic;}
 
#justify-italic-bold {text-align: justify !important; font-weight: bold; font-style: italic;}
  
−
/* list formatting */
+
/* LIST FORMATTING */
 
.content li {width: 99%;}
 
.content li {width: 99%;}
  
−
/* link referencing */
+
/* LINK REFERENCING */
 
a#pageLink:link, a#pageLink:visited {color: #0f0f0f; text-decoration: underline;}
 
a#pageLink:link, a#pageLink:visited {color: #0f0f0f; text-decoration: underline;}
 
a#pageLink:hover, a#pageLink:active {color: #f5af3e; text-decoration: underline;}
 
a#pageLink:hover, a#pageLink:active {color: #f5af3e; text-decoration: underline;}
 +
.content p a {color: darkslategrey !important; text-decoration: underline !important;}
  
−
/* WIKI & HTML conflict workarounds */
+
/* WIKI & HTML CONFLICT WORKAROUNDS */
 
.content p {font-family: Raleway !important;}
 
.content p {font-family: Raleway !important;}
−
#left {text-align: left !important; font-weight: normal;}
+
 
 +
/* ADDED JULY 19 */
 +
 
 +
.teamDiv {position:relative;}
 +
.teamDiv h1 {color: black; font-size: 26pt;}
 +
.teamDiv h2 {color: black; font-weight: bold; font-size: 22pt;}
 +
.teamBios {margin-left: 3%; margin-right: 3%; color: black;}
 +
 
 +
/*
 +
.teamMember {
 +
    color: black;
 +
    height: 300px;
 +
    position: relative;}
 +
 
 +
.teamMember img {
 +
    z-index: 1;
 +
    float: left;
 +
    width: 250px;
 +
    height: 250px;
 +
    padding-right: 1%;
 +
    position: absolute; bottom: 0; left: 0;}
 +
 
 +
.teamMember h3 {
 +
    font-size: 20pt;
 +
    font-weight: bold;
 +
    padding: 0.5em;
 +
    z-index: 2;
 +
    border-style: dotted;
 +
    border-color: white !important;
 +
    position: absolute; top: -3%; left: 16%;}
 +
 
 +
.teamMember p {
 +
    z-index: 3;
 +
    width: 75%;
 +
    margin-left: 14em;
 +
    position: absolute; bottom: 0%; right: 5%;}*/
 
</style>
 
</style>
 
</html>
 
</html>

Latest revision as of 19:57, 17 October 2018