mirror of
https://github.com/danbulant/design
synced 2026-06-18 13:51:15 +00:00
Complete redesign
This commit is contained in:
Daniel Bulant
parent
4df5b6a12e
commit
4e5f850b8a
18 changed files with 563 additions and 407 deletions
BIN
public/discord.png
Normal file
BIN
public/discord.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
public/github.png
Normal file
BIN
public/github.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -1,14 +1,19 @@
|
|||
html, body {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #333;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
html {
|
||||
background-image: linear-gradient(to top, rgb(242,210,223), transparent min(180vh, 1080px));
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
@ -21,7 +26,8 @@ h1 {
|
|||
}
|
||||
|
||||
a {
|
||||
color: rgb(0,100,200);
|
||||
/* color: rgb(0,100,200); */
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -30,7 +36,8 @@ a:hover {
|
|||
}
|
||||
|
||||
a:visited {
|
||||
color: rgb(0,80,160);
|
||||
color: inherit;
|
||||
/* color: rgb(0,80,160); */
|
||||
}
|
||||
|
||||
label {
|
||||
|
|
|
|||
|
|
@ -11,6 +11,8 @@
|
|||
<link rel='stylesheet' href='/build/bundle.css'>
|
||||
|
||||
<script defer src='/build/bundle.js'></script>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
|
|||
BIN
public/logo.png
Normal file
BIN
public/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
259
src/App.svelte
259
src/App.svelte
|
|
@ -1,12 +1,13 @@
|
|||
<script>
|
||||
import Bar from "./components/bar.svelte";
|
||||
import Button from "./components/button.svelte";
|
||||
import Flexbox from "./components/flexbox.svelte";
|
||||
import Link from "./components/link.svelte";
|
||||
import Navbar from "./components/navbar.svelte";
|
||||
import Contact from "./components/contact.svelte";
|
||||
import Hero from "./components/hero.svelte";
|
||||
import Posts from "./components/posts.svelte";
|
||||
import Project from "./components/project.svelte";
|
||||
import Separator from "./components/separator.svelte";
|
||||
|
||||
import Split from "./components/split.svelte";
|
||||
import darkmode from "./stores/darkmode";
|
||||
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
|
|
@ -14,119 +15,157 @@ import Flexbox from "./components/flexbox.svelte";
|
|||
<meta name="description" content="Homepage of danbulant.eu - List of my projects, contact info.">
|
||||
</svelte:head>
|
||||
|
||||
<Navbar darkmode={$darkmode}>
|
||||
<Link href="/" colored>
|
||||
Daniel Bulant
|
||||
</Link>
|
||||
<Separator />
|
||||
<Link href="#contact" padded>
|
||||
Contact
|
||||
</Link>
|
||||
<Button bind:value={$darkmode} outline={$darkmode}>{$darkmode ? "Dark" : "Light"} mode</Button>
|
||||
</Navbar>
|
||||
|
||||
<main class:darkmode={$darkmode}>
|
||||
<h1 class="center">Daniel Bulant</h1>
|
||||
|
||||
<section>
|
||||
<h2 class="center" id="projects">Projects</h2>
|
||||
|
||||
<Project title="igni">
|
||||
<p slot="description">
|
||||
igni is a universal discord bot with advanced moderation, advanced configuration and unique command handling. It can replace majority of other bots and is being actively worked on.
|
||||
</p>
|
||||
<img draggable={false} class="preview" src="igni.png" alt="igni avatar" slot="preview">
|
||||
<div slot="actions">
|
||||
<Button newTab href="https://discordbotlist.com/bots/igni">More information</Button>
|
||||
<Button newTab outline href="https://discord.com/oauth2/authorize?client_id=739864286775738399&scope=bot&permissions=1039199350">Add igni to your server</Button>
|
||||
</div>
|
||||
</Project>
|
||||
|
||||
<Project title="The Tutorials">
|
||||
<p slot="description">
|
||||
Czech tutorials, blog and news about node, php and scratch for everyone.
|
||||
</p>
|
||||
<img draggable={false} class="preview thetutorials" src="thetutorials.jpg" alt="The Tutorials logo" slot="preview">
|
||||
<div slot="actions">
|
||||
<Button newTab href="https://thetutorials.cz">Website</Button>
|
||||
<Button newTab outline href="https://youtube.com/thetutorials">Youtube channel</Button>
|
||||
</div>
|
||||
</Project>
|
||||
|
||||
<Project title="Learner">
|
||||
<div slot="description">
|
||||
Czech e-learning website and application, currently in closed beta.
|
||||
</div>
|
||||
<!-- <img draggable={false} src="https://learner.danbulant.eu/logo.png" alt="Learner logo" slot="preview" class="preview"> -->
|
||||
<div slot="actions">
|
||||
<Button newTab href="https://play.google.com/store/apps/details?id=cz.janrossler.learner">Application</Button>
|
||||
<Button newTab outline href="https://beta.learnerapp.eu">Website</Button>
|
||||
</div>
|
||||
</Project>
|
||||
|
||||
<Project title="Ice Productions">
|
||||
<div slot="description">
|
||||
Independent team of developers, worked on Aztec, browser and more.
|
||||
</div>
|
||||
<img draggable={false} src="/iceproductions.svg" alt="Ice Productions Logo" slot="preview" class="preview">
|
||||
<div slot="actions">
|
||||
<Button newTab href="https://iceproductions.dev">Website</Button>
|
||||
<Button newTab outline href="https://discord.gg/JUTFUKH">Discord server</Button>
|
||||
</div>
|
||||
</Project>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 id="contact">Contact info</h2>
|
||||
|
||||
<ul>
|
||||
<li>Discord - TechmandanCZ#0135, you can find me in my <Link href="https://discord.gg/EgBGYmA" colored>server</Link>.</li>
|
||||
<li>Github - <Link href="https://github.com/danbulant"> @danbulant </Link> </li>
|
||||
<li>Youtube - <Link href="https://youtube.com/thetutorials"> TheTutorials </Link> </li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
|
||||
<footer>
|
||||
<Flexbox>
|
||||
© Daniel Bulant {(new Date()).getFullYear()}.
|
||||
<Separator />
|
||||
<Link href="/"> danbulant.eu </Link>
|
||||
</Flexbox>
|
||||
</footer>
|
||||
<div class="bar">
|
||||
<Bar>
|
||||
<h3>Daniel Bulant</h3>
|
||||
<a href="#contact" class="big">Contact</a>
|
||||
<Split />
|
||||
<a href="#contact" class="small">Contact</a>
|
||||
<a href="mailto:danbulant@danbulant.eu" class="big">danbulant@danbulant.eu</a>
|
||||
</Bar>
|
||||
</div>
|
||||
<main>
|
||||
<Hero>
|
||||
<h1>I'm a young developer making <u>websites</u> and <u>discord bots</u>.</h1>
|
||||
<!-- <h3>To be used later</h3> -->
|
||||
<Button href="#projects">Check out my work</Button>
|
||||
</Hero>
|
||||
<div class="projects" id="projects">
|
||||
<div>
|
||||
<blockquote>
|
||||
I helped many projects come to life. Here are some examples:
|
||||
</blockquote>
|
||||
<Project link="https://learnerapp.eu" tags={["Website design", "Frontend"]}>
|
||||
<b>Learner</b> - A learning platform for students
|
||||
</Project>
|
||||
<Project link="https://thetutorials.cz" tags={["Writer", "Full stack"]}>
|
||||
<b>TheTutorials</b> - Czech tutorials and blog about programming
|
||||
</Project>
|
||||
</div>
|
||||
<div>
|
||||
<div class="pad"></div>
|
||||
<Project link="https://top.gg/bot/739864286775738399" tags={["Discord bot", "Backend"]}>
|
||||
<b>igni</b> - The universal discord bot
|
||||
</Project>
|
||||
<Project link={"data:text/plain,No website available yet"} tags={["Backend"]}>
|
||||
<b>Animasher</b> - Platform for creating and sharing animations
|
||||
</Project>
|
||||
</div>
|
||||
</div>
|
||||
<Posts />
|
||||
<div id="contact">
|
||||
<Contact />
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div class="bottombar">
|
||||
<Bar>
|
||||
<h3>Daniel Bulant</h3>
|
||||
<Split />
|
||||
<a href="https://github.com/shinoa-hiragi" target="_blank">
|
||||
<h3>
|
||||
Design by Carl Hansen
|
||||
</h3>
|
||||
</a>
|
||||
</Bar>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
main {
|
||||
min-height: calc(100vh - 50px);
|
||||
padding-bottom: 10px;
|
||||
margin: 0 min(50px, 5%) 0 min(50px, 5%);
|
||||
width: calc(100% - min(100px, 10%));
|
||||
}
|
||||
main section {
|
||||
max-width: 720px;
|
||||
margin: auto;
|
||||
padding: 0 20px;
|
||||
width: calc(100vw - 55px);
|
||||
.bar .small {
|
||||
display: none;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 20px;
|
||||
padding: 10px 20px;
|
||||
@media (max-width: 570px) {
|
||||
.bar .big {
|
||||
display: none;
|
||||
}
|
||||
.bar .small {
|
||||
display: initial;
|
||||
}
|
||||
}
|
||||
.darkmode {
|
||||
background: #242423;
|
||||
color: #E8EDDF;
|
||||
.projects, .bottombar {
|
||||
max-width: 1380px;
|
||||
}
|
||||
.center {
|
||||
text-align: center;
|
||||
.bottombar {
|
||||
margin: 30px auto 30px auto;
|
||||
width: calc(100% - min(100px, 10%));
|
||||
}
|
||||
img.preview {
|
||||
height: 18rem;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
@media (max-width: 520px) {
|
||||
.bottombar {
|
||||
margin: 30px 0 0 0;
|
||||
width: 100%;
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
img.preview.thetutorials {
|
||||
border-radius: 50%;
|
||||
height: 200px;
|
||||
width: auto;
|
||||
.bottombar h3 {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
.projects {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin: 0 20px 50px 20px;
|
||||
}
|
||||
@media (min-width: 1520px) {
|
||||
.projects {
|
||||
margin: 0 auto 50px auto;
|
||||
}
|
||||
}
|
||||
.projects > div {
|
||||
width: calc(50% - 40px);
|
||||
}
|
||||
.projects .pad {
|
||||
margin-top: 110px;
|
||||
}
|
||||
@media (max-width: 860px) {
|
||||
.projects > div {
|
||||
width: calc(100% - 80px);
|
||||
margin: auto;
|
||||
}
|
||||
.projects .pad {
|
||||
margin-top: 0px;
|
||||
}
|
||||
.projects blockquote {
|
||||
margin: 1em 0 1em 10px;
|
||||
}
|
||||
}
|
||||
.projects blockquote {
|
||||
font-size: 29px;
|
||||
}
|
||||
.bar {
|
||||
position: -webkit-sticky; /* Safari */
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: calc(100vw - 15px);
|
||||
max-width: 1920px;
|
||||
margin: 0 auto 30px auto;
|
||||
background: white;
|
||||
}
|
||||
.bar h3 {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
h1, h3 {
|
||||
color: #282B29;
|
||||
}
|
||||
h1 {
|
||||
font-size: 72px;
|
||||
}
|
||||
@media (max-width: 1100px) {
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
font-size: 29px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.bar a {
|
||||
color: #202020b2;
|
||||
}
|
||||
</style>
|
||||
18
src/components/bar.svelte
Normal file
18
src/components/bar.svelte
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<nav class="bar-component">
|
||||
<slot />
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
nav {
|
||||
width: calc(100% - 20px);
|
||||
border-radius: 5px;
|
||||
background: white;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
}
|
||||
:global(nav.bar-component > *) {
|
||||
margin: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,68 +1,37 @@
|
|||
<script>
|
||||
import darkmode from "../stores/darkmode";
|
||||
export var outline = false;
|
||||
export var href = null;
|
||||
export var value = null;
|
||||
export var newTab = false;
|
||||
|
||||
function click() {
|
||||
value = !value;
|
||||
}
|
||||
export var href = "";
|
||||
export var text = false;
|
||||
</script>
|
||||
|
||||
{#if href}
|
||||
<a {href} target={newTab ? "_blank" : undefined} class:darkmode={$darkmode} on:click={click} {...$$restProps} class:outline>
|
||||
<slot />
|
||||
</a>
|
||||
<a href={href} class="button" class:text><slot /></a>
|
||||
{:else}
|
||||
<button class:darkmode={$darkmode} on:click={click} {...$$restProps} class:outline>
|
||||
<slot />
|
||||
</button>
|
||||
<button on:click class:text><slot /></button>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
button.darkmode, a.darkmode {
|
||||
color: #f4f4f4;
|
||||
}
|
||||
button, a {
|
||||
margin: 2.5px 0;
|
||||
display: inline-block;
|
||||
color: #333;
|
||||
background-color: #f4f4f4;
|
||||
border: 1px solid #ccc;
|
||||
button, .button {
|
||||
background: #008EE8;
|
||||
border-radius: 5px;
|
||||
padding: 5px 10px;
|
||||
box-shadow: 0 0 0 black;
|
||||
background: #F5CB5C;
|
||||
transition: box-shadow 0.1s, background 0.3s;
|
||||
padding: 10px 15px;
|
||||
color: white;
|
||||
}
|
||||
.outline {
|
||||
position: relative;
|
||||
background: transparent;
|
||||
z-index: 1;
|
||||
}
|
||||
.outline::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: #F5CB5C;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
transition: width .3s, border-radius .3s, background-color .3s;
|
||||
z-index: -1;
|
||||
}
|
||||
.outline:hover::before, .outline:focus::before {
|
||||
width: 100%;
|
||||
background-color: #e0a500;
|
||||
}
|
||||
a:hover, a:focus, button:hover, button:focus {
|
||||
background-color: #e0a500;
|
||||
.button:hover {
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 3px black;
|
||||
}
|
||||
a.outline:hover, a.outline:focus, button.outline:hover, button.focus:hover {
|
||||
.button {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
button:active, .button:active {
|
||||
background: #007bc7;
|
||||
}
|
||||
button:focus, .button:focus {
|
||||
border-color: white;
|
||||
}
|
||||
.text {
|
||||
background: transparent;
|
||||
color: black;
|
||||
border-color: transparent;
|
||||
}
|
||||
</style>
|
||||
66
src/components/contact.svelte
Normal file
66
src/components/contact.svelte
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
|
||||
<div class="contact">
|
||||
<div class="address">Prague, Czech Republic</div>
|
||||
<a href="mailto:danbulant@danbulant.eu" target="_blank">danbulant@danbulant.eu</a>
|
||||
<div class="profiles">
|
||||
<a href="https://github.com/danbulant" target="_blank">
|
||||
<div class="github" title="GitHub">
|
||||
<img src="/github.png" alt="Github Icon" draggable={false}>
|
||||
<span>GitHub</span>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://discord.gg/EgBGYmA" target="_blank">
|
||||
<div class="discord" title="Discord">
|
||||
<img src="/discord.png" alt="Discord Icon" draggable={false}>
|
||||
<span>TechmandanCZ#0135</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.contact {
|
||||
text-align: center;
|
||||
margin: 120px 0;
|
||||
}
|
||||
.address {
|
||||
color: #202020d5;
|
||||
}
|
||||
.contact > a {
|
||||
color: #202020;
|
||||
font-size: 36px;
|
||||
font-weight: 500;
|
||||
margin: 20px 0;
|
||||
display: block;
|
||||
font-size: max(min(36px, 4vw), 23px);
|
||||
}
|
||||
.profiles {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 2em;
|
||||
}
|
||||
.profiles a {
|
||||
height: 100%;
|
||||
}
|
||||
.profiles a div {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.profiles a div span {
|
||||
padding: 0 5px;
|
||||
}
|
||||
.profiles a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
img {
|
||||
height: 100%;
|
||||
}
|
||||
.github {
|
||||
color: #333333;
|
||||
}
|
||||
.discord {
|
||||
color: #7289DA;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
|
||||
<div>
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,47 +1,29 @@
|
|||
<script>
|
||||
export var navbar = false;
|
||||
</script>
|
||||
|
||||
<section class="hero" class:navbar>
|
||||
{#if $$slots.content}
|
||||
<div class="title">
|
||||
<slot name="title" />
|
||||
</div>
|
||||
<div class="content">
|
||||
<slot name="content" />
|
||||
</div>
|
||||
{:else}
|
||||
<div class="title full">
|
||||
<slot name="title" />
|
||||
</div>
|
||||
{/if}
|
||||
<div class="hero">
|
||||
<slot />
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.hero {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
max-height: 720px;
|
||||
max-width: 1080px;
|
||||
margin: auto;
|
||||
padding: 0 5px;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
background: #F4C4C4;
|
||||
padding: 40px 120px;
|
||||
padding: 40px min(120px, 10vw);
|
||||
margin: 0 20px;
|
||||
/* min-height: calc(100vh - 129px - 80px + 5px); */
|
||||
max-height: 1080px;
|
||||
max-width: 1500px;
|
||||
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.navbar {
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
}
|
||||
.title.full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
@media (min-width: 1760px) {
|
||||
.hero {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1100px) {
|
||||
.hero {
|
||||
min-height: auto;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
59
src/components/heroPost.svelte
Normal file
59
src/components/heroPost.svelte
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
<script>
|
||||
export var thumbnail;
|
||||
export var categories = [];
|
||||
export var author;
|
||||
export var date;
|
||||
export var title;
|
||||
export var authorIcon;
|
||||
export var description;
|
||||
</script>
|
||||
|
||||
<div class="post">
|
||||
<img src={thumbnail} alt="Thumbnail" class="thumbnail" draggable={false}>
|
||||
<div class="data">
|
||||
<div class="categories">
|
||||
{#each categories as category}
|
||||
<span>{category}</span>
|
||||
{/each}
|
||||
</div>
|
||||
<h3>{title}</h3>
|
||||
<p>{description}</p>
|
||||
<div class="author">
|
||||
<img src={authorIcon} alt="Avatar of author" draggable={false}>
|
||||
—
|
||||
<span class="author">{author}</span>
|
||||
—
|
||||
<span class="date">{date}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.thumbnail {
|
||||
border-radius: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
.categories {
|
||||
color: #0054E2;
|
||||
}
|
||||
.author {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: -5px;
|
||||
height: 2em;
|
||||
}
|
||||
h3 {
|
||||
font-weight: 400;
|
||||
font-size: 29px;
|
||||
}
|
||||
p {
|
||||
font-size: 18px;
|
||||
}
|
||||
.author > * {
|
||||
padding: 0 5px;
|
||||
}
|
||||
.author img {
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,100 +0,0 @@
|
|||
<script>
|
||||
export var colored = true;
|
||||
export var padded = false;
|
||||
</script>
|
||||
|
||||
<span>
|
||||
<a {...$$restProps} class:colored class:padded>
|
||||
<slot />
|
||||
</a>
|
||||
</span>
|
||||
|
||||
<style>
|
||||
*, *:after, *:before {
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
}
|
||||
.padded {
|
||||
display: inline-block;
|
||||
margin: 0 5px;
|
||||
}
|
||||
* {
|
||||
margin:0;
|
||||
padding:0;
|
||||
border:0 none;
|
||||
position: relative;
|
||||
outline: none;
|
||||
}
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.colored {
|
||||
color: #e0a500;
|
||||
}
|
||||
a.colored:before {
|
||||
background: #e0a500;
|
||||
}
|
||||
a:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
background: black;
|
||||
visibility: hidden;
|
||||
border-radius: 5px;
|
||||
transform: scaleX(0);
|
||||
opacity: 0.1;
|
||||
transition: .2s linear, .4s opacity;
|
||||
}
|
||||
a:hover:before,
|
||||
a:focus:before {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
|
||||
@keyframes hover-v {
|
||||
0% {
|
||||
transform: scaleX(0);
|
||||
height: 5px;
|
||||
}
|
||||
45% {
|
||||
transform: scaleX(1.05);
|
||||
height: 5px;
|
||||
}
|
||||
55% {
|
||||
height: 5px;
|
||||
}
|
||||
100% {
|
||||
transform: scaleX(1.05);
|
||||
height: 3.8rem;
|
||||
}
|
||||
}
|
||||
@keyframes no-hover-v {
|
||||
0% {
|
||||
transform: scaleX(1.05);
|
||||
height: 3.8rem;
|
||||
}
|
||||
45% {
|
||||
height: 5px;
|
||||
}
|
||||
55% {
|
||||
transform: scaleX(1.05);
|
||||
height: 5px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scaleX(0);
|
||||
height: 5px;
|
||||
opacity: .02;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<script>
|
||||
export var darkmode;
|
||||
</script>
|
||||
|
||||
<nav class="bar" class:darkmode>
|
||||
<div class="inner">
|
||||
<slot />
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="spacer"></div>
|
||||
|
||||
<style>
|
||||
.spacer {
|
||||
height: 50px;
|
||||
}
|
||||
nav.bar.darkmode {
|
||||
background: #242423;
|
||||
}
|
||||
nav.bar .inner {
|
||||
max-width: 1024px;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
vertical-align: middle;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: calc(100% - 40px);
|
||||
padding: 0 20px;
|
||||
}
|
||||
nav.bar {
|
||||
position: fixed;
|
||||
background: white;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 50px;
|
||||
box-shadow: 0 0 5px black;
|
||||
}
|
||||
</style>
|
||||
67
src/components/post.svelte
Normal file
67
src/components/post.svelte
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
<script>
|
||||
export var thumbnail;
|
||||
export var categories = [];
|
||||
export var author;
|
||||
export var date;
|
||||
export var title;
|
||||
export var authorIcon;
|
||||
</script>
|
||||
|
||||
<div class="post">
|
||||
<img src={thumbnail} alt="Thumbnail" class="thumbnail" draggable={false}>
|
||||
<div class="data">
|
||||
<div class="categories">
|
||||
{#each categories as category}
|
||||
<span>{category}</span>
|
||||
{/each}
|
||||
</div>
|
||||
<h4>{title}</h4>
|
||||
<div class="author">
|
||||
<img src={authorIcon} alt="Avatar of author" draggable={false}>
|
||||
—
|
||||
<span class="author">{author}</span>
|
||||
—
|
||||
<span class="date">{date}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.post {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
h4 {
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
}
|
||||
.categories {
|
||||
color: #0054E2;
|
||||
}
|
||||
.thumbnail {
|
||||
width: 150px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
img {
|
||||
height: 100%;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.author img {
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.author {
|
||||
height: 2em;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
margin-left: -5px;
|
||||
}
|
||||
.author > * {
|
||||
padding: 0 5px;
|
||||
}
|
||||
</style>
|
||||
113
src/components/posts.svelte
Normal file
113
src/components/posts.svelte
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
<script>
|
||||
import HeroPost from "./heroPost.svelte";
|
||||
import Post from "./post.svelte";
|
||||
|
||||
var heroPost = {
|
||||
title: "Test hero post",
|
||||
author: "Daniel Bulant",
|
||||
authorIcon: "/logo.png",
|
||||
thumbnail: "https://picsum.photos/800/400?random=1",
|
||||
categories: ["test"],
|
||||
description: "Test description",
|
||||
date: "16-01-2021"
|
||||
};
|
||||
|
||||
var posts = [{
|
||||
title: "Test post 1",
|
||||
author: "Daniel Bulant",
|
||||
authorIcon: "/logo.png",
|
||||
thumbnail: "https://picsum.photos/150?random=1",
|
||||
categories: ["test"],
|
||||
date: "16-01-2021"
|
||||
}, {
|
||||
title: "Test post 2",
|
||||
author: "Daniel Bulant",
|
||||
authorIcon: "/logo.png",
|
||||
thumbnail: "https://picsum.photos/150?random=2",
|
||||
categories: ["test"],
|
||||
date: "16-01-2021"
|
||||
}, {
|
||||
title: "Test post 3",
|
||||
author: "Daniel Bulant",
|
||||
authorIcon: "/logo.png",
|
||||
thumbnail: "https://picsum.photos/150?random=3",
|
||||
categories: ["test"],
|
||||
date: "16-01-2021"
|
||||
}, {
|
||||
title: "Test post 4",
|
||||
author: "Daniel Bulant",
|
||||
authorIcon: "/logo.png",
|
||||
thumbnail: "https://picsum.photos/150?random=4",
|
||||
categories: ["test"],
|
||||
date: "16-01-2021"
|
||||
}];
|
||||
</script>
|
||||
|
||||
<h2>Posts</h2>
|
||||
<div class="main">
|
||||
<div class="hero">
|
||||
<HeroPost {...heroPost} />
|
||||
</div>
|
||||
<div class="posts">
|
||||
{#each posts as post}
|
||||
<Post {...post} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.main {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
max-width: 1360px;
|
||||
margin: auto;
|
||||
}
|
||||
h2 {
|
||||
font-weight: 400;
|
||||
max-width: 1360px;
|
||||
margin: auto;
|
||||
}
|
||||
.hero {
|
||||
width: calc(60% - 5px);
|
||||
margin-right: 5px;
|
||||
min-width: 620px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.posts {
|
||||
width: calc(40% - 5px);
|
||||
margin-left: 5px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
@media (max-width: 1160px) {
|
||||
.hero {
|
||||
width: calc(100% - min(120px, 10%));
|
||||
margin: 0 min(60px, 5%);
|
||||
min-width: initial;
|
||||
}
|
||||
h2 {
|
||||
width: calc(100% - min(120px, 10%));
|
||||
margin: 0 min(60px, 5%);
|
||||
}
|
||||
.posts {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: calc(100% - min(120px, 10%));
|
||||
margin: 0 min(60px, 5%);
|
||||
margin-top: 10px;
|
||||
}
|
||||
:global(main .main > .posts > .post) {
|
||||
width: auto;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1020px) {
|
||||
:global(main .main > .posts > .post) {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,61 +1,48 @@
|
|||
<script>
|
||||
export var title;
|
||||
export var left = false;
|
||||
|
||||
var screenWidth;
|
||||
export var image = "https://picsum.photos/725/350?random=" + Math.floor(Math.random() * 5000);
|
||||
export var link = "";
|
||||
export var tags = [];
|
||||
</script>
|
||||
|
||||
<svelte:window bind:innerWidth={screenWidth} />
|
||||
|
||||
<article>
|
||||
<div class="line" class:left>
|
||||
<div class="info">
|
||||
<h3>{title}</h3>
|
||||
{#if $$slots.preview}
|
||||
{#if screenWidth < 765}
|
||||
<div class="preview small">
|
||||
<slot name="preview" />
|
||||
</div>
|
||||
<a href={link} target="_blank" class="full">
|
||||
<div class="project">
|
||||
<img src={image} alt="Project" draggable={false}>
|
||||
<h3><slot /></h3>
|
||||
<div class="tags">
|
||||
{#each tags as tag, i}
|
||||
<span>{tag}</span>
|
||||
{#if i !== tags.length - 1}
|
||||
<span>·</span>
|
||||
{/if}
|
||||
{/if}
|
||||
<p><slot name="description" /></p>
|
||||
<div class="actions">
|
||||
<slot name="actions" />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{#if screenWidth > 764}
|
||||
<div class="preview">
|
||||
<slot name="preview" />
|
||||
</div>
|
||||
{/if}
|
||||
<a href={link} target="_blank">View</a>
|
||||
</div>
|
||||
</article>
|
||||
</a>
|
||||
|
||||
<style>
|
||||
.line {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
max-width: 720px;
|
||||
a.full:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.tags {
|
||||
margin: 5px 0;
|
||||
margin-left: -3px;
|
||||
}
|
||||
.tags span {
|
||||
padding: 0 3px;
|
||||
}
|
||||
.project {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.info {
|
||||
width: calc(100% - 192px);
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
a.full {
|
||||
width: 100%;
|
||||
}
|
||||
.left .preview {
|
||||
float: left;
|
||||
img {
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.left .info {
|
||||
float: right;
|
||||
}
|
||||
.preview {
|
||||
width: 50%;
|
||||
flex-shrink: 1;
|
||||
flex-grow: 0;
|
||||
}
|
||||
.preview.small {
|
||||
height: 50%;
|
||||
h3 {
|
||||
font-weight: 400;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
<div></div>
|
||||
|
||||
<style>
|
||||
Loading…
Reference in a new issue