This commit is contained in:
Michał Gdula 2022-11-12 20:46:40 +00:00
parent 5dab307513
commit 364a2558ff
61 changed files with 1309 additions and 608 deletions

37
css/_footer.scss Normal file
View file

@ -0,0 +1,37 @@
footer {
margin: 0;
padding: 0.5rem 1rem;
width: 100%;
height: 2.5rem;
display: flex;
flex-direction: row;
gap: 1rem;
justify-content: space-around;
align-items: center;
box-sizing: border-box;
background-color: $black200;
border-radius: 0 0 0.5rem 0.5rem;
p,
a {
margin: 0;
padding: 0;
font-family: $font-body;
font-size: 0.8rem;
font-weight: 800;
font-stretch: semi-condensed;
color: $white;
display: block;
text-transform: uppercase;
}
}

113
css/_hero.scss Normal file
View file

@ -0,0 +1,113 @@
.heroSpacing {
margin: 0;
padding: 0;
width: 100%;
height: 20rem;
display: block;
background-color: $black-darker;
}
.hero {
margin: 0;
padding: 1rem;
width: 100%;
height: 20rem;
display: flex;
flex-direction: column;
gap: 1rem;
position: absolute;
top: 3rem;
box-sizing: border-box;
background-color: $black;
overflow: hidden;
pointer-events: none;
user-select: none;
h1 {
margin: 0;
padding: 0;
font-family: $font-header;
font-size: 2.5rem;
font-weight: 800;
font-stretch: ultra-expanded;
color: $white;
transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
z-index: +2;
}
p {
margin: 0;
padding: 0;
font-family: $font-body;
font-size: 1rem;
font-weight: 600;
font-stretch: semi-expanded;
color: $white;
z-index: +2;
}
img {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
opacity: 1;
filter: blur(2px) brightness(0.7);
object-fit: cover;
object-position: center;
position: absolute;
top: 0;
left: 0;
z-index: +1;
}
}
.hero_scrolled {
padding: 0.5rem 1rem;
height: 3rem;
top: 0;
justify-content: center;
background-color: $black-darker;
border-radius: 0.5rem 0.5rem 0 0;
pointer-events: all;
h1 {
font-size: 1.5rem;
}
p {
display: none;
}
img {
opacity: 0;
}
}

86
css/_nav.scss Normal file
View file

@ -0,0 +1,86 @@
nav {
margin: 0;
padding: 0;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
position: relative;
border-radius: 0.5rem 0.5rem 0 0;
}
.nav-item {
margin: 0;
padding: 0.5rem;
width: 100%;
height: 3rem;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
background-color: $black;
border: none;
user-select: none;
&:hover {
background-color: $black-darker;
}
p,
a {
margin: auto;
padding: 0;
display: inline-block;
font-family: $font-body;
font-size: 1rem;
font-weight: 600;
font-stretch: semi-expanded;
color: $white;
transition: all 0.2s cubic-bezier(0.86, 0, 0.07, 1);
}
&:nth-child(1) {
border-radius: 0.5rem 0 0 0;
}
&:nth-child(4) {
border-radius: 0 0.5rem 0 0;
}
}
.nav-item_selected {
background-color: $black-est;
}
#nav-item_underline {
margin: 0;
padding: 0;
width: 25%;
height: 0.3rem;
display: block;
position: absolute;
bottom: 0;
left: 0;
background-color: $green;
transition: left 0.2s cubic-bezier(0.86, 0, 0.07, 1),
width 0.2s cubic-bezier(0.86, 0, 0.07, 1);
}

49
css/_variables.scss Normal file
View file

@ -0,0 +1,49 @@
// Variables
$black: #151515;
$black-darker: #121212;
$black-est: #101010;
$white: #e8e5e5;
$red: #b66467;
$orange: #d8a657;
$yellow: #d9bc8c;
$green: #8c977d;
$blue: #8da3b9;
$purple: #a988b0;
@font-face {
font-family: 'Mona-Sans';
src: url('fonts/Mona-Sans.woff2') format('woff2 supports variations'),
url('fonts/Mona-Sans.woff2') format('woff2-variations');
font-weight: 200 900;
font-stretch: 75% 125%;
}
@font-face {
font-family: 'Hubot-Sans';
src: url('fonts/Hubot-Sans.woff2') format('woff2 supports variations'),
url('fonts/Hubot-Sans.woff2') format('woff2-variations');
font-weight: 200 900;
font-stretch: 75% 125%;
}
$font-header: "Mona-Sans", sans-serif;
$font-body: "Hubot-Sans", sans-serif;
.c_red {
color: $red;
}
.c_orange {
color: $orange;
}
.c_yellow {
color: $yellow;
}
.c_green {
color: $green;
}
.c_blue {
color: $blue;
}
.c_purple {
color: $purple;
}

