167 lines
2.8 KiB
SCSS
Executable file
167 lines
2.8 KiB
SCSS
Executable file
@use 'sass:math';
|
|
@font-face {
|
|
font-family: LibreBaskervilleRegular;
|
|
src: url('/LibreBaskerville-Regular.woff');
|
|
}
|
|
|
|
$lg-breakpoint: 1500px;
|
|
$md-breakpoint: 1000px;
|
|
$sm-breakpoint: 900px;
|
|
$xs-breakpoint: 400px;
|
|
|
|
$primary: #4ba05f;
|
|
$secondary: #a04b8c;
|
|
|
|
@mixin scrimGradient($startColor: $color-black, $direction: 180deg) {
|
|
$scrimCoordinates: (
|
|
0: 1,
|
|
19: 0.738,
|
|
34: 0.541,
|
|
47: 0.382,
|
|
56.5: 0.278,
|
|
65: 0.194,
|
|
73: 0.126,
|
|
80.2: 0.075,
|
|
86.1: 0.042,
|
|
91: 0.021,
|
|
95.2: 0.008,
|
|
98.2: 0.002,
|
|
100: 0
|
|
);
|
|
|
|
$hue: hue($startColor);
|
|
$saturation: saturation($startColor);
|
|
$lightness: lightness($startColor);
|
|
$stops: ();
|
|
|
|
@each $colorStop, $alphaValue in $scrimCoordinates {
|
|
$stop: hsla($hue, $saturation, $lightness, $alphaValue) percentage(math.div($colorStop,100));
|
|
$stops: append($stops, $stop, comma);
|
|
}
|
|
|
|
background: linear-gradient($direction, $stops);
|
|
|
|
}
|
|
|
|
|
|
@import './reset.scss';
|
|
@import './components/intro.scss';
|
|
@import './components/profile.scss';
|
|
@import './components/projects.scss';
|
|
@import './components/technologies.scss';
|
|
@import './components/links.scss';
|
|
@import './components/typography.scss';
|
|
@import './components/footer.scss';
|
|
@import './components/contact.scss';
|
|
@import './components/button.scss';
|
|
@import './components/chips.scss';
|
|
|
|
body {
|
|
font-family: LibreBaskervilleRegular, sans-serif;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
line-height: 1.5em;
|
|
|
|
@if ($buildTarget == "resume") {
|
|
background: #ff00ff;
|
|
}
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.container {
|
|
width: 70%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
//#2e7d32
|
|
|
|
|
|
.typo, body {
|
|
font-family: 'LibreBaskervilleRegular', serif;
|
|
}
|
|
|
|
|
|
section {
|
|
border-bottom: 1px solid gray;
|
|
padding-bottom: 1em;
|
|
}
|
|
|
|
section:last-of-type {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
section h2 {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
line-height: 1.5em;
|
|
}
|
|
|
|
.about-header {
|
|
margin: 2em 0;
|
|
}
|
|
|
|
|
|
.profile-nav {
|
|
text-align: center;
|
|
a {
|
|
color: white;
|
|
opacity: 0.8;
|
|
margin-right: .6em;
|
|
}
|
|
a:last-of-type {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.alternate-section {
|
|
|
|
.alternate-description {
|
|
margin-top: 1.3em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.alternate-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.alternate-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 1em;
|
|
}
|
|
.icon {
|
|
margin-right: .3em;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (min-width: $lg-breakpoint) {
|
|
.container {
|
|
width: 58%;
|
|
}
|
|
}
|
|
|
|
@media (min-width: $md-breakpoint) {
|
|
.container {
|
|
width: 65%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: $md-breakpoint) {
|
|
.container {
|
|
width: 75%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: $sm-breakpoint) {
|
|
.container {
|
|
width: 90%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: $xs-breakpoint) {
|
|
|
|
}
|