feat: add app logo to app page

Closes #50
stepanzh · Feb 16, 2024 · c0f4f01 · c0f4f01
1 parent 3c4c5b5
commit c0f4f01
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/static/css/index.css b/static/css/index.css
@@ -1,16 +1,25 @@
+.severity-warning { color: var(--red-0-color); }
+
 body { background-color: white; }
 
 #app {
   max-width: 600px;
   margin: 16px auto;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
-#app-header,
-#mode-chooser {
-  margin-bottom: 16px;
+.logo-text {
+  font-size: var(--font-body-size);
 }
 
-.severity-warning { color: var(--red-0-color); }
+.logo-img {
+  width: 36px;
+  height: 36px;
+}
+
+#mode-chooser > :first-child { margin-top: 0; }
 
 #recipe-nav {
   display: grid;

diff --git a/templates/index.html b/templates/index.html
@@ -17,6 +17,14 @@
 
 {% block page %}
   <div id="app">
+    <header class='app-logo-container'>
+      <a class='home-button' href='index.html'>
+        <span class='proportio-logo'>
+          <img class='logo-img' src='icon.svg' alt='логотип пропорцио'>
+          <span class='logo-text'>Пропорцио</span>
+        </span>
+      </a>
+    </header>
     <div id="app-header">
       <nav id="recipe-nav">
         <button id="command-menu" class="default-button" aria-label="меню программы">Меню</button>