more sites w/ images

src/routes/+layout.svelte

@@ -35,6 +35,10 @@
 			width: calc(100% - var(--margin) * 2);
 		}
 
+		@media screen and (max-width: 750px) {
+			padding-top: 0;
+		}
+		/*
 		@media screen and (max-width: 750px) {
 			main {
 				--margin: 1rem;
@@ -44,5 +48,6 @@
 				display: none;
 			}
 		}
+		*/
 	}
 </style>

src/routes/sites/+page.svelte

@@ -14,34 +14,80 @@
 	const sites: Array<Site> = [
 		{
 			title: 'Grafana',
-			image:
-				'https://www.stackhero.io/assets/src/images/servicesLogos/openGraphVersions/grafana.png',
+			image: '/images/grafana.png',
 			link: 'https://grafana.schleppe.cloud',
-			background: '#082448',
-			color: 'white'
+			background: '#F5E3DC',
+			color: '#F05A24'
 		},
 		{
 			title: 'Prometheus',
-			image: 'https://prometheus.io/_next/static/media/prometheus-logo.7aa022e5.svg',
-			link: 'http://prome.schleppe:9090'
+			image: '/images/prometheus.svg',
+			link: 'http://prome.schleppe:9090',
+			background: '#262221',
+			color: '#F3BFA2'
 		},
 		{
 			title: 'Traefik',
-			image: 'https://storage.googleapis.com/schleppe-files/Traefik.logo_shape_bordered.png',
+			image: '/images/traefik.png',
 			link: 'https://grafana.schleppe.cloud',
 			background: '#30A4C2',
-			color: '#343A40'
+			color: 'white'
 		},
 		{
 			title: 'Kibana',
-			image: 'https://marketplace-assets.digitalocean.com/logos/sharklabs-kibana.svg',
-			link: 'https://kibana.schleppe.cloud'
+			image: '/images/kibana.svg',
+			link: 'https://kibana.schleppe.cloud',
+			background: '#f6cfdd',
+			color: '#401C26'
 		},
 		{
 			title: 'HASS',
-			image:
-				'https://upload.wikimedia.org/wikipedia/en/thumb/4/49/Home_Assistant_logo_%282023%29.svg/2048px-Home_Assistant_logo_%282023%29.svg.png',
-			link: 'http://homeassistant.schleppe:8123'
+			image: '/images/hass.png',
+			link: 'http://homeassistant.schleppe:8123',
+			background: '#1ABCF2',
+			color: 'white'
+		},
+		{
+			title: 'Vault',
+			image: '/images/vault.svg',
+			link: 'http://vault.schleppe:8200',
+			background: 'white',
+			color: 'black'
+		},
+		{
+			title: 'Drone',
+			image: '/images/drone.png',
+			link: 'https://drone.schleppe.cloud',
+			background: '#D8E2F0',
+			color: '#1E375A'
+		},
+		{
+			title: 'Immich',
+			image: '/images/immich.png',
+			link: 'http://immich.schleppe:2283',
+			background: 'white',
+			color: 'black'
+		},
+		{
+			title: 'Wiki',
+			image: '/images/xwiki.png',
+			link: 'https://wiki.schleppe.cloud',
+			background: 'white',
+			color: 'black'
+		},
+		{
+			title: 'Gitea',
+			image: '/images/gitea.png',
+			link: 'https://git.schleppe.cloud',
+			background: '#E6E7D7',
+			color: '#609925'
+		},
+		{
+			title: 'PBS',
+			image: '/images/proxmox.png',
+			link: 'https://clio.schleppe:8007',
+			background: '#EDE1D2',
+			color: '#E66B00'
 		}
 	];
 </script>
@@ -84,5 +130,13 @@
 	.section-wrapper {
 		display: grid;
 		grid-template-columns: repeat(4, 1fr);
+
+		@media screen and (max-width: 1000px) {
+			grid-template-columns: repeat(3, 1fr);
+		}
+
+		@media screen and (max-width: 750px) {
+			grid-template-columns: repeat(2, 1fr);
+		}
 	}
 </style>

