Update index.html

index.html

@@ -11,66 +11,66 @@
             --background-color: #f8f9fa;
             --hover-color: #007bff;
         }
+        html, body {
+            height: 100%;
+            margin: 0;
+            padding: 0;
+        }
         body {
             font-family: 'Arial', sans-serif;
             line-height: 1.6;
             color: var(--primary-color);
             background-color: var(--background-color);
-            margin: 0;
-            padding: 0;
-            display: flex;
-            flex-direction: column;
-            min-height: 100vh;
-        }
-        .container {
-            width: 100%;
-            flex-grow: 1;
             display: flex;
             flex-direction: column;
         }
         header {
             background-color: white;
             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-            padding: 20px 0;
+            padding: 10px 0;
             text-align: center;
         }
         h1 {
             color: var(--primary-color);
             margin: 0;
+            font-size: 1.5em;
         }
         .graph-container {
+            flex-grow: 1;
             width: 100%;
+            display: flex;
+        }
+        iframe {
             flex-grow: 1;
-            min-height: 70vh;
             border: none;
         }
         footer {
             background-color: var(--secondary-color);
             color: white;
             text-align: center;
-            padding: 20px 0;
+            padding: 10px 0;
         }
         .logo {
-            max-width: 150px;
+            max-width: 100px;
             height: auto;
-            margin-bottom: 15px;
+            vertical-align: middle;
+            margin-right: 10px;
         }
         .social-links {
-            display: flex;
-            justify-content: center;
-            gap: 15px;
-            margin-top: 15px;
+            display: inline-block;
+            vertical-align: middle;
         }
         .social-links a {
             opacity: 0.7;
             transition: opacity 0.3s ease;
+            margin: 0 5px;
         }
         .social-links a:hover {
             opacity: 1;
         }
         .social-links img {
-            width: 30px;
-            height: 30px;
+            width: 20px;
+            height: 20px;
         }
     </style>
 </head>
@@ -79,11 +79,8 @@
         <h1>Bunka Network Graph - Hugging Face Users</h1>
     </header>
     
-    <div class="container">
-        <div class="graph-container">
-            <!-- Embed the co_user graph here -->
-            <iframe src="co_user.html" width="100%" height="100%" frameborder="0"></iframe>
-        </div>
+    <div class="graph-container">
+        <iframe src="co_user.html" width="100%" height="100%" frameborder="0"></iframe>
     </div>
 
     <footer>
@@ -94,7 +91,6 @@
             <a href="https://www.linkedin.com/company/85881815" target="_blank"><img src="https://qtyhiurxoicqmxzpktkd.supabase.co/storage/v1/object/sign/email-content/LinkedIn_logo_initials.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJlbWFpbC1jb250ZW50L0xpbmtlZEluX2xvZ29faW5pdGlhbHMucG5nIiwiaWF0IjoxNzI0ODQwMDQ1LCJleHAiOjE3ODc5MTIwNDV9.9d6MAK3x9LOmsYyB8KyGk5PPFGkPNoGjsW7wdxiZt3M&t=2024-08-28T10%3A14%3A05.996Z" alt="LinkedIn"></a>
             <a href="https://discord.gg/3YRPVqXabQ" target="_blank"><img src="https://qtyhiurxoicqmxzpktkd.supabase.co/storage/v1/object/sign/email-content/discord.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJlbWFpbC1jb250ZW50L2Rpc2NvcmQucG5nIiwiaWF0IjoxNzI0ODM5ODc4LCJleHAiOjE3ODc5MTE4Nzh9.w1Ggb_Nh1UnjKeVujp_7ljAW0ZSP3ETNkYJLKuBZ_Zo&t=2024-08-28T10%3A11%3A18.993Z" alt="Discord"></a>
         </div>
-        <p>Created by Bunka. For more information, visit <a href="https://huggingface.co/bunkalab" style="color: white;">bunkalab on Hugging Face</a>.</p>
     </footer>
 </body>
 </html>