links/css/css.scss
OLIMINATOR 10f7bbafa8
Fix v1
Fixnute:
- Mobile optimalizácia
- Bugnutý footer
- Bolo to trocha napravo
2021-08-14 19:22:23 +02:00

221 lines
5 KiB
SCSS

@import url("https://fonts.googleapis.com/css2?family=Rubik&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Ubuntu&display=swap");
body {
margin: 0;
padding: 0;
background-color: #000e14;
background-image: linear-gradient(62deg, #000e14 0%, #001929 100%);
background-repeat: no-repeat;
}
header {
// LOGO A TEXT
display: flex;
justify-content: center;
align-items: center;
margin-top: 2em;
margin-bottom: 2em;
h1 {
color: white;
font-size: 2em;
font-family: "Rubik", sans-serif;
text-shadow: 0 0 3px #fff;
}
img {
height: 8em;
}
}
section {
// TLACITKA
display: flex;
justify-content: center;
align-items: center;
ul {
margin: 0;
padding: 0;
li {
margin-bottom: 3.5em;
list-style-type: none;
text-align: center;
a {
text-decoration: none;
}
.btn-yt {
font-family: "Rubik", sans-serif;
color: white;
background-color: #db0000;
padding: 1.2em 6.5em;
border-radius: 0.8em;
transition: 0.3s;
&:hover {
background: #a60f0f;
border-radius: 0.5em;
}
}
.btn-tiktok {
font-family: "Rubik", sans-serif;
color: white;
background-color: #8a257e;
padding: 1.2em 6em;
border-radius: 0.8em;
transition: 0.3s;
&:hover {
background: #5e1956;
border-radius: 0.5em;
}
}
.btn-ig {
font-family: "Rubik", sans-serif;
color: white;
background-color: #ad0046;
padding: 1.2em 5.7em;
border-radius: 0.8em;
transition: 0.3s;
&:hover {
background: #91003b;
border-radius: 0.5em;
}
}
.btn-github {
font-family: "Rubik", sans-serif;
color: white;
background-color: #171717;
padding: 1.2em 6.7em;
border-radius: 0.8em;
transition: 0.3s;
&:hover {
background: #121212;
border-radius: 0.5em;
}
}
.btn-discord {
font-family: "Rubik", sans-serif;
color: white;
background-color: #4f53ff;
padding: 1.2em 6.5em;
border-radius: 0.8em;
transition: 0.3s;
&:hover {
background: #3c40fa;
border-radius: 0.5em;
}
}
.btn-namemc {
font-family: "Rubik", sans-serif;
color: white;
background-color: #45293f;
padding: 1.2em 6.8em;
border-radius: 0.8em;
transition: 0.3s;
&:hover {
background: #2b1a28;
border-radius: 0.5em;
}
}
.btn-mcserver {
font-family: "Rubik", sans-serif;
color: white;
background-color: #6bcf00;
padding: 1.2em 5.2em;
border-radius: 0.8em;
transition: 0.3s;
&:hover {
background: #428000;
border-radius: 0.5em;
}
}
.btn-mcplanet {
font-family: "Rubik", sans-serif;
color: white;
background-color: #006b91;
padding: 1.2em 6.5em;
border-radius: 0.8em;
transition: 0.3s;
&:hover {
background: #014c66;
border-radius: 0.5em;
}
}
.btn-more {
font-family: "Rubik", sans-serif;
color: #5786de;
padding: 0.8em 2em;
border-radius: 0.8em;
transition: 0.6s;
&:hover {
color: #1c4085;
background: #d4e3ff;
border-radius: 2.9em;
}
}
}
}
}
.btn-twitch {
font-family: "Rubik", sans-serif;
color: white;
background-color: #5200a3;
padding: 1.2em 7em;
border-radius: 0.8em;
transition: 0.3s;
&:hover {
background: #47008c;
border-radius: 0.5em;
}
}
// Bonus buttons
.btn-replit {
font-family: "Rubik", sans-serif;
color: white;
background-color: #8a5a6e;
padding: 1.2em 7em;
border-radius: 0.8em;
transition: 0.3s;
&:hover {
background: #5e3d4b;
border-radius: 0.5em;
}
}
.btn-twitter {
font-family: "Rubik", sans-serif;
color: white;
background-color: #1da1f2;
padding: 1.2em 7em;
border-radius: 0.8em;
transition: 0.3s;
&:hover {
background: #0f87d1;
border-radius: 0.5em;
}
}
footer {
margin-top: 3em;
padding: 2.2em;
background-color: #000508;
}
.footer-text-main {
color: #525252;
font-family: "Ubuntu", sans-serif;
text-align: center;
padding: 0;
margin: 0;
margin-top: 1em;
}
.footer-odkazy {
color: gray;
padding: 0;
margin: 0;
text-align: center;
list-style-type: none;
font-size: 0.7em;
text-transform: uppercase;
}
.footer-odkazy li {
display: inline-block;
}
.footer-odkazy-text {
font-family: "Ubuntu", sans-serif;
text-decoration: underline;
color: #333333;
display: inline-block;
}