Design fixes

content/_data/constants.yml

@@ -34,108 +34,111 @@ header_nav:
       tagline: Making the power of quantum computing accessible
       subtitle: FiQCI – Finnish quantum-computing infrastructure
       announcement:
-        text: Open call for pilot access to Helmi quantum computer now open!
+        text: Access to VTT Q50 for accepted projects now open!
         link:
-          title: How to access Helmi, instructions
+          title: How to access Q50, instructions
           href: FIXME
       buttons:
         - title: How to get access
-          href: "#get-access"
+          href: "/access"
         - title: Blogs and instructions
           href: /publications
         - title: About FiQCI
           href: "#about-fiqci"
 
+  mission:
+    links:
+      about:
+          title: Read more about FiQCI
+          href: /dev/about
+      access:
+          title: How to get access
+          href: /dev/access
+
   access_cards:
-      - title: LUMI
-        href: FIXME
-        teaser: /assets/images/FiQCI-banner.jpg
-        description: |-
-          The backbone of the classical HPC resources in FiQCI, and the portal for quantum computing resources, 
-          is the pan-European EuroHPC LUMI supercomputer. LUMI is the fastest and greenest supercomputer in Europe, 
-          hosted by CSC in Kajaani, Finland.
-        links:
-          - title: Getting started with Lumi
-            href: https://www.lumi-supercomputer.eu/get-started/
-      - title: Helmi - VTT Q5
-        href: FIXME
-        teaser: /assets/images/vtt-images/VTT_lab-2.jpg
-        description: |-
-          Helmi, the first Finnish quantum computer, co-developed by VTT and IQM Quantum Computers, 
-          is operated by VTT in Espoo, Finland. Helmi is based on superconducting technology, 
-          and presently provides five qubits. Upgrades to 20, then 50 qubits is planned for the near future.
-        links:
-          - title: How to access Helmi, instructions
-            href: FIXME
-          - title: Read more about Helmi
-            href: FIXME
-      - title: Kvasi
-        href: FIXME
-        teaser: /assets/images/FiQCI-banner.jpg
-        description: |-
-          Kvasi, the Atos Quantum Learning Machine or Qaptiva is a quantum computing simulator with which you can learn 
-          to use and develop new quantum algorithms. Kvasi provides a platform for developing and simulating quantum 
-          algorithms in both ideal and realistic, noisy conditions. Kvasi is capable of simulating algorithms for 
-          quantum computers of 30+ qubits.
-        links:
-          - title: How to access Kvasi, instructions
-            href: FIXME
-          - title: Read more about Kvasi
-            href: FIXME
+    - title: Quantum computers
+      href: /access/#quantum
+      teaser: /assets/images/FiQCI-banner.jpg
+      description: |-
+        The Finnish quantum-computing infrastructure (FiQCI) provides access to quantum computers
+        through the LUMI supercomputer environment. Currently there are two quantum computers
+        available for use: VTT Q5 (Helmi), and VTT Q50
+      links:
+        - title: Quantum computer resources
+          href: /access/#quantum
+    - title: Supercomputers
+      href: /access/#super
+      teaser: /assets/images/vtt-images/VTT_lab-2.jpg
+      description: |-
+        The backbone of the classical HPC resources in FiQCI, and the portal for quantum computing resources, 
+        is the pan-European EuroHPC LUMI supercomputer.
+      links:
+        - title: Supercomputer resources
+          href: /access/#super
+    - title: Emulation resources
+      href: /access/#emulation
+      teaser: /assets/images/FiQCI-banner.jpg
+      description: |-
+        With the LUMI supercomputer it is possible to emulate quantum computers with up to 40+ qubits.
+        This allows for testing and development of quantum algorithms without the need for actual quantum hardware.
+      links:
+        - title: Emulation resources
+          href: /access/#emulation
 
 "/access/":
   quantum_resources:
-    - name: VTT Q5 Helmi
+    - name: VTT Q5 (Helmi)
       desc: |-
