mirror of
https://github.com/hyprwm/hyprland-website.git
synced 2024-11-17 02:45:59 +01:00
788 lines
11 KiB
CSS
788 lines
11 KiB
CSS
@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");
|
|
}
|
|
/* #7069c5 */
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #1a1a2e;
|
|
}
|
|
|
|
header {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
padding: 0px 10%;
|
|
padding-left: 8%;
|
|
background-color: #1a1a2e;
|
|
}
|
|
|
|
.logo {
|
|
margin-right: auto;
|
|
margin-left: 40px;
|
|
}
|
|
|
|
.logo img {
|
|
width: 190px;
|
|
height: auto;
|
|
padding-top: 20px;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.nav__links {
|
|
list-style: none;
|
|
display: flex;
|
|
|
|
}
|
|
|
|
.nav__links a,
|
|
.cta,
|
|
.overlay__content a {
|
|
font-family: "Sofia-Pro-Medium";
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
color: #cfe8f6;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.nav__links li {
|
|
padding: 0px 20px;
|
|
}
|
|
|
|
|
|
|
|
.nav__links li a:hover {
|
|
color: aquamarine;
|
|
}
|
|
|
|
.cta {
|
|
margin-left: 20px;
|
|
padding: 16px 25px;
|
|
background-color: aquamarine;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease 0s;
|
|
color: #1a1a2e;
|
|
}
|
|
|
|
.cta:hover {
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
|
|
|
|
#close-id {
|
|
padding: 0px;
|
|
}
|
|
|
|
#home {
|
|
border-bottom: #cfe8f6 solid 4px;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
#home-full {
|
|
border-bottom: 2px solid #cfe8f6;
|
|
transition: all 0.5s ease;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
#home-full:hover {
|
|
border-bottom: 2px solid aquamarine;
|
|
}
|
|
|
|
.nav__links a:hover {
|
|
border-bottom: 2px solid aquamarine;
|
|
}
|
|
|
|
.top {
|
|
background-color: #1a1a2e;
|
|
display: flex;
|
|
}
|
|
|
|
.text h2 {
|
|
font-family: "JosefinSans-Regular";
|
|
color: #cfe8f6;
|
|
font-size: 4rem;
|
|
}
|
|
.text p {
|
|
font-family: "Sofia-Pro-Medium";
|
|
font-size: 20px;
|
|
color: #cfe8f6;
|
|
}
|
|
.text a {
|
|
font-family: "Sofia-Pro-Medium";
|
|
color: #cfe8f6;
|
|
}
|
|
.text a:hover {
|
|
color: aquamarine;
|
|
}
|
|
|
|
.text {
|
|
padding-top: 150px;
|
|
padding-bottom: 200px;
|
|
padding-left: 10%;
|
|
margin-right: auto;
|
|
max-width: 700px;
|
|
}
|
|
|
|
#install-hypr div {
|
|
width: 200px;
|
|
height: 50px;
|
|
background-color: aquamarine;
|
|
margin-top: 45px;
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
#install-hypr div p {
|
|
text-align: center;
|
|
color:#1a1a2e;
|
|
background-color: aquamarine;
|
|
padding-top: 1rem;
|
|
}
|
|
|
|
#install-hypr {
|
|
text-decoration: none;
|
|
}
|
|
|
|
#install-hypr div:hover {
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
|
|
#slide {
|
|
margin-top: 100px;
|
|
margin-right: 6%;
|
|
margin-left: 40px;
|
|
width: 650px;
|
|
height: max-content;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
#slide-content {
|
|
width: 640px;
|
|
height: auto;
|
|
}
|
|
.swiper {
|
|
width: 100%;
|
|
height: fit-content;
|
|
}
|
|
|
|
.swiper-slide img {
|
|
width: 640px;
|
|
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;
|
|
}
|
|
/* Mobile Nav */
|
|
|
|
.menu {
|
|
display: none ;
|
|
}
|
|
|
|
.overlay {
|
|
height: 100%;
|
|
width: 0;
|
|
position: fixed;
|
|
z-index: 1;
|
|
left: 0;
|
|
top: 0;
|
|
background-color: #1a1a2e;
|
|
overflow-x: hidden;
|
|
transition: all 0.5s ease 0s;
|
|
}
|
|
|
|
.overlay--active {
|
|
width: 100%;
|
|
}
|
|
|
|
.overlay__content {
|
|
display: flex;
|
|
height: 100%;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.overlay a {
|
|
padding: 15px;
|
|
font-size: 36px;
|
|
display: block;
|
|
transition: all 0.3s ease 0s;
|
|
}
|
|
|
|
.overlay a:hover,
|
|
.overlay a:focus {
|
|
color: aquamarine;
|
|
}
|
|
.overlay .close {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 45px;
|
|
font-size: 60px;
|
|
color: #cfe8f6;
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
.mob-menu {
|
|
display: none;
|
|
}
|
|
|
|
|
|
.mob-menu {
|
|
font-size: 40px;
|
|
color: #cfe8f6;
|
|
cursor: pointer;
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
.mob-menu:hover {
|
|
color: aquamarine;
|
|
}
|
|
|
|
.features {
|
|
width: 80%;
|
|
height: auto;
|
|
margin: 0px 10%;
|
|
}
|
|
|
|
.features h1 {
|
|
font-size: 69px;
|
|
font-family: "JosefinSans-Regular";
|
|
color: #cfe8f6;
|
|
}
|
|
|
|
#features-text {
|
|
padding-top: 30px;
|
|
padding-bottom: 120px;
|
|
}
|
|
.animation {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 500px;
|
|
}
|
|
|
|
#ani-vid video {
|
|
width: 640px;
|
|
height: auto;
|
|
}
|
|
|
|
#ani-text {
|
|
margin-left: 10%;
|
|
}
|
|
|
|
#ani-text h1 {
|
|
font-size: 53px;
|
|
text-align: center;
|
|
}
|
|
|
|
#ani-text p {
|
|
font-family: "Sofia-Pro-Light";
|
|
font-size: 20px;
|
|
color: #cfe8f6;
|
|
text-align: center;
|
|
}
|
|
|
|
#ani-text a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
#ani-text a div {
|
|
color: #1a1a2e;
|
|
font-family: "Sofia-Pro-Medium";
|
|
padding: 20px;
|
|
margin: 0px 20%;
|
|
margin-top: 40px;
|
|
|
|
background-color: aquamarine;
|
|
text-align: center;
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
#ani-text a div:hover {
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
.tiling {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 500px;
|
|
}
|
|
|
|
#til-vid video {
|
|
width: 640px;
|
|
height: auto;
|
|
}
|
|
|
|
#til-text {
|
|
margin-right: 10%;
|
|
}
|
|
|
|
#til-text h1 {
|
|
font-size: 53px;
|
|
text-align: center;
|
|
}
|
|
|
|
#til-text p {
|
|
font-family: "Sofia-Pro-Light";
|
|
font-size: 20px;
|
|
color: #cfe8f6;
|
|
text-align: center;
|
|
}
|
|
|
|
#til-text a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
#til-text a div {
|
|
color: #1a1a2e;
|
|
font-family: "Sofia-Pro-Medium";
|
|
padding: 20px;
|
|
margin: 0px 20%;
|
|
margin-top: 40px;
|
|
|
|
background-color: aquamarine;
|
|
text-align: center;
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
#til-text a div:hover {
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
.configure {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 500px;
|
|
}
|
|
|
|
#con-vid video {
|
|
width: 640px;
|
|
height: auto;
|
|
}
|
|
|
|
#con-text {
|
|
margin-left: 10%;
|
|
}
|
|
|
|
#con-text h1 {
|
|
font-size: 53px;
|
|
text-align: center;
|
|
}
|
|
|
|
#con-text p {
|
|
font-family: "Sofia-Pro-Light";
|
|
font-size: 20px;
|
|
color: #cfe8f6;
|
|
text-align: center;
|
|
}
|
|
|
|
#con-text a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
#con-text a div {
|
|
color: #1a1a2e;
|
|
font-family: "Sofia-Pro-Medium";
|
|
padding: 20px;
|
|
margin: 0px 20%;
|
|
margin-top: 40px;
|
|
|
|
background-color: aquamarine;
|
|
text-align: center;
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
#con-text a div:hover {
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
#con-text p a {
|
|
color: #cfe8f6;
|
|
text-decoration: underline;
|
|
transition: all 0.3s ease;
|
|
}
|
|
#con-text p a:hover {
|
|
color: aquamarine;
|
|
}
|
|
#link-config-discord:hover {
|
|
color: #5865f2 !important;
|
|
}
|
|
|
|
.and-more {
|
|
width: 100%;
|
|
height: 200px;
|
|
background-color: #1a1a2e;
|
|
}
|
|
|
|
.and-more h1 {
|
|
padding-top: 30px;
|
|
width: 100%;
|
|
font-size: 53px;
|
|
text-align: center;
|
|
color: #cfe8f6;
|
|
font-family: "JosefinSans-Regular";
|
|
background-color: #1a1a2e;
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
.and-more h1:hover {
|
|
color: aquamarine;
|
|
transform: scale(1.2);
|
|
}
|
|
.content {
|
|
margin-top: 60px;
|
|
width: 100%;
|
|
height: 300px;
|
|
}
|
|
/* .get-started {
|
|
font-family: 'JosefinSans-Regular';
|
|
font-size: 34px;
|
|
color: #cfe8f6;
|
|
padding-left: 10%;
|
|
padding-right: 10%;
|
|
|
|
}
|
|
.get-started a div {
|
|
color: #1a1a2e;
|
|
font-size: 24px;
|
|
font-family: "Sofia-Pro-Medium";
|
|
padding: 15px 60px;;
|
|
margin-right: 40%;
|
|
margin-top: 40px;
|
|
margin-bottom: 100px;
|
|
width: 300px;
|
|
background-color: aquamarine;
|
|
transition: all 0.5s ease;
|
|
}
|
|
.get-started a {
|
|
text-decoration: none;
|
|
} */
|
|
/*
|
|
.get-started a div:hover {
|
|
transform: scale(1.2);
|
|
} */
|
|
|
|
|
|
|
|
|
|
#get-started-button {
|
|
width: 330px;
|
|
background-color: aquamarine;
|
|
margin-left: 39%;
|
|
margin-bottom: 160px;
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
#get-started-button:hover {
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
|
|
|
|
#get-started-button a{
|
|
color: #1a1a2e;
|
|
background-color: aquamarine;
|
|
text-decoration: none;
|
|
font-family: "Sofia-Pro-Medium";
|
|
font-size: 22px;
|
|
padding: 20px;
|
|
display: block;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
footer {
|
|
font-family: 'Sofia-Pro-Light';
|
|
display: flex;
|
|
width: 80%;
|
|
font-size: 13px;
|
|
color:#a3a3a3a5;
|
|
margin: 0px 10%;
|
|
}
|
|
footer hr {
|
|
width: 80% !important;
|
|
}
|
|
footer a {
|
|
color:#a3a3a3a5;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
}
|
|
footer a:hover {
|
|
color:#cfe8f6;
|
|
}
|
|
#devs {
|
|
max-width: 700px;
|
|
margin-top: 12px;
|
|
line-height: 1.5;
|
|
}
|
|
.footer-icons {
|
|
display: flex;
|
|
width: 150px;
|
|
height: 60px;
|
|
margin-left: auto;
|
|
margin-top: 30px;
|
|
}
|
|
.footer-icons a img {
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-right: 30px;
|
|
}
|
|
|
|
|
|
@media only screen and (max-width: 1100px) {
|
|
.nav__links,
|
|
.cta {
|
|
display: none;
|
|
}
|
|
.menu {
|
|
display: initial;
|
|
}
|
|
.mob-menu {
|
|
display: flex;
|
|
}
|
|
|
|
.top {
|
|
display: inline;
|
|
|
|
}
|
|
.text {
|
|
text-align: center;
|
|
padding-top: 130px;
|
|
padding-left: 0px;
|
|
margin-right: 0px;
|
|
width: 100%;
|
|
padding-bottom: 100px;
|
|
max-width: 100%;
|
|
}
|
|
.text h2 {
|
|
font-size: 46px;
|
|
text-align: center;
|
|
width: 100%
|
|
}
|
|
.text p {
|
|
font-size: 18px;
|
|
text-align: center;
|
|
padding: 0px 10%;
|
|
padding-top: 30px;
|
|
}
|
|
#install-hypr div {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
#slide {
|
|
width: 640px;
|
|
height: auto;
|
|
align-items: center;
|
|
border: none;
|
|
margin-left: 10%;
|
|
margin-right: 10%;
|
|
|
|
}
|
|
#slide-content {
|
|
width: auto;
|
|
}
|
|
|
|
.swiper {
|
|
width: 640px;
|
|
margin-left: 0px;
|
|
}
|
|
.features {
|
|
margin: 0px;
|
|
width: 100%;
|
|
padding-top: 300px;
|
|
text-align: center;
|
|
|
|
}
|
|
#features-text {
|
|
padding-bottom: 100px;
|
|
}
|
|
.animation {
|
|
display: inline;
|
|
}
|
|
#ani-text {
|
|
margin-left: 0px;
|
|
}
|
|
#ani-text h1 {
|
|
padding-top: 80px;
|
|
font-size: 42px;
|
|
}
|
|
#ani-text p {
|
|
margin: 0px 10%;
|
|
}
|
|
.tiling {
|
|
margin-top: 500px;
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
}
|
|
#til-text {
|
|
margin-left: 0px;
|
|
}
|
|
#til-text h1 {
|
|
padding-top: 80px;
|
|
font-size: 42px;
|
|
}
|
|
#til-text p {
|
|
margin: 0px 10%;
|
|
}
|
|
#til-text{margin-right: 0px;}
|
|
.configure {
|
|
display: inline;
|
|
}
|
|
.configure {
|
|
margin-top: 2%;
|
|
}
|
|
#con-text {
|
|
margin-left: 0px;
|
|
}
|
|
#con-text h1 {
|
|
padding-top: 80px;
|
|
font-size: 42px;
|
|
}
|
|
#con-text p {
|
|
margin: 0px 10%;
|
|
}
|
|
#con-vid video {
|
|
margin-top: 250px;
|
|
}
|
|
#con-text {
|
|
margin-right: 0px;
|
|
}
|
|
.and-more {
|
|
padding-top: 80px;
|
|
}
|
|
.get-started {
|
|
margin-top: 200px;
|
|
}
|
|
.get-started a div {
|
|
margin-left: 20%;
|
|
}
|
|
.footer-text {
|
|
max-width: 250px;
|
|
}
|
|
#get-started-button {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-bottom: 80px;
|
|
|
|
}
|
|
.get-started {
|
|
margin-top: 80px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@media only screen and (max-width: 648px) {
|
|
header {
|
|
padding-left: 5px;
|
|
}
|
|
.logo img {
|
|
width: 160px;
|
|
height: auto;
|
|
}
|
|
|
|
|
|
.swiper-slide img {
|
|
width: 384px;
|
|
height: auto;
|
|
}
|
|
#slide {
|
|
width: 384px;
|
|
height: auto;
|
|
align-items: center;
|
|
border: none;
|
|
margin-left: 0px;
|
|
margin-right: 0px;
|
|
|
|
}
|
|
.swiper {
|
|
width: 384px;
|
|
margin-left: 0px;
|
|
}
|
|
#slide-content {
|
|
width: auto;
|
|
}
|
|
#ani-vid video {
|
|
width: 384px;
|
|
height: auto;
|
|
}
|
|
#ani-text h1 {
|
|
margin: 0px 10%;
|
|
}
|
|
#til-vid video {
|
|
width: 384px;
|
|
height: auto;
|
|
}
|
|
#con-vid video {
|
|
width: 384px;
|
|
height: auto;
|
|
}
|
|
|
|
|
|
.overlay a {
|
|
font-size: 20px;
|
|
}
|
|
.overlay .close {
|
|
font-size: 40px;
|
|
top: 15px;
|
|
right: 35px;
|
|
|
|
}
|
|
.mob-menu {
|
|
display: flex;
|
|
}
|
|
.get-started a div {
|
|
margin-left: 0px;
|
|
}
|
|
.footer-icons a img {
|
|
margin-right: 10px;
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
.footer-text {
|
|
max-width: 150px;
|
|
}
|
|
.footer-icons {
|
|
margin-left: 20%;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|