You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

201 lines
3.8 KiB
SCSS

4 years ago
/*************************** 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;
}
}