SebinNyshkim/sebin-reference
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: move app root into body element

Browse source
This commit is contained in:
Sebin Nyshkim 2022-01-28 23:47:49 +01:00
parent 3eddad19c9
commit f2463b6163
2 changed files with 61 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

4
public/index.html
View file

@ -8,12 +8,10 @@
<link rel="<%= htmlWebpackPlugin.options.links.icon.rel %>" href="<%= htmlWebpackPlugin.options.links.icon.href %>" type="<%= htmlWebpackPlugin.options.links.icon.type %>"> <link rel="<%= htmlWebpackPlugin.options.links.icon.rel %>" href="<%= htmlWebpackPlugin.options.links.icon.href %>" type="<%= htmlWebpackPlugin.options.links.icon.type %>">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
</head> </head>
<body> <body id="app">
<noscript> <noscript>
<strong>Sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>Sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript> </noscript>
<div class="bubbles"></div>
<div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body> </body>
</html> </html>

135
src/App.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<header> <ref-header>
<img <img
class="nav-logo" class="nav-logo"
src="@/assets/sebin-smug-icon.png" src="@/assets/sebin-smug-icon.png"
@ -7,31 +7,28 @@
/> />
<navigation :routes="routes" /> <navigation :routes="routes" />
</header> </ref-header>
<main> <main>
<router-view /> <router-view />
</main> </main>
<footer class="footer"> <ref-footer>
<div class="footer__copyright"> <p>v{{ version }} &copy; {{ new Date().getFullYear() }} Sebin Nyshkim</p>
v{{ version }} © {{ new Date().getFullYear() }} Sebin Nyshkim <p>
</div> Background Pattern &copy;
<ul class="footer__linklist"> <a href="https://www.svgbackgrounds.com/">SVG Backgrounds</a>
<li class="footer__linkitem" v-for="(link, idx) in links" :key="idx"> </p>
<a :href="link.href" class="footer__link"> </ref-footer>
{{ link.text }}
</a>
</li>
</ul>
</footer>
</template> </template>
<script> <script>
import Navigation from "@/components/Navigation.vue"; import Navigation from "@/components/Navigation.vue";
import RefHeader from "@/components/Header.vue";
import RefFooter from "@/components/Footer.vue";
export default { export default {
components: { Navigation }, components: { Navigation, RefHeader, RefFooter },
data() { data() {
return { return {
nsfw: false, nsfw: false,
@ -76,7 +73,6 @@ export default {
@import "~normalize.css"; @import "~normalize.css";
#app { #app {
padding: 5em 0 0 0;
color: $copy-color; color: $copy-color;
font-size: 1.125em; font-size: 1.125em;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@ -87,38 +83,54 @@ export default {
font-size: 1.25em; font-size: 1.25em;
} }
@media (min-width: 60em) {
padding: 5em 0 7em 0;
}
@include mq-bigscreen { @include mq-bigscreen {
font-size: 1.5em; font-size: 1.5em;
} }
}
header { position: relative;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
&:before,
&:after {
content: "";
position: fixed; position: fixed;
top: env(safe-area-inset-top); top: 0;
right: env(safe-area-inset-right); right: 0;
left: env(safe-area-inset-left); bottom: 0;
left: 0;
}
z-index: 2; &:before {
background: url("/subtle-prism.svg");
mix-blend-mode: multiply;
z-index: -1;
}
max-width: 70em; &:after {
margin: 1em; background: radial-gradient(
padding: 0.5em; circle at bottom right,
border-radius: 0.5em; $bg-color-lighter 5%,
box-shadow: 0.125em 0.125em 0.5em rgba(0, 0, 0, 0.7); transparent 50%
),
radial-gradient(
circle at top left,
$bg-color-light 5%,
$bg-color-dark 100%
);
background-color: darken($bg-color-dark, 5%); z-index: -2;
@media (min-width: 90em) { @include theme(dark) {
margin: 1em auto; 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; height: 2em;
border: 0.125em solid #fff; border: 0.125em solid #fff;
border-radius: 100%; 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 { main {
padding: 0.75em 0; min-height: 100vh;
background-color: $bg-color-light; padding: 2em 0 1em 0;
text-align: center; }
@media (orientation: landscape) { .footer p {
padding: env(safe-area-inset-bottom) 0;
}
@include mq-desktop {
padding: 0.75em 0;
}
@media (min-width: 60em) {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
&__copyright {
margin: 0; margin: 0;
}
&__linklist { & + p {
margin: 0; margin: 0.5em auto 0 auto;
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;
} }
} }
</style> </style>