static/images/kibana.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" width="2500" height="2500"><style>.st0{fill:#e9478b}.st1{fill:#3ebeb0}.st2{fill:#37a595}.st3{fill:#353535}.st4{fill:none}</style><path class="st0" d="M19.6 33.1c7.3 0 14.2 1.9 20.2 5.1l21.4-25.7H18.8v51-30.4h.8z"/><path class="st1" d="M39.8 38.2l-21 25.3v4h42.3c-2.4-12.6-10.4-23.3-21.3-29.3z"/><path class="st2" d="M39.8 38.2l-21 25.3v4h7.5l20.4-24.6s-1.4-1.1-3.3-2.5c-1.4-1-3.6-2.2-3.6-2.2z"/><path class="st3" d="M19.6 33.1h-.8v30.4l21-25.3c-6-3.2-12.9-5.1-20.2-5.1z"/><path class="st4" d="M0 0h80v80H0z"/></svg>

static/images/prometheus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="113.333" height="113.331"><path d="M56.667 0C25.372 0 0 25.369 0 56.665c0 31.295 25.372 56.666 56.667 56.666s56.666-25.371 56.666-56.666C113.333 25.369 87.961 0 56.667 0Zm0 106.055c-8.904 0-16.123-5.948-16.123-13.283H72.79c0 7.334-7.219 13.283-16.123 13.283zm26.63-17.682H30.034v-9.658h53.264v9.658zm-.191-14.629h-52.92c-.176-.203-.356-.403-.526-.609-5.452-6.62-6.736-10.076-7.983-13.598-.021-.116 6.611 1.355 11.314 2.413 0 0 2.42.56 5.958 1.205-3.397-3.982-5.414-9.044-5.414-14.218 0-11.359 8.712-21.285 5.569-29.308 3.059.249 6.331 6.456 6.552 16.161 3.252-4.494 4.613-12.701 4.613-17.733 0-5.21 3.433-11.262 6.867-11.469-3.061 5.045.793 9.37 4.219 20.099 1.285 4.03 1.121 10.812 2.113 15.113.329-8.933 1.865-21.967 7.532-26.467-2.5 5.667.37 12.758 2.333 16.167C76.5 37 78.42 41.167 78.42 49.048c0 5.284-1.951 10.259-5.242 14.148 3.742-.702 6.326-1.335 6.326-1.335l12.152-2.371c.001-.001-1.765 7.261-8.55 14.254z" style="fill:#e6522c;fill-opacity:1"/></svg>

static/images/vault.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 73.6 72" width="2500" height="2446"><defs><path id="a" d="M37.6 36.8c1.2 0 2.1-1 2.1-2.1s-.9-2.1-2.1-2.1-2.1 1-2.1 2.1.9 2.1 2.1 2.1zM31.3 31c1.2 0 2.1-1 2.1-2.1 0-1.2-.9-2.1-2.1-2.1-1.2 0-2.1 1-2.1 2.1 0 1.2.9 2.1 2.1 2.1zm6.3 0c1.2 0 2.1-1 2.1-2.1 0-1.2-.9-2.1-2.1-2.1s-2.1 1-2.1 2.1c0 1.2.9 2.1 2.1 2.1zm6.3 0c1.2 0 2.1-1 2.1-2.1 0-1.2-.9-2.1-2.1-2.1-1.2 0-2.1 1-2.1 2.1 0 1.2 1 2.1 2.1 2.1zm-12.6-5.7c1.2 0 2.1-1 2.1-2.1 0-1.2-.9-2.1-2.1-2.1-1.2 0-2.1 1-2.1 2.1 0 1.2.9 2.1 2.1 2.1zm6.3 0c1.2 0 2.1-1 2.1-2.1 0-1.2-.9-2.1-2.1-2.1s-2.1 1-2.1 2.1c0 1.2.9 2.1 2.1 2.1zm6.3 0c1.2 0 2.1-1 2.1-2.1 0-1.2-.9-2.1-2.1-2.1-1.2 0-2.1 1-2.1 2.1 0 1.2 1 2.1 2.1 2.1zm-6.3-5.7c1.2 0 2.1-1 2.1-2.1 0-1.2-.9-2.1-2.1-2.1s-2.1 1-2.1 2.1.9 2.1 2.1 2.1zm6.3 0c1.2 0 2.1-1 2.1-2.1 0-1.2-.9-2.1-2.1-2.1-1.2 0-2.1 1-2.1 2.1s1 2.1 2.1 2.1zm-12.6 0c1.2 0 2.1-1 2.1-2.1 0-1.2-.9-2.1-2.1-2.1-1.2 0-2.1 1-2.1 2.1s.9 2.1 2.1 2.1zM36.8 72L0 0h73.6L36.8 72z"/></defs><use xlink:href="#a" overflow="visible" fill-rule="evenodd" clip-rule="evenodd"/></svg>