BIN
css/fonts/Hubot-Sans.woff2 Normal file

Binary file not shown.

BIN
css/fonts/Mona-Sans.woff2 Normal file

Binary file not shown.

View file

@ -1,32 +0,0 @@
/*
Footer
*/
footer {
margin: auto; padding: 1rem;
width: auto;
display: flex; flex-direction: row; flex-wrap: wrap;
justify-content: space-around; align-items: center;
background-color: var(--bg); color: var(--fg);
border-radius: var(--rad);
box-shadow: var(--shadow);
border: 0.2rem solid var(--green);
outline: 0.5rem solid var(--bg);
}
footer * {
margin: 0; padding: 0;
display: block;
}
footer div {
width: 18rem;
justify-content: center; align-content: center;
text-align: center;
}
footer div h3 {
margin-bottom: 0.5rem;
}

View file

@ -1,111 +0,0 @@
/*
Main
*/
section {
margin: 5rem 0; padding: 1rem;
width: auto;
background-color: var(--bg); color: var(--fg);
border-radius: var(--rad);
box-shadow: var(--shadow);
border: 0.2rem solid var(--green);
outline: 0.5rem solid var(--bg);
}
section * {
margin: 0 0 0.5rem; padding: 0;
max-width: 100%; width: auto; min-width: none;
border-radius: 5px;
}
section *:last-child {
margin-bottom: 0;
}
section img {
margin-bottom: 0.5rem;
height: auto;
}
section p, section a {
margin-bottom: 0.5rem;
}
/*
I suck at CSS
*/
#experience img {
display: block;
}
#spotify {
display: flex;
flex-direction: column;
}
#projects div {
display: flex; flex-direction: row;
justify-content: space-around;
}
#projects div img {
margin-right: 1rem; margin-bottom: 0;
height: 150px; width: 150px;
}
#projects div img:last-child {
margin: 0;
}
/*
Gallery
*/
.gallery-image {
margin-bottom: 1rem; padding: 0;
width: 100%; height: 30rem;
object-fit: contain;
display: block;
background-color: var(--bg-1);
}
.gallery {
margin: 0; padding: 0;
height: 10rem;
display: flex; flex-direction: row;
overflow-x: scroll;
user-select: none;
-ms-overflow-style: none;
scrollbar-width: none;
}
.gallery:hover {
cursor: grab;
}
.gallery::-webkit-scrollbar {
display: none;
}
.gallery img {
margin: 0 0.5rem;
height: 10rem;
max-width: 46%; width: auto;
object-fit: cover;
user-select: none;
transition: transform 0.2s cubic-bezier(0,.76,0,1);
}
.gallery img:hover {
outline: 0.3rem var(--green) solid;
transform: scale(0.9);
}
.gallery img:first-child {
margin-left: 0;
}
.gallery img:last-child {
margin-right: 0;
}

View file

@ -1,59 +0,0 @@
/*
Nav
*/
nav {
margin: auto; padding: 1rem;
width: auto;
position: sticky; top: 1rem;
z-index: 999;
display: flex; flex-direction: row;
justify-content: space-between; align-items: center;
background-color: var(--bg); color: var(--fg);
border-radius: var(--rad);
box-shadow: var(--shadow);
border: 0.2rem solid var(--green);
outline: 0.5rem solid var(--bg);
}
nav * {
margin: 0; padding: 0;
}
.nav-logo {
display: flex; flex-direction: row;
}
.nav-logo img {
margin: 0; padding: 0;
height: 2rem; width: auto;
transform: rotate(-25deg) scale(3.5);
}
.nav-logo h2 {
margin: 0 0 0 2rem; padding: 0;
font-size: 28px;
font-weight: 900;
}
.nav-links * {
margin: 0 0.2rem; padding: 0;
color: var(--fg);
text-align: right; text-decoration: none;
font-weight: bolder;
}
@media (max-width:569px) {
.nav-logo h2 {
display: none;
}
nav {
position: static;
}
}

