style(ui): improve UI (laike9m#52)

100gle · web-flow · commit bd474e6f77f5 · 2023-11-25T22:01:19.000-08:00
* Replace GitHub ribbon with icon and update sidebar actions

* Fix wrong margin top for challenge header title

* Add sematic icon to Pyright Playground link

* Update sidebar space and challenge header font size
diff --git a/templates/base.html b/templates/base.html
@@ -34,7 +34,6 @@
   </head>
 
   <body>
-    {% include 'components/github_ribbon.html' %}
     {% block content %}{% endblock %}
   </body>
 
diff --git a/templates/challenge.html b/templates/challenge.html
@@ -36,7 +36,7 @@
     .sidebar-container .sidebar-actions {
       display: flex;
       align-items: center;
-      justify-content: center;
+      justify-content: space-around;
       margin-top: 8px;
       padding-top: 8px;
       border-top: 1px solid hsl(205, 20%, 94%);
@@ -55,13 +55,13 @@
       display: flex;
       align-items: center;
       margin-bottom: 1rem;
+      margin-top: 8px;
     }
 
     .challenge-header__title>span:nth-child(1) {
       font-size: 35px;
       font-weight: 700;
       margin-right: 20px;
-      margin-top: 8px;
     }
 
     .challenge-header__exerpt {
@@ -88,6 +88,9 @@
     }
 
     #playground-link {
+      display: flex;
+      place-items: center;
+      gap: 2px;
       position: absolute;
       top: 3px;
       right: 3px;
@@ -144,11 +147,11 @@
 
       .sidebar-container {
         margin-right: 0;
-        margin-bottom: 2rem;
         flex-direction: row;
         width: 100%;
         border-right: 0px;
         gap: 4px;
+        padding: 0;
       }
 
       .sidebar-container .sidebar-challenge-main {
@@ -162,6 +165,7 @@
         padding-top: 0px;
         border-top: 0px;
         width: initial;
+        gap: 8px;
       }
 
       .challenge-header__title {
@@ -171,7 +175,7 @@
 
       .challenge-header__title>span:nth-child(1) {
         width: 100%;
-        font-size: 20px;
+        font-size: 32px;
         margin-bottom: 8px;
       }
 
@@ -208,6 +212,7 @@
         {% include 'components/challenge_sidebar.html' with context %}
       </div>
       <div class="sidebar-actions">
+        {% include 'components/github_icon.html' %}
         {% include 'components/darkmode.html' %}
       </div>
     </div>
@@ -233,7 +238,8 @@
         <div class="codemirror-container">
           <div id="editor">
             <a id="playground-link" target="_blank" rel="noopener noreferrer">
-              Open Pyright Playground
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4m-8-2l8-8m0 0v5m0-5h-5"/></svg>
+              <span>Open Pyright Playground</span>
             </a>
           </div>
           <div class="editor-actions">
diff --git a/templates/components/github_icon.html b/templates/components/github_icon.html
@@ -0,0 +1,17 @@
+<style type="text/css">
+  .icon {
+    display: inline-flex;
+    place-items: center;
+    /* override picocss default text color style for `<a>` tag */
+    color: unset;
+    width: 20px;
+    height: 20px;
+  }
+</style>
+
+<a href="https://github.com/laike9m/Python-Type-Challenges" class="icon" target="_blank" rel="noopener noreferrer">
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
+    <path fill="currentColor"
+          d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59c.4.07.55-.17.55-.38c0-.19-.01-.82-.01-1.49c-2.01.37-2.53-.49-2.69-.94c-.09-.23-.48-.94-.82-1.13c-.28-.15-.68-.52-.01-.53c.63-.01 1.08.58 1.23.82c.72 1.21 1.87.87 2.33.66c.07-.52.28-.87.51-1.07c-1.78-.2-3.64-.89-3.64-3.95c0-.87.31-1.59.82-2.15c-.08-.2-.36-1.02.08-2.12c0 0 .67-.21 2.2.82c.64-.18 1.32-.27 2-.27c.68 0 1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82c.44 1.1.16 1.92.08 2.12c.51.56.82 1.27.82 2.15c0 3.07-1.87 3.75-3.65 3.95c.29.25.54.73.54 1.48c0 1.07-.01 1.93-.01 2.2c0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8" />
+  </svg>
+</a>
diff --git a/templates/components/github_ribbon.html b/templates/components/github_ribbon.html
