lockup-spacing: adjust the spacing for the logo and lines (#1)

* lockup-spacing: adjust the spacing for the logo and lines for both desktop and mobile.

* adding a pr template

* fixup to indentation

.github/pull_request_template.md

@@ -0,0 +1,66 @@
+# NOT READY FOR REVIEW
+- (Edit the above to reflect status)
+
+# Summary
+- TL;DR - what's this PR for?
+
+# Review By (Date)
+- When does this need to be reviewed by?
+
+# Criticality
+- How critical is this PR on a 1-10 scale? Also see [Severity Assessment](https://stanfordits.atlassian.net/browse/D8CORE-1705).
+- E.g., it affects one site, or every site and product?
+
+# Urgency
+- How urgent is this? (Normal, High)
+
+# Review Tasks
+
+## Setup tasks and/or behavior to test
+
+1. Check out this branch
+2. Rebuild Cache and import config `drush cr ; drush ci`
+3. Navigate to...
+4. Verify...
+
+### Site Configuration Sync
+
+- Is there a config:export in this PR that changes the config sync directory?
+
+## Front End Validation
+- [ ] Design is approved by @ user?
+- [ ] HTML validation: Is the markup using the appropriate semantic tags and [passes validation](https://validator.w3.org/nu/)? Or, [QA request ticket created](https://github.com/SU-SWS/template_warehouse/blob/master/jira_templates/QA_request_template.txt)?
+- [ ] Cross-browser testing: Has been performed? Or, [QA request ticket created](https://github.com/SU-SWS/template_warehouse/blob/master/jira_templates/QA_request_template.txt)?
+- [ ] Automated accessibility: Scans performed? Or, [QA request ticket created](https://github.com/SU-SWS/template_warehouse/blob/master/jira_templates/QA_request_template.txt)?
+- [ ] Manual accessibility: Manually tested? Or, [QA request ticket created](https://github.com/SU-SWS/template_warehouse/blob/master/jira_templates/QA_request_template.txt)?
+
+## Backend / Functional Validation
+### Code
+- [ ] Are the naming conventions following our standards?
+- [ ] Does the code have sufficient inline comments?
+- [ ] Is there anything in this code that would be hidden or hard to discover through the UI?
+- [ ] Are there any [code smells](https://blog.codinghorror.com/code-smells/)?
+- [ ] Are tests provided? eg (unit, behat, or codeception)
+
+### Code security
+- [ ] Are all [forms properly sanitized](https://www.drupal.org/docs/8/security/drupal-8-sanitizing-output)?
+- [ ] Any obvious [security flaws or new areas for attack](https://www.drupal.org/docs/8/security)?
+
+## General
+- [ ] Is there anything included in this PR that is not related to the problem it is trying to solve?
+- [ ] Is the approach to the problem appropriate?
+
+# Affected Projects or Products
+- Does this PR impact any particular projects, products, or modules?
+
+# Associated Issues and/or People
+- JIRA ticket(s)
+- Other PRs
+- Any other contextual information that might be helpful (e.g., description of a bug that this PR fixes, new functionality that it adds, etc.)
+- Anyone who should be notified? (`@mention` them here)
+
+# Resources
+- [AMP Tool](https://stanford.levelaccess.net/index.php)
+- [Accessibility Manual Test Script](https://docs.google.com/document/d/1ZXJ9RIUNXsS674ow9j3qJ2g1OAkCjmqMXl0Gs8XHEPQ/edit?usp=sharing)
+- [HTML Validator](https://validator.w3.org/)
+- [Browserstack](https://live.browserstack.com/dashboard) and link to [Browserstack Credentials](https://asconfluence.stanford.edu/confluence/display/SWS/External+Account+Credentials)

src/components/elements/lockup/lockup-a.tsx

@@ -6,8 +6,10 @@ const LockupA = ({line1, line5, siteName, logoUrl}: FooterLockupProps) => {
   return (
     <div className="py-10">
       <Link href="/" className="no-underline text-black">
-        <div className="flex flex-col items-start lg:flex-row gap-4">
-          <LockupLogo logoUrl={logoUrl} siteName={siteName}/>
+        <div className="flex flex-col lg:flex-row gap-4">
+          <div className="mt-auto">
+            <LockupLogo logoUrl={logoUrl} siteName={siteName}/>
+          </div>
 
           <div className="w-[1px] bg-black shrink-0"/>
           <div className="font-normal text-black text-m2 leading-none">
@@ -16,7 +18,7 @@ const LockupA = ({line1, line5, siteName, logoUrl}: FooterLockupProps) => {
         </div>
 
         {line5 &&
-          <div className="font-semibold uppercase mt-4 border-t border-black lg:border-t-0">
+          <div className="font-semibold uppercase border-t border-black lg:border-t-0">
             {line5}
           </div>
         }

src/components/elements/lockup/lockup-h.tsx

@@ -9,7 +9,7 @@ const LockupH = ({line1, line3, line4, siteName, logoUrl}: FooterLockupProps) =>
         <div className="flex flex-col lg:flex-row gap-4">
           <div>
             <LockupLogo logoUrl={logoUrl} siteName={siteName}/>
-            <div className="font-semibold uppercase text-m1">{line4}</div>
+            <div className="font-semibold uppercase text-m1 mt-1">{line4}</div>
           </div>
 
           <div className="w-[1px] bg-black shrink-0"/>

src/components/elements/lockup/lockup-i.tsx

@@ -9,7 +9,7 @@ const LockupI = ({line1, line3, line4, siteName, logoUrl}: FooterLockupProps) =>
         <div className="flex flex-col lg:flex-row gap-4">
           <div>
             <LockupLogo logoUrl={logoUrl} siteName={siteName}/>
-            <div className="font-semibold text-m1 uppercase">{line4}</div>
+            <div className="font-semibold text-m1 uppercase mt-1">{line4}</div>
           </div>
 
           <div className="w-[1px] bg-black shrink-0"/>

src/components/elements/lockup/lockup-o.tsx

@@ -7,7 +7,7 @@ const LockupO = ({line4, siteName, logoUrl}: FooterLockupProps) => {
     <div className="py-10">
       <Link href="/" className="no-underline text-black">
         <LockupLogo logoUrl={logoUrl} siteName={siteName}/>
-        <div className="font-semibold text-m1 uppercase">{line4}</div>
+        <div className="font-semibold text-m1 uppercase mt-1">{line4}</div>
       </Link>
     </div>
   )

src/components/elements/lockup/lockup-p.tsx

@@ -9,7 +9,7 @@ const LockupP = ({line1, line4, siteName, logoUrl}: FooterLockupProps) => {
         <div className="flex flex-col lg:flex-row gap-4">
           <div>
             <LockupLogo logoUrl={logoUrl} siteName={siteName}/>
-            <div className="font-semibold uppercase text-m1">{line4}</div>
+            <div className="font-semibold uppercase text-m1 mt-1">{line4}</div>
           </div>
 
           <div className="w-[1px] bg-black shrink-0"/>

src/components/elements/lockup/lockup-s.tsx

@@ -8,7 +8,7 @@ const LockupS = ({line1, line2, line4, siteName, logoUrl}: FooterLockupProps) =>
       <Link href="/" className="no-underline text-black">
 
         <LockupLogo logoUrl={logoUrl} siteName={siteName}/>
-        <div className="text-m1 font-semibold uppercase border-b border-black">{line4}</div>
+        <div className="text-m1 font-semibold uppercase border-b border-black mt-1">{line4}</div>
         <div className="font-normal">
           <div className="text-m1">{line1 || siteName}</div>
           <div className="text-m1">{line2}</div>

src/components/elements/lockup/lockup-t.tsx

@@ -8,7 +8,7 @@ const LockupT = ({line1, line2, line3, line4, siteName, logoUrl}: FooterLockupPr
       <Link href="/" className="no-underline text-black">
 
         <LockupLogo logoUrl={logoUrl} siteName={siteName}/>
-        <div className="text-m1 font-semibold uppercase border-b border-black">{line4}</div>
+        <div className="text-m1 font-semibold uppercase border-b border-black mt-1">{line4}</div>
         <div className="font-normal">
           <div className="text-m1">{line1 || siteName}</div>
           <div className="text-m1">{line2}</div>