Fluffy/WebsiteArchive
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/Fluffys-website.git synced 2025-06-11 04:43:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Version 14.07.2021.2.3

Browse source 
Fixed scaling on Chrome and Mobile
This commit is contained in:
Michal 2021-07-14 20:36:38 +01:00 • committed by GitHub
parent 86d914f3f4
commit 13b6809a68
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 152 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

107
style.css
View file

@ -1,68 +1,94 @@
/* Images make everything better! Well, depending what sort of images... */
.header_image{
width: 70px;
width: 6vw;
}
.small_icons{
width: 12px;
}
.about_image{
width: 125px;
float: left;
margin-right: 20px;
margin-left: 50px;
margin-bottom: 20px;
border-radius: 25px;
}
/* Making text look pretty :3 */
h1{
text-decoration-line: underline;
text-decoration-line: underline; /* color */
text-decoration-style: wavy;
text-decoration-color: coral;
font-size: 70px;
font-size: 5.3vw; /* font */
text-align: center;
font-family: 'Rubik', sans-serif;
text-align: center;
justify-content: center;
align-items: center;
}
h2 {
font-size: 40px;
margin-left: 50px;
margin-right: 50px;
header{
margin-left: 4vw; /* spacing */
margin-right: 4vw;
}
h2{
color: coral; /* color */
font-size: 40px; /* font */
text-align: left;
font-family: 'Rubik', sans-serif;
color: coral
}
a{
color: coral;
text-decoration: none;
color: coral; /* color */
text-decoration: none; /* animation */
transition: all 0.1s;
}
a:hover{
font-weight: bolder;
color: white;
}
#header_two_text{
font-size: 18px;
margin-left: 50px;
margin-right: 50px;
margin-bottom: 150px;
#introduction_to_fluffy,
#about_fluffy,
#more_on_fluffy,
#social_media{
font-size: 18px; /* font */
margin-left: 4vw; /* spacing */
margin-right: 4vw;
margin-bottom: 7vw;
}
/* Guess where this is */
#font_correction{
font-family: "Lato", sans-serif;
transition: all 5s;
font-family: "Lato", sans-serif; /* font */
transition: all 5s; /* animation */
}
#font_correction:hover{
color: red;
}
#bottom_text_uwu{
text-align: center;
font-family: 'Open Sans', sans-serif;
font-family: 'Open Sans', sans-serif; /* font */
text-align: center; /* spacing */
}
#impotant_creature{
font-weight: bold;
font-weight: bold; /* Important! */
color: cadetblue;
}
/* I have no clue why I added this, but it's here! */
#fluffy_color{
font-weight: bold; /* Not so important! */
color: orange;
}
#social_media_list{
display: flex;
flex-direction: column;
}
/* Spotify player */
#spotify_player{
border-radius: 30px;
transition: all 0.1s;
@ -70,11 +96,11 @@ a:hover{
#spotify_player:hover{
border-radius: 10px;
}
/* Push all the buttonsssssssssssssss */
/* I cheated a bit with the boxes and it's not code I written :p */
#button{
border-color: inherit;
color: coral;
#navigation_button{
border-color: coral; /* I have no clue what's going on here */
color: coral; /* Just don't touch and break anything Fluffy */
border-radius: 15px;
display:inline-block;
  padding:3px 3px;
@ -84,22 +110,37 @@ a:hover{
margin: 10px;
transition: all 0.1s;
}
#button:hover{
#navigation_button:hover{
color: white;
border-color: white;
border-radius: 10px;
}
#button_row{
position: center;
#navigation_row_top,
footer{
text-align: center;
justify-content: center;
align-items: center;
margin: 0px 2vw;
}
#back_to_top{
#footer_button{
text-align: center;
}
/* Now all the site needs is some legs, hands and a head */
body{
color: white;
color: white; /* font */
font-family: "Lato", sans-serif;
background: linear-gradient(to bottom,#253652,#354c73)
background: linear-gradient(to bottom,#253652,#354c73); /* background */
display: grid;
grid-template-columns: 100%; /* grid */
grid-template-rows: auto auto auto auto auto auto auto;
grid-template-areas: "header"
"#navigation_row_top"
"#introduction_to_fluffy"
"#about_fluffy"
"#more_on_fluffy"
"#social_media"
"footer";
}