437
css/style.css Normal file
View file

@ -0,0 +1,437 @@
@font-face {
font-family: "Mona-Sans";
src: url("fonts/Mona-Sans.woff2") format("woff2 supports variations"), url("fonts/Mona-Sans.woff2") format("woff2-variations");
font-weight: 200 900;
font-stretch: 75% 125%;
}
@font-face {
font-family: "Hubot-Sans";
src: url("fonts/Hubot-Sans.woff2") format("woff2 supports variations"), url("fonts/Hubot-Sans.woff2") format("woff2-variations");
font-weight: 200 900;
font-stretch: 75% 125%;
}
.c_red {
color: #b66467;
}
.c_orange {
color: #d8a657;
}
.c_yellow {
color: #d9bc8c;
}
.c_green {
color: #8c977d;
}
.c_blue {
color: #8da3b9;
}
.c_purple {
color: #a988b0;
}
nav {
margin: 0;
padding: 0;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
position: relative;
border-radius: 0.5rem 0.5rem 0 0;
}
.nav-item {
margin: 0;
padding: 0.5rem;
width: 100%;
height: 3rem;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
background-color: #151515;
border: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.nav-item:hover {
background-color: #121212;
}
.nav-item p,
.nav-item a {
margin: auto;
padding: 0;
display: inline-block;
font-family: "Hubot-Sans", sans-serif;
font-size: 1rem;
font-weight: 600;
font-stretch: semi-expanded;
color: #e8e5e5;
transition: all 0.2s cubic-bezier(0.86, 0, 0.07, 1);
}
.nav-item:nth-child(1) {
border-radius: 0.5rem 0 0 0;
}
.nav-item:nth-child(4) {
border-radius: 0 0.5rem 0 0;
}
.nav-item_selected {
background-color: #121212;
}
#nav-item_underline {
margin: 0;
padding: 0;
width: 25%;
height: 0.3rem;
display: block;
position: absolute;
bottom: 0;
left: 0;
background-color: #8c977d;
transition: left 0.2s cubic-bezier(0.86, 0, 0.07, 1), width 0.2s cubic-bezier(0.86, 0, 0.07, 1);
}
.heroSpacing {
margin: 0;
padding: 0;
width: 100%;
height: 20rem;
display: block;
background-color: #121212;
}
.hero {
margin: 0;
padding: 1rem;
width: 100%;
height: 20rem;
display: flex;
flex-direction: column;
gap: 1rem;
position: absolute;
top: 3rem;
box-sizing: border-box;
background-color: #151515;
overflow: hidden;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.hero h1 {
margin: 0;
padding: 0;
font-family: "Mona-Sans", sans-serif;
font-size: 2.5rem;
font-weight: 800;
font-stretch: ultra-expanded;
color: #e8e5e5;
transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
z-index: 2;
}
.hero p {
margin: 0;
padding: 0;
font-family: "Hubot-Sans", sans-serif;
font-size: 1rem;
font-weight: 600;
font-stretch: semi-expanded;
color: #e8e5e5;
z-index: 2;
}
.hero img {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
opacity: 1;
filter: blur(2px) brightness(0.7);
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.hero_scrolled {
padding: 0.5rem 1rem;
height: 3rem;
top: 0;
justify-content: center;
background-color: #121212;
border-radius: 0.5rem 0.5rem 0 0;
pointer-events: all;
}
.hero_scrolled h1 {
font-size: 1.5rem;
}
.hero_scrolled p {
display: none;
}
.hero_scrolled img {
opacity: 0;
}
footer {
margin: 0;
padding: 0.5rem 1rem;
width: 100%;
height: 2.5rem;
display: flex;
flex-direction: row;
gap: 1rem;
justify-content: space-around;
align-items: center;
box-sizing: border-box;
background-color: #121212;
border-radius: 0 0 0.5rem 0.5rem;
}
footer p,
footer a {
margin: 0;
padding: 0;
font-family: "Hubot-Sans", sans-serif;
font-size: 0.8rem;
font-weight: 800;
font-stretch: semi-condensed;
color: #e8e5e5;
display: block;
text-transform: uppercase;
}
html {
margin: 0;
padding: 0;
height: 100%;
background-color: #121212;
overflow: hidden;
}
body {
margin: 0;
padding: 0.5rem;
height: 100%;
background-image: url("../leaves.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
box-sizing: border-box;
}
@media (max-width: 500px) {
body {
padding: 0;
background-image: none;
}
}
main {
margin: 0 auto;
padding: 0;
max-width: 769px;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
position: relative;
background-color: #151515;
box-sizing: border-box;
border-radius: 0.5rem;
z-index: 1;
}
#Home,
#Hobbies,
#Experiance,
#Gallery {
overflow-y: scroll;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
}
#Home::-webkit-scrollbar,
#Hobbies::-webkit-scrollbar,
#Experiance::-webkit-scrollbar,
#Gallery::-webkit-scrollbar {
display: none;
}
.main {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: 1rem;
box-sizing: border-box;
overflow: hidden;
}
.tabContent {
display: none;
height: 100%;
opacity: 0;
transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
overflow: hidden;
}
.content {
margin: 0;
padding: 1rem 1.5rem;
width: 100%;
height: auto;
display: flex;
flex-direction: column;
gap: 0.5rem;
box-sizing: border-box;
overflow: hidden;
background-color: #151515;
}
.content h2 {
margin: 0.5rem 0 0.5rem 0;
padding: 0;
font-family: "Mona-Sans", sans-serif;
font-size: 2rem;
font-stretch: ultra-expanded;
color: #8c977d;
}
.content h3 {
margin: 0.5rem 0 0.5rem 0;
padding: 0 0 0 0.5rem;
font-family: "Mona-Sans", sans-serif;
font-size: 1.5rem;
font-stretch: ultra-expanded;
color: #e8e5e5;
border-left: 0.9rem solid #8c977d;
}
.content h4 {
margin: 0.5rem 0 0.25rem 0;
padding: 0 0 0 0.5rem;
font-family: "Mona-Sans", sans-serif;
font-size: 1.25rem;
font-stretch: ultra-expanded;
color: #e8e5e5;
border-left: 0.6rem solid #8c977d;
}
.content br {
margin: 0 0 2rem 0;
padding: 0;
}
.content i {
margin: 0;
padding: 0;
display: inline-block;
vertical-align: middle;
font-family: "Hubot-Sans", sans-serif;
font-size: 1rem;
}
.content p {
margin: 0;
padding: 0;
display: inline-block;
font-family: "Hubot-Sans", sans-serif;
font-size: 1.1rem;
font-weight: 600;
color: #e8e5e5;
}
.content a {
margin: 0;
padding: 0;
display: inline-block;
font-family: "Hubot-Sans", sans-serif;
font-size: 1rem;
font-weight: 600;
color: #8c977d;
-webkit-text-decoration: underline 0.1rem #151515;
text-decoration: underline 0.1rem #151515;
transition: -webkit-text-decoration 0.2s ease-in-out;
transition: text-decoration 0.2s ease-in-out;
transition: text-decoration 0.2s ease-in-out, -webkit-text-decoration 0.2s ease-in-out;
}
.content a:hover {
color: #e8e5e5;
-webkit-text-decoration: underline 0.3rem #8c977d;
text-decoration: underline 0.3rem #8c977d;
}
.content img {
margin: 0 auto;
padding: 0;
max-width: 100%;
max-height: 30rem;
width: auto;
height: auto;
display: block;
-o-object-fit: contain;
object-fit: contain;
border-radius: 0.5rem;
}
.content iframe {
border-radius: 0.5rem;
}
.matrix-list {
margin: 0;
padding: 0;
width: auto;
height: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 0.5rem;
}
.matrix-list > * {
white-space: nowrap;
}
.matrix-list > *::after {
content: ",";
}
.matrix-list > *:last-child::after {
content: "";
}
.btn_large {
margin: 0;
padding: 0.5rem 1rem;
width: auto;
height: auto;
font-family: "Hubot-Sans", sans-serif;
font-size: 1.25rem;
font-weight: 600;
background-color: #121212;
color: #e8e5e5;
display: flex;
justify-content: end;
align-items: center;
gap: 0.5rem;
border: none;
border-left: 0.3rem solid #8c977d;
border-radius: 0;
box-sizing: border-box;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.btn_large p {
color: inherit;
font-stretch: expanded;
}
.btn_large:hover {
background-color: #101010;
color: #8c977d;
border-left: 0.9rem solid #8c977d;
}
.btn_large:hover p {
color: inherit;
}/*# sourceMappingURL=style.css.map */

1
css/style.css.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sources":["_variables.scss","style.css","_nav.scss","_hero.scss","_footer.scss","style.scss"],"names":[],"mappings":"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","file":"style.css"}

297
css/style.scss Normal file
View file

@ -0,0 +1,297 @@
@import 'variables';
@import 'nav';
@import 'hero';
@import 'footer';
html {
margin: 0;
padding: 0;
height: 100%;
background-color: $black-darker;
overflow: hidden;
}
body {
margin: 0;
padding: 0.5rem;
height: 100%;
background-image: url("../leaves.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
box-sizing: border-box;
}
@media (max-width: 500px) {
body {
padding: 0;
background-image: none;
}
}
main {
margin: 0 auto;
padding: 0;
max-width: 769px;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
position: relative;
background-color: $black;
box-sizing: border-box;
border-radius: 0.5rem;
z-index: +1;
}
#Home,
#Hobbies,
#Experiance,
#Gallery {
overflow-y: scroll;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
}
.main {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: 1rem;
box-sizing: border-box;
overflow: hidden;
}
.tabContent {
display: none;
height: 100%;
opacity: 0;
transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
overflow: hidden;
}
.content {
margin: 0;
padding: 1rem 1.5rem;
width: 100%;
height: auto;
display: flex;
flex-direction: column;
gap: 0.5rem;
box-sizing: border-box;
overflow: hidden;
background-color: $black;
h2 {
margin: 0.5rem 0 0.5rem 0;
padding: 0;
font-family: $font-header;
font-size: 2rem;
font-stretch: ultra-expanded;
color: $green;
}
h3 {
margin: 0.5rem 0 0.5rem 0;
padding: 0 0 0 0.5rem;
font-family: $font-header;
font-size: 1.5rem;
font-stretch: ultra-expanded;
color: $white;
border-left: 0.9rem solid $green;
}
h4 {
margin: 0.5rem 0 0.25rem 0;
padding: 0 0 0 0.5rem;
font-family: $font-header;
font-size: 1.25rem;
font-stretch: ultra-expanded;
color: $white;
border-left: 0.6rem solid $green;
}
br {
margin: 0 0 2rem 0;
padding: 0;
}
i {
margin: 0;
padding: 0;
display: inline-block;
vertical-align: middle;
font-family: $font-body;
font-size: 1rem;
}
p {
margin: 0;
padding: 0;
display: inline-block;
font-family: $font-body;
font-size: 1.1rem;
font-weight: 600;
color: $white;
}
a {
margin: 0;
padding: 0;
display: inline-block;
font-family: $font-body;
font-size: 1rem;
font-weight: 600;
color: $green;
text-decoration: underline 0.1rem $black;
transition: text-decoration 0.2s ease-in-out;
&:hover {
color: $white;
text-decoration: underline 0.3rem $green;
}
}
img {
margin: 0 auto;
padding: 0;
max-width: 100%;
max-height: 30rem;
width: auto;
height: auto;
display: block;
object-fit: contain;
border-radius: 0.5rem;
}
iframe {
border-radius: 0.5rem;
}
}
.matrix-list {
margin: 0;
padding: 0;
width: auto;
height: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 0.5rem;
> * {
white-space: nowrap;
&::after {
content:",";
}
&:last-child::after {
content:"";
}
}
}
.btn_large {
margin: 0;
padding: 0.5rem 1rem;
width: auto;
height: auto;
font-family: $font-body;
font-size: 1.25rem;
font-weight: 600;
background-color: $black-darker;
color: $white;
display: flex;
justify-content: end;
align-items: center;
gap: 0.5rem;
border: none;
border-left: 0.3rem solid $green;
border-radius: 0;
box-sizing: border-box;
cursor: pointer;
transition: all 0.2s ease-in-out;
p {
color: inherit;
font-stretch: expanded;
}
&:hover {
background-color: $black;
color: $green;
border-left: 0.9rem solid $green;
p {
color: inherit;
}
}
}