Learner + ice productions links

public/iceproductions.svg

@@ -0,0 +1 @@
+<svg version="1.1" class="svg-logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1080 1080" xml:space="preserve"><polygon fill="#0054BC" points="1080,716 540,1080 0,716 138,86.2 376,245.34 540,0 704,245.34 942,86.2"></polygon><polygon fill="#006FDD" points="905.55,540 540,1080 174.45,540 376,245.34 540,355 704,245.34"></polygon><polygon fill="#008CFF" points="680,450 540,1080 400,450 540,355"></polygon></svg>

src/App.svelte

@@ -30,10 +30,10 @@
 			<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 class="preview" src="igni.png" alt="igni avatar" slot="preview">
+			<img draggable={false} class="preview" src="igni.png" alt="igni avatar" slot="preview">
 			<div slot="actions">
-				<Button href="https://discordbotlist.com/bots/igni">More information</Button>
+				<Button newTab href="https://discordbotlist.com/bots/igni">More information</Button>
-				<Button outline href="https://discord.com/oauth2/authorize?client_id=739864286775738399&scope=bot&permissions=1039199350">Add igni to your server</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>
 
@@ -41,10 +41,32 @@
 			<p slot="description">
 				Czech tutorials, blog and news about node, php and scratch for everyone.
 			</p>
-			<img class="preview thetutorials" src="thetutorials.jpg" alt="The Tutorials logo" slot="preview">
+			<img draggable={false} class="preview thetutorials" src="thetutorials.jpg" alt="The Tutorials logo" slot="preview">
 			<div slot="actions">
-				<Button href="https://thetutorials.cz">Website</Button>
+				<Button newTab href="https://thetutorials.cz">Website</Button>
-				<Button outline href="https://youtube.com/thetutorials">Youtube channel</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://learner.danbulant.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>
@@ -71,6 +93,7 @@
 	img.preview {
 		height: 18rem;
 		max-height: 100%;
+		max-width: 100%;
 	}
 	img.preview.thetutorials {
 		border-radius: 50%;

src/components/button.svelte

@@ -1,8 +1,9 @@
 <script>
     import darkmode from "../stores/darkmode";
     export var outline = false;
-    export var href;
+    export var href = null;
     export var value = null;
+    export var newTab = false;
 
     function click() {
         value = !value;
@@ -10,7 +11,7 @@
 </script>
 
 {#if href}
-    <a {href} class:darkmode={$darkmode} on:click={click} {...$$restProps} class:outline>
+    <a {href} target={newTab ? "_blank" : undefined} class:darkmode={$darkmode} on:click={click} {...$$restProps} class:outline>
         <slot />
     </a>
 {:else}
@@ -49,11 +50,12 @@
         width: 0;
         height: 100%;
         border-radius: 0;
-        transition: width .3s, border-radius .3s;
+        transition: width .3s, border-radius .3s, background-color .3s;
         z-index: -1;
     }
     .outline:hover::before {
         width: 100%;
+        background-color: #e0a500;
     }
     a:hover, button:hover {
         background-color: #e0a500;

src/components/navbar.svelte

@@ -14,7 +14,7 @@
     .spacer {
         height: 50px;
     }
-    .darkmode {
+    nav.bar.darkmode {
         background: #242423;
     }
     nav.bar .inner {
@@ -30,6 +30,7 @@
     }
     nav.bar {
         position: fixed;
+        background: white;
         top: 0;
         left: 0;
         width: 100vw;

src/components/project.svelte

@@ -11,10 +11,12 @@
     <div class="line" class:left>
         <div class="info">
             <h3>{title}</h3>
-            {#if screenWidth < 765}
+            {#if $$slots.preview}
-                <div class="preview small">
+                {#if screenWidth < 765}
-                    <slot name="preview" />
+                    <div class="preview small">
-                </div>
+                        <slot name="preview" />
+                    </div>
+                {/if}
             {/if}
             <p><slot name="description" /></p>
             <div class="actions">

src/main.js

@@ -1,10 +1,7 @@
 import App from './App.svelte';
 
 const app = new App({
-	target: document.body,
+	target: document.body
-	props: {
-		name: 'world'
-	}
 });
 
 export default app;