generated from alphane/template
Adding a ton of stuff
This commit is contained in:
@@ -1,22 +1,232 @@
|
||||
<template>
|
||||
<v-app>
|
||||
<PublicAppBar />
|
||||
<PublicAppBar class="mb-2" />
|
||||
|
||||
<v-main>
|
||||
<v-container
|
||||
fluid
|
||||
:class="mobile ? 'pa-2' : 'pa-4'"
|
||||
>
|
||||
<router-view />
|
||||
<div class="public-content mt-4">
|
||||
<v-row class="public-row">
|
||||
<v-col
|
||||
cols="12"
|
||||
md="3"
|
||||
class="sidebar-col"
|
||||
>
|
||||
<aside class="sidebar">
|
||||
<nav
|
||||
class="sidebar-nav mb-6"
|
||||
aria-label="Primary"
|
||||
>
|
||||
<RouterLink
|
||||
:to="{ name: 'HomePage' }"
|
||||
class="sidebar-nav-link"
|
||||
>
|
||||
<span>Home</span
|
||||
><span :class="{ 'text-warning': route.name === 'HomePage' }">~/</span>
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
:to="{ name: 'BlogPage' }"
|
||||
class="sidebar-nav-link"
|
||||
>
|
||||
<span>Blog</span
|
||||
><span :class="{ 'text-warning': route.name === 'BlogPage' }">~/blog</span>
|
||||
</RouterLink>
|
||||
</nav>
|
||||
</aside>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<router-view />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</v-container>
|
||||
</v-main>
|
||||
|
||||
<footer class="public-footer">
|
||||
<span>© {{ currentYear }} Caleb Burke</span>
|
||||
|
||||
<div class="social-links">
|
||||
<a
|
||||
href="https://github.com/burkkyy"
|
||||
class="social-link"
|
||||
title="GitHub"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<v-icon size="24">mdi-github</v-icon>
|
||||
</a>
|
||||
<a
|
||||
href="https://gitea.burke.host/burkkyy"
|
||||
class="social-link"
|
||||
title="Gitea"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<svg
|
||||
class="social-svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Gitea</title>
|
||||
<path
|
||||
d="M4.209 4.603c-.247 0-.525.02-.84.088-.333.07-1.28.283-2.054 1.027C-.403 7.25.035 9.685.089 10.052c.065.446.263 1.687 1.21 2.768 1.749 2.141 5.513 2.092 5.513 2.092s.462 1.103 1.168 2.119c.955 1.263 1.936 2.248 2.89 2.367 2.406 0 7.212-.004 7.212-.004s.458.004 1.08-.394c.535-.324 1.013-.893 1.013-.893s.492-.527 1.18-1.73c.21-.37.385-.729.538-1.068 0 0 2.107-4.471 2.107-8.823-.042-1.318-.367-1.55-.443-1.627-.156-.156-.366-.153-.366-.153s-4.475.252-6.792.306c-.508.011-1.012.023-1.512.027v4.474l-.634-.301c0-1.39-.004-4.17-.004-4.17-1.107.016-3.405-.084-3.405-.084s-5.399-.27-5.987-.324c-.187-.011-.401-.032-.648-.032zm.354 1.832h.111s.271 2.269.6 3.597C5.549 11.147 6.22 13 6.22 13s-.996-.119-1.641-.348c-.99-.324-1.409-.714-1.409-.714s-.73-.511-1.096-1.52C1.444 8.73 2.021 7.7 2.021 7.7s.32-.859 1.47-1.145c.395-.106.863-.12 1.072-.12zm8.33 2.554c.26.003.509.127.509.127l.868.422-.529 1.075a.686.686 0 0 0-.614.359.685.685 0 0 0 .072.756l-.939 1.924a.69.69 0 0 0-.66.527.687.687 0 0 0 .347.763.686.686 0 0 0 .867-.206.688.688 0 0 0-.069-.882l.916-1.874a.667.667 0 0 0 .237-.02.657.657 0 0 0 .271-.137 8.826 8.826 0 0 1 1.016.512.761.761 0 0 1 .286.282c.073.21-.073.569-.073.569-.087.29-.702 1.55-.702 1.55a.692.692 0 0 0-.676.477.681.681 0 1 0 1.157-.252c.073-.141.141-.282.214-.431.19-.397.515-1.16.515-1.16.035-.066.218-.394.103-.814-.095-.435-.48-.638-.48-.638-.467-.301-1.116-.58-1.116-.58s0-.156-.042-.27a.688.688 0 0 0-.148-.241l.516-1.062 2.89 1.401s.48.218.583.619c.073.282-.019.534-.069.657-.24.587-2.1 4.317-2.1 4.317s-.232.554-.748.588a1.065 1.065 0 0 1-.393-.045l-.202-.08-4.31-2.1s-.417-.218-.49-.596c-.083-.31.104-.691.104-.691l2.073-4.272s.183-.37.466-.497a.855.855 0 0 1 .35-.077z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
href="https://discord.com/users/burkkyy"
|
||||
class="social-link"
|
||||
title="Discord"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<svg
|
||||
class="social-svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Discord</title>
|
||||
<path
|
||||
d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
href="https://www.linkedin.com/in/calebburke91/"
|
||||
class="social-link"
|
||||
title="LinkedIn"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<v-icon size="24">mdi-linkedin</v-icon>
|
||||
</a>
|
||||
<a
|
||||
href="mailto:calebburke91@gmail.com"
|
||||
class="social-link"
|
||||
title="Gmail"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<v-icon size="24">mdi-gmail</v-icon>
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useDisplay } from "vuetify"
|
||||
import { useRoute } from "vue-router"
|
||||
import { DateTime } from "luxon"
|
||||
|
||||
import PublicAppBar from "@/components/layout/PublicAppBar.vue"
|
||||
|
||||
const { mobile } = useDisplay()
|
||||
const route = useRoute()
|
||||
const currentYear = DateTime.local().year
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.public-content {
|
||||
max-width: 1300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.public-row {
|
||||
margin: -20px;
|
||||
}
|
||||
|
||||
.public-row > :deep(.v-col) {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: sticky;
|
||||
top: 24px;
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.sidebar-nav-link {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 10px;
|
||||
margin: 0 -10px;
|
||||
border-radius: 6px;
|
||||
font-family: ui-monospace, Menlo, Monaco, Consolas, "Ubuntu Mono", monospace;
|
||||
font-size: 14px;
|
||||
color: rgb(var(--v-theme-textSecondary));
|
||||
text-decoration: none;
|
||||
transition:
|
||||
background-color 0.15s ease,
|
||||
color 0.15s ease;
|
||||
}
|
||||
|
||||
.sidebar-nav-link:hover,
|
||||
.sidebar-nav-link.router-link-active {
|
||||
background-color: rgb(var(--v-theme-hoverColor));
|
||||
color: rgb(var(--v-theme-textPrimary));
|
||||
}
|
||||
|
||||
.social-links {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.social-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: rgb(var(--v-theme-textSecondary));
|
||||
text-decoration: none;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
.social-link:hover {
|
||||
color: rgb(var(--v-theme-primary));
|
||||
}
|
||||
|
||||
.social-svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.public-footer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid rgb(var(--v-theme-borderColor));
|
||||
font-family: ui-monospace, Menlo, Monaco, Consolas, "Ubuntu Mono", monospace;
|
||||
font-size: 12px;
|
||||
color: rgb(var(--v-theme-textSecondary));
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.sidebar {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.public-footer {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user