RPCSX/archived-RPCSX.github.io
1
0
Fork 0
mirror of https://github.com/RPCSX/RPCSX.github.io.git synced 2026-01-31 01:05:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

Refactor, re-layout, and re-theme

Browse Source
This commit is contained in:
OCDkirby
2023-07-20 22:13:11 -05:00
parent 1eee8d9361
commit beaf0bbc5d
3 changed files with 213 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

236
src/App.vue
View File

@@ -1,13 +1,42 @@
<script setup lang="ts"> <script setup lang="ts">
import 'vfonts/FiraSans.css'; import 'vfonts/FiraSans.css';
import { PedestrianFamily, ToolBox, GameConsole, Linux } from '@vicons/carbon';
import { GlobalThemeOverrides, darkTheme, NLayout } from 'naive-ui'
import { TypographyThemeVars } from 'naive-ui/es/typography/styles';
import { BuiltInGlobalTheme } from 'naive-ui/es/themes/interface';
import { defineComponent, ref } from 'vue'; import { defineComponent, ref } from 'vue';
import { PedestrianFamily, ToolBox, GameConsole, Linux } from '@vicons/carbon';
import { GlobalThemeOverrides, darkTheme, NLayout, NCarousel } from 'naive-ui'
import { BuiltInGlobalTheme } from 'naive-ui/es/themes/interface';
import { CardThemeVars } from 'naive-ui/es/card/styles'; import { CardThemeVars } from 'naive-ui/es/card/styles';
import { TypographyThemeVars } from 'naive-ui/es/typography/styles';
import { GradientTextThemeVars } from 'naive-ui/es/gradient-text/styles';
import { MenuThemeVars } from 'naive-ui/es/menu/styles';
const menuOverrides: Partial<MenuThemeVars> = {
fontSize: '12pt',
itemTextColorActiveHorizontal: '#4C3E9C',
itemIconColorActiveHorizontal: '#4C3E9C',
}
const darkMenu: Partial<MenuThemeVars> = {
...menuOverrides,
itemTextColorHorizontal: '#F8F2F1',
groupTextColor: '#F8F2F1',
itemTextColorHoverHorizontal: '#739AF0',
itemIconColorHoverHorizontal: '#739AF0',
}
const lightMenu: Partial<MenuThemeVars> = {
...menuOverrides,
groupTextColor: '#121420',
itemTextColorHorizontal: '#121420',
itemTextColorHoverHorizontal: '#1D5DEC',
itemIconColorHoverHorizontal: '#1D5DEC',
}
const gradientTextOverrides: Partial<GradientTextThemeVars> = {
colorEndInfo: '#1D5DEC',
colorStartInfo: '#4C3E9C',
}
const typographyOverrides: Partial<TypographyThemeVars> = { const typographyOverrides: Partial<TypographyThemeVars> = {
headerFontSize1: '30pt', headerFontSize1: '30pt',
@@ -33,122 +62,183 @@ const cardOverrides : Partial<CardThemeVars> = {
titleFontSizeMedium: '16pt', titleFontSizeMedium: '16pt',
titleFontSizeSmall: '16pt', titleFontSizeSmall: '16pt',
fontSizeMedium: '12pt', fontSizeMedium: '12pt',
borderRadius: '20px'
}
const lightCard : Partial<CardThemeVars> = {
...cardOverrides,
borderColor: '#1D5DEC'
} }
const lightThemeOverrides: GlobalThemeOverrides = { const lightThemeOverrides: GlobalThemeOverrides = {
common: { common: {
baseColor: '#F8F2F1', baseColor: '#F8F2F1',
primaryColor: '#121420', primaryColor: '#121420',
fontFamily: 'v-sans' fontFamily: 'v-sans',
cardColor: '#F8F2F1'
}, },
Typography: lightTypography, Typography: lightTypography,
Card: cardOverrides, Card: lightCard,
GradientText: gradientTextOverrides,
Menu: lightMenu,
// ... // ...
}; };
const darkThemeOverrides: GlobalThemeOverrides = { const darkThemeOverrides: GlobalThemeOverrides = {
common: { common: {
baseColor: '#121420', baseColor: '#121420',
primaryColor: '#F8F2F1' primaryColor: '#F8F2F1',
cardColor: '#121420',
}, },
Typography: darkTypography, Typography: darkTypography,
Card: cardOverrides, Card: cardOverrides,
GradientText: gradientTextOverrides,
Menu: darkMenu,
// ... // ...
}; };
</script> </script>
<template> <template>
<n-config-provider :theme="theme" :themeOverrides="theme === null ? lightThemeOverrides : darkThemeOverrides"> <n-config-provider :theme="theme" :themeOverrides="theme === null ? lightThemeOverrides : darkThemeOverrides">
<n-layout> <n-layout :class="`layout-${theme === null ? 'light' : 'dark'}`">
<div class="wrapper"> <div class="wrapper">
<Suspense> <div class="top-portion-wrapper">
<TopBarMenu :themex="theme" :toggle="toggleTheme" /> <Suspense>
</Suspense> <TopBarMenu :themex="theme" :toggle="toggleTheme" />
<div class="columns"> </Suspense>
<div id="main-column" class="column"> <div class="columns">
<div class="top-main"> <div id="main-column" class="column">
<Suspense> <div class="top-main">
<Hook :themex="theme"/> <Suspense>
</Suspense> <Hook :themex="theme"/>
</div> </Suspense>
</div>
<div class="column-content">
<ContentCard> <div class="column-content">
<template #card-icon> <!-- <ContentCard>
<PedestrianFamily /> <template #card-icon>
</template> <PedestrianFamily />
<template #card-title> </template>
Huge community. <template #card-title>
</template> Huge community.
Everyone is here! The spirit of RPCS3 lives on. </template>
</ContentCard> Everyone is here! The spirit of RPCS3 lives on.
<ContentCard>
<template #card-icon>
<ToolBox />
</template>
<template #card-title>
Ongoing development.
</template>
Est. 2016 by DH himself.
</ContentCard>
<ContentCard>
<template #card-icon>
<GameConsole />
</template>
<template #card-title>
All your favorite titles.
</template>
<div class="joke-wrapper">
<div class="body-text">
Bloodborne coming Soon™*
</div>
<div class="joke-footnote">
*RPCSX does not provide estimates or compatibility for any title.
</div>
</div>
</ContentCard> </ContentCard>
<ContentCard> <ContentCard>
<template #card-icon> <template #card-icon>
<Linux /> <ToolBox />
</template> </template>
<template #card-title> <template #card-title>
Currently Linux only. Ongoing development.
</template> </template>
WSL on Windows is being discussed. Est. 2016 by DH himself.
</ContentCard> </ContentCard>
<n-divider /> <ContentCard>
</div> <template #card-icon>
</div> <GameConsole />
<div id="right-column" class="column"> </template>
<div class="top-right"> <template #card-title>
<n-h2>Get Involved</n-h2> All your favorite titles.
</div> </template>
<div class="column-content"> <div class="joke-wrapper">
<MainCard :themex="theme"/> <div class="body-text">
<!-- <iframe src="https://discord.com/widget?id=252023769500090368&theme=dark" width="250" height="400" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe> --> Bloodborne coming Soon™*
</div>
<div class="joke-footnote">
*RPCSX does not provide estimates or compatibility for any title.
</div>
</div>
</ContentCard>
<ContentCard>
<template #card-icon>
<Linux />
</template>
<template #card-title>
Currently Linux only.
</template>
WSL on Windows is being discussed.
</ContentCard> -->
</div>
</div>
<div id="right-column" class="column">
<div class="top-right">
<MainCard :themex="theme"/>
</div>
<div class="column-content">
<!-- <iframe src="https://discord.com/widget?id=252023769500090368&theme=dark" width="250" height="400" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe> -->
</div>
</div> </div>
</div> </div>
</div> </div>
<n-divider />
<div class="bottom-portion-wrapper">
<n-carousel autoplay direction="horizontal" dot-type="line">
<img class="carousel-img" src="/assets/we-are-doomed.png">
<img class="carousel-img" src="/assets/sample-1.png">
<img class="carousel-img" src="/assets/steamydeck.jpg">
</n-carousel>
</div>
</div> </div>
</n-layout> </n-layout>
</n-config-provider> </n-config-provider>
</template> </template>
<style scoped> <style scoped>
.n-layout {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.n-carousel {
width: 800px;
height: 450px;
align-self: center;
}
.n-divider {
margin: 0px 16px;
}
.carousel-img {
width: 800px;
height: 450px;
object-fit: cover;
}
.layout-dark {
background-image: url('/assets/background-dark.png');
}
.layout-light {
background-image: url('/assets/background-light.png');
}
.wrapper { .wrapper {
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
margin: 0px; /* removes default style */ margin: 10px 10px;
display: flex; /* enables flex content for its children */
box-sizing: border-box; box-sizing: border-box;
}
.top-portion-wrapper {
display: flex; /* enables flex content for its children */
flex-direction: column; flex-direction: column;
} }
.bottom-portion-wrapper {
margin-top: 30px;
display: flex;
flex-flow: column nowrap;
align-items: center;
}
.columns { .columns {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
justify-content: center; justify-content: center;
align-items: stretch; align-items: stretch;
margin-top: 20px;
} }
.column { .column {
@@ -168,15 +258,15 @@ const darkThemeOverrides: GlobalThemeOverrides = {
#main-column { #main-column {
/* flex-shrink: 0; /* makes sure that content is not cut off in a smaller browser window */ /* [OCDkirby: so that was a fucking lie.] */ /* flex-shrink: 0; /* makes sure that content is not cut off in a smaller browser window */ /* [OCDkirby: so that was a fucking lie.] */
flex-shrink: 1; flex-shrink: 1;
flex-grow: 4; flex-grow: 2;
align-self: center; align-self: center;
align-items: center; align-items: center;
gap: 16px; gap: 20px;
} }
#right-column { #right-column {
flex-grow: 0; flex-grow: 1;
gap: 5px; gap: 16px;
padding-right: 10px; padding-right: 10px;
} }

40
src/components/Hook.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { NH1, NText } from 'naive-ui'; import { NText, NGradientText } from 'naive-ui';
function getTime() { function getTime() {
const divmod = (x: any, y: any) => [Math.floor(x / y), x % y]; // Utility const divmod = (x: any, y: any) => [Math.floor(x / y), x % y]; // Utility
@@ -16,10 +16,42 @@ const headers = response.headers
var contributors = headers.get('link')?.match(/&page=(\d+)>; rel="last"/)[1] var contributors = headers.get('link')?.match(/&page=(\d+)>; rel="last"/)[1]
</script> </script>
<style scoped>
.hook {
display: flex;
flex-flow: column nowrap;
gap: 20px;
}
.hook-item {
padding: 4px 0px;
display: flex;
flex-flow: column nowrap;
}
.n-gradient-text {
font-size: 32pt;
}
.n-text {
font-size: 16pt;
font-weight: bold;
}
</style>
<template> <template>
<div class="hook"> <div class="hook">
<n-h1><n-text>{{ getTime() }} of development.</n-text></n-h1> <div class="hook-item">
<n-h1><n-text>{{ contributors }} experienced contributors.</n-text></n-h1> <n-gradient-text type="info">{{ getTime() }}</n-gradient-text>
<n-h1><n-text>0 days since someone asked for Bloodborne.</n-text></n-h1> <n-text>of development.</n-text>
</div>
<div class="hook-item">
<n-gradient-text type="info">{{ contributors }}</n-gradient-text>
<n-text>experienced contributors.</n-text>
</div>
<div class="hook-item">
<n-gradient-text type="info">0</n-gradient-text>
<n-text>days since someone asked for Bloodborne.</n-text>
</div>
</div> </div>
</template> </template>

27
src/components/MainCard.vue
View File

@@ -1,28 +1,29 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { NCard } from 'naive-ui';
import { CardThemeVars } from 'naive-ui/es/card/styles';
const cardOverrides : Partial<CardThemeVars> = {
borderColor: '#1D5DEC',
borderRadius: '8px',
titleFontSizeSmall: '20pt',
fontSizeSmall: '16pt'
}
defineProps({
themex: {
type: Object
}
})
</script> </script>
<style scoped> <style scoped>
.n-card { .n-card {
max-width: 300px; max-width: 600px;
line-height: 2.8em;
} }
</style> </style>
<template> <template>
<n-card hoverable> <n-card hoverable size="small" :theme-overrides="cardOverrides">
<template #cover>
<img :src="themex == null ? './assets/logo-light.png' : './assets/logo-dark.png'">
</template>
<template #header> <template #header>
RPCSX is your PlayStation 4 emulator. RPCSX is your PlayStation™ 4 emulator.
</template> </template>
<div class="body-text">Use only with lawfully obtained archival copies of PS4 games you physically own.</div> <div class="body-text">Use only with lawfully obtained archival copies of PS4 games you physically own. <strong>RPCSX is non-commercial and is not affiliated with Sony or PlayStation.</strong></div>
</n-card> </n-card>
</template> </template>