martials/old.martials.no
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changed font to mono, added footer with source-code, card use flex-wrap and should not overlap with anything else

Browse Source
This commit is contained in:
Martin Berg Alstad 2022-12-21 15:47:08 +01:00
parent 6798840a6b
commit b62f2611ea
11 changed files with 52 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.idea/runConfigurations/build.xml generated Normal file
View File

@ -0,0 +1,12 @@
<component name="ProjectRunConfigurationManager">
<configuration default="false" name="build" type="js.build_tools.npm" nameIsGenerated="true">
<package-json value="$PROJECT_DIR$/package.json" />
<command value="run" />
<scripts>
<script value="build" />
</scripts>
<node-interpreter value="project" />
<envs />
<method v="2" />
</configuration>
</component>

1
index.html
View File

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#181a1b" />
<title>Hjem | Martials.no</title>
<meta name="description" content="Hjemmeside for API og diverse">
<link rel="icon" type="image/x-icon" href="resources/code.svg">
</head>
<body>

2
package.json
View File

@ -1,5 +1,5 @@
{
"name": "vite-template-solid",
"name": "martials-no",
"version": "0.1",
"description": "",
"scripts": {

6
src/components/card.tsx
View File

@ -2,12 +2,12 @@
import { type Component } from "solid-js";
import type { CardProps } from "../types/interfaces";
import { H3 } from "./text";
import { A } from "./link";
import { Link } from "./link";
const Card: Component<CardProps> = ({ children, className, title, to, newTab = false }) => {
return (
<>
<A className={"text-white"} to={ to } newTab={ newTab }>
<Link className={ "text-white" } to={ to } newTab={ newTab }>
<div
class={ `relative bg-gradient-to-r from-cyan-600 to-cyan-500 min-w-64 rounded-2xl ${ className }` }>
<div class="relative p-5">
@ -15,7 +15,7 @@ const Card: Component<CardProps> = ({ children, className, title, to, newTab = f
{ children }
</div>
</div>
</A>
</Link>
</>
);
};

15
src/components/footer.tsx Normal file
View File

@ -0,0 +1,15 @@
/* @refresh reload */
import { type Component } from "solid-js";
import type { SimpleProps } from "../types/interfaces";
import { Link } from "./link";
const Footer: Component<SimpleProps> = ({ className }) => {
return (
<footer class={ `text-center py-5 absolute bottom-0 container ${ className }` }>
<p>Kildekode på <Link to={ "https://github.com/h600878/martials.no" }>GitHub</Link></p>
<p>Self-hosted on Raspberry Pi 4</p>
</footer>
);
};
export default Footer;

6
src/components/header.tsx
View File

@ -1,13 +1,13 @@
/* @refresh reload */
import { Component } from "solid-js";
import { SimpleProps, TitleProps } from "../types/interfaces";
import { type Component } from "solid-js";
import type { TitleProps } from "../types/interfaces";
import { H1 } from "./text";
const Header: Component<TitleProps> = ({ className, title }) => {
return (
<header class={ className }>
<H1 className={ "text-center" }>{ title }</H1>
<H1 className={ "text-center text-cyan-500" }>{ title }</H1>
<div class={"mx-auto w-fit"}>
<p>Av Martin Berg Alstad</p>
</div>

14
src/components/layout.tsx
View File

@ -2,16 +2,20 @@
import { type Component } from "solid-js";
import type { TitleProps } from "../types/interfaces";
import Header from "./header";
import Footer from "./footer";
export const Layout: Component<TitleProps> = ({ children, title, className }) => {
const Layout: Component<TitleProps> = ({ children, title, className }) => {
return (
<div class={ `bg-default-bg text-white min-h-screen font-mono ${ className }` }>
<div class="container mx-auto debug">
<Header className={"my-3"} title={ title } />
<div class={ `bg-default-bg text-white min-h-screen relative font-mono ${ className }` }>
<div class="container mx-auto">
<Header className={ "py-3" } title={ title } />
<main>
{ children }
<div class={ "pb-28" }>{ children }</div>
<Footer />
</main>
</div>
</div>
);
};
export default Layout;

2
src/components/link.tsx
View File

@ -2,7 +2,7 @@
import { type Component } from "solid-js";
import type { LinkProps } from "../types/interfaces";
export const A: Component<LinkProps> = (
export const Link: Component<LinkProps> = (
{
to,
rel,

12
src/components/text.tsx
View File

@ -2,17 +2,9 @@ import { type Component } from "solid-js";
import type { ChildProps } from "../types/interfaces";
export const H1: Component<ChildProps> = ({ children, className }) => {
return (
<>
<h1 class={ `text-4xl ${ className }` }>{ children }</h1>
</>
);
return <h1 class={ `text-4xl ${ className }` }>{ children }</h1>;
};
export const H3: Component<ChildProps> = ({ children, className }) => {
return (
<>
<h3 class={ `text-2xl ${ className }` }>{ children }</h3>
</>
);
return <h3 class={ `text-2xl ${ className }` }>{ children }</h3>;
};

6
src/index.tsx
View File

@ -2,8 +2,8 @@
import { For, render } from "solid-js/web";
import "./index.css";
import type { Component } from "solid-js";
import { Layout } from "./components/layout";
import { type Component } from "solid-js";
import Layout from "./components/layout";
import Card from "./components/card";
import type { CardProps } from "./types/interfaces";
@ -23,7 +23,7 @@ const cards = [
const HomePage: Component = () => {
return (
<Layout title={ "Velkommen!" }>
<div class={ "flex justify-center mt-10" }>
<div class={ "flex flex-wrap justify-center mt-10" }>
<For each={ cards }>
{ card =>
<Card title={ card.title } className={ "m-4" } to={ card.to }>{ card.children }</Card>

4
src/types/interfaces.ts
View File

@ -17,9 +17,9 @@ export interface LinkProps extends ChildProps {
}
export interface TitleProps extends ChildProps {
title: string,
title?: string,
}
export interface CardProps extends LinkProps {
title: string;
title?: string;
}