Safari bug fix

hugo/content/_index.html

@@ -2,52 +2,39 @@
 title: "Open Collaboration Tools"
 description: "Boost remote teamwork with open source technology. Share your editor contents and see changes in real-time."
 type: oct
+layout: landing
 ---
-<section class="flex justify-center items-center w-full bg-richBlack pb-[50px] border-b-[20px] border-eminence">
-    <div class="flex flex-wrap justify-center gap-11 w-4/5 max-w-[1200px] mt-[35px]">
-        <div class="flex-[5] text-xl">
-            <div class="w-[90%] text-columbiaBlue font-urbanist">
-                <h1 class="text-[2.5rem] font-bold leading-[normal] mt-[0.83em] mb-4">Collaborative editing for your IDE or custom editor</h1>
-                <p class="font-urbanist my-[1em] leading-[normal]">Boost remote teamwork with open source technology. Share your editor contents and see changes in real-time.</p>
-                <p class="font-urbanist my-[1em] leading-[normal]">Extensible by design: connect custom editors from your IDE or web app. Deploy a collaboration server to suit your specific needs.</p>
-            </div>
-        </div>
-        <div class="flex-[4] hidden md:block">
-            <image src="/assets/oct-space.jpg" alt="Abstract illustration of collaborative editing" class="w-full h-[250px] object-cover" />
-        </div>
-    </div>
-</section>
 <section class="flex items-center justify-center w-full">
-    <div class="flex flex-wrap justify-center gap-11 w-4/5 max-w-[1200px] mt-[75px] font-urbanist">
-        <div class="box-content max-w-64 p-9 text-richBlack bg-columbiaBlue">
+    <div class="flex flex-wrap justify-center gap-11 w-4/5 max-w-[1200px] mt-[75px] font-urbanist text-richBlack">
+        <div class="box-content max-w-64 p-9 bg-columbiaBlue">
             <h2 class="text-center font-bold text-2xl leading-[normal] mb-4">Multiple cursors</h2>
             <p class="leading-[normal]">See what others are looking at: the cursors and selections of all participants are highlighted in your editor.</p>
         </div>
-        <div class="box-content max-w-64 p-9 text-richBlack bg-columbiaBlue">
+        <div class="box-content max-w-64 p-9 bg-columbiaBlue">
             <h2 class="text-center font-bold text-2xl leading-[normal] mb-4">End-to-end encryption</h2>
             <p class="leading-[normal]">Messages between participants are encrypted so not even the server knows what you are sharing – only those you invited do.</p>
         </div>
-        <div class="box-content max-w-64 p-9 text-richBlack bg-columbiaBlue">
+        <div class="box-content max-w-64 p-9 bg-columbiaBlue">
             <h2 class="text-center font-bold text-2xl leading-[normal] mb-4">IDE extensions</h2>
             <p class="leading-[normal]">Get the VS Code extension from <a href="https://open-vsx.org/extension/typefox/open-collaboration-tools" class="text-eminence hover:underline">Open VSX</a> or the <a href="https://marketplace.visualstudio.com/items?itemName=typefox.open-collaboration-tools" class="text-eminence hover:underline">VS Code Marketplace</a>. Eclipse Theia has a <a href="https://www.npmjs.com/package/@theia/collaboration" class="text-eminence hover:underline">built-in extension package</a> for the direct integration of Open Collaboration Tools.</p>
         </div>
-        <div class="box-content max-w-64 p-9 text-richBlack bg-columbiaBlue">
+        <div class="box-content max-w-64 p-9 bg-columbiaBlue">
             <h2 class="text-center font-bold text-2xl leading-[normal] mb-4">Integrate in your web app</h2>
             <p class="leading-[normal]">Include collaborative editing right in your web application with a text editor such as <a href="https://microsoft.github.io/monaco-editor/" class="text-eminence hover:underline">Monaco</a>. You can even share contents between the web app and an IDE!</p>
         </div>
-        <div class="box-content max-w-64 p-9 text-richBlack bg-columbiaBlue">
+        <div class="box-content max-w-64 p-9 bg-columbiaBlue">
             <h2 class="text-center font-bold text-2xl leading-[normal] mb-4">Customize everything</h2>
             <p class="leading-[normal]">Connect your custom editors: text-based, form-based, graphical, or any other paradigm. Empower your users with real-time collaboration, regardless of their background and expertise.</p>
         </div>
