See common-workflow-language/cwlcon2024@87f550d from refs/heads/main

Author: cwl-bot

conferences/2024/assets/main.css

@@ -17,14 +17,18 @@
     /* This is the same color as the CWL website menu background. */
     --medium-gray: rgb(244, 244, 244);
     --light-gray-color: #FAFAFA;
+    --black-color: #333333;
     --font-family: 'Roboto',sans-serif;
+    --font-size: 16px;
 }
 
 body {
     display: flex;
     min-height: 100vh;
     flex-direction: column;
     font-family: var(--font-family);
+    font-size: calc(var(--font-size) + 0.390625vw);
+    color: var(--black-color);
 }
 
 /*
@@ -67,13 +71,13 @@ header div:nth-child(1) img {
 /* Middle column and children elements. */
 
 header div:nth-child(2) {
-    width: 50%;
+    width: 100%;
 }
 
 header div:nth-child(2) h1 {
     text-align: center;
     font-weight: bold;
-    font-size: 6vw;
+    font-size: 8vw;
     font-family: 'Roboto Slab',serif;
     color: var(--warm-red-font-color);
     text-shadow: var(--gray-color) 1px 1px 3px;
@@ -101,34 +105,6 @@ header div:nth-child(2) span:nth-child(3) {
 
 header div:nth-child(3) {
     width: 25%;
-    background-color: var(--warm-red-font-color);
-    align-self: end;
-    overflow: hidden;
-    position: relative;
-}
-
-header div:nth-child(3):before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    border-width: 0 0 16px 16px;
-    border-style: solid;
-    border-color: var(--light-gray-color) var(--cold-red-font-color) var(--cold-red-font-color) var(--light-gray-color);
-    background: var(--cold-red-font-color);
-    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
-    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
-    box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
-    /* Firefox 3.0 damage limitation */
-    display: block; width: 0;
-}
-
-header div:nth-child(3) > span {
-    margin: 0 auto;
-    padding: 0.25rem 0;
-    display: inline-block;
-    color: white;
-    font-size: 2vw;
 }
 
 /*
@@ -164,11 +140,12 @@ nav > ol > li > a {
     display: block;
 }
 
-nav > ol > li > a.current {
+nav > ol > li > a:hover {
     color: var(--warm-red-font-color);
 }
 
-nav > ol > li > a:hover {
+/* TBD: This cannot be done via CSS-only; only with JavaScript. */
+nav > ol > li > a.current {
     color: var(--warm-red-font-color);
 }
 
@@ -185,33 +162,34 @@ main {
 }
 
 main > article {
-    max-width: 80%;
-    margin: 0 auto;
     flex: 1;
 }
 
 main > article > section {
-    margin: 4rem 0;
+    margin: 2rem auto;
+    width: 90%;
+    max-width: 90%;
+    overflow: hidden;
 }
 
 main > article > section > h1,
 main > article > section > h2,
 main > article > section > h3,
 main > article > section > h4 {
     color: var(--warm-red-font-color);
-    margin: 1rem 0;
+    margin: 0 0 1.5rem 0;
 }
 
 main > article > section > h2 {
-    font-size: 3vw;
+    font-size: clamp(1.75rem, 3vw, 3rem);
 }
 
 main > article > section > h3 {
-    font-size: 2.5vw;
+    font-size: clamp(1.5rem, 2.5vw, 2.5rem);
 }
 
 main > article > section > h4 {
-    font-size: 2vw;
+    font-size: clamp(1.25rem, 2vw, 2rem);
 }
 
 main > article > section > h1 > a,
@@ -232,7 +210,7 @@ main > article > section > h4 > a:hover:after{
 }
 
 main > article > section > p {
-    line-height: 1.5rem;
+    line-height: 1.5;
     margin: 0.5rem 0;
     text-align: justify;
 }
@@ -290,10 +268,20 @@ footer ol, footer ul {
 
 footer ol > li, footer ul > li {
     display: inline list-item;
-    list-style: circle;
+    list-style: none;
     margin: 0.75rem 0;
 }
 
+footer ol > li::after, footer ul > li::after {
+    content: '/';
+    margin-left: 0.5rem;
+}
+
+footer ol > li:last-child::after, footer ul > li:last-child::after {
+    content: '';
+    margin-left: 0;
+}
+
 footer a, footer a:active, footer a:visited {
     color: gray;
 }
@@ -323,3 +311,130 @@ strong {
     flex-direction: column;
     flex: 1;
 }
+
+/* The banner text. */
+
+.banner-text {
+    background-color: var(--warm-red-font-color);
+    align-self: end;
+    overflow: hidden;
+    position: relative;
+}
+
+.banner-text:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-width: 0 0 16px 16px;
+    border-style: solid;
+    border-color: var(--light-gray-color) var(--cold-red-font-color) var(--cold-red-font-color) var(--light-gray-color);
+    background: var(--cold-red-font-color);
+    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
+    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
+    box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
+    /* Firefox 3.0 damage limitation */
+    display: block; width: 0;
+}
+
+.banner-text > * {
+    margin: 0 auto;
+    padding: 0.25rem 0;
+    display: inline-block;
+    color: white;
+    font-size: 1.5rem;
+}
+
+/* Hide the second banner. This is displayed only on smaller viewports. */
+
+main > article .banner-text {
+    display: none;
+}
+
+/*
+    For smaller viewports, like mobile.
+ */
+
+@media only screen and (max-width: 768px) {
+
+    header {
+        border: none;
+    }
+
+    header div:nth-child(1) {
+        width: 50%;
+    }
+
+    header div:nth-child(2) {
+        width: 100%;
+        text-align: right;
+        align-items: end;
+        margin-right: 1rem;
+    }
+
+    header div:nth-child(2) h1 {
+        color: var(--warm-red-font-color);
+    }
+
+    /* Hide the first banner. This is displayed only on wider viewports. */
+    header div.banner-text {
+        display: none;
+    }
+
+    /* Instead of a burger menu (hard to make it accessible, correctly, we use a horizontal-to-vertical menu approach.
+       Ref: https://www.accede-web.com/en/guidelines/rich-interface-components/hamburger-menu/.
+    */
+    nav > ol {
+        max-width: 100%;
+        display: block;
+    }
+
+    nav > ol > li + li:not(:first-child) {
+        border-top: 1px solid var(--gray-color);
+    }
+
+    nav > ol > li:hover {
+        background-color: var(--light-gray-color);
+    }
+
+    nav > ol > li > a {
+        max-width: 90%;
+        margin: 0 auto;
+        padding: 1rem 0;
+        background-color: transparent;
+    }
+
+    main > article .banner-text {
+        display: block;
+        margin: 0;
+        padding: 1rem 0;
+    }
+
+    main > article .banner-text > * {
+        display: block;
+        font-size: 1.5rem;
+        width: 90%;
+        margin: 0 auto;
+    }
+
+    main > article .banner-text:before {
+        display: none;
+    }
+
+    footer > * {
+        max-width: 100%;
+        margin: 0 1rem;
+        text-align: left;
+    }
+
+    footer ol > li, footer ul > li {
+        display: list-item;
+        list-style: circle;
+        margin: 0.75rem 1rem;
+    }
+
+    footer ol > li::after, footer ul > li::after {
+        content: none;
+        margin: 0;
+    }
+}

conferences/2024/index.html

@@ -8,7 +8,8 @@
     <link rel="stylesheet" type="text/css" media="all" href="assets/main.css"/>
     <meta name="resource-type" content="document">
     <meta name="distribution" content="global">
-    <meta name="KeyWords" content="Conference">
+    <meta name="KeyWords" content="CWL, Common Workflow Language, Conference">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>CWLCon 2024</title>
 </head>
 
@@ -19,7 +20,7 @@
             <a href="https://www.commonwl.org/">
                 <img
                     src="assets/cwl_logo.png"
-                    alt="Conference Template Banner"
+                    alt="CWL Logo"
                 />
             </a>
         </div>
@@ -28,7 +29,7 @@ <h1 role="doc-subtitle">
                 <a href="">CWLCon 2024</a>
             </h1>
         </div>
-        <div>
+        <div class="banner-text">
             <span>Week of May 13th, 2024</span>
             <span>Amsterdam, NL & online!</span>
         </div>
@@ -59,6 +60,13 @@ <h1 role="doc-subtitle">
 
     <main>
         <article>
+            <div class="banner-text">
+                <p>
+                    <span>Week of May 13th, 2024</span>
+                    <span>Amsterdam, NL & online!</span>
+                </p>
+            </div>
+
             <section id="home">
                 <h2><a href="#home">CWLCon 2024</a></h2>
 
@@ -196,16 +204,18 @@ <h2><a href="#sponsors">Sponsors</a></h2>
             <div class="row">
                 <div class="column">
                     <div>
-                        <span><strong>Previous Conference Links:</strong></span>
-                        <a href="https://cwl.discourse.group/t/schedule-of-confirmed-talks/753">CWLCon2023</a> /
-                        <a href="https://cwl.discourse.group/t/2022-cwl-conference-feb-28-mar-4-2022/519">CWLCon2022</a> /
-                        <a href="https://pad.sfconservancy.org/p/CWLcon2021">CWLCon2021</a>
-
+                        <span><strong>Previous Conference Links</strong></span>
+                        <ul>
+                            <li><a href="https://cwl.discourse.group/t/schedule-of-confirmed-talks/753">CWLCon2023</a></li>
+                            <li><a href="https://cwl.discourse.group/t/2022-cwl-conference-feb-28-mar-4-2022/519">CWLCon2022</a></li>
+                            <li><a href="https://pad.sfconservancy.org/p/CWLcon2021">CWLCon2021</a></li>
+                        </ul>
                     </div>
                 </div>
             </div>
 
-            <p>Copyright &copy; 2023-2024 <a href="https://www.commonwl.org/">Common Workflow Language</a> &mdash; <a href="#code-of-conduct">Code of Conduct</a></p>
+            <p><a href="https://www.commonwl.org/">Common Workflow Language</a> &mdash; <a href="#code-of-conduct">Code of Conduct</a></p>
+            <p>Copyright &copy; 2023-2024</p>
         </div>
     </footer>