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="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#181a1b" /> <meta name="theme-color" content="#181a1b" />
<title>Hjem | Martials.no</title> <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"> <link rel="icon" type="image/x-icon" href="resources/code.svg">
</head> </head>
<body> <body>

2
package.json
View File

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

6
src/components/card.tsx
View File

@ -2,12 +2,12 @@
import { type Component } from "solid-js"; import { type Component } from "solid-js";
import type { CardProps } from "../types/interfaces"; import type { CardProps } from "../types/interfaces";
import { H3 } from "./text"; import { H3 } from "./text";
import { A } from "./link"; import { Link } from "./link";
const Card: Component<CardProps> = ({ children, className, title, to, newTab = false }) => { const Card: Component<CardProps> = ({ children, className, title, to, newTab = false }) => {
return ( return (
<> <>
<A className={"text-white"} to={ to } newTab={ newTab }> <Link className={ "text-white" } to={ to } newTab={ newTab }>
<div <div
class={ `relative bg-gradient-to-r from-cyan-600 to-cyan-500 min-w-64 rounded-2xl ${ className }` }> class={ `relative bg-gradient-to-r from-cyan-600 to-cyan-500 min-w-64 rounded-2xl ${ className }` }>
<div class="relative p-5"> <div class="relative p-5">
@ -15,7 +15,7 @@ const Card: Component<CardProps> = ({ children, className, title, to, newTab = f
{ children } { children }
</div> </div>
</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 */ /* @refresh reload */
import { Component } from "solid-js"; import { type Component } from "solid-js";
import { SimpleProps, TitleProps } from "../types/interfaces"; import type { TitleProps } from "../types/interfaces";
import { H1 } from "./text"; import { H1 } from "./text";
const Header: Component<TitleProps> = ({ className, title }) => { const Header: Component<TitleProps> = ({ className, title }) => {
return ( return (
<header class={ className }> <header class={ className }>
<H1 className={ "text-center" }>{ title }</H1> <H1 className={ "text-center text-cyan-500" }>{ title }</H1>
<div class={"mx-auto w-fit"}> <div class={"mx-auto w-fit"}>
<p>Av Martin Berg Alstad</p> <p>Av Martin Berg Alstad</p>
</div> </div>

14
src/components/layout.tsx
View File

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

2
src/components/link.tsx
View File

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

12
src/components/text.tsx
View File

@ -2,17 +2,9 @@ import { type Component } from "solid-js";
import type { ChildProps } from "../types/interfaces"; import type { ChildProps } from "../types/interfaces";
export const H1: Component<ChildProps> = ({ children, className }) => { export const H1: Component<ChildProps> = ({ children, className }) => {
return ( return <h1 class={ `text-4xl ${ className }` }>{ children }</h1>;
<>
<h1 class={ `text-4xl ${ className }` }>{ children }</h1>
</>
);
}; };
export const H3: Component<ChildProps> = ({ children, className }) => { export const H3: Component<ChildProps> = ({ children, className }) => {
return ( return <h3 class={ `text-2xl ${ className }` }>{ children }</h3>;
<>
<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 { For, render } from "solid-js/web";
import "./index.css"; import "./index.css";
import type { Component } from "solid-js"; import { type Component } from "solid-js";
import { Layout } from "./components/layout"; import Layout from "./components/layout";
import Card from "./components/card"; import Card from "./components/card";
import type { CardProps } from "./types/interfaces"; import type { CardProps } from "./types/interfaces";
@ -23,7 +23,7 @@ const cards = [
const HomePage: Component = () => { const HomePage: Component = () => {
return ( return (
<Layout title={ "Velkommen!" }> <Layout title={ "Velkommen!" }>
<div class={ "flex justify-center mt-10" }> <div class={ "flex flex-wrap justify-center mt-10" }>
<For each={ cards }> <For each={ cards }>
{ card => { card =>
<Card title={ card.title } className={ "m-4" } to={ card.to }>{ card.children }</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 { export interface TitleProps extends ChildProps {
title: string, title?: string,
} }
export interface CardProps extends LinkProps { export interface CardProps extends LinkProps {
title: string; title?: string;
} }