Added benefits to micro tiers.

250 · Apr 4, 2024 · f1e061d · f1e061d
1 parent 1796b25
commit f1e061d
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 31 deletions.
diff --git a/assets/css/inc/nav.less b/assets/css/inc/nav.less
@@ -84,16 +84,16 @@ ol.menu {
         &:last-of-type {
           background: none;
           border-radius: 0 0 2px 2px;
+
+          >a {
+            padding-bottom: calc(.2em + 3px);
+          }
         }
 
         >a {
           display: block;
           min-width: 45px;
           padding: calc(.2em + 3px) .8em calc(.2em + 4px);
-
-          &:last-of-type {
-            padding-bottom: calc(.2em + 3px);
-          }
         }
 
         a:not([href]):after {
@@ -156,7 +156,6 @@ ol.menu {
         grid-column: span 2;
 
         font-size: 120%;
-        text-align: center;
 
         >a {
           padding-top: 1ex;
@@ -165,21 +164,21 @@ ol.menu {
       }
     }
 
-    /* Specials. */
+    /* Classified items. */
     a[class] {
-      padding-left: 2.05em;
+      display: flex;
+      gap: .7ch;
+      align-items: center;
 
       &:before {
         content: '';
-        position: absolute;
         --width: 1em;
         width: var(--width);
         height: $width;
 
         background: linear-gradient(#d9b882, #947e59) $mask;
         // Fudge size for scuffed Chrome SVG renderer.
         mask: no-repeat 0/99% 100%;
-        transform: translate(-125%);
       }
       &:hover:before {
         filter: brightness(14%);
@@ -212,10 +211,13 @@ ol.menu {
       &.deck:before {
         #icons.deck();
       }
-      &.tag:before {
-        --width: 1.2em;
-        transform: translate(-120%, -10%);
-        mask-image: url(/svg/tag.svg);
+      &.tag {
+        justify-content: center;
+
+        &:before {
+          --width: 1.2em;
+          mask-image: url(/svg/tag.svg);
+        }
       }
       &.email:before {
         #icons.email();
@@ -226,9 +228,13 @@ ol.menu {
       }
       &.discord:before {
         --width: 1.3em;
-        transform: translate(-110%, -10%);
+        margin-left: -.4em;
+
         mask-image: url(/svg/discord.svg);
+        mask-size: 110%;
         background: linear-gradient(#96aaf2, #5067b3);
+
+        translate: 2px;
       }
       &.steam:before {
         mask-image: url(/svg/steam.svg);
@@ -252,8 +258,15 @@ ol.menu {
   }
 
   .micro.tier {
+    margin: 0;
+
     opacity: .9;
     font-size: 75%;
     text-shadow: none;
+    line-height: 1.3;
+
+    &:hover {
+      filter: brightness(112%) saturate(120%);
+    }
   }
 }
diff --git a/assets/css/inc/quicklinks.less b/assets/css/inc/quicklinks.less
@@ -52,13 +52,8 @@
       border-color: #ebe9ff5e #0000002e #0000 #585475;
       border-radius: @radius;
 
-      >span {
-        position: relative;
-        left: 1ch;
-
-        &.micro.tier {
-          opacity: .9;
-        }
+      >.micro.tier {
+        margin-left: 1ch;
       }
 
       @ico-width: 1.2rem;

diff --git a/composer.lock b/composer.lock
diff --git a/template/layout/ranking.twig b/template/layout/ranking.twig
@@ -23,12 +23,14 @@
                 <li><a href="/most_played{{ ext }}"><span class="played">Most Played</span></a>
                 <li><a href="{{ club250 }}/ranking/trending">
                         <span class="trend">
-                            Trending <span class="t1 micro tier">T1</span>
+                            Trending
+                            {{ include('@components/micro tier.twig', {tier: 1, benefit: 'trend'}) }}
                         </span>
                     </a>
                 <li><a href="{{ club250 }}/ranking/custom">
                         <span class="cranking">
-                            Custom Ranking <span class="t1 micro tier">T1</span>
+                            Custom Ranking
+                            {{ include('@components/micro tier.twig', {tier: 1, benefit: 'cranking'}) }}
                         </span>
                     </a>
             </ol>

diff --git a/template/layout/template.twig b/template/layout/template.twig
@@ -50,17 +50,20 @@
                 <li><a href="/top250{{ ext }}" class="cup">Top 250 Games</a>
                 <li><a href="{{ club250 }}/ranking/250/history/{{ '-7 year'|date('Ymd') }}" class="history">
                         Top 250 History
-                        <span class="t1 micro tier">T1</span>
+                        {{ include('@components/micro tier.twig', {tier: 1, benefit: 'hist250'}) }}
                     </a>
                 <li><a href="/hidden_gems{{ ext }}" class="gem">Hidden Gems</a>
                 <li><a href="{{ club250 }}/ranking/gems/history/{{ '-7 year'|date('Ymd') }}" class="history">
                         Hidden Gems History
-                        <span class="t1 micro tier">T1</span>
+                        {{ include('@components/micro tier.twig', {tier: 1, benefit: 'hist250'}) }}
+                    </a>
+                <li><a href="{{ club250 }}/ranking/trending" class="trend">
+                        Trending Games
+                        {{ include('@components/micro tier.twig', {tier: 1, benefit: 'trend'}) }}
                     </a>
-                <li><a href="{{ club250 }}/ranking/trending" class="trend">Trending Games</a>
                 <li><a href="{{ club250 }}/ranking/custom" class="custom">
                         Custom Ranking
-                        <span class="t1 micro tier">T1</span>
+                        {{ include('@components/micro tier.twig', {tier: 1, benefit: 'cranking'}) }}
                     </a>
                 <li><a href="/most_played{{ ext }}" class="pad">Most Played</a>
                 <li>