brian/batch-color-converter
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fixing up some layout and styling

Browse Source
This commit is contained in:
Brian
2022-03-31 13:27:17 -06:00
parent b023279be5
commit 96ccd95568
4 changed files with 15 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
batch-color-converter/.vscode/extensions.json vendored
View File

@ -1,3 +0,0 @@
{
"recommendations": ["johnsoncodehk.volar", "johnsoncodehk.vscode-typescript-vue-plugin"]
}

8
index.html
View File

@ -27,6 +27,14 @@
<!-- analytics -->
<!-- none -->
<!-- Font preloads (should be done for each font file) -->
<!-- Open Sans license: fonts/OpenSans/LICENSE.txt -->
<link href="fonts/OpenSans/OpenSans-Regular.woff2" rel="preload" as="font" type="font/woff2" crossorigin="anonymous">
<link href="fonts/OpenSans/OpenSans-Bold.woff2" rel="preload" as="font" type="font/woff2" crossorigin="anonymous">
<!-- Open Sans license: fonts/Ubuntu/UFL.txt -->
<link href="fonts/Ubuntu/Ubuntu-Regular.woff2" rel="preload" as="font" type="font/woff2" crossorigin="anonymous">
<link href="fonts/Ubuntu/Ubuntu-Bold.woff2" rel="preload" as="font" type="font/woff2" crossorigin="anonymous">
<script type="module" src="/src/main.js"></script>
</head>
<body class="font-open-sans antialiased bg-zinc-50 dark:bg-slate-900">

6
src/App.vue
View File

@ -1,9 +1,9 @@
<template>
<div class="grid-container h-screen">
<div class="grid-container">
<div class="wrapper">
<div class="grid-header">
<h1 class="text-center text-4xl font-bold">Batch Color Converter</h1>
<button @click="batchConvert" type="button">Convert</button>
<button @click="batchConvert" type="button" class="w-full px-6 py-4 font-bold text-white bg-gradient-to-r from-sky-400 via-indigo-500 to-fuchsia-500 rounded-lg">Convert</button>
</div>
<div class="grid-main">
<div class="input-container">
@ -34,7 +34,7 @@
</div>
</div>
<div class="grid-footer">
<p>You can take a look at <a href="https://git.ditoforge.com/brian/batch-color-converter" title="Source code for this page" class="text-blue-400 font-bold hover:text-blue-700 transition">this terrible code over on my git server</a>.</p>
<p class="text-center">You can take a look at <a href="https://git.ditoforge.com/brian/batch-color-converter" title="Source code for this page" class="text-blue-400 font-bold hover:text-blue-700 transition">this terrible code over on my git server</a>.</p>
</div>
</div>
</div>

21
src/assets/base.css
View File

@ -1,21 +1,12 @@
.grid-container {
@apply grid grid-flow-row grid-rows-1 grid-cols-1 gap-8;
/*display: grid;*/
/*grid-template-columns: 1fr;*/
/*grid-template-rows: 1fr;*/
/*gap: 2em 2em;*/
/*grid-auto-flow: row;*/
@apply grid grid-flow-row grid-rows-1 grid-cols-1 gap-8 min-h-screen py-12;
grid-template-areas:
"wrapper";
}
.wrapper {
@apply grid grid-flow-row grid-cols-1 gap-8;
/*display: grid;*/
/*grid-template-columns: 1fr;*/
@apply grid grid-flow-row grid-cols-1 gap-8 w-3/4 mx-auto;
grid-template-rows: auto 1fr auto;
/*gap: 2em 2em;*/
/*grid-auto-flow: row;*/
grid-template-areas:
"grid-header"
"grid-main"
@ -24,17 +15,13 @@
}
.grid-header {
@apply p-6;
@apply grid grid-flow-row auto-rows-max gap-y-6 p-6;
grid-area: grid-header;
}
.grid-main {
@apply grid grid-flow-col grid-rows-1 gap-8;
/*display: grid;*/
@apply grid grid-flow-col grid-rows-1 gap-8 p-6;
grid-template-columns: 30% 1fr;
/*grid-template-rows: 1fr;*/
/*gap: 2em 2em;*/
/*grid-auto-flow: row;*/
grid-template-areas:
"input-container output-wrapper";
grid-area: grid-main;