74 lines
1.3 KiB
Vue
74 lines
1.3 KiB
Vue
<template>
|
|
<div id="app">
|
|
<NoteList />
|
|
<div class="shortcuthelp">
|
|
<ul>
|
|
<li><kbd>c</kbd>focus</li>
|
|
<li><kbd>Enter</kbd>save</li>
|
|
<li><kbd>j</kbd><kbd>k</kbd>move up/down</li>
|
|
<li><kbd>Delete</kbd>delete</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import NoteList from '@/components/NoteList.vue'
|
|
export default {
|
|
components: {
|
|
NoteList
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
:root {
|
|
--text-color: #003049;
|
|
--secondary-text-color: #eae2b7;
|
|
--theme-color: #003049;
|
|
--background-color: #eae2b7;
|
|
--secondary-background: #d62828;
|
|
background-color: var(--background-color);
|
|
color: var(--text-color);
|
|
}
|
|
|
|
* {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
|
|
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
|
}
|
|
|
|
.shortcuthelp {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
color: var(--background-color);
|
|
background-color: var(--theme-color);
|
|
padding: 0.5rem;
|
|
margin: 1rem 1rem 0 0;
|
|
}
|
|
|
|
@media (max-width: 450px) {
|
|
.shortcuthelp {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
li {
|
|
list-style-type: none;
|
|
color: var(--background-color);
|
|
}
|
|
|
|
kbd {
|
|
background-color: var(--secondary-background);
|
|
color: var(--secondary-text-color);
|
|
display: inline-block;
|
|
padding: 0.1rem;
|
|
margin: 0.1rem 0.5rem;
|
|
}
|
|
</style>
|