Improves styling

.env

@@ -53,7 +53,7 @@ ORGANIZATION_EMAIL='[email protected]'
 NOREPLY_ADDRESS='[email protected]'
 HOMEPAGE='roodjongeren.nl'
 ORGANIZATION_NAME_SHORT='ROOD'
-ORG_LOGO='assets/image/rood-jongeren.svg'
+ORG_LOGO='assets/image/logo.png'
 PRIVACY_POLICY_URL='https://roodjongeren.nl/privacybeleid/'
 LISTMONK_URL='https://listmonk.roodjongeren.nl/admin'
 

assets/style/common.less

@@ -1,6 +1,4 @@
-@desktop:   ~"only screen and (min-width: 901px)";
-@tablet:    ~"only screen and (min-width: 601px) and (max-width: 900px)";
-@mobile:    ~"only screen and (max-width: 600px)";
+@mobile:    ~"only screen and (max-width: 900px)";
 
 *, *::before, *::after {
     box-sizing: border-box;
@@ -58,56 +56,3 @@ h1, h2, h3 {
         }
     }
 }
-
-// .incomes {
-//     input[type="radio"] {
-//         -webkit-appearance: none;
-//         background-color: #fff;
-//         appearance: none;
-//         background-color: #fff;
-//         margin: 0;
-//         font: inherit;
-//         width: 1.5em;
-//         height: 1.5em;
-//         border: 0.2em solid @rood;
-//         border-radius: 50%;
-//         display: grid;
-//         place-content: center;
-//     }
-//     input[type="radio"]::before {
-//         content: "";
-//         width: 0.65em;
-//         height: 0.65em;
-//         border-radius: 50%;
-//         transform: scale(0);
-//         transition: 120ms transform ease-in-out;
-//         box-shadow: inset 1em 1em @rood;
-//     }
-//     input[type="radio"]:checked::before {
-//         transform: scale(1);
-//     }
-//     .option {
-//         margin-left: 20px;
-//         line-height: 1.5;
-//         display: grid;
-//         grid-template-columns: 1em auto;
-//         gap: 1em;
-//     }
-//     .option + .option {
-//         margin-top: .75em;
-//     }
-//     .options {
-//         margin-top: .75em;
-//         margin-bottom: 0.75em;
-//     }
-//     .other-amount {
-//         margin-left: 40px;
-//         input {
-//             margin-left: 8px;
-//         }
-//     }
-//     .submit-button {
-//         margin-top: 20px;
-//         margin-bottom: 20px;
-//     }
-// }

assets/style/documents.less

@@ -1,17 +1,16 @@
 @import './common.less';
 
 .document-interface-head {
-    @media @desktop {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-    }
+    display: flex;
+    gap: 1rem;
+    justify-content: space-between;
+    white-space: nowrap;
 
-    margin-bottom: 20px;
+    @media @mobile {
+        flex-direction: column;
+    }
 
     .breadcrumbs {
-        margin: 10px 0;
-
         a {
             color: @rood;
             text-decoration: none;
@@ -25,22 +24,19 @@
     }
 
     .document-folder-actions {
+        display: flex;
+        gap: 1rem;
+        white-space: nowrap;
         a {
-            display: inline-block;
             border: 2px solid @rood;
             color: @rood;
             border-radius: 3px;
             padding: 10px 20px;
             text-decoration: none;
 
-            & + a {
-                margin-left: 10px;
-            }
-
             &.active {
                 background: @rood;
                 color: #fff;
-                // box-shadow: inset 0 0 0 2px #fff;
             }
         }
     }
@@ -99,8 +95,11 @@
         text-decoration: none;
     }
 
-    @media @desktop { .date-short { display: none; } }
-    @media @mobile { .date-long { display: none; } }
+    .date-short { display: none; }
+    @media @mobile {
+        .date-short { display: block; }
+        .date-long { display: none; }
+    }
 
     .document-actions {
         width: auto;
@@ -121,7 +120,7 @@
 
                 &::before {
                     content: '\f142';
-                    font-family: 'ForkAwesome';
+                    font-family: 'ForkAwesome', sans-serif;
                 }
 
                 & > input:not(:checked) + .document-action-buttons {
@@ -153,13 +152,11 @@
             color: #888;
             text-decoration: none;
 
-            @media @desktop {
-                padding: 6px 10px;
-                border-radius: 3px;
-                border: 1px solid;
+            padding: 6px 10px;
+            border-radius: 3px;
+            border: 1px solid;
 
-                span { display: none; }
-            }
+            span { display: none; }
 
             &:hover {
                 color: @rood;

assets/style/forms.less

@@ -25,7 +25,7 @@
 .text-input {
     display: block;
     border: 1px solid #AEAEAE;
-    padding: 10px 20px;
+    padding: 0.5rem;
     flex: 1 1 auto;
     font-size: 16px;