icd/mt940-mbank-ts
2
0
Fork 1
Code Issues Pull Requests 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>
<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.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" />
</head>
<body>
@ -56,17 +56,20 @@
<a target="_blank" href="https://www.internet-czas-dzialac.pl/">
Fundację „Internet. Czas dział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://git.internet-czas-dzialac.pl/icd/mt940-mbank-ts">Kod źródłowy</a>
</p>
<small>
Wykorzystuje czcionkę
<a target="_blank" href="https://brailleinstitute.org/freefont">Atkinson Hyperlegible</a>
na&nbsp;licencji SIL Open Font License
</small>
<p>
<small>
Wykorzystuje czcionkę
<a target="_blank" href="https://brailleinstitute.org/freefont">Atkinson Hyperlegible</a>
na&nbsp;licencji SIL Open Font License
</small>
</p>
</section>
</footer>
<script src="bundle.js"></script>

50
public/styles.css
View File

@ -1,15 +1,30 @@
:root {
--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 {
max-width: 800px;
margin: 0 auto;
padding: 0 1rem;
}
button {
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 {
@ -17,27 +32,45 @@ button {
}
.success {
background-color: hsl(120, 100%, 85.1%);
background-color: var(--success-background-color);
color: var(--success-color);
padding: 2rem;
margin: 1rem;
font-size: 1.2rem;
color: hsl(120, 100%, 7.1%);
}
header,
footer {
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 {
display: flex;
justify-content: space-between;
align-items: center;
text-align: center;
color: white;
}
#icd-logo {
height: 50px;
height: 48px;
aspect-ratio: 1200/319;
background-color: white;
mask-image: url("logo.png");
@ -55,5 +88,4 @@ figure#icd-logo-container {
padding: 1rem;
width: fit-content;
margin: 0 auto 1em auto;
border-radius: var(--pico-border-radius);
}