-        <div class="box-content max-w-64 p-9 text-richBlack bg-columbiaBlue">
+        <div class="box-content max-w-64 p-9 bg-columbiaBlue">
             <h2 class="text-center font-bold text-2xl leading-[normal] mb-4">Deploy on-premises</h2>
             <p class="leading-[normal]">You wish to adopt Open Collaboration Tools in your organization? The server is easy to deploy behind your firewall and can be connected to your authentication service.</p>
         </div>
     </div>
 </section>
 <section class="flex items-center justify-center w-full pb-16">
     <div class="w-4/5 max-w-[850px] mt-[50px] font-urbanist leading-[1.35rem]">
-        <hr class="flex-grow w-full h-[5px] text-eminence bg-eminence border-none">
+        <hr class="flex-grow w-full h-[5px] text-octoLilac bg-octoLilac border-none">
         <h1 class="text-[2.25rem] leading-[normal] my-[0.83em] font-bold">The Public Open Collaboration Server</h1>
         <p class="my-[1em]">
             <strong>Server URL:</strong> <code class="whitespace-nowrap py-[0.2rem] px-[0.4rem] bg-columbiaBlue">https://api.open-collab.tools/</code>

hugo/content/login.html

@@ -5,7 +5,7 @@
 type: oct
 ---
 <div class="flex justify-center">
-    <div class="mx-16 mt-[44px]">
+    <div class="p-16">
         <div class="flex flex-col gap-6 w-full mb-[44px]">
             <div class="font-urbanist">
                 <h1 class="text-2xl font-bold my-[0.83em]">Terms And Conditions</h1>
@@ -26,13 +26,13 @@ <h1 class="text-2xl font-bold my-[0.83em]">Verified Login</h1>
             </div>
             <div class="flex flex-col gap-4 items-center justify-center font-urbanist">
                 <a href="https://api.open-collab.tools/api/login/google" id="login-google">
-                    <div class="px-3 py-2 font-barlow text-white text-[1.2rem] font-medium bg-eminence rounded-xl cursor-pointer flex items-center border-none">
+                    <div class="px-3 py-2 font-barlow text-white text-[1.2rem] font-medium bg-darkBlue rounded-xl cursor-pointer flex items-center border-none">
                         <img src="/assets/google-g.svg" alt="Google logo" class="w-7 h-7 mr-2">
                         <span>Log in with Google</span>
                     </div>
                 </a>
                 <a href="https://api.open-collab.tools/api/login/github" id="login-github">
-                    <div class="px-3 py-2 font-barlow text-white text-[1.2rem] font-medium bg-eminence rounded-xl cursor-pointer flex items-center border-none">
+                    <div class="px-3 py-2 font-barlow text-white text-[1.2rem] font-medium bg-darkBlue rounded-xl cursor-pointer flex items-center border-none">
                         <img src="/assets/github-mark.svg" alt="GitHub logo" class="w-7 h-7 mr-2">
                         <span>Log in with GitHub</span>
                     </div>
@@ -47,13 +47,13 @@ <h1 class="text-2xl font-bold my-[0.83em]">Unverified Login</h1>
             <form class="flex flex-col gap-4 items-center justify-center font-urbanist" onsubmit="login(event)">
                 <div class="w-[200px] flex flex-col gap-1">
                     <label for="login-username">Username</label>
-                    <input id="login-username" required class="p-[0.2rem] font-barlow text-[0.9rem] border border-solid border-richBlack rounded-sm">
+                    <input id="login-username" required class="p-[0.2rem] font-barlow text-[0.9rem] border border-solid border-darkBlue rounded-sm">
                 </div>
                 <div class="w-[200px] flex flex-col gap-1">
                     <label for="login-email">Email</label>
-                    <input id="login-email" type="email" autocomplete="email" class="p-[0.2rem] font-barlow text-[0.9rem] border border-solid border-richBlack rounded-sm">
+                    <input id="login-email" type="email" autocomplete="email" class="p-[0.2rem] font-barlow text-[0.9rem] border border-solid border-darkBlue rounded-sm">
                 </div>
-                <button type="submit" class="px-3 py-2 font-barlow text-white text-[1.2rem] font-medium bg-eminence rounded-xl cursor-pointer flex items-center border-none">Log In</button>
+                <button type="submit" class="px-3 py-2 font-barlow text-white text-[1.2rem] font-medium bg-darkBlue rounded-xl cursor-pointer flex items-center border-none">Log In</button>
             </form>
         </div>
     </div>

hugo/layouts/404.html

@@ -3,6 +3,7 @@
 
 <head>
     {{ partial "oct-head" . }}