-        The VTT Q5 "Helmi" is the first Finnish quantum computer. Helmi is based on superconducting technology and provides
-        5 qubits in a star-shape topology. Hybrid HPC+QC access was opened in 2022. Helmi is operated by VTT, 
-        and was co-developed with IQM Quantum Computers.
+        Helmi (VTT Q5), the Finnish quantum computer operated by VTT, co-developed with IQM.
+        Helmi is based on superconducting technology, and presently provides five qubits.
+        Upgrades to 20, then 50 qubits is planned for the near future. Helmi is accessible
+        through the LUMI supercomputer environment.
       image: "/assets/images/vtt-images/VTT_lab-2.jpg"
       links:
-        - link: FIXME
-          teaser: "How to access Helmi, instructions"
+        - link: ""
+          teaser: "How to access VTT Q5, instructions"
           icon: mdiArrowRight
-        - link: FIXME
-          teaser: "Read more about Helmi (VTT website)"
+        - link: ""
+          teaser: "Read more about VTT Q5 (VTT website)"
           icon: mdiOpenInNew
 
     - name: VTT Q50
       desc: |-
-        VTT Q50 is based on superconducting technology and provides 53 qubits in a square grid topology.
-        Hybrid HPC+QC access was opened in 2025. VTT Q50 is operated by VTT, 
-        and was co-developed with IQM Quantum Computers.
+        VTT Q50 is the newest Finnish quantum computer. It is operated by VTT, and was co-developed with IQM.
+        Q50, like Q5, is based on superconducting technology, and presently provides 50 qubits.
+        Q50 is accessible through the LUMI supercomputer environment.
       image: "/assets/images/vtt-images/VTT_lab-2.jpg"
       links:
-        - link: FIXME
+        - link: ""
           teaser: "How to access VTT Q50, instructions"
           icon: mdiArrowRight
-        - link: FIXME
+        - link: ""
           teaser: "Read more about VTT Q50 (VTT website)"
           icon: mdiOpenInNew
 
   supercomputer_resources:
     - name: LUMI
       desc: |-
-        Presently the backbone of the classical HPC and AI resources in FiQCI.
-        The pre-exascale EuroHPC LUMI supercomputer serves as the portal for hybrid HPC+QC.
-        LUMI is hosted by CSC in Kajaani, Finland.
+        The backbone of the classical HPC resources in FiQCI, and the portal for quantum computing resources, 
+        is the pan-European EuroHPC LUMI supercomputer. LUMI is the fastest and greenest supercomputer in Europe, 
+        hosted by CSC in Kajaani, Finland.
       image: "/assets/images/FiQCI-banner.jpg"
       links:
-        - link: FIXME
+        - link: ""
           teaser: "How to access Lumi"
           icon: mdiArrowRight
-        - link: FIXME
+        - link: ""
           teaser: "Read more about LUMI (LUMI website)"
           icon: mdiOpenInNew
 
   emulation_resources:
-    - name: Quantum emulation with LUMI
+    - name: Quantum emuation with LUMI
       desc: |-
-        The LUMI supercomputer enables full emulation and simulation of quantum algorithms of up to 44 qubits.
+        With the LUMI supercomputer it is possible to emulate quantum computer with upto 40+ qubits.
       image: "/assets/images/FiQCI-banner.jpg"
       links:
-        - link: FIXME
-          teaser: "Quantum emulation dosumentation"
+        - link: ""
+          teaser: "Quantum emulation documentation"
           icon: mdiArrowRight
 
 "/about/":
@@ -205,3 +208,15 @@ header_nav:
 
       helmi-link-url: /publications/2022-11-01-Helmi_pilot
       helmi-link-text: Additionally, users should also acknowledge using Helmi if applicable
