167 lines
3.4 KiB
CSS
167 lines
3.4 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
|
|
|
|
|
|
body {
|
|
padding: 0%;
|
|
margin: 0%;
|
|
}
|
|
|
|
a, a:visited {
|
|
font-size: large;
|
|
text-decoration: none;
|
|
color: var(--colorBlue);
|
|
}
|
|
|
|
a:hover, a:focus {
|
|
text-underline-offset: 4px;
|
|
text-decoration: underline 2px var(--colorLavender);
|
|
color: var(--colorLavender);
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
margin: 0%;
|
|
}
|
|
|
|
/* Paleta kolorów: https://catppuccin.com/palette/ */
|
|
* {
|
|
--colorRosewater: #f5e0dc;
|
|
--colorFlamingo: #f2cdcd;
|
|
--colorPink: #f5c2e7;
|
|
--colorMauve: #cba6f7;
|
|
--colorRed: #f38ba8;
|
|
--colorMaroon: #eba0ac;
|
|
--colorPeach: #fab387;
|
|
--colorYellow: #f9e2af;
|
|
--colorGreen: #a6e3a1;
|
|
--colorTeal: #94e2d5;
|
|
--colorSky: #89dceb;
|
|
--colorSaphire: #74c7ec;
|
|
--colorBlue: #89b4fa;
|
|
--colorLavender: #b4befe;
|
|
--colorText: #cdd6f4;
|
|
--colorSubtext1: #bac2de;
|
|
--colorSubtext0: #a6adc8;
|
|
--colorOverlay2: #9399b2;
|
|
--colorOverlay1: #7f849c;
|
|
--colorOverlay0: #6c7086;
|
|
--colorSurface2: #585b70;
|
|
--colorSurface1: #45475a;
|
|
--colorSurface0: #313244;
|
|
--colorBase: #1e1e2e;
|
|
--colorMantle: #181825;
|
|
--colorCrust: #11111b;
|
|
}
|
|
|
|
/* Tło */
|
|
@keyframes GradientScroll {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
}
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
}
|
|
|
|
html {
|
|
font-family: "Ubuntu", sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 14pt;
|
|
|
|
color: var(--colorSubtext1);
|
|
background-color: var(--colorMantle);
|
|
background: linear-gradient(-45deg,
|
|
var(--colorMauve) 0%,
|
|
var(--colorLavender) 25%,
|
|
var(--colorSaphire) 50%,
|
|
var(--colorBlue) 75%,
|
|
var(--colorBlue) 100%
|
|
);
|
|
background-size: 400vw 200vh;
|
|
animation: GradientScroll 5s ease infinite;
|
|
}
|
|
|
|
/* Header */
|
|
header {
|
|
background-color: var(--colorBase);
|
|
background: linear-gradient(135deg, var(--colorSurface0) 0%, var(--colorSurface1) 100%);
|
|
/* border-bottom-left-radius: 1rem; */
|
|
border-radius: 1rem;
|
|
border: .3rem solid var(--colorOverlay1);
|
|
|
|
margin: .5rem;
|
|
padding: 0%;
|
|
padding-top: .5rem;
|
|
padding-bottom: .65rem;
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
header img {
|
|
float: left;
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
header nav ul {
|
|
margin: 0%;
|
|
padding: 0%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 1rem;
|
|
list-style: none;
|
|
}
|
|
|
|
/* Treść */
|
|
main {
|
|
background-color: var(--colorSurface0);
|
|
border: .35rem solid var(--colorOverlay0);
|
|
border-radius: 1rem;
|
|
margin: 2rem;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding: 1rem;
|
|
max-width: 1680px;
|
|
width: 90vw;
|
|
}
|
|
|
|
/* Stopka */
|
|
footer {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
|
|
background-color: var(--colorBase);
|
|
background: linear-gradient(180deg, var(--colorSurface2) 0%, var(--colorSurface0) 66%, var(--colorBase) 100%);
|
|
/* border-bottom-left-radius: 1rem; */
|
|
border-radius: 1rem;
|
|
border: .3rem solid var(--colorOverlay1);
|
|
|
|
max-height: 128px;
|
|
|
|
margin: .5rem;
|
|
padding: 1rem;
|
|
}
|
|
|
|
footer div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
footer div div {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
footer div div ul {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: 1;
|
|
margin: 0%;
|
|
margin-left: .5rem;
|
|
padding: 0%;
|
|
gap: .3rem;
|
|
list-style: none;
|
|
}
|