Update logos, fonts, and colors (#4407)

Signed-off-by: Ben Sherman <bentshermann@gmail.com>
Signed-off-by: Paolo Di Tommaso <paolo.ditommaso@gmail.com>
Co-authored-by: Paolo Di Tommaso <paolo.ditommaso@gmail.com>
Signed-off-by: Paolo Di Tommaso <paolo.ditommaso@gmail.com>

README.md

@@ -1,7 +1,7 @@
 <picture>
-  <source media="(prefers-color-scheme: dark)" srcset="https://github.com/nextflow-io/trademark/blob/master/nextflow2014_no-bg-bright.png">
-  <source media="(prefers-color-scheme: light)" srcset="https://github.com/nextflow-io/trademark/blob/master/nextflow2014_no-bg.png">
-  <img alt="Nextflow Logo" src="https://github.com/nextflow-io/trademark/blob/master/nextflow2014_no-bg.png">
+  <source media="(prefers-color-scheme: dark)" srcset="docs/_static/nextflow-logo-bg-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="docs/_static/nextflow-logo-bg-light.png">
+  <img alt="Nextflow Logo" src="docs/_static/nextflow-logo-bg-light.png">
 </picture>
 
 *"Dataflow variables are spectacularly expressive in concurrent programming"*

docs/_static/theme.css

@@ -1,30 +1,180 @@
+/* Inter font */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
 
-/* navbar -- Seqera logo */
+/* Degular font */
+@font-face {
+    font-family: "Degular";
+    src: url('degular/Degular-Regular.woff2');
+    src: url('degular/Degular-Regular.woff2') format('woff2'),
+         url('degular/Degular-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: "Degular";
+    src: url('degular/Degular-Italic.woff2');
+    src: url('degular/Degular-Italic.woff2') format('woff2'),
+         url('degular/Degular-Italic.woff') format('woff');
+    font-weight: normal;
+    font-style: italic;
+}
+@font-face {
+    font-family: "Degular";
+    src: url('degular/Degular-Bold.woff2');
+    src: url('degular/Degular-Bold.woff2') format('woff2'),
+         url('degular/Degular-Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+}
+@font-face {
+    font-family: "Degular";
+    src: url('degular/Degular-BoldItalic.woff2');
+    src: url('degular/Degular-BoldItalic.woff2') format('woff2'),
+         url('degular/Degular-BoldItalic.woff') format('woff');
+    font-weight: bold;
+    font-style: italic;
+}
 
-.wy-side-nav-search {
-    background-color: #27ae60;
+/* fonts */
+body {
+    font-family: 'Inter', sans-serif;
+}
+
+.btn {
+    font-family: 'Inter', sans-serif;
+}
+
+.rst-content .toctree-wrapper>p.caption,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+legend {
+    font-family: 'Degular', sans-serif;
+}
+
+/* colors */
+.rst-content .danger {
+    background: #FEEDEC;
+}
+
+.rst-content .danger .admonition-title {
+    background: #C3514D;
+}
+
+.rst-content .warning {
+    background: #FDF0E9;
+}
+
+.rst-content .warning .admonition-title {
+    background: #BC6437;
+}
+
+.rst-content .note {
+    background: #E8F2FF;
+}
+
+.rst-content .note .admonition-title {
+    background: #3787E5;
+}
+
+.rst-content .tip {
+    background: #E2F7F3;
+}
+
+.rst-content .tip .admonition-title {
+    background: #0CAE8E;
+}
+
+a, a:visited {
+    color: #3787E5;
 }
 
+a:hover {
+    color: #77B5FE;
+}
+
+.rst-content code,
+.rst-content tt,
+code {
+    color: #C3514D;
+}
+
+.wy-menu-vertical header,
 .wy-menu-vertical p.caption {
-    color: #27ae60;
+    color: #0DC09D;
+}
+
+.wy-menu-vertical a {
+    color: #EAEBEB;
+}
+
+.wy-menu-vertical a:hover {
+    background-color: #7B7B7B;
 }
 
 .wy-menu-vertical a:active {
-    background-color: #27ae60;
+    background-color: #0DC09D;
+}
+
+.wy-side-nav-search {
+    background-color: #0DC09D;
+}
+
+.wy-side-nav-search input[type=text] {
+    border-color: #0DC09D;
+}
+
+.wy-side-nav-search img {
+    background-color: #0DC09D;
+}
+
+.wy-nav-side {
+    background: #160F26;
+}
+
+.wy-nav-top {
+    background: #0DC09D;
+}
+
+.wy-nav-top a {
+    color: #fff;
+}
+
+.wy-nav-top img {
+    width: auto;
+    background-color: inherit;
+    border-radius: unset;
+}
+
+footer {
+    color: #7B7B7B;
+}
+
+#search-results .context {
+    color: #7B7B7B;
+}
+
+.rst-content code.literal,
+.rst-content tt.literal {
+    color: #C3514D;
 }
 
+/* Custom footer with logo */
 .nav-footer-logo {
     width: 300px;
     margin-top: 2rem;
-    border-top: 1px solid #666666;
+    border-top: 1px solid #7B7B7B;
     text-align: center;
     font-size: 80%;
 }
 
 .nav-footer-logo a {
     display: block;
     padding: 2rem 0 0.5rem;
-    color: #666666;
+    color: #7B7B7B;
 }
 
 .nav-footer-logo a img {
@@ -33,7 +183,9 @@
 }
 
 /* Version change admonitions */
-div.deprecated, div.versionadded, div.versionchanged {
+div.deprecated,
+div.versionadded,
+div.versionchanged {
     border-left: 0.2rem solid;
     border-radius: 0.25rem;
     box-shadow: 0 0.2rem 0.5rem var(--pst-color-shadow),0 0 0.0625rem var(--pst-color-shadow)!important;
@@ -45,11 +197,15 @@ div.deprecated, div.versionadded, div.versionchanged {
     transition: color .25s,background-color .25s,border-color .25s;
     vertical-align: middle;
 }
-div.deprecated>p, div.versionadded>p, div.versionchanged>p {
+div.deprecated>p,
+div.versionadded>p,
+div.versionchanged>p {
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;
 }
-div.deprecated>p:first-child::before, div.versionadded>p:first-child::before, div.versionchanged>p:first-child::before {
+div.deprecated>p:first-child::before,
+div.versionadded>p:first-child::before,
+div.versionchanged>p:first-child::before {
     font-family: FontAwesome;
     display: inline-block;
     font-style: normal;
@@ -62,9 +218,9 @@ div.deprecated>p:first-child::before, div.versionadded>p:first-child::before, di
     padding: 0.4rem 0.6rem;
     margin: -0.2rem 0rem -0.2rem -0.6rem;
 }
-div.versionadded                         { border-color: #1abc9c; background-color: #dbfaf4; }
-div.versionadded p:first-child::before   { color: #1abc9c; }
-div.versionchanged                       { border-color: #f0b37e; background-color: #ffedcc; }
-div.versionchanged p:first-child::before { color: #f0b37e; }
-div.deprecated                           { border-color: #f29f97; background-color: #fdf3f2; }
-div.deprecated p:first-child::before     { color: #f29f97; }
+div.versionadded                         { border-color: #0CAE8E; background-color: #E2F7F3; }
+div.versionadded p:first-child::before   { color: #0CAE8E; }
+div.versionchanged                       { border-color: #BC6437; background-color: #FDF0E9; }
+div.versionchanged p:first-child::before { color: #BC6437; }
+div.deprecated                           { border-color: #C3514D; background-color: #FEEDEC; }
+div.deprecated p:first-child::before     { color: #C3514D; }

docs/_templates/layout.html

@@ -5,7 +5,7 @@
     <div class="nav-footer-logo">
         <a href="https://seqera.io/" target="_blank" title="Developed by Seqera Labs">
             Nextflow is developed by:<br>
-            <img src="_static/seqera-logo.png" alt="Seqera Labs">
+            <img src="_static/seqera-logo.svg" alt="Seqera Labs">
         </a>
     </div>
 {% endblock %}

docs/conf.py

@@ -92,7 +92,7 @@
 #show_authors = False
 
 # The name of the Pygments (syntax highlighting) style to use.
-pygments_style = 'sphinx'
+pygments_style = 'default'
 
 # A list of ignored prefixes for module index sorting.
 #modindex_common_prefix = []
@@ -136,12 +136,12 @@
 
 # The name of an image file (relative to this directory) to place at the top
 # of the sidebar.
-html_logo = 'images/nextflow-logo.png'
+html_logo = '_static/nextflow-logo.png'
 
 # The name of an image file (within the static path) to use as favicon of the
 # docs.  This file should be a Windows icon file (.ico) being 16x16 or 32x32
 # pixels large.
-html_favicon = 'images/favicon.ico'
+html_favicon = '_static/favicon.ico'
 
 # Add any paths that contain custom static files (such as style sheets) here,
 # relative to this directory. They are copied after the builtin static files,
@@ -217,7 +217,7 @@
 
 # The name of an image file (relative to this directory) to place at the top of
 # the title page.
-latex_logo = 'images/nextflow-logo.png'
+latex_logo = '_static/nextflow-logo.png'
 
 # For "manual" documents, if this is true, then toplevel headings are parts,
 # not chapters.

docs/kubernetes.md

@@ -16,7 +16,7 @@ Kubernetes abstracts also the storage provisioning through the definition of one
 
 When using the `k8s` executor Nextflow deploys the workflow execution as a Kubernetes pod. This pod orchestrates the workflow execution and submits a separate pod execution for each job that need to be carried out by the workflow application.
 
-```{image} /images/nextflow-k8s-min.png
+```{image} _static/nextflow-k8s-min.png
 ```
 
 ## Requirements

docs/mail.md

@@ -183,7 +183,7 @@ nextflow run <pipeline name> -N <recipient address>
 
 It will send a notification mail when the execution completes similar to the one shown below:
 
-```{image} images/workflow-notification-min.png
+```{image} _static/workflow-notification-min.png
 ```
 
 :::{warning}

docs/metrics.md

@@ -8,7 +8,7 @@ This section details how the resource usage metrics from the {ref}`Execution rep
 
 The plot reports how much CPU resources were used by each process.
 
-```{image} images/report-resource-cpu.png
+```{image} _static/report-resource-cpu.png
 ```
 
 Let's illustrate how this plot behaves with several examples.
@@ -248,17 +248,17 @@ process bar {
 
 The `Virtual (RAM + Disk swap)` tab shows that both `foo` and `bar` processes use the same amount of virtual memory (~1 GiB):
 
-```{image} images/report-resource-memory-vmem.png
+```{image} _static/report-resource-memory-vmem.png
 ```
 
 However, the `Physical (RAM)` tab shows that only the `bar` process uses ~1 GiB of RAM while `foo` process uses ~0 GiB:
 
-```{image} images/report-resource-memory-ram.png
+```{image} _static/report-resource-memory-ram.png
 ```
 
 As expected, the `% RAM Allocated` tab shows that 0% of the resource set in the `memory` directive was used for `foo` process while 67% (= 1 / 1.5) of the resource were used for `bar` process:
 
-```{image} images/report-resource-memory-pctram.png
+```{image} _static/report-resource-memory-pctram.png
 ```
 
 :::{warning}
@@ -269,7 +269,7 @@ Memory and storage metrics are reported in bytes. This means that 1KB = $1024$ b
 
 The plot has two tabs the job duration (a.k.a. elapsed real time, real time or wall time ) in the `Raw Usage` tag and the percentage of requested time used in the `% Allocated` tab with respect to the duration set in the `time` directive of the process.
 
-```{image} images/report-resource-job-duration.png
+```{image} _static/report-resource-job-duration.png
 ```
 
 ## I/O Usage
@@ -294,10 +294,10 @@ process io_read_write_256M {
 
 `Read` tab:
 
-```{image} images/report-resource-io-read.png
+```{image} _static/report-resource-io-read.png
 ```
 
 `Write` tab:
 
-```{image} images/report-resource-io-write.png
+```{image} _static/report-resource-io-write.png
 ```

docs/tracing.md

@@ -109,7 +109,7 @@ The report file name can be specified as an optional parameter following the rep
 
 The `Summary` section reports the execution status, the launch command, overall execution time and some other workflow metadata. You can see an example below:
 
-```{image} images/report-summary-min.png
+```{image} _static/report-summary-min.png
 ```
 
 ### Resource Usage
@@ -118,7 +118,7 @@ The `Resources` section plots the distribution of resource usage for each workfl
 
 Plots are shown for CPU, memory, job duration and disk I/O. They have two (or three) tabs with the raw values and a percentage representation showing what proportion of the requested resources were used. These plots are very helpful to check that task resources are used efficiently.
 
-```{image} images/report-resource-cpu.png
+```{image} _static/report-resource-cpu.png
 ```
 
 Learn more about how resource usage is computed in the {ref}`Metrics documentation <metrics-page>`.
@@ -129,7 +129,7 @@ Learn more about how resource usage is computed in the {ref}`Metrics documentati
 
 The `Tasks` section lists all executed tasks, reporting for each of them the status, the actual command script, and many other metrics. You can see an example below:
 
-```{image} images/report-tasks-min.png
+```{image} _static/report-tasks-min.png
 ```
 
 :::{note}
@@ -326,7 +326,7 @@ Please read {ref}`Trace scope <config-trace>` section to learn more about it.
 
 Nextflow can render an HTML timeline for all processes executed in your pipeline. An example of the timeline report is shown below:
 
-```{image} images/timeline-min.png
+```{image} _static/timeline-min.png
 ```
 
 Each bar represents a process run in the pipeline execution. The bar length represents the task duration time (wall-time). The colored area in each bar represents the real execution time. The grey area to the *left* of the colored area represents the task scheduling wait time. The grey area to the *right* of the colored area represents the task termination time (clean-up and file un-staging). The numbers on the x-axis represent the time in absolute units e.g. minutes, hours, etc.
@@ -402,5 +402,5 @@ Here is the Mermaid diagram produced by Nextflow for the [rnaseq-nf](https://git
 nextflow run rnaseq-nf -preview -with-dag
 ```
 
-```{mermaid} images/dag.mmd
+```{mermaid} _static/dag.mmd
 ```