+    <link rel="stylesheet" href="/css/styles.css">
 </head>
 
 <body class="flex flex-col min-h-screen m-0 bg-brightGray">
@@ -13,11 +14,11 @@
                 <h1 class="text-[2.25rem] leading-[2.5rem] font-bold my-[0.83em]">Page Not Found</h1>
                 <h2 class="text-[1.5rem] leading-[1.75rem] font-bold my-[0.83em]">Couldn't find what you were looking for? Maybe we can help.</h2>
                 <div class="flex justify-center gap-8 md:flex-row flex-col">
-                    <a class="px-3 py-2 font-barlow text-white text-[1.2rem] font-medium bg-eminence rounded-xl cursor-pointer flex items-center border-none leading-8" href="https://www.typefox.io/">Get Support</a>
-                    <a class="px-3 py-2 font-barlow text-white text-[1.2rem] font-medium bg-eminence rounded-xl cursor-pointer flex items-center border-none leading-8" href="/">Back to Homepage</a>
+                    <a class="px-3 py-2 font-barlow text-white text-[1.2rem] font-medium bg-darkBlue rounded-xl cursor-pointer flex items-center border-none leading-8" href="https://www.typefox.io/">Get Support</a>
+                    <a class="px-3 py-2 font-barlow text-white text-[1.2rem] font-medium bg-darkBlue rounded-xl cursor-pointer flex items-center border-none leading-8" href="/">Back to Homepage</a>
                 </div>
             </div>
-        </section>    
+        </section>
     </main>
     {{ partial "oct-footer" . }}
 </body>

hugo/layouts/oct/baseof.html

@@ -7,7 +7,11 @@
 </head>
 
 <body class="flex flex-col min-h-screen m-0 bg-brightGray">
-    {{ partial "oct-header" . }}
+    <div class="w-full bg-[#fefaf4] bg-[url(/assets/header-background.webp)] bg-cover bg-center">
+        {{ partial "oct-header" . }}
+        {{ block "hero" . }}
+        {{ end }}
+    </div>
     <main class="flex-grow flex-shrink-0 basis-auto">
         {{ block "main" . }}
         {{ end }}

hugo/layouts/oct/landing.html

@@ -0,0 +1,19 @@
+{{ define "hero" }}
+<section class="flex justify-center items-center w-full pb-[50px] border-b-[5px] border-octoLilac">
+    <div class="flex flex-wrap justify-center gap-11 w-4/5 max-w-[1200px] mt-[35px]">
+        <div class="flex-[5] text-xl">
+            <div class="w-[90%] text-darkBlue font-urbanist">
+                <h1 class="text-[2.5rem] font-bold leading-[normal] mt-[0.83em] mb-4">Collaborative editing for your IDE or custom editor</h1>
+                <p class="font-urbanist my-[1em] leading-[normal]">Boost remote teamwork with open source technology. Share your editor contents and see changes in real-time.</p>
+                <p class="font-urbanist my-[1em] leading-[normal]">Extensible by design: connect custom editors from your IDE or web app. Deploy a collaboration server to suit your specific needs.</p>
+            </div>
+        </div>
+        <div class="flex-[4] hidden md:block pt-10">
+            <image src="/assets/home-hero.webp" alt="Abstract illustration of collaborative editing" class="w-full h-[250px] object-cover" />
+        </div>
+    </div>
+</section>
+{{ end }}
+{{ define "main" }}
+{{ .Content }}
+{{ end }}

hugo/layouts/partials/oct-footer.html

@@ -1,16 +1,15 @@
-<footer class="flex items-center justify-center w-full font-light text-white bg-eminence font-barlow">
-    <div class="flex justify-center items-center gap-4 py-4 w-4/5 max-w-[1300px]">
+<footer class="flex items-center justify-center w-full font-light text-white bg-darkBlue font-barlow text-xs md:text-base">
+    <div class="flex justify-center items-center gap-3 md:gap-4 py-8 w-[90%] max-w-[1300px]">
         <a href="https://www.eclipse.org/legal/privacy/" class="text-center hover:underline">Privacy Policy</a>
-        <p class="my-[1em] px-2"> • </p>
+        <p class="md:px-2"> • </p>
         <a href="https://www.eclipse.org/legal/terms-of-use/" class="text-center hover:underline">Terms of Use</a>
-        <p class="px-2"> • </p>
+        <p class="md:px-22"> • </p>
         <a href="https://www.eclipse.org/legal/copyright/" class="text-center hover:underline">Copyright Agent</a>
