Added logo to homepage

This commit is contained in:
thepaperpilot 2022-02-28 21:30:17 -06:00
parent 96264f70b8
commit f1f7b48b22
7 changed files with 691 additions and 4 deletions

View file

@ -0,0 +1,36 @@
<template>
<Layout>
<template #home>
<main class="home" aria-labelledby="main-title">
<Profectus style="height: 30vmin; margin: auto; display: block" />
<HomeHero />
<HomeFeatures />
<div class="home-content">
<Content />
</div>
<HomeFooter />
</main>
</template>
</Layout>
</template>
<script setup>
import DefaultTheme from 'vitepress/theme';
import Profectus from './Profectus.vue';
// I want Profectus above the hero text, so I effectively need to recreate the Home class now
import HomeHero from './home/HomeHero.vue';
import HomeFeatures from './home/HomeFeatures.vue';
import HomeFooter from './home/HomeFooter.vue';
const { Layout } = DefaultTheme;
</script>
<style scoped>
.home {
padding-top: var(--header-height);
}
.home-content {
max-width: 960px;
margin: 0px auto;
padding: 0 1.5rem;
}
</style>

View file

@ -0,0 +1,195 @@
<template>
<transition appear>
<svg
id="eaRe02fYmMp1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 228 521"
shape-rendering="geometricPrecision"
text-rendering="geometricPrecision"
>
<g id="P">
<path
d="m 101,512.877 c -17.547386,-5.3519 -50.794681,-10.26296 -80,0 10.737201,-217.43031 5.7244,-300.999 0,-464.9995 0,0 46.6144,-37.1164 80,-42.00002 33.386,-4.883633 86.025,10.45942 120,50.00002 5,30 -4.353,106.6565 -44,156.0005 -34.149,42.5 -130,38.48 -130,92.999 0,102 54,208 54,208 z"
style="
display: inline;
fill: none;
stroke: rgb(163, 190, 140);
stroke-width: 10;
stroke-linecap: round;
stroke-miterlimit: 16;
"
id="trunk"
class="svg-elem-1"
></path>
<path
d="M 221,55.8775 C 209.023,126.453 185.39,166.835 158.997,191.5 93.783098,252.444 11.718998,217.436 46.999998,304.877"
style="
display: inline;
fill: none;
stroke: rgb(163, 190, 140);
stroke-width: 5;
stroke-linecap: round;
stroke-miterlimit: 16;
"
id="vine2"
class="svg-elem-2"
></path>
<path
d="m 194.5,188 c -11.225,4.447 -19.066,5.134 -35.503,3.5"
style="
display: inline;
fill: none;
stroke: rgb(163, 190, 140);
stroke-width: 5;
stroke-linecap: round;
stroke-miterlimit: 16;
"
id="short_vine4"
class="svg-elem-3"
></path>
<path
d="M 73.499996,246.5 C 111.145,245.626 127.011,238.775 156.5,228"
style="
display: inline;
fill: none;
stroke: rgb(163, 190, 140);
stroke-width: 5;
stroke-linecap: round;
stroke-miterlimit: 16;
"
id="short_vine3"
class="svg-elem-4"
></path>
<path
d="M 221,55.8775 C 169.5,17.8262 86.0943,44.9468 47,107 c -4.743,7.528 -7.1041,15.373 -8.326,24 -3.5282,24.91 2.4426,56.34 -12.0011,105.5"
style="
display: inline;
fill: none;
stroke: rgb(163, 190, 140);
stroke-width: 5;
stroke-linecap: round;
stroke-miterlimit: 16;
"
id="vine1"
class="svg-elem-5"
></path>
<path
d="M 21,47.8775 38.674,131"
style="
display: inline;
fill: none;
stroke: rgb(163, 190, 140);
stroke-width: 5;
stroke-linecap: round;
stroke-miterlimit: 16;
"
id="short_vine2"
class="svg-elem-6"
></path>
<path
d="m 3,326.5 c 13.1783,22.208 16.4863,42.834 21.6997,81"
style="
display: inline;
fill: none;
stroke: rgb(163, 190, 140);
stroke-width: 5;
stroke-linecap: round;
stroke-miterlimit: 16;
"
id="short_vine1"
class="svg-elem-7"
></path>
</g>
</svg>
</transition>
</template>
<style scoped>
svg {
background: #2e3440;
}
/***************************************************
* Generated by SVG Artista on 1/7/2022, 4:39:47 PM
* MIT license (https://opensource.org/licenses/MIT)
* W. https://svgartista.net
**************************************************/
svg .svg-elem-1 {
stroke-dashoffset: 2648.758056640625px;
stroke-dasharray: 1324.3790283203125px;
transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}
svg.v-enter-from .svg-elem-1,
svg.v-leave-to .svg-elem-1 {
stroke-dashoffset: 1324.3790283203125px;
}
svg .svg-elem-2 {
stroke-dashoffset: 680.4000854492188px;
stroke-dasharray: 340.2000427246094px;
transition: stroke-dashoffset 1s ease-out 0.4s;
}
svg.v-enter-from .svg-elem-2,
svg.v-leave-to .svg-elem-2 {
stroke-dashoffset: 340.2000427246094px;
}
svg .svg-elem-3 {
stroke-dashoffset: 76.21031951904297px;
stroke-dasharray: 38.105159759521484px;
transition: stroke-dashoffset 1s ease-out 0.8s;
}
svg.v-enter-from .svg-elem-3,
svg.v-leave-to .svg-elem-3 {
stroke-dashoffset: 38.105159759521484px;
}
svg .svg-elem-4 {
stroke-dashoffset: 175.18072509765625px;
stroke-dasharray: 87.59036254882812px;
transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s;
}
svg.v-enter-from .svg-elem-4,
svg.v-leave-to .svg-elem-4 {
stroke-dashoffset: 87.59036254882812px;
}
svg .svg-elem-5 {
stroke-dashoffset: 671.9447021484375px;
stroke-dasharray: 335.97235107421875px;
transition: stroke-dashoffset 1s ease-out 0.8s;
}
svg.v-enter-from .svg-elem-5,
svg.v-leave-to .svg-elem-5 {
stroke-dashoffset: 335.97235107421875px;
}
svg .svg-elem-6 {
stroke-dashoffset: 173.96141052246094px;
stroke-dasharray: 86.98070526123047px;
transition: stroke-dashoffset 1s ease-out 1s;
}
svg.v-enter-from .svg-elem-6,
svg.v-leave-to .svg-elem-6 {
stroke-dashoffset: 86.98070526123047px;
}
svg .svg-elem-7 {
stroke-dashoffset: 172.99151611328125px;
stroke-dasharray: 86.49575805664062px;
transition: stroke-dashoffset 1s ease-out 0.85s;
}
svg.v-enter-from .svg-elem-7,
svg.v-leave-to .svg-elem-7 {
stroke-dashoffset: 86.49575805664062px;
}
</style>

