styling, version in title
This commit is contained in:
parent
f04c75e178
commit
b08ca3446b
2 changed files with 27 additions and 4 deletions
|
@ -5,7 +5,7 @@
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
<title>noisemaker</title>
|
<title>noisemaker v<%= VUE_APP_VERSION %></title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>
|
<noscript>
|
||||||
|
|
29
src/App.vue
29
src/App.vue
|
@ -1,6 +1,7 @@
|
||||||
<!--suppress HtmlFormInputWithoutLabel -->
|
<!--suppress HtmlFormInputWithoutLabel -->
|
||||||
<template>
|
<template>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
|
<h1>noisemaker</h1>
|
||||||
<div class="channels-wrapper">
|
<div class="channels-wrapper">
|
||||||
<div class="channels">
|
<div class="channels">
|
||||||
<template v-for="i in N_CHANNELS">
|
<template v-for="i in N_CHANNELS">
|
||||||
|
@ -84,16 +85,38 @@ export default class App extends Vue {
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
html, body {
|
html, body {
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 14px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#app {
|
input[type="text"] {
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
|
padding: 4px;
|
||||||
|
background: white;
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
background: white;
|
||||||
|
border: 1px solid black;
|
||||||
|
box-shadow: 2px 2px #272727;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 20px;
|
||||||
|
margin: 1rem 0;
|
||||||
|
font-weight: normal;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 2rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -104,7 +127,7 @@ html, body {
|
||||||
|
|
||||||
.channels {
|
.channels {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 0 2rem;
|
padding: 0 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.channel {
|
.channel {
|
||||||
|
|
Loading…
Reference in a new issue