webui: Jetbrains Mono, fix porep layout (#179)

filecoin-project · Aug 30, 2024 · 5f6156a · 5f6156a
1 parent 52f698d
commit 5f6156a
Show file tree

Hide file tree

Showing 19 changed files with 39 additions and 32 deletions.
diff --git a/web/static/pages/pipeline_porep/index.html b/web/static/pages/pipeline_porep/index.html
@@ -10,13 +10,13 @@
 </head>
 <body style="visibility: hidden">
 <curio-ux>
-<div class="app-head">
-    <div class="head-left">
-        <h1>Curio PoRep Pipeline</h1>
-    </div>
-</div>
-<hr/>
 <div class="page">
+    <div class="app-head">
+        <div class="head-left">
+            <h1>Curio PoRep Pipeline</h1>
+        </div>
+        <hr/>
+    </div>
     <div class="row">
         <div class="row-md-auto" style="width: 50%">
             <div class="info-block">
@@ -33,6 +33,7 @@ <h2>Sectors</h2>
         </div>
         <div class="row-md-auto"></div>
     </div>
-</div></curio-ux>
+</div>
+</curio-ux>
 </body>
 </html>
diff --git a/web/static/ux/curio-ux.mjs b/web/static/ux/curio-ux.mjs
@@ -126,7 +126,7 @@ class CurioUX extends LitElement {
             <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"></path>
           </symbol>
         </svg>
-        <div class="d-flex flex-column flex-shrink-0 p-3 text-white bg-dark" style="width: 200px; min-height:100vh; margin-right: 1rem">
+        <div class="d-flex flex-column flex-shrink-0 p-3 text-white bg-dark" style="width: 240px; min-height:100vh; margin-right: 1rem">
           <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
             <img src="/favicon.svg" width="40" height="32" class="d-inline-block align-top me-2" alt="">
             <span class="fs-4">Curio</span>

diff --git a/web/static/ux/fonts/JetBrainsMono-Bold.woff2 b/web/static/ux/fonts/JetBrainsMono-Bold.woff2
diff --git a/web/static/ux/fonts/JetBrainsMono-BoldItalic.woff2 b/web/static/ux/fonts/JetBrainsMono-BoldItalic.woff2
diff --git a/web/static/ux/fonts/JetBrainsMono-ExtraBold.woff2 b/web/static/ux/fonts/JetBrainsMono-ExtraBold.woff2
diff --git a/web/static/ux/fonts/JetBrainsMono-ExtraBoldItalic.woff2 b/web/static/ux/fonts/JetBrainsMono-ExtraBoldItalic.woff2
diff --git a/web/static/ux/fonts/JetBrainsMono-ExtraLight.woff2 b/web/static/ux/fonts/JetBrainsMono-ExtraLight.woff2
diff --git a/web/static/ux/fonts/JetBrainsMono-ExtraLightItalic.woff2 b/web/static/ux/fonts/JetBrainsMono-ExtraLightItalic.woff2
diff --git a/web/static/ux/fonts/JetBrainsMono-Italic.woff2 b/web/static/ux/fonts/JetBrainsMono-Italic.woff2
diff --git a/web/static/ux/fonts/JetBrainsMono-Light.woff2 b/web/static/ux/fonts/JetBrainsMono-Light.woff2
diff --git a/web/static/ux/fonts/JetBrainsMono-LightItalic.woff2 b/web/static/ux/fonts/JetBrainsMono-LightItalic.woff2
diff --git a/web/static/ux/fonts/JetBrainsMono-Medium.woff2 b/web/static/ux/fonts/JetBrainsMono-Medium.woff2
diff --git a/web/static/ux/fonts/JetBrainsMono-MediumItalic.woff2 b/web/static/ux/fonts/JetBrainsMono-MediumItalic.woff2
diff --git a/web/static/ux/fonts/JetBrainsMono-Regular.woff2 b/web/static/ux/fonts/JetBrainsMono-Regular.woff2
diff --git a/web/static/ux/fonts/JetBrainsMono-SemiBold.woff2 b/web/static/ux/fonts/JetBrainsMono-SemiBold.woff2
diff --git a/web/static/ux/fonts/JetBrainsMono-SemiBoldItalic.woff2 b/web/static/ux/fonts/JetBrainsMono-SemiBoldItalic.woff2
diff --git a/web/static/ux/fonts/JetBrainsMono-Thin.woff2 b/web/static/ux/fonts/JetBrainsMono-Thin.woff2
diff --git a/web/static/ux/fonts/JetBrainsMono-ThinItalic.woff2 b/web/static/ux/fonts/JetBrainsMono-ThinItalic.woff2
diff --git a/web/static/ux/main.css b/web/static/ux/main.css
@@ -1,4 +1,3 @@
-
 html {
     min-height: 100vh;
     background: rgb(11, 22, 34);
@@ -8,26 +7,26 @@ html {
 body {
     margin: 0;
     background: rgb(11, 22, 34);
-    font-family: Metropolis, monospace;
-    font-weight: 400;
+    font-family: 'JetBrains Mono', monospace;
+    font-weight: 300;
 }
 
 * {
-    font-weight: 400;
+    font-weight: 200;
 }
+
 h1,h2,h3,h4,h5,h6 {
     font-weight: 400;
 }
 
 curio-ux {
     /*  To resemble Clarity Design  */
     color: rgb(227, 234, 237);
-    font-family: Metropolis, monospace;
-    font-weight: 400;
+    font-family: 'JetBrains Mono', monospace;
+    font-weight: 200;
     background: RGB(54, 57, 63);
 }
 
-
 .app-head {
     width: 100%;
 }
@@ -67,50 +66,57 @@ a:hover {
 }
 
 @font-face {
-    font-family: metropolis;
+    font-family: 'JetBrains Mono';
     font-style: normal;
     font-weight: 400;
-    src: local('Metropolis'), url(/ux/fonts/Metropolis-Regular.woff) format('woff')
+    src: url('/ux/fonts/JetBrainsMono-Regular.woff2') format('woff2');
 }
 
 @font-face {
-    font-family: metropolis;
-    font-style: normal;
+    font-family: 'JetBrains Mono';
+    font-style: italic;
     font-weight: 400;
-    src: local('Metropolis'), url(/ux/fonts/Metropolis-ExtraLight.woff) format('woff')
+    src: url('/ux/fonts/JetBrainsMono-Italic.woff2') format('woff2');
 }
 
 @font-face {
-    font-family: metropolis;
+    font-family: 'JetBrains Mono';
     font-style: normal;
-    font-weight: 400;
-    src: local('Metropolis'), url(/ux/fonts/Metropolis-Light.woff) format('woff')
+    font-weight: 200;
+    src: url('/ux/fonts/JetBrainsMono-ExtraLight.woff2') format('woff2');
 }
 
 @font-face {
-    font-family: metropolis;
+    font-family: 'JetBrains Mono';
     font-style: normal;
-    font-weight: 400;
-    src: local('Metropolis'), url(/ux/fonts/Metropolis-Thin.woff) format('woff')
+    font-weight: 300;
+    src: url('/ux/fonts/JetBrainsMono-Light.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'JetBrains Mono';
+    font-style: normal;
+    font-weight: 100;
+    src: url('/ux/fonts/JetBrainsMono-Thin.woff2') format('woff2');
 }
 
 @font-face {
-    font-family: metropolis;
+    font-family: 'JetBrains Mono';
     font-style: normal;
     font-weight: 500;
-    src: local('Metropolis'), url(/ux/fonts/Metropolis-Medium.woff) format('woff')
+    src: url('/ux/fonts/JetBrainsMono-Medium.woff2') format('woff2');
 }
 
 @font-face {
-    font-family: metropolis;
+    font-family: 'JetBrains Mono';
     font-style: normal;
     font-weight: 700;
-    src: local('Metropolis'), url(/ux/fonts/Metropolis-Bold.woff) format('woff')
+    src: url('/ux/fonts/JetBrainsMono-Bold.woff2') format('woff2');
 }
 
 @font-face {
-    font-family: metropolis;
+    font-family: 'JetBrains Mono';
     font-style: normal;
     font-weight: 800;
-    src: local('Metropolis'), url(/ux/fonts/Metropolis-ExtraBold.woff) format('woff')
+    src: url('/ux/fonts/JetBrainsMono-ExtraBold.woff2') format('woff2');
 }