hyprwm/hyprland-website
1
0
Fork 0
mirror of https://github.com/hyprwm/hyprland-website.git synced 2024-11-17 02:45:59 +01:00
Code Issues Projects Releases Packages Wiki Activity

fixed broken site on larger screens (#19)

Browse source
This commit is contained in:
System-x64 2023-02-04 00:43:45 +05:30 committed by GitHub
parent 381f8170bf
commit 49be3c8b4e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 328 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

314
public/css/home.css
View file

@ -29,6 +29,10 @@
background-color: #1a1a2e; background-color: #1a1a2e;
} }
body {
background-color: #1a1a2e;
}
header { header {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
@ -37,7 +41,6 @@ header {
padding-left: 8%; padding-left: 8%;
background-color: #1a1a2e; background-color: #1a1a2e;
padding-top: 20px; padding-top: 20px;
} }
.logo { .logo {
@ -93,11 +96,10 @@ header {
} }
#close-id { #close-id {
padding: 0px; padding: 0px;
margin-right: 32px; margin-right: 32px;
font-size: 43px; font-size: 43px;
margin-top: 5px; margin-top: 5px;
} }
#home { #home {
@ -122,7 +124,7 @@ margin-top: 5px;
.top { .top {
background-color: #1a1a2e; background-color: #1a1a2e;
display: flex; display: flex;
height: 643px; height: max-content;
} }
.text h2 { .text h2 {
@ -134,7 +136,7 @@ margin-top: 5px;
font-family: "Sofia-Pro-Medium"; font-family: "Sofia-Pro-Medium";
font-size: 20px; font-size: 20px;
color: #cfe8f6; color: #cfe8f6;
padding-top: 15px; padding-top: 10px;
} }
.text a { .text a {
font-family: "Sofia-Pro-Medium"; font-family: "Sofia-Pro-Medium";
@ -148,34 +150,33 @@ margin-top: 5px;
padding-top: 150px; padding-top: 150px;
padding-left: 10%; padding-left: 10%;
margin-right: auto; margin-right: auto;
max-width: 700px; max-width: 600px;
} }
#install-hypr div { #install-hypr div {
width: 300px; width: 300px;
height: 60px; height: 60px;
background-color: aquamarine; background-color: aquamarine;
margin-top: 30px; margin-top: 40px;
transition: all 0.5s ease; transition: all 0.5s ease;
border-radius: 0.2rem; border-radius: 0.2rem;
} }
#install-hypr div p { #install-hypr div p {
text-align: center; text-align: center;
color: #1a1a2e; color: #1a1a2e;
background-color: aquamarine; background-color: aquamarine;
padding-top: 1.25rem; padding-top: 1rem;
padding-bottom: 1rem; padding-bottom: 1rem;
font-size: 22px; font-size: 22px;
border-radius: 0.2rem; border-radius: 0.2rem;
border:solid aquamarine; border: solid aquamarine;
transition: all 0.5s ease; transition: all 0.5s ease;
} }
#install-hypr div p:hover { #install-hypr div p:hover {
background-color: #1a1a2e; background-color: #1a1a2e;
color: aquamarine color: aquamarine;
} }
#install-hypr { #install-hypr {
@ -190,10 +191,11 @@ margin-top: 5px;
margin-top: 100px; margin-top: 100px;
margin-right: 6%; margin-right: 6%;
margin-left: 40px; margin-left: 40px;
width: 650px; width: 640px;
height: max-content; height: max-content;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding-bottom: 5%;
} }
#slide-content { #slide-content {
@ -338,8 +340,9 @@ margin-top: 5px;
#ani-text a div { #ani-text a div {
color: #1a1a2e; color: #1a1a2e;
font-family: "Sofia-Pro-Medium"; font-family: "Sofia-Pro-Medium";
font-size: 16px;
padding: 20px; padding: 20px;
margin: 0px 20%; margin: 0px 17%;
margin-top: 40px; margin-top: 40px;
border-radius: 0.2rem; border-radius: 0.2rem;
border: solid aquamarine; border: solid aquamarine;
@ -452,7 +455,6 @@ margin-top: 5px;
transform: scale(1.2); transform: scale(1.2);
background-color: #1a1a2e; background-color: #1a1a2e;
color: aquamarine; color: aquamarine;
} }
#con-text p a { #con-text p a {
@ -467,8 +469,6 @@ margin-top: 5px;
color: #5865f2 !important; color: #5865f2 !important;
} }
footer { footer {
font-family: "Sofia-Pro-Light"; font-family: "Sofia-Pro-Light";
display: flex; display: flex;
@ -520,8 +520,7 @@ footer a:hover {
margin-bottom: 10px; margin-bottom: 10px;
} }
@media only screen and (max-width: 1140px) {
@media only screen and (max-width: 1100px) {
.nav__links, .nav__links,
.cta { .cta {
display: none; display: none;
@ -643,7 +642,6 @@ footer a:hover {
footer { footer {
/* display: block; */ /* display: block; */
} }
} }
@media only screen and (max-width: 648px) { @media only screen and (max-width: 648px) {
@ -662,14 +660,14 @@ footer a:hover {
#install-hypr div { #install-hypr div {
width: 220px; width: 220px;
height: 40px; height: 40px;
} }
#install-hypr div p { #install-hypr div p {
font-size: 20px; font-size: 20px;
} }
.text { .text {
padding-top: 20%; padding-top: 20%;
padding-bottom: 25%; padding-bottom: 25%;
} }
#slide { #slide {
width: 384px; width: 384px;
height: auto; height: auto;
@ -711,8 +709,7 @@ footer a:hover {
} }
.mob-menu { .mob-menu {
display: flex; display: flex;
margin-bottom: 10px; margin-bottom: 8px;
} }
.get-started a div { .get-started a div {
margin-left: 0px; margin-left: 0px;
@ -729,38 +726,267 @@ footer a:hover {
margin-left: 20%; margin-left: 20%;
} }
#home { #home {
border-bottom: #cee7f5 solid 3px; border-bottom: #cee7f5 solid 3px;
} }
#close-id { #close-id {
margin-right: 7px; margin-right: 7px;
} }
footer { footer {
display: block; display: block;
} }
.footer-text { .footer-text {
max-width: none; max-width: none;
} }
.footer-icons { .footer-icons {
display: flex; display: flex;
width: fit-content; width: fit-content;
height: 60px; height: 60px;
margin-left: auto; margin-left: auto;
margin-top: 30px; margin-top: 30px;
margin-right: auto; margin-right: auto;
} }
.bi.bi-github { .bi.bi-github {
margin-right: 30px; margin-right: 30px;
} }
.footer-icons a svg { .footer-icons a svg {
width: 30px; width: 30px;
height: 30px; height: 30px;
margin-right: 0; margin-right: 0;
} }
#licence { #licence {
margin-top: 15px; margin-top: 15px;
margin-bottom: 10px; margin-bottom: 10px;
line-height: 1.5; line-height: 1.5;
font-size: 14px; font-size: 14px;
}
} }
@media only screen and (min-width: 1860px) {
#ani-text {
margin-left: auto;
max-width: 500px;
margin-top: 50px;
}
#til-text {
margin-right: auto;
max-width: 500px;
margin-top: 50px;
}
#con-text {
margin-left: auto;
max-width: 500px;
margin-top: 50px;
}
#ani-vid video {
width: 755px;
}
#til-vid video {
width: 755px;
}
#con-vid video {
width: 755px;
}
}
@media only screen and (min-width: 2200px) {
#ani-text {
margin-left: auto;
max-width: 700px;
margin-top: 80px;
}
#ani-text h1 {
font-size: 54px;
}
#ani-text p {
font-size: 26px;
}
#ani-text a div {
scale: 1.2;
}
#til-text {
margin-right: auto;
max-width: 700px;
margin-top: 80px;
margin-left: 3%;
}
#til-text h1 {
font-size: 54px;
}
#til-text p {
font-size: 26px;
}
#til-text a div {
scale: 1.2;
}
#con-text {
margin-left: auto;
max-width: 700px;
margin-top: 80px;
}
#con-text h1 {
font-size: 54px;
}
#con-text p {
font-size: 26px;
}
#con-text a div {
scale: 1.2;
}
.animation {
height: max-content;
}
#ani-vid video {
width: 80%;
height: auto;
padding-bottom: 100px;
}
.tiling {
height: max-content;
}
#til-vid video {
width: 80%;
height: auto;
padding-bottom: 100px;
margin-left: 25%;
}
.configure {
height: max-content;
}
#con-vid video {
width: 80%;
height: auto;
padding-bottom: 100px;
}
.top {
height: max-content;
}
.swiper-slide img {
width: 960px;
height: auto;
}
#slide-content {
width: 960px;
height: auto;
}
#slide {
width: max-content;
padding-bottom: 5%;
}
.text p {
font-size: 26px;
padding-top: 10px;
}
.text h2 {
font-size: 68px;
}
#install-hypr div {
scale: 1.2;
margin-left: 5%;
margin-top: 45px;
}
.text {
margin-top: 1%;
max-width: 800px;
}
#features-text {
font-size: 82px;
padding-bottom: 80px;
}
.footer-text * {
font-size: 16px;
}
#devs {
max-width: 800px;
}
}
@media only screen and (min-width: 3000px) {
#ani-text {
margin-top: 5%;
margin-right: auto;
}
#ani-text h1 {
font-size: 72px;
}
#ani-text p {
font-size: 32px;
}
#ani-text a div {
scale: 1.3;
}
#til-text {
margin-top: 5%;
margin-left: auto;
}
#til-text h1 {
font-size: 72px;
}
#til-text p {
font-size: 32px;
}
#til-text a div {
scale: 1.3;
}
#con-text {
margin-top: 5%;
margin-right: auto;
}
#con-text h1 {
font-size: 72px;
}
#con-text p {
font-size: 32px;
}
#con-text a div {
scale: 1.3;
}
.swiper-slide img {
width: 1377px;
}
#slide-content {
width: 1377px;
}
.text {
max-width: 1000px;
margin-top: 5%;
}
.text p {
font-size: 32px;
}
.text h2 {
font-size: 82px;
}
#install-hypr div {
scale: 1.3;
margin-left: 5%;
}
#features-text {
font-size: 96px;
}
.nav__links a,
.cta {
font-size: 28px;
}
.logo img {
width: 240px;
height: auto;
padding-right: 10px;
}
.footer-text * {
font-size: 20px;
}
#devs {
max-width: 1000px;
}
.text {
max-width: 1000px !important;
}
}
@media only screen and (min-width: 1700px) {
.text {
max-width: 800px;
}
} }

