You've already forked AstralRinth
744460bdc0
* launcher base gui initial * Bootstraps router, Omorphia, and prettier. * Adds pages. Adds Vuex. SideBar nav contains user section and pages section. * Adds Instance markup. Instances added to Home page. * Adds News to home page. * Adds settings to nav. Other touches. * Polishing initial base GUI. * Moves some styling to assets. Changes px values to rem. * Removes pointless border-radius CSS. * Implements Omorphia vars. * Adds trending mods section. * Updates home page. * Swaps Vuex implementation for Pinia. * Fixes invalid CSS on instance list item hover. * Adds @ path resolve for imports. * Fix some styling of row display * Cleaning up styles and markup. * Fixes overall layout issues. * Cleans up more styling. Modifies AppBar coloring. * Allows pagination arrows to conditionally appear in RowDisplay. * Adds paging behavior in RowDisplay. * Updates nav and settings button styling. * Brings in Knossos style for trending mods. Polishes News CSS. * Updates Omorphia. Starts addressing PR comments. * Addresses some more PR comments. * Changes side navigation styling. Active route class implemented. * Combines trending and popular row. * Makes images more realistic. Adds CTA to instances. * Converts all instances to card style. Converts more styles to rem. * Moves Navigation and UserSection into App.vue * Adds Modrinth favicon. * Removes unused styling. * Adds transition to news card. --------- Co-authored-by: Jai A <jaiagr+gpg@pm.me> Co-authored-by: CodexAdrian <83074853+CodexAdrian@users.noreply.github.com>
98 lines
1.9 KiB
Vue
98 lines
1.9 KiB
Vue
<script setup>
|
|
import { Card, ChevronRightIcon } from 'omorphia'
|
|
|
|
const props = defineProps({
|
|
news: Object,
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<Card class="news-cta">
|
|
<img :src="props.news.img" alt="News Image" />
|
|
<div class="body">
|
|
<div class="headline">
|
|
<h2>{{ props.news.headline }}</h2>
|
|
<p>{{ props.news.blurb }}</p>
|
|
</div>
|
|
<div class="underline">
|
|
<p>{{ props.news.source }}</p>
|
|
<a href="#"><ChevronRightIcon /></a>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.news-cta {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 0;
|
|
background: var(--color-raised-bg);
|
|
min-width: 24.125rem; /* from wireframe */
|
|
min-height: 8.5rem; /* from wireframe */
|
|
box-shadow: var(--shadow-raised-lg);
|
|
cursor: pointer;
|
|
transition: all ease-in-out 0.1s;
|
|
|
|
&:hover {
|
|
box-shadow: var(--shadow-floating);
|
|
filter: brightness(0.85);
|
|
}
|
|
|
|
img {
|
|
display: flex;
|
|
width: 8.4375rem; /* from wireframe */
|
|
height: 8.5rem; /* from wireframe */
|
|
border-radius: 0.9rem 0 0 0.9rem;
|
|
}
|
|
|
|
.body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 8.5rem; /* from wireframe */
|
|
padding: 0.45rem;
|
|
|
|
.headline {
|
|
display: inherit;
|
|
flex-direction: inherit;
|
|
margin: 0.4rem 0;
|
|
width: 100%;
|
|
|
|
h2 {
|
|
font-size: 1rem;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
p {
|
|
font-size: 0.7rem;
|
|
}
|
|
}
|
|
|
|
.underline {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
margin-top: auto;
|
|
|
|
p {
|
|
font-size: 0.7rem;
|
|
}
|
|
|
|
a {
|
|
transition: all ease-in-out 0.2s;
|
|
width: 1.5rem;
|
|
color: var(--color-primary);
|
|
font-size: 1.3rem;
|
|
|
|
&:hover {
|
|
transform: translate(1px);
|
|
filter: brightness(150%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|