daniel/aircv
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Project upload

Browse Source
This commit is contained in:
Daniel Tam
2022-04-24 03:02:39 -05:00
parent 92c64c30fe
commit c2ce33c3fb
71 changed files with 20006 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
sass/layout/_footer.scss Executable file
View File

@@ -0,0 +1,9 @@
/*------------------------------------------------------------------
[Footer]
------------------------------------------------------------------*/
.footer {
.footer-logo {
@include size(64px, auto);
}
}

324
sass/layout/_header.scss Executable file
View File

@@ -0,0 +1,324 @@
/*------------------------------------------------------------------
[Header]
------------------------------------------------------------------*/
/* Fixed Top */
.navbar-fixed-top {
.navbar-collapse {
max-height: 100%;
}
}
/* Navbar */
.header {
.navbar {
margin-bottom: 0;
border-bottom: 1px solid rgba(255,255,255,.2);
@include cubic-transition($delay: 0, $duration: 300ms, $property: (all));
}
}
/* Navbar Toggle */
.header {
.navbar-toggle {
@include size(25px);
border: none;
padding: 0;
margin: 35px 0;
.toggle-icon {
@include position(relative);
@include size(21px, 1px);
display: inline-block;
background: $color-heading;
@include cubic-transition($delay: 0, $duration: 300ms, $property: (all));
&:before,
&:after {
@include position(absolute, $left: 0);
background: $color-heading;
content: " ";
}
&:before {
@include size(10px, 1px);
bottom: 10px;
@include rotate(0);
@include cubic-transition($delay: 0, $duration: 300ms, $property: (all));
}
&:after {
@include size(16px, 1px);
top: -5px;
@include rotate(0);
@include cubic-transition($delay: 0, $duration: 300ms, $property: (all));
}
}
&:hover {
.toggle-icon {
background: $color-base;
@include cubic-transition($delay: 0, $duration: 300ms, $property: (all));
&:before,
&:after {
@include size(21px, 1px);
background: $color-base;
@include cubic-transition($delay: 0, $duration: 300ms, $property: (all));
}
&.is-clicked {
@include bg-opacity($color-heading, 0);
}
}
}
}
}
/* Navbar Logo */
.header {
.logo {
@include size(100px);
float: left;
max-height: 95px;
line-height: 65px;
}
.logo-wrap {
display: inline-block;
padding: 15px 0;
&:focus,
&:hover {
text-decoration: none;
}
}
.logo-img {
display: inline-block;
@include size(64px, auto);
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
.logo-img-main {
display: inline-block;
@include cubic-transition($delay: 0, $duration: 400ms, $property: (all));
}
.logo-img-active {
display: none;
@include cubic-transition($delay: 0, $duration: 400ms, $property: (all));
}
}
/* Navbar */
.header {
.navbar-nav {
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
}
/* Nav */
.header {
.nav-item {
@include position(relative);
display: block;
&:last-child {
.nav-item-child {
padding-right: 0;
}
}
&.active {
.nav-item-hover {
&:after {
opacity: 1;
@include cubic-transition($delay: 0, $duration: 400ms, $property: (all));
}
}
}
&:hover {
.nav-item-hover {
&:after {
opacity: 1;
@include cubic-transition($delay: 0, $duration: 400ms, $property: (all));
}
}
}
}
.nav-item-child {
@include position(relative);
display: block;
@include font($size: 13px, $weight: 600, $family: $font-family-base);
color: $color-white;
text-transform: uppercase;
line-height: 55px;
padding: 20px;
@include cubic-transition($delay: 0, $duration: 300ms, $property: (all));
&:hover,
&:focus {
background: inherit;
}
}
.nav-item-hover {
@include position(relative);
&:after {
@include position(absolute, $top: 45px, $left: 0);
@include size(9px, 2px);
background: $color-base;
opacity: 0;
content: " ";
@include cubic-transition($delay: 0, $duration: 400ms, $property: (all));
}
}
}
/* Media Queries below 991px */
@media (max-width: $screen-sm-max) {
/* Bootstrap collapse of navigation with a maximum width: 991px
(Change it to any breakpoint you want to be collapsed) */
.header {
background: $color-white;
.navbar-toggle {
display: block;
}
.navbar-collapse {
&.collapse {
display: none !important;
&.in {
display: block !important;
}
}
}
.nav-collapse {
padding-left: 0;
padding-right: 0;
}
.navbar-nav {
margin: 0;
float: none;
.nav-item {
float: none;
}
}
}
/* Menu Container */
.header {
.menu-container {
@include clearfix;
}
}
/* Logo */
.header {
.logo {
.logo-img-main {
display: none;
}
.logo-img-active {
display: inline-block;
}
}
}
/* Navbar Nav */
.header {
.nav-item-child {
color: $color-heading;
line-height: 1.4;
padding: 12px 12px 12px 15px;
}
.nav-item-hover {
&:after {
@include position(absolute, $top: 19px);
}
}
}
}
/* Media Queries below 767px */
@media (max-width: $screen-xs-max) {
/* Menu Container */
.header {
.menu-container {
padding-left: 15px;
padding-right: 15px;
margin-left: 0;
margin-right: 0;
}
.navbar {
> .container {
width: auto;
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
> .nav-collapse {
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
}
}
}
}
}
/* Media Queries above 992px */
@media (min-width: $screen-md-min) {
/* Navbar */
.header {
.navbar-nav-right {
float: right;
}
}
}
/* Page On Scroll */
@media (min-width: $screen-md-min) {
.page-on-scroll {
.header {
.navbar {
background: $color-white;
border-bottom-color: #f0f0f0;
@include cubic-transition($delay: 0, $duration: 300ms, $property: (all));
}
.logo-img-main {
display: none;
@include cubic-transition($delay: 0, $duration: 400ms, $property: (all));
}
.logo-img-active {
display: inline-block;
@include cubic-transition($delay: 0, $duration: 400ms, $property: (all));
}
.nav-item-child {
color: $color-heading;
@include cubic-transition($delay: 0, $duration: 300ms, $property: (all));
}
}
}
}