-        <p class="px-2"> • </p>
+        <p class="md:px-2"> • </p>
         <a href="https://www.eclipse.org/legal" class="text-center hover:underline">Legal</a>
-        <p class="px-2"> • </p>
+        <p class="md:px-2"> • </p>
         <div class="text-center">
-            &copy; 2025 by <a href="https://www.eclipse.org/" target="_blank" class="hover:underline">Eclipse
-                Foundation</a>
+            &copy; 2025 by <a href="https://www.eclipse.org/" target="_blank" class="hover:underline">Eclipse Foundation</a>
         </div>
     </div>
 </footer>

hugo/layouts/partials/oct-head.html

@@ -9,17 +9,17 @@
 <meta property="og:title" content="{{ .Title }}">
 <meta property="og:description" content="{{ .Description }}">
 <meta property="og:url" content="https://www.open-collab.tools{{ .Path }}">
-<meta property="og:image:type" content="image/jpeg">
+<meta property="og:image:type" content="image/webp">
 <meta property="og:image:width" content="1024">
 <meta property="og:image:height" content="1024">
-<meta property="og:image" content="https://www.open-collab.tools/assets/oct-space.jpg">
+<meta property="og:image" content="https://www.open-collab.tools/assets/header-background.webp">
 <meta name="twitter:card" content="summary">
 <meta name="twitter:title" content="{{ .Title }}">
 <meta name="twitter:description" content="{{ .Description }}">
-<meta name="twitter:image:type" content="image/jpeg">
+<meta name="twitter:image:type" content="image/webp">
 <meta name="twitter:image:width" content="1024">
 <meta name="twitter:image:height" content="1024">
-<meta name="twitter:image" content="https://www.open-collab.tools/assets/oct-space.jpg">
+<meta name="twitter:image" content="https://www.open-collab.tools/assets/header-background.webp">
 <link rel="icon" href="/assets/oct-logo-32.png" type="image/png" sizes="32x32">
 <link rel="icon" href="/assets/oct-logo-128.png" type="image/png" sizes="128x128">
-<link rel="icon" href="/assets/logo.jpg" type="image/jpeg" sizes="512x512">
+<link rel="icon" href="/assets/oct-logo-512.png" type="image/png" sizes="512x512">

hugo/layouts/partials/oct-header.html

@@ -1,21 +1,16 @@
-<header class="w-full flex justify-center sticky bg-richBlack">
-    <div class="flex flex-wrap justify-between items-center py-4 max-w-[1300px] w-[85%]">
+<header class="w-full flex justify-center sticky">
+    <div class="flex flex-wrap justify-between items-center py-4 gap-y-8 max-w-[1300px] w-[85%]">
         <a href="/#" class="no-underline">
-            <div class="flex items-center">
-                <img src="/assets/logo.jpg" alt="Open Collaboration Tools Logo" class="w-[110px] h-[110px]">
-                <h1 class="w-[140px] my-[0.67em] text-[32px] font-barlow text-columbiaBlue md:text-[40px] leading-[normal]">Open Collaboration Tools</h1>
-            </div>
+            <img src="/assets/oct-logo-full.svg" alt="Open Collaboration Tools" class="h-[110px]">
         </a>
         <div class="flex-grow"></div>
         <nav class="flex items-center">
-            <a href="/playground" class="ml-6 font-urbanist font-bold text-columbiaBlue hover:underline">Playground</a>
-            <a href="https://github.com/TypeFox/open-collaboration-tools/discussions" class="ml-6 font-urbanist font-bold text-columbiaBlue hover:underline">Community</a>
-            <a href="https://www.typefox.io" class="ml-6 font-urbanist font-bold text-columbiaBlue hover:underline">Support</a>
-        </nav>
-        <nav class="flex items-center">
+            <a href="/playground" class="ml-6 font-urbanist font-bold text-darkBlue hover:underline">Playground</a>
+            <a href="https://github.com/TypeFox/open-collaboration-tools/discussions" class="ml-6 font-urbanist font-bold text-darkBlue hover:underline">Community</a>
+            <a href="https://www.typefox.io" class="ml-6 font-urbanist font-bold text-darkBlue hover:underline">Support</a>
             <a href="https://github.com/TypeFox/open-collaboration-tools" target="_blank" class="ml-6">
-                <img src="/assets/github-mark.svg" alt="GitHub Repository" class="w-[43px] h-[43px]">
+                <img src="/assets/github-mark-header.svg" alt="GitHub Repository" class="w-[43px] h-[43px]">
             </a>
         </nav>
     </div>
-</header>
+</header>