remove style css file and add water.css file to global tailwind overrides

TODO - make this a submodule

styles/global.css

@@ -1,3 +1,665 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+:root {
+  --background-body: #fff;
+  --background: #efefef;
+  --background-alt: #f7f7f7;
+  --selection: #9e9e9e;
+  --text-main: #363636;
+  --text-bright: #000;
+  --text-muted: #70777f;
+  --links: #0076d1;
+  --focus: #0096bfab;
+  --border: #dbdbdb;
+  --code: #000;
+  --animation-duration: 0.1s;
+  --button-base: #d0cfcf;
+  --button-hover: #9b9b9b;
+  --scrollbar-thumb: color-mod(var(--button-hover) lightness(+6%));
+  --scrollbar-thumb-hover: var(--button-hover);
+  --form-placeholder: #949494;
+  --form-text: #1d1d1d;
+  --variable: #39a33c;
+  --highlight: #ff0;
+  --select-arrow: svg-load('./assets/select-arrow.svg', fill: #161f27);
+}
+
+@layer components {
+
+  .nav-bar {
+    @apply bg-blue-100 p-5;
+  }
+
+  .notes-container {
+    @apply flex;
+  }
+
+  .markdown-rendered {
+    @apply container mx-auto p-10;
+  }
+}
+
+@layer base {
+
+  /* base --------------------------------*/
+  html {
+    scrollbar-color: var(--scrollbar-thumb) var(--background-body);
+    scrollbar-width: thin;
+  }
+
+  body {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
+    line-height: 1.4;
+    word-wrap: break-word;
+    color: var(--text-main);
+    background: var(--background-body);
+    text-rendering: optimizeLegibility;
+  }
+
+  button,
+  input,
+  textarea {
+    transition:
+      background-color var(--animation-duration) linear,
+      border-color var(--animation-duration) linear,
+      color var(--animation-duration) linear,
+      box-shadow var(--animation-duration) linear,
+      transform var(--animation-duration) ease;
+  }
+
+  /* code --------------------------------*/
+  code,
+  samp,
+  time {
+    background: var(--background);
+    color: var(--code);
+    padding: 2.5px 5px;
+    border-radius: 6px;
+    font-size: 1em;
+  }
+
+  pre>code {
+    padding: 10px;
+    display: block;
+    overflow-x: auto;
+  }
+
+  var {
+    color: var(--variable);
+    font-style: normal;
+    font-family: monospace;
+  }
+
+  kbd {
+    background: var(--background);
+    border: 1px solid var(--border);
+    border-radius: 2px;
+    color: var(--text-main);
+    padding: 2px 4px 2px 4px;
+  }
+
+
+  /* forms --------------------------------*/
+  button,
+  select,
+  input[type='submit'],
+  input[type='reset'],
+  input[type='button'],
+  input[type='checkbox'],
+  input[type='range'],
+  input[type='radio'] {
+    cursor: pointer;
+  }
+
+  input,
+  select {
+    display: block;
+  }
+
+  [type='checkbox'],
+  [type='radio'] {
+    display: initial;
+  }
+
+  input,
+  button,
+  textarea,
+  select {
+    color: var(--form-text);
+    background-color: var(--background);
+    font-family: inherit;
+    font-size: inherit;
+    margin-right: 6px;
+    margin-bottom: 6px;
+    padding: 10px;
+    border: none;
+    border-radius: 6px;
+    outline: none;
+  }
+
+  button,
+  input[type='submit'],
+  input[type='reset'],
+  input[type='button'] {
+    background-color: var(--button-base);
+    padding-right: 30px;
+    padding-left: 30px;
+  }
+
+  button:hover,
+  input[type='submit']:hover,
+  input[type='reset']:hover,
+  input[type='button']:hover {
+    background: var(--button-hover);
+  }
+
+  input[type='color'] {
+    min-height: 2rem;
+    padding: 8px;
+    cursor: pointer;
+  }
+
+  input[type='checkbox'],
+  input[type='radio'] {
+    height: 1em;
+    width: 1em;
+  }
+
+  input[type='radio'] {
+    border-radius: 100%;
+  }
+
+  input {
+    vertical-align: top;
+  }
+
+  label {
+    vertical-align: middle;
+    margin-bottom: 4px;
+    display: inline-block;
+  }
+
+  input:not([type='checkbox']):not([type='radio']),
+  input[type='range'],
+  select,
+  button,
+  textarea {
+    -webkit-appearance: none;
+  }
+
+  textarea {
+    display: block;
+    margin-right: 0;
+    box-sizing: border-box;
+    resize: vertical;
+  }
+
+  textarea:not([cols]) {
+    width: 100%;
+  }
+
+  textarea:not([rows]) {
+    min-height: 40px;
+    height: 140px;
+  }
+
+  select {
+    background: var(--background) var(--select-arrow) calc(100% - 12px) 50% / 12px no-repeat;
+    padding-right: 35px;
+  }
+
+  select::-ms-expand {
+    display: none;
+  }
+
+  select[multiple] {
+    padding-right: 10px;
+    background-image: none;
+    overflow-y: auto;
+  }
+
+  input:focus,
+  select:focus,
+  button:focus,
+  textarea:focus {
+    box-shadow: 0 0 0 2px var(--focus);
+  }
+
+  input[type='checkbox']:active,
+  input[type='radio']:active,
+  input[type='submit']:active,
+  input[type='reset']:active,
+  input[type='button']:active,
+  input[type='range']:active,
+  button:active {
+    transform: translateY(2px);
+  }
+
+  input:disabled,
+  select:disabled,
+  button:disabled,
+  textarea:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  ::placeholder {
+    color: var(--form-placeholder);
+  }
+
+  fieldset {
+    border: 1px var(--focus) solid;
+    border-radius: 6px;
+    margin: 0;
+    margin-bottom: 12px;
+    padding: 10px;
+  }
+
+  legend {
+    font-size: 0.9em;
+    font-weight: 600;
+  }
+
+
+  /* links --------------------------------*/
+  a {
+    text-decoration: none;
+    color: var(--links);
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+
+
+
+  /* misc --------------------------------*/
+  img,
+  video {
+    max-width: 100%;
+    height: auto;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--border);
+  }
+
+  table {
+    border-collapse: collapse;
+    margin-bottom: 10px;
+    width: 100%;
+    table-layout: fixed;
+  }
+
+  table caption {
+    text-align: left;
+  }
+
+  td,
+  th {
+    padding: 6px;
+    text-align: left;
+    vertical-align: top;
+    word-wrap: break-word;
+  }
+
+  thead {
+    border-bottom: 1px solid var(--border);
+  }
+
+  tfoot {
+    border-top: 1px solid var(--border);
+  }
+
+  tbody tr:nth-child(even) {
+    background-color: var(--background);
+  }
+
+  tbody tr:nth-child(even) button {
+    background-color: var(--background-alt);
+  }
+
+  tbody tr:nth-child(even) button:hover {
+    background-color: var(--background-body);
+  }
+
+  ::-webkit-scrollbar {
+    height: 10px;
+    width: 10px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: var(--background);
+    border-radius: 6px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-thumb);
+    border-radius: 6px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--scrollbar-thumb-hover);
+  }
+
+  ::selection {
+    background-color: var(--selection);
+    color: var(--text-bright);
+  }
+
+  details {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    background-color: var(--background-alt);
+    padding: 10px 10px 0;
+    margin: 1em 0;
+    border-radius: 6px;
+    overflow: hidden;
+  }
+
+  details[open] {
+    padding: 10px;
+  }
+
+  details> :last-child {
+    margin-bottom: 0;
+  }
+
+  details[open] summary {
+    margin-bottom: 10px;
+  }
+
+  summary {
+    display: list-item;
+    background-color: var(--background);
+    padding: 10px;
+    margin: -10px -10px 0;
+    cursor: pointer;
+    outline: none;
+  }
+
+  summary:hover,
+  summary:focus {
+    text-decoration: underline;
+  }
+
+  details> :not(summary) {
+    margin-top: 0;
+  }
+
+  summary::-webkit-details-marker {
+    color: var(--text-main);
+  }
+
+  dialog {
+    background-color: var(--background-alt);
+    color: var(--text-main);
+    border: none;
+    border-radius: 6px;
+    border-color: var(--border);
+    padding: 10px 30px;
+  }
+
+  dialog>header:first-child {
+    background-color: var(--background);
+    border-radius: 6px 6px 0 0;
+    margin: -10px -30px 10px;
+    padding: 10px;
+    text-align: center;
+  }
+
+  dialog::backdrop {
+    background: #0000009c;
+    backdrop-filter: blur(4px);
+  }
+
+  footer {
+    border-top: 1px solid var(--border);
+    padding-top: 10px;
+    color: var(--text-muted);
+  }
+
+  body>footer {
+    margin-top: 40px;
+  }
+
+  /* print --------------------------------*/
+  @media print {
+
+    body,
+    pre,
+    code,
+    summary,
+    details,
+    button,
+    input,
+    textarea {
+      background-color: #fff;
+    }
+
+    button,
+    input,
+    textarea {
+      border: 1px solid #000;
+    }
+
+    body,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    pre,
+    code,
+    button,
+    input,
+    textarea,
+    footer,
+    summary,
+    strong {
+      color: #000;
+    }
+
+    summary::marker {
+      color: #000;
+    }
+
+    summary::-webkit-details-marker {
+      color: #000;
+    }
+
+    tbody tr:nth-child(even) {
+      background-color: #f2f2f2;
+    }
+
+    a {
+      color: #00f;
+      text-decoration: underline;
+    }
+  }
+
+  /* range --------------------------------*/
+  input[type='range'] {
+    margin: 10px 0;
+    padding: 10px 0;
+    background: transparent;
+  }
+
+  input[type='range']:focus {
+    outline: none;
+  }
+
+  input[type='range']::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 9.5px;
+    transition: 0.2s;
+    background: var(--background);
+    border-radius: 3px;
+  }
+
+  input[type='range']::-webkit-slider-thumb {
+    box-shadow: 0 1px 1px #000, 0 0 1px #0d0d0d;
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+    background: var(--border);
+    -webkit-appearance: none;
+    margin-top: -7px;
+  }
+
+  input[type='range']:focus::-webkit-slider-runnable-track {
+    background: var(--background);
+  }
+
+  input[type='range']::-moz-range-track {
+    width: 100%;
+    height: 9.5px;
+    transition: 0.2s;
+    background: var(--background);
+    border-radius: 3px;
+  }
+
+  input[type='range']::-moz-range-thumb {
+    box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+    background: var(--border);
+  }
+
+  input[type='range']::-ms-track {
+    width: 100%;
+    height: 9.5px;
+    background: transparent;
+    border-color: transparent;
+    border-width: 16px 0;
+    color: transparent;
+  }
+
+  input[type='range']::-ms-fill-lower {
+    background: var(--background);
+    border: 0.2px solid #010101;
+    border-radius: 3px;
+    box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
+  }
+
+  input[type='range']::-ms-fill-upper {
+    background: var(--background);
+    border: 0.2px solid #010101;
+    border-radius: 3px;
+    box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
+  }
+
+  input[type='range']::-ms-thumb {
+    box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
+    border: 1px solid #000;
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+    background: var(--border);
+  }
+
+  input[type='range']:focus::-ms-fill-lower {
+    background: var(--background);
+  }
+
+  input[type='range']:focus::-ms-fill-upper {
+    background: var(--background);
+  }
+
+  /* typography --------------------------------*/
+  h1 {
+    font-size: 2.2em;
+    margin-top: 0;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-bottom: 12px;
+    margin-top: 24px;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  strong {
+    color: var(--text-bright);
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  b,
+  strong,
+  th {
+    font-weight: 600;
+  }
+
+  q::before {
+    content: none;
+  }
+
+  q::after {
+    content: none;
+  }
+
+  blockquote,
+  q {
+    border-left: 4px solid var(--focus);
+    margin: 1.5em 0;
+    padding: 0.5em 1em;
+    font-style: italic;
+  }
+
+  blockquote>footer {
+    font-style: normal;
+    border: 0;
+  }
+
+  blockquote cite {
+    font-style: normal;
+  }
+
+  address {
+    font-style: normal;
+  }
+
+  a[href^='mailto\:']::before {
+    content: '📧 ';
+  }
+
+  a[href^='tel\:']::before {
+    content: '📞 ';
+  }
+
+  a[href^='sms\:']::before {
+    content: '💬 ';
+  }
+
+  mark {
+    background-color: var(--highlight);
+    border-radius: 2px;
+    padding: 0 2px 0 2px;
+    color: #000;
+  }
+
+  a>code,
+  a>strong {
+    color: inherit;
+  }
+}

styles/style.css

@@ -1,264 +0,0 @@
-:root {
-    --default-font: 'Open Sans', sans-serif;
-    --font-monospace: 'Source Code Pro', monospace;
-}
-
-a {
-    color: var(--text-accent);
-    outline: none;
-}
-
-a:hover {
-    color: var(--text-accent-hover);
-}
-
-.container {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    position: relative;
-    flex-direction: row;
-}
-
-/* Foooter section BEGIN */
-.note-footer {
-    display: block;
-    background-color: rgba(238, 238, 238, 0.5);
-    border-radius: 16px;
-    margin-top: 24px;
-    padding: 16px;
-}
-
-.backlink-container {
-    flex-wrap: wrap;
-    justify-content: space-between;
-    position: relative;
-    flex-direction: row;
-    display: flex;
-}
-
-.note-footer .backlink-heading {
-    display: block;
-    font-size: 18px;
-    line-height: 24px;
-    font-weight: 600;
-    color: var(--text-muted);
-}
-
-.backlink-container .backlink {
-    /*background-color: #f8f2f2;*/
-    margin: 8px -8px 0px;
-    padding: 8px;
-    height: 116px;
-    width: 318px;
-    text-decoration: none;
-    display: block;
-    overflow: hidden;
-    border-radius: 8px;
-    /*padding-bottom: 8px;*/
-}
-
-.note-footer .no-backlinks {
-    color: var(--text-muted);
-
-}
-
-.backlink-container .backlink:hover {
-    background-color: rgba(199, 199, 199, 0.3);
-}
-
-.backlink-container .backlink-title {
-    font-size: 14px;
-    line-height: 18px;
-    font-weight: 600;
-    text-decoration: none;
-}
-
-.backlink-container a {
-    text-decoration: none;
-    color: var(--text-muted);
-}
-
-.backlink-container .backlink-preview {
-    font-size: 12px;
-    line-height: 16px;
-    overflow: hidden;
-}
-
-.backlink-container p {
-    margin: 12px 0px;
-}
-
-/* Foooter section END */
-
-.markdown-rendered {
-    font-size: 18px;
-    line-height: 1.6em;
-    width: 740px;
-    background-color: var(--background-primary);
-    color: var(--text-normal);
-    font-family: var(--default-font);
-    padding: 15px 30px;
-}
-
-.markdown-rendered code {
-    color: #a20000c9;
-    font-family: var(--font-monospace);
-    background-color: #f5f2f0;
-    border-radius: 4px;
-    font-size: 0.85em;
-    padding: 4px 8px;
-}
-
-.nav-bar {
-    width: 300px;
-    flex: 0 0 300px;
-    position: relative;
-    display: flex;
-    background-color: var(--background-primary-alt);
-    border-right: 1px solid var(--background-secondary-alt);
-    font-family: var(--default-font);
-    font-size: 14px;
-    line-height: 1.6;
-    min-height: 0;
-    padding-top: 20px;
-    flex-direction: column;
-}
-
-
-.theme-light {
-    --background-primary: white;
-    --background-primary-alt: #f1f4fa;
-    --background-secondary: #f2f3f5;
-    --background-secondary-alt: #e3e5e8;
-    --background-modifier-border: #ddd;
-    --background-modifier-form-field: #fff;
-    --background-modifier-form-field-highlighted: #fff;
-    --background-modifier-box-shadow: rgba(0, 0, 0, 0.1);
-    --background-modifier-success: #A4E7C3;
-    --background-modifier-error: #990000;
-    --background-modifier-error-rgb: 230, 135, 135;
-    --background-modifier-error-hover: #bb0000;
-    --background-modifier-cover: rgba(0, 0, 0, 0.8);
-    --text-accent: rgba(201, 19, 133, 0.77);;
-    --text-accent-hover: #1ea2cc;
-    --text-normal: #232324;
-    --text-muted: #8e8e90;
-    --text-muted-rgb: 136, 136, 136;
-    --text-faint: #999999;
-    --text-error: #800000;
-    --text-error-hover: #990000;
-    --text-highlight-bg: rgba(255, 255, 0, 0.4);
-    --text-highlight-bg-active: rgba(255, 128, 0, 0.4);
-    --text-selection: rgb(204 232 255);
-    --text-on-accent: #f2f2f2;
-    --interactive-normal: #f2f3f5;
-    --interactive-hover: #e9e9e9;
-    --interactive-accent: #7b6cd9;
-    --interactive-accent-rgb: 123, 108, 217;
-    --interactive-accent-hover: #8273e6;
-    --interactive-success: #197300;
-    --scrollbar-active-thumb-bg: rgba(0, 0, 0, 0.2);
-    --scrollbar-bg: rgba(0, 0, 0, 0.05);
-    --scrollbar-thumb-bg: rgba(0, 0, 0, 0.1);
-    --highlight-mix-blend-mode: darken;
-    --dark: #141021;
-}
-
-.markdown-rendered img:not([width]),
-.markdown-rendered audio,
-.markdown-rendered video {
-    max-width: 100%;
-    outline: none;
-}
-
-.markdown-rendered h1,
-.markdown-rendered h2,
-.markdown-rendered h3,
-.markdown-rendered h4,
-.markdown-rendered h5,
-.markdown-rendered h6 {
-    margin: 15px 0;
-}
-
-.markdown-rendered h1 {
-    font-size: 2.0em;
-    font-weight: 800;
-}
-
-.markdown-rendered h2 {
-    font-size: 1.6em;
-    font-weight: 800;
-}
-
-.markdown-rendered h3 {
-    font-size: 1.4em;
-    font-weight: 700;
-}
-
-.markdown-rendered h4 {
-    font-size: 1.2em;
-    font-weight: 600;
-}
-
-.markdown-rendered h5,
-.markdown-rendered h6 {
-    font-size: 1em;
-    font-weight: 500;
-}
-
-.markdown-rendered h6 {
-    color: var(--text-muted);
-}
-
-.right-bar-container {
-    display: block;
-    padding: 0em 1em;
-}
-
-footer {
-    margin-top: 2em;
-    text-align: center;
-    background-color: rgb(231, 242, 250);
-    border-radius: 8px;
-    padding: 4px;
-}
-
-footer ul li {
-    margin: auto;
-    text-align: center;
-    list-style-type: none;
-    display: inline-block;
-    padding: 0 1em
-}
-
-hr {
-    display: block;
-    unicode-bidi: isolate;
-    margin-block-start: 0.5em;
-    margin-block-end: 0.5em;
-    margin-inline-start: auto;
-    margin-inline-end: auto;
-    overflow: hidden;
-    border-style: inset;
-    border-width: 0;
-    width: 25%;
-    margin: 2em auto;
-    height: 2px;
-    border-radius: 1px;
-    color: var(--dark);
-    background-color: var(--dark);
-}
-
-@media screen and (max-width: 1200px) {
-    .right-bar-container {
-        display: none;
-    }
-}
-
-@media screen and (max-width: 800px) {
-    .nav-bar {
-        display: none;
-    }
-}