From cd344ea4478a7c3c34ed292c185ad3a8bc695475 Mon Sep 17 00:00:00 2001 From: Kirill Date: Thu, 28 Dec 2023 23:15:57 +0300 Subject: [PATCH] new fonts, active button style, more docs in css, reorganizing --- index.html | 17 +++-- src/index.css | 193 ++++++++++++++++++++++++++++++-------------------- 2 files changed, 127 insertions(+), 83 deletions(-) diff --git a/index.html b/index.html index 69789ab..d58a80d 100644 --- a/index.html +++ b/index.html @@ -2,12 +2,16 @@ - Demo + clsls • framework +

-

Demo

+

🫙 clsls

+

classless framework for fast prototyping

+
+

@@ -17,6 +21,7 @@

Heading

h1

+

h2

h3

h4

@@ -134,9 +139,9 @@

Links

- +
dashed - +
@@ -264,7 +269,7 @@

Code



-
-
+ + diff --git a/src/index.css b/src/index.css index 22ca2e2..f0c64ab 100644 --- a/src/index.css +++ b/src/index.css @@ -1,34 +1,45 @@ -@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@300;600;700;900&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Noto Sans Mono:wght@300&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Roboto Mono:wght@300;600;700&display=swap"); /* Variables */ :root { - /* Light Theme */ - --clsls-color-background: white; - --clsls-color-text: black; - --clsls-color-link-hover: #ff4040; + --clsls-line-thickness: 1.5px; + --clsls-radius: 0.4rem; + --clsls-font-heading: 'Roboto Mono', monospace; + --clsls-font-text: 'Noto Sans Mono', monospace; + --clsls-zoom-main: 100%; + --clsls-color-link-hover: var(--clsls-color-main); --clsls-color-button: white; - --clsls-color-main: #ff4040; --clsls-color-opposite: white; +} - --clsls-line-thickness: 1.1px; - --clsls-radius: 6px; - --clsls-font-main: "Noto Sans Mono", monospace; - --clsls-zoom-main: 100%; +/* Light Theme */ + +@media (prefers-color-scheme: light) { + :root { + --clsls-color-main: rgb(0, 122, 255); + --clsls-color-background: white; + --clsls-color-text: #222; + --clsls-color-border: #d3d3d3; + --clsls-color-code: rgba(0, 0, 0, 0.1); + --clsls-icon-chevron: url("data:image/svg+xml;utf8,"); + } +} + +/* Dark Theme */ - /* Dark Theme */ - /* --clsls-line-thickness: 1.1px; - --clsls-color-background: black; - --clsls-color-text: white; - --clsls-color-link-hover: #00c200; - --clsls-color-button: black; - --clsls-color-main: #00ff00; - --clsls-color-opposite: white; - --clsls-radius: 0px; - --clsls-font-main: "Noto Sans Mono"; - --clsls-zoom-main: 120%; */ +@media (prefers-color-scheme: dark) { + :root { + --clsls-color-main: rgb(10, 132, 255); + --clsls-color-background: #222; + --clsls-color-text: white; + --clsls-color-border: #666; + --clsls-color-code: rgba(255, 255, 255, 0.1); + --clsls-icon-chevron: url("data:image/svg+xml;utf8,"); + } } /* @@ -38,9 +49,13 @@ * { margin: 0; padding: 0; - margin-bottom: 4px; + margin-bottom: 0.27rem; } +/* + Headlines +*/ + h1, h2, h3, @@ -48,14 +63,8 @@ h4, h5, h6 { font-weight: normal; -} - -br { - user-select: none; -} - -u { - text-decoration: none; + font-family: var(--clsls-font-heading); + transform: scaleY(0.97); } /* @@ -63,7 +72,7 @@ u { */ * { - font-family: var(--clsls-font-main); + font-family: var(--clsls-font-text); } body { @@ -75,38 +84,18 @@ body { Heading */ -/* -h1 { - font-size: 2.25rem; -} -h2 { - font-size: 1.85rem; -} -h3 { - font-size: 1.55rem; -} -h4 { - font-size: 1.25rem; -} -h5 { - font-size: 1rem; -} -h6 { - font-size: 0.875rem; -} -*/ - /* Text styles */ -i {} - b { - font-weight: 700; + font-weight: 600; + font-family: var(--clsls-font-heading); } b b { + font-weight: 700 !important; + font-weight: 800 !important; font-weight: 900 !important; } @@ -126,16 +115,7 @@ body { Links */ -u a { - text-decoration: none !important; - border-bottom: none; -} - -u a:hover { - border-width: 0 0 var(--clsls-line-thickness) 0; - border-style: solid; - border-color: var(--clsls-color-main); -} +/* a = regular anchor */ a { color: var(--clsls-color-main); @@ -151,27 +131,40 @@ a:hover { color: var(--clsls-color-link-hover) !important; } +/* u + a = anchor as undecorated */ + +u a { + text-decoration: none !important; + border-bottom: none; +} + +u a:hover { + border-width: 0 0 var(--clsls-line-thickness) 0; + border-style: solid; + border-color: var(--clsls-color-main); +} + +/* tt + a = anchor as text */ + tt a { color: var(--clsls-color-text) !important; /* rewrite regular link color */ border-color: var(--main-text); } -em a { +/* dd + a = anchor as dashed */ + +dd a { font-style: normal; /* rewrite default behaviour */ border-style: dashed; border-color: var(--clsls-color-main); } -em a:hover { +dd a:hover { border-bottom: 0px dotted var(--clsls-color-main); } -a ol { - display: inline-block; -} - /* Form */ @@ -183,7 +176,9 @@ textarea { font-size: 1rem; border-radius: var(--clsls-radius); border: var(--clsls-line-thickness) solid var(--clsls-color-text); - padding: 1px 6px 3px 6px; + padding: 0.08rem 0.42rem 0.21rem; + background-color: var(--clsls-color-background); + color: var(--clsls-color-text); } button, @@ -193,7 +188,7 @@ input[type="submit"] { } input[type="file"]::-webkit-file-upload-button { - font-family: var(--clsls-font-main); + font-family: var(--clsls-font-text); margin-right: 12px; } @@ -212,6 +207,10 @@ input[type="submit"] { border: var(--clsls-line-thickness) solid var(--clsls-color-main); } +button:active { + box-shadow: inset 0 0 3px 0.1rem rgba(0,0,0,0.33); +} + input:focus, select:focus, textarea:focus { @@ -219,6 +218,18 @@ textarea:focus { border-color: var(--clsls-color-main); } +select { + -webkit-appearance: none; + -moz-appearance: none; + background: transparent; + background-image: var(--clsls-icon-chevron); + background-repeat: no-repeat; + background-position-x: 100%; + background-position-y: 0.5px; + /* margin-right: 2rem; */ + padding-right: 2rem; +} + select option { padding: 0; margin: 0; @@ -309,7 +320,11 @@ small img { hr { height: 0; border: 0px solid transparent; - border-bottom: 1px solid lightgrey; + border-bottom: 1px solid var(--clsls-color-border); +} + +br { + user-select: none; } /* @@ -326,8 +341,32 @@ td { */ pre:has(code) { - /* Styles for elements with class .parent-class that contain an element with class .child-element */ - background-color:rgb(222, 222, 222); + background-color: var(--clsls-color-code); padding: 15px 20px; border-radius: var(--clsls-radius); -} \ No newline at end of file +} + +/* + muted text +*/ + +p > small { + opacity: 0.6; + font-size: 100%; +} + +/* + UTILS +*/ + +u { + text-decoration: none; +} + +/* + FIXIES +*/ + +a ol { + display: inline-block; +}