Improved website layout
This commit is contained in:
parent
15d990a67c
commit
af7b3dc54b
6 changed files with 165 additions and 114 deletions
|
|
@ -8,7 +8,7 @@
|
|||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content" id="app"></div>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="web/ts/App.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
116
web/App.vue
116
web/App.vue
|
|
@ -1,6 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
|
||||
import Header from "./components/Header.vue";
|
||||
import Settings from "./components/Settings.vue";
|
||||
import Preview from "./components/Preview.vue";
|
||||
|
||||
</script>
|
||||
|
||||
|
|
@ -8,111 +10,19 @@ import Settings from "./components/Settings.vue";
|
|||
|
||||
<div>
|
||||
|
||||
<header>
|
||||
<h1>
|
||||
<span class="color">Synergy</span> UI
|
||||
</h1>
|
||||
<p>Simple framework with CSS-only UI components</p>
|
||||
</header>
|
||||
<Header />
|
||||
|
||||
<Settings />
|
||||
<section class="sec-bg" id="settings">
|
||||
<div class="inner">
|
||||
<Settings />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="preview">
|
||||
|
||||
<form class="form" @submit.prevent>
|
||||
|
||||
<div class="inp">
|
||||
<input type="text" placeholder=" ">
|
||||
<label>Name</label>
|
||||
</div>
|
||||
|
||||
<div class="inp">
|
||||
<input type="text" placeholder=" ">
|
||||
<label>Surname</label>
|
||||
</div>
|
||||
|
||||
<div class="inp select">
|
||||
<select>
|
||||
<option disabled>Disabled</option>
|
||||
<option>Guest</option>
|
||||
<option>User</option>
|
||||
<option>Administrator</option>
|
||||
</select>
|
||||
<label>Role</label>
|
||||
</div>
|
||||
|
||||
<div class="inp">
|
||||
<textarea placeholder=" ">Some very long text...</textarea>
|
||||
<label>Long text</label>
|
||||
</div>
|
||||
|
||||
<div class="toggle-text">
|
||||
<label for="toggle1">Toggle me! I'm a toggle.</label>
|
||||
<div class="toggle">
|
||||
<input id="toggle1" type="checkbox">
|
||||
<div class="indicator"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cbox-row">
|
||||
<label class="cbox">
|
||||
<input type="radio" name="radios" checked>
|
||||
<span>Radio 1</span>
|
||||
</label>
|
||||
|
||||
<label class="cbox">
|
||||
<input type="radio" name="radios">
|
||||
<span>Radio 2</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label class="cbox">
|
||||
<input type="checkbox">
|
||||
<span>Check me!</span>
|
||||
</label>
|
||||
|
||||
<div class="tabs">
|
||||
<label>
|
||||
<input type="radio" name="tabs" checked>
|
||||
<div>Home</div>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="tabs">
|
||||
<div>Account</div>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="tabs">
|
||||
<div>Settings</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="tabs tabs-full">
|
||||
<label>
|
||||
<input type="radio" name="tabs2" checked>
|
||||
<div>Home</div>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="tabs2">
|
||||
<div>Account</div>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="tabs2">
|
||||
<div>Settings</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="btn-row">
|
||||
<button class="btn btn-primary">
|
||||
Send
|
||||
</button>
|
||||
<button type="reset" class="btn">
|
||||
Reset
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<section>
|
||||
<div class="inner" id="preview">
|
||||
<Preview />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
21
web/components/Header.vue
Normal file
21
web/components/Header.vue
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<script setup lang="ts">
|
||||
|
||||
import Logo from "./Logo.vue";
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header>
|
||||
<div class="inner">
|
||||
<div class="grid">
|
||||
<Logo />
|
||||
<h1>Simple framework with CSS-only <span class="color">UI components</span></h1>
|
||||
<p>Modern ready-to-use components made only with CSS.</p>
|
||||
<div class="btn-row" style="margin: 30px 0;">
|
||||
<a href="#settings" class="btn btn-primary">Get started</a>
|
||||
<a href="#preview" class="btn">Preview</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
12
web/components/Logo.vue
Normal file
12
web/components/Logo.vue
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<template>
|
||||
<svg class="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 74.08 18.52">
|
||||
<defs>
|
||||
<linearGradient id="a">
|
||||
<stop offset="0" style="stop-color:var(--synergy-border);stop-opacity:1"/>
|
||||
<stop offset="1" style="stop-color:var(--synergy-border-active);stop-opacity:1"/>
|
||||
</linearGradient>
|
||||
<linearGradient xlink:href="#a" id="b" x1="48.66" x2="46.25" y1="1.83" y2="22.35" gradientTransform="translate(-.05 .57)" gradientUnits="userSpaceOnUse"/>
|
||||
</defs>
|
||||
<path d="M13.03 5.65c-3.06.08-6.19 1.7-7.72 5.95 3.22-3.41 6.6-6.18 11.34-3.53-2.83.58-4.62 2.51-5.67 4.58-2.94 5.75-6.72 2.05-8.41-.3 1.76 7.13 7.4 5.82 9.62 1.32 1.47-2.97 4.5-5.9 8.75-3.04-.15-2.65-3.97-5.08-7.9-4.98Zm20.01 3.91c-2.16 0-3.6 1.11-3.6 2.8 0 3.1 4.74 2.09 4.74 3.93 0 .65-.57 1.07-1.7 1.07-.82 0-1.82-.2-2.7-.57l-.49 1.36c.97.43 2.07.7 3.12.7 2.21 0 3.54-1.08 3.54-2.78 0-3.26-4.77-2.13-4.77-3.95 0-.7.64-1.08 1.76-1.08.76 0 1.58.14 2.22.39l.48-1.35a6.58 6.58 0 0 0-2.6-.52Zm-13.46 1.59c-1.9 0-3.87 1.45-4.99 3.7-1.47 2.97-4.48 5.9-8.74 3.04.26 4.7 12.13 8.75 15.62-.97-3.22 3.41-6.6 6.18-11.33 3.53 2.83-.58 4.61-2.51 5.67-4.58 2.94-5.75 6.72-2.05 8.41.3-.88-3.56-2.73-5.02-4.64-5.02zm34.47 1.11c-1.89 0-3.15 1.36-3.15 3.32 0 2.04 1.32 3.27 3.48 3.27.75 0 1.55-.14 2.24-.43l-.36-1.16c-.51.21-1.07.33-1.6.33-1.15 0-1.84-.53-2.04-1.56h4.1c.04-.26.07-.66.07-.96 0-1.72-1.06-2.8-2.74-2.8zm11.97 0c-1.74 0-2.94 1.33-2.94 3.35 0 1.97 1.12 3.24 2.73 3.24.7 0 1.29-.24 1.75-.67v.52c0 1.1-.6 1.67-1.73 1.67a4.8 4.8 0 0 1-1.75-.38l-.33 1.25c.68.32 1.37.48 2.09.48 2.02 0 3.35-1.24 3.35-3.09V12.4H68l-.2.58a2.35 2.35 0 0 0-1.79-.7zm-18.73.03a3 3 0 0 0-2.04.8l-.29-.7h-1.18v6.33h1.65v-4.5a2 2 0 0 1 1.29-.49c.8 0 1.23.46 1.23 1.32v3.67h1.66v-3.9c0-1.57-.88-2.53-2.32-2.53zm14.33.05c-.76 0-1.46.37-1.94 1l-.16-.95h-1.31v6.33h1.65v-4.1c.38-.46.92-.72 1.5-.72.27 0 .57.05.8.13l.4-1.52c-.28-.1-.6-.17-.94-.17zm-25.3.05 2.45 6.33-1.14 2.83h1.78l1.02-2.83 2.44-6.33H41.2l-1.58 4.82-1.48-4.82Zm33.78 0 2.46 6.33-1.15 2.83h1.79l1.01-2.83 2.44-6.33H75l-1.58 4.82-1.49-4.82zm-16.16 1.16c.82 0 1.29.52 1.29 1.46h-2.66c.1-.96.57-1.46 1.37-1.46zm12.32.12c.55 0 1 .23 1.3.66v2.58c-.29.35-.71.55-1.23.55-.96 0-1.57-.76-1.57-1.96 0-1.12.56-1.83 1.5-1.83z" style="opacity:1;fill:url(#b);stroke-width:.342417" transform="translate(-2.57 -4.99)"/>
|
||||
</svg>
|
||||
</template>
|
||||
96
web/components/Preview.vue
Normal file
96
web/components/Preview.vue
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
<template>
|
||||
<div class="preview">
|
||||
<form class="form" @submit.prevent>
|
||||
|
||||
<div class="inp">
|
||||
<input type="text" placeholder=" ">
|
||||
<label>Name</label>
|
||||
</div>
|
||||
|
||||
<div class="inp">
|
||||
<input type="text" placeholder=" ">
|
||||
<label>Surname</label>
|
||||
</div>
|
||||
|
||||
<div class="inp select">
|
||||
<select>
|
||||
<option disabled>Disabled</option>
|
||||
<option>Guest</option>
|
||||
<option>User</option>
|
||||
<option>Administrator</option>
|
||||
</select>
|
||||
<label>Role</label>
|
||||
</div>
|
||||
|
||||
<div class="inp">
|
||||
<textarea placeholder=" ">Some very long text...</textarea>
|
||||
<label>Long text</label>
|
||||
</div>
|
||||
|
||||
<div class="toggle-text">
|
||||
<label for="toggle1">Toggle me! I'm a toggle.</label>
|
||||
<div class="toggle">
|
||||
<input id="toggle1" type="checkbox">
|
||||
<div class="indicator"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cbox-row">
|
||||
<label class="cbox">
|
||||
<input type="radio" name="radios" checked>
|
||||
<span>Radio 1</span>
|
||||
</label>
|
||||
|
||||
<label class="cbox">
|
||||
<input type="radio" name="radios">
|
||||
<span>Radio 2</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label class="cbox">
|
||||
<input type="checkbox">
|
||||
<span>Check me!</span>
|
||||
</label>
|
||||
|
||||
<div class="tabs">
|
||||
<label>
|
||||
<input type="radio" name="tabs" checked>
|
||||
<div>Home</div>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="tabs">
|
||||
<div>Account</div>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="tabs">
|
||||
<div>Settings</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="tabs tabs-full">
|
||||
<label>
|
||||
<input type="radio" name="tabs2" checked>
|
||||
<div>Home</div>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="tabs2">
|
||||
<div>Account</div>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="tabs2">
|
||||
<div>Settings</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="btn-row">
|
||||
<button class="btn btn-primary">
|
||||
Send
|
||||
</button>
|
||||
<button type="reset" class="btn">
|
||||
Reset
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -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);}
|
||||
Loading…
Reference in a new issue