Style improvements.

Author: nikoshell

src/components/ui/Headline.astro

@@ -6,11 +6,37 @@ const isAnchor = !!id;
 const isLink = !!href;
 ---
 
-<Tag id={isAnchor ? id : undefined} class={`m-5 py-2 text-center font-bold text-6xl`}>
+<Tag id={isAnchor ? id : undefined} class={`m-5 py-2 text-center font-bold max-w-[90vw]`}>
   {isAnchor && (
     <a href={`#${id}`} aria-label={`Jump to ${id}`}>
       {Title}
     </a>
   )}
   {isLink && <a aria-label="Read more about {Title}" href={href} class="hover:underline">{Title}</a> }
 </Tag>
+
+<style>
+h1 {
+  font-size: calc(1.9rem + 1.5vw + 0.8vh);
+}
+
+h2 {
+  font-size: calc(1.75rem + 1.5vw + 0.8vh);
+}
+
+h3 {
+  font-size: calc(1.5rem + 1.2vw + 0.6vh);
+}
+
+h4 {
+  font-size: calc(1.25rem + 1vw + 0.4vh);
+}
+
+h5 {
+  font-size: calc(1rem + 0.8vw + 0.3vh);
+}
+
+h6 {
+  font-size: calc(0.875rem + 0.6vw + 0.2vh);
+}
+</style>

src/content/pages/explore.mdx

@@ -3,7 +3,6 @@ title: More Tips on Exploring Prague
 subtitle: At EuroPython, many attendees will come with their families. While not attending the conference, why not go and explore Prague and the surrounding area?
 ---
 
-import { Image } from "astro:assets";
 import venueImage from "./images/prague.jpg";
 
 # Prague Exploration Tips

src/data/links.json

@@ -5,7 +5,7 @@
       "items": [
         {
           "name": "Sessions Previews",
-          "path": "/programme/sessions"
+          "path": "/sessions"
         },
         {
           "name": "Tracks",

src/pages/speaker/[slug].astro

@@ -5,6 +5,7 @@ import Prose from "../../components/prose/prose.astro";
 import { Picture } from "astro:assets";
 import { getEntry, render } from 'astro:content';
 import Markdown from "@ui/Markdown.astro";
+import Headline from "@ui/Headline.astro";
 
 export async function getStaticPaths() {
   const entries = await getCollection("speakers");
@@ -15,6 +16,8 @@ export async function getStaticPaths() {
 }
 
 const {entry} = Astro.props;
+console.log(entry.data.avatar);
+
 const sessions = await getEntries(entry.data.submissions);
 
 // Get @username from Twitter URL
@@ -65,12 +68,8 @@ function ensureHttps(str: string): string {
 ---
 
 <Layout title={entry.data.name} description={`Profile of ${entry.data.name}`}>
-  <article class="mx-auto pb-12 px-6">
-    <h1
-      class="relative font-title text-primary font-bold mb-[0.6em] [&>a]:border-0 [&>a]:text-inherit text-7xl"
-    >
-      {entry.data.name}
-    </h1>
+  <article class="pb-12 px-6">
+    <Headline as="h1" id="speaker" title={entry.data.name} />
 
     {
       (entry.data.avatar &&
@@ -79,7 +78,9 @@ function ensureHttps(str: string): string {
             src={entry.data.avatar}
             alt={entry.data.name}
             inferSize={true}
-            class="max-w-[240px] sm:max-w-[540px] xl:max-w-[720px]  max-h-[240px] sm:max-h-[540px] xl:max-h-[720px] object-scale-down"
+            widths={[400, 800, 1200]}
+            sizes="(max-width: 1200px) 100vw, 1200px"
+            class="max-w-[240px] sm:max-w-[540px] xl:max-w-[620px]  max-h-[240px] sm:max-h-[440px] xl:max-h-[440px] object-scale-down"
           />
         </div>
       )

src/pages/speakers.astro

@@ -45,7 +45,7 @@ const description =
       <h1>Speakers</h1>
     </Prose>
 
-    <div class="flex text-3xl font-bold flex-wrap mb-6">
+    <div class="flex text-3xl font-bold flex-wrap my-10">
       {
         letters.map((letter) => (
           <h3 class="mr-2">