Preparation for proper release
This commit is contained in:
@@ -1,7 +1,10 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300&display=swap');
|
||||
|
||||
$black: #000000;
|
||||
$white: #ffffff;
|
||||
$gray: #C2C2C2;
|
||||
$red: #ff0000;
|
||||
$gray: #E3E3E3;
|
||||
$strong_red: #ff0000;
|
||||
$red: #8F0000;
|
||||
|
||||
@mixin darkSection {
|
||||
background-color: $black;
|
||||
@@ -34,7 +37,7 @@ $mediumGap: 30px;
|
||||
$smallGap: 15px;
|
||||
|
||||
@mixin regularFont {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-family: Work Sans, sans-serif;
|
||||
|
||||
font-size: 25px;
|
||||
|
||||
|
||||
@@ -7,8 +7,11 @@
|
||||
}
|
||||
|
||||
html {
|
||||
width: 100%;
|
||||
overflow-x: clip;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
html, body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -34,345 +37,4 @@ body {
|
||||
.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