View file

@ -0,0 +1,143 @@
<script setup lang="ts">
import { computed } from 'vue'
import { useData } from 'vitepress'
const { frontmatter } = useData()
const hasFeatures = computed(() => {
return frontmatter.value.features && frontmatter.value.features.length > 0
})
interface Feature {
title?: string
details?: string
}
const features = computed<Feature[]>(() => {
return frontmatter.value.features ? frontmatter.value.features : []
})
</script>
<template>
<div v-if="hasFeatures" class="home-features">
<div class="wrapper">
<div class="container">
<div class="features">
<section
v-for="(feature, index) in features"
:key="index"
class="feature"
>
<h2 class="title" v-if="feature.title">{{ feature.title }}</h2>
<p class="details" v-if="feature.details">{{ feature.details }}</p>
</section>
</div>
</div>
</div>
</div>
</template>
<style scoped>
.home-features {
margin: 0 auto;
padding: 2.5rem 0 2.75rem;
max-width: 960px;
}
.home-hero + .home-features {
padding-top: 0;
}
@media (min-width: 420px) {
.home-features {
padding: 3.25rem 0 3.5rem;
}
.home-hero + .home-features {
padding-top: 0;
}
}
@media (min-width: 720px) {
.home-features {
padding-right: 1.5rem;
padding-left: 1.5rem;
}
}
.wrapper {
padding: 0 1.5rem;
}
.home-hero + .home-features .wrapper {
border-top: 1px solid var(--c-divider);
padding-top: 2.5rem;
}
@media (min-width: 420px) {
.home-hero + .home-features .wrapper {
padding-top: 3.25rem;
}
}
@media (min-width: 720px) {
.wrapper {
padding-right: 0;
padding-left: 0;
}
}
.container {
margin: 0 auto;
max-width: 392px;
}
@media (min-width: 720px) {
.container {
max-width: 960px;
}
}
.features {
display: flex;
flex-wrap: wrap;
margin: -20px -24px;
}
.feature {
flex-shrink: 0;
padding: 20px 24px;
width: 100%;
}
@media (min-width: 720px) {
.feature {
width: calc(100% / 3);
}
}
.title {
margin: 0;
border-bottom: 0;
line-height: 1.4;
font-size: 1.25rem;
font-weight: 500;
}
@media (min-width: 420px) {
.title {
font-size: 1.4rem;
}
}
.details {
margin: 0;
line-height: 1.6;
font-size: 1rem;
color: var(--c-text-light);
}
.title + .details {
padding-top: 0.25rem;
}
</style>

