Difference between revisions of "Team:UCSC/CSS-2"

(Created page with "{{:Team:UCSC/CSS-Fonts}} <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <style> →‎Remove iGEM site settings: #home_logo,...")
 
Line 30: Line 30:
 
   --active-div-color: #084172; /* not used */
 
   --active-div-color: #084172; /* not used */
  
−
   --main-txt-color: #545454; /* grey */
+
   --main-txt-color: ##707070; /* grey */
 
   --navbar-txt-color: #FFFFFF; /* white */
 
   --navbar-txt-color: #FFFFFF; /* white */
 
   --hover-txt-color: #555555; /* dark grey */
 
   --hover-txt-color: #555555; /* dark grey */
Line 56: Line 56:
  
 
h1, h2, h3, h4, h5, h6 {
 
h1, h2, h3, h4, h5, h6 {
 +
  font-family: var(--main-txt-font) !important;
 
   font-weight: 300 !important;
 
   font-weight: 300 !important;
 +
  color: var(--main-txt-color) !important;
 
}
 
}
  
Line 201: Line 203:
 
/*===== BASIC PAGE CLASSES =====*/ /* TODO: remove all "section-title" / "p-title" classes once switched to h1-6 */
 
/*===== BASIC PAGE CLASSES =====*/ /* TODO: remove all "section-title" / "p-title" classes once switched to h1-6 */
  
−
h1, h3, h5, .flex-row, .section-title, .flex-col .section-title, .flex-row p:not(.image-inpage-title):not(.p-title){
+
h3 {
−
  font-family: var(--main-txt-font) !important;
+
−
/*  font-family: 'roboto' !important; */
+
−
  font-size: 1em !important;
+
−
  color: var(--main-txt-color) !important;
+
−
}
+
−
 
+
−
h1, .section-title, .flex-col .section-title {
+
−
  font-family: var(--main-txt-font) !important;
+
−
/*  font-family: 'roboto' !important; */
+
−
}
+
−
 
+
−
h3, .p-title, .flex-row .p-title {
+
−
  font-family: var(--main-txt-font) !important;
+
−
/*  font-family: 'roboto' !important; */
+
 
   font-size: 1.5em !important;
 
   font-size: 1.5em !important;
 
}
 
}
  
−
h4, .p-title, .flex-row .p-title {
+
h4 {
−
  font-family: var(--main-txt-font) !important;
+
−
/*  font-family: 'roboto' !important; */
+
 
   font-size: 1.5em !important;
 
   font-size: 1.5em !important;
 
   color: var(--sectionTitle-txt-color, #0C5798);
 
   color: var(--sectionTitle-txt-color, #0C5798);
 
}
 
}
  
−
h5, .p-title, .flex-row .p-title {
+
h5 {
−
  font-family: var(--main-txt-font) !important;
+
−
/*  font-family: 'roboto' !important; */
+
 
   font-size: 1.25em !important;
 
   font-size: 1.25em !important;
 
}
 
}
  
−
h6, .p-title, .flex-row .p-title {
+
h6 {
−
  font-family: var(--main-txt-font) !important;
+
−
/*  font-family: 'roboto' !important; */
+
 
   font-size: 1.25em !important;
 
   font-size: 1.25em !important;
 
   color: var(--sectionTitle-txt-color, #0C5798);
 
   color: var(--sectionTitle-txt-color, #0C5798);
Line 254: Line 236:
 
}
 
}
  
−
.header-title, .flex-row {
+
h1, .flex-row {
 
   display: flex;
 
   display: flex;
 
   flex-flow: row wrap;
 
   flex-flow: row wrap;
Line 260: Line 242:
 
}
 
}
  
−
.header-image, .header-title {
+
.header-image, h1 {
 
   justify-content: center;
 
   justify-content: center;
 
   font-size: 3em;
 
   font-size: 3em;
 
   line-height: normal !important;
 
   line-height: normal !important;
 +
}
 +
 +
h1 {
 +
  position: relative;
 +
  text-align: center !important;
 +
  font-size: calc(60px + (70 - 60) * ((100vw - 800px) / (1600 - 800))) !important;
 +
  color: white !important;
 +
/*  font-family: var(--main-txt-font) !important; */
 +
  font-family: var(--second-txt-font) !important; /* test font */
 +
  margin-top: -7px;
 +
  top: 50%;
 +
  left: 50%;
 +
  transform: translate(-50%, -50%);
 
}
 
}
  
Line 287: Line 282:
 
   background-position: top;
 
   background-position: top;
 
}
 
}
−
 
−
.header-title {
 
−
  position: relative;
 
−
  text-align: center !important;
 
−
  font-size: calc(60px + (70 - 60) * ((100vw - 800px) / (1600 - 800))) !important;
 
−
  color: white !important;
 
−
/*  font-family: var(--main-txt-font) !important; */
 
−
  font-family: var(--second-txt-font) !important; /* test font */
 
−
  margin-top: -7px;
 
−
  top: 50%;
 
−
  left: 50%;
 
−
  transform: translate(-50%, -50%);
 
−
}
 
−
 
  
 
.header-title-progress {
 
.header-title-progress {

Revision as of 17:38, 19 September 2018