Add a half-spacing CSS variable

src/client/components/AdvancedSearch.vue

@@ -345,7 +345,7 @@ function removeFilter(filterChip: FilterChip): void {
   border-radius: var(--big-radius);
   border: 1px solid var(--white);
   cursor: pointer;
-  padding: calc(var(--spacing) / 3) calc(var(--spacing) / 2);
+  padding: calc(var(--spacing) / 3) var(--half-spacing);
   transition: all 0.2s;
 
   &:hover {

src/client/components/AntibodiesTable.vue

@@ -337,7 +337,7 @@ function download(): void {
   display: flex;
   padding: var(--button-padding);
   align-items: center;
-  gap: calc(var(--spacing) / 2);
+  gap: var(--half-spacing);
 }
 
 .download-format * {

src/client/components/AppHeader.vue

@@ -137,6 +137,6 @@ function showDownloads(): void {
 
 .archive-link::before {
   content: url("/absd-y.svg");
-  margin-right: calc(var(--spacing) / 2);
+  margin-right: var(--half-spacing);
 }
 </style>

src/client/components/SearchBar.vue

@@ -105,7 +105,7 @@ function fetchAntibodies (): void {
   border-bottom: 1px var(--white) solid;
   display: flex;
   gap: var(--spacing);
-  padding-bottom: calc(var(--spacing) / 2);
+  padding-bottom: var(--half-spacing);
   transition: border-bottom-color .5s;
 }
 
@@ -124,7 +124,7 @@ function fetchAntibodies (): void {
   color: var(--white);
   flex-grow: 1;
   font-size: var(--spacing);
-  padding: 0 calc(var(--spacing) / 2);
+  padding: 0 var(--half-spacing);
   min-width: 0;
   transition: background-color 0.1s;
 

src/client/globals.css

@@ -18,6 +18,7 @@
   --white: hsl(0, 0%, 100%);
 
   --spacing: 20px;
+  --half-spacing: 10px;
   --spacing-table: 16px;
   --radius: 5px;
   --big-radius: 24px;
@@ -100,7 +101,7 @@ i {
   border: 1px solid transparent;
   color: var(--black);
   font-weight: bold;
-  padding: calc(var(--spacing) / 2) var(--spacing);
+  padding: var(--half-spacing) var(--spacing);
 
   &:hover {
     background-color: transparent;