finish resources page and reformat

about.html

@@ -42,6 +42,20 @@
         </div>
     </header>
     <div id="wrapper" class="fluid">
+        <section id="contact">
+            <h2>Contact Us!</h2>
+            <div class="desc">
+                <span class="quote">
+                    "The world is moved not only by the mighty shoves of the heroes, but also by the aggregate of the tiny pushes of each honest worker."  - Helen Keller
+                </span>
+            </div>
+            <div class="desc">
+                Contact us at
+                <a href="mailto:sga.tjhsst@gmail.com">sga.tjhsst@gmail.com</a>. We would love to answer questions or hear
+                about how you think we can improve TJ!
+            </div>
+        </section>
+        <hr />
         <section id="officers">
             <h2>SGA Officers</h2>
             <div class="officers-intro">
@@ -97,7 +111,10 @@
         <section id="excomm">
             <h2>SGA Executive Committee</h2>
             <div id="excomm-desc">
-                The Executive Committee (ExComm) is a integral sub-group of the SGA. Its members act as representatives of the student body. The members work with the officers to organize events and activities throughout to year. While several ExComm positions may have more specific roles, all are working towards the goals of the SGA. Applications to be on ExComm are released every June after Class Council elections have been completed.
+                The Executive Committee (ExComm) is a integral sub-group of the SGA. Its members act as representatives of the student body.
+                The members work with the officers to organize events and activities throughout to year. While several ExComm
+                positions may have more specific roles, all are working towards the goals of the SGA. Applications to be
+                on ExComm are released every June after Class Council elections have been completed.
             </div>
             <div class="excomm-intro">
                 <div class="excomm-image">
@@ -200,7 +217,11 @@
         <section id="senators">
             <h2>SGA Class Senators</h2>
             <div id="senators-desc">
-                Jefferson's student government is divided into school-wide student government (SGA) and grade-level student government (Class Council). While the SGA organizes school-wide events and addresses school-wide concerns and issues, Class Councils represent their grade's needs and host fundraisers and events with the goal to raise money for both Prom and Graduation at the end of senior year.  SGA Class Senators serve as Class Council members who are liaisons with the SGA.
+                Jefferson's student government is divided into school-wide student government (SGA) and grade-level student government (Class
+                Council). While the SGA organizes school-wide events and addresses school-wide concerns and issues, Class
+                Councils represent their grade's needs and host fundraisers and events with the goal to raise money for both
+                Prom and Graduation at the end of senior year. SGA Class Senators serve as Class Council members who are
+                liaisons with the SGA.
             </div>
             <div class="senator-intro">
                 <div class="senator-image">
@@ -255,7 +276,8 @@
         <section id="sponsors">
             <h2>SGA Sponsors</h2>
             <div id="sponsors-desc">
-                The SGA Sponsors attend all SGA meetings and functions. They also provide invaluable guidance and feedback - whether through late night emails, frigid-cold morning meetings, lunch discussions, or anything in between. 
+                The SGA Sponsors attend all SGA meetings and functions. They also provide invaluable guidance and feedback - whether through
+                late night emails, frigid-cold morning meetings, lunch discussions, or anything in between.
             </div>
             <div class="sponsor-intro">
                 <div class="sponsor-image">

css/about.css

@@ -1,9 +1,31 @@
-.officers-image, .excomm-image, .senator-image, .sponsor-image {
+#contact {
+    display: block;
+    text-align: center;
+}
+
+#contact>.desc {
+    font-size: 1.1em;
+}
+
+.quote {
+    color: #fff;
+    font-style: italic;
+    display: inline-block;
+    opacity: 0.7;
+}
+
+.officers-image,
+.excomm-image,
+.senator-image,
+.sponsor-image {
     width: 100%;
     height: 20vh;
 }
 
