MINOR profile page styling

Author: arakilian0

src/pages/Profile.js

@@ -1,7 +1,8 @@
 const profile = 
-`<main>
+`<main id="profile">
     <div>
-        <div>profile page</div>
+        <h1>Profile</h1>
+        <h2>available next update...</h2>
     </div>
 </main>`
 

src/styles/styles.css

@@ -90,7 +90,7 @@ main aside { background: var(--color-primary) }
 body, header, 
 textarea, #auth { background: var(--color-secondary) }
 
-a, p, button, 
+a, p, button, #profile,
 textarea, .material-icons, 
 #editor-actions select { color:var(--color-text) }
 
@@ -109,27 +109,30 @@ a, p, button { font-family:var(--fontfamily-primary) }
 textarea { font-family: var(--fontfamily-editor) }
 
 /* Font Size */
-header a, #auth p { font-size: var(--fontsize-logo) }
+header a, #auth p, 
+#profile h1 { font-size: var(--fontsize-logo) }
 
 #auth button, textarea { font-size: var(--fontsize-text) }
 
 #auth a, #editor-actions p,
-#editor-actions select { font-size: var(--fontsize-link) }
+#editor-actions select,
+#profile h2 { font-size: var(--fontsize-link) }
 
 .material-icons { font-size: var(--fontsize-icon) }
 
 .menu-button { font-size: var(--fontsize-menu-button) }
 
 /* Font Bold */
 header a, .menu-button,
-#editor-actions select { font-weight: var(--fontweight-bold) }
+#editor-actions select, 
+#profile h1 { font-weight: var(--fontweight-bold) }
 
 /* Padding */
 #auth p { padding-bottom:  var(--padding-editor) }
 
 .menu-button { padding: var(--padding-button-alt) }
 
-textarea { padding: var(--padding-editor) }
+textarea, #profile { padding: var(--padding-editor) }
 
 header a, .material-icons { padding: var(--padding-icon) }
 
@@ -202,5 +205,7 @@ textarea {
 
 #editor-actions p { margin-left: 8px }
 
+#profile h1 { margin-bottom: 8px }
+
 .menu-button { margin-left: 4px }
 /* STYLES END*/