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

23
public/styles.css
View File

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