matteo/matrix-kernel-filter-calculator
1
0
Fork 0
mirror of https://github.com/mschuepbach/matrix-kernel-filter-calculator.git synced 2026-01-15 21:12:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add link to repository

Browse Source
This commit is contained in:
mschuepbach
2022-02-01 11:14:22 +01:00
parent 35468129cc
commit f1fac36733
2 changed files with 28 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/App.svelte
View File

@@ -58,8 +58,8 @@
}
</script>
<main>
<div class="container">
<div class="container">
<main>
<h5 style="grid-area: matrix-title">Matrix</h5>
<h5 style="grid-area: kernel-title">Kernel</h5>
<h5 style="grid-area: result-title">Result</h5>
@@ -92,32 +92,44 @@
/>
</div>
</div>
</div>
</main>
</main>
<footer>
<a
href="https://github.com/mschuepbach/matrix-kernel-filter-calculator"
target="_blank"
title="GitHub Repository"
>
<img src="./GitHub-Mark.svg" alt="GitHub Repository" width="32px" />
</a>
</footer>
</div>
<style>
main {
text-align: center;
margin: 0 auto;
}
h5 {
margin: 1em 0 0;
}
.container {
text-align: center;
height: 100%;
display: flex;
flex-direction: column;
}
main {
display: grid;
margin-bottom: auto;
grid-template-areas:
"matrix-title kernel-title result-title"
"matrix-size kernel-size result-size"
"matrix kernel result"
"padding padding padding";
grid-gap: 0.5em;
grid-gap: .8em;
align-items: center;
}
@media (max-width: 960px) {
.container {
main {
grid-template-areas:
"matrix-title"
"matrix-size"
@@ -131,4 +143,8 @@
"padding";
}
}
footer {
margin-top: 1em;
}
</style>