+
+"/status/":
+  quantum-computers:
+    - name: VTT Q5 (Helmi)
+      qubits: 5
+      basis: "PRX, CZ"
+      status_url: FIXME
+
+    - name: VTT Q50
+      qubits: 50
+      basis: "PRX, CZ"
+      status_url: FIXME

content/_includes/footer.html

@@ -1,7 +1,7 @@
 {% assign constants = site.data.constants %}
 <footer class="p-5">
   <div class="max-w-fit mx-auto px-1">
-    <h2 class="text-xl">{{ constants.title | escape }}</h2>
+    <h2 class="">{{ constants.title | escape }}</h2>
 
     <div class="text-sm md:flex">
       <div class="w-1/2 md:w-full">

content/_includes/react/section-root.html

@@ -1,6 +1,6 @@
-<section class="mx-2 sm:mx-8 lg:mx-[100px] py-6">
+<section class="mx-2 sm:mx-8 lg:mx-[100px] py-[32px] min-[2600px]:mx-auto min-[2600px]:max-w-[50vw]">
   <div class="flex items-center justify-between mb-6">
-    <h2 class="text-3xl font-bold" id="{{ include.heading | slugify }}">{{ include.heading }}</h2>
+    <h2 class="text-on-white" id="{{ include.heading | slugify }}">{{ include.heading }}</h2>
   </div>
   <div id='{{ include.id }}' class="not-prose"></div>
 </section>

content/_layouts/home.html

@@ -2,8 +2,11 @@
 layout: base
 ---
 
+
 {% assign about_data = site.data.constants["/about/"] %}
 
+{% assign mission_data = site.data.constants["/"].mission.links %}
+
 {%- include react/root.html id='hero' -%}
 
 {{ content }}
@@ -14,7 +17,7 @@
             <div class="hidden md:flex">
                 <div class="flex-auto mt-8 pt-12 mr-0 lg:mr-32 md:mr-20">
                     <div class="mb-6 ">
-                        <h2 id="about-fiqci" class="text-3xl font-bold">FiQCI mission</h2>
+                        <h2 id="about-fiqci" class="">FiQCI mission</h2>
                     </div>
                     <div class="pb-4">
                         <p class="mb-4">
@@ -26,24 +29,28 @@ <h2 id="about-fiqci" class="text-3xl font-bold">FiQCI mission</h2>
 
                         <div class="mt-4">
                             <a
-                                href="/about/"
+                                href= {{ mission_data.about.href }}
                                 class="text-sky-200 hover:underline font-bold"
                             >
                                 <div class="sm:mx-0 flex items-center gap-3">
-                                    <div class="text-sm">Read more about FiQCI</div>
-                                    <CIcon class="text-lg" path={mdiArrowRight} />
+                                    <div class="text-sm">{{ mission_data.about.title }}</div>
+                                    <svg class="icon" viewBox="0 0 24 24">
+                                        <path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z" />
+                                    </svg>
                                 </div>
                             </a>
                         </div>
 
                         <div class="mt-4">
                             <a
-                                href="/access/"
+                                href={{ mission_data.access.href }}
                                 class="text-sky-200 hover:underline font-bold"
                             >
                                 <div class="sm:mx-0 flex items-center gap-3">
-                                    <div class="text-sm">How to get access</div>
-                                    <CIcon class="text-lg" path={mdiArrowRight} />
+                                    <div class="text-sm">{{ mission_data.access.title }}</div>
+                                    <svg class="icon" viewBox="0 0 24 24">
+                                        <path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z" />
+                                    </svg>
                                 </div>
                             </a>
                         </div>
@@ -65,7 +72,7 @@ <h2 id="about-fiqci" class="text-3xl font-bold">FiQCI mission</h2>
             <div class="flex md:hidden">
                 <div class="flex-auto mt-8 pt-12">
                     <div class="mb-6 ">
