Difference between revisions of "Template:UAlberta/CSS"

Line 130: Line 130:
 
}
 
}
  
−
/* Text */
+
/* ****************************************
 +
** Stylesheet
 +
**************************************** */
  
−
h1, h2, h3, h4, h5, h6, a {
+
.ua-research-content {
−
   font-family: 'Amiko', sans-serif; margin-bottom: 0;
+
   padding-top: 50px;
 +
  background: rgba(230, 230, 250, 0.5);
 
}
 
}
  
−
p {
+
.ua-research-content h1 {
−
   font-family: 'Karla',sans-serif;
+
   font-family: 'Amiko', sans-serif;
−
   font-size: 115%;
+
   font-size: 128px;
 +
  /* color: #007bb8; */
 +
  color: #800080;
 +
  text-align: center;
 +
  margin-top: 20px;
 +
  margin-bottom: 70px;
 +
  /* padding-top: 0; iGEM */
 
}
 
}
  
−
/* Header */
+
.ua-research-content h2 {
 +
  font-family: 'Amiko', sans-serif;
 +
  font-size: 64px;
 +
  /* color: #007bb8; */
 +
  color: #800080;
 +
  text-align: left;
 +
  margin: 40px 0;
 +
  margin-top: 80px;
 +
}
  
−
.navbar-custom {
+
.ua-research-content h3 {
−
background-color: #FFCC33;
+
  font-family: 'Amiko', sans-serif;
 +
  font-size: 48px;
 +
  /* color: #007bb8; */
 +
  color: #800080;
 +
  margin: 40px 0;
 
}
 
}
  
−
.navbar-text {
+
.ua-research-content h4 {
−
   color: #000;
+
  font-family: 'Amiko', sans-serif;
 +
  font-size: 32px;
 +
   color: #007bb8;
 +
  margin: 40px 0;
 +
}
 +
 
 +
.ua-research-content p {
 +
  font-family: 'Karla', sans-serif;
 +
  line-height: 160%;
 +
  text-align: justify;
 +
  font-size: 18px;
 +
  margin: 20px;
 +
}
 +
 
 +
.ua-navbar {
 +
  /* background: #8478b8; */
 +
  background: #800080;
 +
}
 +
 
 +
.ua-navbar-brand {
 +
  height: 50px;
 +
  width: 272px;
 
}
 
}
  
−
/* Footer */
 
 
.ua-footer {
 
.ua-footer {
−
   left: 0;
+
   /* background: #8478b8; */
−
  bottom: 0;
+
   background: #800080;
−
   background-color: black;
+
   height: 200px;
−
  color: white;
+
−
   text-align: left;
+
 
   width: 100%;
 
   width: 100%;
 
}
 
}
  
−
.ua-footer-column{
+
.ua-home {
−
   padding: 50px 10px;
+
   position: relative;
 +
  overflow: hidden;
 
}
 
}
  
−
.footer-contact {
+
.ua-home .ua-navbar {
−
   list-style: none
+
   background: transparent;
 
}
 
}
  
−
.footer-contact > li, a{
+
.ua-home-section {
−
   font-family: 'Amiko',sans-serif;
+
   position: relative;
−
  font-size:9pt;
+
−
  color: white
+
 
}
 
}
  
