Merge pull request #73 from anyone-oslo/inter

Switch fonts to Inter, CSS realign

app/assets/stylesheets/pages_core/admin.postcss.css

@@ -5,5 +5,6 @@
 @import "@fortawesome/fontawesome-free/css/regular";
 
 @import "admin/vars";
+@import-glob "admin/global/*.css";
 @import-glob "admin/components/*.css";
 @import-glob "admin/controllers/*.css";

app/assets/stylesheets/pages_core/admin/components/archive.css

@@ -1,5 +1,5 @@
 .archive-index {
-  & .count {
+  .count {
     font-weight: normal;
     color: var(--text-light-color);
   }

app/assets/stylesheets/pages_core/admin/components/attachments.css

@@ -1,18 +1,17 @@
 .attachments {
   margin-bottom: 40px;
 
-  & .drop-target {
+  .drop-target {
     position: relative;
     width: 100%;
     text-align: center;
-    line-height: 1.6;
     margin-top: 20px;
 
     &:first-child {
       margin-top: 0px;
     }
 
-    & .upload-button {
+    .upload-button {
       width: 100%;
       display: flex;
       flex-direction: column;
@@ -23,7 +22,7 @@
     }
   }
 
-  & .attachment {
+  .attachment {
     border-bottom: 1px solid var(--border-color);
     padding: 16px 0px 16px 40px;
     cursor: pointer;
@@ -32,12 +31,12 @@
       padding-left 50ms ease-in-out,
       background 150ms ease-in-out;
 
-    & .attachment-info {
+    .attachment-info {
       transition: all 50ms ease-in-out;
     }
 
     &.drop-placeholder {
-      font-size: 14px;
+      font-size: 0.875rem;
       margin-top: -1px;
       border-top: 1px solid var(--border-color);
       background: var(--background-disabled-color);
@@ -51,11 +50,11 @@
       padding-left: 56px;
       background: var(--background-disabled-color);
 
-      & .attachment-info {
+      .attachment-info {
         opacity: 0.5;
       }
 
-      & .actions {
+      .actions {
         display: none;
       }
     }
@@ -64,41 +63,28 @@
       margin-bottom: 0px;
     }
 
-    & .actions {
+    .actions {
       float: right;
+      display: flex;
+      gap: 0.25rem;
     }
 
-    & h3 {
+    h3 {
       margin: 0px 0px 12px 0px;
 
-      & .icon {
+      .icon {
         display: block;
         float: left;
         margin-left: -40px;
         font-size: 24px;
       }
     }
 
-    & p {
+    p {
       &:last-child {
         margin-bottom: 0px;
       }
     }
-
-    & button {
-      cursor: pointer;
-      border: 1px solid var(--border-color);
-      border-radius: 3px;
-      background: var(--button-color);
-      padding: 5px 20px;
-      font-size: 12px;
-      color: var(--text-color);
-
-      &:hover,
-      &:focus {
-        background: #fff;
-      }
-    }
   }
 }
 
@@ -111,23 +97,23 @@
     height: 100%;
   }
 
-  & form {
+  form {
     width: 100%;
 
-    & .buttons {
+    .buttons {
       margin-top: 24px;
     }
 
-    & .embed-code {
-      & input[type="text"] {
+    .embed-code {
+      input[type="text"] {
         width: 50%;
         max-width: 100px;
         margin-right: 8px;
       }
     }
 
-    & textarea,
-    & input[type="text"] {
+    textarea,
+    input[type="text"] {
       max-width: 100%;
 
       &.description {

app/assets/stylesheets/pages_core/admin/components/base.css

@@ -3,29 +3,11 @@ body {
   color: var(--text-color);
 }
 
-body,
-td,
-th {
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 12px;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p {
-  margin: 16px 0;
-}
-
 img {
   border: 0;
 }
 
 small {
-  font-size: 0.9em;
   color: var(--text-light-color);
 }
 
@@ -42,7 +24,7 @@ th {
 }
 
 div.content {
-  margin: 0 32px;
+  margin: 1.5rem 2rem;
 }
 
 table.show th,
@@ -51,62 +33,13 @@ td {
   padding: 2px 16px 2px 0;
 }
 
-.errorExplanation {
-  background-color: #ffd;
-  border-bottom: 1px solid #dda;
-  margin: -32px -32px 16px -32px;
-  padding: 0px 32px;
-  color: #333;
-
-  & h2 {
-    font-weight: normal;
-    font-size: 1.4em;
-    margin: 0 -32px 16px -32px;
-    padding: 8px 32px;
-    background-color: var(--red);
-    color: #fff;
-  }
-
-  & p {
-    margin-bottom: 0;
-    padding: 0;
-  }
-
-  & ul {
-    padding: 0;
-    list-style-position: inside;
-  }
-
-  & ul li {
-    font-weight: bold;
-  }
-}
-
-.flash {
-  background: #fffbdf;
-  border-bottom: 1px solid #ccc9b2;
-  margin: -32px -32px 32px -32px;
-  padding: 16px 32px;
-  font-weight: bold;
-  color: #6f2d1b;
-  font-size: 1.2em;
-}
-
-div.paginator {
-  margin: 32px 0;
-  font-size: 1.5em;
-  font-weight: bold;
-  color: var(--text-light-color);
-}
-
 img.thumbnail {
   border: 1px solid #555;
 }
 
 li .actions {
   font-weight: normal;
   display: inline;
-  font-size: 12px;
   color: var(--text-light-color);
   margin-top: 1px;
 }