From 428fb65b3529c02f93f7719c7de1e1efa155885d Mon Sep 17 00:00:00 2001
From: Lewis Parfitt <lewis.parfitt@raspberrypi.org>
Date: Mon, 25 Nov 2024 12:47:37 +0000
Subject: [PATCH] Update styles.css revert

---
 styles.css | 98 ++++++++++++++++++++++++++++++++----------------------
 1 file changed, 58 insertions(+), 40 deletions(-)

diff --git a/styles.css b/styles.css
index 244a1fb..b1016dc 100644
--- a/styles.css
+++ b/styles.css
@@ -30,41 +30,16 @@
 	box-sizing: border-box;
 }
 
-/* Block-specific styling for proper alignment of icon and title */
-.notes, .task, .learn {
-	display: flex; /* Align icon and text in a row */
-	align-items: center; /* Ensure vertical alignment of icon and text */
-	position: relative; /* Keep relative positioning */
-	padding: 10px 20px; /* Add padding for consistent spacing */
-	border-radius: 8px;
-	margin-bottom: 20px;
-	box-sizing: border-box;
-	margin-left: 20px;
-}
-
-/* Retain unique background and border colors */
-.notes {
-	background-color: #EDF7EE;
-	border: 2px solid #317C35;
-}
-
-.task {
-	background-color: #F4EEF7;
-	border: 2px solid #6B3687;
-}
-
-.learn {
-	background-color: #FCF3F6;
-	border: 2px solid #CD2355;
-}
-
 /* General styling for block titles using data-title */
 .learn::before, .notes::before, .task::before {
-	font-family: "Font Awesome 6 Free"; /* Font Awesome for icons */
-	font-weight: 900; /* Required for solid icons */
+	display: inline-flex; /* Align icon and text in a row */
+	align-items: center; /* Vertically align icon and text */
 	font-size: 24px; /* Icon size */
-	margin-right: 8px; /* Spacing between icon and text */
-	display: inline-block; /* Ensure proper alignment */
+	font-weight: 900; /* Bold font for the icon */
+	margin-bottom: 15px; /* Adds spacing below the title */
+	box-sizing: border-box;
+	margin-right: 8px; /* Space between icon and title text */
+	margin-left: 20px
 }
 
 .learn::before {
@@ -74,6 +49,16 @@
 	color: #CD2355; /* Icon color for Learn block */
 }
 
+.learn::after {
+	content: attr(data-title); /* Title text */
+	font-family: 'Quicksand', sans-serif; /* Title font */
+	font-size: 24px; /* Title font size */
+	font-weight: 900; /* Bold title text */
+	color: #CD2355; /* Title color for Learn block */
+	margin-left: 8px; /* Align spacing with icon */
+	display: inline; /* Ensure text stays aligned with icon */
+}
+
 .notes::before {
 	content: "\f27a"; /* Font Awesome comment icon */
 	font-family: "Font Awesome 6 Free";
@@ -81,6 +66,16 @@
 	color: #317C35; /* Icon color for Notes block */
 }
 
+.notes::after {
+	content: attr(data-title);
+	font-family: 'Quicksand', sans-serif;
+	font-size: 24px;
+	font-weight: 900;
+	color: #317C35; /* Title color for Notes block */
+	margin-left: 8px;
+	display: inline;
+}
+
 .task::before {
 	content: "\f14a"; /* Font Awesome tick icon */
 	font-family: "Font Awesome 6 Free";
@@ -88,14 +83,37 @@
 	color: #6B3687; /* Icon color for Task block */
 }
 
-.learn::after, .notes::after, .task::after {
-	content: attr(data-title); /* Pull title from data-title attribute */
-	font-family: 'Quicksand', sans-serif; /* Use your desired font */
-	font-size: 24px; /* Same size as the icon */
-	font-weight: 900; /* Bold text for titles */
-	margin-left: 8px; /* Add spacing between icon and text */
-	color: inherit; /* Automatically match parent block's color */
-	display: inline-block; /* Align with icon */
+.task::after {
+	content: attr(data-title);
+	font-family: 'Quicksand', sans-serif;
+	font-size: 24px;
+	font-weight: 900;
+	color: #6B3687; /* Title color for Task block */
+}
+
+/* Block-specific styling */
+.notes, .task, .learn {
+	position: relative;
+	padding-top: 20px; /* Creates space for the title */
+	border-radius: 8px;
+	margin-bottom: 20px;
+	box-sizing: border-box;
+	margin-left: 20px
+}
+
+.notes {
+	background-color: #EDF7EE;
+	border: 2px solid #317C35;
+}
+
+.task {
+	background-color: #F4EEF7;
+	border: 2px solid #6B3687;
+}
+
+.learn {
+	background-color: #FCF3F6;
+	border: 2px solid #CD2355;
 }
 
 /* Style for h2 within the blocks */