Bommels05/Modrinth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update promo styling

Browse Source
This commit is contained in:
Prospector 2023-11-15 09:22:02 -08:00
parent 200648275e
commit 2131fed0bb
No known key found for this signature in database
4 changed files with 44 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
docs/components/promotion.md
View File

@ -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"/>
```

11
lib/assets/styles/variables.scss
View File

@ -3,6 +3,10 @@ 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.8);
--color-ad-highlight: var(--color-purple);
--gap-xs: 0.25rem;
--gap-sm: 0.5rem;
--gap-md: 0.75rem;
@ -36,8 +40,8 @@ html {
--color-purple: #8e32f3;
--color-gray: #595b61;
--color-ad: #d6e6f9;
--color-ad-raised: #b1c8e4;
--color-ad: rgba(125, 75, 162, 0.2);
--color-ad-raised: rgba(190, 140, 243, 0.8);
--color-brand: var(--color-green);
--color-brand-highlight: rgba(0, 175, 92, 0.25);
@ -79,9 +83,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);

58
lib/components/base/Promotion.vue
View File

@ -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-accent-contrast);
background: var(--color-ad-raised);
letter-spacing: 0.1ch;
margin: 0;

2
package.json
View File

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