mirror of
https://github.com/hyprwm/hyprland-website.git
synced 2024-12-22 10:19:49 +01:00
fixed broken site on larger screens (#19)
This commit is contained in:
System-x64
GitHub
parent
381f8170bf
commit
49be3c8b4e
9 changed files with 328 additions and 85 deletions
|
|
@ -29,6 +29,10 @@
|
|||
background-color: #1a1a2e;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #1a1a2e;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
|
@ -37,7 +41,6 @@ header {
|
|||
padding-left: 8%;
|
||||
background-color: #1a1a2e;
|
||||
padding-top: 20px;
|
||||
|
||||
}
|
||||
|
||||
.logo {
|
||||
|
|
@ -88,16 +91,15 @@ header {
|
|||
|
||||
.cta:hover {
|
||||
transform: scale(1.2);
|
||||
background-color: #1a1a2e;
|
||||
background-color: #1a1a2e;
|
||||
color: aquamarine;
|
||||
}
|
||||
|
||||
#close-id {
|
||||
padding: 0px;
|
||||
margin-right: 32px;
|
||||
font-size: 43px;
|
||||
margin-top: 5px;
|
||||
|
||||
padding: 0px;
|
||||
margin-right: 32px;
|
||||
font-size: 43px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
#home {
|
||||
|
|
@ -122,7 +124,7 @@ margin-top: 5px;
|
|||
.top {
|
||||
background-color: #1a1a2e;
|
||||
display: flex;
|
||||
height: 643px;
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
.text h2 {
|
||||
|
|
@ -134,7 +136,7 @@ margin-top: 5px;
|
|||
font-family: "Sofia-Pro-Medium";
|
||||
font-size: 20px;
|
||||
color: #cfe8f6;
|
||||
padding-top: 15px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.text a {
|
||||
font-family: "Sofia-Pro-Medium";
|
||||
|
|
@ -148,34 +150,33 @@ margin-top: 5px;
|
|||
padding-top: 150px;
|
||||
padding-left: 10%;
|
||||
margin-right: auto;
|
||||
max-width: 700px;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
#install-hypr div {
|
||||
width: 300px;
|
||||
height: 60px;
|
||||
background-color: aquamarine;
|
||||
margin-top: 30px;
|
||||
margin-top: 40px;
|
||||
transition: all 0.5s ease;
|
||||
border-radius: 0.2rem;
|
||||
}
|
||||
|
||||
|
||||
#install-hypr div p {
|
||||
text-align: center;
|
||||
color: #1a1a2e;
|
||||
background-color: aquamarine;
|
||||
padding-top: 1.25rem;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
font-size: 22px;
|
||||
border-radius: 0.2rem;
|
||||
border:solid aquamarine;
|
||||
border: solid aquamarine;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
#install-hypr div p:hover {
|
||||
background-color: #1a1a2e;
|
||||
color: aquamarine
|
||||
color: aquamarine;
|
||||
}
|
||||
|
||||
#install-hypr {
|
||||
|
|
@ -190,10 +191,11 @@ margin-top: 5px;
|
|||
margin-top: 100px;
|
||||
margin-right: 6%;
|
||||
margin-left: 40px;
|
||||
width: 650px;
|
||||
width: 640px;
|
||||
height: max-content;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: 5%;
|
||||
}
|
||||
|
||||
#slide-content {
|
||||
|
|
@ -336,10 +338,11 @@ margin-top: 5px;
|
|||
}
|
||||
|
||||
#ani-text a div {
|
||||
color: #1a1a2e;
|
||||
color: #1a1a2e;
|
||||
font-family: "Sofia-Pro-Medium";
|
||||
font-size: 16px;
|
||||
padding: 20px;
|
||||
margin: 0px 20%;
|
||||
margin: 0px 17%;
|
||||
margin-top: 40px;
|
||||
border-radius: 0.2rem;
|
||||
border: solid aquamarine;
|
||||
|
|
@ -350,7 +353,7 @@ margin-top: 5px;
|
|||
|
||||
#ani-text a div:hover {
|
||||
transform: scale(1.2);
|
||||
background-color: #1a1a2e;
|
||||
background-color: #1a1a2e;
|
||||
color: aquamarine;
|
||||
}
|
||||
|
||||
|
|
@ -400,7 +403,7 @@ margin-top: 5px;
|
|||
|
||||
#til-text a div:hover {
|
||||
transform: scale(1.2);
|
||||
background-color: #1a1a2e;
|
||||
background-color: #1a1a2e;
|
||||
color: aquamarine;
|
||||
}
|
||||
|
||||
|
|
@ -441,7 +444,7 @@ margin-top: 5px;
|
|||
padding: 20px;
|
||||
margin: 0px 20%;
|
||||
margin-top: 40px;
|
||||
border: solid aquamarine;
|
||||
border: solid aquamarine;
|
||||
border-radius: 0.2rem;
|
||||
background-color: aquamarine;
|
||||
text-align: center;
|
||||
|
|
@ -450,9 +453,8 @@ margin-top: 5px;
|
|||
|
||||
#con-text a div:hover {
|
||||
transform: scale(1.2);
|
||||
background-color: #1a1a2e;
|
||||
background-color: #1a1a2e;
|
||||
color: aquamarine;
|
||||
|
||||
}
|
||||
|
||||
#con-text p a {
|
||||
|
|
@ -467,8 +469,6 @@ margin-top: 5px;
|
|||
color: #5865f2 !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
footer {
|
||||
font-family: "Sofia-Pro-Light";
|
||||
display: flex;
|
||||
|
|
@ -520,8 +520,7 @@ footer a:hover {
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 1100px) {
|
||||
@media only screen and (max-width: 1140px) {
|
||||
.nav__links,
|
||||
.cta {
|
||||
display: none;
|
||||
|
|
@ -643,7 +642,6 @@ footer a:hover {
|
|||
footer {
|
||||
/* display: block; */
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 648px) {
|
||||
|
|
@ -660,16 +658,16 @@ footer a:hover {
|
|||
height: auto;
|
||||
}
|
||||
#install-hypr div {
|
||||
width: 220px;
|
||||
height: 40px;
|
||||
}
|
||||
#install-hypr div p {
|
||||
font-size: 20px;
|
||||
}
|
||||
.text {
|
||||
padding-top: 20%;
|
||||
padding-bottom: 25%;
|
||||
}
|
||||
width: 220px;
|
||||
height: 40px;
|
||||
}
|
||||
#install-hypr div p {
|
||||
font-size: 20px;
|
||||
}
|
||||
.text {
|
||||
padding-top: 20%;
|
||||
padding-bottom: 25%;
|
||||
}
|
||||
#slide {
|
||||
width: 384px;
|
||||
height: auto;
|
||||
|
|
@ -711,8 +709,7 @@ footer a:hover {
|
|||
}
|
||||
.mob-menu {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.get-started a div {
|
||||
margin-left: 0px;
|
||||
|
|
@ -729,38 +726,267 @@ footer a:hover {
|
|||
margin-left: 20%;
|
||||
}
|
||||
|
||||
#home {
|
||||
border-bottom: #cee7f5 solid 3px;
|
||||
#home {
|
||||
border-bottom: #cee7f5 solid 3px;
|
||||
}
|
||||
#close-id {
|
||||
margin-right: 7px;
|
||||
}
|
||||
footer {
|
||||
display: block;
|
||||
}
|
||||
.footer-text {
|
||||
max-width: none;
|
||||
}
|
||||
.footer-icons {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
height: 60px;
|
||||
margin-left: auto;
|
||||
margin-top: 30px;
|
||||
margin-right: auto;
|
||||
}
|
||||
.bi.bi-github {
|
||||
margin-right: 30px;
|
||||
}
|
||||
.footer-icons a svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-right: 0;
|
||||
}
|
||||
#licence {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 10px;
|
||||
line-height: 1.5;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
#close-id {
|
||||
margin-right: 7px;
|
||||
@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;
|
||||
}
|
||||
}
|
||||
footer {
|
||||
display: block;
|
||||
@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;
|
||||
}
|
||||
}
|
||||
.footer-text {
|
||||
max-width: none;
|
||||
}
|
||||
.footer-icons {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
height: 60px;
|
||||
margin-left: auto;
|
||||
margin-top: 30px;
|
||||
margin-right: auto;
|
||||
}
|
||||
.bi.bi-github {
|
||||
margin-right: 30px;
|
||||
}
|
||||
.footer-icons a svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-right: 0;
|
||||
}
|
||||
#licence {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 10px;
|
||||
line-height: 1.5;
|
||||
font-size: 14px;
|
||||
|
||||
@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
BIN
public/imgs/wall_4K.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1,008 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 681 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 680 KiB |
|
|
@ -8,6 +8,7 @@
|
|||
<link rel="shortcut icon" href="ico/favicon.ico" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="css/home.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" />
|
||||
<title>Oops ...</title>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" href="ico/favicon.ico" type="image/ico" />
|
||||
<meta name="darkreader-lock" />
|
||||
<link
|
||||
rel="icon"
|
||||
href="ico/favicon-32x32.png"
|
||||
|
|
@ -33,6 +34,7 @@
|
|||
/>
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://www.hyprland.org/" />
|
||||
<meta property="og:image" content="imgs/wall_4k.png" />
|
||||
<meta
|
||||
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!"
|
||||
|
|
@ -41,6 +43,7 @@
|
|||
name="twitter:title"
|
||||
content="Hyprland - A wayland compositor that doesn't sacrifice on its looks!"
|
||||
/>
|
||||
<meta name="twitter:image" content="imgs/wall_4k" />
|
||||
<meta
|
||||
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!"
|
||||
|
|
|
|||
|
|
@ -6,8 +6,21 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<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-32x32.png" size="32x32" type="image/png" />
|
||||
<link rel="icon" href="ico/favicon-32x32.png" size="16x16" type="image/png" />
|
||||
<meta name="darkreader-lock">
|
||||
<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/rices.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
|
||||
|
|
@ -19,15 +32,14 @@
|
|||
<a class="logo" href="https://hyprland.org"><img src="imgs/hyprland.png" alt="logo"></a>
|
||||
<nav>
|
||||
<ul class="nav__links">
|
||||
<li>
|
||||
<a class="nav-link" data-value="Home" href="https://www.hyprland.org/">Hyprland</a>
|
||||
</li>
|
||||
<li><a class="nav-link" data-value="Get Started"
|
||||
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="FAQ" href="https://wiki.hyprland.org/FAQ/">FAQ</a></li>
|
||||
|
||||
</ul>
|
||||
<li>
|
||||
<a class="nav-link" data-value="Home" href="https://www.hyprland.org/">Hyprland</a>
|
||||
</li>
|
||||
<li><a class="nav-link" data-value="Get Started" 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="FAQ" href="https://wiki.hyprland.org/FAQ/">FAQ</a></li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
<a class="cta" href="https://github.com/hyprwm/Hyprland" target="_blank" rel="noopener">Github</a>
|
||||
<p class="mob-menu">≡</p>
|
||||
|
|
@ -46,7 +58,7 @@
|
|||
<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>) 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>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -99,9 +111,9 @@
|
|||
<a id="close-id" class="close">×</a>
|
||||
<div class="overlay__content">
|
||||
<a href="https://www.hyprland.org/">Hyprland</a>
|
||||
<a href="https://wiki.hyprland.org/Getting-Started/Master-Tutorial/">Get Started</a>
|
||||
<a href="https://wiki.hyprland.org">Wiki</a>
|
||||
<a href="https://wiki.hyprland.org/FAQ/">FAQ</a>
|
||||
<a href="https://wiki.hyprland.org/Getting-Started/Master-Tutorial/">Get Started</a>
|
||||
<a href="https://wiki.hyprland.org">Wiki</a>
|
||||
<a href="https://wiki.hyprland.org/FAQ/">FAQ</a>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="js/mobile.js"></script>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
<link rel="shortcut icon" href="ico/favicon.ico" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="css/404.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" />
|
||||
<title>Oopsy...</title>
|
||||
</head>
|
||||
|
|
|
|||
Loading…
Reference in a new issue