cleared style.css

assets/styles/style.css

@@ -1,153 +0,0 @@
-:root {
-    --font-size-primary: 0.906rem; /* 14.5px */
-    --font-size-secondary: 0.688rem; /* 11px */
-
-    --foreground: rgba(0, 0, 0, 0.75);
-
-    --border-color: rgba(0, 0, 0, 0.55);
-    --border-shorthand: 0.063rem solid var(--border-color);
-
-    /* Button */
-    --button-hover-foreground: rgba(255, 255, 255, 0.9);
-    --button-hover-backround: rgba(0, 0, 0, 0.78);
-    --font-size-button: 0.769rem; /* 12.3px */
-
-    --seven: 0.438rem; /* 7px */
-    --twelve: 0.75rem; /* 12px */
-}
-
-*, *::before, *::after  {
-    color: var(--foreground);
-    box-sizing: border-box;
-}
-
-body { /* Left & right spacing is left & right from default body margin + 12px */
-    display: flex;
-    justify-content: center;
-    min-height: 91vh;
-    margin-top: 4.5vh;
-    margin-bottom: 4.5vh;
-    padding: var(--twelve);
-    font-size: var(--font-size-primary);
-    text-align: center;
-}
-
-main {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    max-width: 32rem;
-}
-
-h2 {
-    margin-top: 0;
-}
-
-#simple-note {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    height: 100%;
-    min-height: 18.75rem;
-}
-
-/* Title Input */
-
-.__title {
-    border: var(--border-shorthand);
-    border-bottom: 0;
-    width: 100%;
-}
-
-.__title input {
-    border: none;
-    width: 100%;
-    padding: var(--seven) var(--twelve);
-    font-size: var(--font-size-button);
-    font-style: italic;
-    font-weight: bold;
-    outline: none;
-}
-
-/* Body / textarea / The Note Itself */
-
-.__body {
-    height: 100%;
-    width: 100%;
-}
-
-.__body textarea {
-    border: var(--border-shorthand);
-    border-bottom: none;
-    border-radius: 0;
-    height: 100%;
-    width: 100%;
-    padding: var(--seven) var(--twelve);
-    font-size: var(--font-size-button);
-    resize: none;
-    overflow-y: scroll;
-    outline: none;
-}
-
-/* Bottom Part / The One With The Buttons */
-
-.__function {
-    display: flex;
-    border: var(--border-shorthand);
-    width: 100%;
-}
-
-button {
-    background: none;
-    border: none;
-    min-width: 20%;
-    padding: var(--seven) var(--twelve);
-    font-size: var(--font-size-button);
-    cursor: pointer;
-}
-
-.__function button:not(:last-child) {
-    border-right: var(--border-shorthand);
-}
-
-._delete-all,
-._delete-confirm {
-    color: #fff;
-    background: #FD5E5E;
-}
-
-._delete-confirm {
-    display: none;
-}
-
-._save-to-local {
-    border-left: var(--border-shorthand) !important;
-    margin-left: auto;
-}
-
-/* Notice / Link */
-
-#notice {
-    margin-top: 0.656rem;
-    padding: 0 var(--seven);
-    font-size: var(--font-size-secondary);
-    line-height: 1.1;
-    word-wrap: break-word;
-}
-
-/* Media Query */
-
-@media (hover: hover) {
-    .__function button:hover {
-        color: var(--button-hover-foreground);
-        background: var(--button-hover-backround);
-    }
-}
-
-/* Font Size */
-@media (max-width: 30rem) { /* 480px */
-    html {
-        font-size: calc(1rem - 10%);
-    }
-}
-/* -------- */