-                        <h2 id="about-fiqci" class="text-3xl font-bold">FiQCI mission</h2>
+                        <h2 id="about-fiqci" class="">FiQCI mission</h2>
                     </div>
                     <div class="w-full pb-4 md:pb-0 md:min-w-64">
                         <section class="bg-[#0066CC] text-white text-left font-bold text-lg py-8 px-2 sm:px-8">
@@ -88,24 +95,29 @@ <h2 id="about-fiqci" class="text-3xl font-bold">FiQCI mission</h2>
 
                         <div class="mt-4">
                             <a
-                                href="/about/"
+                                href={{ mission_data.about.href }}
                                 class="text-sky-200 hover:underline font-bold"
                             >
                                 <div class="sm:mx-0 flex items-center gap-3">
-                                    <div class="text-sm">Read more about FiQCI</div>
-                                    <CIcon class="text-lg" path={mdiArrowRight} />
+                                    <div class="text-sm">{{ mission_data.about.title }}</div>
+                                    <svg class="icon" viewBox="0 0 24 24">
+                                        <path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z" />
+                                    </svg>
                                 </div>
                             </a>
                         </div>
 
                         <div class="mt-4">
+                            {{ mission_data.access.title }}
                             <a
-                                href="/access/"
+                                href={{ mission_data.access.href }}
                                 class="text-sky-200 hover:underline font-bold"
                             >
                                 <div class="sm:mx-0 flex items-center gap-3">
-                                    <div class="text-sm">How to get access</div>
-                                    <CIcon class="text-lg" path={mdiArrowRight} />
+                                    <div class="text-sm">{{ mission_data.access.title }}</div>
+                                    <svg class="icon" viewBox="0 0 24 24">
+                                        <path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z" />
+                                    </svg>
                                 </div>
                             </a>
                         </div>

content/_layouts/page.html

@@ -5,7 +5,7 @@
 {%- include react/root.html id='banner' -%}
 
 <div class='flex flex-col items-top mb-2'>
-  <div class='mx-2 sm:mx-8 lg:mx-[100px] flex flex-col min-[2600px]:mx-auto min-[2600px]:max-w-[50vw]'>
+  <div class='mx-2 sm:mx-8 lg:mx-[100px] flex flex-col min-[2600px]:mx-auto min-[2600px]:w-[50vw]'>
     <div class='col-span-2 mt-4 mb-4'>
       {%- include react/root.html id='breadcrumbs' -%}
     </div>

content/_layouts/post.html

@@ -8,13 +8,13 @@
 
 {%- include react/root.html id='banner' -%}
 
-<article itemscope itemtype="http://schema.org/BlogPosting">
+<article class="pb-[60px] itemscope itemtype="http://schema.org/BlogPosting">
  <div id="blogView" class='flex flex-col items-top mb-2'>
-    <div class='2xl:grid 2xl:grid-cols-5 mx-2 sm:mx-8 lg:mx-[100px] flex flex-col gap-8 min-[2600px]:mx-auto min-[2600px]:max-w-[50vw]'>
+    <div class='lg:grid lg:grid-cols-5 mx-2 sm:mx-8 lg:mx-[100px] flex flex-col gap-8 min-[2600px]:mx-auto min-[2600px]:max-w-[50vw]'>
         <div class='col-span-5 mt-4'>
             {%- include react/root.html id='breadcrumbs' -%}
         </div>
-        <div class='col-span-1' id="author-data" >
+        <div class='col-span-1 lg:col-span-3 2xl:col-span-1 text-on-white text-[14px]' id="author-data" >
             <div class='flex flex-row gap-2 2xl:flex-row'>
             <img src='{{author_info.avatar}}' alt='Author' class='w-20' />
             <div class='flex flex-col gap-4'>
@@ -23,7 +23,7 @@
             </div>
         </div>
         </div>
-        <div class='col-span-3' id="tags-data" data-content="{{ page.tags | strip_newlines | escape }}">
+        <div class='col-span-3 max-w-[740px] 2xl:justify-self-center' id="tags-data" data-content="{{ page.tags | strip_newlines | escape }}">
             {%- include react/root.html id='tags' -%}
             <time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
               {%- assign date_format = constants.date_format | default: "%b %-d, %Y" -%}
