diff --git a/css/jpeg-xl-test.webflow.css b/css/jpeg-xl-test.webflow.css index 7844492..401b93e 100644 --- a/css/jpeg-xl-test.webflow.css +++ b/css/jpeg-xl-test.webflow.css @@ -307,6 +307,11 @@ img { height: 100%; display: inline-block; } +img.side_image { + width: 6em; + padding: 0 1em; + float: right; +} strong { letter-spacing: .01em; @@ -786,6 +791,29 @@ blockquote { display: flex; } +.navbar_headertext { + color: var(--brand--teal-bright--P3--700); + background-image: linear-gradient(90deg, var(--brand--teal-bright--P3--500), var(--brand--blue--P3--500)); + letter-spacing: -.02em; + -webkit-text-fill-color: transparent; + -webkit-background-clip: text; + background-clip: text; + text-align: center; + letter-spacing: .01em; + flex-flow: wrap; + justify-content: center; + width: auto; + min-width: auto; + margin-top: 0; + margin-bottom: 0; + font-family: var(--font--font-family--barlow); + font-size: 32px; + font-weight: 400; + line-height: 1em; + display: block; +} + + .display-l-bold { color: var(--white); text-align: center; @@ -953,7 +981,7 @@ blockquote { .container-content-fullspan { z-index: 0; grid-column-gap: 16px; - grid-row-gap: 16px; + grid-row-gap: 32px; flex-flow: column; flex: 0 auto; grid-template-rows: auto auto; @@ -1505,6 +1533,7 @@ blockquote { background-position: 0 0, 50% 0; background-size: auto, cover; overflow: hidden; + padding-top: 12rem; } .image-wave-2560 { @@ -4278,6 +4307,7 @@ blockquote { .section-jpeg-xl-hero.gradient-bottom { background-size: 100%; + padding-top: 12rem; } .image-wave-2560 { @@ -4961,7 +4991,7 @@ blockquote { .container-content-fullspan { grid-column-gap: 0px; - grid-row-gap: 0px; + grid-row-gap: 32px; width: 100%; min-width: auto; height: auto; @@ -5795,6 +5825,12 @@ blockquote { height: 80px; } + .navbar_headertext { + font-size: 4vw; + margin-left: 0.5em; + margin-right: 0.5em; + } + .display-xl-bold.fill-gradient { letter-spacing: 0; margin-bottom: 0; @@ -5921,7 +5957,6 @@ blockquote { .container-content-fullspan { width: 100%; - min-width: 568px; height: auto; } @@ -6887,8 +6922,8 @@ blockquote { .navbar-container-menu-top { height: 5rem; - padding-left: 1.5rem; - padding-right: 1rem; + padding-left: 0.7rem; + padding-right: 0.5rem; } .navbar-icon-main { diff --git a/css/navbar.css b/css/navbar.css index 7fca1e4..1c9fef7 100644 --- a/css/navbar.css +++ b/css/navbar.css @@ -86,7 +86,7 @@ nav.visible { padding: 2em; display: flex; flex-direction: row; - gap: 3em; + gap: 2em; flex-wrap: wrap; justify-content: center; } diff --git a/index.html b/index.html index 1ddc905..cd753a0 100644 --- a/index.html +++ b/index.html @@ -1362,6 +1362,7 @@ object-fit: cover; /* Maintain aspect ratio while scaling */ } + @@ -1374,7 +1375,7 @@
@@ -2778,11 +2788,10 @@

Building the Future of Image Standard

- JPEG XL is a new international standard (ISO/IEC 18181) created by the JPEG committee. The committee’s work ensures that JPEG XL meets the highest standards + JPEG XL was created by the JPEG committee. + The committee’s work ensures that JPEG XL meets the highest standards of performance, efficiency, and compatibility, benefiting users across various industries and applications. - Learn more about the JPEG Committee’s work at the official website: jpeg.org.

+ Learn more about the JPEG Committee’s work and their other projects at their official website: jpeg.org.