Fluffy/WebsiteArchive
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/Fluffys-website.git synced 2025-05-29 23:03:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

New page

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

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;
}
}
}