restyle list

tuan231195 · Aug 19, 2020 · 410d26d · 410d26d
1 parent a8b5e3a
commit 410d26d
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 5 deletions.
diff --git a/blog/2020-08-19-web-crawling-with-puppeteer-and-tor-browser.md b/blog/2020-08-19-web-crawling-with-puppeteer-and-tor-browser.md
@@ -130,4 +130,4 @@ const browser = await puppeteer.launch(browserOptions);
 
 Now you are ready to start crawling data.
 
-**Happy coding!**
+**Happy coding!**
diff --git a/src/index.css b/src/index.css
@@ -5,3 +5,18 @@
 body {
 	font-family: 'Montserrat', sans-serif;
 }
+
+ul.list-colored {
+	list-style: none;
+}
+
+ul.list-colored li::before {
+	@apply text-accent;
+
+	content: '\2022';
+	font-weight: bold;
+	display: inline-block;
+	width: 1rem;
+	font-size: 1.25rem;
+	margin-left: -1rem;
+}
diff --git a/src/profile.tsx b/src/profile.tsx
@@ -36,7 +36,7 @@ export default {
 			company: 'Nine',
 			period: '10/2019 - Present',
 			description: (
-				<ul className={'list-disc'}>
+				<ul className={'list-colored'}>
 					<li>
 						Maintaining a highly scalable single sign on system for 9Now apps
 					</li>
@@ -54,7 +54,7 @@ export default {
 			company: 'Accelo',
 			period: '8/2017 - 10/2019',
 			description: (
-				<ul className={'list-disc'}>
+				<ul className={'list-colored'}>
 					<li>
 						Debugged and resolving 2-3 issues a day accurately and in a timely
 						manner using Jira
@@ -73,7 +73,7 @@ export default {
 			company: 'Itree Pty Ltd',
 			period: '7/2016 - 8/2017',
 			description: (
-				<ul className={'list-disc'}>
+				<ul className={'list-colored'}>
 					<li>
 						Engaged in various stages of the software development life-cycle
 						including design, development, and testing

diff --git a/src/templates/BlogTemplate.tsx b/src/templates/BlogTemplate.tsx
@@ -40,7 +40,32 @@ export const query = graphql`
 
 const Article = styled.main`
 	a {
-		${tw`type-link`};
+		${tw`type-link`}
+	}
+
+	ul,
+	ol {
+		padding: 0.1rem;
+	}
+
+	ol {
+		${tw`list-decimal`}
+		margin-left: 1.25rem;
+		margin-top: 1rem;
+
+		> li {
+			font-weight: 500;
+		}
+	}
+
+	ul li:before {
+		color: ${theme`colors.accent`};
+		font-weight: bold;
+		display: inline-block;
+		width: 1rem;
+		font-size: 1.5rem;
+		transform: translateY(2px);
+		content: '\\2022';
 	}
 
 	p {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -130,4 +130,4 @@ const browser = await puppeteer.launch(browserOptions);

		Now you are ready to start crawling data.

		Happy coding!
		Happy coding!