Improved card (post) scaling, slight modifications of global styling

4 files changed, 25 insertions, 9 deletions

diff --git a/src/app/components/navbar/navbar.component.css b/src/app/components/navbar/navbar.component.css
index 58ec821..aa666b0 100644
--- a/src/app/components/navbar/navbar.component.css
+++ b/src/app/components/navbar/navbar.component.css
@@ -3,12 +3,6 @@
   background-color: var(--card-bg);
 }
 
-#nav-contents {
-  max-width: var(--max-width);
-  margin: 0 auto;
-  box-sizing: border-box;
-}
-
 #nav-contents img {
   height: 1.9em;
   width: 1.9em;
diff --git a/src/app/components/navbar/navbar.component.html b/src/app/components/navbar/navbar.component.html
index 6bd3e66..9fcd704 100644
--- a/src/app/components/navbar/navbar.component.html
+++ b/src/app/components/navbar/navbar.component.html
@@ -1,5 +1,5 @@
 <nav id="navbar">
-	<div id="nav-contents" class="flex-row padding-smaller flex-center-align-items">
+	<div id="nav-contents" class="centered-content flex-row padding-smaller flex-center-align-items">
 		<div class="flexible" *ngIf="!loggedIn">
 			<!-- This element serves as a spacer -->
 		</div>
diff --git a/src/app/components/post/post.component.html b/src/app/components/post/post.component.html
index 4d9fc64..7b8c1fa 100644
--- a/src/app/components/post/post.component.html
+++ b/src/app/components/post/post.component.html
@@ -35,7 +35,7 @@
 				</span>
 			</summary>
 		</section>
-		<section class="flex-row flexible-children justify-children-center">
+		<section class="flex-row flexible-children justify-children-center flex-center-align-children">
 			<button class="padding-small lighter-hover click-effect border-radius-smaller"  (click)="goToPostPage()">
 				<img src="/assets/icons/tabler-icon-message-2.svg">
 				&nbsp;Comment
diff --git a/src/styles.css b/src/styles.css
index 75fe905..af9bbeb 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -140,6 +140,11 @@ input[type=file]::file-selector-button {
   justify-content: flex-end;
 }
 
+.flex-center-align-children > * {
+  display: flex;
+  align-items: center;
+}
+
 .justify-children-center > * {
   display: flex;
   justify-content: center;
@@ -220,13 +225,22 @@ input[type=file]::file-selector-button {
 /* Cards */
 
 .card {
-  margin: .5em auto;
+  margin: 0.5em auto;
   box-sizing: border-box;
   padding: var(--card-padding);
   background-color: var(--card-bg);
   position: relative;
 }
 
+@media screen and (max-width: 30rem) {
+  .card {
+    font-size: 0.8em;
+  }
+
+  .card button {
+    font-size: 0.9em;
+  }
+}
 
 /* Effects */
 
@@ -250,6 +264,14 @@ input[type=file]::file-selector-button {
   transform: scale(0.9);
 }
 
+/* Misc */
+
+.centered-content {
+  max-width: var(--max-width);
+  margin: 0 auto;
+  box-sizing: border-box;
+}
+
 /* Inputs, the type found in login and register */
 
 .input-field {