Merge pull request #8 from stemcoding/chris-branch

Implement style changes and landing page redesign

Author: chrisorban

docs/activities.html

@@ -135,78 +135,69 @@
     </nav>
 </header>
 <!-- content -->
-<div id="quarto-content" class="quarto-container page-columns page-rows-contents page-layout-article page-navbar">
+<div id="quarto-content" class="quarto-container page-columns page-rows-contents page-layout-full page-navbar">
 <!-- sidebar -->
 <!-- margin-sidebar -->
-    <div id="quarto-margin-sidebar" class="sidebar margin-sidebar">
-        <nav id="TOC" role="doc-toc" class="toc-active">
-    <h2 id="toc-title">On this page</h2>
-   
-  <ul>
-  <li><a href="#welcome-to-the-stemcoding-landing-page" id="toc-welcome-to-the-stemcoding-landing-page" class="nav-link active" data-scroll-target="#welcome-to-the-stemcoding-landing-page">Welcome to the STEMcoding Landing Page!</a></li>
-  </ul>
-</nav>
-    </div>
+    
 <!-- main -->
-<main class="content" id="quarto-document-content"><header id="title-block-header" class="quarto-title-block"></header>
+<main class="content column-page" id="quarto-document-content"><header id="title-block-header" class="quarto-title-block"></header>
 
 
 
 
-<section id="welcome-to-the-stemcoding-landing-page" class="level2">
-<h2 class="anchored" data-anchor-id="welcome-to-the-stemcoding-landing-page">Welcome to the STEMcoding Landing Page!</h2>
-<p>The STEMcoding project is a partnership between <a href="./people.html">faculty members and students</a> at <a href="http://osu.edu">Ohio State University</a> and the <a href="http://mountunion.edu">University of Mount Union</a></p>
+<div class="sc-hero">
+<video controls="" autoplay="" loop="" muted="" playsinline="" class="sc-hero-video">
+<source src="vid/welcome_to_stemcoding2.mp4" type="video/mp4">
+</video>
+<div class="sc-hero-inner">
+<p class="sc-hero-lead">
+Activities, curriculum, and a thriving community — built by <a href="http://osu.edu">Ohio State</a> and <a href="http://mountunion.edu">Mount Union</a> faculty &amp; students to bring <strong>computer science</strong> and <strong>data science</strong> into intro math and science courses.
+</p>
+<p><a href="./activities.html" class="sc-hero-cta">Browse activities →</a></p>
+</div>
+</div>
+<div class="sc-home">
+<section id="the-stemcoding-project" class="level2">
+<h2 class="anchored" data-anchor-id="the-stemcoding-project">The STEMcoding Project</h2>
+<p>The STEMcoding project is a partnership between <a href="./people.html">faculty members and students</a> at <a href="http://osu.edu">Ohio State University</a> and the <a href="http://mountunion.edu">University of Mount Union</a>.</p>
 <p>The STEMcoding project exists to re-imagine introductory STEM courses like math and science with computer science and data science in mind. Our <a href="./activities.html">activities</a> are used in intro level college courses and high school courses.</p>
 <p>We love to create activities that <b><em>each</em></b> align with relevant math, <a href="http://go.osu.edu/ngss">science</a> <b><em>and</em></b> computer science standards. Some of our physical science activities appear on the <a href="https://web.archive.org/web/20221020133711/https://education.ohio.gov/getattachment/Topics/Learning-in-Ohio/Science/Ohios-Learning-Standards-and-MC/Final-Physical-Science-Instructional-Supports.pdf.aspx?lang=en-US">“model curriculum” examples</a> distributed by the Ohio Department of Education and Workforce. We are also working to create a year-long <a href="datascience.html">data science curriculum</a>.</p>
-<video width="100%" controls="" autoplay="" muted="" loop="">
+<!--
+<video width="100%" controls autoplay muted loop>
 <source src="vid/welcome_to_stemcoding2.mp4" type="video/mp4">
 </video>
+-->
 <p>We are very proud of the <a href="http://youtube.com/STEMcoding">STEMcoding youtube channel!</a> We have released over 100 videos featuring faculty and students at Ohio State University and the University of Mount Union.</p>
 <!--
 <iframe style="display: block; margin-left: auto; margin-right: auto;"  width="560" height="315" src="https://www.youtube.com/embed/pqXiZLnXe2U?si=0nSckcTS2osfQXVF" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 -->
 <p>We hope you enjoy this site! Check out our <a href="./feed.html">Social Media Feed</a> to see what we’ve been up to lately, or our <a href="./calendar.html">Calendar</a> to see upcoming events and trainings. Please join our <a href="https://discord.gg/bsWgqcqwCE">Discord</a> to reach out or ask questions!!!</p>
-<div class="margin-sidebar-content">
-<p><br> <br> <br> <br> <br> <br> <br></p>
+</section>
+<section id="latest-from-our-social-feed" class="level2">
+<h2 class="anchored" data-anchor-id="latest-from-our-social-feed">Latest from our Social Feed</h2>
 <p><link rel="stylesheet" type="text/css" href="./assets/toots-v2.css"></p>
 <style>
-  /* Customize the overall width and text size of the feed */
   .toots {
-    max-width: 100%; /* Adjust this value (e.g., 600px, 80%) as needed */
-    margin: 0 auto !important; /* Centers the feed on the page */
-    font-size: 1.1rem; /* Increases the text size of the feed */
+    max-width: 100%;
+    margin: 0 auto !important;
+    font-size: 1.05rem;
   }
