feat: add github icon

TylerHillery · TylerHillery · commit aabef8f90ac4 · 2025-02-26T20:54:06.000-07:00
diff --git a/static/css/styles.css b/static/css/styles.css
@@ -66,29 +66,41 @@ select {
 }
 
 header {
-  border-bottom: 1px solid;
-  padding: 10px;
-  margin-bottom: 20px;
-  display: flex;
-  align-items: center;
+    border-bottom: 1px solid;
+    padding: 10px;
+    margin-bottom: 20px;
+    display: flex;
+    justify-content: space-between; /* Aligns items to opposite ends */
+    align-items: center;
+}
+
+header .left-section {
+    display: flex;
+    align-items: center;
 }
 
 header img {
-  width: 40px;
-  height: auto;
+    width: 40px;
+    height: auto;
 }
 
 header h1 {
-  margin: 5px;
+    margin: 5px;
 }
 
+header .right-section {
+    /* Optionally add some margin to separate from the header edge */
+    margin-left: auto; /* Pushes the GitHub icon to the right */
+}
+
+
 footer {
   text-align: center;
 }
 
 /* Set editor dimensions */
 .editor {
-  height: 600px;
+  height: 575px;
   width: 100%;
 }
 
diff --git a/static/images/github-mark.png b/static/images/github-mark.png
diff --git a/templates/base.html b/templates/base.html
@@ -13,14 +13,21 @@
 
 <body>
     <header>
-        <img src="{{ url_for('static', path='images/logo.png') }}" alt="Logo">
-        <h1>SQL Translate</h1>
+        <div class="left-section">
+            <img src="{{ url_for('static', path='images/logo.png') }}" alt="Logo">
+            <h1>SQL Translate</h1>
+        </div>
+        <div class="right-section">
+            <a href="https://github.com/TylerHillery/sql-translate" target="_blank"><img src="{{ url_for('static', path='images/github-mark.png') }}" alt="GitHub"></a>
+        </div>
     </header>
 
     {% block content %}
     {% endblock content %}
     <footer>
-        <h6>Powered by</h6>
+        <h6>
+            Powered by
+        </h6>
         <a href="https://github.com/tobymao/sqlglot" target="_blank">
             <img src="{{ url_for('static', path='images/sqlglot.png') }}" alt="SQLGlot"
                 style="width: 150px; height: 40px;">
