sudacode/metrics
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Update index.html

Browse Source
This commit is contained in:
lowlighter
2020-10-20 23:27:52 +02:00
parent 516d3abc66
commit 543c6f8f98
1 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/html/index.html
View File

@@ -39,7 +39,7 @@
</div> </div>
<div class="palette"> <div class="palette">
Generated metrics use transparency and colors which matches both light and dark modes Generated metrics use transparency and colors which matches both light and dark modes
<div> <div class="palettes">
<label> <label>
<input type="radio" v-model="palette" value="light"> <input type="radio" v-model="palette" value="light">
☀️ Light mode ☀️ Light mode
@@ -55,10 +55,10 @@
<div class="step"> <div class="step">
<h2>3. Generate your metrics</h2> <h2>3. Generate your metrics</h2>
<template v-if="generated.content"> <template v-if="generated.content">
<img :src="generated.content" alt="metrics"> <img class="metrics" :src="generated.content" alt="metrics">
</template> </template>
<template v-else> <template v-else>
<img :src="templates.placeholder" alt="metrics"> <img class="metrics" :src="templates.placeholder" alt="metrics">
<button @click="generate" :disabled="(!user)||(generated.pending)">{{ generated.pending ? "Generating your metrics..." : user ? "Generate your metrics" : "Enter your GitHub username first" }}</button> <button @click="generate" :disabled="(!user)||(generated.pending)">{{ generated.pending ? "Generating your metrics..." : user ? "Generate your metrics" : "Enter your GitHub username first" }}</button>
</template> </template>
</div> </div>
@@ -219,14 +219,14 @@
text-align: center; text-align: center;
max-width: 800px; max-width: 800px;
} }
.plugins { .plugins, .palettes {
margin-top: 1rem; margin-top: 1rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
} }
.plugins label { .plugins label, .palettes label {
margin: 0 1rem; margin: 0 1rem;
} }
.code { .code {
@@ -244,6 +244,10 @@
font-size: .9rem; font-size: .9rem;
opacity: .8; opacity: .8;
} }
img.metrics {
width: 100%;
max-width: 480px;
}
.palette { .palette {
margin-top: 1rem; margin-top: 1rem;
} }