From d7637d9cf9afa350831dc9ef0867aa85b5dfddb8 Mon Sep 17 00:00:00 2001 From: Michael Fatemi Date: Wed, 21 Jul 2021 12:16:54 -0400 Subject: [PATCH] ui improvements --- README.md | 2 +- css/index.css | 272 ++++++++++++++------------ index.html | 529 ++++++++++++++++++++++++++------------------------ js/main.js | 11 +- 4 files changed, 428 insertions(+), 386 deletions(-) diff --git a/README.md b/README.md index 1219828..9b2fefe 100644 --- a/README.md +++ b/README.md @@ -2,4 +2,4 @@ Source for TowardsTJ flatpage -Made with :heart: by Rushil Umaretiya (2023rumareti) and Michael Fatemi (2022mfatemi) +Made with :heart: by Michael Fatemi (2022mfatemi) and Rushil Umaretiya (2023rumareti) diff --git a/css/index.css b/css/index.css index cdcb7e7..0094f39 100644 --- a/css/index.css +++ b/css/index.css @@ -1,208 +1,232 @@ html { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, - Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, + Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } body { - background-color: #fafafa; - padding: 0; - margin: 0; + background-color: #fafafa; + padding: 0; + margin: 0; } main { - display: flex; - flex-direction: column; - width: 100%; - align-items: center; - max-width: 50rem; - margin: 1rem auto; - padding: 0.5rem; - font-size: 1.5rem; + display: flex; + flex-direction: column; + width: 100%; + align-items: center; + max-width: 50rem; + margin: 1rem auto; + padding: 0.5rem; + font-size: 1.5rem; } nav { - background: transparent; - padding: 1rem; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - transition: all 0.3s ease; + background: transparent; + padding: 1rem; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + transition: all 0.3s ease; } .scrolled { - background: #fafafa; + background: #fafafa; } .wrapper { - position: fixed; - width: 100%; - top: 0; - z-index: 1; + position: fixed; + width: 100%; + top: 0; + z-index: 1; } .nav-link { - display: inline-block; - padding: 0.5rem 2rem; - line-height: 1.5; - text-decoration: none; - color: #4a4a4a; - text-transform: uppercase; - letter-spacing: 0.02em; - border-radius: 0.25rem; + display: inline-block; + padding: 0.5rem 2rem; + line-height: 1.5; + text-decoration: none; + color: #4a4a4a; + text-transform: uppercase; + letter-spacing: 0.02em; + border-radius: 0.25rem; } .bold { - font-weight: bold; + font-weight: bold; } .hero { - position: relative; - height: 100vh; + position: relative; + height: 100vh; } .important { - font-size: 4rem; - font-weight: normal; + font-size: 4rem; + font-weight: normal; } .quote { - display: flex; - flex-direction: row; - align-items: center; - max-width: 75%; - margin: 1rem auto; - padding: 0.5rem; - font-size: 1.5rem; + display: flex; + flex-direction: row; + align-items: center; + width: 100%; + margin-top: 1rem; + margin-bottom: 1rem; + padding: 0.5rem; + font-size: 1.5rem; +} + +.quote-col { + flex: 1; + padding: 2rem calc(min(4rem, 100vw)); } .introduction { - width: 100%; - display: flex; - flex-direction: column; - height: 100vh; - align-items: center; - justify-content: center; + width: 100%; + display: flex; + flex-direction: column; + padding-top: 2.5rem; + padding-bottom: 2.5rem; + align-items: center; + justify-content: center; } .subheader { - max-width: 50%; - font-style: italic; + max-width: 50%; + font-style: italic; } table { - border: 1px solid black; - width: 100%; + border: 1px solid black; + width: 100%; } .button { - border-radius: 0.5rem; - padding: 0.5em 1em; - margin: 0.5rem 0; - cursor: pointer; - user-select: none; - color: inherit; - text-decoration: none; - transition: all 0.3s ease; + border-radius: 0.5rem; + padding: 0.5em 1em; + margin: 0.5rem 0.5rem; + cursor: pointer; + user-select: none; + color: inherit; + text-decoration: none; + transition: all 0.3s ease; } .button:visited { - color: inherit; + color: inherit; } .hover-1:hover { - background-image: linear-gradient( - to right, - #e7484f, - #e7484f 16.65%, - #f68b1d 16.65%, - #f68b1d 33.3%, - #fced00 33.3%, - #fced00 49.95%, - #009e4f 49.95%, - #009e4f 66.6%, - #00aac3 66.6%, - #00aac3 83.25%, - #732982 83.25%, - #732982 100%, - #e7484f 100% - ); - animation: slidebg 2s reverse linear infinite; + background-image: linear-gradient( + to right, + #e7484f, + #e7484f 16.65%, + #f68b1d 16.65%, + #f68b1d 33.3%, + #fced00 33.3%, + #fced00 49.95%, + #009e4f 49.95%, + #009e4f 66.6%, + #00aac3 66.6%, + #00aac3 83.25%, + #732982 83.25%, + #732982 100%, + #e7484f 100% + ); + animation: slidebg 2s reverse linear infinite; } .hover-2:hover { - background-image: linear-gradient( - to left, - #e7484f, - #e7484f 16.65%, - #f68b1d 16.65%, - #f68b1d 33.3%, - #fced00 33.3%, - #fced00 49.95%, - #009e4f 49.95%, - #009e4f 66.6%, - #00aac3 66.6%, - #00aac3 83.25%, - #732982 83.25%, - #732982 100%, - #e7484f 100% - ); - animation: slidebg 2s linear infinite; + background-image: linear-gradient( + to left, + #e7484f, + #e7484f 16.65%, + #f68b1d 16.65%, + #f68b1d 33.3%, + #fced00 33.3%, + #fced00 49.95%, + #009e4f 49.95%, + #009e4f 66.6%, + #00aac3 66.6%, + #00aac3 83.25%, + #732982 83.25%, + #732982 100%, + #e7484f 100% + ); + animation: slidebg 2s linear infinite; } @keyframes slidebg { - to { - background-position: 20vw; - } + to { + background-position: 20vw; + } } .whitesmoke { - background-color: whitesmoke; + background-color: #e7e7e7; } .inline { - display: inline; + display: inline; } .signup-button { - display: inline-block; - font-size: 1.25rem; - font-weight: 600; - text-transform: uppercase; + display: inline-block; + font-size: 1.25rem; + font-weight: 600; + text-transform: uppercase; } .materials-table { - border-spacing: 0; - text-align: left; - padding: 0.5rem; - background-color: white; - border: 0px; - border-radius: 0.5rem; - margin-bottom: 2em; + border-spacing: 0; + text-align: left; + padding: 1rem 0.5rem; + background-color: white; + border: 0px; + border-radius: 0.5rem; + margin-bottom: 2em; } -.materials-table > thead > tr > th { - padding: 0.5rem; +.materials-table > thead > tr > th, +.materials-table > tbody > tr > td { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.materials-table > thead > tr > th:nth-child(1) { + text-align: right; + padding-right: 1rem; + width: 15%; +} + +.materials-table > thead > tr > th:nth-child(2) { + text-align: left; + padding-left: 1rem; } /* Day number */ .materials-table > tbody > tr > td:nth-child(1) { - text-align: right; - padding: 0.5rem; + text-align: right; + padding-right: 1rem; } /* Topics */ .materials-table > tbody > tr > td:nth-child(2) { - text-align: left; - padding: 0.5rem; + text-align: left; + padding-left: 1rem; } .materials-table td { - vertical-align: text-top; + vertical-align: text-top; } span.materials-table-title { - font-weight: bold; - display: inline-block; - margin-bottom: 1em; + font-weight: bold; + display: inline-block; + margin-bottom: 1em; +} + +.footer { + font-size: 0.75rem; } diff --git a/index.html b/index.html index f8c1ab3..8195a59 100644 --- a/index.html +++ b/index.html @@ -1,266 +1,285 @@ - - - - - TowardsTJ + + + + + TowardsTJ - - - -
- -
-
- -
-

- Get a Head Start
- on Success at TJ -

-
-
-
-

- Next year, over 800 students will enter the - TJ building for the first time. -

-

- TJ's Student Government Association is hosting a summer program where - students can get inside advice from upperclassmen about classes, - extracurriculars, and TJ life. -

-
-
- - -
-
-
-

Schedule

-

- 2024 students: August 2nd - August 6th, weekdays
- 2025 students: August 2nd - August 13th, weekdays

+ + + +

+ +
+
+ +
+

+ Get a Head Start
+ on Success at TJ +

+
+
+
+
+

+ Next year, over 800 students will enter + the TJ building for the first time. +

+
+
+

+ TJ's Student Government Association is hosting a summer program + where students can get inside advice from upperclassmen about + classes, extracurriculars, and TJ life. +

+
+
+
+ + +
+
+
+
+

Schedule

+

+ 2024 students: August 2nd - August 6th, weekdays
+ 2025 students: August 2nd - August 13th, weekdays

- 10:00am - 11:15am or 11:30am - 12:45pm. -

+ 10:00am - 11:15am or 11:30am - 12:45pm. +

-

Topics

+
+

Topics

- - (Jump to: 2025 week 1, - 2025 week 2, 2024) - + + (Jump to: 2025 week 1, + 2025 week 2, 2024) + - 2025 Week 1: Introduction to TJ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
DayTopics
1 - Introduction to TJ
- Homecoming -
2 - Biology
- English -
3 - Design and Technology
- IBET (Integrated Biology, English, and Technology) -
4 - Biology
- English
-
    -
  • Literature reviews
    • -
  • Scientific writing
    • -
  • Citations
    • -
  • Taking notes from a book
    • -
-
5 - Test
- General TJ Advice -
+ 2025 Week 1: Introduction to TJ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DayTopics
1 + Introduction to TJ
+ Homecoming +
2 + Biology
+ English +
3 + Design and Technology
+ IBET (Integrated Biology, English, and Technology) +
4 + Biology
+ English
+
    +
  • Literature reviews
    • +
  • Scientific writing
    • +
  • Citations
    • +
  • Taking notes from a book
    • +
+
5 + Test
+ General TJ Advice +
- 2025 Week 2: Introduction to TJ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
DayTopics
1 - Project briefing
- Electives Pathways -
2 - Languages
- Project work time -
3 - Computer Science
-
    -
  • Electives
    • -
  • Research labs
    • -
- Project work time -
4 - Math
- Project work time -
5 - Project presentation
- Extracurricular advice -
+ 2025 Week 2: Introduction to TJ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DayTopics
1 + Project briefing
+ Electives Pathways +
2 + Languages
+ Project work time +
3 + Computer Science
+
    +
  • Electives
    • +
  • Research labs
    • +
+ Project work time +
4 + Math
+ Project work time +
5 + Project presentation
+ Extracurricular advice +
- 2024: Introduction to TJ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
DayTopics
1 - Introduction to in-person TJ
- Project briefing -
2 - Chemistry
- AP Biology
- AP Chemistry
- AP Computer Science -
3 - Math
- Languages -
4Humanities (HUM)
5 - Test
- General TJ Advice
-
-
+ 2024: Introduction to TJ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DayTopics
1 + Introduction to in-person TJ
+ Project briefing +
2 + Chemistry
+ AP Biology
+ AP Chemistry
+ AP Computer Science +
3 + Math
+ Languages +
4Humanities (HUM)
5 + Test
+ General TJ Advice
+
- - - +
+ + +
+ + + + diff --git a/js/main.js b/js/main.js index 75b4a24..c3f22f4 100644 --- a/js/main.js +++ b/js/main.js @@ -1,7 +1,6 @@ -$(function () { - $(document).scroll(function () { - var $nav = $("nav"); - var $hero = $(".hero"); - $nav.toggleClass("scrolled", $(this).scrollTop() > $hero.height()); - }); +$(() => { + $(document).scroll(function () { + const $nav = $('nav'); + $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height()); + }); });