CSS

diff --git a/README.md b/README.md index a4c0ed0..dc07546 100644 --- a/README.md +++ b/README.md @@ -7,15 +7,11 @@ A modern, unobtrusive and elegant semantic-css framework (<20KB). ## HTML Quick Start ```html - - + + - - - CSS - - +

@@ -27,13 +23,12 @@ A modern, unobtrusive and elegant semantic-css framework (<20KB). ``` + ## React Quick Start ``` -sergeant create react emeraldapp ``` -sergeant: http://github.com/scriptmaster/sergeant ### Designs and Inspirations: @@ -41,20 +36,3 @@ sergeant: http://github.com/scriptmaster/sergeant #### Mac: https://contexts.co -## Semantic Menu - -```html - -

- -

- -... - -``` diff --git a/build.sh b/build.sh deleted file mode 100755 index a4ff0ac..0000000 --- a/build.sh +++ /dev/null @@ -1,7 +0,0 @@ -# cd ../.. -# sergeant emeraldcss && cp -r dist/emeraldcss/* apps/emeraldcss/dist/cdn/ -CDN=../../apps/emeraldcss/dist/cdn/ -echo Copying $PWD to $CDN -# cp -r . $CDN -ls -la $CDN -echo $CDN diff --git a/css/anchors.scss b/css/anchors.scss index 1eb6a01..3291ed6 100644 --- a/css/anchors.scss +++ b/css/anchors.scss @@ -2,6 +2,8 @@ a, a:visited { color: #333; } +a:hover { text-decoration: none; } + li > a { display: inline-block; padding: 0 var(--gap2); @@ -11,3 +13,15 @@ li > a { .main.menu li > a:hover { border-bottom: 1px solid var(--color-attention); } + +.icon-link, a.icon-link, a.icon { + display: block; + padding: 10px; + margin: 0; + border: 0; + background-color: transparent; + &:hover { + background-color: transparent; + } +} + diff --git a/css/base.scss b/css/base.scss index 9344d8c..cfc0dcc 100644 --- a/css/base.scss +++ b/css/base.scss @@ -8,3 +8,6 @@ @import "buttons.scss"; @import "utils.scss"; @import "misc.scss"; + +/* Layout Themes */ +@import "./layouts/directed.scss"; diff --git a/css/buttons.scss b/css/buttons.scss index fd7d2c9..096ad26 100644 --- a/css/buttons.scss +++ b/css/buttons.scss @@ -36,3 +36,26 @@ button, .btn, [type=button], [type=submit], [type=reset] { } } + + +.rounded-icon-btn, .rounded-icon-button { + display: block; + border-radius: 24px; + padding: 10px; + margin: 0; + border: 0; + background-color: rgba(200,200,200,0.1); +} + + +.icon-btn { + display: block; + padding: 12px; + margin: 0; + border: 0; + background-color: transparent; + &:hover { + background-color: transparent; + } +} + diff --git a/css/flex.scss b/css/flex.scss index 0928e7d..1c32b52 100644 --- a/css/flex.scss +++ b/css/flex.scss @@ -6,12 +6,28 @@ flex: 1; } -.flex-vertical, .flex-column { +.flex-vertical, .flex-column, .flex-col { display: flex; flex-direction: column; } -.flex-horizontal, .flex-row { +.flex-horizontal, .flex-horiz, .flex-row { display: flex; flex-direction: row; } + +.justify-between { justify-content: space-between; } +.justify-around { justify-content: space-around; } + +.place-center, .flex-center { + place-items: center; + place-content: center; +} + +.flex-center-col { + place-items: center; + place-content: center; + + display: flex; + flex-direction: column; +} diff --git a/css/fonts.scss b/css/fonts.scss index 6b2923a..1b83844 100644 --- a/css/fonts.scss +++ b/css/fonts.scss @@ -1,10 +1,6 @@ -@font-face{font-family:sf pro display;font-style:normal;font-weight:400;src:local('SF Pro Display'),url('./fonts/SFPRODISPLAYREGULAR.woff') format('woff')}; - body { - /*font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";*/ - // font-family: -apple-system,BlinkMacSystemFont,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,"Segoe UI",helvetica neue,"Apple Color Emoji", "Segoe UI Emoji", sans-serif; - font-family: -apple-system,BlinkMacSystemFont,"SF Pro Display",Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,"Segoe UI",helvetica neue,"Apple Color Emoji", "Segoe UI Emoji", sans-serif; + font-family: Inter, BlinkMacSystemFont, -apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + font-size: 0.9rem; line-height: 1.5; color: rgb(36, 41, 47); } - diff --git a/css/layout.scss b/css/layout.scss index f91b7e8..4e3aac6 100644 --- a/css/layout.scss +++ b/css/layout.scss @@ -23,6 +23,7 @@ header { border-bottom: 1px solid #ddd; padding: 0 32px; + .app & { padding: 0 10px; } font-size: 12px; height: 44px; @@ -71,6 +72,15 @@ nav, .nav { @include flexr_space_between(); flex-wrap: wrap; + + //sass-lang.com/documentation/style-rules/parent-selector/ + .app & { + max-width: 100%; + } + + .app header & { + + } } .logo { @@ -98,6 +108,7 @@ nav, .nav { .content, main, .container { position: relative; max-width: calc(var(--main-width) + var(--gap) * 2); + .app & { max-width: 100%; } margin: auto; padding: var(--gap); } diff --git a/css/layouts/README.md b/css/layouts/README.md new file mode 100644 index 0000000..663f0b4 --- /dev/null +++ b/css/layouts/README.md @@ -0,0 +1 @@ +# Layout based themes diff --git a/css/layouts/directed.scss b/css/layouts/directed.scss new file mode 100644 index 0000000..90c77be --- /dev/null +++ b/css/layouts/directed.scss @@ -0,0 +1,371 @@ +.directed-layout { + --directed-size: 60px; + + --v-icon-color: currentColor; + --v-icon-color-hover: currentColor; + --v-icon-size: 24px; + + flex-direction: row; + display: flex; + height: 100vh; + + header { + height: 60px; + border-bottom-color: var(--module-background-alt-green); + + .title-icon { + width: 24px; + } + + hgroup { + display: flex; + flex-direction: column; + margin-left: 36px; + } + h1 { font-size: 24px; } + h4 { font-size: 12px; color: var(--foreground-subdued); } + } + + .icon-btn, a.icon-link, a.icon { + width: var(--directed-size); + height: var(--directed-size); + } + + .v-icon { + position: relative; + display: inline-block; + width: var(--v-icon-size); + min-width: var(--v-icon-size); + height: var(--v-icon-size); + color: var(--v-icon-color); + font-size: 0; + vertical-align: middle; + } + + main { + padding: 24px; + margin: 0; + } + +} + +.aside-left, .left-aside, aside.left { + display: flex; + flex-direction: row; +} + +.aside-right, .right-aside, aside.right { + display: flex; + flex-direction: column; + + position: absolute; + right: 0; + height: 100%; + width: var(--directed-size); + background-color: var(--module-background-alt-green); +} + +.modules { + display: flex; + flex-direction: column; + + width: var(--directed-size); + background-color: var(--module-background); + + button.icon-btn { + color: var(--module-icon); + border-radius: 0; + &:hover { + color: var(--module-icon-hover); + } + &.active { + color: var(--module-icon-active); + background-color: var(--module-background-alt-green); + } + } +} + +.directed-logo { + width: var(--directed-size); + height: var(--directed-size); + // background-color: #fff; +} + +.directed-modules-list { + width: var(--directed-size); + flex: 1; +} + +.directed-avatar { + width: var(--directed-size); + height: var(--directed-size); + + position: relative; + &::after { + position: absolute; + top: -1px; + right: 8px; + left: 8px; + height: 2px; + background-color: var(--module-icon); + opacity: .25; + content: ""; + } +} + +.selected-module-nav { + display: flex; + flex-direction: column; + //background-color: var(--module-background-alt); + //background-color: rgba(0,0,0,0.08); + background-color: var(--module-background-alt-green); + + ul { + padding: 12px; + } + + ul > li { + width: 200px; + padding: 0px 1px; + margin-bottom: 1px; + + a { + display: block; + padding: 6px 12px; + font-size: 14px; + line-height: 22px; + border-radius: 4px; + + &.active, &:hover { + background-color: var(--module-background-alt-green-1); + } + } + } +} + +.project-info { + background-color: var(--module-background-alt-green-3); + height: 60px; +} + +.center-content { + display: flex; + flex-direction: column; + flex: 1; + + margin-right: 60px; +} + +i { + display: block; /* important */ + font-family: Material Symbols; + font-size: 24px; + font-style: normal; + font-weight: 400; + line-height: 1; + letter-spacing: normal; + text-transform: none; + white-space: nowrap; + word-wrap: normal; + direction: ltr; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; + font-feature-settings: "liga"; + font-variation-settings: "FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24; + + &::after { + content: attr(data-icon); + } +} + + +.directed-layout.light { + color-scheme: light; + + --border-normal: #d3dae4; + --border-normal-alt: #a2b5cd; + --border-subdued: #f0f4f9; + + --foreground-normal: #4f5464; + --foreground-normal-alt: #172940; + --foreground-subdued: #a2b5cd; + --foreground-inverted: #fff; + + --background-normal: #f0f4f9; + --background-normal-alt: #e4eaf1; + --background-subdued: #f7fafc; + --background-highlight: #f7f9fd; + --background-page: #ffffff; + --background-input: #ffffff; + --background-page-rgb: 255, 255, 255; + --background-inverted: #263238; + --background-mark: var(--primary-25); + + --module-background: #18222f; + --module-background-alt: var(--background-normal); + // --module-background-alt-green: rgba(50,110,80,0.3); + --module-background-alt-green: #c2d4cb; + --module-background-alt-green-1: color-mix(in srgb, var(--module-background-alt-green) 30%, #000 5%); + --module-background-alt-green-2: color-mix(in srgb, var(--module-background-alt-green) 50%, #000 10%); + --module-background-alt-green-3: color-mix(in srgb, var(--module-background-alt-green), #000 20%); + + --module-icon: #8196b1; + --module-icon-hover: #fff; + --module-icon-active: var(--foreground-normal-alt); + --module-icon-alt: var(--foreground-normal-alt); + + --header-shadow: 0 4px 7px -4px rgb(0 0 0 / .2); + --navigation-shadow: 4px 0 7px -4px rgb(0 0 0 / .2); + --sidebar-shadow: -4px 0 7px -4px rgb(0 0 0 / .2); + + --overlay-color: rgba(38, 50, 56, .8); + + --card-face-color: #fafcfd; + --card-shadow-color: 23, 41, 64; + --card-shadow: 0px 0px 6px 0px rgba(var(--card-shadow-color), .2); + + --purple-10: #f0ecff; + --purple-25: #d9d0ff; + --purple-50: #b3a2ff; + --purple-75: #8c73ff; + --purple-90: #7557ff; + --purple: #6644ff; + --purple-110: #6043ec; + --purple-125: #5842d0; + --purple-150: #4a40a1; + --purple-175: #3c3e72; + --purple-190: #343d56; + --pink-10: #fff5fc; + --pink-25: #ffe6f7; + --pink-50: #ffccee; + --pink-75: #ffb3e6; + --pink-90: #ffa3e0; + --pink: #ff99dd; + --pink-110: #ea90ce; + --pink-125: #cb82b7; + --pink-150: #976b90; + --pink-175: #62536a; + --pink-190: #434552; + --blue-10: #ebf5ff; + --blue-25: #cce6ff; + --blue-50: #99ccff; + --blue-75: #66b3ff; + --blue-90: #47a3ff; + --blue: #3399ff; + --blue-110: #3390ec; + --blue-125: #3282d0; + --blue-150: #316ba1; + --blue-175: #2f5372; + --blue-190: #2f4556; + --green-10: #eafaf6; + --green-25: #cbf3e9; + --green-50: #97e6d3; + --green-75: #62dabd; + --green-90: #43d2b0; + --green: #2ecda7; + --green-110: #2ebf9d; + --green-125: #2ea98e; + --green-150: #2e8575; + --green-175: #2e605c; + --green-190: #2e4b4d; + --yellow-10: #fff9ed; + --yellow-25: #fef1d3; + --yellow-50: #fde2a7; + --yellow-75: #fcd47b; + --yellow-90: #fbcb61; + --yellow: #fbc54f; + --yellow-110: #e7b74e; + --yellow-125: #c8a34c; + --yellow-150: #958149; + --yellow-175: #615e46; + --yellow-190: #434a44; + --orange-10: #fff6eb; + --orange-25: #ffe8ce; + --orange-50: #ffd29c; + --orange-75: #ffbb6b; + --orange-90: #ffad4d; + --orange: #ffa439; + --orange-110: #ea9a3a; + --orange-125: #cb8a3c; + --orange-150: #97703e; + --orange-175: #625641; + --orange-190: #434642; + --red-10: #fceef0; + --red-25: #f8d4da; + --red-50: #f1a8b4; + --red-75: #ea7d8f; + --red-90: #e66278; + --red: #e35169; + --red-110: #d14f65; + --red-125: #b64c60; + --red-150: #894756; + --red-175: #5b414d; + --red-190: #403e47; + --primary-10: #f0ecff; + --primary-25: #d9d0ff; + --primary-50: #b3a2ff; + --primary-75: #8c73ff; + --primary-90: #7557ff; + --primary: #6644ff; + --primary-110: #6043ec; + --primary-125: #5842d0; + --primary-150: #4a40a1; + --primary-175: #3c3e72; + --primary-190: #343d56; + --secondary-10: #fff5fc; + --secondary-25: #ffe6f7; + --secondary-50: #ffccee; + --secondary-75: #ffb3e6; + --secondary-90: #ffa3e0; + --secondary: #ff99dd; + --secondary-110: #ea90ce; + --secondary-125: #cb82b7; + --secondary-150: #976b90; + --secondary-175: #62536a; + --secondary-190: #434552; + --success-10: #eafaf6; + --success-25: #cbf3e9; + --success-50: #97e6d3; + --success-75: #62dabd; + --success-90: #43d2b0; + --success: #2ecda7; + --success-110: #2ebf9d; + --success-125: #2ea98e; + --success-150: #2e8575; + --success-175: #2e605c; + --success-190: #2e4b4d; + --warning-10: #fff6eb; + --warning-25: #ffe8ce; + --warning-50: #ffd29c; + --warning-75: #ffbb6b; + --warning-90: #ffad4d; + --warning: #ffa439; + --warning-110: #ea9a3a; + --warning-125: #cb8a3c; + --warning-150: #97703e; + --warning-175: #625641; + --warning-190: #434642; + --danger-10: #fceef0; + --danger-25: #f8d4da; + --danger-50: #f1a8b4; + --danger-75: #ea7d8f; + --danger-90: #e66278; + --danger: #e35169; + --danger-110: #d14f65; + --danger-125: #b64c60; + --danger-150: #894756; + --danger-175: #5b414d; + --danger-190: #403e47; + --purple-alt: var(--purple-10); + --blue-alt: var(--blue-10); + --green-alt: var(--green-10); + --yellow-alt: var(--yellow-10); + --orange-alt: var(--orange-10); + --red-alt: var(--red-10); + --primary-alt: var(--purple-10); + --secondary-alt: var(--pink-10); + --success-alt: var(--green-10); + --warning-alt: var(--yellow-10); + --danger-alt: var(--red-10); +} \ No newline at end of file diff --git a/css/misc.scss b/css/misc.scss index 2643ee1..6be75f4 100644 --- a/css/misc.scss +++ b/css/misc.scss @@ -1,3 +1,4 @@ p { padding-bottom: 18px; } + diff --git a/css/reset.scss b/css/reset.scss index 81eb656..136b146 100644 --- a/css/reset.scss +++ b/css/reset.scss @@ -39,7 +39,6 @@ input, select, textarea, button { button, select { text-transform: none; } - button, input { overflow: visible; } diff --git a/css/utils.scss b/css/utils.scss index e350027..9cb266b 100644 --- a/css/utils.scss +++ b/css/utils.scss @@ -1,3 +1,19 @@ -.pad-18 { - padding: 18px; +.hidden { + display: none !important; } + +.invisible, .visibility-hidden { + visibility: hidden !important; +} + +.ht-100vh { height: 100vh; } +.ht-100 { height: 100%; } + +.pad-6 { padding: 6px; } +.pad-12 { padding: 12px; } +.pad-18 { padding: 18px; } + + +.section { width: 100%; } +.full-width { width: 100%; } + diff --git a/dist/cdn/SFPRODISPLAYREGULAR-6PKAZPAV.woff b/dist/cdn/SFPRODISPLAYREGULAR-6PKAZPAV.woff deleted file mode 100644 index 7929491..0000000 Binary files a/dist/cdn/SFPRODISPLAYREGULAR-6PKAZPAV.woff and /dev/null differ diff --git a/dist/cdn/main.css b/dist/cdn/main.css deleted file mode 100644 index 14399a2..0000000 --- a/dist/cdn/main.css +++ /dev/null @@ -1 +0,0 @@ -html{box-sizing:border-box;font-size:16px}*,*:before,*:after{box-sizing:inherit}body,h1,h2,h3,h4,h5,h6,p,ol,ul{margin:0;padding:0;font-weight:400}ol,ul{list-style:none}img{max-width:100%;height:auto}a,a:visited{text-decoration:none}a:hover{text-decoration:underline}input,select,textarea,button{font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}button,input{overflow:visible}:root{--breakpoint-xsmall:20rem;--breakpoint-small:34rem;--breakpoint-medium:48rem;--breakpoint-large:63.25rem;--breakpoint-xlarge:80rem;--breakpoint-xxlarge:90rem;--boxShadow-thin:inset 0 0 0 max(1px, .0625rem);--boxShadow-thick:inset 0 0 0 max(2px, .125rem);--boxShadow-thicker:inset 0 0 0 max(4px, .25rem);--borderWidth-thin:max(1px, .0625rem);--borderWidth-thick:max(2px, .125rem);--borderWidth-thicker:max(4px, .25rem);--borderRadius-small:.1875rem;--borderRadius-medium:.375rem;--borderRadius-large:.75rem;--borderRadius-full:624.9375rem;--outline-focus-offset:-.125rem;--outline-focus-width:.125rem;--base-text-weight-light:300;--base-text-weight-normal:400;--base-text-weight-medium:500;--base-text-weight-semibold:600;--base-size-4:.25rem;--base-size-8:.5rem;--base-size-12:.75rem;--base-size-16:1rem;--base-size-20:1.25rem;--base-size-24:1.5rem;--base-size-28:1.75rem;--base-size-32:2rem;--base-size-36:2.25rem;--base-size-40:2.5rem;--base-size-44:2.75rem;--base-size-48:3rem;--base-size-64:4rem;--base-size-80:5rem;--base-size-96:6rem;--base-size-112:7rem;--base-size-128:8rem}@font-face{font-family:sf pro display;font-style:normal;font-weight:400;src:local("SF Pro Display"),url(./SFPRODISPLAYREGULAR-6PKAZPAV.woff) format("woff")}body{font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Segoe UI,helvetica neue,"Apple Color Emoji","Segoe UI Emoji",sans-serif;line-height:1.5;color:#24292f}:root{--fg-default:#1f2328;--bg-default:#fff;--fg-emphasis:white;--bg-emphasis:#24292f;--fg-accent:#0969da;--bg-accent:#fff;--fg-double-nav-top:rgba(255, 255, 255, .8);--bg-double-nav-top:rgba(22, 22, 22, .8);--fg-double-nav-green:rgba(255, 255, 255, .8);--bg-double-nav-green:#016732cc;--fg-footer:#eee;--bg-footer:#000}.color-fg-default{color:var(--fg-default)}.color-bg-default{background-color:var(--bg-default)}.color-fg-emphasis{color:var(--fg-emphasis)}.color-bg-emphasis{background-color:var(--bg-emphasis)}.color-fg-accent{color:var(--fg-accent)}.color-bg-accent{background-color:var(--bg-accent)}.color-fg-double-nav-top{color:var(--fg-double-nav-top)}.color-bg-double-nav-top{background-color:var(--bg-double-nav-top)}.color-fg-double-nav-green{color:var(--fg-double-nav-green)}.color-bg-double-nav-green{background-color:var(--bg-double-nav-green)}.color-fg-footer{color:var(--fg-footer)}.color-bg-footer{background-color:var(--bg-footer)}:root{--fg-muted:#656d76;--bg-muted:#656d76;--fg-subtle:#6e7781;--bg-subtle:#6e7781;--fg-success:#1a7f37;--bg-success:#1a7f37;--fg-attention:#9a6700;--bg-attention:#9a6700;--fg-severe:#bc4c00;--bg-severe:#bc4c00;--fg-danger:#d1242f;--bg-danger:#d1242f;--fg-open:#1a7f37;--bg-open:#1a7f37;--fg-closed:#d1242f;--bg-closed:#d1242f;--fg-done:#8250df;--bg-done:#8250df;--fg-sponsors:#bf3989;--bg-sponsors:#bf3989;--fg-overlay:white;--bg-overlay:white;--fg-inset:#f6f8fa;--bg-inset:#f6f8fa;--fg-transparent:rgba(0, 0, 0, 0);--bg-transparent:rgba(0, 0, 0, 0)}.color-fg-muted{color:var(--fg-muted)}.color-bg-muted{background-color:var(--bg-muted)}.color-fg-subtle{color:var(--fg-subtle)}.color-bg-subtle{background-color:var(--bg-subtle)}.color-fg-success{color:var(--fg-success)}.color-bg-success{background-color:var(--bg-success)}.color-fg-attention{color:var(--fg-attention)}.color-bg-attention{background-color:var(--bg-attention)}.color-fg-severe{color:var(--fg-severe)}.color-bg-severe{background-color:var(--bg-severe)}.color-fg-danger{color:var(--fg-danger)}.color-bg-danger{background-color:var(--bg-danger)}.color-fg-open{color:var(--fg-open)}.color-bg-open{background-color:var(--bg-open)}.color-fg-closed{color:var(--fg-closed)}.color-bg-closed{background-color:var(--bg-closed)}.color-fg-done{color:var(--fg-done)}.color-bg-done{background-color:var(--bg-done)}.color-fg-sponsors{color:var(--fg-sponsors)}.color-bg-sponsors{background-color:var(--bg-sponsors)}.color-fg-overlay{color:var(--fg-overlay)}.color-bg-overlay{background-color:var(--bg-overlay)}.color-fg-inset{color:var(--fg-inset)}.color-bg-inset{background-color:var(--bg-inset)}.color-fg-transparent{color:var(--fg-transparent)}.color-bg-transparent{background-color:var(--bg-transparent)}.dark{--fg-default:#1f2328;--fg-muted:#656d76;--fg-subtle:#6e7781;--fg-accent:#0969da;--fg-success:#1a7f37;--fg-attention:#9a6700;--fg-severe:#bc4c00;--fg-danger:#d1242f;--fg-open:#1a7f37;--fg-closed:#d1242f;--fg-done:#8250df;--fg-sponsors:#bf3989;--fg-emphasis:white;--bg-emphasis:#0969da;--bg-default:white;--bg-overlay:white;--bg-inset:#f6f8fa}.color-fg-inherit{color:inherit!important}:root{--gap:24px;--gap2:calc(var(--gap) / 2);--gap3:calc(var(--gap) / 3);--content-gap:20px;--content-gap2:10px;--nav-width:1024px;--main-width:960px;--header-height:60px;--nav-height:44px;--footer-height:60px;--radius:8px;--theme:white;--entry:white;--primary:#1e1e1e;--secondary:#6c6c6c;--tertiary:#d6d6d6;--content:#1f1f1f;--hljs-bg:#1c1d21;--code-bg:whitesmoke;--border:#eeeeee}.dark{--theme:#1d1e20;--entry:#2e2e33;--primary:#dadadb;--secondary:#9b9c9d;--tertiary:#414244;--content:#c4c4c5;--hljs-bg:#2e2e33;--code-bg:#37383e;--border:#333333}header{border-bottom:1px solid #ddd;padding:0 32px;font-size:12px;height:44px;display:flex;flex-direction:row;place-items:center}header>span,header>nav>span{font-size:21px}header.double-nav-top{color:var(--fg-double-nav-top);background-color:var(--bg-double-nav-top);backdrop-filter:saturate(1.8) blur(20px)}header.double-nav-top.emerald{color:var(--fg-double-nav-green);background-color:var(--bg-double-nav-green)}header.double-nav-top nav{width:100%}header.double-nav-top nav>span{font-size:14px}header.double-nav-top a{color:#fffc}header ul{display:flex;flex-direction:row}nav,.nav{max-width:calc(var(--nav-width) + var(--gap) * 2);margin-inline-start:auto;margin-inline-end:auto;width:100%;line-height:var(--nav-height);display:flex;flex-direction:row;justify-content:space-between;flex-wrap:wrap}.logo{font-size:24px;font-weight:700;margin:auto var(--gap)}.main.menu{display:flex;font-weight:300;margin:auto var(--gap)}.main.menu li+li{margin-inline-start:var(--gap2)}.large-heading{font-size:36px}.content,main,.container{position:relative;max-width:calc(var(--main-width) + var(--gap) * 2);margin:auto;padding:var(--gap)}main{min-height:calc(100vh - var(--header-height) - var(--footer-height) - 5px)}footer{background-color:var(--bg-footer);color:var(--fg-footer);min-height:80vh}footer a,footer a:visited{color:var(--fg-footer)}.flex{display:flex}.flex-1{flex:1}.flex-vertical,.flex-column{display:flex;flex-direction:column}.flex-horizontal,.flex-row{display:flex;flex-direction:row}a,a:visited{color:#333}li>a{display:inline-block;padding:0 var(--gap2)}li>a:hover{background-color:#0003}.main.menu li>a:hover{border-bottom:1px solid var(--color-attention)}:root{--color-btn-border:#4444}button,.btn,[type=button],[type=submit],[type=reset]{position:relative;display:inline-block;padding:5px 16px;font-size:14px;font-weight:var(--base-text-weight-medium, 500);line-height:20px;white-space:nowrap;vertical-align:middle;cursor:pointer;user-select:none;border:1px solid;border-radius:6px;appearance:none;color:var(--button-default-fgColor-rest, var(--color-btn-text));background-color:var(--button-default-bgColor-rest, var(--color-btn-bg));border-color:var(--button-default-borderColor-rest, var(--color-btn-border));box-shadow:var(--button-default-shadow-resting, var(--color-btn-shadow)),var(--button-default-shadow-inset, var(--color-btn-inset-shadow));transition:80ms cubic-bezier(.33,1,.68,1);transition-property:color,background-color,box-shadow,border-color}button:hover,.btn:hover,[type=button]:hover,[type=submit]:hover,[type=reset]:hover{background-color:#0000000d;box-shadow:2px #2222}button:active,.btn:active,[type=button]:active,[type=submit]:active,[type=reset]:active{background-color:#00000014;box-shadow:2px #ccc,2px #fff}.pad-18{padding:18px}p{padding-bottom:18px} diff --git a/dist/cdn/main.js b/dist/cdn/main.js deleted file mode 100644 index e69de29..0000000 diff --git a/fonts/Inter-Black.woff2 b/fonts/Inter-Black.woff2 new file mode 100644 index 0000000..f7b1e74 Binary files /dev/null and b/fonts/Inter-Black.woff2 differ diff --git a/fonts/Inter-Bold.woff2 b/fonts/Inter-Bold.woff2 new file mode 100644 index 0000000..78807d4 Binary files /dev/null and b/fonts/Inter-Bold.woff2 differ diff --git a/fonts/Inter-Medium.woff2 b/fonts/Inter-Medium.woff2 new file mode 100644 index 0000000..871ce4c Binary files /dev/null and b/fonts/Inter-Medium.woff2 differ diff --git a/fonts/Inter-SemiBold.woff2 b/fonts/Inter-SemiBold.woff2 new file mode 100644 index 0000000..ece5204 Binary files /dev/null and b/fonts/Inter-SemiBold.woff2 differ diff --git a/fonts/SFPRODISPLAYREGULAR.woff b/fonts/SFPRODISPLAYREGULAR.woff deleted file mode 100644 index ce0a316..0000000 Binary files a/fonts/SFPRODISPLAYREGULAR.woff and /dev/null differ diff --git a/fonts/material-symbols.woff2 b/fonts/material-symbols.woff2 new file mode 100644 index 0000000..0348bd2 Binary files /dev/null and b/fonts/material-symbols.woff2 differ diff --git a/package.json b/package.json index bf1e246..180cc08 100644 --- a/package.json +++ b/package.json @@ -1,14 +1,11 @@ { - "name": "emeraldcss", - "version": "1.0.2", + "name": "garnetcss", + "version": "1.0.0", "type": "module", - "description": "EmeraldCSS: An opinionated, semantic, modern CSS framework", - "main": "dist/cdn/main.css", + "description": "Enterprise CSS based on emeraldcss", + "main": "./dist/cdn/main.css", "scripts": { - "start": "sergeant emeraldcss && cp ../dist/emeraldcss/main.css ./dist/cdn/", - "dev": "sergeant emeraldcss --serve", - "install-deno": "curl -fsSL https://deno.land/install.sh | sh", - "install": "deno install -A -f https://cdn.jsdelivr.net/gh/scriptmaster/sergeant@1.2.0/sergeant.ts" + "test": "echo \"Error: no test specified\" && exit 1" }, "exports": { ".": "./dist/cdn/main.css", @@ -19,9 +16,12 @@ }, "repository": { "type": "git", - "url": "https://github.com/scriptmaster/emeraldcss.git" + "url": "https://git@github.com/scriptmaster/garnetcss.git" }, "keywords": [ + "garnet", + "garnetcss", + "degarnet", "emerald", "emeraldcss", "css", @@ -30,7 +30,10 @@ "scriptmaster", "emerald-css", "emerald_css", - "emerald-styles" + "emerald-styles", + "degarnet-css", + "garnet_css", + "garnet-styles" ], "author": "https://github.com/scriptmaster", "license": "ISC",