From ebc904d60dd8783db4e93ce40f1bedf510eadd97 Mon Sep 17 00:00:00 2001 From: tenkuma Date: Mon, 27 Oct 2025 16:43:02 -0300 Subject: [PATCH] Finished the redesign, split styles.css into multiple files and added support for importing page-specific styles, added new logo, added "updates" box to index.njk. --- _includes/author.njk | 41 ++-- _includes/base.njk | 1 + _includes/featured.njk | 7 +- _includes/header.njk | 21 +- _includes/project.njk | 3 +- _includes/skeleton.njk | 5 +- allprojects.njk | 1 + assets/logo.png | Bin 0 -> 828 bytes assets/styles.css | 339 --------------------------------- assets/stylesheets/home.css | 28 +++ assets/stylesheets/project.css | 87 +++++++++ assets/stylesheets/search.css | 18 ++ assets/stylesheets/styles.css | 265 ++++++++++++++++++++++++++ authors/tenkuma/index.md | 2 +- index.njk | 20 +- search.html => search.njk | 2 +- 16 files changed, 456 insertions(+), 384 deletions(-) create mode 100644 assets/logo.png delete mode 100644 assets/styles.css create mode 100644 assets/stylesheets/home.css create mode 100644 assets/stylesheets/project.css create mode 100644 assets/stylesheets/search.css create mode 100644 assets/stylesheets/styles.css rename search.html => search.njk (94%) diff --git a/_includes/author.njk b/_includes/author.njk index 58a5c5d..ff23671 100644 --- a/_includes/author.njk +++ b/_includes/author.njk @@ -1,28 +1,19 @@ - - - - - - - neoBeta - - - -
- {% include "header.njk" %} -
- -
-
-

{{ name }}

-
-

{{ subtitle }}

+--- +layout: "skeleton.njk" +styles: ["project"] +--- +
+
+ +
+
+

{{ name }}

+

{{ subtitle }}

- {% include "project_image.njk" %} -
- {{ content | safe }} -
- - \ No newline at end of file + {% include "project_image.njk" %} +
+ {{ content | safe }} +
+
\ No newline at end of file diff --git a/_includes/base.njk b/_includes/base.njk index b5c1d6c..96e19ba 100644 --- a/_includes/base.njk +++ b/_includes/base.njk @@ -1,6 +1,7 @@ --- layout: "skeleton.njk" --- +
{{ content | safe }}
\ No newline at end of file diff --git a/_includes/featured.njk b/_includes/featured.njk index 43f09ef..39fc587 100644 --- a/_includes/featured.njk +++ b/_includes/featured.njk @@ -9,8 +9,11 @@ -

{{ projectData.data.name }}

-

by {{ projectData.data.author }}

+
+

{{ projectData.data.name }}

+

by {{ projectData.data.author }}