@@ -43,7 +43,7 @@ <h2 class="text-[1.5em] font-[700]" >Give feedback!</h2>
                 {%- include react/root.html id='references-accordion' -%}
               </div>
         </div>
-        <div class='col-span-5 2xl:col-span-1 2xl:w-full'>
+        <div class='lg:block lg:sticky lg:top-[150px] col-span-5 lg:col-span-2 2xl:col-span-1 xl:w-full xl:max-w-screen max-w-[740px]' style='height:fit-content;'>
             {%- include react/root.html id='read-next' -%}
         </div>
     </div>

content/pages/about.md

@@ -7,34 +7,34 @@ react: true
 
 {% assign about_data = site.data.constants.["/about/"] %}
 
-<div class="lg:grid lg:grid-cols-2 gap-8">
-  <h1 class="text-3xl font-bold col-span-2">About FiQCI</h1>
+<div class="mt-[24px] grid grid-cols-1 lg:grid lg:grid-cols-2 gap-8">
+  <h1 class="text-3xl text-on-white font-bold col-span-1 lg:col-span-2">About FiQCI</h1>
   <div class="col-span-1 lg:mr-10">
-    <p>{{ about_data.desc }}</p>
+    <p class="text-on-white">{{ about_data.desc }}</p>
     <br>
-    <p>{{ about_data.mission }}</p>
+    <p class="text-on-white">{{ about_data.mission }}</p>
     <br>
-    <p>{{ about_data.maintain }}</p>
+    <p class="text-on-white">{{ about_data.maintain }}</p>
   </div>
   <div class="col-span-1 lg:ml-10">
-    <h2 class="text-xl font-bold pb-2">Scientific and Technical Advisory Group</h2>
-    <p>{{ about_data.advisory-group.desc }}</p>
+    <h2 class="text-on-white pb-2">Scientific and Technical Advisory Group</h2>
+    <p class="text-on-white">{{ about_data.advisory-group.desc }}</p>
     <ul class="pt-2 pl-5 space-y-2 list-disc list-inside">
       {% for member in about_data.advisory-group.people %}
-      <li>{{ member.name }}, {{ member.institution }}, {{ member.country }}</li>
+      <li class="text-on-white">{{ member.name }}, {{ member.institution }}, {{ member.country }}</li>
       {% endfor %}
     </ul>
 
-    <h2 class="text-xl font-bold pt-4 pb-2">Management</h2>
+    <h2 class="pt-4 pb-2 text-on-white">Management</h2>
     <ul class="pt-0 pl-5 space-y-2 list-disc list-inside">
       {% for mgr in about_data.advisory-group.management.people %}
-      <li>{{ mgr.name }}, {{ mgr.institution }}, {{ mgr.title }}</li>
+      <li class="text-on-white">{{ mgr.name }}, {{ mgr.institution }}, {{ mgr.title }}</li>
       {% endfor %}
     </ul>
 
-    <h2 class="text-xl font-bold pt-4 pb-2">Acknowledgement</h2>
-    <p>{{ about_data.advisory-group.acknowledgement.desc }} "Finnish Quantum-Computing Infrastructure (https://fiqci.fi)".
-    <a class="underline" href="{{ about_data.advisory-group.acknowledgement.helmi-link-url }}">
+    <h2 class="text-on-white pt-4 pb-2">Acknowledgement</h2>
+    <p class="text-on-white">{{ about_data.advisory-group.acknowledgement.desc }} "Finnish Quantum-Computing Infrastructure (https://fiqci.fi)".
+    <a class="underline text-on-white" href="{{ about_data.advisory-group.acknowledgement.helmi-link-url }}">
       {{ about_data.advisory-group.acknowledgement.helmi-link-text }}
     </a></p>
   </div>