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

feat: update various style elements from PR comment

Browse Source
This commit is contained in:
Mateusz Jabłoński 2025-08-12 12:53:00 +02:00
parent b3e665d04e
commit 3e524fdaf8
2 changed files with 52 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
public/index.html
View File

@ -4,7 +4,7 @@
<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.fuchsia.min.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css" />
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="styles.css" />
</head> </head>
<body> <body>
@ -56,17 +56,20 @@
<a target="_blank" href="https://www.internet-czas-dzialac.pl/"> <a target="_blank" href="https://www.internet-czas-dzialac.pl/">
Fundację „Internet. Czas działać!” Fundację „Internet. Czas działać!”
</a> </a>
i&nbsp;jest utrzymywana przez <br />
i jest utrzymywana przez
<a target="_blank" href="https://www.sealcode.it/">Sealcode</a> <a target="_blank" href="https://www.sealcode.it/">Sealcode</a>
. •
<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>
<small> <p>
Wykorzystuje czcionkę <small>
<a target="_blank" href="https://brailleinstitute.org/freefont">Atkinson Hyperlegible</a> Wykorzystuje czcionkę
na&nbsp;licencji SIL Open Font License <a target="_blank" href="https://brailleinstitute.org/freefont">Atkinson Hyperlegible</a>
</small> na&nbsp;licencji SIL Open Font License
</small>
</p>
</section> </section>
</footer> </footer>
<script src="bundle.js"></script> <script src="bundle.js"></script>

50
public/styles.css
View File

@ -1,15 +1,30 @@
:root { :root {
--pico-font-family: "Atkinson Hyperlegible", sans-serif; --pico-font-family: "Atkinson Hyperlegible", sans-serif;
--icd-rentgen-color: #99ffdd;
--success-background-color: hsl(120, 100%, 85.1%);
--success-color: hsl(120, 100%, 7.1%);
} }
section { section {
max-width: 800px; max-width: 800px;
margin: 0 auto; margin: 0 auto;
padding: 0 1rem;
} }
button { button {
width: 100%; width: 100%;
font-weight: bold !important;
border: none;
box-shadow: none;
}
#submit {
background-color: black;
color: var(--icd-rentgen-color);
}
#submit:hover {
background-color: var(--icd-rentgen-color);
color: black;
} }
.hidden { .hidden {
@ -17,27 +32,45 @@ button {
} }
.success { .success {
background-color: hsl(120, 100%, 85.1%); background-color: var(--success-background-color);
color: var(--success-color);
padding: 2rem; padding: 2rem;
margin: 1rem; margin: 1rem;
font-size: 1.2rem; font-size: 1.2rem;
color: hsl(120, 100%, 7.1%);
} }
header, header,
footer { footer {
max-width: unset !important; max-width: unset !important;
background-color: var(--pico-modal-overlay-background-color); background-color: black;
}
header section h1,
footer section p {
color: white;
}
footer section p a {
color: var(--icd-rentgen-color);
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex: 1;
} }
header section { header section {
display: flex; text-align: center;
justify-content: space-between; color: white;
align-items: center;
} }
#icd-logo { #icd-logo {
height: 50px; height: 48px;
aspect-ratio: 1200/319; aspect-ratio: 1200/319;
background-color: white; background-color: white;
mask-image: url("logo.png"); mask-image: url("logo.png");
@ -55,5 +88,4 @@ figure#icd-logo-container {
padding: 1rem; padding: 1rem;
width: fit-content; width: fit-content;
margin: 0 auto 1em auto; margin: 0 auto 1em auto;
border-radius: var(--pico-border-radius);
} }