/*************************** Theme Colours****************************/ // Define theme colour scheme $theme-color-primary: #54B689; $theme-text-color-primary: #292929; $theme-text-color-secondary: lighten($theme-text-color-primary, 15%); $theme-text-color-light: lighten($theme-text-color-primary, 40%); $theme-border-color: lighten($theme-text-color-primary, 60%); /*************************** Variables Section. *****************************/ // Create variables to override the default value for variables used in the Bootstrap SCSS files. $gray-100: lighten($theme-text-color-primary, 60%); $gray-200: lighten($theme-text-color-primary, 55%); $gray-300: lighten($theme-text-color-primary, 50%); $gray-400: lighten($theme-text-color-primary, 45%); $gray-500: lighten($theme-text-color-primary, 40%); $gray-600: lighten($theme-text-color-primary, 30%); $gray-700: lighten($theme-text-color-primary, 20%); $gray-800: lighten($theme-text-color-primary, 10%); $gray-900: $theme-text-color-primary; $theme-colors: ( "primary": $theme-color-primary, "secondary": $theme-text-color-secondary, ); /*************************** Import Bootstrap *****************************/ @import "bootstrap/scss/bootstrap.scss"; /*********** Theme Generic **********/ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: $theme-text-color-secondary; } h1, h2, h3, h4, h5, h6 { color: $theme-text-color-primary; font-weight: bold; } a.theme-link { color: $theme-text-color-primary; text-decoration: underline; -webkit-text-decoration-color: rgba($theme-text-color-primary,0.3); text-decoration-color: rgba($theme-text-color-primary,0.3); &:hover { color: $theme-color-primary; -webkit-text-decoration-color: rgba($theme-color-primary,0.8); text-decoration-color: rgba($theme-color-primary,0.8); } } .btn { font-weight: bold; padding: .375rem 1rem; height: 2.5rem; font-size: 1rem; } .btn:focus, .btn.focus { box-shadow: none !important; } .btn-primary { color: #fff; } .demo-btn-on-bg { background: rgba(0, 0, 0, 0.2); &:hover { background: rgba(0, 0, 0, 0.3); } } /*********** Resume **********/ .resume-wrapper { border: 1px solid rgba(0, 0, 0, 0.025); } .resume-section-heading { position: relative; padding-left: 1rem; font-size: 1.125rem; letter-spacing: 0.15rem; color: $theme-color-primary; &:before { content: ""; display: inline-block; width: 5px; height: 100%; background: $theme-color-primary; position: absolute; left: 0; top: 0; } } .resume-name { font-size: 2.75rem; font-weight: 900; letter-spacing: 0.4rem; color: $theme-color-primary; } .resume-tagline { font-size: 1.25rem; font-weight: 300; } .resume-contact { border-left: 1px solid rgba(0, 0, 0, 0.08); font-size: 0.75rem; } a.resume-link { color: $theme-text-color-secondary; &:hover { color: $theme-color-primary; } } .resume-profile-image { max-width: 120px; } .resume-intro { font-size: 0.875rem; } .resume-main { .item-title { font-size: 1rem; } .item-meta { font-size: 0.75rem; } .item-content { font-size: 0.875rem; } } .resume-aside { border-left: 1px solid rgba(0, 0, 0, 0.08); .item { font-size: 0.875rem; } .item-title { font-size: 1rem; } } .resume-education-list, .resume-awards-list { font-size: 0.875rem; } .resume-degree-time-org, .resume-degree-time { font-size: 0.75rem; } .resume-lang-list, .resume-interests-list { font-size: 0.875rem; } .resume-social-list { font-size: 0.75rem; } .fa-heart { color: #fb866a; } // Medium devices (tablets, less than 992px) @media (max-width: 991.98px) { .resume-aside { border-left: 0; } } // Small devices (landscape phones, less than 768px) @media (max-width: 767.98px) { .resume-contact { border-left: 0; } }