Files
MaszToZadanieDomowe.com/assets/css/main.css
2025-09-22 13:16:18 +02:00

135 lines
2.6 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');
@import url('baza.css');
/* Tło */
@keyframes GradientScroll {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 100%;
}
100% {
background-position: 0% 50%;
}
}
html {
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: 1000vw 1000vh;
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;
user-select: text;
}
/* 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;
padding-bottom: 1.75rem;
}
footer img {
height: 100%;
}
footer strong {
margin-top: .25rem;
}
footer div {
display: flex;
flex-direction: column;
}
footer div div, .flex-row {
flex-grow: 1;
display: inline-flex;
flex-direction: row;
gap: 1rem;
}
footer div div ul {
display: flex;
flex-direction: column;
flex-wrap: 1;
margin: 0%;
margin-left: .5rem;
padding: 0%;
gap: .3rem;
list-style: none;
}
/* Dodatkowe */
.flex-row {
flex-grow: 1;
display: inline-flex;
flex-direction: row;
gap: 1rem;
}
.fixed25rem {
min-height: 25rem;
max-height: 25rem;
}