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

Line 75: Line 75:
  
 
.top-right {
 
.top-right {
−
     top: 70px;
+
     top: 80px;
 
     right: 70px;
 
     right: 70px;
 
     line-height: 3 !important;
 
     line-height: 3 !important;

Revision as of 22:37, 25 November 2018

/* General */ html body { 

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

}

.navbar { 

   background: none;
   padding: 40px;
   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;

}

.top-right { 

   top: 80px;
   right: 70px;
   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: 1000px) { 

   .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;
   }

}