Difference between revisions of "Template:UAlberta/CSS"

Line 25: Line 25:
 
**************************************** */
 
**************************************** */
  
−
.ua-research-content {
+
.ua-home {
−
   padding: 50px 0;
+
   position: relative;
 +
  overflow: hidden;
 
}
 
}
  
−
.ua-banner {
+
.ua-home-section {
−
   height: 350px;
+
   position: relative;
 
}
 
}
  
−
.ua-banner img {
+
.ua-home-section:nth-child(2) {
 +
  margin-bottom: 200px;
 +
}
 +
 
 +
.ua-stripes {
 
   width: 100%;
 
   width: 100%;
 
   height: 100%;
 
   height: 100%;
−
   object-fit: cover
+
   position: absolute;
 +
  transform-origin: 0;
 +
  transform: skewY(-12deg);
 +
  display: grid;
 +
  grid-template: repeat(10, 76px) / repeat(10, 1fr);
 
}
 
}
  
−
.ua-global-map {
+
.ua-home-section:nth-child(1) .ua-stripes {
−
   position: relative;
+
   /* background: linear-gradient(#9370DB, #E6E6FA); */
 +
  background: linear-gradient(rgb(255, 255, 255), rgb(248, 248, 213));
 +
  z-index: -1;
 
}
 
}
  
