Compare commits
2 Commits
3ab565d1e0
...
d4f609778c
Author | SHA1 | Date |
---|---|---|
DutchEllie | d4f609778c | |
DutchEllie | 553182ea73 |
|
@ -0,0 +1,7 @@
|
||||||
|
<script>
|
||||||
|
export let text = '';
|
||||||
|
</script>
|
||||||
|
<div class="w-full h-min bg-red-500">
|
||||||
|
<span class="ml-5">{text}</span>
|
||||||
|
<hr class="w-full">
|
||||||
|
</div>
|
|
@ -1,8 +1,8 @@
|
||||||
<script>
|
<script>
|
||||||
import Button from './navbutton.svelte'
|
import Button from './navbutton.svelte'
|
||||||
</script>
|
</script>
|
||||||
<div class="h-16 align-middle grid grid-cols-4">
|
<div class="h-16 align-middle grid grid-cols-7">
|
||||||
<div class="h-16 col-start-1 col-span-1 flex flex-row flex-wrap">
|
<div class="h-16 col-start-2 col-span-2 flex flex-row flex-wrap">
|
||||||
<img
|
<img
|
||||||
class="h-4/5 ml-20 my-auto"
|
class="h-4/5 ml-20 my-auto"
|
||||||
src="https://dutchellie.nl/DutchEllie/proper-website-2/raw/branch/main/web/static/images/icon.png"
|
src="https://dutchellie.nl/DutchEllie/proper-website-2/raw/branch/main/web/static/images/icon.png"
|
||||||
|
@ -13,8 +13,8 @@
|
||||||
<p class="h-min text-xs text-slate-400">Surviving the rewriting</p>
|
<p class="h-min text-xs text-slate-400">Surviving the rewriting</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-start-2 col-end-5">
|
<div class="col-start-5 col-end-7 grid grid-cols-6">
|
||||||
<nav class="h-full flex items-center gap-2 text-slate-200 text-md">
|
<nav class="h-full flex items-end col-start-5 col-span-2 gap-2 text-slate-200 text-md">
|
||||||
<Button link="/" text="Home"/>
|
<Button link="/" text="Home"/>
|
||||||
<Button link="/about" text="About"/>
|
<Button link="/about" text="About"/>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
@ -0,0 +1,3 @@
|
||||||
|
<div class="h-full w-full grid grid-cols-7 gap-3">
|
||||||
|
<slot/>
|
||||||
|
</div>
|
|
@ -4,7 +4,33 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<a href="{link}">
|
<a href="{link}">
|
||||||
<button class="bg-slate-700 py-2 px-4 rounded-xl hover:ring">
|
<button class="text-slate-50 py-2 px-4 font-montserrat font-light link-underline">
|
||||||
{text}
|
{text}
|
||||||
</button>
|
</button>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.link-underline {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-underline:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
transform: scaleX(0);
|
||||||
|
height: 2px;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: #5EECBE;
|
||||||
|
transform-origin: bottom right;
|
||||||
|
transition: transform 0.25s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-underline:hover:after {
|
||||||
|
transform: scaleX(1);
|
||||||
|
transform-origin: bottom left;
|
||||||
|
background-color: #638CF6;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -1,17 +1,21 @@
|
||||||
<script>
|
<script>
|
||||||
import '../app.css';
|
import '../app.css';
|
||||||
import Header from '../components/header.svelte'
|
import Header from '../components/header.svelte';
|
||||||
|
import AlertHeader from '../components/alert-header.svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="bg-gradient-to-tr from-[#070F1A] to-[#0D234C] w-screen h-screen">
|
<div class="flex flex-col bg-gradient-to-tr from-[#070F1A] to-[#0D234C] w-screen h-screen text-slate-100">
|
||||||
<!-- Header -->
|
<!-- Possible alert header -->
|
||||||
<Header/>
|
<!--<AlertHeader text='ALERT'/>-->
|
||||||
<slot />
|
<!-- Header -->
|
||||||
|
<Header />
|
||||||
|
<!-- Main content -->
|
||||||
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- background-image: linear-gradient(to right top, #051937, #1a325b, #304d82, #466aab, #5d88d6);
|
<!-- background-image: linear-gradient(to right top, #051937, #1a325b, #304d82, #466aab, #5d88d6);
|
||||||
https://mycolor.space/gradient?ori=to+right+top&hex=%23051937&hex2=%235D88D6&sub=1
|
https://mycolor.space/gradient?ori=to+right+top&hex=%23051937&hex2=%235D88D6&sub=1
|
||||||
-->
|
-->
|
||||||
<style>
|
<style>
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,300;8..144,400;8..144,500&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200&family=Roboto+Flex:opsz,wght@8..144,300;8..144,400;8..144,500&display=swap');
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1,5 +1,9 @@
|
||||||
|
<script>
|
||||||
|
import Maincontent from "../components/maincontent.svelte";
|
||||||
|
</script>
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
<title>Welcome</title>
|
<title>Welcome</title>
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
Home page
|
<Maincontent>
|
||||||
|
</Maincontent>
|
|
@ -6,6 +6,13 @@ module.exports = {
|
||||||
extend: {
|
extend: {
|
||||||
fontFamily: {
|
fontFamily: {
|
||||||
sans: ['Roboto Flex', ...defaultTheme.fontFamily.sans],
|
sans: ['Roboto Flex', ...defaultTheme.fontFamily.sans],
|
||||||
|
montserrat: ['Montserrat', ...defaultTheme.fontFamily.sans]
|
||||||
|
},
|
||||||
|
gridTemplateRows: {
|
||||||
|
'12': 'repeat(12, minmax(0, 1fr))',
|
||||||
|
},
|
||||||
|
gridRow: {
|
||||||
|
'span-11': 'span 11 / span 11',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
container: {
|
container: {
|
||||||
|
|
Loading…
Reference in New Issue