icon size change

UBC-MDS · Sep 16, 2024 · 63cffde · 63cffde
1 parent cf9dfde
commit 63cffde
Showing 1 changed file with 41 additions and 6 deletions.
diff --git a/styles.scss b/styles.scss
@@ -112,6 +112,40 @@ $grey-medium: #999999;
   }
 }
 
+// Note callout
+.note {
+  margin: 0.5em 0;
+  border: 1px solid #ffc107; // Yellow border
+  border-radius: 5px;
+  background-color: #fff8e1; // Light yellow background
+  padding: 0 10px 10px 10px; // Add padding on left to align text with header
+
+  // Header styling
+  h2 {
+    margin: 0;
+    padding-left: 40px; // Adjust padding for smaller icon
+    padding-top: 5px;
+    color: #ffffff; // White text color for header
+    background-color: #ffeb3b; // Yellow background
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+    font-size: 1em;
+    font-weight: bold;
+    background-size: 20px; // Set smaller size for icon
+    background-repeat: no-repeat;
+    background-position: 10px center; // Adjust position for smaller icon
+    background-image: url("lectures/img/note.png");
+  }
+
+  // Content styling with additional padding to align with the header
+  p {
+    margin-top: 15px; // Spacing between header and content
+    padding-left: 10px; // Align content with header
+    color: #856404; // Dark yellow text color
+    font-size: 0.9em;
+  }
+}
+
 // Warning callout
 .warning {
   margin: 0.5em 0;
@@ -123,17 +157,17 @@ $grey-medium: #999999;
   // Header styling
   h2 {
     margin: 0;
-    padding-left: 60px;
+    padding-left: 40px; // Adjust padding for smaller icon
     padding-top: 5px;
     color: #ffffff; // White text color for header
     background-color: #c82333; // Red background
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
     font-size: 1em;
     font-weight: bold;
-    background-size: 40px;
+    background-size: 20px; // Set smaller size for icon
     background-repeat: no-repeat;
-    background-position: 15px center;
+    background-position: 10px center; // Adjust position for smaller icon
     background-image: url("lectures/img/warning.png");
   }
 
@@ -145,6 +179,7 @@ $grey-medium: #999999;
     font-size: 0.9em;
   }
 }
+
 // Tip callout
 .tip {
   margin: 0.5em 0;
@@ -156,17 +191,17 @@ $grey-medium: #999999;
   // Header styling
   h2 {
     margin: 0;
-    padding-left: 60px;
+    padding-left: 40px; // Adjust padding for smaller icon
     padding-top: 5px;
     color: #ffffff; // White text color for header
     background-color: #218838; // Green background
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
     font-size: 1em;
     font-weight: bold;
-    background-size: 40px;
+    background-size: 20px; // Set smaller size for icon
     background-repeat: no-repeat;
-    background-position: 15px center;
+    background-position: 10px center; // Adjust position for smaller icon
     background-image: url("lectures/img/tip.png");
   }