-.officers-image:after, .excomm-image:after, .senator-image:after, .sponsor-image:after {
+.officers-image:after,
+.excomm-image:after,
+.senator-image:after,
+.sponsor-image:after {
     width: 20vh;
     height: 20vh;
     content: '';
@@ -16,21 +38,32 @@
     border-radius: 50%;
 }
 
-.officers-text, #excomm-desc, .excomm-text, #senators-desc, .senator-text, #sponsors-desc, .sponsor-text {
+.officers-text,
+#excomm-desc,
+.excomm-text,
+#senators-desc,
+.senator-text,
+#sponsors-desc,
+.sponsor-text {
     font-size: 1.1em;
     color: #fff;
     width: 100%;
 }
 
-.officers-text > span, .excomm-text > span, .senator-text > span, .sponsor-text {
+.officers-text>span,
+.excomm-text>span,
+.senator-text>span,
+.sponsor-text {
     font-size: 1.4em;
     font-weight: bold;
     display: inline-block;
     width: 100%;
 }
 
-
+.officers-intro,
-.officers-intro, .excomm-intro, .senator-intro, .sponsor-intro  {
+.excomm-intro,
+.senator-intro,
+.sponsor-intro {
     text-align: center;
     margin: 2vw;
     flex-basis: calc(25% - 4vw);
@@ -38,16 +71,24 @@
     flex-wrap: wrap;
 }
 
-#excomm-desc, #senators-desc, #sponsors-desc {
+#excomm-desc,
-    margin: 0 7vw;
+#senators-desc,
+#sponsors-desc {
+    margin: 0 10vw;
 }
 
-#officers, #excomm, #senators, #sponsors {
+#officers,
+#excomm,
+#senators,
+#sponsors {
     display: flex;
     flex-wrap: wrap;
-    
 }
 
-#officers > h2, #excomm > h2, #senators > h2, #sponsors > h2 {
+#contact>h2,
+#officers>h2,
+#excomm>h2,
+#senators>h2,
+#sponsors>h2 {
     text-align: center;
 }

css/header.css

@@ -57,7 +57,6 @@ a.menu-item {
     z-index: 10;
     display: inline-block;
     float: left;
-    
 }
 
 button.menu-item {

css/main.css

@@ -9,7 +9,6 @@
     src: url('../fonts/OpenSans/OpenSans-Bold.ttf')
 }
 
-
 /*http://meyerweb.com/eric/tools/css/reset/*/
 html,body,div,span,button,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
     font: inherit;
@@ -160,7 +159,13 @@ section {
     z-index: 2;
 }
 
-#intro, #updates, #officers, #excomm, #senators, #sponsors, #links {
+#intro,
+#updates,
+#officers,
+#excomm,
+#senators,
+#sponsors,
+#resources {
     display: flex;
     height: 100%;
     justify-content: center;
@@ -185,6 +190,9 @@ section h2,
 
 #intro-text {
     text-align: center;
+}
+
+#intro-text {
     width: calc(50% - 8vw);
     margin: 0 2vw;
 }
@@ -229,6 +237,22 @@ section h2,
     margin: 0.5em 0;
 }
 
-#links > h2 {
+.desc {
+    font-size: 1.1em;
+    color: #fff;
+    margin: 0.5em 5vw;
+}
+
+.list>ul {
+    font-size: 1.1em;
+    margin: 0 10vw;
+}
+
+.desc>span {
+    display: inline-block;
+}
+
+.links>h2,
+.list>h2 {
     text-align: center;
 }

css/responsive.css

@@ -1,4 +1,7 @@
 @media screen and (max-width: 500px) {
+    ul {
+        margin: 0 10vw;
+    }
     #dome {
         display: none;
     }
@@ -15,9 +18,15 @@
     #intro-text {
         margin: 0 5vw;
     }
-    .officers-intro, .excomm-intro, .senator-intro, .sponsor-intro {
+    .officers-intro,
+    .excomm-intro,
+    .senator-intro,
+    .sponsor-intro {
         margin: 7vw;
     }
+    nav#menu {
+        overflow: hidden;
+    }
 }
 
 @media screen and (max-width: 1100px) {
@@ -74,7 +83,10 @@
     #menu-toggle {
         display: block;
     }
-    .officers-intro, .excomm-intro, .senator-intro, .sponsor-intro  {
+    .officers-intro,
+    .excomm-intro,
+    .senator-intro,
+    .sponsor-intro {
         flex-basis: calc(50% - 4vw);
     }
 }
@@ -83,7 +95,9 @@
     #intro-text,
     #intro-image,
     #tweets,
-    #feedback {
+    #feedback,
+    .list,
+    .links {
         width: 100%;
     }
     section {
@@ -95,13 +109,30 @@
     #intro-text,
     #intro-image,
     #tweets,
-    #feedback {
+    #feedback,
+    .list,
+    .links {
         max-width: 550px;
     }
+    .list>ul {
+        margin: 0 5vw;
+    }
+    .desc,
+    .list>ul {
+        font-size: 1.3em;
+    }
+    /*.officers-intro, .excomm-intro, .senator-intro, .sponsor-intro {
+        flex-basis: calc(35% - 4vw);
+    }*/
 }
 
 @media screen and (min-width: 1800px) {
     #letter {
         font-size: 1.4em;
     }
