feat: move app root into body element
This commit is contained in:
Sebin Nyshkim
parent
3eddad19c9
commit
f2463b6163
2 changed files with 61 additions and 82 deletions
|
|
@ -8,12 +8,10 @@
|
|||
<link rel="<%= htmlWebpackPlugin.options.links.icon.rel %>" href="<%= htmlWebpackPlugin.options.links.icon.href %>" type="<%= htmlWebpackPlugin.options.links.icon.type %>">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
</head>
|
||||
<body>
|
||||
<body id="app">
|
||||
<noscript>
|
||||
<strong>Sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div class="bubbles"></div>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
137
src/App.vue
137
src/App.vue
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<header>
|
||||
<ref-header>
|
||||
<img
|
||||
class="nav-logo"
|
||||
src="@/assets/sebin-smug-icon.png"
|
||||
|
|
@ -7,31 +7,28 @@
|
|||
/>
|
||||
|
||||
<navigation :routes="routes" />
|
||||
</header>
|
||||
</ref-header>
|
||||
|
||||
<main>
|
||||
<router-view />
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="footer__copyright">
|
||||
v{{ version }} © {{ new Date().getFullYear() }} Sebin Nyshkim
|
||||
</div>
|
||||
<ul class="footer__linklist">
|
||||
<li class="footer__linkitem" v-for="(link, idx) in links" :key="idx">
|
||||
<a :href="link.href" class="footer__link">
|
||||
{{ link.text }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</footer>
|
||||
<ref-footer>
|
||||
<p>v{{ version }} © {{ new Date().getFullYear() }} Sebin Nyshkim</p>
|
||||
<p>
|
||||
Background Pattern ©
|
||||
<a href="https://www.svgbackgrounds.com/">SVG Backgrounds</a>
|
||||
</p>
|
||||
</ref-footer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Navigation from "@/components/Navigation.vue";
|
||||
import RefHeader from "@/components/Header.vue";
|
||||
import RefFooter from "@/components/Footer.vue";
|
||||
|
||||
export default {
|
||||
components: { Navigation },
|
||||
components: { Navigation, RefHeader, RefFooter },
|
||||
data() {
|
||||
return {
|
||||
nsfw: false,
|
||||
|
|
@ -76,7 +73,6 @@ export default {
|
|||
@import "~normalize.css";
|
||||
|
||||
#app {
|
||||
padding: 5em 0 0 0;
|
||||
color: $copy-color;
|
||||
font-size: 1.125em;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
|
@ -87,38 +83,54 @@ export default {
|
|||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
@media (min-width: 60em) {
|
||||
padding: 5em 0 7em 0;
|
||||
}
|
||||
|
||||
@include mq-bigscreen {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
position: relative;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
&:before {
|
||||
background: url("/subtle-prism.svg");
|
||||
mix-blend-mode: multiply;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
position: fixed;
|
||||
top: env(safe-area-inset-top);
|
||||
right: env(safe-area-inset-right);
|
||||
left: env(safe-area-inset-left);
|
||||
&:after {
|
||||
background: radial-gradient(
|
||||
circle at bottom right,
|
||||
$bg-color-lighter 5%,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at top left,
|
||||
$bg-color-light 5%,
|
||||
$bg-color-dark 100%
|
||||
);
|
||||
|
||||
z-index: 2;
|
||||
z-index: -2;
|
||||
|
||||
max-width: 70em;
|
||||
margin: 1em;
|
||||
padding: 0.5em;
|
||||
border-radius: 0.5em;
|
||||
box-shadow: 0.125em 0.125em 0.5em rgba(0, 0, 0, 0.7);
|
||||
|
||||
background-color: darken($bg-color-dark, 5%);
|
||||
|
||||
@media (min-width: 90em) {
|
||||
margin: 1em auto;
|
||||
@include theme(dark) {
|
||||
background: radial-gradient(
|
||||
circle at bottom right,
|
||||
darken($bg-color-lighter, 30%) 5%,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at top left,
|
||||
darken($bg-color-light, 10%) 5%,
|
||||
darken($bg-color-dark, 10%) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -128,50 +140,19 @@ header {
|
|||
height: 2em;
|
||||
border: 0.125em solid #fff;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0.125em 0.125em 0.5em rgba(0, 0, 0, 0.7);
|
||||
box-shadow: 0.125em 0.125em 0.5em rgba(#000, 0.7);
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 0.75em 0;
|
||||
background-color: $bg-color-light;
|
||||
text-align: center;
|
||||
|
||||
@media (orientation: landscape) {
|
||||
padding: env(safe-area-inset-bottom) 0;
|
||||
main {
|
||||
min-height: 100vh;
|
||||
padding: 2em 0 1em 0;
|
||||
}
|
||||
|
||||
@include mq-desktop {
|
||||
padding: 0.75em 0;
|
||||
}
|
||||
|
||||
@media (min-width: 60em) {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&__copyright {
|
||||
.footer p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__linklist {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__linkitem {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&__link {
|
||||
color: $copy-color;
|
||||
padding: 0.5em 0.75em;
|
||||
& + p {
|
||||
margin: 0.5em auto 0 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue