Iterate on the design a bit (#16)

CarlSchwan · web-flow · commit 753267d6ed2c · 2025-05-25T18:00:11.000+02:00
- Improve accessibility of links
- Use white background and adds some effects instead
- Add transparancy layer to the logo
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -12,8 +12,8 @@
     @apply my-2 max-w-5xl text-base list-disc list-inside;
   }
 
-  a {
-    @apply border-b border-dotted;
+  a:not(.no-underline) {
+    @apply underline underline-offset-4 decoration-2 hover:bg-blue-300 active:bg-blue-300 active:ring-5 ring-blue-300 hover:ring-5 focus:bg-blue-300 focus:ring-5 rounded-md focus:outline-0;
   }
 
   h2 {
diff --git a/content/_index.md b/content/_index.md
@@ -72,9 +72,9 @@ schedule:
        time: 18:00
 ---
 
-The (un)conference about Free Software and Open Data for mobility and public transport.<br/>
-<span class="font-bold">Save the date: 17/18th of October in Vienna at
-        <a href="https://openinnovation.oebb.at/de/spaces">ÖBB's Innovation Factory!</a></span>
+The (un)conference about Free Software and Open Data for mobility and public transport.
+
+**Save the date: 17/18th of October in Vienna at [ÖBB's Innovation Factory!](https://openinnovation.oebb.at/de/spaces)**
 
 Connect with open source and open data communities from
 Transitous, MOTIS, OpenStreetMap, OpenTripPlanner, and many more!
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -3,7 +3,8 @@
 <head>
 {{ partial "head.html" . }}
 </head>
-<body class="font-sans leading-normal tracking-normal text-lg bg-[#cde6f1]">
+<body class="font-sans leading-normal tracking-normal text-lg">
+  <div aria-hidden="true" class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"><div style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%);" class="relative left-[calc(50%-11rem)] aspect-1155/678 w-144.5 -translate-x-1/2 rotate-30 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-288.75"></div></div>
   <header class="mx-auto flex flex-col justify-center items-center">{{ partial "header.html" . }}</header>
   <main class="mx-auto flex flex-col justify-center items-center">
     {{ block "main" . }}{{ end }}
diff --git a/layouts/shortcodes/buttonlink.html b/layouts/shortcodes/buttonlink.html
@@ -1,5 +1,5 @@
 <div class="mt-10">
-  <a class="w-92 bg-blue-300 hover:bg-blue-400 rounded-2xl p-4 text-base text-center"
+  <a class="rounded-md bg-blue-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-blue-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 no-underline"
    href="{{ .Get "href" }}">
   {{ .Inner }}
   </a>
diff --git a/layouts/shortcodes/schedule.html b/layouts/shortcodes/schedule.html
@@ -7,7 +7,7 @@ <h3 class="text-2xl mt-10 font-semibold tracking-tight text-blue-900">
         {{ .date }}
       </h3>
       <ol role="list"
-          class="mt-4 space-y-4 bg-white/60 px-6 py-4 text-center shadow-xl shadow-blue-900/5 backdrop-blur-sm h-full">
+          class="mt-4 space-y-4 bg-blue-100/60 px-6 py-4 text-center h-full">
         {{- range $index, $event := .events }}
         <li class="schedule-event">
           {{- if ne $index 0 }}
diff --git a/static/logo.png b/static/logo.png

Original file line number	Diff line number	Diff line change
`@@ -12,8 +12,8 @@`
`12`	`12`	`@apply my-2 max-w-5xl text-base list-disc list-inside;`
`13`	`13`	`}`
`14`	`14`
`15`		`- a {`
`16`		`- @apply border-b border-dotted;`
	`15`	`+ a:not(.no-underline) {`
	`16`	`+ @apply underline underline-offset-4 decoration-2 hover:bg-blue-300 active:bg-blue-300 active:ring-5 ring-blue-300 hover:ring-5 focus:bg-blue-300 focus:ring-5 rounded-md focus:outline-0;`
`17`	`17`	`}`
`18`	`18`
`19`	`19`	`h2 {`