From 8a2b77b61ea047fbd9be73d545f3286055e9afcc Mon Sep 17 00:00:00 2001
From: Bob Mottram <bob@freedombone.net>
Date: Sun, 21 Jun 2020 17:07:34 +0000
Subject: [PATCH] Different profile header text size on mobile

---
 epicyon-profile.css | 32 +++++++++++++++++++++-----------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/epicyon-profile.css b/epicyon-profile.css
index fcd55a19d..4c08459ea 100644
--- a/epicyon-profile.css
+++ b/epicyon-profile.css
@@ -17,6 +17,7 @@
     --border-color: #505050;
     --border-width: 2px;
     --font-size-header: 18px;
+    --font-size-header-mobile: 32px;
     --font-color-header: #ccc;
     --font-size-button-mobile: 34px;
     --font-size: 30px;
@@ -161,17 +162,6 @@ a:link {
     width: 50%;
 }
 
-.hero-text {
-    text-align: center;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    color: var(--font-color-header);
-    font-size: var(--font-size-header);
-    font-family: Arial, Helvetica, sans-serif;
-}
-
 .new-post-text {
     font-size: var(--font-size2);
     font-family: Arial, Helvetica, sans-serif;
@@ -1034,6 +1024,16 @@ div.gallery img {
         font-family: Arial, Helvetica, sans-serif;
         opacity: 0.7;
     }
+    .hero-text {
+        text-align: center;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        color: var(--font-color-header);
+        font-size: var(--font-size-header);
+        font-family: Arial, Helvetica, sans-serif;
+    }
     .hero-text img.qrcode {
         border-radius: 1%;
         width: 5%;
@@ -1391,6 +1391,16 @@ div.gallery img {
         font-family: Arial, Helvetica, sans-serif;
         opacity: 0.7;
     }
+    .hero-text {
+        text-align: center;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        color: var(--font-color-header);
+        font-size: var(--font-size-header-mobile);
+        font-family: Arial, Helvetica, sans-serif;
+    }
     .hero-text img.qrcode {
         border-radius: 1%;
         width: 15%;