Redesign website (#155)

* Start working on a redesign

* updating website style

* Add fontawesome

* remove test of removed snippets

* fix test

* link to branding

* upload artifact when not on main

* instructions for artifact

.github/workflows/build.yml

@@ -30,3 +30,11 @@ jobs:
       - name: rsync over ssh
         run: rsync -r ./_site/* [email protected]:/var/www/vhosts/fenicsproject.org/newsite
         if: ${{ github.repository == 'FEniCS/web' && github.ref == 'refs/heads/main' }}
+
+      - name: Upload build as artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: website
+          path: _site
+          if-no-files-found: error
+        if: ${{ github.repository == 'FEniCS/web' && github.ref != 'refs/heads/main' && github.event_name == 'pull_request' }}

README.md

@@ -14,6 +14,15 @@ If you think something on the website should be change, but you're not sure how
 please [open an issue](https://github.com/FEniCS/web/issues) describing the change you
 would like to suggest.
 
+When a pull request is opened, the website will be build and an artifact of this build will be uploaded.
+To see what the website will look look like after the pull request is merged, you can:
+
+1) Download the artifact
+
+2) unzip the artifact
+
+3) Run `python -m http.server` in the unzipped folder
+
 ## Code of conduct
 
 When interacting with others (eg when discussing issues or pull requests), you

_config.yml

@@ -5,6 +5,7 @@ description: Open-source finite element library
 fenicsversion: 2019.1.0
 fenicsversiondate: April 2019
 fenicsxversion: 0.7
+dolfinxversion: 0.7.2 # this is used in the URL of the Python demos
 fenicsxversiondate: October 2023
 
 defaults:

_data/navbar.yml

@@ -1,4 +1,6 @@
 # Site navigation links
+- title: Home
+  page: /
 - title: FEniCS 2024
   page: /fenics-2024
 - title: Download

_includes/_head.html

@@ -29,7 +29,9 @@
 
     <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
     <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
-    <script src="https://kit.fontawesome.com/5506de0e1b.js" crossorigin="anonymous"></script>
+    <script src="/assets/fontawesome/js/fontawesome.js"></script>
+    <script src="/assets/fontawesome/js/brands.js"></script>
+    <script src="/assets/fontawesome/js/solid.js"></script>
     <script type='text/javascript'>
 document.getElementById("MathJax-script").addEventListener('load', function () {
 window.MathJax = {

_includes/_header.html

@@ -6,14 +6,22 @@
   </header>
 </div>
 {% if page.image %}
-  <div id="header_wrap" class="outer" style="background-image:url(/{{ page.image }});background-size:cover;background-position-y:center">
+  <div id="header_wrap" class="outer" style="background-image:url(/{{ page.image }});background-position-y:center;background-position-x:center{% if page.image-zoom %}{% if page.image-zoom == "fill" %}background-size:cover{% else %}background-size:auto 600px{% endif %}{% else %}background-size:auto 600px{% endif %}">
 {% else %}
-  <div id="header_wrap" class="outer" style="background-image:url(/assets/img/default-bg.png);background-repeat:repeat">
+  <div id="header_wrap" class="outer" style="background-image:url(/assets/img/headers/fenics_fire.png);background-repeat:repeat">
+{% endif %}
+  <header class="inner{% if page.subtitle %}{% else %} lesstall{% endif %}">
+{% if page.subtitle %}
+  {% if page.subtitle == "logo" %}
+    <div style='text-align:center'><img src='/assets/logo/fenics_logo.png' style='height:200px;margin-top:40px;margin-bottom:-100px'></div>
+  {% endif %}
 {% endif %}
-  <header class="inner">
   <h1 id="project_title">{{ page.title | default: site.title }}</h1>
 {% if page.subtitle %}
-  {% if page.subtitle == "fenicsxversion" %}
+  {% if page.subtitle == "logo" %}
+  {% elsif page.subtitle == "FEniCSx fenicsxversion" %}
+    <h2 id="project_subtitle">FEniCSx {{ site.fenicsxversion }}</h2>
+  {% elsif page.subtitle == "fenicsxversion" %}
     <h2 id="project_subtitle">{{ site.fenicsxversion }}</h2>
   {% elsif page.subtitle == "fenicsversion" %}
     <h2 id="project_subtitle">{{ site.fenicsversion }}</h2>

_includes/_large_icon.html

@@ -0,0 +1,4 @@
+{% if include.href %}<a href="{{include.href}}" class='iconlink'>{% endif %}
+<i class='{{include.icon}}' style='font-size:110px;padding:10px'></i><br />
+{{include.label}}
+{% if include.href %}</a>{% endif %}

_includes/_person.html

@@ -1,9 +1,9 @@
 <h2 style='margin-top:80px;text-align:center'>{{ include.name }}{% if {{include.country}} %} {% include _country.html country=include.country %}{% endif %}</h2>
 <div class='person-social'>{{ include.job }}{{% if include.institution %}}, {{ include.institution }}{{% endif %}}</div>
-{% if include.website %}<div class='person-social'><a href="{{include.website}}"><i class="fa fa-internet-explorer" aria-hidden="true"></i> {{ include.website | split:"//" | last}}</a></div>
-{% endif %}{% if include.github %}<div class='person-social'><a href="https://github.com/{{include.github}}"><i class="fa fa-github" aria-hidden="true"></i> {{include.github}}</a></div>
-{% endif %}{% if include.twitter %}<div class='person-social'><a href="https://twitter.com/{{include.twitter}}"><i class="fa fa-twitter" aria-hidden="true"></i> @{{include.twitter}}</a></div>
-{% endif %}{% if include.linkedin %}<div class='person-social'><a href="https://linkedin.com/in/{{include.linkedin}}"><i class="fa fa-linkedin" aria-hidden="true"></i> @{{include.linkedin}}</a></div>
+{% if include.website %}<div class='person-social'><a href="{{include.website}}"><i class="fa-brands fa-internet-explorer" aria-hidden="true"></i> {{ include.website | split:"//" | last}}</a></div>
+{% endif %}{% if include.github %}<div class='person-social'><a href="https://github.com/{{include.github}}"><i class="fa-brands fa-github" aria-hidden="true"></i> {{include.github}}</a></div>
+{% endif %}{% if include.twitter %}<div class='person-social'><a href="https://twitter.com/{{include.twitter}}"><i class="fa-brands fa-twitter" aria-hidden="true"></i> @{{include.twitter}}</a></div>
+{% endif %}{% if include.linkedin %}<div class='person-social'><a href="https://linkedin.com/in/{{include.linkedin}}"><i class="fa-brands fa-linkedin" aria-hidden="true"></i> @{{include.linkedin}}</a></div>
 {% endif %}{{% if include.img %}}
 <img src="{{ include.img }}" style="float:{{ include.imgfloat | right}};width:40%;padding:15px">
 {{% endif %}}{{% if include.quote %}}

_test/test_links.py

@@ -21,7 +21,7 @@ def load_page_list(dir):
 root_dir = os.path.join(os.path.dirname(os.path.realpath(__file__)), "..")
 pagelist = load_page_list(root_dir)
 
-permalinks = []
+permalinks = [""]
 for dir, p in pagelist:
     with open(os.path.join(dir, p)) as f:
         content = f.read()

assets/css/customsty.css

@@ -42,6 +42,7 @@ blue:       #2E93CD
 }
 
 .nav ul {
+  float:right;
   list-style-type: none;
   margin: 0;
   padding: 0;
@@ -59,21 +60,21 @@ blue:       #2E93CD
 
 a {color: #0F79D0 !important}
 
+.nav li a:hover {
+  color: #000000 !important;
+  transition: 0.3s;
+}
 .nav li a {
   padding: 10px;
   display: block;
-  color: black !important;
+  color: #777777 !important;
   text-align: center;
   text-decoration: none;
   font-weight:bold !important;
-  font-size: 11px !important;
+  font-size: 14px !important;
   font-family: 'Lato', sans-serif !important;
 }
 
-.nav li a:hover {
-  color: #2E93CD;
-}
-
 h1, h2, h3, h4, h5, h6
 {
   margin: 10px 0 !important;
@@ -95,13 +96,50 @@ h1, h2, h3, h4, h5, h6
 
 .inner {max-width:850px}
 
-#nav_head_inner {max-width: 1050px !important;}
+#nav_head_inner {max-width: unset !important;}
+
+#header_wrap {
+  padding: 100px 0px !important;
+}
+
+@media(min-width:600px) {
 
 #header_wrap .inner {
-  padding: 80px 20px !important;
-  background-color: #FFFFFFCC;
+  width: 500px;
 }
 
+}
+
+@media(max-width:600px) {
+
+#header_wrap .inner {
+  width: 100%;
+}
+
+}
+
+#header_wrap .inner {
+  height: 400px;
+  padding: 0px 0px !important;
+  background-color: #FFFFFFDD;
+}
+
+#header_wrap .inner.lesstall {
+  height: 300px;
+}
+#header_wrap h1
+{
+  margin: 0px !important;
+  padding-top: 100px !important;
+  line-height:100px;
+}
+
+#header_wrap h2 {
+  margin-top:20px !important;
+  background:none
+}
+
+
 #footer_wrap {background-color:#FFFFFF}
 
 body {
@@ -160,6 +198,7 @@ a.colorlink {
 
 a.colorlink:hover {
   background-color: #0F79D0
+  transition: 0.3s;
 }
 
 img.image-center-smaller {
@@ -289,3 +328,21 @@ mjx-container
 img {
   border: none!important
 }
+
+a.iconlink {
+  display:inline-block;text-align:center;padding:50px;
+  font-family: 'Lato', sans-serif;
+}
+
+a.iconlink,
+a.iconlink:link,
+a.iconlink:active,
+a.iconlink:visited
+{
+  color:black !important
+}
+
+a.iconlink:hover {
+  color:#0F79D0 !important;
+  transition: 0.3s;
+}