added new logo to all and changed related links layout

ayihuang · Aug 15, 2024 · 88fdfe7 · 88fdfe7
1 parent 9b3ffce
commit 88fdfe7
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 33 deletions.
diff --git a/Demonstrations.html b/Demonstrations.html
@@ -17,9 +17,9 @@
                 <li><a href="/relatedLinks.html">Related Links</a></li>
             </ul>
         </div>
-            <a href="https://ayihuang.github.io/">
-                <img id="skatelligenceLogoImg" src="SkatelligenceFullLogoCropped.png" alt="Skatelligence full logo" style="width: 250px; height: 59px" />
-            </a>
+        <a href="https://ayihuang.github.io/">
+            <img id="skatelligenceLogoImg" src="Skatelligence logo black.png" alt="Skatelligence full logo" style="width: 250px; height: 50px" />
+        </a>
             <ul class="nav">
                 <div class="hideOnMobile">
                 <li ><a href="/whoWeAre.html">Who We Are</a></li>
@@ -28,7 +28,7 @@
                 <li ><a href="/relatedLinks.html">Related Links</a></li>
                 </div>
                 <div class="menu-button">
-                <li  onClick= showSidebar()><a href="#"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#D9D9D9"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg></a></li>
+                <li  onClick= showSidebar()><a href="#"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg></a></li>
                 </div>
             </ul>
         </div>

diff --git a/index.html b/index.html
@@ -46,8 +46,8 @@
     <div class="flex-container">
         <!--Large text animation-->
         <div class="container">
-            <span id="text1">Big text one something</span>
-            <span id="text2"><i>Big text 2</i></span>
+            <span id="text1">Figure Skating Training</span>
+            <span id="text2"><i>Reimagined</i></span>
         </div>
         <!--acccompanying media to title text, animation?-->
         <div class="containerMedia">

diff --git a/relatedLinks.html b/relatedLinks.html
@@ -19,7 +19,7 @@
             </ul>
         </div>
             <a href="https://ayihuang.github.io/">
-                <img id="skatelligenceLogoImg" src="SkatelligenceFullLogoCropped.png" alt="Skatelligence full logo" style="width: 250px; height: 59px" />
+                <img id="skatelligenceLogoImg" src="Skatelligence logo black.png" alt="Skatelligence full logo" style="width: 250px; height: 50px" />
             </a>
             <ul class="nav">
                 <div class="hideOnMobile">
@@ -29,10 +29,11 @@
                 <li ><a href="/relatedLinks.html">Related Links</a></li>
                 </div>
                 <div class="menu-button">
-                <li  onClick= showSidebar()><a href="#"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#D9D9D9"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg></a></li>
+                <li  onClick= showSidebar()><a href="#"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg></a></li>
                 </div>
             </ul>
         </div>