+
{{ projectData.data.subtitle }}
+
{% endif %} {% endfor %} diff --git a/_includes/header.njk b/_includes/header.njk index 864a49c..2233c47 100644 --- a/_includes/header.njk +++ b/_includes/header.njk @@ -1,12 +1,17 @@
\ No newline at end of file diff --git a/_includes/project.njk b/_includes/project.njk index 48163b0..587a3d5 100644 --- a/_includes/project.njk +++ b/_includes/project.njk @@ -1,7 +1,8 @@ --- layout: "skeleton.njk" +styles: ["project"] --- -
+
{% if logo %} diff --git a/_includes/skeleton.njk b/_includes/skeleton.njk index 1775cdd..99efdf8 100644 --- a/_includes/skeleton.njk +++ b/_includes/skeleton.njk @@ -2,7 +2,10 @@ - + + {% for stylesheet in styles %} + + {% endfor %} {% if name %}{{ name }} - {% endif %}neoBeta diff --git a/allprojects.njk b/allprojects.njk index e8982e6..21dad4a 100644 --- a/allprojects.njk +++ b/allprojects.njk @@ -4,6 +4,7 @@ pagination: data: collections.projects size: 10 alias: paginatedProjects +styles: ["search"] ---
    {% for project in paginatedProjects %} diff --git a/assets/logo.png b/assets/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..337a46b5b46b61305600ff144dd6bdcc4d247621 GIT binary patch literal 828 zcmeAS@N?(olHy`uVBq!ia0y~yU=RRd4mJh`2Kmqb6B!s76p}rHd>I(3)EF2VS{N99 zF)%PRykKA`HDF+PmB7GYHG_dcykO3*KpO@I2DT(`cNd2LAh=-f^2rPgj2k>%978Nl zPn~qziz!f|wU%xDu1!pbIgC119`TgX?dREgns3RZY0f1M8)hphH7O}~O=!~NQtIf~ z^OCh{;k*UA!`9e;<4_Bf7BjA%k$*Pozg+)w{?$=;TOM1Sc>ejrpK`%%Z#BbB9(_Ik z;Z&C3(xSixE^56VDr|>2y6ae%7nyC!68gEx$?2%zW?h%HGbCm_4h(b`KD4tnv+?RD zm3em818&Ycnxx8`t)wS#`9jC9!~-WAyoj!pZ|0CJC(f+SQM#GB*C69(|*AiM8;%cID(3@4j;Dh`w0T z-|}e6&EnkMO_xva;^}=<_dY}3w$YA}_1Pj}-y5E@KkU)`SGhPbxK2y$v9;a`arqZ^ zR~|g*uuj#r}X#dQut1thK4|tyT?8dqkIt&a9A|`8l}?L76$Jm8KsPc^McOR6+77i6yC4$wjG&C8-QX21X{j2FALEmLUeF zR))q_#)jGk237_J+iv7KqG-s?PsvQH#I50Y>(##u3=A4@8%i>BQ;SOya|>|mnK0pt z5(5K+AV`mor?abHuq%VJv#wL5u8E$(ZhZ?C1_lN*kYuobXppljLqa(=FUF2t8bAW!O-=9Lzwrs$TWR+N+$r55u)HJ`=6z`)??>gTe~DWM4fXT(8r literal 0 HcmV?d00001 diff --git a/assets/styles.css b/assets/styles.css deleted file mode 100644 index 6c15c43..0000000 --- a/assets/styles.css +++ /dev/null @@ -1,339 +0,0 @@ -:root { - --accent-color: greenyellow; - --accent-secondary: green; -} - -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -@font-face { - font-family: Minecraft; - src: url("MinecraftRegular-Bmg3.otf") format("opentype"); -} - -body { - font-family: Minecraft, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - background-color: black; - color:white; - font-size : clamp(1.2rem, .2vw, 2rem); -} - -header { - display: flex; -} - -aside { - width: fit-content; - min-width: 20vw; -} - -a { - text-decoration: none; - color: var(--accent-color); -} - -main { - outline: 2px solid gray; - margin-top: 20px; - padding: 20px; - background-color: black; -} - -button { - transition: .2s; - background-color: black; - color: white; - padding: 10px; - outline: 1px white; -} - -button:hover { - color: gray; - border: 1px solid gray; -} - -code { - background-color: darkslategray; - color: var(--accent-color); - padding-left: .2em; - padding-right: .2em; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - border-radius: 2px; - display: inline-block; -} - -input, select { - padding: .4em; - background-color: black; - color: white; -} - -p, ul { - padding-bottom: .6em; -} - -img { - image-rendering: pixelated; -} - -#linksBox { - padding: 10px; - display: flex; - flex-direction: column; - width: 100%; - background-color: black; - outline: 2px solid gray; - height: fit-content; -} - -#headerLinks a { - margin-top: auto; - margin-bottom: auto; - padding: 0; - padding-left: 0; -} - -#everythingHelper { - max-width: 80%; - margin: auto; - transform: .2s; - display: flex; - gap: 3em; -} - -#headerLinks { - padding: 0; - margin-left: 10px; -} - -#title { - margin-top: auto; - margin-bottom: auto; - text-align: center; -} - -.searchItemImage { - height: 1em; -} - -#featured { - display: flex; - flex-direction: column; -} - -#featuredHelper { - display: flex; - flex-direction: row; -} - - -.featuredProject { - transition: .2s; - width: 15%; - font-size: smaller; - padding: 4px; - overflow: hidden; -} - -.featuredProjectName { - margin-top: auto; -} - -.featuredProject img { - width: 100%; - border: medium solid var(--accent-color); -} - -.featuredProject p { - margin-right: auto; - margin-left: auto; - text-overflow:clip; -} - -#featured h2 { - font-size: medium; - font-weight: 100; - margin-bottom: 10px; -} - -#featuredHelper { - gap: 10px; - flex-wrap: wrap; -} - -#projectTitleSubtitle { - margin-top: auto; - margin-bottom: auto; -} - -#projectHeader { - padding-top: 20px; - gap: 20px; - display: flex; - margin-bottom: 1em; -} - -#downloadButton { - border: none; - background: linear-gradient(var(--accent-color), var(--accent-secondary)); - border-radius: 2px; - color: white; -} - -#downloadLink { - color: gray; - height: fit-content; - margin-top: auto; - margin-bottom: auto; - margin-left: auto; - text-align: right; - /* text-shadow: 2px 2px black; */ -} - -#downloadButton:hover { - cursor: pointer; -} - -#projectHeader img { - outline: 2px solid gray; - height: 5em; - image-rendering: pixelated; -} - -li { - margin-left: 20px; - list-style-type: "> "; - margin-bottom: .4em; -} - -h1, h2, h3 { - margin-bottom: .4em; -} - -#projectTitleAuthor { - display: flex; -} - -#projectAuthor { - margin-left: 10px; - margin-top: auto; - margin-bottom: 6px; -} - -#projectImageCarrousel { - outline: 2px solid gray; - padding: 1rem; - height: 12em; - display: flex; - flex-direction: column; -} - -#projectCarrouselImageHolder { - height: 100%; - gap: 1em; - overflow: auto; - scroll-margin-left: 10px; - overflow-x: scroll; - white-space: nowrap; -} - -.projectImage { - transition: .4s; - height: 95%; - max-width: 10em; - object-fit: cover; - /* filter: grayscale(); */ -} - -.projectImage:hover { - filter: none; - opacity: .8; - max-width: 100%; - /* object-fit: unset; */ -} - -#credits { - margin-left: auto; -} - -.searchItemTagHolder { - display: flex; - padding-top: .2em; - gap: .4em; -} - -.searchItemTagHolder div { - border: thin solid greenyellow; - padding: .1em .2em .1em .2em; -} - -.searchItemDescription { - margin-bottom: 0px; -} - -.errorQuote { - color: gray; -} - -@media only screen and (max-width: 1280px) { - - #everythingHelper { - max-width: 80%; - } - - #linksBox { - flex-direction: column; - } - - #linksBox * { - margin-left: auto; - margin-right: auto; - } - - #projectHeader { - flex-direction: column; - text-align: center; - } - - #projectHeader * { - margin-left: auto; - margin-right: auto; - } - - #projectHeader img { - width: 10vh; - height: 10vh; - } - - #projectTitleAuthor { - flex-direction: column; - } - - /* #featuredHelper { - flex-direction: column; - } */ - - #featuredHelper * { - margin-right: auto; - margin-left: auto; - } - - header { - text-align: center; - } -} - -@media only screen and (max-width: 300px) { - - #everythingHelper { - max-width: 90%; - } - - #projectAuthor { - margin: 0; - } - -} \ No newline at end of file diff --git a/assets/stylesheets/home.css b/assets/stylesheets/home.css new file mode 100644 index 0000000..11f9251 --- /dev/null +++ b/assets/stylesheets/home.css @@ -0,0 +1,28 @@ +#homeUpdates { + background-color: var(--accent-secondary); + border: thick solid var(--accent-color); + width: 50%; + margin: 0px 2em 2em 2em; + padding: 1em; + height: fit-content; + border-radius: 4px; +} + +#featureAndUpdates { + display: flex; + flex-direction: row; + margin-top: 1em; +} + +@media only screen and (max-width: 1280px) { + #featureAndUpdates { + flex-direction: column; + gap: 1em; + flex-flow: column-reverse; + } + + #homeUpdates { + width: 100%; + margin: 0; + } +} \ No newline at end of file diff --git a/assets/stylesheets/project.css b/assets/stylesheets/project.css new file mode 100644 index 0000000..0a55471 --- /dev/null +++ b/assets/stylesheets/project.css @@ -0,0 +1,87 @@ +#projectTitle { + font-size: xx-large; +} + +#projectTitleSubtitle { + margin-top: auto; + margin-bottom: auto; +} + +#projectTitleSubtitle h1 { + margin-bottom: 0; +} + +#projectHeader { + padding-top: 20px; + gap: 20px; + display: flex; +} + +#project { + display: flex; + flex-direction: column; + gap: var(--box-gap); + width: 100%; +} + +#downloadLink { + color: gray; + height: fit-content; + margin-top: auto; + margin-bottom: auto; + margin-left: auto; + text-align: right; + /* text-shadow: 2px 2px black; */ +} + +#downloadButton:hover { + cursor: pointer; +} + +#projectHeader img { + outline: 2px solid gray; + height: 5em; + image-rendering: pixelated; +} + +#projectTitleAuthor { + display: flex; +} + +#projectAuthor { + margin-left: .6em; + margin-top: auto; + /* margin-bottom: .4em; */ +} + +#projectImageCarrousel { + outline: 2px solid gray; + padding: 1rem; + height: 12em; + display: flex; + flex-direction: column; +} + +#projectCarrouselImageHolder { + height: 100%; + gap: 1em; + overflow: auto; + scroll-margin-left: 10px; + overflow-x: scroll; + white-space: nowrap; +} + +.projectImage { + transition: .4s; + height: 95%; + max-width: 10em; + object-fit: cover; + /* filter: grayscale(); */ +} + +.projectImage:hover { + filter: none; + opacity: .8; + max-width: 100%; + /* object-fit: unset; */ +} \ No newline at end of file diff --git a/assets/stylesheets/search.css b/assets/stylesheets/search.css new file mode 100644 index 0000000..dcd4558 --- /dev/null +++ b/assets/stylesheets/search.css @@ -0,0 +1,18 @@ +.searchItemImage { + height: 1em; +} + +.searchItemTagHolder { + display: flex; + padding-top: .2em; + gap: .4em; +} + +.searchItemTagHolder div { + border: thin solid greenyellow; + padding: .1em .2em .1em .2em; +} + +.searchItemDescription { + margin-bottom: 0px; +} diff --git a/assets/stylesheets/styles.css b/assets/stylesheets/styles.css new file mode 100644 index 0000000..838dab6 --- /dev/null +++ b/assets/stylesheets/styles.css @@ -0,0 +1,265 @@ +:root { + --text-color: white; + --accent-color: greenyellow; + --accent-secondary: green; + --box-gap: 2rem; + --accent-background: rgb(0, 30, 0); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +@font-face { + font-family: Minecraft; + src: url("/assets/MinecraftRegular-Bmg3.otf") format("opentype"); +} + +body { + font-family: Minecraft, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background-color: black; + color:white; + font-size : clamp(1.2rem, .2vw, 2rem); +} + +header { + display: flex; + text-align: center; +} + +aside { + width: min-content; +} + +a { + text-decoration: none; + color: var(--accent-color); +} + +main { + outline: 2px solid gray; + padding: 1em; + background-color: black; + height: fit-content; + border-radius: 0 0 4px 4px; +} + +/* main:last-child { + margin-bottom: 0px; + padding-bottom: 0px; +} */ + +button { + padding: 10px; + border: medium solid var(--accent-color); + background: linear-gradient(var(--accent-color), var(--accent-secondary)); + border-radius: 2px; + color: white; +} + +code { + background-color: darkslategray; + color: var(--accent-color); + padding-left: .2em; + padding-right: .2em; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + border-radius: 2px; + display: inline-block; +} + +input, select { + padding: .4em; + background-color: black; + color: white; + border: medium solid var(--accent-color); +} + +p, ul { + padding-bottom: .6em; +} + +img { + image-rendering: pixelated; +} + +#linksBox { + padding: 2em; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + width: 100%; + background-color: black; + outline: 2px solid var(--accent-color); + border-radius: 0 0 4px 4px; + height: fit-content; + gap: 1em; + background-color: rgb(0, 30, 0); +} + +#headerLinks a { + margin-top: auto; + margin-bottom: auto; + padding: 0; + padding-left: 0; +} + +#everythingHelper { + max-width: 80%; + margin: auto; + transform: .2s; + display: flex; + gap: var(--box-gap); +} + +#headerLinks { + padding: 0; + text-align: left; + width: 100%; +} + +#headerLinksAndTitle { + display: flex; + flex-direction: column; + gap: 1em; +} + +#logoTitle { + display: flex; + flex-direction: column; + gap: .5em; +} + +#title { + margin: auto; + text-align: center; +} + +#logo { + height: 8em; +} + +#featured { + display: flex; + flex-direction: column; +} + +#featuredHelper { + display: flex; + flex-direction: column; +} + + +.featuredProject { + gap: 1em; + display: flex; + transition: .2s; + font-size: smaller; + padding: 4px; + overflow: hidden; +} + +.featuredProjectName { + margin-top: auto; + padding: 0; +} + +.featuredProjectSubtitle { +overflow: hidden; + width: 100%; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical +} + +.featuredProjectSubtitle { + padding-bottom: 0px; +} + +.featuredProject img { + height: 5em; + border: medium solid var(--accent-color); +} + +.featuredProject p { + margin-right: auto; + margin-left: auto; + text-overflow:clip; +} + +#featured h2 { + font-size: medium; + font-weight: 100; + margin-bottom: 10px; +} + +#featuredHelper { + gap: 10px; + flex-wrap: wrap; +} + +li { + margin-left: 20px; + list-style-type: "> "; + margin-bottom: .4em; +} + +h1, h2, h3 { + margin-bottom: .4em; +} + +.errorQuote { + color: gray; +} + +.dimText { + opacity: .6; +} + +.rainbowText { + background: linear-gradient(to right, var(--text-color), var(--accent-color), var(--accent-secondary)); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + animation: rainbow_animation 6s ease-in-out infinite; + background-size: 400% 100%; +} + +@keyframes rainbow_animation { + 0%,100% { + background-position: 0 0; + } + + 50% { + background-position: 100% 0; + } +} + +@media only screen and (max-width: 1280px) { + #everythingHelper { + flex-direction: column; + } + + aside { + width: 100%; + } + + #projectTitle { + font-size: larger; + } + + #headerLinksAndTitle { + flex-direction: row; + } + + #headerLinks { + margin-left: 2em; + } + +} + +@media only screen and (max-width: 300px) { + +} \ No newline at end of file diff --git a/authors/tenkuma/index.md b/authors/tenkuma/index.md index 8f1d875..232f6bb 100644 --- a/authors/tenkuma/index.md +++ b/authors/tenkuma/index.md @@ -9,4 +9,4 @@ images: ["tenkuma-silverfish.jpg", "tenkuma-mrnando-enderdragon.jpg"] I'm tenkuma. A bear, dreamer and sometimes developer. -You can found more about me on [my website](https://adrianvictor.rf.gd). \ No newline at end of file +You can find more about me on [my website](https://adrianvictor.rf.gd). \ No newline at end of file diff --git a/index.njk b/index.njk index 8756e23..bf67345 100644 --- a/index.njk +++ b/index.njk @@ -1,12 +1,20 @@ --- layout: "base.njk" +styles: ["home"] --- {% import "featured.njk" as featured %} -

    Welcome.

    -

    This is a project that aims to preserve Minecraft Beta mods and plugins through archives of documentation and JARs, and showcase new plugins for beta.

    -

    Featured projects

    - -{{ featured.projectShowcase(["aboukkit", "tenkumalib", "hangglidere", "devilwithin", "timekeeper", "tefreezer"], collections.projects) }} -
\ No newline at end of file +

Howdy, traveler.

+

This website is the place for Minecraft plugins, made with users and developers in mind. neobeta is open-source, you can find out how the website is made in our GitHub repository (spoiler: there's some real magic going on).

+

Our catalog is made by developers and community, you can get involved by following the tutorial linked here.

+
+
+

Featured projects

+ {{ featured.projectShowcase(["ghostsandstuff", "aboukkit", "tenkumalib", "hangglidere", "devilwithin", "timekeeper", "tefreezer"], collections.projects) }} +
+
+

Latest updates

+

2025-10-27: Website redesign!
Yaaay! neoBeta got a stylish redesign.

+
+
\ No newline at end of file diff --git a/search.html b/search.njk similarity index 94% rename from search.html rename to search.njk index 2a28417..fc2bdb7 100644 --- a/search.html +++ b/search.njk @@ -1,4 +1,5 @@ --- +styles: ["search"] layout: "base.njk" --- @@ -9,7 +10,6 @@ layout: "base.njk" display: flex; flex-direction: column; gap: 1em; - justify-content: center; }