+    #excomm-desc,
+    #senators-desc,
+    #sponsors-desc {
+        margin: 0 20vw;
+    }
 }

forms-temp.html

@@ -0,0 +1,55 @@
+<!--<h2>February Frenzy Volleyball Tournament 2017</h2>
+            <a href="https://docs.google.com/document/d/1FPNXRipNI98REYuoBTVi6OSULJEsoa_OoCJGL1uXfiY/edit" target="_blank">
+                2017 February Frenzy Permission
+            </a>
+            <a href="https://docs.google.com/document/d/1FPNXRipNI98REYuoBTVi6OSULJEsoa_OoCJGL1uXfiY/edit" target="_blank">
+                Rules + Forms
+            </a>
+            <a href="https://docs.google.com/forms/d/e/1FAIpQLSfE1q8vWm1DzACaeBBlSm-rN-H_Go7j-JLbY938uB0il6ncHg/viewform" target="_blank">
+                2017 February Frenzy Registration
+            </a>
+
+            <h2>Middle School Leadership Conference</h2>
+            <a href="https://docs.google.com/document/d/1QENrXmRVlOlpF2bJvXxFo2us6pMyqH3F1Lf3Elb9g-4/edit?usp=sharing" target="_blank">
+                2017 Activity/Workshop Form
+            </a>
+
+            <h2>Jefferson Day 2017</h2>
+            <a href="https://docs.google.com/document/d/10iWm9I_uKcs9ONCf_MbdHkEeSaV1ZXZFluUJ8GOXYo8/edit" target="_blank">
+                J-Day Guide (courtesy of Devan Kowdley)
+            </a>
+            <a href="https://docs.google.com/spreadsheets/d/1vQMRtvvq5MFvWJQ6x0kksYTy3inxqd2rIjOhaeT2-Bg/edit#gid=0" target="_blank">
+                J-Day Performance
+            </a>
+            <a href="https://docs.google.com/spreadsheets/d/1vQMRtvvq5MFvWJQ6x0kksYTy3inxqd2rIjOhaeT2-Bg/edit#gid=0" target="_blank">
+                Schedule
+            </a>                
+            <a href="https://docs.google.com/presentation/d/1UrXJ9RDRBkNg5MrGSB0pGBs4jyqfinMq11AZBYUviMs/edit#slide=id.g1e1bf490cc_0_67"  target="_blank">
+                J-Day Map and Club Key
+            </a>
+            
+            <h2>J-Day May Madness Basketball</h2>>
+                <ul>
+                    <li>
+                        <a href="https://docs.google.com/document/d/14XifheYhCZGAuoTERynfW_7ssXLdngaApOlN2PJ1tY8/edit" target="_blank">
+                            Schedule &amp; Rules
+                        </a>
+                    </li>
+                    <li>
+                        <a href="https://docs.google.com/spreadsheets/d/1e8ux2jT1YVEUc318Ns1kQ9YGtHa9gzptvdQraOEpU1g/edit?usp=sharing" target="_blank">
+                            Seeding &amp; Roster
+                        </a>
+                    </li>
+                    <li>
+                        Updated Basketball Bracket&nbsp;→&nbsp;Coming Soon!
+                    </li>
+                    <li>
+                        <a href="/uploads/3/8/0/7/38079437/jdaybballpermissionform2016.docx">
+                            J-Day Basketball Permission Form
+                        </a>
+                    </li>
+                </ul>
+            <h2>Slivoskey Grant</h2>
+            <a href="/uploads/3/8/0/7/38079437/slivoskey-grant-application-2016.docx">
+                2016 Slivoskey Grant Application
+            </a>-->

forms.html

