Create card component

styles/about.module.css

@@ -1,45 +0,0 @@
-.license {
-    background-color: #222222;
-    padding: 1rem;
-}
-
-.githubCard {
-    display: flex;
-}
-
-.githubAvatarContainer {
-    flex: 0 0;
-    padding: 0.5rem;
-}
-
-.githubCardTable {
-    flex: 1 1;
-    padding: 0.5rem;
-}
-
-.githubCardRow {
-    display: flex;
-}
-
-
-.githubCardLabel {
-    flex: .2 1;
-    font-size: 1rem;
-    padding: .5rem;
-}
-
-.githubCardLabel:after {
-    content: ':';
-}
-
-.githubCardValue {
-    flex: 1 1;
-    background-color: #222222;
-    font-size: 1rem;
-    border-top: 1px solid;
-    padding: .5rem;
-}
-
-.githubCardRow:first-of-type .githubCardValue {
-    border-top: none;
-}

styles/github-profile.module.css

@@ -0,0 +1,55 @@
+.avatarContainer {
+    padding: 0.5rem;
+    text-align: center;
+    overflow: hidden;
+}
+
+.avatarContainer img {
+    border-radius: 1rem;
+}
+
+.cardLabel {
+    display: block;
+    font-weight: 700;
+    font-size: 1rem;
+    padding: .5rem;
+}
+
+.cardLabel:after {
+    content: ':';
+}
+
+.cardValue {
+    background-color: #303436;
+    font-size: 1rem;
+    padding: 0.25rem 1rem;
+    margin: 0.25rem 0;
+    border: none;
+    display: block;
+    border-radius: 0.5rem;
+}
+
+
+@media screen and (min-width: 800px) {
+    .card {
+        display: flex;
+    }
+
+    .cardTable {
+        flex: 1 1;
+        padding: 0.5rem;
+        align-items: stretch;
+    }
+
+    .cardRow {
+        display: flex;
+    }
+    
+    .cardLabel {
+        flex: .2 1;
+    }
+
+    .cardValue {
+        flex: 1 1;
+    }
+}

styles/global.css

@@ -365,4 +365,9 @@ code {
 
 .monospace {
     font-family: 'Hack', 'Source Code Pro', Consolas, monospace;
+}
+
+.license {
+    background-color: #222222;
+    padding: 1rem;
 }