feat: make the articles rounded

ecsact-dev · Aug 1, 2024 · 7aba105 · 7aba105
1 parent 274cd36
commit 7aba105
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 15 deletions.
diff --git a/src/components/layout/content/content.component.html b/src/components/layout/content/content.component.html
@@ -1,7 +1,7 @@
 <div></div>
 <div class="main-container">
 	<main #mainContent (cdkObserveContent)="onContentChange($event)">
-		<div class="absolute top-0 right-0" *ngIf="canShare">
+		<div class="absolute top-0 right-0 sm:top-8 sm:right-8" *ngIf="canShare">
 			<button
 				class="p-2 m-2 mt-0 text-lg cursor-pointer"
 				[class.animate-pulse]="sharing"
@@ -12,10 +12,8 @@
 
 		<ng-content></ng-content>
 
-		<div class="h-10"></div>
-
 		<div
-			class="bg-primary/5 text-black overflow-hidden flex flex-row items-center relative">
+			class="bg-primary/5 text-black overflow-hidden flex flex-row items-center relative rounded-lg m-[32px]">
 			<div
 				class="bg-logoBlack w-16 ml-2 self-stretch bg-contain bg-no-repeat bg-center relative z-30 hidden md:block"></div>
 			<p class="m-4 relative z-30 max-w-md">

diff --git a/src/styles.scss b/src/styles.scss
@@ -355,25 +355,17 @@ main {
 	position: relative;
 }
 
-@media (max-width: 599px) {
-	main {
-		margin: 0;
-	}
-}
-
 main article {
+	$preBgColor: #182122;
+
 	display: block;
 	overflow: hidden;
 	background-color: var(--color-content-bg);
 	border-radius: 3px;
 	box-shadow: 0 0 8px 0px rgba(0, 0, 0, 0.1);
 	padding: 32px;
-}
-
-main article {
-	$preBgColor: #182122;
-
 	margin: 32px;
+	border-radius: 8px; // match tailwind rounded-lg
 
 	code-block-variation,
 	> section > pre,
@@ -415,6 +407,11 @@ main article {
 		}
 	}
 
+	@media (max-width: 599px) {
+		margin: 0;
+		border-radius: 0px;
+	}
+
 	code-block-variation,
 	section > pre,
 	> pre {