Initial commit
This commit is contained in:
378
src/styles/main.scss
Normal file
378
src/styles/main.scss
Normal file
@@ -0,0 +1,378 @@
|
||||
@import "helpers";
|
||||
|
||||
@media screen and (prefers-reduced-motion: no-preference) {
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
width: 100%;
|
||||
overflow-x: clip;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.splide__arrow svg {
|
||||
fill: $red !important;
|
||||
}
|
||||
|
||||
.splide__pagination__page.is-active {
|
||||
background-color: $red !important;
|
||||
}
|
||||
|
||||
.splide__arrow.splide__arrow--next {
|
||||
height: 5em !important;
|
||||
width: 5em !important;
|
||||
}
|
||||
|
||||
.splide__arrow.splide__arrow--prev {
|
||||
height: 5em !important;
|
||||
width: 5em !important;
|
||||
}
|
||||
|
||||
|
||||
/* old deprecated */
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.gallery {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.intro .mainText {
|
||||
margin: 3em 2em;
|
||||
}
|
||||
|
||||
.intro .mainText .big {
|
||||
color: $white;
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
||||
.intro .textContainer {
|
||||
height: 40vh;
|
||||
}
|
||||
|
||||
.intro .logo {
|
||||
width: 2.5em;
|
||||
margin: 0 1em 0 0;
|
||||
}
|
||||
footer{
|
||||
padding: 2em 2em 2.45em;
|
||||
line-height: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape)
|
||||
{
|
||||
.intro .picContainer {
|
||||
display: flex;
|
||||
float: right;
|
||||
height: 85vh;
|
||||
max-width: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: portrait)
|
||||
{
|
||||
.intro .picContainer {
|
||||
display: flex;
|
||||
float: right;
|
||||
min-height: 50vh;
|
||||
height: max-content;
|
||||
max-width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
|
||||
.gallery {
|
||||
padding: 3% 4% 1% 4%;
|
||||
}
|
||||
|
||||
.intro .mainText {
|
||||
margin: 2em 0em 2em 5em;
|
||||
}
|
||||
|
||||
.intro .mainText .big {
|
||||
color: $white;
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
.intro .logo {
|
||||
width: 2.5em;
|
||||
margin: 0 1em 0 1em;
|
||||
}
|
||||
footer{
|
||||
padding: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
|
||||
.fullPage {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
overflow: clip;
|
||||
|
||||
&Intro {
|
||||
background-color: $black;
|
||||
color: $white;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
.intro .largePic {
|
||||
margin: auto auto 0 auto;
|
||||
width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.intro .textContainer{
|
||||
float: left;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.intro .links {
|
||||
display: inline;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.intro .links .oneRow {
|
||||
float: left;
|
||||
display: flex;
|
||||
padding: 1em 0 0 1em;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.intro .links a {
|
||||
padding-left: 0.5em;
|
||||
padding-right: 0.5em;
|
||||
color: $gray;
|
||||
}
|
||||
|
||||
.intro .links .oneRow a {
|
||||
padding-top: 0.5em;
|
||||
}
|
||||
|
||||
.intro .row.init {
|
||||
height: 15vh;
|
||||
}
|
||||
|
||||
.intro .contact {
|
||||
padding: 1em 1em 0 0;
|
||||
opacity: 80%;
|
||||
float: right;
|
||||
text-align: right;
|
||||
margin-top: 0.5em;
|
||||
color: $gray;
|
||||
}
|
||||
|
||||
.intro .contact a {
|
||||
color: $gray;
|
||||
}
|
||||
|
||||
.intro .mainText {
|
||||
color: $gray;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.project {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-height: 80vh;
|
||||
}
|
||||
|
||||
.project .row {
|
||||
width: 100%;
|
||||
padding: 3em;
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
.project .picture {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.project .icon{
|
||||
width: 200px;
|
||||
display: flex;
|
||||
font-size: 1.5em;
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.project .icon svg{
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.project h1 {
|
||||
margin: 0 0 0.5em 0;
|
||||
font-weight: bold;
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
.project h2{
|
||||
margin: 0.5em 0.5em 0;
|
||||
font-size: 2.5em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.project p {
|
||||
font-size: 1.925em;
|
||||
}
|
||||
|
||||
.project a{
|
||||
float: right;
|
||||
}
|
||||
|
||||
.project a:hover{
|
||||
color: $gray;
|
||||
}
|
||||
|
||||
.techContainer {
|
||||
padding: 1em;
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
margin: 0 auto;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.project .technology {
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: 2.5em;
|
||||
color: $gray;
|
||||
margin: 0.1em;
|
||||
padding: 0.1em 0.3em;
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
.technology:hover {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.experience {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.experience p {
|
||||
text-justify: distribute-all-lines;
|
||||
margin: 0 auto 2em auto;
|
||||
font-size: 2em;
|
||||
width: 40em;
|
||||
max-width: 70vw;
|
||||
}
|
||||
|
||||
.experience .job {
|
||||
border: 10px solid $black;
|
||||
width: 100%;
|
||||
min-height: 30vh;
|
||||
font-size: 2.7rem;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.knowledge .edu{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.knowledge h1{
|
||||
font-size: 3em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.knowledge h2{
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: 2em;
|
||||
margin-left: 0.1em;
|
||||
}
|
||||
|
||||
.knowledge .job{
|
||||
width: 73%;
|
||||
font-size: 1.2em;
|
||||
margin: 2em auto 0;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.pBContainer .progressBar{
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background-color: $gray;
|
||||
}
|
||||
|
||||
.pBContainer .progressBar .inner{
|
||||
overflow: hidden;
|
||||
height: inherit;
|
||||
background-color: $black;
|
||||
}
|
||||
|
||||
.technology {
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: 2em;
|
||||
color: $black;
|
||||
margin: 0.1em;
|
||||
padding: 0.1em 0.3em;
|
||||
background-color: $gray;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.technology:hover{
|
||||
background-color: opacify($gray, 0.35);
|
||||
}
|
||||
|
||||
footer{
|
||||
text-align: center;
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
||||
footer a{
|
||||
color: $white !important;
|
||||
}
|
||||
|
||||
footer a:hover{
|
||||
color: $red;
|
||||
}
|
||||
|
||||
.notfound{
|
||||
display: flex;
|
||||
font-size: 3em;
|
||||
text-align: center;
|
||||
color: $red;
|
||||
}
|
||||
|
||||
.notfound .container{
|
||||
margin: auto auto;
|
||||
}
|
||||
|
||||
.notfound h1{
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.notfound i{
|
||||
font-size: 0.5em;
|
||||
}
|
||||
|
||||
.notfound a{
|
||||
background-color: $white;
|
||||
color: $black;
|
||||
padding: 0.3em;
|
||||
font-weight: bold;
|
||||
}
|
||||
Reference in New Issue
Block a user