fix(style): better mobile support

AugustinMauroy · Sep 8, 2023 · 5127ec5 · 5127ec5
1 parent 909bc9b
commit 5127ec5
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 4 deletions.
diff --git a/src/app/[lang]/blog/page.module.scss b/src/app/[lang]/blog/page.module.scss
@@ -8,5 +8,11 @@
 		justify-content: flex-start;
 		align-items: stretch;
 		gap: 1rem;
+
+		@media (max-width: 768px) {
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+		}
 	}
 }
diff --git a/src/components/article/codeBox/copyButton/index.module.scss b/src/components/article/codeBox/copyButton/index.module.scss
@@ -1,7 +1,7 @@
 .copyButton {
 	background-color: var(--green5);
 	border-radius: 0.5rem;
-	color: var(--text-color);
+	color: var(--white);
 	cursor: pointer;
 	border: none;
 	font-size: 1rem;

diff --git a/src/components/article/codeBox/index.module.scss b/src/components/article/codeBox/index.module.scss
@@ -13,6 +13,15 @@
 		justify-content: space-between;
 		align-items: center;
 		padding: 0.5rem 1rem;
+
+		.label::after {
+			content: '';
+			display: block;
+			width: 100%;
+			height: 2px;
+			background-color: var(--green6);
+			margin-top: 0.05rem;
+		}
 	}
 	.code {
 		border-radius: 0 0 5px 5px !important;

diff --git a/src/components/article/codeBox/index.tsx b/src/components/article/codeBox/index.tsx
@@ -30,7 +30,9 @@ export const replaceLanguages = (language: string) =>
 const CodeBox: FC<CodeBoxProps> = ({ codeData }) => (
 	<div className={styles.codeBox}>
 		<div className={styles.codeLabel}>
-			<strong>{replaceLabelLanguages(codeData.props.className)}</strong>
+			<strong className={styles.label}>
+				{replaceLabelLanguages(codeData.props.className)}
+			</strong>
 			<CopyButton code={codeData.props.children} />
 		</div>
 		<Code

diff --git a/src/components/common/dropDown/index.module.scss b/src/components/common/dropDown/index.module.scss
@@ -12,7 +12,6 @@
 	position: absolute;
 	top: 100%;
 	left: 50%;
-	transform: translateX(-50%);
 	width: fit-content;
 	max-width: 200px;
 	background-color: var(--app-fill);
@@ -33,7 +32,7 @@
 
 .open {
 	opacity: 1;
-	transform: translateX(-50%) translateY(0);
+	transform: translateX(-50%) translateY(10px);
 }
 
 .dropdownItem {

diff --git a/src/components/projects/card/index.module.scss b/src/components/projects/card/index.module.scss
@@ -10,6 +10,8 @@
 	img {
 		border-radius: 10px 0 0 10px;
 		border-right: 1px solid var(--text-color);
+		width: 50%;
+		height: auto;
 	}
 
 	.content {
@@ -20,4 +22,18 @@
 		text-align: left;
 		width: 100%;
 	}
+
+	@media (max-width: 768px) {
+		flex-direction: column;
+		height: auto;
+
+		img {
+			display: none;
+		}
+
+		.content {
+			text-align: center;
+			padding-bottom: 1rem;
+		}
+	}
 }
diff --git a/src/components/sections/header/index.module.scss b/src/components/sections/header/index.module.scss
@@ -41,4 +41,10 @@
 			height: 22px;
 		}
 	}
+
+	@media (max-width: 768px) {
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
 }
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
@@ -41,6 +41,7 @@ html {
 	--black-main: var(--black6);
 	--green_main: var(--green6);
 	--yellow_main: var(--yellow6);
+	--white: var(--black0);
 
 	&[data-theme='dark'] {
 		--app-fill: var(--black8);