diff --git a/notes/notesstyle.css b/notes/notesstyle.css index 1c0dd68..22a01e2 100644 --- a/notes/notesstyle.css +++ b/notes/notesstyle.css @@ -1,13 +1,14 @@ +/* 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; @@ -15,7 +16,7 @@ body { margin: 5%; } -/* Style the header */ +/* header style */ header { text-align: center; position: fixed; @@ -29,6 +30,7 @@ header { font-family: 'Poppins', sans-serif; } +/* header heading one */ header h1 { font-family: 'Poppins', sans-serif; font-size: 36px; @@ -36,12 +38,14 @@ header h1 { 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; @@ -49,24 +53,23 @@ nav a { 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,17 +115,15 @@ 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; @@ -127,13 +131,14 @@ nav a:hover { 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,16 +147,19 @@ 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 */ @@ -159,6 +167,7 @@ nav a:hover { 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; } \ No newline at end of file