CORE-5219: update header and footer (#759)

* CORE-5219: update header and footer

* CORE-5219: fix lint issues

* CORE-5219: font issue

* CORE-5219: format issue

Author: ekachxaidze98

src/elements/footer/footer.jsx

@@ -68,8 +68,8 @@ const Footer = ({ className }) => (
           </LinkFoot>
         </div>
         <p className={styles.text}>
-          CORE is a not-for-profit service delivered by The Open University
-          supported by{' '}
+          CORE (COnnecting REpositories) is a not-for-profit service delivered
+          by The Open University supported by{' '}
           <Link href="https://core.ac.uk/governance/supporters#membership-list">
             <MathMarkdown>CORE Members.</MathMarkdown>
           </Link>

src/modules/header/header.jsx

@@ -132,12 +132,15 @@ const Header = ({ children, className, id, ...passProps }) => {
       <AppBar.Item className={styles.logoContainer}>
         <a href="https://core.ac.uk/" className={styles.logoLink}>
           <Logo className={styles.logo} />
-          <p className={styles.peace}>
-            <span role="img" aria-label="Ukranian Flag">
-              🇺🇦&nbsp;
-            </span>
-            <i>&nbsp; make metadata, not war</i>
-          </p>
+          <div className={styles.separator} />
+          <div className={styles.peace}>
+            <div className={styles.itemWrapper}>
+              <span className={styles.indicator}>CO</span>nnecting
+            </div>
+            <div className={styles.itemWrapper}>
+              <span className={styles.indicator}>RE</span>positories
+            </div>
+          </div>
         </a>
       </AppBar.Item>
 

src/modules/header/styles.css

@@ -53,7 +53,7 @@
 .logo-container {
   flex: 1;
   min-width: var(--logo-min-width);
-  max-width: calc(var(--page-padding-x) + 1rem);
+  max-width: max-content;
   max-height: 3rem;
   padding: 0;
   margin-right: auto;
@@ -68,6 +68,7 @@
   margin-right: .5rem;
   color: initial;
   text-decoration: none;
+  gap: 10px;
 }
 
 .logo-link:hover,
@@ -82,7 +83,7 @@
 }
 
 .logo {
-  min-width: calc(var(--logo-min-width) - 1.5rem);
+  min-width: max-content;
   max-width: var(--page-padding-x);
   height: 1rem;
 }
@@ -575,18 +576,33 @@
   }
 }
 
+.separator {
+  width: 1px;
+  height: 12px;
+  background: #e0e0e0;
+}
+
 .peace {
-  margin-top: 1em;
-  font-size: .6rem;
-  font-weight: 400;
+  display: flex;
+  width: max-content;
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 16px;
+  color: #212121;
+  letter-spacing: .3px;
+  gap: 3px;
+
+  .item-wrapper {
+    display: flex;
+
+    .indicator {
+      color: #b75400;
+    }
+  }
 }
 @media (max-width: 768px) {
-  .peace i {
+  .peace {
     display: none;
   }
 }
-@media (min-width: 768px) {
-  .logo-container {
-    max-width: calc(var(--page-padding-x) + 10rem);
-  }
-}