Adjust display of the repository owner and name

Fixes #80
github · Nov 22, 2023 · 3b25420 · 3b25420
1 parent 732d8f2
commit 3b25420
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 20 deletions.
diff --git a/components/RepositoryItemTopBar.tsx b/components/RepositoryItemTopBar.tsx
@@ -25,14 +25,15 @@ export const RepositoryItemTopBar = ({
         target="_blank"
         title={`Open ${repositoryOwner}/${repositoryName} on GitHub`}
       >
-        <div className="repo-item__name">
-          <h3>
-            {repositoryName}
-          </h3>
+        <h3>
           <div className="repo-item__owner">
-            &nbsp;/ {repositoryOwner}
+            {repositoryOwner}
+          </div>
+          <span>&nbsp;/&nbsp;</span>
+          <div className="repo-item__name">
+            {repositoryName}
           </div>
-        </div>
+        </h3>
       </a>
 
       <RepositoryIssueNumberIndicator

diff --git a/styles/globals.scss b/styles/globals.scss
@@ -119,25 +119,19 @@ base, html {
   @media(min-width: 1012px) {
     margin-bottom: 32px;
   }
-}
-
-.repo-item__name {
-  display: flex;
-  color: #096BDE;
-  font-size: 16px;
-  line-height: 1.5;
 
   h3 {
+    display: flex;
+    color: #096BDE;
     font-size: 16px;
+    line-height: 1.5;
     font-weight: 400;
-  }
-  .repo-item__owner {
-    font-weight: 600;
-  }
 
-  @media(min-width: 1012px) {
-    font-size: 24px;
-    h3 {
+    .repo-item__name {
+      font-weight: 600;
+    }
+
+    @media(min-width: 1012px) {
       font-size: 24px;
     }
   }