From 865526a2199d9c2abea6873cd713f2fa04db3e07 Mon Sep 17 00:00:00 2001
From: Jonas_Jones <91549607+J-onasJones@users.noreply.github.com>
Date: Sun, 1 Oct 2023 19:10:20 +0200
Subject: [PATCH] Added better layout
---
src/components/ProjectComponent.svelte | 105 ++++++++++++++
src/components/ProjectsLinks.svelte | 57 ++++++++
src/routes/+page.css | 10 +-
src/routes/projects/+page.svelte | 183 +------------------------
4 files changed, 172 insertions(+), 183 deletions(-)
create mode 100644 src/components/ProjectComponent.svelte
create mode 100644 src/components/ProjectsLinks.svelte
diff --git a/src/components/ProjectComponent.svelte b/src/components/ProjectComponent.svelte
new file mode 100644
index 0000000..090fa75
--- /dev/null
+++ b/src/components/ProjectComponent.svelte
@@ -0,0 +1,105 @@
+
+
+
+

+
+
+
+
+
+
{project.description}
+
+
+
+
diff --git a/src/components/ProjectsLinks.svelte b/src/components/ProjectsLinks.svelte
new file mode 100644
index 0000000..22c73f7
--- /dev/null
+++ b/src/components/ProjectsLinks.svelte
@@ -0,0 +1,57 @@
+
+
+
+
+
diff --git a/src/routes/+page.css b/src/routes/+page.css
index 739ec9b..75348e7 100644
--- a/src/routes/+page.css
+++ b/src/routes/+page.css
@@ -11,7 +11,7 @@
}
:root {
- --background-color: #202324;
+ --background-color: #202324;
--font-color: rgb(0, 255, 0);
--font-hover-color: green;
--header-background-color: rgba(0, 0, 0, 0.4);
@@ -31,8 +31,8 @@
}
@media (prefers-color-scheme: light) {
- :root {
- --background-color: #dfdcdb;
+ :root {
+ --background-color: #dfdcdb;
--font-color: green;
--font-hover-color: rgb(0, 255, 0);
--header-background-color: rgba(255, 255, 255, 0.5);
@@ -49,7 +49,7 @@
--project-search-background-color: rgba(255, 255, 255, 0.5);
--project-search-input-font-color: black;
--nav-menu-background-color: rgba(255, 255, 255, 0.8)
- }
+ }
}
@@ -93,7 +93,7 @@ a:hover {
@media screen and (max-width: 768px) {
.parallax-background {
- transform:none;
+ transform: none;
}
}
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
index bcb7d82..e1ca362 100644
--- a/src/routes/projects/+page.svelte
+++ b/src/routes/projects/+page.svelte
@@ -4,9 +4,10 @@
import NavBar from "../../components/NavBar.svelte";
import ParallaxBg from "../../components/ParallaxBg.svelte";
import Padding from "../../components/padding.svelte";
+ import ProjectComponent from "../../components/ProjectComponent.svelte";
import projects from "./projects.json";
-
+
import "../../routes/+page.css";
var searchResults = projects.filter((project) => {
@@ -124,62 +125,7 @@
{#each searchResults as project}
-
-
-
{project.description}
-
-

-
-
-
-
-
+
{/each}
@@ -203,120 +149,13 @@
}
.project {
- transition: background-color 0.3s;
- transition: filter 0.3s;
position: relative;
- padding: 20px;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
- padding-bottom: 50px;
border: 2px solid var(--project-border-color);
- }
-
- .project-bg {
- width: 100%;
- height: 100%;
- object-fit: cover;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
- background-color: var(--project-background-color);
- }
-
- .project-bg img {
- width: 100%;
- height: 100%;
- object-fit: cover;
- mask-image: linear-gradient(
- to right,
- rgba(0, 0, 0, 0.918),
- rgba(0, 0, 0, 0)
- );
- transition: 0.3s;
- }
-
- .project:hover img {
- -webkit-filter: blur(5px);
- filter: blur(5px);
- }
-
- .project-title {
- font-size: 20px;
- font-weight: bold;
- margin-bottom: 10px;
- text-align: left;
- }
-
- .project-status {
- font-size: 20px;
- font-weight: bold;
- margin-bottom: 10px;
- margin-left: 10px;
- margin-right: 10px;
- padding: 2px;
- padding-left: 5px;
- padding-right: 5px;
- border: 3px solid #dcdcdc;
- border-radius: 3px;
- }
-
- .project-version {
- font-size: 20px;
- font-weight: bold;
- color: white;
- margin-bottom: 10px;
- margin-left: 10px;
- margin-right: 10px;
- margin-top: -4px;
- padding: 2px;
- border: 3px solid #dcdcdc;
- border-radius: 100px;
- float: right;
- }
-
- .project-description {
- margin-top: 20px;
- margin-bottom: 10px;
- margin-right: 12px;
- text-align: right;
- }
-
- .project-links {
- display: flex;
- justify-content: space-between;
- align-items: center;
- position: absolute;
- bottom: 20px;
- }
-
- .project-link {
- display: inline-block;
- margin-left: 10px;
- color: var(--project-link-color);
- text-decoration: none;
- transition: color 0.3s;
- }
-
- .project-link:hover {
- color: var(--project-link-color-hover);
- }
-
- .download-button {
- margin-left: 10px;
- color: white;
- transition: color 0.3s;
- background-color: rgb(25, 25, 100);
- border-radius: 5px;
- padding: 5px;
- padding-left: 10px;
- padding-right: 10px;
- text-decoration: none;
- border: 3px solid rgb(0, 0, 100);
- position: absolute;
- bottom: 20px;
- right: 20px;
+ min-width: 200px;
+ background-color: var(--background-color);
}
.search-bar {
@@ -348,21 +187,9 @@
padding-right: 10px;
}
- .smaller-screen {
- display: none;
- }
-
@media only screen and (max-width: 620px) {
.project-container {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
- .container {
- width: 100%;
- margin: 0;
- padding: 0;
- }
- .smaller-screen {
- display: block;
- }
}