[CSS][FONTS] Added a lighter font, mobile optimizations were needed. All icons are more consistent in size. Forms are more consistent in margins, paddings and grouping.

public/assets/css/base.css

@@ -1,18 +1,25 @@
-@import url("../fonts/inter/inter.css");
+@import url("../fonts/chivo/chivo.css");
 
-html * {
+html {
     scroll-margin-top: 4rem;
 }
 
-*:focus:not(:active) {
-    border: 4px solid var(--bg3);
-    border-radius: var(--unit-size);
-    transition: border ease-in-out;
+*:hover,
+*:active {
+    -webkit-box-shadow: unset;
+    -moz-box-shadow: unset;
+    box-shadow: unset;
+}
+
+*:focus {
+    -webkit-box-shadow:inset 0 0 0 3px var(--bg3);
+    -moz-box-shadow: inset 0 0 0 3px var(--bg3);
+    box-shadow: inset 0 0 0 3px var(--bg3);
 }
 
 :root {
       /* FONTS */
-    --main-font: 'Inter var', sans-serif;
+    --main-font: 'Chivo', sans-serif;
 
     /* UNITS
      * unit size      - every element should be a multiplier of this
@@ -26,7 +33,6 @@ html * {
     --small-size: 1rem;
 
 
-
     /* transitions and animations */
     --cubic-transition: all 200ms cubic-bezier(0, 0.55, 0.45, 1);
     --fade-in: fadeIn 200ms cubic-bezier(0, 0.55, 0.45, 1);
@@ -52,6 +58,7 @@ html * {
         background-color: var(--bg1);
         background-image: url("../images/bg.png");
     }
+
     body:after {
         content:"";
         position: fixed;
@@ -138,6 +145,16 @@ summary:hover .icon-details-open {
     transition: var(--cubic-transition);
 }
 
+/* CHECKERBOARD BACKGROUND FOR TRANSPARENT IMAGES */
+.note img {
+    background:
+            repeating-conic-gradient(
+                    #ffffff66 0deg 90deg,
+                    #ffffff33 0deg 180deg)
+            0 0/40px 40px round;
+}
+
+
 /* BACKGROUND IMG GRADIENT */
 .bg {
     background-position: center;
@@ -193,8 +210,8 @@ summary:hover .icon-details-open {
 .container {
     position: relative;
     top: 3rem;
-    margin-left: 20%;
-    margin-right: 20%;
+    margin-left: 25%;
+    margin-right: 25%;
 
     padding: var(--unit-size) var(--unit-size) 0 var(--unit-size);
 }
@@ -288,6 +305,7 @@ summary:hover .icon-details-open {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    max-height: 3rem;
 
     border: solid 2px var(--bg2);
     border-bottom: unset;
@@ -308,26 +326,30 @@ summary:hover .icon-details-open {
 
 .note-author .avatar {
     width: auto;
-    height: var(--medium-size);
+    height: var(--main-size);
     border-radius: var(--unit-size);
-    margin-right: 4px;
+    margin-right: 5px;
 }
 
 /* TODO: icons */
 .note-actions {
     display: flex;
     vertical-align: middle;
+    height: 100%;
+    max-height: 100%;
 }
 
 .button-container {
     all: unset;
     border: none !important;
+
+    background-repeat: no-repeat !important;
+
     width: 1em !important;
     height: 1em !important;
-    background-size: cover !important;
+
     margin-left: 5px;
     text-indent: -9999em;
-    text-transform: uppercase;
 }
 
 .button-container:hover,
@@ -371,11 +393,6 @@ summary:hover .icon-details-open {
     padding: var(--small-size);
 }
 
-.note-content p {
-    padding-left: var(--small-size);
-    padding-right: var(--small-size);
-}
-
 .note-attachments {
     display: flex;
     max-width: 100%;
@@ -441,15 +458,55 @@ summary:hover .icon-details-open {
 }
 
 .section-form {
+    display: flex;
+    flex-direction: column;
     padding: var(--unit-size);
 }
-.form-group {
-    margin-bottom: var(--unit-size);
+
+.section-form fieldset .form-group:last-of-type {
+    margin-bottom: unset;
 }
 
+.section-form-legend {
+    margin-top: unset;
+    margin-bottom: 10px;
+
+    font-weight: bold;
+    font-size: var(--main-size);
+}
+
+.section-form-label {
+    margin-bottom: 5px;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 10px;
+}
+.form-group label {
+    margin-bottom: 5px;
+}
+.help-block {
+    margin-top: 5px;
+    margin-bottom: 10px;
+}
 .help-text {
     font-style: italic;
     font-size: var(--small-size);
+    margin-top: 5px;
+    margin-bottom: 10px;
+}
+.help-block > .list-unstyled,
+.alert,
+.alert-danger {
+    border: solid 2px #FF6347;
+    background-color: #FF634733;
+    border-radius: var(--unit-size);
+
+    padding: 2px 6px;
+    margin-top: 5px;
+    margin-bottom: 10px;
 }
 
 .section-form-options {
@@ -467,9 +524,6 @@ summary:hover .icon-details-open {
     height: calc(6 * var(--main-size));
 
     border: 2px solid transparent;
-    margin-top: var(--unit-size);
-    margin-bottom: var(--unit-size);
-    padding: var(--unit-size);
     resize: vertical;
 }
 
@@ -483,10 +537,9 @@ button,
 textarea,
 input {
     font-size: inherit !important;
-    display: block;
     position: relative;
     color: var(--white);
-    padding: 2px 6px;
+    padding: 4px 8px;
     border: 2px solid var(--bg2) !important;
     border-radius: var(--unit-size) !important;
     background-color: var(--translucent);
@@ -517,7 +570,8 @@ input[type=radio] {
 input[type=checkbox] {
     background-color: var(--bg2) !important;
     background-size: cover;
-    margin-left: 5px;
+    margin-right: 2px;
+    vertical-align: top;
 
     -webkit-mask-image: url("../icons/check-off.svg") !important;
     -o-mask-image: url("../icons/check-off.svg") !important;
@@ -539,15 +593,16 @@ textarea:focus,
 button:hover,
 button:focus,
 input:hover,
-input:focus {
-    border: solid 2px var(--bg3) !important;
-    color: var(--white) !important;
-}
+input:focus,
 select:hover,
 select:focus {
-    border-color: var(--bg3) !important;
+    color: var(--white) !important;
+    -webkit-box-shadow: inset 0px 0px 0px 2px var(--bg3) !important;
+    -moz-box-shadow: inset 0px 0px 0px 2px var(--bg3) !important;
+    box-shadow: inset 0px 0px 0px 2px var(--bg3) !important;
 }
 
+
 input[type=checkbox]:hover,
 input[type=checkbox]:focus {
     background-color: var(--bg3) !important;

public/assets/css/reset.css

@@ -9,19 +9,11 @@ ul, ol {
     list-style: none
 }
 
-/* avoid browser default inconsistent heading font-sizes */
-/* and pre/code too */
-h1, h2, h3, h4, h5, h6, pre, code {
-    font-size: 1rem;
-}
-
 /* remove the inconsistent (among browsers) default ul,ol padding or margin  */
 /* the default spacing on headings does not match nor align with
    normal interline spacing at all, so let's get rid of it. */
 /* zero out the spacing around pre, form, body, html, p, blockquote as well */
-/* form elements are oddly inconsistent, and not quite CSS emulatable. */
-/*  nonetheless strip their margin and padding as well */
-ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input, textarea {
+pre, form, body, html, blockquote, fieldset, input, textarea {
     margin: 0;
     padding: 0;
     border: none;
@@ -47,6 +39,10 @@ address {
 }
 
 /* details element arrow */
+details summary > * {
+    margin: unset;
+    padding: unset;
+}
 details > summary {
     list-style: none;
 }
@@ -101,7 +97,18 @@ p {
     font-family: var(--main-font);
     font-size: var(--small-size);
     font-weight: 400;
-    margin-bottom: var(--small-size);
+    margin: unset;
+}
+p:first-line {
+    padding-left: var(--small-size);
+}
+p:first-line {
+    margin-top: 0;
+    margin-bottom: 10px;
+}
+p:not(:first-line) {
+    margin-top: 10px;
+    margin-bottom: 10px;
 }
 
 textarea {

public/assets/css/settings/settings.css

@@ -8,6 +8,7 @@
 }
 
 .main-nav h1 {
+    margin-top: var(--unit-size);
     margin-bottom: var(--unit-size);
 }
 

public/assets/fonts/chivo/OFL.txt

@@ -1,11 +1,10 @@
-Copyright (c) 2016-2020 The Inter Project Authors.
-"Inter" is trademark of Rasmus Andersson.
-https://github.com/rsms/inter
+Copyright 2016 The Chivo Project Authors (omnibus.type@gmail.com)
 
 This Font Software is licensed under the SIL Open Font License, Version 1.1.
 This license is copied below, and is also available with a FAQ at:
 http://scripts.sil.org/OFL
 
+
 -----------------------------------------------------------
 SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
 -----------------------------------------------------------
@@ -45,7 +44,7 @@ new environment.
 "Author" refers to any designer, engineer, programmer, technical
 writer or other person who contributed to the Font Software.
 
-PERMISSION AND CONDITIONS
+PERMISSION & CONDITIONS
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of the Font Software, to use, study, copy, merge, embed, modify,
 redistribute, and sell modified and unmodified copies of the Font

public/assets/fonts/chivo/chivo.css

@@ -0,0 +1,35 @@
+@font-face {
+    font-family: 'Chivo';
+    src: local('Chivo Bold Italic'), local('Chivo-BoldItalic'),
+        url("Chivo-BoldItalic.woff") format('woff');
+    font-weight: bold;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Chivo';
+    src: local('Chivo Bold'), local('Chivo-Bold'),
+    url("Chivo-Bold.woff") format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Chivo';
+    src: local('Chivo Italic'), local('Chivo-Italic'),
+    url("Chivo-Italic.woff") format('woff');
+    font-weight: normal;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Chivo';
+    src: local('Chivo Regular'), local('Chivo-Regular'),
+    url("Chivo-Regular.woff") format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}

public/assets/fonts/inter/inter.css

@@ -1,17 +0,0 @@
-@font-face {
-    font-family: 'Inter var';
-    font-weight: 100 900;
-    font-display: swap;
-    font-style: normal;
-    font-named-instance: 'Regular';
-    src: url("Inter-roman.var.woff2?v=3.19") format("woff2");
-}
-
-@font-face {
-    font-family: 'Inter var';
-    font-weight: 100 900;
-    font-display: swap;
-    font-style: italic;
-    font-named-instance: 'Italic';
-    src: url("Inter-italic.var.woff2?v=3.19") format("woff2");
-}

public/assets/icons/heart.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 32 32">
+<svg xmlns="http://www.w3.org/2000/svg" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 32 32" width="100%" height="100%">
     <path d="M16.02 7.719v-.01l.001-.03.003-.05.005-.069.009-.088.013-.107a4.722 4.722 0 01.042-.268l.031-.159a7.458 7.458 0 01.207-.786 7.65 7.65 0 01.162-.469 7.931 7.931 0 01.206-.506 10.03 10.03 0 01.56-1.082c.055-.093.113-.184.172-.277a11.076 11.076 0 01.384-.551 10.974 10.974 0 01.437-.538 9.665 9.665 0 01.489-.514 8.79 8.79 0 01.54-.479A7.882 7.882 0 0120.83.755a6.871 6.871 0 01.688-.283 7.036 7.036 0 011.088-.287 6.743 6.743 0 011.135-.107 7.148 7.148 0 012.688.49 7.506 7.506 0 01.741.329 8.35 8.35 0 011.058.64 7.866 7.866 0 01.657.519c.106.092.21.187.311.285s.201.198.299.301a9.553 9.553 0 01.555.646 9.644 9.644 0 01.716 1.069 8.62 8.62 0 01.392.768 9.294 9.294 0 01.446 1.218 8.625 8.625 0 01.198.846 8.937 8.937 0 01.13 2.184 9.444 9.444 0 01-.174 1.33 11.73 11.73 0 01-.218.885 11.786 11.786 0 01-.885 2.179 13.702 13.702 0 01-.478.852 17.219 17.219 0 01-.833 1.252 19.77 19.77 0 01-.622.816 24.181 24.181 0 01-.668.802 41.264 41.264 0 01-.706.788 44.134 44.134 0 01-1.111 1.156l-.38.379-.383.376-.385.373-.386.37-.386.367-.386.365-.384.362-.381.359-.377.357-.372.354-.366.351-.36.349-.352.346-.344.343a52.916 52.916 0 00-1.282 1.338 27.889 27.889 0 00-1.103 1.272 27.34 27.34 0 00-.477.605l-.219.293a23.976 23.976 0 00-.397.567c-.062.092-.121.183-.179.272s-.113.177-.166.264l-.153.255c-.049.083-.095.166-.14.246a8.059 8.059 0 00-.242.464 8.263 8.263 0 00-.195.423 6.85 6.85 0 00-.151.377l-.061.17c-.019.055-.036.107-.051.158l-.043.145-.035.131-.028.117a2.744 2.744 0 00-.021.104l-.016.089c-.005.027-.008.052-.011.075l-.007.06-.004.045-.002.03v.015c0 .002 0 .003 0 0v-.015l-.002-.03-.004-.045-.007-.06-.011-.075c-.004-.028-.01-.057-.016-.089a3.86 3.86 0 00-.127-.497l-.051-.158c-.018-.055-.039-.111-.061-.17a9.318 9.318 0 00-.151-.377 8.392 8.392 0 00-.195-.423c-.036-.074-.075-.15-.115-.227s-.083-.156-.127-.237-.091-.163-.14-.246a12.277 12.277 0 00-.319-.519 13.981 13.981 0 00-.371-.552l-.205-.287a17.549 17.549 0 00-.696-.898l-.257-.311a33.058 33.058 0 00-.846-.961 29.77 29.77 0 00-.621-.662 50.15 50.15 0 00-.661-.676l-.344-.343-.352-.346-.36-.349-.366-.351-.372-.354-.377-.357-.381-.359-.383-.362-.386-.365-.386-.367-.386-.37-.385-.373-.383-.376a67.892 67.892 0 01-.756-.761l-.371-.385a32.92 32.92 0 01-.721-.781 25.993 25.993 0 01-1.017-1.198 19.411 19.411 0 01-.622-.816 16.332 16.332 0 01-.57-.831 17.219 17.219 0 01-.51-.845 12.657 12.657 0 01-.445-.859 12.857 12.857 0 01-.532-1.308 10.175 10.175 0 01-.258-.882 11.73 11.73 0 01-.178-.886 9.63 9.63 0 01-.106-1.769 9.185 9.185 0 01.141-1.302A8.948 8.948 0 011.72 3.632a9.553 9.553 0 01.525-.674 9.444 9.444 0 01.584-.617 9.197 9.197 0 01.634-.553 9.092 9.092 0 01.678-.483 8.497 8.497 0 01.714-.408 7.275 7.275 0 01.741-.329A7.38 7.38 0 017.899.084c.129-.006.257-.008.385-.006s.255.007.382.015a6.841 6.841 0 011.485.264 7.036 7.036 0 011.044.398 7.88 7.88 0 01.652.35 7.066 7.066 0 01.609.408 7.882 7.882 0 01.828.702 8.55 8.55 0 01.926 1.052 10.037 10.037 0 01.556.828 9.758 9.758 0 011.096 2.668 12.389 12.389 0 01.07.334 6.117 6.117 0 01.042.268c.005.039.01.074.013.107l.009.088.005.069.003.05.001.03v.01z"/>
 </svg>

public/assets/icons/repeat.svg

@@ -1,4 +1,4 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="100%" height="100%">
 <title>Recycle this note.</title>
 <path d="M16.93 22.627c0.914-0.547 1.931-0.247 2.325 0.762l0.544 1.697 6.041 0.087c1.566 0.034 2.565-1.676 1.765-3.022l-1.661-2.793c-0.212-0.356-0.868-1.092-0.094-1.553l2.149-1.278c0.74-0.44 1.172 0.43 1.383 0.786l1.658 2.787c2.407 4.047-0.585 9.169-5.289 9.066l-6.075 0.337-0.691 1.568c-0.455 0.764-1.106 1.047-2.245 0.51l-4.627-3.773c-0.382-0.399-0.382-1.349 0.017-1.73z"></path>
 <path d="M19.998 14.054c-0.935-0.511-1.191-1.54-0.52-2.391l1.187-1.328-2.984-5.253c-0.763-1.368-2.744-1.363-3.499 0.009l-1.567 2.846c-0.2 0.363-0.502 1.302-1.291 0.867l-2.19-1.206c-0.755-0.415-0.223-1.228-0.023-1.591l1.564-2.841c2.271-4.125 8.203-4.139 10.496-0.030l3.367 5.068 1.702-0.198c0.889 0.005 1.463 0.423 1.577 1.678l-0.91 5.9c-0.151 0.531-0.969 1.012-1.501 0.862z"></path>

public/assets/icons/reply.svg

@@ -1,4 +1,4 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="100%" height="100%">
 <title>Reply!</title>
 <path d="M0.958 15.559l5.203-10.197c0.499-1.17 1.745-3.012 3.015-0.799l0.933 1.625c10.329-3.208 17.723 1.178 19.613 6.884 1.208 3.645 0.922 8.871-1.711 13.899-0.663 0.954-1.522 0.315-1.375-0.532 3.126-11.733-6.743-17.108-11.882-10.468l0.81 1.99c0.518 1.271-0.64 1.541-2.779 1.161l-10.828-1.524c-0.884-0.232-1.358-1.197-0.999-2.039z"></path>
 </svg>