BIN
public/imgs/wall_4K.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
public/imgs/what-is-hyprland.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1,008 KiB

BIN
public/imgs/what-is-hyprland2.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 681 KiB

BIN
public/imgs/what-is-wayland.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 680 KiB

1
views/404.ejs
View file

@ -8,6 +8,7 @@
<link rel="shortcut icon" href="ico/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="ico/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="css/home.css" /> <link rel="stylesheet" href="css/home.css" />
<link rel="stylesheet" href="css/404.css" /> <link rel="stylesheet" href="css/404.css" />
<meta name="darkreader-lock">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
<title>Oops ...</title> <title>Oops ...</title>
</head> </head>

3
views/home.ejs
View file

@ -5,6 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="ico/favicon.ico" type="image/ico" /> <link rel="icon" href="ico/favicon.ico" type="image/ico" />
<meta name="darkreader-lock" />
<link <link
rel="icon" rel="icon"
href="ico/favicon-32x32.png" href="ico/favicon-32x32.png"
@ -33,6 +34,7 @@
/> />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:url" content="https://www.hyprland.org/" /> <meta property="og:url" content="https://www.hyprland.org/" />
<meta property="og:image" content="imgs/wall_4k.png" />
<meta <meta
name="twitter:card" name="twitter:card"
content="Hyprland is a dynamic tiling wayland compositor that offers unique features like smooth animations, dynamic tiling and rounded corners. Learn more by visiting this site!" content="Hyprland is a dynamic tiling wayland compositor that offers unique features like smooth animations, dynamic tiling and rounded corners. Learn more by visiting this site!"
@ -41,6 +43,7 @@
name="twitter:title" name="twitter:title"
content="Hyprland - A wayland compositor that doesn't sacrifice on its looks!" content="Hyprland - A wayland compositor that doesn't sacrifice on its looks!"
/> />
<meta name="twitter:image" content="imgs/wall_4k" />
<meta <meta
name="description" name="description"
content="Hyprland is a dynamic tiling wayland compositor that offers unique features like smooth animations, dynamic tiling and rounded corners. Learn more by visiting this site!" content="Hyprland is a dynamic tiling wayland compositor that offers unique features like smooth animations, dynamic tiling and rounded corners. Learn more by visiting this site!"

