diff --git a/public/css/404.css b/public/css/404.css index 7f88727..8d6b2eb 100644 --- a/public/css/404.css +++ b/public/css/404.css @@ -2,10 +2,10 @@ margin: auto; text-align: center; color: #cfe8f6; - font-family: "Sofia-Pro-Medium"; + font-family: "LondonBetween"; } -.con404 > img { +.con404>img { margin-top: 60px; margin-bottom: 60px; margin-left: auto; @@ -14,19 +14,19 @@ max-width: 60vw; } -.con404 > h1 { +.con404>h1 { margin-bottom: 20px; font-size: 48px; } -.con404 > p { +.con404>p { font-size: 20px; margin-left: 30px; margin-right: 30px; margin-bottom: 30px; } -.con404 > a > button{ +.con404>a>button { padding: 20px; background-color: aquamarine; border: solid aquamarine; @@ -34,12 +34,12 @@ margin-bottom: 60px; transition: all 0.5s ease; font-size: 20px; - font-family: "Sofia-Pro-Medium"; + font-family: "LondonBetween"; } -.con404 > a > button:hover { +.con404>a>button:hover { background-color: #1a1a2e; color: aquamarine; transform: scale(1.2); cursor: pointer; -} +} \ No newline at end of file diff --git a/public/css/home.css b/public/css/home.css index e94364c..07a9900 100644 --- a/public/css/home.css +++ b/public/css/home.css @@ -3,20 +3,6 @@ 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"); @@ -62,7 +48,7 @@ header { .nav__links a, .cta, .overlay__content a { - font-family: "Sofia-Pro-Medium"; + font-family: "LondonBetween"; font-size: 20px; font-weight: 500; color: #cfe8f6; @@ -116,20 +102,23 @@ header { } .text h2 { - font-family: "JosefinSans-Regular"; + font-family: "LondonBetween"; color: #cfe8f6; font-size: 4rem; } + .text p { - font-family: "Sofia-Pro-Medium"; + font-family: "LondonBetween"; font-size: 20px; color: #cfe8f6; padding-top: 10px; } + .text a { - font-family: "Sofia-Pro-Medium"; + font-family: "LondonBetween"; color: #cfe8f6; } + .text a:hover { color: aquamarine; } @@ -190,6 +179,7 @@ header { width: 640px; height: auto; } + .swiper { width: 100%; height: fit-content; @@ -213,6 +203,7 @@ header { .swiper .swiper-pagination { background-color: transparent; } + /* Mobile Nav */ .menu { @@ -254,6 +245,7 @@ header { .overlay a:focus { color: aquamarine; } + .overlay .close { position: absolute; top: 20px; @@ -286,7 +278,7 @@ header { .features h1 { font-size: 69px; - font-family: "JosefinSans-Regular"; + font-family: "LondonBetween"; color: #cfe8f6; } @@ -294,6 +286,7 @@ header { padding-top: 30px; padding-bottom: 120px; } + .animation { display: flex; width: 100%; @@ -315,7 +308,7 @@ header { } #ani-text p { - font-family: "Sofia-Pro-Light"; + font-family: "LondonBetween"; font-size: 20px; color: #cfe8f6; text-align: center; @@ -327,7 +320,7 @@ header { #ani-text a div { color: #1a1a2e; - font-family: "Sofia-Pro-Medium"; + font-family: "LondonBetween"; font-size: 16px; padding: 20px; margin: 0px 17%; @@ -366,7 +359,7 @@ header { } #til-text p { - font-family: "Sofia-Pro-Light"; + font-family: "LondonBetween"; font-size: 20px; color: #cfe8f6; text-align: center; @@ -378,7 +371,7 @@ header { #til-text a div { color: #1a1a2e; - font-family: "Sofia-Pro-Medium"; + font-family: "LondonBetween"; padding: 20px; margin: 0px 20%; margin-top: 40px; @@ -416,7 +409,7 @@ header { } #con-text p { - font-family: "Sofia-Pro-Light"; + font-family: "LondonBetween"; font-size: 20px; color: #cfe8f6; text-align: center; @@ -428,7 +421,7 @@ header { #con-text a div { color: #1a1a2e; - font-family: "Sofia-Pro-Medium"; + font-family: "LondonBetween"; padding: 20px; margin: 0px 20%; margin-top: 40px; @@ -450,34 +443,40 @@ header { text-decoration: underline; transition: all 0.3s ease; } + #con-text p a:hover { color: aquamarine; } + #link-config-discord:hover { color: #5865f2 !important; } footer { - font-family: "Sofia-Pro-Light"; + font-family: "LondonBetween"; 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; } -.features *, .top * { +.features *, +.top * { line-height: 1.2em; } @@ -486,6 +485,7 @@ footer a:hover { margin-top: 12px; line-height: 1.5; } + .footer-icons { display: flex; width: 116px; @@ -493,6 +493,7 @@ footer a:hover { margin-left: auto; margin-top: 30px; } + .footer-icons a svg { width: 40px; height: 40px; @@ -508,33 +509,40 @@ footer a:hover { .footer-icons a svg:hover path { color: #cfe8f6; } + #licence { margin-top: 20px; margin-bottom: 10px; } + #mob-github { display: none; } @media only screen and (max-width: 1170px) { + .nav__links, .cta { display: none; } + .menu { display: initial; } + .mob-menu { display: flex; margin-bottom: 8px; } + #mob-github { - display: block; -} + display: block; + } .top { display: inline; } + .text { text-align: center; padding-top: 130px; @@ -544,22 +552,26 @@ footer a:hover { padding-bottom: 150px; max-width: 100%; } + .text h2 { font-size: 46px; text-align: center; width: 100%; padding: 0 5%; } + .text p { font-size: 18px; text-align: center; padding: 0px 10%; padding-top: 15px; } + #install-hypr div { margin-left: auto; margin-right: auto; } + #slide { width: 640px; height: auto; @@ -568,6 +580,7 @@ footer a:hover { margin-left: 10%; margin-right: 10%; } + #slide-content { width: auto; } @@ -576,6 +589,7 @@ footer a:hover { width: 640px; margin-left: 0px; } + .features { margin: 0px; width: 100%; @@ -583,62 +597,80 @@ footer a:hover { text-align: center; padding-bottom: 100px; } + #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: 395px; 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; } + footer { /* display: block; */ } @@ -648,9 +680,11 @@ footer a:hover { header { padding-left: 5px; } + #mob-github { display: block; } + .logo img { width: 160px; height: auto; @@ -660,17 +694,21 @@ footer a:hover { width: 384px; height: auto; } + #install-hypr div { width: 220px; height: 40px; } + #install-hypr div p { font-size: 20px; } + .text { padding-top: 20%; padding-bottom: 25%; } + #slide { width: 384px; height: auto; @@ -679,24 +717,30 @@ footer a:hover { 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; @@ -705,26 +749,32 @@ footer a:hover { .overlay a { font-size: 20px; } + .overlay .close { font-size: 40px; top: 15px; right: 35px; } + .mob-menu { display: flex; margin-bottom: 8px; } + .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%; } @@ -732,12 +782,15 @@ footer a:hover { #close-id { margin-right: 7px; } + footer { display: block; } + .footer-text { max-width: none; } + .footer-icons { display: flex; width: fit-content; @@ -746,14 +799,17 @@ footer a:hover { 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; @@ -761,22 +817,26 @@ footer a:hover { 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; } @@ -789,47 +849,59 @@ footer a:hover { 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; } @@ -837,66 +909,82 @@ footer a:hover { .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; } @@ -907,12 +995,15 @@ footer a:hover { 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; } @@ -921,72 +1012,92 @@ footer a:hover { 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; } -} +} \ No newline at end of file diff --git a/public/css/rices.css b/public/css/rices.css index a4ddf6c..9904ad3 100644 --- a/public/css/rices.css +++ b/public/css/rices.css @@ -4,23 +4,23 @@ color: #cfe8f6; } -.wofdiv > h1 { - font-family: "Sofia-Pro-Medium"; +.wofdiv>h1 { + font-family: "LondonBetween"; font-size: 48px; margin-top: 60px; margin-bottom: 30px; } -.wofdiv > p { - +.wofdiv>p { + font-size: 20px; - font-family: "Sofia-Pro-Medium"; + font-family: "LondonBetween"; margin: 0 10%; margin-bottom: 60px; } .bigtext { - font-family: "JosefinSans-Regular"; + font-family: "LondonBetween"; color: #cfe8f6; font-size: 5rem; } @@ -31,12 +31,12 @@ margin-bottom: 60px; } -div.ricewins > ul { +div.ricewins>ul { list-style-type: none; -} +} .month { - font-family: "Sofia-Pro-Medium"; + font-family: "LondonBetween"; color: #cfe8f6; margin: 30px; } @@ -44,18 +44,18 @@ div.ricewins > ul { .win-text { font-size: 24px; color: #cfe8f6; - font-family: "Sofia-Pro-Medium"; + font-family: "LondonBetween"; margin: 20px; } -li.win-text > img { +li.win-text>img { max-width: 60vw; } -@media only -screen and (max-width: 1000px) { - li.win-text > img { +@media only screen and (max-width: 1000px) { + li.win-text>img { max-width: 80vw; - min-width: 80vw;; + min-width: 80vw; + ; } } \ No newline at end of file diff --git a/public/fonts/JosefinSans-Regular.woff b/public/fonts/JosefinSans-Regular.woff deleted file mode 100644 index 877b9fa..0000000 Binary files a/public/fonts/JosefinSans-Regular.woff and /dev/null differ diff --git a/public/fonts/SofiaProLight.woff b/public/fonts/SofiaProLight.woff deleted file mode 100644 index 43ba06b..0000000 Binary files a/public/fonts/SofiaProLight.woff and /dev/null differ diff --git a/public/fonts/SofiaProMedium.woff b/public/fonts/SofiaProMedium.woff deleted file mode 100644 index 0943625..0000000 Binary files a/public/fonts/SofiaProMedium.woff and /dev/null differ