Compare commits
No commits in common. "feature/add_tailwind_and_layout" and "main" have entirely different histories.
feature/ad
...
main
@ -1,15 +1,5 @@
|
||||
// @ts-check
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
||||
import tailwind from '@astrojs/tailwind';
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
integrations: [
|
||||
tailwind({
|
||||
// Example: Disable injecting a basic `base.css` import on every page.
|
||||
// Useful if you need to define and/or import your own custom `base.css`.
|
||||
applyBaseStyles: false,
|
||||
}),
|
||||
],
|
||||
});
|
||||
export default defineConfig({});
|
||||
|
||||
910
package-lock.json
generated
910
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -9,8 +9,6 @@
|
||||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/tailwind": "^5.1.4",
|
||||
"astro": "^5.1.1",
|
||||
"tailwindcss": "^3.4.17"
|
||||
"astro": "^5.1.1"
|
||||
}
|
||||
}
|
||||
9
public/css/all.min.css
vendored
9
public/css/all.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 23 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 22 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 23 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,61 +0,0 @@
|
||||
---
|
||||
interface Props {
|
||||
title: string;
|
||||
body: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
const { href, title, body } = Astro.props;
|
||||
---
|
||||
|
||||
<li class="link-card">
|
||||
<a href={href}>
|
||||
<h2>
|
||||
{title}
|
||||
<span>→</span>
|
||||
</h2>
|
||||
<p>
|
||||
{body}
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<style>
|
||||
.link-card {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
padding: 1px;
|
||||
background-color: #23262d;
|
||||
background-image: none;
|
||||
background-size: 400%;
|
||||
border-radius: 7px;
|
||||
background-position: 100%;
|
||||
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.link-card > a {
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
line-height: 1.4;
|
||||
padding: calc(1.5rem - 1px);
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
background-color: #23262d;
|
||||
opacity: 0.8;
|
||||
}
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
p {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.link-card:is(:hover, :focus-within) {
|
||||
background-position: 0;
|
||||
background-image: var(--accent-gradient);
|
||||
}
|
||||
.link-card:is(:hover, :focus-within) h2 {
|
||||
color: rgb(var(--accent-light));
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +0,0 @@
|
||||
<div class="flex h-21 w-screen bg-gray-100 p-4">
|
||||
<div class="border rounded-lg border-gray-200 p-2 flex flex-1 shadow-md shadow-gray-400">
|
||||
<div class="my-auto mx-auto overflow-hidden">
|
||||
<slot/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,7 +0,0 @@
|
||||
<div class="flex w-1/6 bg-gray-100 p-4 overflow-hidden " >
|
||||
<div class="border rounded-lg border-gray-200 p-2 flex flex-1 shadow-md shadow-gray-400 overflow-hidden">
|
||||
<div class="flex flex-1 overflow-y-auto">
|
||||
<slot/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,7 +0,0 @@
|
||||
<div class="flex w-full bg-gray-100 p-4 overflow-hidden">
|
||||
<div class="border rounded-lg border-gray-200 p-2 flex flex-1 shadow-md shadow-gray-400 overflow-hidden">
|
||||
<div class="flex flex-auto overflow-y-auto">
|
||||
<slot/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,16 +0,0 @@
|
||||
---
|
||||
import Logo from "./topbar/Logo.astro";
|
||||
import TopbarContent from "./topbar/TopbarContent.astro";
|
||||
---
|
||||
<div class="flex h-28 w-screen bg-gray-100 p-4">
|
||||
<div class="border rounded-lg border-gray-200 p-2 flex flex-1 shadow-md shadow-gray-400">
|
||||
<div class="my-auto overflow-hidden flex items-center flex-row flex-1">
|
||||
<Logo>
|
||||
<slot />
|
||||
</Logo>
|
||||
<TopbarContent>
|
||||
<slot />
|
||||
</TopbarContent>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,209 +0,0 @@
|
||||
---
|
||||
import astroLogo from '../assets/astro.svg';
|
||||
import background from '../assets/background.svg';
|
||||
---
|
||||
|
||||
<div id="container">
|
||||
<img id="background" src={background.src} alt="" fetchpriority="high" />
|
||||
<main>
|
||||
<section id="hero">
|
||||
<a href="https://astro.build"
|
||||
><img src={astroLogo.src} width="115" height="48" alt="Astro Homepage" /></a
|
||||
>
|
||||
<h1>
|
||||
To get started, open the <code><pre>src/pages</pre></code> directory in your project.
|
||||
</h1>
|
||||
<section id="links">
|
||||
<a class="button" href="https://docs.astro.build">Read our docs</a>
|
||||
<a href="https://astro.build/chat"
|
||||
>Join our Discord <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"
|
||||
><path
|
||||
fill="currentColor"
|
||||
d="M107.7 8.07A105.15 105.15 0 0 0 81.47 0a72.06 72.06 0 0 0-3.36 6.83 97.68 97.68 0 0 0-29.11 0A72.37 72.37 0 0 0 45.64 0a105.89 105.89 0 0 0-26.25 8.09C2.79 32.65-1.71 56.6.54 80.21a105.73 105.73 0 0 0 32.17 16.15 77.7 77.7 0 0 0 6.89-11.11 68.42 68.42 0 0 1-10.85-5.18c.91-.66 1.8-1.34 2.66-2a75.57 75.57 0 0 0 64.32 0c.87.71 1.76 1.39 2.66 2a68.68 68.68 0 0 1-10.87 5.19 77 77 0 0 0 6.89 11.1 105.25 105.25 0 0 0 32.19-16.14c2.64-27.38-4.51-51.11-18.9-72.15ZM42.45 65.69C36.18 65.69 31 60 31 53s5-12.74 11.43-12.74S54 46 53.89 53s-5.05 12.69-11.44 12.69Zm42.24 0C78.41 65.69 73.25 60 73.25 53s5-12.74 11.44-12.74S96.23 46 96.12 53s-5.04 12.69-11.43 12.69Z"
|
||||
></path></svg
|
||||
>
|
||||
</a>
|
||||
</section>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<a href="https://astro.build/blog/astro-5/" id="news" class="box">
|
||||
<svg width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"
|
||||
><path
|
||||
d="M24.667 12c1.333 1.414 2 3.192 2 5.334 0 4.62-4.934 5.7-7.334 12C18.444 28.567 18 27.456 18 26c0-4.642 6.667-7.053 6.667-14Zm-5.334-5.333c1.6 1.65 2.4 3.43 2.4 5.333 0 6.602-8.06 7.59-6.4 17.334C13.111 27.787 12 25.564 12 22.666c0-4.434 7.333-8 7.333-16Zm-6-5.333C15.111 3.555 16 5.556 16 7.333c0 8.333-11.333 10.962-5.333 22-3.488-.774-6-4-6-8 0-8.667 8.666-10 8.666-20Z"
|
||||
fill="#111827"></path></svg
|
||||
>
|
||||
<h2>What's New in Astro 5.0?</h2>
|
||||
<p>
|
||||
From content layers to server islands, click to learn more about the new features and
|
||||
improvements in Astro 5.0
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
filter: blur(100px);
|
||||
}
|
||||
|
||||
#container {
|
||||
font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
main {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#hero {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 22px;
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
|
||||
#links {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
#links a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 12px;
|
||||
color: #111827;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
#links a:hover {
|
||||
color: rgb(78, 80, 86);
|
||||
}
|
||||
|
||||
#links a svg {
|
||||
height: 1em;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
#links a.button {
|
||||
color: white;
|
||||
background: linear-gradient(83.21deg, #3245ff 0%, #bc52ee 100%);
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgba(255, 255, 255, 0.12),
|
||||
inset 0 -2px 0 rgba(0, 0, 0, 0.24);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#links a.button:hover {
|
||||
color: rgb(230, 230, 230);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
|
||||
'DejaVu Sans Mono', monospace;
|
||||
font-weight: normal;
|
||||
background: linear-gradient(14deg, #d83333 0%, #f041ff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0 0 1em;
|
||||
font-weight: normal;
|
||||
color: #111827;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #4b5563;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
letter-spacing: -0.006em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
code {
|
||||
display: inline-block;
|
||||
background:
|
||||
linear-gradient(66.77deg, #f3cddd 0%, #f5cee7 100%) padding-box,
|
||||
linear-gradient(155deg, #d83333 0%, #f041ff 18%, #f5cee7 45%) border-box;
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
.box {
|
||||
padding: 16px;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
border-radius: 16px;
|
||||
border: 1px solid white;
|
||||
}
|
||||
|
||||
#news {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
right: 16px;
|
||||
max-width: 300px;
|
||||
text-decoration: none;
|
||||
transition: background 0.2s;
|
||||
backdrop-filter: blur(50px);
|
||||
}
|
||||
|
||||
#news:hover {
|
||||
background: rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
|
||||
@media screen and (max-height: 368px) {
|
||||
#news {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
#container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#hero {
|
||||
display: block;
|
||||
padding-top: 10%;
|
||||
}
|
||||
|
||||
#links {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#links a.button {
|
||||
padding: 14px 18px;
|
||||
}
|
||||
|
||||
#news {
|
||||
right: 16px;
|
||||
left: 16px;
|
||||
bottom: 2.5rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,3 +0,0 @@
|
||||
<div class="pl-3 pr-6 flex-none">
|
||||
<img src="/images/fsc-logo-black.svg" class="w-10 h-10">
|
||||
</div>
|
||||
@ -1,12 +0,0 @@
|
||||
<div class="flex flex-1 flex-row justify-end font-roboto min-h-full">
|
||||
<div class="pr-5">
|
||||
<button class="border-sky-800 border-solid border-2 rounded-lg hover:bg-sky-500 font-fsc text-sm"><span class="p-2">Idff ghti</span></button>
|
||||
</div>
|
||||
<div class="pr-5 hover:bg-sky-500">Menu Item i</div>
|
||||
<div class="pr-5">Menu Item i</div>
|
||||
<div class="pr-5">Menu Item i</div>
|
||||
<ul>
|
||||
<li class="inline-block mr-3 ml-3 border-b-2 border-gray-100 hover:border-b-2 hover:border-green-600">test1</li>
|
||||
<li class="inline-block mr-3 ml-3">test2</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -1,7 +0,0 @@
|
||||
<div class="flex-1 justify-start">
|
||||
<!--<div class="flex justify-start"> -->
|
||||
<div class="pl-8 font-fsctitle text-2xl">
|
||||
FSC Knowledge Base
|
||||
</div>
|
||||
<!--</div> -->
|
||||
</div>
|
||||
@ -1,11 +0,0 @@
|
||||
---
|
||||
import Sitetitle from './SiteTitle.astro'
|
||||
import Mainmenu from './MainMenu.astro'
|
||||
---
|
||||
<Sitetitle>
|
||||
<slot/>
|
||||
</Sitetitle>
|
||||
|
||||
<Mainmenu>
|
||||
<slot/>
|
||||
</Mainmenu>
|
||||
@ -1,24 +1,22 @@
|
||||
---
|
||||
import '../styles/base.css';
|
||||
interface Props {
|
||||
title: string;
|
||||
}
|
||||
|
||||
const { title } = Astro.props;
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="description" content="Astro description" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/all.min.css" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>Astro Basics</title>
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,46 +1,11 @@
|
||||
---
|
||||
import Welcome from '../components/Welcome.astro';
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import Leftnav from '../components/Leftnav.astro';
|
||||
import Topbar from '../components/Topbar.astro';
|
||||
import Maincontent from '../components/Maincontent.astro';
|
||||
|
||||
// Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
|
||||
// Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh.
|
||||
---
|
||||
|
||||
<Layout title="Welcome to Astro.">
|
||||
<main class="flex min-h-screen max-h-screen">
|
||||
<div class="flex min-h-screen w-screen flex-col bg-slate-400 grow-0 break-all max-h-screen">
|
||||
<Topbar>
|
||||
|
||||
</Topbar>
|
||||
<div class="flex h-auto w-screen flex-row grow overflow-hidden">
|
||||
<Leftnav>
|
||||
<ul>
|
||||
<li><i class="fa fa-fan text-sm text-blue-900 pl-2"></i>Test</li>
|
||||
<li>Test</li>
|
||||
<li>Test</li>
|
||||
<li>Test</li>
|
||||
<li>Test</li>
|
||||
<li>Test</li>
|
||||
</ul>
|
||||
</Leftnav>
|
||||
<Maincontent>
|
||||
<p>
|
||||
<span class="font-fsctitle">Hallo Welt</span><br>
|
||||
<span class="font-fsc">Hallo Welt</span><br>
|
||||
<span class="font-roboto">Hallo Welt</span><br>
|
||||
Hallo Welt<br>
|
||||
COntent Data<br>
|
||||
COntent Data<br>
|
||||
COntent Data<br>
|
||||
COntent Data<br>
|
||||
COntent Data<br>
|
||||
COntent Data<br>
|
||||
</p>
|
||||
</Maincontent>
|
||||
</div>
|
||||
<Footer>Footer Data</Footer>
|
||||
</div>
|
||||
</main>
|
||||
<Layout>
|
||||
<Welcome />
|
||||
</Layout>
|
||||
|
||||
|
||||
|
||||
@ -1,21 +0,0 @@
|
||||
/* The integration's default injected base.css file */
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
|
||||
@font-face {
|
||||
font-family: "fsc";
|
||||
src: url("/webfonts/firasans-regular.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "fsctitle";
|
||||
src: url("/webfonts/sansita-regular.otf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "roboto";
|
||||
src: url("/webfonts/roboto-regular.ttf");
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,14 +0,0 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily :{
|
||||
fsc: ["fsc","sans-serif"],
|
||||
fsctitle: ["fsctitle","sans"],
|
||||
roboto: ["roboto","sans"],
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user