mirror of
https://github.com/simon987/simon987.net.git
synced 2025-04-10 14:06:41 +00:00
Navigation button placeholders
This commit is contained in:
parent
1bd682cf41
commit
86d5bdda54
@ -2,8 +2,10 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<title>wip</title>
|
||||
<meta content="width=device-width,initial-scale=1,minimal-ui" name="viewport">
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons">
|
||||
|
||||
<title>simon987.net</title>
|
||||
</head>
|
||||
<body>
|
||||
<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",
|
||||
"version": "1.0.0",
|
||||
"description": "A Vue.js project",
|
||||
"author": "simon987 <fortier.simon@protonmail.com>",
|
||||
"author": "simon987 <me@simon987.net>",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
|
||||
@ -13,9 +13,9 @@
|
||||
"d3": "^5.9.2",
|
||||
"lodash": "^4.17.11",
|
||||
"pixi.js": "^4.8.7",
|
||||
"vue": "^2.5.2",
|
||||
"vue-material": "^1.0.0-beta-10.2",
|
||||
"vue-router": "^3.0.1"
|
||||
"vue": "^2.6.10",
|
||||
"vue-material": "^1.0.0-beta-11",
|
||||
"vue-router": "^3.0.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^7.1.2",
|
||||
|
||||
@ -32,8 +32,9 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
let grid = new Grid(
|
||||
size ? size : window.innerWidth < 1000 ? 20 : 30,
|
||||
size ? size : window.innerWidth < 1000 ? 15 : 25,
|
||||
window.innerWidth < 1000 ? 80 : 40,
|
||||
// darkTheme
|
||||
lightTheme
|
||||
);
|
||||
grid.setup();
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div id="content" class="md-layout md-centered">
|
||||
<md-card class="md-layout-item md-elevation-10">
|
||||
<div id="content" class="md-layout">
|
||||
<md-card class="md-layout-item md-elevation-10 md-size-90">
|
||||
<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-content>
|
||||
@ -10,29 +10,69 @@
|
||||
accusantium quasi non.
|
||||
</md-card-content>
|
||||
|
||||
<md-card-actions>
|
||||
<md-button>Action</md-button>
|
||||
<md-button>Action</md-button>
|
||||
</md-card-actions>
|
||||
<div class="sections">
|
||||
<md-empty-state
|
||||
md-rounded
|
||||
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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Jumbotron"
|
||||
}
|
||||
export default {
|
||||
name: "Jumbotron"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.md-card {
|
||||
margin-top: 2em;
|
||||
background-color: white;
|
||||
padding: 2.5em;
|
||||
margin: 2em;
|
||||
max-width: 1200px;
|
||||
min-width: inherit;
|
||||
}
|
||||
|
||||
.md-card .md-ripple {
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
.text-mono {
|
||||
font-family: Hack, "Andale Mono", monospace;
|
||||
/*color: rgba(0, 0, 0, 0.87);*/
|
||||
}
|
||||
|
||||
::selection {
|
||||
@ -43,9 +83,6 @@
|
||||
background: #f9989f;
|
||||
}
|
||||
|
||||
.md-display-4 {
|
||||
}
|
||||
|
||||
.vim-caret {
|
||||
-webkit-animation: vimCaret 1s linear infinite;
|
||||
-o-animation: vimCaret 1s linear infinite;
|
||||
@ -61,10 +98,10 @@
|
||||
background-color: transparent;
|
||||
}
|
||||
50% {
|
||||
color: inherit;
|
||||
color: #FF5252;
|
||||
}
|
||||
100% {
|
||||
color: inherit;
|
||||
color: #FF5252;
|
||||
}
|
||||
}
|
||||
|
||||
@ -76,10 +113,10 @@
|
||||
color: transparent;
|
||||
}
|
||||
50% {
|
||||
color: inherit;
|
||||
color: #FF5252;
|
||||
}
|
||||
100% {
|
||||
color: inherit;
|
||||
color: #FF5252;
|
||||
}
|
||||
}
|
||||
|
||||
@ -91,10 +128,71 @@
|
||||
color: transparent;
|
||||
}
|
||||
50% {
|
||||
color: inherit;
|
||||
color: #FF5252;
|
||||
}
|
||||
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>
|
||||
|
||||
@ -5,6 +5,7 @@ import router from './router'
|
||||
//TODO: Import individual components
|
||||
import VueMaterial from 'vue-material'
|
||||
import 'vue-material/dist/vue-material.min.css'
|
||||
import 'vue-material/dist/theme/default.css'
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
Vue.use(VueMaterial);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user