@@ -1,55 +1,70 @@
-<!--<h2>February Frenzy Volleyball Tournament 2017</h2>
+<!DOCTYPE html>
-            <a href="https://docs.google.com/document/d/1FPNXRipNI98REYuoBTVi6OSULJEsoa_OoCJGL1uXfiY/edit" target="_blank">
+<html>
-                2017 February Frenzy Permission
-            </a>
-            <a href="https://docs.google.com/document/d/1FPNXRipNI98REYuoBTVi6OSULJEsoa_OoCJGL1uXfiY/edit" target="_blank">
-                Rules + Forms
-            </a>
-            <a href="https://docs.google.com/forms/d/e/1FAIpQLSfE1q8vWm1DzACaeBBlSm-rN-H_Go7j-JLbY938uB0il6ncHg/viewform" target="_blank">
-                2017 February Frenzy Registration
-            </a>
 
-            <h2>Middle School Leadership Conference</h2>
+<head>
-            <a href="https://docs.google.com/document/d/1QENrXmRVlOlpF2bJvXxFo2us6pMyqH3F1Lf3Elb9g-4/edit?usp=sharing" target="_blank">
+    <meta charset="UTF-8">
-                2017 Activity/Workshop Form
+    <meta content="" name="description">
-            </a>
+    <meta content="William Zhang" name="author">
+    <meta name="theme-color" content="#1976D2" />
+    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0" />
+    <link href="icons/favicon.ico" rel="icon" type="image/ico">
+    <link href="css/header.css" rel="stylesheet" />
+    <link href="css/main.css" rel="stylesheet" />
+    <link href="css/footer.css" rel="stylesheet" />
+    <link href="css/responsive.css" rel="stylesheet" />
+    <title>Forms - TJSGA</title>
+</head>
 
-            <h2>Jefferson Day 2017</h2>
+<body>
-            <a href="https://docs.google.com/document/d/10iWm9I_uKcs9ONCf_MbdHkEeSaV1ZXZFluUJ8GOXYo8/edit" target="_blank">
+    <header>
-                J-Day Guide (courtesy of Devan Kowdley)
+        <div id="banner">
+            <button id="menu-toggle" class="fluid">
+                <i></i>
+            </button>
+            <h1>TJ STUDENT GOVERNMENT ASSOCIATION</h1>
+        </div>
+        <nav id="menu" class="fluid">
+            <a class="menu-item" href="index.html">
+                <button class="menu-item fluid">Home</button>
             </a>
-            <a href="https://docs.google.com/spreadsheets/d/1vQMRtvvq5MFvWJQ6x0kksYTy3inxqd2rIjOhaeT2-Bg/edit#gid=0" target="_blank">
+            <a class="menu-item" href="about.html">
-                J-Day Performance
+                <button class="menu-item fluid">About</button>
             </a>
-            <a href="https://docs.google.com/spreadsheets/d/1vQMRtvvq5MFvWJQ6x0kksYTy3inxqd2rIjOhaeT2-Bg/edit#gid=0" target="_blank">
+            <a class="menu-item" href="resources.html">
-                Schedule
+                <button class="menu-item fluid">Resources</button>
             </a>
-            <a href="https://docs.google.com/presentation/d/1UrXJ9RDRBkNg5MrGSB0pGBs4jyqfinMq11AZBYUviMs/edit#slide=id.g1e1bf490cc_0_67"  target="_blank">
+            <a class="menu-item" href="forms.html">
-                J-Day Map and Club Key
+                <button class="menu-item fluid">Forms</button>
             </a>
+        </nav>
+        <div id="dome">
+        </div>
+    </header>
+    <div id="wrapper" class="fluid">
+        <section id="links">
 
-            <h2>J-Day May Madness Basketball</h2>>
+        </section>
-                <ul>
+    </div>
-                    <li>
+    <footer>
-                        <a href="https://docs.google.com/document/d/14XifheYhCZGAuoTERynfW_7ssXLdngaApOlN2PJ1tY8/edit" target="_blank">
+        <span>&copy; 2017 TJSGA</span>
-                            Schedule &amp; Rules
+        <a href="https://facebook.com/tjsga" target="_blank">
+            <button class="social" id="fb">
+            </button>
         </a>
-                    </li>
+        <a href="https://twitter.com/tjSGA" target="_blank">
-                    <li>
+            <button class="social" id="tw">
-                        <a href="https://docs.google.com/spreadsheets/d/1e8ux2jT1YVEUc318Ns1kQ9YGtHa9gzptvdQraOEpU1g/edit?usp=sharing" target="_blank">
+            </button>
-                            Seeding &amp; Roster
         </a>
