adding latest
This commit is contained in:
16
firebase.md
16
firebase.md
@@ -919,7 +919,7 @@ If you set a row to use more than 12 columns, it will overfill on to the next li
|
||||
|
||||
<!-- TODO Document using align-sm-end for responsive content layouts -->
|
||||
|
||||
<!-- ? should this be merged with the previous section on mobile layouts? -->
|
||||
<!-- ? should this be merged with the previous section on mobile layouts -->
|
||||
|
||||
## CSS Spacing
|
||||
|
||||
@@ -1007,3 +1007,17 @@ Using the `:class` prop:
|
||||
:class="alignOnViewport"
|
||||
></div>
|
||||
```
|
||||
|
||||
## SVG
|
||||
|
||||
### Viewbox
|
||||
|
||||
<https://css-tricks.com/scale-svg/>
|
||||
|
||||
Viewbox is an attribute on the `<svg>` element and has 4 components: x, y, height, width.
|
||||
|
||||
The x and y set the coordinate system to use for the top left corner of the viewport. Simple scaling can be done by setting these to 0,0, but you could set them to something else (like central) to make drawing circles using radius easier, or for easier transforming/rotating.
|
||||
|
||||
Take for example `viewBox="-50 -50 100 100"` - this means the top left corner has coordinates -50,-50, so the bottom right corner has coordinates 50,50. Drawing a circle centered around 0,0 with radius 50 it will fill the screen.
|
||||
|
||||
Setting a viewbox allows you to set the box that the svg element should draw in. This will allow you to then control the width and height to scale the element properly.
|
||||
|
||||
9
src/assets/images/background.svg
Normal file
9
src/assets/images/background.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 297 KiB |
@@ -3,6 +3,7 @@
|
||||
<v-app-bar
|
||||
flat
|
||||
app
|
||||
hide-on-scroll
|
||||
color="#EEEEEE"
|
||||
v-if="!this.$store.getters.fullScreen"
|
||||
>
|
||||
@@ -16,7 +17,23 @@
|
||||
</router-link>
|
||||
</v-col>
|
||||
<v-col cols="4" class="d-flex justify-end align-self-center">
|
||||
<router-link :to="{ name: 'Triangle'}" class="routerLink ma-0 pr-2">
|
||||
<router-link
|
||||
:to="{ name: 'Playground' }"
|
||||
class="routerLink ma-0 pr-2"
|
||||
>
|
||||
<p class="mb-0 underline">
|
||||
Playground
|
||||
</p>
|
||||
</router-link>
|
||||
<router-link
|
||||
:to="{ name: 'Backgrounds' }"
|
||||
class="routerLink ma-0 pr-2"
|
||||
>
|
||||
<p class="mb-0 underline">
|
||||
Backgrounds
|
||||
</p>
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'Triangle' }" class="routerLink ma-0 pr-2">
|
||||
<p class="mb-0 underline">
|
||||
Triangle
|
||||
</p>
|
||||
|
||||
@@ -36,6 +36,18 @@ const routes = [
|
||||
name: "Triangle",
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "triangle" */ "../views/Triangle.vue")
|
||||
},
|
||||
{
|
||||
path: "/backgrounds",
|
||||
name: "Backgrounds",
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "backgrounds" */ "../views/Backgrounds.vue")
|
||||
},
|
||||
{
|
||||
path: "/playground",
|
||||
name: "Playground",
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "playground" */ "../views/Playground.vue")
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
162
src/views/Backgrounds.vue
Normal file
162
src/views/Backgrounds.vue
Normal file
@@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<h1>Backgrounds</h1>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 1440 320"
|
||||
style="width: 500px;"
|
||||
>
|
||||
<path
|
||||
fill="#0099ff"
|
||||
fill-opacity="1"
|
||||
d="M0,0L48,42.7C96,85,192,171,288,176C384,181,480,107,576,101.3C672,96,768,160,864,154.7C960,149,1056,75,1152,85.3C1248,96,1344,192,1392,240L1440,288L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
|
||||
></path>
|
||||
</svg>
|
||||
</v-row>
|
||||
<v-row class="mt-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
|
||||
<path
|
||||
fill="#0099ff"
|
||||
fill-opacity="0.5"
|
||||
d="M0,0L48,42.7C96,85,192,171,288,176C384,181,480,107,576,101.3C672,96,768,160,864,154.7C960,149,1056,75,1152,85.3C1248,96,1344,192,1392,240L1440,288L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
|
||||
transform="rotate(-10 50 100)"
|
||||
></path>
|
||||
<path
|
||||
fill="#0099ff"
|
||||
fill-opacity="0.6"
|
||||
d="M0,0L48,42.7C96,85,192,171,288,176C384,181,480,107,576,101.3C672,96,768,160,864,154.7C960,149,1056,75,1152,85.3C1248,96,1344,192,1392,240L1440,288L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
|
||||
transform="rotate(10 50 100)"
|
||||
></path>
|
||||
</svg>
|
||||
</v-row>
|
||||
</v-container>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<svg
|
||||
width="200"
|
||||
height="200"
|
||||
viewBox="0 0 600 600"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g transform="translate(300,300)">
|
||||
<path
|
||||
d="M154.5,-209.4C196.2,-182.4,223.2,-131.8,227.9,-82.3C232.7,-32.8,215.3,15.8,199.3,64.8C183.4,113.8,169,163.3,136,199.9C103.1,236.5,51.5,260.3,3.5,255.4C-44.5,250.5,-89,217.1,-129.7,183C-170.4,148.9,-207.4,114.2,-226.4,70.2C-245.4,26.2,-246.3,-27.1,-228.4,-71.7C-210.5,-116.4,-173.7,-152.4,-132.5,-179.6C-91.3,-206.7,-45.7,-224.8,5.4,-232.2C56.4,-239.7,112.9,-236.3,154.5,-209.4Z"
|
||||
fill="#FFB4BC"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-img src="https://cdn.vuetifyjs.com/images/cards/server-room.jpg">
|
||||
<v-col class="fill-height d-flex align-center justify-center">
|
||||
<h1 class="display-4 black--text">Text</h1>
|
||||
</v-col>
|
||||
</v-img>
|
||||
</v-row>
|
||||
</v-container>
|
||||
<v-container fluid class="newtriangle">
|
||||
<v-row class="fill-height d-flex align-center">
|
||||
<v-col class="">
|
||||
<h1 class="display-2 white--text">
|
||||
CSS polygon background with clip-path.
|
||||
</h1>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col class="fill-height d-flex justify-center">
|
||||
<svg
|
||||
width="120"
|
||||
height="120"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs>
|
||||
<radialGradient
|
||||
id="Gradient"
|
||||
cx="0.5"
|
||||
cy="0.5"
|
||||
r="0.5"
|
||||
fx="0.25"
|
||||
fy="0.25"
|
||||
>
|
||||
<stop offset="0%" stop-color="red" />
|
||||
<stop offset="100%" stop-color="blue" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
|
||||
<rect
|
||||
x="10"
|
||||
y="10"
|
||||
rx="15"
|
||||
ry="15"
|
||||
width="100"
|
||||
height="100"
|
||||
fill="url(#Gradient)"
|
||||
stroke="black"
|
||||
stroke-width="2"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="60"
|
||||
cy="60"
|
||||
r="50"
|
||||
fill="transparent"
|
||||
stroke="white"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<circle cx="35" cy="35" r="2" fill="white" stroke="white" />
|
||||
<circle cx="60" cy="60" r="2" fill="white" stroke="white" />
|
||||
<text
|
||||
x="38"
|
||||
y="40"
|
||||
fill="white"
|
||||
font-family="sans-serif"
|
||||
font-size="10pt"
|
||||
>
|
||||
(fx,fy)
|
||||
</text>
|
||||
<text
|
||||
x="63"
|
||||
y="63"
|
||||
fill="white"
|
||||
font-family="sans-serif"
|
||||
font-size="10pt"
|
||||
>
|
||||
(cx,cy)
|
||||
</text>
|
||||
</svg>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.newtriangle {
|
||||
width: 105vw;
|
||||
height: 50vh;
|
||||
background-image: radial-gradient(
|
||||
circle farthest-corner at 7.5% 54.1%,
|
||||
rgba(0, 0, 0, 1) 0%,
|
||||
rgba(39, 0, 89, 1) 74.9%
|
||||
);
|
||||
-webkit-clip-path: polygon(0 0, 100% 35%, 100% 65%, 0% 100%);
|
||||
clip-path: polygon(0 0, 100% 35%, 100% 65%, 0% 100%);
|
||||
}
|
||||
</style>
|
||||
41
src/views/Playground.vue
Normal file
41
src/views/Playground.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-container fluid fill-height class="mr-0 pr-0 mt-0 pt-0">
|
||||
<v-img
|
||||
src="../assets/images/background.svg"
|
||||
height="100vh"
|
||||
width="auto"
|
||||
contain="false"
|
||||
position="bottom 0px right 0px"
|
||||
></v-img>
|
||||
</v-container>
|
||||
<v-container>
|
||||
<div style="position: relative; z-index: 1">
|
||||
<v-row>
|
||||
<v-col>
|
||||
<h1 class="display-2">Playground</h1>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<h1 class="display-2">Playground</h1>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<h1 class="display-2">Playground</h1>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col> </v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</v-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -1,92 +1,96 @@
|
||||
<template>
|
||||
<v-container fluid class="pa-0">
|
||||
<v-row class="d-flex newtriangle" style="position: absolute; z-index: 1;">
|
||||
<v-col
|
||||
class="d-flex align-center pt-0 ml-8"
|
||||
style="position: relative; z-index: 10;"
|
||||
>
|
||||
<v-card flat color="rgb(0, 0, 0, 0)">
|
||||
<h1 class="display" style="position: relative;">
|
||||
Welcome to Savvy Firebox Tutorial
|
||||
</h1>
|
||||
<v-btn
|
||||
x-large
|
||||
color="primary"
|
||||
style="position: relative; z-index: 10;"
|
||||
class="lighten-1"
|
||||
>Click Here</v-btn
|
||||
>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row class="d-flex" style="position: relative; height: 50vh;"> </v-row>
|
||||
<v-row class="d-flex justify-space-around">
|
||||
<v-col class="d-flex justify-center" md="6" xs="12">
|
||||
<v-card
|
||||
flat
|
||||
color="rgb(0, 0, 0, 0)"
|
||||
class="d-flex align-center justify-center flex-column pa-6"
|
||||
data-aos="zoom-in"
|
||||
data-aos-duration="3000"
|
||||
<div>
|
||||
<v-container fluid class="pa-0">
|
||||
<v-row class="d-flex newtriangle" style="position: absolute; z-index: 1;">
|
||||
<v-col
|
||||
class="d-flex align-center pt-0 ml-8"
|
||||
style="position: relative; z-index: 10;"
|
||||
>
|
||||
<v-card-title>
|
||||
<span class="display-2 font-weight-bold">Learn more</span>
|
||||
</v-card-title>
|
||||
<v-card-text class="d-flex justify-center flex-column align-center">
|
||||
<transition name="bounce">
|
||||
<v-card flat color="rgb(0, 0, 0, 0)">
|
||||
<h1 class="display" style="position: relative;">
|
||||
Welcome to Savvy Firebox Tutorial
|
||||
</h1>
|
||||
<v-btn
|
||||
x-large
|
||||
color="primary"
|
||||
style="position: relative; z-index: 10;"
|
||||
class="lighten-1"
|
||||
>Click Here</v-btn
|
||||
>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
<v-container>
|
||||
<v-row class="d-flex" style="position: relative; height: 50vh;"> </v-row>
|
||||
<v-row class="d-flex justify-space-around">
|
||||
<v-col class="d-flex justify-center" md="6" xs="12">
|
||||
<v-card
|
||||
flat
|
||||
color="rgb(0, 0, 0, 0)"
|
||||
class="d-flex align-center justify-center flex-column pa-6"
|
||||
data-aos="zoom-in"
|
||||
data-aos-duration="3000"
|
||||
>
|
||||
<v-card-title>
|
||||
<span class="display-2 font-weight-bold">Learn more</span>
|
||||
</v-card-title>
|
||||
<v-card-text class="d-flex justify-center flex-column align-center">
|
||||
<transition name="bounce">
|
||||
<v-img
|
||||
src="@/assets/images/11-Casino chip.png"
|
||||
max-height="150px"
|
||||
max-width="150px"
|
||||
class="mb-5"
|
||||
></v-img>
|
||||
</transition>
|
||||
<span
|
||||
class="d-flex justify-center display body-1"
|
||||
style="color: black;"
|
||||
>
|
||||
More information about what we do and why.
|
||||
</span>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-btn color="secondary" medium>Click here</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col class="d-flex justify-center" md="6" xs="12">
|
||||
<v-card
|
||||
flat
|
||||
color="rgb(0, 0, 0, 0)"
|
||||
class="d-flex align-center justify-center flex-column pa-6"
|
||||
data-aos="test-roll"
|
||||
data-aos-duration="3000"
|
||||
data-aos-easing="new-easing"
|
||||
>
|
||||
<v-card-title>
|
||||
<span class="display-2 font-weight-bold">See more</span>
|
||||
</v-card-title>
|
||||
<v-card-text class="d-flex flex-column justify-center align-center">
|
||||
<v-img
|
||||
src="@/assets/images/11-Casino chip.png"
|
||||
src="@/assets/images/12-Casino chip.png"
|
||||
max-height="150px"
|
||||
max-width="150px"
|
||||
class="mb-5"
|
||||
></v-img>
|
||||
</transition>
|
||||
<span
|
||||
class="d-flex justify-center display body-1"
|
||||
style="color: black;"
|
||||
>
|
||||
More information about what we do and why.
|
||||
</span>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-btn color="secondary" medium>Click here</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col class="d-flex justify-center" md="6" xs="12">
|
||||
<v-card
|
||||
flat
|
||||
color="rgb(0, 0, 0, 0)"
|
||||
class="d-flex align-center justify-center flex-column pa-6"
|
||||
data-aos="test-roll"
|
||||
data-aos-duration="3000"
|
||||
data-aos-easing="new-easing"
|
||||
>
|
||||
<v-card-title>
|
||||
<span class="display-2 font-weight-bold">See more</span>
|
||||
</v-card-title>
|
||||
<v-card-text class="d-flex flex-column justify-center align-center">
|
||||
<v-img
|
||||
src="@/assets/images/12-Casino chip.png"
|
||||
max-height="150px"
|
||||
max-width="150px"
|
||||
class="mb-5"
|
||||
></v-img>
|
||||
<span
|
||||
class="d-flex justify-center display body-1"
|
||||
style="color: black;"
|
||||
>
|
||||
Additional things about what it is.
|
||||
</span>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-btn color="secondary" medium>Click here</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<!-- <v-col md="1" xs="0"></v-col> -->
|
||||
</v-row>
|
||||
</v-container>
|
||||
<span
|
||||
class="d-flex justify-center display body-1"
|
||||
style="color: black;"
|
||||
>
|
||||
Additional things about what it is.
|
||||
</span>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-btn color="secondary" medium>Click here</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<!-- <v-col md="1" xs="0"></v-col> -->
|
||||
</v-row>
|
||||
</v-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-container fluid class="d-flex align-center" style="height: 100vh;">
|
||||
<v-container fluid fill-height class="d-flex align-center justify-center">
|
||||
<v-row>
|
||||
<v-col
|
||||
sm="6"
|
||||
|
||||
Reference in New Issue
Block a user