+
         <script>
             function showSidebar(){
                 const sidebar = document.querySelector('.sidebar')
@@ -46,20 +47,23 @@
     <div class="img-container"></div>
     <h1><i>Related Links</i></h1>
     <!--Skatelligence repo section-->
-    <a href="https://github.com/nsmartinx/Skatelligence"><h2 class="pad">Skatelligence Repository</h2></a>
-    <h4 class="pad"><i>Quick Links</i></h4>
-    <div class="quickLinks">
-        <a href="https://github.com/nsmartinx/Skatelligence/blob/main/README.md">
-        <div class="link">
-            <div class="flex">
-                <img class="icon" src="book.png" alt="book" style="width:60px; height:60px" />
-                <p class="file"><b>README.md</b></p>
-            </div>
-        </div></a>
-        <div class="link"></div>
-        <div class="link"></div>
-        <div class="link"></div>
+    <div class="top-triangle"></div>
+    <div class = "skatelligence-repo">
+        <a href="https://github.com/nsmartinx/Skatelligence"><h2>Skatelligence Repository</h2></a>
+        <div class="quickLinks">
+            <a href="https://github.com/nsmartinx/Skatelligence/blob/main/README.md">
+            <div class="link">
+                <div class="flex">
+                    <img class="icon" src="book.png" alt="book" style="width:60px; height:60px" />
+                    <p class="file"><b>README.md</b></p>
+                </div>
+            </div></a>
+            <div class="link"></div>
+            <div class="link"></div>
+            <div class="link"></div>
+        </div>
     </div>
+    <div class="bottom-triangle"></div>
     <script src="relatedScript.js"></script>
     <!--footer navigation and links-->
     <div class="padder"></div>

diff --git a/relatedStyling.css b/relatedStyling.css
@@ -1,6 +1,8 @@
 h1 {
     padding: 50px 0px 50px 10px;
 }
+
+/*adds padding to the left of header texts */
 .pad{
     padding-left: 10px;
 }
@@ -26,6 +28,7 @@ h1 {
 }
 .icon{
     margin: 20px 20px 20px 20px;
+
 }
 .file{
     margin: 40px 0px 0px 0px;
@@ -34,13 +37,35 @@ h1 {
 .flex{
     display: flex;
 }
-.quickLinks{
-    padding-left:7%;
+.top-triangle{
+    width:0;
+    height: 0;
+    border-left: 100vw solid transparent;
+    border-bottom: 4vw solid #45288a;
+}
+.bottom-triangle{
+    width:0;
+    height: 0;
+    border-right: 100vw solid transparent;
+    border-top: 4vw solid #45288a;
+}
+.skatelligence-repo{
+    margin: 0px;
+    padding: 0px;
+    background-color: #45288a;
+    text-align: center;
+}
+.skatelligence-repo h2{
+    margin-top: 0px;
+}
+.quickLinks{ /*parent for all the rectangles with links */
+    justify-content: center;
     display: flex;
     flex-wrap: wrap;
     gap: 100px;
+
 }
-.link {
+.link { /* rectangle*/
     border-radius: 25px;
     background: #f3e8fa;
     width: 325px;
@@ -60,13 +85,13 @@ h1 {
 }
 
 .link:nth-child(2).visible {
-    transition-delay: 0.5s;
+    transition-delay: 0.3s;
 }
 
 .link:nth-child(3).visible {
-    transition-delay: 1s;
+    transition-delay: 0.6s;
 }
 
 .link:nth-child(4).visible {
-    transition-delay: 1.5s;
+    transition-delay: 0.9s;
 }
diff --git a/styles.css b/styles.css
@@ -48,7 +48,7 @@ a:visited {
     color:rgb(38, 5, 43)
 }
 .nav a{
-    padding: 27px 15px 27px 15px;
+    padding: 24px 15px 24px 15px;
     height:100%;
 }
 

diff --git a/technDetails.html b/technDetails.html
@@ -28,7 +28,7 @@
                 <li ><a href="/relatedLinks.html">Related Links</a></li>
                 </div>
                 <div class="menu-button">
-                <li  onClick= showSidebar()><a href="#"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#D9D9D9"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg></a></li>
+                <li  onClick= showSidebar()><a href="#"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg></a></li>
                 </div>
             </ul>
         </div>

diff --git a/whoWeAre.html b/whoWeAre.html
@@ -18,9 +18,9 @@
                 <li><a href="/relatedLinks.html">Related Links</a></li>
             </ul>
         </div>
-            <a href="https://ayihuang.github.io/">
-                <img id="skatelligenceLogoImg" src="SkatelligenceFullLogoCropped.png" alt="Skatelligence full logo" style="width: 250px; height: 59px" />
-            </a>
+        <a href="https://ayihuang.github.io/">
+            <img id="skatelligenceLogoImg" src="Skatelligence logo black.png" alt="Skatelligence full logo" style="width: 250px; height: 50px" />
+        </a>
             <ul class="nav">
                 <div class="hideOnMobile">
                 <li ><a href="/whoWeAre.html">Who We Are</a></li>
@@ -29,7 +29,7 @@
                 <li ><a href="/relatedLinks.html">Related Links</a></li>
                 </div>
                 <div class="menu-button">
-                <li  onClick= showSidebar()><a href="#"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#D9D9D9"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg></a></li>
+                <li  onClick= showSidebar()><a href="#"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg></a></li>
                 </div>
             </ul>
         </div>