-                    </li>
+        <a href="https://facebook.com/tjsga" target="_blank">
-                    <li>
+            <button class="social" id="flickr">
-                        Updated Basketball Bracket&nbsp;→&nbsp;Coming Soon!
+            </button>
-                    </li>
-                    <li>
-                        <a href="/uploads/3/8/0/7/38079437/jdaybballpermissionform2016.docx">
-                            J-Day Basketball Permission Form
         </a>
-                    </li>
+        <a href="mailto:sga.tjhsst@gmail.com" target="_blank">
-                </ul>
+            <button class="social" id="mail">
-            <h2>Slivoskey Grant</h2>
+            </button>
-            <a href="/uploads/3/8/0/7/38079437/slivoskey-grant-application-2016.docx">
+        </a>
-                2016 Slivoskey Grant Application
+    </footer>
-            </a>-->
+    <script src="js/sidebar.js"></script>
+</body>
+
+</html>

resources.html

@@ -41,7 +41,8 @@
         </div>
     </header>
     <div id="wrapper" class="fluid">
-        <section id="links">
+        <section id="resources">
+            <div class="list">
                 <h2>General Resources</h2>
                 <ul>
                     <li>
@@ -51,15 +52,75 @@
                     </li>
                     <li>
                         <a href="/uploads/3/8/0/7/38079437/wi-fi_faq_-_june_2015.pdf" target="_blank">
-                        TJ Wi-Fi Frequently Asked Questions: FCPSonboard
+                            TJ Wi-Fi FAQs: FCPSonboard
                         </a>
                     </li>
                     <li>
                         <a href="/uploads/3/8/0/7/38079437/sgafoodguidelinesmadeeasypizzasalebakesales-2.pdf" target="_blank">
-                        SGA Pizza Sale and Bake Sale Food Guidelines (Updated 1/26/15)
+                            SGA Pizza Sale and Bake Sale Food Guidelines
                         </a>
                     </li>
                 </ul>
+            </div>
+            <div class="list">
+                <h2>Mental Health</h2>
+                <ul>
+                    <li>
+                        <a href="https://tjmindmatters.weebly.com" target="_blank">
+                            TJ Mind Matters
+                        </a>
+                    </li>
+                    <li>
+                        <a href="https://tjmindmatters.weebly.com/dos-and-donts.html">
+                            How to Help a Friend
+                        </a>
+                    </li>
+                    <li>
+                        <a href="https://tjmindmatters.weebly.com/from-tj-to-tj" target="_blank">
+                            Read &amp; Submit  From TJ, to TJ Letters
+                        </a>
+                    </li>
+                    <li>
+                        <a href="https://tjmindmatters.weebly.com/youth-mental-health-first-aid.html" target="_blank">
+                            Register for YMHFA Training
+                        </a>
+                    </li>
+                    <li>
+                        <a href="http://tjmindmatters.weebly.com/blog" target="_blank">
+                            TJ Mind Matters Blog
+                        </a>
+                    </li>
+                </ul>
+            </div>
+            <div class="links">
+                <h2>Course for Action</h2>
+                <div class="desc">
+                    An SGA initiative, designed by the students, for the students. Learn about the courses available at TJHSST from students
+                    who've taken them and the teachers that teach them!
+                    <span>
+                        Visit the YouTube channel <a href="https://youtube.com/channel/UCGvdoktHFvLHpqBaj17zKwQ" target="_blank">
+                        here.
+                    </a>
+                    </span>
+                </div>
+            </div>
+            <div class="links">
+                <h2>Student Advocacy</h2>
+                <div class="desc">
+                    At Jefferson, students have rights and responsibilities that they are guaranteed as a part of their educational experience.
+                    <a href="https://www.tjhsst.edu/abouttj/integrity/docs/Student%20advocacy%20brochure%202014.pdf" target="_blank">
+                            The Student Advocacy Guidlines
+                    </a> were created to help students be aware of how they can proactively manage their
+                    learning, self-advocate, and succeed in school.
+                </div>
+                <div class="desc">
+                    Use
+                    <a href="https://docs.google.com/forms/d/1clH0ga4U2G2hu2gW3EZpwW9BCJDU76RytTTJCKaheao/viewform" target="_blank">
+                        this form
+                    </a> to report divergences from the Student Advocacy Guidelines. Submissions will
+                    be kept strictly confidential, but name & grade are required for follow-up of the situation.
+                </div>
+            </div>
         </section>
     </div>
     <footer>