24
views/rices.ejs
View file

@ -6,8 +6,21 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="ico/favicon.ico" type="image/ico" /> <link rel="icon" href="ico/favicon.ico" type="image/ico" />
<link rel="icon" href="ico/favicon-32x32.png" size="32x32" type="image/png" /> <meta name="darkreader-lock">
<link rel="icon" href="ico/favicon-32x32.png" size="16x16" type="image/png" /> <meta property="og:image" content="imgs/wall_4k.png">
<meta name="twitter:image" content="imgs/wall_4k">
<link
rel="icon"
href="ico/favicon-32x32.png"
size="32x32"
type="image/png"
/>
<link
rel="icon"
href="ico/favicon-32x32.png"
size="16x16"
type="image/png"
/>
<link rel="stylesheet" href="css/home.css" /> <link rel="stylesheet" href="css/home.css" />
<link rel="stylesheet" href="css/rices.css" /> <link rel="stylesheet" href="css/rices.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
@ -22,10 +35,9 @@
<li> <li>
<a class="nav-link" data-value="Home" href="https://www.hyprland.org/">Hyprland</a> <a class="nav-link" data-value="Home" href="https://www.hyprland.org/">Hyprland</a>
</li> </li>
<li><a class="nav-link" data-value="Get Started" <li><a class="nav-link" data-value="Get Started" href="https://wiki.hyprland.org/Getting-Started/Master-Tutorial/">Get Started</a></li>
href="https://wiki.hyprland.org/Getting-Started/Master-Tutorial/">Get Started</a></li>
<li><a class="nav-link" data-value="Wiki" href="https://wiki.hyprland.org/">Wiki</a></li> <li><a class="nav-link" data-value="Wiki" href="https://wiki.hyprland.org/">Wiki</a></li>
<li><a class="nav-link" data-value="FAQ" href="https://wiki.hyprland.org/FAQ/">FAQ</a></li> <li><a class="nav-link"data-value="FAQ" href="https://wiki.hyprland.org/FAQ/">FAQ</a></li>
</ul> </ul>
</nav> </nav>
@ -46,7 +58,7 @@
<li class="win-text">#1: Flafy<br><br><img src="imgs/ricingcomp1/flafy.png"></li> <li class="win-text">#1: Flafy<br><br><img src="imgs/ricingcomp1/flafy.png"></li>
<li class="win-text">#2: (<i>ex aequo</i>) flick0<br><br><img src="imgs/ricingcomp1/flicko.png"></li> <li class="win-text">#2: (<i>ex aequo</i>) flick0<br><br><img src="imgs/ricingcomp1/flicko.png"></li>
<li class="win-text">#2: (<i>ex aequo</i>) amadeus<br><br><img src="imgs/ricingcomp1/amadeus.png"></li> <li class="win-text">#2: (<i>ex aequo</i>) amadeus<br><br><img src="imgs/ricingcomp1/amadeus.png"></li>
<li class="win-text">#3: (<i>ex aequo</i>) Lyasm<br><br><img src="imgs/ricingcomp1/lyasm.png"></li> <li class="win-text">#3: (<i>ex aequo</i>) Lyasm<br><br><img src="imgs/ricingcomp1/Lyasm.png"></li>
<li class="win-text">#3: (<i>ex aequo</i>) lauroro<br><br><img src="imgs/ricingcomp1/lauroro.jpg"></li> <li class="win-text">#3: (<i>ex aequo</i>) lauroro<br><br><img src="imgs/ricingcomp1/lauroro.jpg"></li>
</ul> </ul>
</div> </div>

1
views/temp_404.ejs
View file

@ -7,6 +7,7 @@
<link rel="shortcut icon" href="ico/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="ico/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="css/404.css" /> <link rel="stylesheet" href="css/404.css" />
<link rel="stylesheet" href="css/home.css" /> <link rel="stylesheet" href="css/home.css" />
<meta name="darkreader-lock">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
<title>Oopsy...</title> <title>Oopsy...</title>
</head> </head>