D3vugu-components/page-home.vugu
David Vogel 6fbc00655f Rework colors and theming
- Add example colors page
- Store all theme colors in CSS variables
- Add layer container component
- Use accent color for active pagination page
- Automatically use layer-1 color in sidebar, sidebar menu and code containers
- Adjust tag padding
- Add base color scheme/theme
2023-05-18 13:55:48 +02:00

70 lines
2.4 KiB
Plaintext

<div>
<layout:Container>
<h1>Home</h1>
<p>Lorem ipsum dolor sit am et</p>
<view:Code>
asdfefefeaf afe aef aef aef aef aef<br>
asdwfaefa efae fae faef ae<br>
u4iewgooijqoie ioigq oiegq eog qoeg
</view:Code>
<h2>Buttons</h2>
<input:Button>
<vg-slot name="SymbolSlot"><icons:LGlobe></icons:LGlobe></vg-slot>
<vg-slot name="DefaultSlot">Some Button</vg-slot>
</input:Button>
<input:Button>
<vg-slot name="SymbolSlot"><icons:LGlobe></icons:LGlobe></vg-slot>
<vg-slot name="DefaultSlot">Some Button</vg-slot>
</input:Button>
<input:Button>
<vg-slot name="SymbolSlot"><icons:LGlobe></icons:LGlobe></vg-slot>
<vg-slot name="DefaultSlot">Some Button</vg-slot>
</input:Button>
<p>Some <view:CodeInline>inlined code</view:CodeInline> in this line!</p>
<h2>Tags</h2>
This is some tag: <view:Tag>Some Tag</view:Tag> and <view:Tag>Another Tag</view:Tag>
<h2>List Container</h2>
<layout:ListContainer>
<layout:LayerContainer vg-for="i := 0; i < 5; i++" class="list-item d3c-color-layer-1">
<icons:LInfoCircle></icons:LInfoCircle>
<div vg-content="i"></div>
<div>Some Content!</div>
</layout:LayerContainer>
</layout:ListContainer>
<h2>Navigation buttons</h2>
<div style="display: flex; flex-wrap: wrap; gap: 0.5em; margin: 0.5em 0;">
<input:Button class="d3c-button-vertical" style="margin: 0;">
<vg-slot name="SymbolSlot"><icons:LGlobe style="font-size: 2em;"></icons:LGlobe></vg-slot>
<vg-slot name="DefaultSlot">Navigation 1</vg-slot>
</input:Button>
<input:Button class="d3c-button-vertical" style="margin: 0;">
<vg-slot name="SymbolSlot"><icons:LGlobe style="font-size: 2em;"></icons:LGlobe></vg-slot>
<vg-slot name="DefaultSlot">Navigation 2</vg-slot>
</input:Button>
<input:Button class="d3c-button-vertical" style="margin: 0;">
<vg-slot name="SymbolSlot"><icons:LGlobe style="font-size: 2em;"></icons:LGlobe></vg-slot>
<vg-slot name="DefaultSlot">Navigation 3</vg-slot>
</input:Button>
</div>
</layout:Container>
</div>
<style>
.list-item {
display: flex;
flex-wrap: wrap;
gap: 1em;
}
</style>
<script type="application/x-go">
import (
"git.d3nexus.de/Dadido3/D3vugu-components/components/layout"
"git.d3nexus.de/Dadido3/D3vugu-components/components/view"
"git.d3nexus.de/Dadido3/D3vugu-components/components/input"
"git.d3nexus.de/Dadido3/D3vugu-components/icons"
)
type PageHome struct {}
</script>