View file

@ -0,0 +1,50 @@
<script setup lang="ts">
import { useData } from 'vitepress'
const { frontmatter } = useData()
</script>
<template>
<footer v-if="frontmatter.footer" class="footer">
<div class="container">
<p class="text">{{ frontmatter.footer }}</p>
</div>
</footer>
</template>
<style scoped>
.footer {
margin: 0 auto;
max-width: 960px;
}
@media (min-width: 720px) {
.footer {
padding: 0 1.5rem;
}
}
.container {
padding: 2rem 1.5rem 2.25rem;
}
.home-hero + .footer .container,
.home-features + .footer .container,
.home-content + .footer .container {
border-top: 1px solid var(--c-divider);
}
@media (min-width: 420px) {
.container {
padding: 3rem 1.5rem 3.25rem;
}
}
.text {
margin: 0;
text-align: center;
line-height: 1.4;
font-size: 0.9rem;
color: var(--c-text-light);
}
</style>

View file

@ -0,0 +1,161 @@
<script setup lang="ts">
import { computed } from 'vue'
import { useData, withBase } from 'vitepress'
import NavLink from './NavLink.vue'
const { site, frontmatter } = useData()
const showHero = computed(() => {
const { heroImage, heroText, tagline, actionLink, actionText } =
frontmatter.value
return heroImage || heroText || tagline || (actionLink && actionText)
})
const heroText = computed(() => frontmatter.value.heroText || site.value.title)
const tagline = computed(
() => frontmatter.value.tagline || site.value.description
)
</script>
<template>
<header v-if="showHero" class="home-hero">
<figure v-if="frontmatter.heroImage" class="figure">
<img
class="image"
:src="withBase(frontmatter.heroImage)"
:alt="frontmatter.heroAlt"
/>
</figure>
<h1 v-if="heroText" id="main-title" class="title">{{ heroText }}</h1>
<p v-if="tagline" class="tagline">{{ tagline }}</p>
<NavLink
v-if="frontmatter.actionLink && frontmatter.actionText"
:item="{ link: frontmatter.actionLink, text: frontmatter.actionText }"
class="action"
/>
<NavLink
v-if="frontmatter.altActionLink && frontmatter.altActionText"
:item="{
link: frontmatter.altActionLink,
text: frontmatter.altActionText
}"
class="action alt"
/>
</header>
</template>
<style scoped>
.home-hero {
margin: 2.5rem 0 2.75rem;
padding: 0 1.5rem;
text-align: center;
}
@media (min-width: 420px) {
.home-hero {
margin: 3.5rem 0;
}
}
@media (min-width: 720px) {
.home-hero {
margin: 4rem 0 4.25rem;
}
}
.figure {
padding: 0 1.5rem;
}
.image {
display: block;
margin: 0 auto;
width: auto;
max-width: 100%;
max-height: 280px;
}
.title {
margin-top: 1.5rem;
font-size: 2rem;
}
@media (min-width: 420px) {
.title {
font-size: 3rem;
}
}
@media (min-width: 720px) {
.title {
margin-top: 2rem;
}
}
.tagline {
margin: 0;
margin-top: 0.25rem;
line-height: 1.3;
font-size: 1.2rem;
color: var(--c-text-light);
}
@media (min-width: 420px) {
.tagline {
line-height: 1.2;
font-size: 1.6rem;
}
}
.action {
margin-top: 1.5rem;
display: inline-block;
}
.action.alt {
margin-left: 1.5rem;
}
@media (min-width: 420px) {
.action {
margin-top: 2rem;
display: inline-block;
}
}
.action :deep(.item) {
display: inline-block;
border-radius: 6px;
padding: 0 20px;
line-height: 44px;
font-size: 1rem;
font-weight: 500;
color: var(--c-bg);
background-color: var(--c-brand);
border: 2px solid var(--c-brand);
transition: background-color 0.1s ease;
}
.action.alt :deep(.item) {
background-color: var(--c-bg);
color: var(--c-brand);
}
.action :deep(.item:hover) {
text-decoration: none;
color: var(--c-bg);
background-color: var(--c-brand-light);
}
@media (min-width: 420px) {
.action :deep(.item) {
padding: 0 24px;
line-height: 52px;
font-size: 1.2rem;
font-weight: 500;
}
}
</style>

