Spaces:

celinah
/

huggingface-timeline-voyager

Running

App Files Files Community

celinah HF Staff commited on 17 days ago

Commit

70a3163

verified ·

1 Parent(s): b8ba3da

use bold Source Sans Pro

Browse files

Files changed (3) hide show

components/footer.js +4 -2
components/navbar.js +4 -4
index.html +12 -12

components/footer.js CHANGED Viewed

@@ -27,7 +27,8 @@ class CustomFooter extends HTMLElement {
           color: #a5b4fc;
           text-decoration: none;
           transition: color 0.2s;
-        }
         .footer-links a:hover {
           color: white;
         }
@@ -53,7 +54,8 @@ class CustomFooter extends HTMLElement {
         .copyright {
           font-size: 0.875rem;
           color: #a5b4fc;
-        }
       </style>
       <footer>
         <div class="footer-content">

           color: #a5b4fc;
           text-decoration: none;
           transition: color 0.2s;
+          font-weight: 600;
+}
         .footer-links a:hover {
           color: white;
         }
         .copyright {
           font-size: 0.875rem;
           color: #a5b4fc;
+          font-weight: 600;
+}
       </style>
       <footer>
         <div class="footer-content">

components/navbar.js CHANGED Viewed

@@ -18,8 +18,8 @@ class CustomNavbar extends HTMLElement {
           display: flex;
           align-items: center;
           gap: 0.5rem;
-          font-weight: bold;
-          color: #4f46e5;
           font-size: 1.25rem;
         }
         .logo-icon {
@@ -36,8 +36,8 @@ class CustomNavbar extends HTMLElement {
         a {
           color: #4b5563;
           text-decoration: none;
-          font-weight: 500;
-          transition: color 0.2s;
         }
         a:hover {
           color: #4f46e5;

           display: flex;
           align-items: center;
           gap: 0.5rem;
+          font-weight: 900;
+color: #4f46e5;
           font-size: 1.25rem;
         }
         .logo-icon {
         a {
           color: #4b5563;
           text-decoration: none;
+          font-weight: 600;
+transition: color 0.2s;
         }
         a:hover {
           color: #4f46e5;

index.html CHANGED Viewed

@@ -5,16 +5,16 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>🤗 HuggingFace Timeline</title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap">
-    <link rel="stylesheet" href="style.css">
     <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gif.js/0.2.0/gif.js"></script>
 </head>
-<body style="font-family: 'Inter', sans-serif; background-color: #f5f5f5;">
-    <div class="container" style="max-width: 1200px; margin: 0 auto; padding: 2rem;">
         <div style="text-align: center; margin-bottom: 3rem;">
-            <h1 style="font-size: 2.5rem; font-weight: 700; color: #ffd21e; margin-bottom: 2rem;">
-                🤗 huggingface_hub journey
             </h1>
 </div>
@@ -26,7 +26,7 @@
                     <div class="timeline-item" style="width: 200px; position: relative;">
                         <div style="position: absolute; top: -14px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; background: #ff6b00; border-radius: 50%; border: 3px solid white;"></div>
                         <div style="background: white; padding: 1.5rem; border-radius: 8px; margin-top: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
-                            <h3 style="font-weight: 600; color: #ff6b00; margin: 0 0 0.5rem 0;">Foundation</h3>
 <ul style="padding-left: 1rem; margin: 0; font-size: 0.875rem; color: #555; line-height: 1.6;">
                                 <li>First release</li>
                                 <li>Git wrapper</li>
@@ -39,7 +39,7 @@
                     <div class="timeline-item" style="width: 200px; position: relative;">
                         <div style="position: absolute; top: -14px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; background: #ff6b00; border-radius: 50%; border: 3px solid white;"></div>
                         <div style="background: white; padding: 1.5rem; border-radius: 8px; margin-top: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
-                            <h3 style="font-weight: 600; color: #ff6b00; margin: 0 0 0.5rem 0;">Git to HTTP</h3>
 <ul style="padding-left: 1rem; margin: 0; font-size: 0.875rem; color: #555; line-height: 1.6;">
                                 <li>HTTP Commit API</li>
                                 <li>Git-aware cache</li>
@@ -52,7 +52,7 @@
                     <div class="timeline-item" style="width: 200px; position: relative;">
                         <div style="position: absolute; top: -14px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; background: #ff6b00; border-radius: 50%; border: 3px solid white;"></div>
                         <div style="background: white; padding: 1.5rem; border-radius: 8px; margin-top: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
-                            <h3 style="font-weight: 600; color: #ff6b00; margin: 0 0 0.5rem 0;">API Expansion</h3>
 <ul style="padding-left: 1rem; margin: 0; font-size: 0.875rem; color: #555; line-height: 1.6;">
                                 <li>Inference API</li>
                                 <li>Community features</li>
@@ -65,7 +65,7 @@
                     <div class="timeline-item" style="width: 200px; position: relative;">
                         <div style="position: absolute; top: -14px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; background: #ff6b00; border-radius: 50%; border: 3px solid white;"></div>
                         <div style="background: white; padding: 1.5rem; border-radius: 8px; margin-top: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
-                            <h3 style="font-weight: 600; color: #ff6b00; margin: 0 0 0.5rem 0;">Xet Protocol</h3>
 <ul style="padding-left: 1rem; margin: 0; font-size: 0.875rem; color: #555; line-height: 1.6;">
                                 <li>Chunk storage</li>
                                 <li>77PB+ migrated</li>
@@ -87,8 +87,8 @@
         </div>
         <div id="gif-preview" style="margin-top: 2rem; display: none; text-align: center;">
-            <h3 style="font-weight: 600; margin-bottom: 1rem;">GIF Preview</h3>
-            <img id="gif-result" style="max-width: 100%; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
             <button id="downloadGif" style="margin-top: 1rem; background: #ff6b00; color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 6px; font-weight: 600; cursor: pointer;">
                 Download GIF
             </button>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>🤗 HuggingFace Timeline</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700;900&display=swap">
+<link rel="stylesheet" href="style.css">
     <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gif.js/0.2.0/gif.js"></script>
 </head>
+<body style="font-family: 'Source Sans Pro', sans-serif; background-color: #f5f5f5;">
+<div class="container" style="max-width: 1200px; margin: 0 auto; padding: 2rem;">
         <div style="text-align: center; margin-bottom: 3rem;">
+            <h1 style="font-size: 2.5rem; font-weight: 900; color: #ffd21e; margin-bottom: 2rem;">
+🤗 huggingface_hub journey
             </h1>
 </div>
                     <div class="timeline-item" style="width: 200px; position: relative;">
                         <div style="position: absolute; top: -14px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; background: #ff6b00; border-radius: 50%; border: 3px solid white;"></div>
                         <div style="background: white; padding: 1.5rem; border-radius: 8px; margin-top: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
+                            <h3 style="font-weight: 700; color: #ff6b00; margin: 0 0 0.5rem 0;">Foundation</h3>
 <ul style="padding-left: 1rem; margin: 0; font-size: 0.875rem; color: #555; line-height: 1.6;">
                                 <li>First release</li>
                                 <li>Git wrapper</li>
                     <div class="timeline-item" style="width: 200px; position: relative;">
                         <div style="position: absolute; top: -14px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; background: #ff6b00; border-radius: 50%; border: 3px solid white;"></div>
                         <div style="background: white; padding: 1.5rem; border-radius: 8px; margin-top: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
+                            <h3 style="font-weight: 700; color: #ff6b00; margin: 0 0 0.5rem 0;">Git to HTTP</h3>
 <ul style="padding-left: 1rem; margin: 0; font-size: 0.875rem; color: #555; line-height: 1.6;">
                                 <li>HTTP Commit API</li>
                                 <li>Git-aware cache</li>
                     <div class="timeline-item" style="width: 200px; position: relative;">
                         <div style="position: absolute; top: -14px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; background: #ff6b00; border-radius: 50%; border: 3px solid white;"></div>
                         <div style="background: white; padding: 1.5rem; border-radius: 8px; margin-top: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
+                            <h3 style="font-weight: 700; color: #ff6b00; margin: 0 0 0.5rem 0;">API Expansion</h3>
 <ul style="padding-left: 1rem; margin: 0; font-size: 0.875rem; color: #555; line-height: 1.6;">
                                 <li>Inference API</li>
                                 <li>Community features</li>
                     <div class="timeline-item" style="width: 200px; position: relative;">
                         <div style="position: absolute; top: -14px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; background: #ff6b00; border-radius: 50%; border: 3px solid white;"></div>
                         <div style="background: white; padding: 1.5rem; border-radius: 8px; margin-top: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
+                            <h3 style="font-weight: 700; color: #ff6b00; margin: 0 0 0.5rem 0;">Xet Protocol</h3>
 <ul style="padding-left: 1rem; margin: 0; font-size: 0.875rem; color: #555; line-height: 1.6;">
                                 <li>Chunk storage</li>
                                 <li>77PB+ migrated</li>
         </div>
         <div id="gif-preview" style="margin-top: 2rem; display: none; text-align: center;">
+            <h3 style="font-weight: 700; margin-bottom: 1rem;">GIF Preview</h3>
+<img id="gif-result" style="max-width: 100%; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
             <button id="downloadGif" style="margin-top: 1rem; background: #ff6b00; color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 6px; font-weight: 600; cursor: pointer;">
                 Download GIF
             </button>