Merge pull request #147 from modrinth/redesign/new-promo-style

Port Promotion to redesign style

docs/components/promotion.md

@@ -1,11 +1,12 @@
 # Promotion
+The Promotion component is used to serve Adrinth ads.
 :::raw
 <DemoContainer>
-<Promotion theme="dark" />
+<Promotion />
 </DemoContainer>
 :::
 
 
 ```vue
-<Promotion theme="dark" />
+<Promotion :external="true | false" queryParam="?optional-query-param"/>
 ```

lib/assets/styles/variables.scss

@@ -3,6 +3,11 @@ html {
   --dark-color-base: #b0bac5;
   --dark-color-contrast: #ecf9fb;
 
+  --color-ad: rgba(125, 75, 162, 0.2);
+  --color-ad-raised: rgba(190, 140, 243, 0.5);
+  --color-ad-contrast: black;
+  --color-ad-highlight: var(--color-purple);
+
   --gap-xs: 0.25rem;
   --gap-sm: 0.5rem;
   --gap-md: 0.75rem;
@@ -36,9 +41,6 @@ html {
   --color-purple: #8e32f3;
   --color-gray: #595b61;
 
-  --color-ad: #d6e6f9;
-  --color-ad-raised: #b1c8e4;
-
   --color-brand: var(--color-green);
   --color-brand-highlight: rgba(0, 175, 92, 0.25);
   --color-brand-shadow: rgba(0, 175, 92, 0.7);
@@ -79,9 +81,6 @@ html {
   --color-purple: #c78aff;
   --color-gray: #9fa4b3;
 
-  --color-ad: #1f324a;
-  --color-ad-raised: #2e4057;
-
   --color-brand: var(--color-green);
   --color-brand-highlight: rgba(27, 217, 106, 0.25);
   --color-brand-shadow: rgba(27, 217, 106, 0.7);

lib/components/base/Promotion.vue

@@ -1,26 +1,23 @@
 <template>
   <div class="GBBNWLJVGRHFLYVGSZKSSKNTHFYXHMBD">
+    <a
+      :href="`https://bisecthosting.com/modrinth${queryParam}`"
+      rel="noopener nofollow sponsored"
+      :target="target"
+    ></a>
     <div class="GBBNWLJVGRHFLYVGSZKSSKNTHFYXHMBD-0">
       <div class="GBBNWLJVGRHFLYVGSZKSSKNTHFYXHMBD-1">
         <div class="GBBNWLJVGRHFLYVGSZKSSKNTHFYXHMBD-2">
-          <a
-            :href="`https://bisecthosting.com/modrinth${queryParam}`"
-            rel="noopener nofollow sponsored"
-            :target="target"
-          >
-            <BisectIcon class="GBBNWLJVGRHFLYVGSZKSSKNTHFYXHMBD-3" />
-            <span>
-              <span> Host your Minecraft server on </span>
-              <strong>BisectHosting</strong>
-              <span> - get 25% off your first month with code <strong>MODRINTH</strong>. </span>
-            </span>
-          </a>
+          <BisectIcon class="GBBNWLJVGRHFLYVGSZKSSKNTHFYXHMBD-3" />
+          <span>
+            <span> Host your Minecraft server on </span>
+            <strong>BisectHosting</strong>
+            <span> - get 25% off your first month with code <strong>MODRINTH</strong>. </span>
+          </span>
         </div>
       </div>
       <div class="GBBNWLJVGRHFLYVGSZKSSKNTHFYXHMBD-4">
-        <a rel="noopener sponsored" :target="target" href="https://adrinth.com">
-          Ads via Adrinth
-        </a>
+        <a rel="noopener sponsored" :target="target" href="https://adrinth.com"> Ad via Adrinth </a>
       </div>
     </div>
   </div>
@@ -49,8 +46,19 @@ const target = computed(() => (props.external ? '_blank' : '_self'))
   position: relative;
   margin-bottom: var(--gap-md);
   background: var(--color-ad);
-  border: 3px solid var(--color-ad-raised);
+  border: 1px solid var(--color-ad-raised);
   border-radius: var(--radius-lg);
+  container-type: inline-size;
+  width: 100%;
+
+  > a {
+    position: absolute;
+    inset: 0;
+  }
+
+  &:has(> a:first-child:active) {
+    scale: 0.99;
+  }
 }
 .GBBNWLJVGRHFLYVGSZKSSKNTHFYXHMBD-0 {
   font-size: 14px;
@@ -61,34 +69,36 @@ const target = computed(() => (props.external ? '_blank' : '_self'))
   padding: 1em;
   text-align: left;
 }
-.GBBNWLJVGRHFLYVGSZKSSKNTHFYXHMBD-2 a {
+.GBBNWLJVGRHFLYVGSZKSSKNTHFYXHMBD-2 {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   color: var(--color-base);
+  margin-right: 7.5rem;
 
   &:hover {
     text-decoration: none;
   }
 }
-.GBBNWLJVGRHFLYVGSZKSSKNTHFYXHMBD-2 a b,
-.GBBNWLJVGRHFLYVGSZKSSKNTHFYXHMBD-2 a strong {
-  color: #088cdb;
+.GBBNWLJVGRHFLYVGSZKSSKNTHFYXHMBD-2 b,
+.GBBNWLJVGRHFLYVGSZKSSKNTHFYXHMBD-2 strong {
+  color: var(--color-ad-highlight);
 }
 .GBBNWLJVGRHFLYVGSZKSSKNTHFYXHMBD-3 {
   padding-top: 1px;
-  height: 1.2rem;
+  height: 1.5rem;
   width: auto;
+  flex-shrink: 0;
 }
 .GBBNWLJVGRHFLYVGSZKSSKNTHFYXHMBD-4 a {
   position: absolute;
-  bottom: -2px;
-  right: -2px;
+  bottom: -1px;
+  right: -1px;
   text-align: center;
   font-weight: 600;
   text-transform: uppercase;
   font-size: 0.8em;
-  color: var(--color-base);
+  color: var(--color-ad-contrast);
   background: var(--color-ad-raised);
   letter-spacing: 0.1ch;
   margin: 0;

package.json

@@ -1,7 +1,7 @@
 {
   "name": "omorphia",
   "type": "module",
-  "version": "0.6.9",
+  "version": "0.7.0",
   "files": [
     "dist",
     "locales"