−
.ua-global-map img {
+
.ua-home-section:nth-child(1) .ua-stripes span:nth-child(1) {
−
   transition: all 0.2s;
+
   grid-area: 1 / 1 / 4 / -1;
 +
  /* background: linear-gradient(168deg, #800080, #DA70D6); */
 +
  background: linear-gradient(168deg, #FFDF00, #FFA500);
 
}
 
}
  
−
.location-marker-1 {
+
.ua-home-section:nth-child(1) .ua-stripes span:nth-child(2) {
−
   position: absolute;
+
   grid-area: 4 / 6 / 5 / -1;
−
   width: 3%;
+
   /* background: linear-gradient(270deg, #800080, #DA70D6); */
−
   top: 29%;
+
   background: linear-gradient(168deg, #FFDF00, #FFA500);
−
  left: 9.5%;
+
 
}
 
}
  
−
.location-marker-2 {
+
/* .ua-home-section:nth-child(1) .ua-stripes span:nth-child(3) {
−
   position: absolute;
+
   grid-area: 5 / 8 / 6 / -1;
−
   width: 3%;
+
   background: linear-gradient(-12deg, #800080, #DA70D6);
−
   top: 13%;
+
} */
−
   left: 11.5%;
+
 
 +
.ua-home-section:nth-child(1) .ua-stripes span:nth-child(4) {
 +
   grid-area: 9 / 8 / -2 / -1;
 +
   /* background: linear-gradient(270deg, #800080, #DA70D6); */
 +
  background: linear-gradient(168deg, #FFDF00, #FFA500);
 
}
 
}
  
−
.location-marker-3 {
+
.ua-home-section:nth-child(1) .ua-stripes span:nth-child(5) {
−
   position: absolute;
+
   grid-area: 10 / 10 / -2 / -1;
−
   width: 3%;
+
   /* background: linear-gradient(168deg, #800080, #DA70D6); */
−
   top: 13%;
+
   background: linear-gradient(168deg, #FFDF00, #FFA500);
−
  left: 11%;
+
 
}
 
}
  
−
.location-marker-4 {
+
/* .ua-home-section:nth-child(1) .ua-stripes span:nth-child(6) {
−
   position: absolute;
+
   grid-area: 10 / 1 / -1 / 4;
−
   width: 3%;
+
   background: linear-gradient(145deg, #800080, #DA70D6);
−
  top: 12.5%;
+
} */
−
   left: 44.5%;
+
 
 +
.ua-home-section:nth-child(1) .ua-stripes span:nth-child(6) {
 +
  grid-area: 10 / 1 / -1 / -1;
 +
   /* background: linear-gradient(145deg, #800080, #DA70D6); */
 +
  background: linear-gradient(90deg, #FFDF00, #FFA500);
 
}
 
}
  
−
.ua-global-map a img:hover {
+
.ua-home-section:nth-child(2) .ua-stripes {
−
   transform: translateY(-18%);
+
   background: #fff;
 +
  z-index: -1;
 
}
 
}
  
−
.location-marker-2:hover {
+
.ua-home-section:nth-child(3) .ua-stripes {
−
   z-index: 1;
+
  /* background: #E6E6FA; */
 +
  background: rgb(248, 248, 213);
 +
   z-index: -1;
 
}
 
}
  
−
.location-marker-3:hover {
+
.ua-home-section-hero {
−
   z-index: 1;
+
   position: relative;
 +
  height: 760px;
 
}
 
}
  
−
.ua-research-content h1 {
+
.ua-home-section-hero .row {
−
   font-family: 'Amiko', sans-serif;
+
   height: 760px;
−
  font-size: 128px;
+
−
  /* color: #007bb8; */
+
−
  color: #800080;
+
−
  text-align: center;
+
−
  margin-top: 20px;
+
−
  margin-bottom: 70px;
+
−
  /* padding-top: 0; iGEM */
+
 
}
 
}
  
−
.ua-research-content h2 {
+
.ua-porphyrin {
−
   font-family: 'Amiko', sans-serif;
+
   position: absolute;
−
  font-size: 48px;
+
−
  /* color: #007bb8; */
+
−
  color: #800080;
+
−
  text-align: left;
+
 
}
 
}
  
−
.ua-research-content h3 {
+
.ua-porphyrin:nth-child(1) {
−
   font-family: 'Amiko', sans-serif;
+
   left: 0;
−
  font-size: 48px;
+
−
  /* color: #007bb8; */
+
−
  color: #800080;
+
−
  margin: 40px 0;
+
 
}
 
}
  
−
.ua-research-content h4 {
+
.ua-porphyrin:nth-child(2) {
−
   font-family: 'Amiko', sans-serif;
+
   right: 0;
−
  font-size: 32px;
+
−
  color: #007bb8;
+
−
  margin: 40px 0;
+
 
}
 
}
  
−
.ua-research-content p {
+
.ua-porphyrin:nth-child(3) {
−
   font-family: 'Karla', sans-serif !important;
+
   left: 0;
−
  line-height: 160%;
+
−
  text-align: justify;
+
−
  font-size: 20px !important;
+
−
  margin: 20px;
+
 
}
 
}
  
−
.ua-navbar {
+
.ua-porphyrin:nth-child(4) {
−
   /* background: #8478b8; */
+
   left: 0;
−
  background: #800080;
+
 
}
 
}
  
−
.ua-navbar-brand {
+
.ua-porphyrin:nth-child(5) {
−
   height: 50px;
+
   right: 0;
−
  width: 272px;
+
 
}
 
}
  
−
.ua-footer {
+
.ua-porphyrin:nth-child(6) {
−
   /* background: #8478b8; */
+
   left: 0;
−
  background: #800080;
+
−
  height: 200px;
+
−
  width: 100%;
+
−
  margin-bottom: -5px;
+
 
}
 
}
  
−
.ua-home {
+
.ua-porphyrin img {
 
   position: relative;
 
   position: relative;
−
  overflow: hidden;
 
 
}
 
}
  
−
.ua-home .ua-navbar {
+
.ua-porphyrin:nth-child(1) img {
−
   background: transparent;
+
   top: 100px;
 +
  left: -240px;
 +
  width: 75%;
 +
  height: auto;
 +
  transform: rotate(16deg);
 
}
 
}
  
−
.ua-home-section {
+
.ua-porphyrin:nth-child(2) img {
−
   position: relative;
+
   float: right;
 +
  top: 250px;
 +
  right: -500px;
 +
  width: 120%;
 +
  height: auto;
 +
  transform: rotate(12deg);
 
}
 
}
  
−
.ua-stripes {
+
.ua-porphyrin:nth-child(3) img {
−
   width: 100%;
+
   top: 720px;
−
   height: 100%;
+
   left: -180px;
−
   position: absolute;
+
   width: 60%;
−
   transform-origin: 0;
+
   height: auto;
−
   transform: skewY(-12deg);
+
   transform: rotate(-124deg);
−
  display: grid;
+
−
  grid-template: repeat(10, 76px) / repeat(10, 1fr);
+
 
}
 
}
  
−
.ua-home-section:nth-child(1) .ua-stripes {
+
.ua-porphyrin:nth-child(4) img {
−
   background: linear-gradient(#9370DB, #FFF);
+
   top: 130px;
−
   z-index: -1;
+
   left: -240px;
 +
  width: 80%;
 +
  height: auto;
 +
  transform: rotate(40deg);
 
}
 
}
  
−
.ua-home-section:nth-child(1) .ua-stripes span:nth-child(1) {
+
.ua-porphyrin:nth-child(5) img {
−
   grid-area: 1 / 1 / 4 / -1;
+
   float: right;
−
   background: linear-gradient(168deg, #800080, #DA70D6);
+
   top: 160px;
 +
  right: -465px;
 +
  width: 120%;
 +
  height: auto;
 +
  transform: rotate(-5deg);
 
}
 
}
  
−
.ua-home-section:nth-child(1) .ua-stripes span:nth-child(2) {
+
.ua-porphyrin:nth-child(6) img {
−
   grid-area: 4 / 6 / 5 / -1;
+
   top: 840px;
−
   background: linear-gradient(270deg, #800080, #DA70D6);
+
   left: -250px;
 +
  width: 80%;
 +
  height: auto;
 +
  transform: rotate(-124deg);
 
}
 
}
  
−
/* .ua-home-section:nth-child(1) .ua-stripes span:nth-child(3) {
+
.ua-home-section-secondary {
−
   grid-area: 5 / 8 / 6 / -1;
+
   position: relative;
−
   background: linear-gradient(-12deg, #800080, #DA70D6);
+
  height: 760px;
−
} */
+
  /* background: #E6E6FA; */
 +
   background: rgb(248, 248, 213);
 +
  z-index: -1;
 +
}
  
−
.ua-home-section:nth-child(1) .ua-stripes span:nth-child(4) {
+
.ua-research-content {
−
   grid-area: 9 / 8 / -2 / -1;
+
   padding: 50px 0;
−
  background: linear-gradient(270deg, #800080, #DA70D6);
+
 
}
 
}
  
−
.ua-home-section:nth-child(1) .ua-stripes span:nth-child(5) {
+
.ua-navbar {
−
   grid-area: 10 / 10 / -2 / -1;
+
   /* background: #8478b8; */
−
   background: linear-gradient(168deg, #800080, #DA70D6);
+
   background: #800080;
 
}
 
}
  
−
/* .ua-home-section:nth-child(1) .ua-stripes span:nth-child(6) {
+
.ua-navbar-brand {
−
   grid-area: 10 / 1 / -1 / 4;
+
   height: 50px;
−
   background: linear-gradient(145deg, #800080, #DA70D6);
+
   width: 272px;
−
} */
+
−
 
+
−
.ua-home-section:nth-child(1) .ua-stripes span:nth-child(6) {
+
−
  grid-area: 10 / 1 / -1 / 6;
+
−
  background: linear-gradient(145deg, #800080, #DA70D6);
+
 
}
 
}
  
−
.ua-home-section:nth-child(2) .ua-stripes {
+
.ua-banner {
−
   background: #fff;
+
   height: 350px;
−
  z-index: -1;
+
 
}
 
}
  
−
.ua-home-section:nth-child(3) .ua-stripes {
+
.ua-banner img {
−
   /* background: #E6E6FA; */
+
   width: 100%;
−
   background: #E6E6FA;
+
   height: 100%;
−
   z-index: -1;
+
   object-fit: cover
 
}
 
}
  
−
.ua-home-section-content {
+
.ua-global-map {
 
   position: relative;
 
   position: relative;
−
  display: grid;
 
−
  grid-template: repeat(10, 76px) / repeat(8, 1fr);
 
 
}
 
}
  
−
.ua-home-hero {
+
.ua-global-map img {
−
   grid-area: 3 / 2 / 8 / -2;
+
   transition: all 0.2s;
−
  text-align: left;
+
 
}
 
}
  
−
.ua-home-image {
+
.location-marker-1 {
−
   grid-area: 5 / 6 / -1 / -2;
+
   position: absolute;
 +
  width: 3%;
 +
  top: 29%;
 +
  left: 9.5%;
 
}
 
}
  
−
.ua-home-image img {
+
.location-marker-2 {
−
   transform: scale(1.5);
+
   position: absolute;
 +
  width: 3%;
 +
  top: 13%;
 +
  left: 11.5%;
 
}
 
}
  
−
.ua-home-hero h1 {
+
.location-marker-3 {
−
   font-family: 'Amiko', sans-serif;
+
   position: absolute;
−
   font-size: 48px;
+
   width: 3%;
−
   color: #4B0082;
+
   top: 13%;
−
   margin-bottom: 2rem;  
+
   left: 11%;
 
}
 
}
  
−
.ua-home-hero p {
+
.location-marker-4 {
−
   font-family: 'Karla', sans-serif;
+
   position: absolute;
−
   line-height: 160%;
+
   width: 3%;
−
   text-align: justify;
+
   top: 12.5%;
−
   font-size: 18px;
+
   left: 44.5%;
−
  color: #000;
+
−
  margin-bottom: 2rem;
+
−
  max-width: 50%;
+
 
}
 
}
  
−
.ua-home-section-block {
+
.ua-global-map a img:hover {
−
   grid-area: 1 / 2 / 5 / 5;
+
   transform: translateY(-18%);
−
  text-align: right;
+
 
}
 
}
  
−
.ua-home-section-block h1 {
+
.location-marker-2:hover {
−
   font-family: 'Amiko', sans-serif;
+
   z-index: 1;
−
  font-size: 64px;
+
−
  color: #4B0082;
+
−
  margin-bottom: 2rem;  
+
 
}
 
}
  
−
.ua-home-section-block p {
+
.location-marker-3:hover {
−
   font-family: 'Karla', sans-serif;
+
   z-index: 1;
−
  line-height: 160%;
+
−
  font-size: 18px;
+
−
  color: #000;
+
−
  margin-bottom: 2rem;
+
 
}
 
}
  
−
.ua-home-cards {
+
.ua-footer {
−
   grid-area: 8 / 2 / -1 / -2;
+
   /* background: #8478b8; */
 +
  background: #800080;
 +
  /* background: #FFA500; */
 +
  height: 200px;
 +
  width: 100%;
 +
  margin-bottom: -5px;
 
}
 
}
  
−
.ua-home-section-secondary {
+
.ua-flipImage {
−
   position: relative;
+
   transform: scaleX(-1);
−
  height: 760px;
+
−
  background: #E6E6FA;
+
 
}
 
}
  
−
.ua-home-section-navigation {
+
/* ****************************************
−
  text-align: center;
+
* Header and paragraph styles
−
}
+
**************************************** */
  
−
.ua-home-section-navigation h1 {
+
.ua-home h1 {
 
   font-family: 'Amiko', sans-serif;
 
   font-family: 'Amiko', sans-serif;
−
   font-size: 64px;
+
   font-size: 48px;
 
   color: #4B0082;
 
   color: #4B0082;
−
  margin-bottom: 2rem;
 
 
}
 
}
  
−
.ua-home-section-navigation p {
+
.ua-home p {
 
   font-family: 'Karla', sans-serif;
 
   font-family: 'Karla', sans-serif;
 +
  font-size: 20px;
 
   line-height: 160%;
 
   line-height: 160%;
−
   font-size: 18px;
+
   text-align: justify;
 
   color: #000;
 
   color: #000;
−
  margin-bottom: 4rem;
 
 
}
 
}
  
−
.ua-home-video {
+
.ua-home-section-primary p {
−
   grid-area: 1 / 5 / -1 / -2;
+
   padding: 20px;
−
  text-align: right;
+
−
  margin-left: 80px;
+
−
  margin-top: 60px;
+
 
}
 
}
  
−
.card-deck .card-body h5 {
+
.ua-research-content h1 {
 +
  font-family: 'Amiko', sans-serif;
 +
  font-size: 128px;
 +
  /* color: #007bb8; */
 +
  color: #800080;
 
   text-align: center;
 
   text-align: center;
 +
  margin-top: 20px;
 +
  margin-bottom: 70px;
 +
  /* padding-top: 0; iGEM */
 
}
 
}
  
−
@media (min-width: 880px) {
+
.ua-research-content h2 {
−
   .card-deck .card-body p {
+
   font-family: 'Amiko', sans-serif;
−
    display: none;
+
  font-size: 48px;
−
   }
+
   /* color: #007bb8; */
 +
  color: #800080;
 +
  text-align: left;
 +
  /* margin: 40px 0;
 +
  margin-top: 80px; */
 
}
 
}
  
−
/* .ua-home-section-info {
+
.ua-research-content h3 {
−
   grid-area: 3 / 2 / -1 / -2;
+
   font-family: 'Amiko', sans-serif;
−
} */
+
  font-size: 48px;
 +
  /* color: #007bb8; */
 +
  color: #800080;
 +
  margin: 40px 0;
 +
}
  
−
/* .ua-home-section-info .tab-content {
+
.ua-research-content h4 {
−
   font-family: 'Karla', sans-serif;
+
  font-family: 'Amiko', sans-serif;
 +
  font-size: 32px;
 +
  color: #007bb8;
 +
  margin: 40px 0;
 +
}
 +
 
 +
.ua-research-content p {
 +
   font-family: 'Karla', sans-serif !important;
 
   line-height: 160%;
 
   line-height: 160%;
−
   font-size: 18px;
+
   text-align: justify;
−
   color: #000;
+
   font-size: 20px !important;
−
   margin-bottom: 2rem;
+
   margin: 20px;
−
} */
+
}
 +
 
 +
/* ****************************************
 +
* Overrides
 +
**************************************** */
  
−
/* Overrides */
 
 
.navbar-dark .navbar-nav .nav-link {
 
.navbar-dark .navbar-nav .nav-link {
 
   color: rgba(255, 255, 255, 0.75);
 
   color: rgba(255, 255, 255, 0.75);
Line 354: Line 377:
 
.card img {
 
.card img {
 
   border-radius: 8px;
 
   border-radius: 8px;
 +
}
 +
 +
.fixed-top {
 +
  position: absolute;
 
}
 
}
  
Line 359: Line 386:
 
   font-family: 'Amiko', sans-serif;
 
   font-family: 'Amiko', sans-serif;
 
}
 
}
−
 
−
/* font-family: 'Amiko', sans-serif;
 
−
font-family: 'Karla', sans-serif; */
 
  
 
</style>
 
</style>
 
</html>
 
</html>

Revision as of 22:58, 16 October 2018