Add basic author profile styling (#1373)

nationalarchives · Oct 16, 2023 · 902ec83 · 902ec83
2 parents d41eb51 + 505297c
commit 902ec83
Show file tree

Hide file tree

Showing 6 changed files with 188 additions and 266 deletions.
diff --git a/sass/etna.scss b/sass/etna.scss
@@ -135,8 +135,7 @@ These are Etna specific components, created using BEM and following our guidelin
 @import "includes/featured-record-article";
 @import "includes/record-crosslink-panel";
 @import "includes/image-block";
-@import "includes/author-intro";
-@import "includes/author-info";
+@import "includes/author";
 @import "includes/password-page";
 @import "includes/record-creator-description";
 @import "includes/record-creator-collections";
@@ -201,6 +200,20 @@ Modified to match the existing site (for now)
     transition: none !important;
 }
 
+.tna-container {
+    &--centred {
+        justify-content: center;
+    }
+}
+
+.tna-chip {
+    &--plain {
+        padding: 0;
+        @include colour.fixed;
+        background-color: transparent;
+    }
+}
+
 .tna-footer {
     &__social {
         &-items {
@@ -271,6 +284,14 @@ Modified to match the existing site (for now)
             padding-top: 1rem;
             color: inherit !important;
         }
+
+        a {
+            &,
+            &:link,
+            &:visited {
+                color: inherit;
+            }
+        }
     }
 
     .generic-intro__meta {

diff --git a/sass/includes/_author-info.scss b/sass/includes/_author-info.scss
diff --git a/sass/includes/_author-intro.scss b/sass/includes/_author-intro.scss
diff --git a/sass/includes/_author.scss b/sass/includes/_author.scss
@@ -0,0 +1,47 @@
+@use "@nationalarchives/frontend/nationalarchives/tools/colour";
+@use "@nationalarchives/frontend/nationalarchives/tools/media";
+
+.tna-author {
+    align-items: center;
+
+    p {
+        margin-bottom: 0.5rem;
+    }
+
+    &__image {
+        margin: 0 auto;
+
+        overflow: hidden;
+        border-radius: 100%;
+
+        img {
+            width: 100%;
+            height: 100%;
+        }
+
+        @include media.on-tiny {
+            max-width: 15rem;
+            margin-bottom: 3rem;
+        }
+
+        &--small {
+            max-width: 5rem;
+            margin: 1.5rem 0 1.5rem;
+        }
+    }
+
+    &--summary {
+        margin-top: 2rem;
+
+        text-align: left;
+
+        @include colour.colour-border("keyline", 1px, dashed, top);
+
+        @include media.on-mobile {
+            padding-top: 2rem;
+            padding-bottom: 2rem;
+
+            @include colour.colour-border("keyline", 1px, dashed, bottom);
+        }
+    }
+}