Merge branch 'main' of https://git.theclashfruit.me/blurryface/Website

css/src/style.scss

@@ -6,7 +6,8 @@
   -webkit-tap-highlight-color: transparent; // fuck you (L) // wait what does this do lol
 }
 
-html, body {
+html,
+body {
   overflow-x: hidden;
 }
 
@@ -51,7 +52,8 @@ main {
   box-sizing: border-box;
 }
 
-ul, ol {
+ul,
+ol {
   list-style-position: inside;
 }
 
@@ -146,6 +148,7 @@ img {
     object-fit: cover;
 
     mask-image: linear-gradient(to right, transparent, rgba(red, 0.3));
+
     @media (prefers-color-scheme: dark) {
       mask-image: linear-gradient(to right, transparent, rgba(red, 0.1));
     }
@@ -184,7 +187,7 @@ a {
 
   height: 220px;
 
-  > .container {
+  >.container {
     height: 100%;
 
     display: flex;
@@ -197,7 +200,7 @@ a {
       justify-content: center;
     }
 
-    > div {
+    >div {
       display: flex;
       flex-direction: column;
 
@@ -249,6 +252,7 @@ a {
   @media (min-width: 601px) {
     display: none;
   }
+
   z-index: 10;
 
   position: fixed;
@@ -287,7 +291,7 @@ a {
     background: dark.$navBG;
   }
 
-  > .container {
+  >.container {
     padding: 16px 24px;
 
     display: flex;
@@ -306,6 +310,7 @@ a {
 
       backdrop-filter: blur(15px);
       background: rgba(light.$navBG, 0.86);
+
       @media (prefers-color-scheme: dark) {
         background: rgba(dark.$navBG, 0.9);
       }
@@ -314,7 +319,8 @@ a {
       flex-direction: column;
       gap: 64px;
 
-      &, > * {
+      &,
+      >* {
         transition: 0.16s
       }
 
@@ -323,13 +329,13 @@ a {
         pointer-events: none;
 
         //&, > * { transition: 0.12s }
-        > * {
+        >* {
           transform: translateX(32px);
         }
       }
     }
 
-    > div {
+    >div {
       margin: 0;
 
       display: flex;
@@ -343,13 +349,14 @@ a {
         flex-direction: column;
       }
 
-      > a {
+      >a {
         font-family: Outfit;
         user-select: none;
 
         font-size: 16px;
         box-sizing: border-box;
         color: light.$navLinkNormalColor;
+
         @media (prefers-color-scheme: dark) {
           color: dark.$navLinkNormalColor;
         }
@@ -380,7 +387,8 @@ a {
           pointer-events: none;
         }
 
-        &:hover, &.active {
+        &:hover,
+        &.active {
           //background: rgba(15, 23, 42, 0.1);
           color: light.$navLinkActiveColor;
           outline-color: light.$navLinkOutlineColor;
@@ -416,15 +424,16 @@ a {
   //
 }
 
+
 .pageFooter {
   opacity: 0.8;
 
-  > .SNS-Links {
+  >.SNS-Links {
     display: flex;
     flex-wrap: wrap;
     gap: 16px;
 
-    > a {
+    >a {
       display: flex;
       gap: 8px;
 
@@ -445,4 +454,4 @@ a {
       }
     }
   }
-}
+}

index.php

@@ -12,26 +12,33 @@
   session_start();
 
   $nations = array(
+
     'psf' => array(
       'name' => 'Panorama Socialist Federation',
       'flag' => 'https://raw.theclashfruit.me/CRSS/CRSS/main/Nations/Republic%20of%20Panorama/Flag.svg',
       'short' => 'psf',
       'short_description' => 'The first nation, prev. known as ROP.',
       'description' => 'The first nation on CRSS, previously known as ROP.',
+      'leader' => 'iforgotaname',
+      'leader_term' => 'Prime Minister',
     ),
     'cnk' => array(
       'name' => 'Chunkia',
-      'flag' => 'https://raw.theclashfruit.me/CRSS/CRSS/main/Nations/Chunkia/chunkia512.png',
+      'flag' => 'https://raw.theclashfruit.me/CRSS/CRSS/main/Nations/Chunkia/Chunkia.svg',
       'short' => 'cnk',
       'short_description' => 'Chunkia is based in a chaotic landscape',
       'description' => 'In the chaos of Minecraft, chunk errors are inevitable. Chunkia is based in one.',
+      'leader' => 'WorldWidePixel',
+      'leader_term' => 'Leader',
     ),
     'ttk' => array(
       'name' => 'The Toaster-Königreich',
-      'flag' => 'https://raw.theclashfruit.me/CRSS/CRSS/main/Nations/The%20Toaster-K%C3%B6nigreich/The%20Toaster-K%C3%B6nigreich%20Flag.png',
+      'flag' => 'https://raw.theclashfruit.me/CRSS/CRSS/main/Nations/The%20Toaster-K%C3%B6nigreich/The%20Toaster-K%C3%B6nigreich%20Flag.svg',
       'short' => 'ttk',
       'short_description' => 'The Toaster-Königreich is the Industrialized Nation of CRSS',
       'description' => 'In the vast landsacpe of CRSS, The Toaster-Königreich is one of the most industrialized Marxist district of CRSS. With Charge Industries as one of the main government controlled company in the nation.',
+      'leader' => 'Lupancham',
+      'leader_term' => 'Chancellor',
     ),
     'rob' => array(
       'name' => 'Republic of Budapest',
@@ -39,7 +46,27 @@
       'short' => 'rob',
       'short_description' => 'Republic of Budapest is a country located to the west of the map.',
       'description' => 'Republic of Budapest is a country located to the west of the map.',
-    )
+      'leader' => 'TheClashFruit',
+      'leader_term' => 'Leader',
+    ),
+    'rfm' => array(
+      'name' => 'Romanian Federation of Minecraft',
+      'flag' => 'https://raw.theclashfruit.me/CRSS/CRSS/main/Nations/Romanian%20Federation%20of%20Minecraft/FMC%20flag.svg',
+      'short' => 'rfm',
+      'short_description' => 'Helping modernise CRSS',
+      'description' => 'RFM is a nation helping in the modernisation of CRSS, not only by practices but by livelihood.',
+      'leader' => 'polycord',
+      'leader_term' => 'President',
+    ),
+      'tcg' => array(
+      'name' => 'Toasteric Colony of Grapetopia',
+      'flag' => 'https://raw.theclashfruit.me/CRSS/CRSS/main/Nations/Grapetopia/TCG.svg',
+      'short' => 'tcg',
+      'short_description' => 'A colony of TTK, ~10K blocks out of 0,0',
+      'description' => 'This is a colony of TTK, an island with an area of ~382m², located at ~7.5k X and -2.8k Z',
+      'leader' => 'MrLagSwitcha',
+      'leader_term' => 'Leader in charge',
+    ),
   );
 
   $companies = array(
@@ -176,7 +203,7 @@
 
       echo $twig->render('404.twig');
     } else {
-      echo $twig->render('nation.twig', array('nation' => $companies[$company]));
+      echo $twig->render('company.twig', array('company' => $companies[$company]));
     }
   });
 

template/company.twig

@@ -5,20 +5,18 @@
 {% include 'includes/nav.twig' with {'page': 'company'} %}
     
 <main class="pageContent container">
-  <ul>
+  <div class="nationLayout">
-    <li>
+    <div class="nationCoreInfo">
-      code: {{ company.short }}
+      <h1 style="margin: 0"> {{ company.name }} </h1>
-    </li>
+      <p style="font-family:monospace"> {{ company.short }} </p>
-    <li>
+      <h2> Logo </h2>
-      name: {{ company.name }}
+      <img class="nationFlag" src="{{ company.logo }}" alt="{{ company.name }}'s logo." />
-    </li>
+    </div>
-    <li>
+    <div class="nationCoreInfo">
-      flag: <img height="32px" src="{{ company.logo }}"  alt="{{ company.name }}'s flag." />
+      <h2 style="margin: 0"> Description </h2>
-    </li>
+      <p> {{ company.description }} </p>
-    <li>
+    </div>
-      description: {{company.description}}
+  </div>
-    </li>
-  </ul>
 </main>
 
 {% include 'includes/footer.twig' %}

template/includes/nav.twig

@@ -13,8 +13,11 @@
       <a class="transitionEnabled {% if page == 'nations' %} active {% endif %}" href="/nations">
         Nations
       </a>
+      <a class="transitionEnabled {% if page == 'companies' %} active {% endif %}" href="/companies">
+        Companies
+      </a>
       <a class="{% if page == 'map.js' %} active {% endif %}" href="/map">
-        Map & Rails
+        Map
       </a>
       {% if user.is_admin == 1 %}
         <a href="/admin">

template/nation.twig

@@ -3,26 +3,61 @@
 {% include 'includes/hero.twig' %}
 
 {% include 'includes/nav.twig' with {'page': 'nation'} %}
-    
+
 <main class="pageContent container">
-  <ul>
+  <div class="nationLayout">
-    <li>
+    <div class="nationCoreInfo">
-      code: {{ nation.short }}
+      <h1 style="margin: 0"> {{ nation.name }} </h1>
-    </li>
+      <p style="font-family:monospace"> {{ nation.short }} </p>
-    <li>
+      <h2> Flag </h2>
-      name: {{ nation.name }}
+      <img class="nationFlag" src="{{ nation.flag }}" alt="{{ nation.name }}'s flag." />
-    </li>
+    </div>
-    <li>
+    <div class="nationCoreInfo">
-      flag: 
+      <h2 style="margin: 0"> Description </h2>
-    </li>
+      <p> {{ nation.description }} </p>
-    <li>
+      <h2> {{ nation.leader_term }} </h2>
-      <img height="48px" src="{{ nation.flag }}"  alt="{{ nation.name }}'s flag." />
+      <p> {{ nation.leader }} </p>
-    </li>
+    </div>
-    <li>
+  </div>
-      description: {{nation.description}}
-    </li>
-  </ul>
 </main>
 
+<style>
+/* TCF PLEASE MOVE THIS TO THE CORRECT CSS FILE, I AM TOO LAZY */
+  
+@media (max-width: 700px) {
+  .nationLayout {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+}
+
+@media (min-width: 701px) {
+  .nationLayout {
+    display: flex;
+    flex-direction: row;
+    gap: 3rem;
+  }
+}
+
+.nationLayout p, h1, h2, h3 {
+  margin: 0;
+}
+
+.nationFlag {
+  border-radius: 12px;
+}
+
+.nationCoreInfo {
+  flex-grow: 1;
+  flex-basis: 250px;
+  gap: 1rem;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+}
+
+</style>
+
 {% include 'includes/footer.twig' %}
 {% include 'includes/foot.twig' %}