Merge pull request #4 from codeplaysoftware/eu-funding-text-and-flag

Footer EU Funding Notice and Flag
codeplaysoftware · Apr 7, 2023 · ca50b32 · ca50b32
2 parents 4e7a695 + 0cea1b2
commit ca50b32
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 30 deletions.
diff --git a/_layouts/page.html b/_layouts/page.html
@@ -82,23 +82,30 @@
                 Codeplay and the Codeplay logo are registered trademarks of Codeplay Software Ltd.
                 CERN and the CERN logo are trademarks and brand of EUROPEAN ORGANIZATION FOR NUCLEAR RESEARCH.
             </div>
+            <div class="eu-funding">
+                <img src="{{'static/images/eu-flag.svg' | absolute_url}}" alt="EU Flag" />
+                This project has received funding from the European Union's Horizon research and innovation
+                programme under grant agreement No 101092877.
+            </div>
+        </div>
+        <div>
+            <div class="socials">
+                <a href="{{site.twitter}}" target="_blank" rel="noopener">
+                    <img src="{{'static/images/socials/twitter.svg' | absolute_url}}"
+                         alt="Twitter Icon"
+                         title="Visit our Twitter" />
+                </a>
+                <a href="{{site.youtube}}" target="_blank" rel="noopener">
+                    <img src="{{'static/images/socials/youtube.svg' | absolute_url}}"
+                         alt="YouTube Icon"
+                         title="Visit our YouTube" />
+                </a>
+            </div>
             <div class="policies">
                 <a href="{{'cookies' | absolute_url}}">Cookie Policy</a>
                 <a href="{{'privacy' | absolute_url}}">Privacy Policy</a>
             </div>
         </div>
-        <div>
-            <a href="{{site.twitter}}" target="_blank" rel="noopener">
-                <img src="{{'static/images/socials/twitter.svg' | absolute_url}}"
-                     alt="Twitter Icon"
-                     title="Visit our Twitter" />
-            </a>
-            <a href="{{site.youtube}}" target="_blank" rel="noopener">
-                <img src="{{'static/images/socials/youtube.svg' | absolute_url}}"
-                     alt="YouTube Icon"
-                     title="Visit our YouTube" />
-            </a>
-        </div>
     </div>
 </section>
 </body>

diff --git a/static/css/styled.scss b/static/css/styled.scss
@@ -464,38 +464,57 @@ body {
         background-color: #ccc;
 
         .wrapper {
-            padding: 8rem 0;
             display: grid;
-            grid-template-columns: 2fr 1fr;
-            grid-column-gap: 4rem;
+            padding: 8rem 0;
+
+            @media screen and (max-width: 1000px) {
+                grid-template-rows: 1fr 1fr;
+                grid-row-gap: 2rem;
+            }
+
+            @media screen and (min-width: 1000px) {
+                grid-template-columns: 2fr 1fr;
+                grid-column-gap: 4rem;
+
+                > div:nth-of-type(2) {
+                    text-align: right;
+                }
+            }
 
             .copyright {
                 font-weight: bold;
             }
 
+            .attribution,
+            .eu-funding {
+                font-size: .9rem;
+            }
+
             .attribution {
                 margin-top: 1rem;
-                font-size: .8rem;
                 opacity: .8;
                 line-height: 170%;
             }
 
-            .policies {
-                padding-top: 1rem;
-
-                a {
-                    display: block;
-                    padding: .3rem 0;
-                    font-weight: bold;
-                }
+            .eu-funding {
+                background-color: rgba(0, 0, 0, .1);
+                border-radius: 6px;
+                padding: 1rem;
+                display: flex;
+                flex-direction: row;
+                margin-top: 1.5rem;
+                align-items: center;
 
-                a:hover {
-                    text-decoration: underline;
+                img {
+                    width: 70px;
+                    margin-right: 1rem;
                 }
             }
 
-            > div:nth-of-type(2) {
-                text-align: right;
+            .socials {
+                img {
+                    max-width: 40px;
+                }
 
                 a {
                     padding: 0 .5rem;
@@ -506,9 +525,19 @@ body {
                         filter: grayscale(0);
                     }
                 }
+            }
 
-                img {
-                    max-width: 40px;
+            .policies {
+                padding-top: 2rem;
+
+                a {
+                    display: block;
+                    padding: .3rem 0;
+                    font-weight: bold;
+                }
+
+                a:hover {
+                    text-decoration: underline;
                 }
             }
         }

diff --git a/static/images/eu-flag.svg b/static/images/eu-flag.svg