diff --git a/components.css b/components.css
index f47a518..b0cba63 100644
--- a/components.css
+++ b/components.css
@@ -7,6 +7,11 @@
border-radius: 100rem;
text-decoration: none;
color: var(--on-background);
+
+ transition-duration: 0.2s;
+ &:hover {
+ transform: scale(1.1);
+ }
}
h1 {
diff --git a/index.html b/index.html
index f59e628..1e1b9e7 100644
--- a/index.html
+++ b/index.html
@@ -29,7 +29,9 @@
Naturalne składniki, domowe receptury i pasja. Tworzymy torty i wypieki na Twoje najważniejsze chwile - od codziennych radości po wielkie uroczystości
Zobacz naszą ofertę
-
+
+

+
diff --git a/style.css b/style.css
index cca8493..d405848 100644
--- a/style.css
+++ b/style.css
@@ -12,6 +12,7 @@ nav {
/* positioning and look */
position: sticky;
top: 0;
+ z-index: 50;
backdrop-filter: blur(var(--backdrop-blur));
background-color: color-mix(in srgb, var(--surface), transparent 20%);
padding: 1rem;
@@ -26,19 +27,27 @@ nav {
& > div {
display: flex;
align-items: center;
- gap: 1rem;
+ gap: 2rem;
& > a {
font-size: 1.25rem;
color: var(--on-background);
text-decoration: none;
- }
- /* The main selected link doesn't have a href attribute, so we can use that for styles */
- & > a:not([href]) {
- color: var(--primary);
- padding-bottom: 4px;
- border-bottom: 2px solid var(--primary);
+ &[href] {
+ font-weight: 200;
+ transition: color 0.2s;
+ &:hover {
+ color: var(--primary);
+ }
+ }
+
+ /* The main selected link doesn't have a href attribute, so we can use that for styles */
+ &:not([href]) {
+ color: var(--primary);
+ padding-bottom: 8px;
+ border-bottom: 2px solid var(--primary);
+ }
}
}
}
@@ -56,25 +65,32 @@ nav {
grid-template-columns: 1fr 1fr;
gap: 2rem;
- /* left portion */
& > div {
display: flex;
- flex-direction: column;
- align-items: flex-start;
justify-content: center;
+ }
+
+ /* left portion */
+ & > :first-child {
+ align-items: flex-start;
+ flex-direction: column;
gap: 1rem;
}
/* right portion */
- & > img {
- rotate: 2deg;
- border-radius: var(--border-radius);
- width: 100%;
- height: 100%;
- transition: rotate 0.7s;
+ & > :last-child {
+ align-items: center;
+ & > img {
+ rotate: 2deg;
+ border-radius: var(--border-radius);
+ max-width: 100%;
+ max-height: 80%;
+ aspect-ratio: 4/5;
+ transition: rotate 0.7s;
- &:hover {
- rotate: 0deg;
+ &:hover {
+ rotate: 0deg;
+ }
}
}
}