layout fixes

migrations/2022-06-15-195343_link_border/down.sql

@@ -0,0 +1,2 @@
+ALTER TABLE link_types
+  DROP COLUMN border_color;

migrations/2022-06-15-195343_link_border/up.sql

@@ -0,0 +1,2 @@
+ALTER TABLE link_types
+  ADD COLUMN border_color VARCHAR NOT NULL DEFAULT 'transparent';

src/db/model.rs

@@ -45,6 +45,7 @@ pub struct LinkType {
     pub bg_color: String,
     pub fg_color: String,
     pub short_name: Option<String>,
+    pub border_color: String,
 }
 
 #[derive(Queryable, Insertable, AsChangeset, Serialize)]

src/db/schema.rs

@@ -27,6 +27,7 @@ table! {
         bg_color -> Varchar,
         fg_color -> Varchar,
         short_name -> Nullable<Varchar>,
+        border_color -> Varchar,
     }
 }
 

templates/base-head.html.hbs

@@ -17,6 +17,7 @@
 
   a {
     color: {{config.themeColor}};
+    font-weight: 500;
   }
 
   html {
@@ -24,6 +25,10 @@
     background-color: #F8F0F8;
   }
 
+  span {
+    white-space: nowrap;
+  }
+
   #nav {
     position: relative;
   }

templates/index.html.hbs

@@ -77,12 +77,20 @@
         row-gap: 16px;
       }
 
-      #highlights img {
+      #highlights .image {
         width: 100%;
       }
 
-      #highlights article *:last {
-        margin-top: 8px;
+      #highlights > ul > li {
+        display: flex; /* webkit bug */
+      }
+
+      #highlights article {
+        height: 100%;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
       }
 
       #contact li {
@@ -109,7 +117,7 @@
         }
 
         #contact-{{id}} > img {
-          margin-right: 8px;
+          margin-right: 16px;
         }
       {{/each}}
 
@@ -147,10 +155,9 @@
             align-items: center;
             border-radius: 6px;
             padding: 8px;
-            font-weight: 500;
-            font-size: 18px;
             background-color: {{type.bg_color}};
             color: {{type.fg_color}};
+            border: 1px solid {{type.border_color}};
           }
 
           #project-link-{{extra.id}} > img {
@@ -221,14 +228,14 @@
                   <p>{{project.description}}</p>
                 </div>
                 {{#if project.image}}
-                  <img src="{{project.image}}" alt="Demo screenshot">
+                  <img class="image" src="{{project.image}}" alt="Demo screenshot">
                 {{/if}}
                 <ul class="indent bg project-links">
                   {{#each links}}
                     <li>
                       <a class="shadow" id="project-link-{{extra.id}}" href="{{extra.url}}">
                         <img src="{{type.icon}}" height="24">
-                        <span>{{extra.short_name}}</span>
+                        <span>{{type.short_name}}</span>
                       </a>
                     </li>
                   {{/each}}

templates/projects.html.hbs

@@ -24,6 +24,7 @@
       .project-title {
         display: flex;
         align-items: center;
+        margin-bottom: 8px;
       }
 
       .project-links {
@@ -55,6 +56,7 @@
 
         {{#each tags}}
           #project-tag-{{extra.id}} {
+            display: inline;
             line-height: 1;
             margin-left: 8px;
             border-radius: 4px;
@@ -73,6 +75,7 @@
             padding: 8px;
             background-color: {{type.bg_color}};
             color: {{type.fg_color}};
+            border: 1px solid {{type.border_color}};
           }
 
           #project-link-{{extra.id}} > img {
@@ -98,9 +101,7 @@
                   <h2>{{project.name}}</h1>
                   <ul>
                     {{#each tags}}
-                      <li id="project-tag-{{extra.id}}">
-                        {{type.name}}
-                      </li>
+                      <li id="project-tag-{{extra.id}}">{{type.name}}</li>
                     {{/each}}
                   </ul>
                 </div>