hyprland-website/public/css/home.css

563 lines
7.7 KiB
CSS
Raw Normal View History

2022-08-13 16:15:08 +02:00
@font-face {
font-family: "LondonBetween";
src: url("../fonts/LondonBetween.woff") format("woff");
}
@font-face {
font-family: "JosefinSans-Regular";
src: url("../fonts/JosefinSans-Regular.woff") format("woff");
}
@font-face {
font-family: "Sofia-Pro-Light";
src: url("../fonts/SofiaProLight.woff") format("woff");
}
@font-face {
font-family: "Sofia-Pro-Medium";
src: url("../fonts/SofiaProMedium.woff") format("woff");
}
@font-face {
font-family: "SourceCodePro-Semibold";
src: url("../fonts/SourceCodePro-Semibold.woff") format("woff");
}
* {
padding: 0px;
margin: 0px;
background-color: #1a1a2e;
}
body {
overflow-x: hidden;
}
#content-center {
margin-left: 10%;
margin-right: 10%;
}
#header {
display: flex;
background-color: #1a1a2e;
width: auto;
height: 6rem;
}
.header {
background-color: #1a1a2e;
}
#header-logo-div {
width: 240px;
}
#header-logo {
width: auto;
height: 100%;
}
#header-links {
display: flex;
padding-top: 15%;
width: 260px;
}
#header-links-div {
margin-left: auto;
padding-right: 10rem;
}
.header-link {
color: #cfe8f6;
font-family: "LondonBetween";
font-size: 20px;
text-decoration: none;
transition: transform 0.2s;
}
.text-para-link:hover {
color: aquamarine;
font-size: 28px;
}
.text-para-link {
color: #cfe8f6;
font-size: 22px;
transition: font-size 0.2s;
}
#header-link-install {
margin-left: 10%;
}
#header-link-configure {
margin-left: 10%;
}
#header-link-home {
border-bottom: 2px solid #cfe8f6;
}
.header-link:hover {
transform: scale(1.3);
border-bottom: 2px solid aquamarine !important;
color: aquamarine;
}
#links-out {
margin-left: auto;
}
#github {
margin-top: 50%;
}
#link-github {
padding: 15px;
background-color: aquamarine;
font-family: "LondonBetween";
color: #1a1a2e;
text-decoration: none;
}
#github {
transition: transform 0.2s;
}
#github:hover {
transform: scale(1.2);
}
#top {
width: 100%;
height: 40rem;
/* background-color: #1a1a2e; */
display: flex;
}
#text {
width: 50%;
height: 100%;
margin-top: 8rem;
padding-right: 20px;
}
#text-h1 {
color: #cfe8f6;
font-family: "JosefinSans-Regular";
font-size: 65px;
line-height: 1;
}
.text-para {
padding-top: 20px;
color: #cfe8f6;
font-family: "Sofia-Pro-Medium";
font-size: 22px;
line-height: 1.3;
}
#slide {
width: 50%;
height: 100%;
}
#slide-content {
margin-left: 10px;
margin-right: 10px;
margin-top: 120px;
display: flex;
width: auto;
border: 5px solid #cfe8f6;
margin-left: 30px;
height: auto;
max-height: 23rem;
max-width: 40rem;
}
#slide-img {
width: auto;
max-width: 40rem;
height: auto;
max-height: 23rem;
}
.swiper {
width: auto;
}
.swiper-slide {
width: auto;
}
.swiper-wrapper {
width: auto;
height: auto;
}
.swiper .swiper-button-prev,
.swiper .swiper-button-next {
color: #cfe8f6;
background-color: transparent;
}
.swiper .swiper-pagination-bullet-active {
background-color: #cfe8f6;
}
.swiper .swiper-pagination {
background-color: transparent;
}
#install-link {
margin-top: 2rem;
padding: 15px;
background-color: aquamarine;
border: 5px solid #1a1a2e;
/* border-radius: 15px; */
font-family: "Sofia-Pro-Medium";
transition: transform 0.2s;
font-size: 16px;
cursor: pointer;
}
#install-link:hover {
transform: scale(1.2);
}
#title-features {
font-family: "JosefinSans-Regular";
color: #cfe8f6;
font-size: 102px;
}
#features {
width: 100%;
height: 130rem;
}
#animation {
margin-top: 10rem;
display: flex;
}
#animation-left {
width: 50%;
height: 100%;
}
video {
width: 100%;
height: 10%;
}
#animation-right {
width: 50%;
height: 100%;
}
#animation-h1 {
color: #cfe8f6;
font-family: "JosefinSans-Regular";
margin-left: 25%;
margin-top: 15%;
font-size: 46px;
line-height: 1;
width: 100%;
}
#animation-p {
color: #cfe8f6;
font-family: "Sofia-Pro-Light";
margin-left: 20%;
margin-top: 2%;
font-size: 18px;
line-height: 1.5;
text-align: center;
}
#tiling {
margin-top: 20rem;
display: flex;
}
#tiling-left {
width: 50%;
height: 100%;
}
#tiling-right {
width: 50%;
height: 100%;
}
#tiling-h1 {
color: #cfe8f6;
font-family: "JosefinSans-Regular";
margin-left: 13%;
margin-top: 15%;
font-size: 46px;
line-height: 1;
width: 100%;
}
#tiling-p {
color: #cfe8f6;
font-family: "Sofia-Pro-Light";
margin-right: 20%;
margin-top: 2%;
font-size: 18px;
line-height: 1.5;
text-align: center;
}
#configure {
margin-top: 20rem;
display: flex;
}
#configure-left {
width: 50%;
height: 100%;
}
#configure-right {
width: 50%;
height: 100%;
}
#configure-h1 {
color: #cfe8f6;
font-family: "JosefinSans-Regular";
margin-left: 26%;
margin-top: 15%;
font-size: 46px;
line-height: 1;
width: 100%;
}
#configure-p {
color: #cfe8f6;
font-family: "Sofia-Pro-Light";
margin-left: 20%;
margin-top: 2%;
font-size: 18px;
line-height: 1.5;
text-align: center;
}
#link-config {
color: #cfe8f6;
transition: font-size 0.2s;
}
#link-config-discord {
color: #cfe8f6;
transition: font-size 0.2s;
}
#link-config:hover {
color: aquamarine;
font-size: 20px;
}
#link-config-discord:hover {
color: #5865f2;
font-size: 20px;
}
#and-many-more {
width: auto;
margin-top: 15rem;
margin-left: 10%;
margin-right: 10%;
margin-bottom: 6rem;
height: 30rem;
background-color: #2d2d47;
border-radius: 15px;
}
.amm {
background-color: #2d2d47;
border-radius: 15px;
}
#h1-amm {
color: #cfe8f6;
font-family: "JosefinSans-Regular";
margin-left: 28%;
padding-top: 4%;
font-size: 52px;
line-height: 1;
}
#ul-amm-div {
display: flex;
margin-top: 5%;
padding-left: 50px;
}
#ul-amm {
margin-left: 10%;
}
#li-amm {
color: #cfe8f6;
font-family: "Sofia-Pro-Medium";
padding-bottom: 3rem;
}
#quickinstall {
width: 100%;
height: 20rem;
}
#quickinstall h1 {
color: #cfe8f6;
font-family: "JosefinSans-Regular";
font-size: 48px;
}
#qi-content {
width: auto;
height: 6rem;
margin-top: 20px;
border-radius: 15px;
background-color: #2d2d47;
}
#qi-content p span {
font-family: "SourceCodePro-Semibold";
font-size: 22px;
background-color: #2d2d47;
}
#qi-content p {
padding-top: 32px;
padding-left: 30px;
background-color: #2d2d47;
border-radius: 15px;
}
#yay {
color: #f9e2af
}
#syyu {
color: #94e2d5;
}
#h-git {
color:#cfe8f6;
}
#warning {
width: auto;
margin-top: 4rem;
margin-bottom: 10rem;
height: 6rem;
background-color: rgba(243, 139, 168,1);
display: flex;
border-radius: 15px;
}
#warning img {
width: auto;
height: 60%;
background-color: rgba(243, 139, 168,1);
margin-top: 20px;
margin-left: 30px;
}
#warning p {
color: black;
font-family: "Sofia-Pro-Light";
margin-left: 30px;
margin-top: 40px;
font-size: 20px;
background-color: rgba(243, 139, 168,1);
}
#warning i {
background-color: rgba(243, 139, 168,1);
}
#info-install {
color:#cfe8f6;
font-family: "Sofia-Pro-Medium";
margin-top: 10px;
font-size: 14px;
}
#info-install-link {
color:#cfe8f6;
font-family: "Sofia-Pro-Medium";
font-size: 14px;
transition: font-size 0.2s;
}
#info-install-link:hover {
color: aquamarine;
font-family: "Sofia-Pro-Medium";
font-size: 18px;
}
hr {
margin-top: 100px;
color:#a3a3a3a5;
}
footer {
width: 100%;
height: 130px;
display: flex;
}
footer p {
margin-top: 10px;
color: #a3a3a3a5;
font-family: "Sofia-Pro-Light";
font-size: 13px;
}
footer p a {
color: #a3a3a3a5;
text-decoration: none;
}
footer p a:hover {
color: #cfe8f6;
text-decoration: none;
}
#devs {
padding-top: 5px;
}
.p2 {
margin-top: 9px;
}
#foot-icons img {
padding-left: 20px;
width: 30px;
height: 30px;
}
#foot-icons {
margin-left: 35%;
margin-top: 4%;
display: flex;
}