mirror of
https://github.com/simon987/simon987.net.git
synced 2025-04-18 01:36:48 +00:00
Navigation button placeholders
This commit is contained in:
parent
1bd682cf41
commit
86d5bdda54
@ -2,8 +2,10 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<meta content="width=device-width,initial-scale=1,minimal-ui" name="viewport">
|
||||||
<title>wip</title>
|
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons">
|
||||||
|
|
||||||
|
<title>simon987.net</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|||||||
434
simon987/package-lock.json
generated
434
simon987/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -2,7 +2,7 @@
|
|||||||
"name": "simon987.net",
|
"name": "simon987.net",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"description": "A Vue.js project",
|
"description": "A Vue.js project",
|
||||||
"author": "simon987 <fortier.simon@protonmail.com>",
|
"author": "simon987 <me@simon987.net>",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
|
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
|
||||||
@ -13,9 +13,9 @@
|
|||||||
"d3": "^5.9.2",
|
"d3": "^5.9.2",
|
||||||
"lodash": "^4.17.11",
|
"lodash": "^4.17.11",
|
||||||
"pixi.js": "^4.8.7",
|
"pixi.js": "^4.8.7",
|
||||||
"vue": "^2.5.2",
|
"vue": "^2.6.10",
|
||||||
"vue-material": "^1.0.0-beta-10.2",
|
"vue-material": "^1.0.0-beta-11",
|
||||||
"vue-router": "^3.0.1"
|
"vue-router": "^3.0.6"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"autoprefixer": "^7.1.2",
|
"autoprefixer": "^7.1.2",
|
||||||
|
|||||||
@ -32,8 +32,9 @@ export default {
|
|||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
let grid = new Grid(
|
let grid = new Grid(
|
||||||
size ? size : window.innerWidth < 1000 ? 20 : 30,
|
size ? size : window.innerWidth < 1000 ? 15 : 25,
|
||||||
window.innerWidth < 1000 ? 80 : 40,
|
window.innerWidth < 1000 ? 80 : 40,
|
||||||
|
// darkTheme
|
||||||
lightTheme
|
lightTheme
|
||||||
);
|
);
|
||||||
grid.setup();
|
grid.setup();
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="content" class="md-layout md-centered">
|
<div id="content" class="md-layout">
|
||||||
<md-card class="md-layout-item md-elevation-10">
|
<md-card class="md-layout-item md-elevation-10 md-size-90">
|
||||||
<md-card-header>
|
<md-card-header>
|
||||||
<span class="md-display-4 text-mono">simon987.net<span class="vim-caret">_</span></span>
|
<span class="md-display-3 text-mono">simon987.net<span class="vim-caret">_</span></span>
|
||||||
</md-card-header>
|
</md-card-header>
|
||||||
|
|
||||||
<md-card-content>
|
<md-card-content>
|
||||||
@ -10,29 +10,69 @@
|
|||||||
accusantium quasi non.
|
accusantium quasi non.
|
||||||
</md-card-content>
|
</md-card-content>
|
||||||
|
|
||||||
<md-card-actions>
|
<div class="sections">
|
||||||
<md-button>Action</md-button>
|
<md-empty-state
|
||||||
<md-button>Action</md-button>
|
md-rounded
|
||||||
</md-card-actions>
|
md-icon="code"
|
||||||
|
md-label="Code"
|
||||||
|
md-description="Placeholder text">
|
||||||
|
</md-empty-state>
|
||||||
|
|
||||||
|
<md-empty-state
|
||||||
|
md-rounded
|
||||||
|
md-icon="edit"
|
||||||
|
md-label="Blog"
|
||||||
|
md-description="Placeholder text">
|
||||||
|
</md-empty-state>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sections-small">
|
||||||
|
<md-card md-with-hover>
|
||||||
|
<md-ripple>
|
||||||
|
<md-card-header><span class="md-title"><md-icon>code</md-icon>Code</span></md-card-header>
|
||||||
|
<md-card-content>Placeholder text</md-card-content>
|
||||||
|
</md-ripple>
|
||||||
|
</md-card>
|
||||||
|
|
||||||
|
<md-card md-with-hover>
|
||||||
|
<md-ripple>
|
||||||
|
<md-card-header><span class="md-title"><md-icon>edit</md-icon>Blog</span></md-card-header>
|
||||||
|
<md-card-content>Placeholder text</md-card-content>
|
||||||
|
</md-ripple>
|
||||||
|
</md-card>
|
||||||
|
|
||||||
|
<md-card md-with-hover>
|
||||||
|
<md-ripple>
|
||||||
|
<md-card-header><span class="md-title"><md-icon>email</md-icon>Contact</span></md-card-header>
|
||||||
|
<md-card-content>Placeholder text</md-card-content>
|
||||||
|
</md-ripple>
|
||||||
|
</md-card>
|
||||||
|
</div>
|
||||||
</md-card>
|
</md-card>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: "Jumbotron"
|
name: "Jumbotron"
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.md-card {
|
.md-card {
|
||||||
margin-top: 2em;
|
|
||||||
background-color: white;
|
background-color: white;
|
||||||
padding: 2.5em;
|
margin: 2em;
|
||||||
|
max-width: 1200px;
|
||||||
|
min-width: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-card .md-ripple {
|
||||||
|
padding: 0 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-mono {
|
.text-mono {
|
||||||
font-family: Hack, "Andale Mono", monospace;
|
font-family: Hack, "Andale Mono", monospace;
|
||||||
|
/*color: rgba(0, 0, 0, 0.87);*/
|
||||||
}
|
}
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
@ -43,9 +83,6 @@
|
|||||||
background: #f9989f;
|
background: #f9989f;
|
||||||
}
|
}
|
||||||
|
|
||||||
.md-display-4 {
|
|
||||||
}
|
|
||||||
|
|
||||||
.vim-caret {
|
.vim-caret {
|
||||||
-webkit-animation: vimCaret 1s linear infinite;
|
-webkit-animation: vimCaret 1s linear infinite;
|
||||||
-o-animation: vimCaret 1s linear infinite;
|
-o-animation: vimCaret 1s linear infinite;
|
||||||
@ -61,10 +98,10 @@
|
|||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
color: inherit;
|
color: #FF5252;
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
color: inherit;
|
color: #FF5252;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -76,10 +113,10 @@
|
|||||||
color: transparent;
|
color: transparent;
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
color: inherit;
|
color: #FF5252;
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
color: inherit;
|
color: #FF5252;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -91,10 +128,71 @@
|
|||||||
color: transparent;
|
color: transparent;
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
color: inherit;
|
color: #FF5252;
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
color: inherit;
|
color: #FF5252;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.md-empty-state {
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 16px;
|
||||||
|
margin-top: 1em;
|
||||||
|
margin-bottom: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sections {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sections-small .md-card {
|
||||||
|
background-color: rgba(58, 59, 82, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-layout-item {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-display-3 {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 972px) {
|
||||||
|
.md-display-3 {
|
||||||
|
font-size: 42px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sections {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sections-small {
|
||||||
|
display: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 972px) {
|
||||||
|
.sections-small {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-empty-state.md-theme-default.md-rounded {
|
||||||
|
background-color: rgba(58, 59, 82, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-empty-state:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.3s;
|
||||||
|
box-shadow: 0 6px 6px -3px rgba(0, 0, 0, .2), 0 10px 14px 1px rgba(0, 0, 0, .14), 0 4px 18px 3px rgba(0, 0, 0, .12);
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<style>
|
||||||
|
.md-empty-state:hover .md-empty-state-icon {
|
||||||
|
color: #FF5252 !important;
|
||||||
|
transition: 0.1s;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -5,6 +5,7 @@ import router from './router'
|
|||||||
//TODO: Import individual components
|
//TODO: Import individual components
|
||||||
import VueMaterial from 'vue-material'
|
import VueMaterial from 'vue-material'
|
||||||
import 'vue-material/dist/vue-material.min.css'
|
import 'vue-material/dist/vue-material.min.css'
|
||||||
|
import 'vue-material/dist/theme/default.css'
|
||||||
|
|
||||||
Vue.config.productionTip = false;
|
Vue.config.productionTip = false;
|
||||||
Vue.use(VueMaterial);
|
Vue.use(VueMaterial);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user