Add files via upload

aleyu0 · Apr 19, 2024 · c95a329 · c95a329
1 parent 52ac945
commit c95a329
Showing 1 changed file with 34 additions and 22 deletions.
diff --git a/notes/notesstyle.css b/notes/notesstyle.css
@@ -1,21 +1,22 @@
+/* import font */
 @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
-/* Reset default styles */
+/* reset page style*/
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 
-/* Set a modern font */
+/* main body style */
 body {
     font-family: Helvetica, Arial, sans-serif;
     padding-top: 100px;
     padding-top: calc(100px + 5%);
     margin: 5%;
 }
 
-/* Style the header */
+/* header style */
 header {
     text-align: center;
     position: fixed;
@@ -29,44 +30,46 @@ header {
     font-family: 'Poppins', sans-serif;
 }
 
+/* header heading one */
 header h1 {
     font-family: 'Poppins', sans-serif;
     font-size: 36px;
     font-weight: bold;
     margin-bottom: 10px;
 }
 
+/* nav bar format */
 nav {
     display: flex;
     justify-content: center;
     margin-bottom: 20px;
 }
 
+/* nav bar links */
 nav a {
     margin: 0 10px;
     text-decoration: none;
     color: #333;
     font-weight: bold;
 }
 
-nav a:has(a.active) {
-    border-bottom: 2px solid #333;
-}
-
+/* nav bar links when active*/
 nav a.active {
     border-bottom: 1.5px solid #333;
 }
 
+/* nav bar links when hovered*/
 nav a:hover {
     color: #555;
 }
 
+/* main page */
 #mainContent {
     padding: 20px;
     background-color: #fff;
 }
 
-/* Container for notes */
+/* brief container */
 .brief {
     max-width: 800px;
     margin: 0 auto;
@@ -75,6 +78,7 @@ nav a:hover {
     border-left: 1px solid #ccc;
 }
 
+/* brief headings */
 .brief h2{
     font-family: 'Poppins', sans-serif;
     font-size: 24px;
@@ -83,24 +87,26 @@ nav a:hover {
 
 }
 
+/* brief subheadings */
 .brief sub{
     font-size: 16px;
     line-height: 1.5;
     color: #333;
 }
 
+/* brief lists */
 .brief li{
     font-size: 16px;
     line-height: 1.5;
     color: #333;
 }
 
-/* Notes container */
+/* notes container */
 .note {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    align-items: left;
+    align-items: flex-start;
     max-width: 800px;
     margin: 0 auto;
     background-color: #f2f2f2;
@@ -109,31 +115,30 @@ nav a:hover {
     padding: 3% 3% 3% 6%;
 }
 
-/* Style h1 */
-.note {
-    h1, h2{
-        font-family: 'Poppins', sans-serif;
-        font-size: 24px;
-        font-weight: bold;
-        margin-bottom: 10px;
-    }
+/* notes h1 */
+.note h1, .note h2 {
+    font-family: 'Poppins', sans-serif;
+    font-size: 24px;
+    font-weight: bold;
+    margin-bottom: 10px;
 }
 
-/* Style h2 */
+/* notes h2 */
 .note h2 {
     font-family: 'Poppins', sans-serif;
     font-size: 18px;
     font-weight: bold;
     margin-bottom: 10px;
 }
 
-/* Style p */
+/* notes p */
 .note p {
     font-size: 14px;
     line-height: 1.5;
 
 }
 
+/* misc format */
 .misc {
     max-width: 800px;
     margin: 0 auto;
@@ -142,23 +147,27 @@ nav a:hover {
     color: #333;
 }
 
+/* misc dropdown title */
 .misc summary {
     font-size: 16px;
     font-weight: bold;
     margin-bottom: 10px;
 }
 
+/* misc content */
 .misc p{
     margin-bottom: 10px;
 }
 
+/* gallery format*/
 .gallery {
     display: grid;
     grid-template-columns: repeat(3, 1fr); /* creates three columns */
     grid-template-rows: auto; /* rows size to content */
     gap: 10px; /* 20px gap between items */
 }
 
+/* gallery items */
 .misc img,
 .misc video,
 .misc audio{
@@ -170,7 +179,7 @@ nav a:hover {
     margin-right: auto;
 }
 
-/* Style the form */
+/* form format */
 .form {
     max-width: 800px;
     margin: 0 auto;
@@ -180,6 +189,7 @@ nav a:hover {
     padding: 3% 3% 3% 6%;
 }
 
+/* form items */
 .form > fieldset {
     border: none;
     padding: 0;
@@ -224,6 +234,7 @@ nav a:hover {
     background-color: #555;
 }
 
+/* footer format */
 footer {
     position: fixed;
     text-align: center;
@@ -235,12 +246,13 @@ footer {
     background-color: #f2f2f2;
 }
 
+/* footer text */
 footer p {
     font-size: 14px;
     color: #333;
 }
 
-/* Add some spacing between notes */
+/* spacing between notes */
 .note + .note {
     margin-top: 20px;
 }