diff --git a/index.html b/index.html index 26d6c6c..6b64a10 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ -
+
\ No newline at end of file diff --git a/web/App.vue b/web/App.vue index 603a712..04302b5 100644 --- a/web/App.vue +++ b/web/App.vue @@ -1,6 +1,8 @@ @@ -8,111 +10,19 @@ import Settings from "./components/Settings.vue";
-
-

- Synergy UI -

-

Simple framework with CSS-only UI components

-
+
- +
+
+ +
+
-
- -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- -
- -
-
-
- -
- - - -
- - - -
- - - -
- -
- - - -
- -
- - -
- -
- -
+
+
+ +
+
diff --git a/web/components/Header.vue b/web/components/Header.vue new file mode 100644 index 0000000..8043e6e --- /dev/null +++ b/web/components/Header.vue @@ -0,0 +1,21 @@ + + + diff --git a/web/components/Logo.vue b/web/components/Logo.vue new file mode 100644 index 0000000..13a009c --- /dev/null +++ b/web/components/Logo.vue @@ -0,0 +1,12 @@ + diff --git a/web/components/Preview.vue b/web/components/Preview.vue new file mode 100644 index 0000000..bd192bf --- /dev/null +++ b/web/components/Preview.vue @@ -0,0 +1,96 @@ + diff --git a/web/css/demo.css b/web/css/demo.css index 773810d..417dfd4 100644 --- a/web/css/demo.css +++ b/web/css/demo.css @@ -1,17 +1,33 @@ +:root { + --site-padding: 40px; +} + +@media screen and (max-width: 700px) { + :root { + --site-padding: 20px; + } +} + html {background: var(--synergy-site-bg);} html, body {color: var(--synergy-text-color); font-family: Cantarell, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Open Sans, Helvetica Neue, Arial, Noto Sans, Roboto, sans-serif; font-size: 18px; margin: 0;} *, *::before, *::after {box-sizing: border-box;} -header {margin: 70px 0; text-align: center;} -header > * {margin: 30px 0;} -header h1 {font-size: 50px;} +:is(header, section, footer) > .inner {margin: 70px auto; padding: 0 var(--site-padding); max-width: 1000px;} + +.logo {max-width: 200px;} + +header > * {margin: 15px 0;} header h1 .color {background-clip: text; -webkit-background-clip: text; background-image: linear-gradient(10deg, var(--synergy-border-active), var(--synergy-border)); color: transparent;} +header .grid {max-width: 450px;} -.settings {margin: 70px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start;} +.sec-bg {background-color: var(--synergy-tab-highlight); padding: .1px; border: var(--synergy-border-width) solid var(--synergy-border); border-right-width: 0; border-left-width: 0;} + +.settings {display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start;} .settings > * {position: sticky; top: 0;} .settings h2 {text-align: center;} +.settings > * > :first-child {margin-top: 0;} .settings .variables {display: grid; gap: 10px 20px; align-items: center; grid-template-columns: max-content 1fr;} .settings .variables > * {display: flex; gap: 10px; align-items: center;} @@ -21,7 +37,7 @@ header h1 .color {background-clip: text; -webkit-background-clip: text; backgrou .settings .components .item {margin-bottom: 10px;} .settings .components .btn-row {margin-top: 15px;} -.settings .components .box {margin-top: 15px; background-color: var(--synergy-tab-highlight); padding: 15px; border-radius: var(--synergy-border-radius);} +.settings .components .box {margin-top: 15px; background-color: var(--synergy-bg); border: var(--synergy-border-width) solid var(--synergy-border); padding: 15px; border-radius: var(--synergy-border-radius);} .settings .components .btn small {display: block; font-weight: 400; font-size: 11px; margin-top: 3px;} .settings .components .export .btn-row {margin: 15px 0;} @@ -35,8 +51,6 @@ header h1 .color {background-clip: text; -webkit-background-clip: text; backgrou .settings .variables label {margin: 20px 0 10px;} } -.content {padding: 0 20px; margin: auto; max-width: 1000px;} - .preview {margin: 70px 0;} .form {display: flex; flex-direction: column; gap: 15px; max-width: 450px;} @@ -44,10 +58,8 @@ header h1 .color {background-clip: text; -webkit-background-clip: text; backgrou .colori {aspect-ratio: 1 / 1; height: 34px; border-radius: var(--synergy-border-radius);} +a {color: inherit;} /* Synergy expansions */ .inp.inp-small input {padding: 5px 9px; font-size: .9em;} - -a {color: var(--synergy-btn-primary-bg);} -a:hover {color: var(--synergy-btn-primary-bg-hover);} \ No newline at end of file