icd/mt940-mbank-ts
2
0
Fork 1
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

refactor: improve layout for logo placement

Browse Source
This commit is contained in:
Mateusz 2025-08-10 14:13:26 +02:00
parent 092ff9e390
commit 03b6123a14
2 changed files with 29 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
public/index.html
View File

@ -4,16 +4,17 @@
<title>mBank mt940 konwerter</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.fuchsia.min.css" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main>
<header>
<header>
<section>
<h1>mBank mt940 konwerter</h1>
<button id="theme-toggle" type="button"></button>
</header>
</section>
</header>
<main>
<section>
<p>
Za pomocą tego narzędzia za darmo przekonwertujesz plik CSV wygenerowany przez mbank do&nbsp;formatu
@ -41,11 +42,13 @@
</p>
</div>
</section>
</main>
<footer>
<div id="icd-logo-container">
<footer>
<section>
<figure id="icd-logo-container">
<div id="icd-logo"></div>
</div>
</figure>
<p>
Aplikacja została wykonana przez
@ -54,9 +57,7 @@
</a>
i&nbsp;jest utrzymywana przez
<a target="_blank" href="https://www.sealcode.it/">Sealcode</a>
</p>
<p>
.
<a target="_blank" href="https://git.internet-czas-dzialac.pl/icd/mt940-mbank-ts">Kod źródłowy</a>
</p>
@ -65,8 +66,8 @@
<a target="_blank" href="https://brailleinstitute.org/freefont">Atkinson Hyperlegible</a>
na&nbsp;licencji SIL Open Font License
</small>
</footer>
</main>
</section>
</footer>
<script src="bundle.js"></script>
</body>
</html>

23
public/styles.css
View File

@ -8,9 +8,10 @@
--noop: none;
}
body {
max-width: 600px;
section {
max-width: 800px;
margin: 0 auto;
padding: 0 1rem;
}
button {
@ -29,7 +30,13 @@ button {
color: hsl(120, 100%, 7.1%);
}
header {
header,
footer {
max-width: unset !important;
background-color: var(--pico-modal-overlay-background-color);
}
header section {
display: flex;
justify-content: space-between;
align-items: center;
@ -50,7 +57,7 @@ header {
}
#icd-logo {
height: 30px;
height: 50px;
aspect-ratio: 1200/319;
background-color: white;
mask-image: url("logo.png");
@ -63,10 +70,10 @@ header {
-webkit-mask-position: center;
}
#icd-logo-container {
figure#icd-logo-container {
background-color: black;
padding: 1em;
padding: 1rem;
width: fit-content;
margin: 0 auto;
margin-bottom: 1em;
margin: 0 auto 1em auto;
border-radius: var(--pico-border-radius);
}