Jonas_Jones/jonasjones.dev
1
0
Fork 0
mirror of https://github.com/JonasunderscoreJones/jonasjones.dev.git synced 2025-10-22 16:39:18 +02:00
Code Issues Projects Releases Packages Wiki Activity

fixed formatting

Browse source
This commit is contained in:
Jonas_Jones 2025-06-07 19:13:15 +02:00
parent b0c18a315a
commit 2d697a0073
3 changed files with 64 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

59
src/routes/projects/+page.css
View file

@ -1,59 +0,0 @@
.container {
width: 90%;
}
.project-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(530px, 1fr));
gap: 20px;
width: 100%;
}
.project {
position: relative;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
border: 2px solid var(--project-border-color);
min-width: 530px;
background-color: var(--background-color);
}
.search-bar {
margin-bottom: 20px;
background-color: var(--project-search-background-color);
padding: 10px;
border-radius: 5px;
}
.search-bar input {
background-color: transparent;
border: none;
outline: none;
color: var(--project-search-input-font-color);
font-size: 20px;
width: 100%;
padding-left: 10px;
padding-right: 10px;
text-align: center;
}
.search-bar select {
background-color: transparent;
border: none;
outline: none;
color: var(--project-search-input-font-color);
font-size: 20px;
padding-left: 10px;
padding-right: 10px;
}
@media only screen and (max-width: 620px) {
.project-container {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.project {
min-width: 200px;
}
}

65
src/routes/projects/+page.svelte
View file

@ -6,7 +6,7 @@
import Padding from "../../components/padding.svelte";
import ProjectComponent from "../../components/ProjectComponent.svelte";
import './+page.css';
// import './+page.css';
export let data: {
projects: Project[];
@ -147,3 +147,66 @@
</div>
<Footer />
</ParallaxBg>
<style>
.container {
width: 90%;
}
.project-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(530px, 1fr));
gap: 20px;
width: 100%;
}
.project {
position: relative;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
border: 2px solid var(--project-border-color);
min-width: 530px;
background-color: var(--background-color);
}
.search-bar {
margin-bottom: 20px;
background-color: var(--project-search-background-color);
padding: 10px;
border-radius: 5px;
}
.search-bar input {
background-color: transparent;
border: none;
outline: none;
color: var(--project-search-input-font-color);
font-size: 20px;
width: 100%;
padding-left: 10px;
padding-right: 10px;
text-align: center;
}
.search-bar select {
background-color: transparent;
border: none;
outline: none;
color: var(--project-search-input-font-color);
font-size: 20px;
padding-left: 10px;
padding-right: 10px;
}
@media only screen and (max-width: 620px) {
.project-container {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.project {
min-width: 200px;
}
}
</style>

1
src/routes/projects/+page.ts
View file

@ -1,4 +1,3 @@
// src/routes/projects/+page.ts
export async function load({ fetch }) {
const res = await fetch("https://cdn.jonasjones.dev/api/projects/projects.json");
const data = await res.json();