−
/*BG image*/
+
.ua-stripes {
−
.hero-image{
+
−
  background-size: cover;
+
−
  background-repeat: no-repeat;
+
−
  background-position: 50% 25%;
+
 
   width: 100%;
 
   width: 100%;
−
   height: 500px;
+
   height: 100%;
 +
  position: absolute;
 +
  transform-origin: 0;
 +
  transform: skewY(-12deg);
 +
  display: grid;
 +
  grid-template: repeat(10, 76px) / repeat(10, 1fr);
 +
}
 +
 
 +
.ua-home-section:nth-child(1) .ua-stripes {
 +
  background: linear-gradient(#9370DB, #FFF);
 +
  z-index: -1;
 +
}
 +
 
 +
.ua-home-section:nth-child(1) .ua-stripes span:nth-child(1) {
 +
  grid-area: 1 / 1 / 4 / -1;
 +
  background: linear-gradient(168deg, #800080, #DA70D6);
 +
}
 +
 
 +
.ua-home-section:nth-child(1) .ua-stripes span:nth-child(2) {
 +
  grid-area: 4 / 6 / 5 / -1;
 +
  background: linear-gradient(270deg, #800080, #DA70D6);
 +
}
 +
 
 +
/* .ua-home-section:nth-child(1) .ua-stripes span:nth-child(3) {
 +
  grid-area: 5 / 8 / 6 / -1;
 +
  background: linear-gradient(-12deg, #800080, #DA70D6);
 +
} */
 +
 
 +
.ua-home-section:nth-child(1) .ua-stripes span:nth-child(4) {
 +
  grid-area: 9 / 8 / -2 / -1;
 +
  background: linear-gradient(270deg, #800080, #DA70D6);
 +
}
 +
 
 +
.ua-home-section:nth-child(1) .ua-stripes span:nth-child(5) {
 +
  grid-area: 10 / 10 / -2 / -1;
 +
  background: linear-gradient(168deg, #800080, #DA70D6);
 +
}
 +
 
 +
/* .ua-home-section:nth-child(1) .ua-stripes span:nth-child(6) {
 +
  grid-area: 10 / 1 / -1 / 4;
 +
  background: linear-gradient(145deg, #800080, #DA70D6);
 +
} */
 +
 
 +
.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 {
 +
  background: #fff;
 +
  z-index: -1;
 +
}
 +
 
 +
.ua-home-section:nth-child(3) .ua-stripes {
 +
  /* background: #E6E6FA; */
 +
  background: #E6E6FA;
 +
  z-index: -1;
 +
}
 +
 
 +
.ua-home-section-content {
 
   position: relative;
 
   position: relative;
 +
  display: grid;
 +
  grid-template: repeat(10, 76px) / repeat(8, 1fr);
 
}
 
}
  
−
.hero-text{
+
.ua-home-hero {
 +
  grid-area: 3 / 2 / 8 / -2;
 +
  text-align: left;
 +
}
 +
 
 +
.ua-home-image {
 +
  grid-area: 5 / 6 / -1 / -2;
 +
}
 +
 
 +
.ua-home-image img {
 +
  transform: scale(1.5);
 +
}
 +
 
 +
.ua-home-hero h1 {
 +
  font-family: 'Amiko', sans-serif;
 +
  font-size: 48px;
 +
  color: #4B0082;
 +
  margin-bottom: 2rem;
 +
}
 +
 
 +
.ua-home-hero p {
 +
  font-family: 'Karla', sans-serif;
 +
  line-height: 160%;
 +
  text-align: justify;
 +
  font-size: 18px;
 +
  color: #000;
 +
  margin-bottom: 2rem;
 +
  max-width: 50%;
 +
}
 +
 
 +
.ua-home-section-block {
 +
  grid-area: 1 / 2 / 5 / 5;
 +
  text-align: right;
 +
}
 +
 
 +
.ua-home-section-block h1 {
 +
  font-family: 'Amiko', sans-serif;
 +
  font-size: 64px;
 +
  color: #4B0082;
 +
  margin-bottom: 2rem;
 +
}
 +
 
 +
.ua-home-section-block p {
 +
  font-family: 'Karla', sans-serif;
 +
  line-height: 160%;
 +
  font-size: 18px;
 +
  color: #000;
 +
  margin-bottom: 2rem;
 +
}
 +
 
 +
.ua-home-cards {
 +
  grid-area: 8 / 2 / -1 / -2;
 +
}
 +
 
 +
.ua-home-section-secondary {
 +
  position: relative;
 +
  height: 760px;
 +
  background: #E6E6FA;
 +
}
 +
 
 +
.ua-home-section-navigation {
 
   text-align: center;
 
   text-align: center;
−
  position: absolute;
 
−
  top: 50%;
 
−
  left: 50%;
 
−
  transform: translate(-50%, -50%);
 
−
  color: white;
 
 
}
 
}
  
−
.hero-text > h1{
+
.ua-home-section-navigation h1 {
−
   font-family: 'Amiko',sans-serif;
+
   font-family: 'Amiko', sans-serif;
−
   font-weight: bold;
+
   font-size: 64px;
−
   font-size: 350%;
+
   color: #4B0082;
 +
  margin-bottom: 2rem;  
 
}
 
}
  
−
.hero-text > h2{
+
.ua-home-section-navigation p {
−
   font-family: 'Amiko',sans-serif;
+
   font-family: 'Karla', sans-serif;
−
   font-size: 300%;
+
  line-height: 160%;
 +
   font-size: 18px;
 +
  color: #000;
 +
  margin-bottom: 4rem;
 
}
 
}
  
−
#ua-project-experimental{
+
.ua-home-video {
−
   background-image: url(../images/project/T--Ualberta-Project-ExperimentalBG.png);
+
   grid-area: 1 / 5 / -1 / -2;
 +
  text-align: right;
 +
  margin-left: 80px;
 +
  margin-top: 60px;
 
}
 
}
  
−
#ua-hp-overview{
+
.card-deck .card-body h5 {
−
   background-image: url(../images/human-practices/T--UAlberta-HP-OverviewBG.png);
+
   text-align: center;
 
}
 
}
  
−
#ua-team-members{
+
@media (min-width: 880px) {
−
   background-image: url(../images/team/T--UAlberta-Team-MembersBG.png);
+
   .card-deck .card-body p {
 +
    display: none;
 +
  }
 
}
 
}
  
 +
/* .ua-home-section-info {
 +
  grid-area: 3 / 2 / -1 / -2;
 +
} */
  
−
/*Content*/
+
/* .ua-home-section-info .tab-content {
−
.ua-content{
+
   font-family: 'Karla', sans-serif;
−
   background-color: #F2F2F2;
+
   line-height: 160%;
−
   padding-top: 6%;
+
   font-size: 18px;
−
   padding-bottom: 6%;
+
  color: #000;
 +
  margin-bottom: 2rem;
 +
} */
 +
 
 +
/* Overrides */
 +
.navbar-dark .navbar-nav .nav-link {
 +
  color: rgba(255, 255, 255, 0.75);
 
}
 
}
 +
 +
.navbar-dark .navbar-nav .nav-link:hover {
 +
  color: rgba(255, 255, 255, 1.00);
 +
}
 +
 +
.card {
 +
  border: none;
 +
}
 +
 +
.card-deck .card {
 +
  border-radius: 8px;
 +
}
 +
 +
.card img {
 +
  border-radius: 8px;
 +
}
 +
 +
 +
/* font-family: 'Amiko', sans-serif;
 +
font-family: 'Karla', sans-serif; */
  
 
</style>
 
</style>
 
</html>
 
</html>

Revision as of 00:03, 16 October 2018