old-website/style.css

147 lines
3.2 KiB
CSS
Raw Normal View History

2021-07-13 21:54:55 +00:00
/* Images make everything better! Well, depending what sort of images... */
.header_image{
width: 6vw;
2021-07-13 21:54:55 +00:00
}
2021-07-13 21:54:55 +00:00
.small_icons{
width: 12px;
}
2021-07-13 21:54:55 +00:00
.about_image{
width: 125px;
float: left;
margin-right: 20px;
margin-bottom: 20px;
2021-07-13 21:54:55 +00:00
border-radius: 25px;
}
2021-07-13 21:54:55 +00:00
/* Making text look pretty :3 */
h1{
text-decoration-line: underline; /* color */
2021-07-13 21:54:55 +00:00
text-decoration-style: wavy;
text-decoration-color: coral;
font-size: 5.3vw; /* font */
2021-07-13 21:54:55 +00:00
text-align: center;
font-family: 'Rubik', sans-serif;
text-align: center;
justify-content: center;
align-items: center;
}
header{
margin-left: 4vw; /* spacing */
margin-right: 4vw;
2021-07-13 21:54:55 +00:00
}
h2{
color: coral; /* color */
font-size: 40px; /* font */
2021-07-13 21:54:55 +00:00
text-align: left;
font-family: 'Rubik', sans-serif;
}
2021-07-13 21:54:55 +00:00
a{
color: coral; /* color */
text-decoration: none; /* animation */
2021-07-13 21:54:55 +00:00
transition: all 0.1s;
}
a:hover{
font-weight: bolder;
color: white;
}
#introduction_to_fluffy,
#about_fluffy,
#more_on_fluffy,
#social_media{
font-size: 18px; /* font */
margin-left: 4vw; /* spacing */
margin-right: 4vw;
margin-bottom: 7vw;
2021-07-13 21:54:55 +00:00
}
#font_correction{
font-family: "Lato", sans-serif; /* font */
transition: all 5s; /* animation */
2021-07-13 21:54:55 +00:00
}
#font_correction:hover{
color: red;
}
#bottom_text_uwu{
font-family: 'Open Sans', sans-serif; /* font */
text-align: center; /* spacing */
2021-07-13 21:54:55 +00:00
}
2021-07-13 21:54:55 +00:00
#impotant_creature{
font-weight: bold; /* Important! */
2021-07-13 21:54:55 +00:00
color: cadetblue;
}
#fluffy_color{
font-weight: bold; /* Not so important! */
color: orange;
}
#social_media_list{
display: flex;
flex-direction: column;
}
/* Spotify player */
2021-07-13 21:54:55 +00:00
#spotify_player{
border-radius: 30px;
transition: all 0.1s;
}
#spotify_player:hover{
border-radius: 10px;
}
2021-07-13 21:54:55 +00:00
/* Push all the buttonsssssssssssssss */
#navigation_button{
border-color: coral; /* I have no clue what's going on here */
color: coral; /* Just don't touch and break anything Fluffy */
2021-07-13 21:54:55 +00:00
border-radius: 15px;
display:inline-block;
padding:3px 3px;
margin:2px;
border:2px solid coral;
box-sizing: border-box;
margin: 10px;
transition: all 0.1s;
}
#navigation_button:hover{
2021-07-13 21:54:55 +00:00
color: white;
border-color: white;
border-radius: 10px;
}
#navigation_row_top,
footer{
2021-07-13 21:54:55 +00:00
text-align: center;
justify-content: center;
align-items: center;
margin: 0px 2vw;
2021-07-13 21:54:55 +00:00
}
#footer_button{
2021-07-13 21:54:55 +00:00
text-align: center;
}
/* Now all the site needs is some legs, hands and a head */
body{
color: white; /* font */
2021-07-13 21:54:55 +00:00
font-family: "Lato", sans-serif;
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";
2021-07-13 21:54:55 +00:00
}