Difference between revisions of "Team:Calgary/layout css"

Line 94: Line 94:
 
.social-media-icon:hover {
 
.social-media-icon:hover {
 
     color: rgba(0, 0, 0, 0.9);
 
     color: rgba(0, 0, 0, 0.9);
 +
}
 +
 +
.apa-reference p {
 +
    margin-left: 6em;
 +
    text-indent: -4em;
 
}
 
}
  

Revision as of 18:38, 15 October 2018

/* General */ html body { 

   background-color: white;
   color: rgba(0, 0, 0, 0.5);
   font-family: 'Josefin Sans', sans-serif;

}

.navbar { 

   background: none;
   padding: 50px;
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 1;

}

.navbar-nav { 

   margin-inline-start: 0px !important;
   margin-top: 0px !important;
   padding-top: 30px !important;
   position: absolute;

}

.navbar-nav > li { 

   white-space: nowrap;

}

.navbar-logo { 

   height: 90px;

}

.underline-animation::after { 

   content: ;
   display: block;
   width: 0;
   height: 2px;
   background: #7CCFB8;
   transition: width .3s;

}

.underline-animation:hover::after { 

   width: 100%;

}

.dropdown-toggle::after { 

   display: none;

}

.dropdown-item { 

   color: #212529 !important;

}

.dropdown-menu > a:active { 

   background-color: #7CCFB8;
   color: white !important;

}

.dropdown-menu > a:focus { 

   background-color: #7CCFB8;
   color: white !important;

}

.collapse.show .navbar-nav > li { 

   background-color: white !important;

}

.bottom-left { 

   bottom: 20px;
   left: 20px;
   line-height: 3 !important;
   position: fixed;
   text-align: center;
   z-index: 2;

}

  1. social-media-icons {
   line-height: 3;
   list-style: none;
   margin-bottom: 1rem;
   margin-inline-start: 0px;
   margin-top: 0px;
   padding-inline-start: 40px;

}

.social-media-link { 

   padding: 0px !important;

}

.social-media-icon { 

   color: rgba(0, 0, 0, 0.5);
   font-size: 24px;

}

.social-media-icon:hover { 

   color: rgba(0, 0, 0, 0.9);

}

.apa-reference p { 

   margin-left: 6em;
   text-indent: -4em;

}

@media only screen and (min-width: 992px) { 

   .navbar {
       background: linear-gradient(to bottom, white, white, white, white, rgba(255, 255, 255, 0));
   }

   .navbar-nav {
       left: 50%;
       transform: translatex(-50%);
   }
   
   .navbar-nav > li {
       margin-left: 40px;
       margin-right: 40px;
   }

   .dropdown-menu-center {
       left: 50%;
       text-align: center;
       transform: translate(-50%);
   }

}

@media only screen and (max-width: 1480px) { 

   .bottom-left {
       display: none;
   }

}

@media only screen and (max-width: 991px) { 

   .navbar {
       background: white;
       padding: 30px;
   }

   .navbar-nav {
       height: 100vh;
       padding-top: 30px;
   }

   .navbar-logo {
       height: 60px;
   }

   .navbar-collapse {
       height: 100vh;
   }

   .underline-animation::after {
       display: none;
   }

}