View file

@ -0,0 +1,100 @@
<script setup lang="ts">
import { computed, toRefs } from 'vue'
import { useRoute, withBase } from 'vitepress'
import { useNavLink } from '../composables/navLink'
import OutboundLink from './icons/OutboundLink.vue'
const props = defineProps<{
item: {
text: string
target?: string
rel?: string
ariaLabel?: string
activeMatch?: string
link: string
}
}>()
const propsRefs = toRefs(props)
const route = useRoute()
const linkProps = computed(() => {
const routePath = normalizePath(`/${route.data.relativePath}`)
let active = false
if (propsRefs.item.value.activeMatch) {
active = new RegExp(propsRefs.item.value.activeMatch).test(routePath)
} else {
const itemPath = normalizePath(propsRefs.item.value.link)
active =
itemPath === '/'
? itemPath === routePath
: routePath.startsWith(itemPath)
}
return {
class: {
active
},
href: withBase(propsRefs.item.value.link),
target: propsRefs.item.value.target || null,
rel: propsRefs.item.value.rel || null,
'aria-label': propsRefs.item.value.ariaLabel
}
})
function normalizePath(path: string): string {
return path
.replace(/#.*$/, '')
.replace(/\?.*$/, '')
.replace(/\.(html|md)$/, '')
.replace(/\/index$/, '/')
}
</script>
<template>
<div class="nav-link">
<a class="item" v-bind="linkProps">
{{ item.text }}
</a>
</div>
</template>
<style scoped>
.item {
display: block;
padding: 0 1.5rem;
line-height: 36px;
font-size: 1rem;
font-weight: 600;
color: var(--c-text);
white-space: nowrap;
}
.item:hover,
.item.active {
text-decoration: none;
color: var(--c-brand);
}
.item.external:hover {
border-bottom-color: transparent;
color: var(--c-text);
}
@media (min-width: 720px) {
.item {
border-bottom: 2px solid transparent;
padding: 0;
line-height: 24px;
font-size: 0.9rem;
font-weight: 500;
}
.item:hover,
.item.active {
border-bottom-color: var(--c-brand);
color: var(--c-text);
}
}
</style>

View file

@ -1,6 +1,8 @@
import DefaultTheme from 'vitepress/theme'
import './vars.css'
import DefaultTheme from 'vitepress/theme';
import Layout from './Layout.vue';
import './vars.css';
export default {
...DefaultTheme
}
...DefaultTheme,
Layout
};