diff --git a/public/assets/css/blogpost.css b/public/assets/css/blogpost.css index 30c8a2d..b4bd9f6 100644 --- a/public/assets/css/blogpost.css +++ b/public/assets/css/blogpost.css @@ -15,8 +15,7 @@ header { .blog-card { padding: 60px; max-width: 1100px; - margin: auto; - margin-top: 50px; + margin: 50px auto; color: var(--text-secondary); } @@ -197,11 +196,6 @@ header { margin-bottom: 30px; } -footer { - padding-top: 40px; - margin-top: auto; -} - @media screen and (max-width: 800px) { .blog-card { padding: 40px; diff --git a/public/assets/css/main.css b/public/assets/css/main.css index 5212890..6cb1020 100644 --- a/public/assets/css/main.css +++ b/public/assets/css/main.css @@ -26,6 +26,10 @@ body, .main-body { font-family: Poppins, Arial, Helvetica, sans-serif; } +.main-body { + overflow-y: hidden; /* Fixes the dowuble scrollbars caused by the last background circle */ +} + .animateDot { animation: dotAnimation 10s infinite; } @@ -298,6 +302,13 @@ section.progress .right { border-top-left-radius: 10px; border-bottom-left-radius: 10px; } +section.progress .right .title a { + text-decoration: none; + color: var(--text); +} +section.progress .right .title a:hover { + text-decoration: underline; +} section.progress .right:before { content: ""; width: 300vw; @@ -349,6 +360,52 @@ section.faq { text-decoration: underline; } +section.showcase { + position: relative; + margin-top: 160px; + padding: 220px 0; +} +section.showcase::before { + content: ""; + width: 400vw; + margin-left: -50vw; + background: linear-gradient(180deg, rgba(19, 22, 36, 0) 0%, #131624 100%); + position: absolute; + top: 0; + bottom: 0; + z-index: -1; +} +section.showcase .text { + max-width: 504px; + margin-bottom: 132px; +} +section.showcase .grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 24px; +} +section.showcase .grid .item { + background: #252A51; + border-radius: 10px; + padding: 42px 36px; +} +section.showcase .grid .item.highlight { + border: 2px solid #9D6FF3; +} +section.showcase .grid .item svg { + height: 36px; + color: #9D6FF3; +} +section.showcase .grid .item h1 { + margin-top: 14px; + margin-bottom: 6px; + font-weight: 600; +} +section.showcase .grid .item p { + margin: 0; + color: var(--text-secondary) +} + section.team { margin-top: 220px; } @@ -425,6 +482,187 @@ section.team { color: var(--text-secondary); } +section.team-helpers { + position: relative; + margin-top: 160px; + margin-bottom: 160px; +} +section.team-helpers .text { + max-width: 504px; + margin-bottom: 132px; +} +section.team-helpers .team-helpers-cards { + display: inline-grid; + grid-template-columns: repeat(5, 1fr); + grid-gap: 20px; + margin-right: 20px; + color: var(--text-secondary); + width: max-content; +} +section.team-helpers .animation-wrapper { + transform: rotate(-5deg); + overflow-x: hidden; + position:relative; + top: -90px; + padding: 20px; /* Needed for the star not to get cut off */ +} +section.team-helpers .animation-wrapper::after { + content: ""; + position: absolute; + top: 0; + width: 101%; /* If set to 100% it doesn't cover it completely */ + left: -0.5%; + height: 100%; + background: linear-gradient(90deg, var(--background) 0%, rgba(27, 31, 59, 0) 20%, rgba(27, 31, 59, 0) 80%, var(--background) 100%); + z-index: 1; + pointer-events: none; +} +section.team-helpers .animation-wrapper .row { + white-space: nowrap; +} +section.team-helpers .animation-wrapper .row.second { + margin-top: 20px; +} +section.team-helpers .helper-card { + text-decoration: none; + display: flex; + flex-direction: row; + align-items: center; + padding: 14px 24px; + background: #16192D; + border-radius: 12px; + animation: scrollHelpersRTL 25s linear infinite; +} +section.team-helpers .row.second .helper-card { + animation: scrollHelpersLTR 25s linear infinite; +} +section.team-helpers .helper-card:hover { + background: #252A51; + transition: 200ms; +} +@keyframes scrollHelpersRTL { + 0% { + transform: translatex(0%); + } + 100% { + transform: translateX(calc( ( ( 100% + 20px ) * -5 ) + -7px)); + } +} +@keyframes scrollHelpersLTR { + 0% { + transform: translateX(calc( ( ( 100% + 20px ) * -5 ) + -7px)); + } + 100% { + transform: translatex(0%); + } +} +section.team-helpers .helper-card.special { + position: relative; + box-shadow: 0px 0px 0px 2px rgba(211, 225, 87, 0.6) inset; +} +section.team-helpers .helper-card.special::after { + content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31.571' height='30.218' viewBox='0 0 31.571 30.218'%3E%3Cpath id='Icon_awesome-star' data-name='Icon awesome-star' d='M15.533,1.05,11.68,8.863,3.058,10.12a1.889,1.889,0,0,0-1.044,3.222L8.251,19.42,6.776,28.006A1.887,1.887,0,0,0,9.514,30l7.713-4.054L24.94,30a1.889,1.889,0,0,0,2.738-1.989L26.2,19.42l6.237-6.078A1.889,1.889,0,0,0,31.4,10.12L22.774,8.863,18.92,1.05a1.89,1.89,0,0,0-3.387,0Z' transform='translate(-1.441 0.001)' fill='%23d3e848'/%3E%3C/svg%3E%0A"); + position: absolute; + width: 30px; + height: 30px; + top: -13px; + right: -13px; +} +section.team-helpers .row.second .helper-card { + position:relative; + left: calc(-250% - 50px); +} +section.team-helpers .helper-card .img-wrapper { + background: #fff; + border-radius: 100%; + margin-right: 14px; + width: 48px; + height: 48px; +} +section.team-helpers .helper-card .pfp { + border-radius: 100%; + width: 48px; + height: 48px; +} +section.team-helpers .helper-card span { + color: var(--text); + font-weight: 600; + margin-right: 0.6ch; +} +section.team-helpers .helper-card p { + color: var(--text-secondary); +} +/* These two fix the spacing being inconsistent on some card, thus "jumping" on repeat. I'm fairly certain it isn't my fault */ +section.team-helpers .row.first .team-helpers-cards.repeat.first a:nth-child(3){ + position: relative; + left: 5px; +} +section.team-helpers .row.second .team-helpers-cards.repeat.first a.special, +section.team-helpers .row.second .team-helpers-cards.repeat.second a:nth-child(1){ + left: calc(-250% - 45px); +} + +section.update-signup { + position: relative; + width: 100%; + display: flex; + flex-flow: column; + justify-items: center; + align-items: center; + text-align: center; + padding-top: 240px; + padding-bottom: 300px; +} +section.update-signup svg { + width: 4rem; + height: 4rem; + margin-bottom: 42px; +} +section.update-signup .text { + margin-top: 8px; + max-width: 423px; +} +section.update-signup .floating-serverjoin { + display: grid; + grid-template-columns: repeat(2, auto); + width: 100%; + max-width: 576px; + + background: #15182D; + border-radius: 6px; + padding: 18px; + + overflow-x: hidden; +} +section.update-signup .floating-serverjoin p { + color: var(--text-secondary); + margin: auto; + margin-left: 0; +} +section.update-signup .floating-serverjoin a { + color: var(--text); + text-decoration: none; + background: var(--theme); + margin: 0; + margin-left: auto; + padding: 9px 18px; + border-radius: 5px; + width: fit-content; +} +section.update-signup div.circle { + display: block; + background: #202442; + /* the next 4 lines make it so the circle is always the same aspect ratio and covers enough of the screen */ + width: 2591px; + height: 1454px; + min-width: 135vw; + min-height: 76vw; /* yes, this is supposed to be in vw */ + border-radius: 100%; + position: absolute; + top: 0; + z-index: -1; +} + /* Progress */ .all-progress-lists { margin-top: 50px; @@ -436,6 +674,7 @@ section.team { display: grid; grid-template-columns: auto 1fr; grid-gap: 20px; + margin-top: 22px; } .feature-progress-chart { max-width: 100px; @@ -548,10 +787,85 @@ section.team { /* Footer */ footer { - text-align: center; + width: 100%; + display: grid; + grid-template-columns: repeat(3, fit-content(100%)) 1fr; + gap: 148px; color: var(--text-secondary); - margin-top: 290px; - margin-bottom: 40px; + margin-top: 120px; + position: relative; + padding: 60px 0; +} +footer::after { + content: ""; + width: 400vw; + height: 100%; + position: absolute; + top: 0; + left: -50vw; + background: #15182D; + z-index: -1; +} +footer div { + display: flex; + flex-flow: column; + width: fit-content; +} +footer svg.logotype { + height: 56px; + width: fit-content; + margin: -10px 0 24px -10px; +} +footer p { + margin: 0; +} +footer h1 { + font-size: 20px; + margin-top: 0; + color: var(--text); +} +footer a { + color: var(--text-secondary); + text-decoration: none; + width: fit-content; +} +footer a:hover { + color: var(--text); + text-decoration: underline; +} +footer div.discord-server-card { + background: #222641; + border-radius: 12px; + padding: 30px 90px 30px 36px; + justify-self: end; +} +footer div.discord-server-card h1 { + font-size: 25px; + margin: 0; +} +footer div.discord-server-card h2 { + color: var(--text); + font-size: 22px; + margin: 0; +} +footer div.discord-server-card a { + display: flex; + align-items: center; + color: #CAB1FB; + font-size: 22px; + text-decoration: none; + width: fit-content; + margin-left: -2px; + margin-top: 12px; +} +footer div.discord-server-card a:hover { + text-decoration: underline; + +} +footer div.discord-server-card svg { + height: 24px; + stroke-width: 3px; + margin-right: 4px; } @media screen and (min-width: 701px) and (max-width: 1500px) { diff --git a/views/home.handlebars b/views/home.handlebars index b1dc370..175589a 100644 --- a/views/home.handlebars +++ b/views/home.handlebars @@ -82,7 +82,9 @@
-

{{ localeHelper locale "progress" "title" }}

+

+ {{ localeHelper locale "progress" "title" }} +

{{> progress-list data=featuredFeatureList purple=true boards=boards }}
@@ -105,6 +107,30 @@ {{!-- Tmp! --}} + +
+
+

What we make

+

An open source project that aims to recreate all Nintendo servers for 3DS and Wiiu. This way the services can persist after officially killed by Nintendo.

+
+
+
+ +

Juxtaposition

+

A Miiverse replacement

+
+
+ +

Juxtaposition

+

A Miiverse replacement

+
+
+ +

Juxtaposition

+

A Miiverse replacement

+
+
+
@@ -132,32 +158,86 @@
-
-
+
+

{{ localeHelper locale "specialThanks" "title" }}

{{ localeHelper locale "specialThanks" "text" }}

-
- {{#each locale.specialThanks.people}} -
-
- -
-
- {{#if special}}{{ special }}{{/if}} -

+
+
+
+ {{#each locale.specialThanks.people}} + +
+ +
{{ name }} - - - -

-

{{ caption }}

+

{{ caption }}

+ + {{/each}} +
+
+ {{#each locale.specialThanks.people}} + +
+ +
+ {{ name }} +

{{ caption }}

+ + {{/each}} +
+
+
+
+ {{#each locale.specialThanks.people}} + +
+ +
+ {{ name }} +

{{ caption }}

+ + {{/each}} +
+
+ {{#each locale.specialThanks.people}} + +
+ +
+ {{ name }} +

{{ caption }}

+ + {{/each}} +
+
+ {{#each locale.specialThanks.people}} + +
+ +
+ {{ name }} +

{{ caption }}

+ + {{/each}}
- {{/each}}
+ {{> footer }} diff --git a/views/partials/footer.handlebars b/views/partials/footer.handlebars index a674ead..9afd672 100644 --- a/views/partials/footer.handlebars +++ b/views/partials/footer.handlebars @@ -1 +1,55 @@ -
Copyright 2021 - Design by mrjvs, development by Jip Fr & monty
\ No newline at end of file + \ No newline at end of file