-
-  /* Customize the vertical size of each individual toot */
   .toot {
-    padding-top: 2rem !important; /* Increases the top padding */
-    padding-bottom: 2rem !important; /* Increases the bottom padding */
-/*    min-height: 1000px; Uncomment this if you want to force a specific minimum height */
-  }
-
-  /* Hide the @username handle, leaving only the display name */
-  .toot .username {
-    display: none !important;
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important;
   }
-
-  /* Container to make the feed scrollable */
+  .toot .username { display: none !important; }
   .feed-container {
-    height: calc(100vh - 300px); /* Responsive height to avoid page scroll */
-    overflow-y: auto !important; /* Show scrollbar if feed is long */
+    max-height: 600px;
+    overflow-y: auto !important;
     overscroll-behavior: contain;
-    border: 1px solid #ccc;
-    border-radius: 8px;
-    padding: 10px;
-    pointer-events: auto; /* Ensure the container can receive scroll events */
-    position: relative;
-    z-index: 100;
+    padding: 10px 16px;
   }
 </style>
 <div class="feed-container">
 <p><a class="mastodon-feed" href="https://mastodon.social/@stemcoding" data-toot-limit="20" data-exclude-replies="true">STEM Coding Mastodon feed</a></p>
 <script type="module" src="./assets/js/emfed-bundle-v2.js"></script>
 </div>
-</div>
 <script>
 document.addEventListener('DOMContentLoaded', function() {
     // Find the margin sidebar
@@ -243,8 +234,10 @@ <h2 class="anchored" data-anchor-id="welcome-to-the-stemcoding-landing-page">Wel
 
 
 </section>
+</div>
+</main></div>
 
-</main> <!-- /main -->
+ <!-- /main -->
 <script id="quarto-html-after-body" type="application/javascript">
   window.document.addEventListener("DOMContentLoaded", function (event) {
     const icon = "";
@@ -645,7 +638,7 @@ <h2 class="anchored" data-anchor-id="welcome-to-the-stemcoding-landing-page">Wel
     }
   });
   </script>
-</div> <!-- /content -->
+ <!-- /content -->
 
 
 

docs/index.html

@@ -914,7 +914,7 @@
     "href": "index.html",
     "title": "STEMcoding",
     "section": "",
-    "text": "The STEMcoding project is a partnership between faculty members and students at Ohio State University and the University of Mount Union\nThe STEMcoding project exists to re-imagine introductory STEM courses like math and science with computer science and data science in mind. Our activities are used in intro level college courses and high school courses.\nWe love to create activities that each align with relevant math, science and computer science standards. Some of our physical science activities appear on the “model curriculum” examples distributed by the Ohio Department of Education and Workforce. We are also working to create a year-long data science curriculum.\n\n\n\nWe are very proud of the STEMcoding youtube channel! We have released over 100 videos featuring faculty and students at Ohio State University and the University of Mount Union.\n\nWe hope you enjoy this site! Check out our Social Media Feed to see what we’ve been up to lately, or our Calendar to see upcoming events and trainings. Please join our Discord to reach out or ask questions!!!\n\n      \n\n\n\nSTEM Coding Mastodon feed"
+    "text": "Activities, curriculum, and a thriving community — built by Ohio State and Mount Union faculty & students to bring computer science and data science into intro math and science courses.\n\nBrowse activities →"
   },
   {
     "objectID": "index.html#welcome-to-the-stemcoding-landing-page",
@@ -1972,5 +1972,19 @@
     "title": "Are my error bars big or small?",
     "section": "Advanced",
     "text": "Advanced\nWhat we have done is obtained the error bar from the measurements rather than obtaining the error bar from our knowledge of the measurement methods we are using. This is not the only way to obtain error bars from the measured data. Another more complicated approach is called “bootstrapping”.\nAnother related situation is when you are shopping on a site like Amazon and you see a seller that has 5/5 stars but only 10 reviews, and another seller that is 4.8/5 stars with 50 reviews and another with 4.65/5 stars with 200 reviews. This is addressed in an excellent video by 3Blue1Brown. In that video he provides some math to back up what most of us already know which is that a 100% rating with only 10 reviews is not very impressive (because with so few reviews the error on the mean is very large)."
+  },
+  {
+    "objectID": "index.html#the-stemcoding-project",
+    "href": "index.html#the-stemcoding-project",
+    "title": "STEMcoding",
+    "section": "The STEMcoding Project",
+    "text": "The STEMcoding Project\nThe STEMcoding project is a partnership between faculty members and students at Ohio State University and the University of Mount Union.\nThe STEMcoding project exists to re-imagine introductory STEM courses like math and science with computer science and data science in mind. Our activities are used in intro level college courses and high school courses.\nWe love to create activities that each align with relevant math, science and computer science standards. Some of our physical science activities appear on the “model curriculum” examples distributed by the Ohio Department of Education and Workforce. We are also working to create a year-long data science curriculum.\n\nWe are very proud of the STEMcoding youtube channel! We have released over 100 videos featuring faculty and students at Ohio State University and the University of Mount Union.\n\nWe hope you enjoy this site! Check out our Social Media Feed to see what we’ve been up to lately, or our Calendar to see upcoming events and trainings. Please join our Discord to reach out or ask questions!!!"
+  },
+  {
+    "objectID": "index.html#latest-from-our-social-feed",
+    "href": "index.html#latest-from-our-social-feed",
+    "title": "STEMcoding",
+    "section": "Latest from our Social Feed",
+    "text": "Latest from our Social Feed\n\n\n\nSTEM Coding Mastodon feed"
   }
 ]