Setup Astro project and start working on placeholder page
This commit is contained in:
Michael Rieger
+9
-1
@@ -1,5 +1,13 @@
|
||||
// @ts-check
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
||||
import vue from '@astrojs/vue';
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({});
|
||||
export default defineConfig({
|
||||
integrations: [vue()],
|
||||
i18n: {
|
||||
locales: ["en", "de"],
|
||||
defaultLocale: "en"
|
||||
}
|
||||
});
|
||||
+3
-1
@@ -9,6 +9,8 @@
|
||||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"astro": "^5.12.8"
|
||||
"@astrojs/vue": "^5.1.1",
|
||||
"astro": "^5.13.7",
|
||||
"vue": "^3.5.21"
|
||||
}
|
||||
}
|
||||
Generated
+1327
-165
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,27 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 1000 864" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;" fill="rgb(249,66,58)">
|
||||
<g transform="matrix(1,0,0,1,-22832,-13160)">
|
||||
<g id="Icon-only" serif:id="Icon only" transform="matrix(1.30093,0,0,1.64796,-6871.74,-8527.42)">
|
||||
<rect x="22832.7" y="13160.1" width="768.682" height="524.101" style="fill:none;"/>
|
||||
<clipPath id="_clip1">
|
||||
<rect x="22832.7" y="13160.1" width="768.682" height="524.101"/>
|
||||
</clipPath>
|
||||
<g clip-path="url(#_clip1)">
|
||||
<g transform="matrix(3.51664,-2.77609,4.85724,3.83438,-7621.9,14375.8)">
|
||||
<g>
|
||||
<g transform="matrix(0.289115,2.12499e-17,3.07699e-17,0.209319,4358.32,3013.71)">
|
||||
<path d="M497.087,0L584.587,0L706.554,121.967L706.554,400L584.587,400L584.587,245.209C584.587,192.104 553.45,146.328 510.132,125C497.502,118.781 483.836,114.641 469.604,113.004C466.294,112.623 462.952,112.377 459.587,112.273L459.587,37.5C459.587,16.803 476.39,0 497.087,0Z" fill="cuu"/>
|
||||
</g>
|
||||
<g transform="matrix(0.289115,2.12499e-17,3.07699e-17,0.209319,4358.32,3013.71)">
|
||||
<path d="M859.587,200L659.587,0L822.087,0C842.783,0 859.587,16.803 859.587,37.5L859.587,200Z" fill="cuu"/>
|
||||
</g>
|
||||
<g transform="matrix(0.289115,2.12499e-17,3.07699e-17,0.209319,4358.32,3013.71)">
|
||||
<path d="M759.587,400L759.587,175L859.587,275L859.587,362.5C859.587,383.197 842.783,400 822.087,400L759.587,400Z" fill="cuu"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 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.
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.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,45 @@
|
||||
<style is:global>
|
||||
@import url('../styles/archivo.css');
|
||||
@import url('../styles/clash-display.css');
|
||||
|
||||
:root {
|
||||
--clr-ts-warm-red: hsl(3, 94%, 60%);
|
||||
--clr-ts-dark: hsl(7, 18%, 10%);
|
||||
--clr-ts-dark-logo: hsl(7, 18%, 13%);
|
||||
--clr-ts-light: hsl(349, 57%, 91%);
|
||||
|
||||
--ff-heading: "Clash Display", sans-serif;
|
||||
--ff-body: "Archivo", sans-serif;
|
||||
|
||||
--fs-xl: clamp(3.75rem, 5vw + 1rem, 6rem);
|
||||
--fs-600: 1.5rem;
|
||||
--fs-500: 1.25rem;
|
||||
--fs-400: 1rem;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--clr-ts-dark);
|
||||
color: var(--clr-ts-light);
|
||||
font-family: var(--ff-body);
|
||||
font-size: var(--fs-400);
|
||||
padding: clamp(2rem, 5vw + 1rem, 3.75rem);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: var(--ff-heading);
|
||||
font-size: var(--fs-xl);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,65 @@
|
||||
---
|
||||
import { Image } from "astro:assets";
|
||||
import { getRelativeLocaleUrl } from "astro:i18n";
|
||||
import logo from "../assets/ci/icon-only.svg";
|
||||
|
||||
const isEnglish = Astro.currentLocale === "en";
|
||||
---
|
||||
|
||||
<header>
|
||||
<div>
|
||||
<Image
|
||||
class="icon"
|
||||
src={logo}
|
||||
loading="eager"
|
||||
alt="Tideshift Digital logo mark"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
class:list={[{ active: isEnglish }]}
|
||||
href={getRelativeLocaleUrl("en", "")}>EN</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class:list={[{ active: !isEnglish }]}
|
||||
href={getRelativeLocaleUrl("de", "")}>DE</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border: 1px solid var(--clr-ts-warm-red);
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 60px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
ul {
|
||||
a {
|
||||
color: var(--clr-ts-light);
|
||||
text-decoration: none;
|
||||
|
||||
&.active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,38 @@
|
||||
---
|
||||
import { Image } from "astro:assets";
|
||||
import Logo from "../assets/ci/icon-only.svg";
|
||||
---
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<h1 class="title">Smart websites for bold ideas.</h1>
|
||||
|
||||
<p>
|
||||
From concept to launch — websites, apps, and digital solutions that
|
||||
work hard, so you can play hard. Whether it's a personal site, an
|
||||
e-commerce platform, or a custom web app, I bring your ideas to
|
||||
life.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Logo class="logo" />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
max-width: 16ch;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
line-height: 1.1;
|
||||
letter-spacing: 0.0333em;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 50ch;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.logo {
|
||||
fill: var(--clr-ts-dark-logo) !important;
|
||||
}
|
||||
</style>
|
||||
@@ -40,6 +40,8 @@ import background from '../assets/background.svg';
|
||||
improvements in Astro 5.0
|
||||
</p>
|
||||
</a>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
@@ -1,3 +1,8 @@
|
||||
---
|
||||
import GlobalStyles from "../components/GlobalStyles.astro";
|
||||
import Header from "../components/Header.astro";
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
@@ -5,18 +10,18 @@
|
||||
<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>
|
||||
<title>Tideshift Digital - Building the Web on Your Terms</title>
|
||||
</head>
|
||||
<body>
|
||||
<GlobalStyles />
|
||||
<Header />
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 100dvh;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
---
|
||||
import Layout from '../../layouts/Layout.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>
|
||||
<h1>Hallo miteinander!</h1>
|
||||
</Layout>
|
||||
@@ -1,12 +1,8 @@
|
||||
---
|
||||
import Welcome from '../components/Welcome.astro';
|
||||
import Layout from '../layouts/Layout.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.
|
||||
// TEST for workflow
|
||||
import Hero from "../components/Hero.astro";
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<Welcome />
|
||||
<Hero />
|
||||
</Layout>
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
/**
|
||||
* @license
|
||||
*
|
||||
* Font Family: Archivo
|
||||
* Designed by: Omnibus-Type
|
||||
* URL: https://www.fontshare.com/fonts/archivo
|
||||
* © 2025 Indian Type Foundry
|
||||
*
|
||||
* Archivo Light
|
||||
* Archivo Regular
|
||||
* Archivo Italic
|
||||
* Archivo SemiBold
|
||||
|
||||
*
|
||||
*/
|
||||
@font-face {
|
||||
font-family: 'Archivo';
|
||||
src: url('../assets/fonts/archivo/Archivo-Light.woff2') format('woff2'),
|
||||
url('../assets/fonts/archivo/Archivo-Light.woff') format('woff'),
|
||||
url('../assets/fonts/archivo/Archivo-Light.ttf') format('truetype');
|
||||
font-weight: 300;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Archivo';
|
||||
src: url('../assets/fonts/archivo/Archivo-Regular.woff2') format('woff2'),
|
||||
url('../assets/fonts/archivo/Archivo-Regular.woff') format('woff'),
|
||||
url('../assets/fonts/archivo/Archivo-Regular.ttf') format('truetype');
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Archivo';
|
||||
src: url('../assets/fonts/archivo/Archivo-Italic.woff2') format('woff2'),
|
||||
url('../assets/fonts/archivo/Archivo-Italic.woff') format('woff'),
|
||||
url('../assets/fonts/archivo/Archivo-Italic.ttf') format('truetype');
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Archivo';
|
||||
src: url('../assets/fonts/archivo/Archivo-SemiBold.woff2') format('woff2'),
|
||||
url('../assets/fonts/archivo/Archivo-SemiBold.woff') format('woff'),
|
||||
url('../assets/fonts/archivo/Archivo-SemiBold.ttf') format('truetype');
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
/**
|
||||
* @license
|
||||
*
|
||||
* Font Family: Clash Display
|
||||
* Designed by: Indian Type Foundry
|
||||
* URL: https://www.fontshare.com/fonts/clash-display
|
||||
* © 2025 Indian Type Foundry
|
||||
*
|
||||
* Clash Display Regular
|
||||
* Clash Display Semibold
|
||||
* Clash Display Bold
|
||||
|
||||
*
|
||||
*/
|
||||
@font-face {
|
||||
font-family: 'Clash Display';
|
||||
src: url('../assets/fonts/clash/ClashDisplay-Regular.woff2') format('woff2'),
|
||||
url('../assets/fonts/clash/ClashDisplay-Regular.woff') format('woff'),
|
||||
url('../assets/fonts/clash/ClashDisplay-Regular.ttf') format('truetype');
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Clash Display';
|
||||
src: url('../assets/fonts/clash/ClashDisplay-Semibold.woff2') format('woff2'),
|
||||
url('../assets/fonts/clash/ClashDisplay-Semibold.woff') format('woff'),
|
||||
url('../assets/fonts/clash/ClashDisplay-Semibold.ttf') format('truetype');
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Clash Display';
|
||||
src: url('../assets/fonts/clash/ClashDisplay-Bold.woff2') format('woff2'),
|
||||
url('../assets/fonts/clash/ClashDisplay-Bold.woff') format('woff'),
|
||||
url('../assets/fonts/clash/ClashDisplay-Bold.ttf') format('truetype');
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
@import url('./archivo.css');
|
||||
@import url('./clash-display.css');
|
||||
|
||||
:root {
|
||||
--clr-ts-warm-red: hsl(3, 94%, 60%);
|
||||
--clr-ts-dark: hsl(7, 18%, 10%);
|
||||
--clr-ts-light: hsl(349, 57%, 91%);
|
||||
|
||||
--ff-heading: "Clash Display", sans-serif;
|
||||
--ff-body: "Archivo", sans-serif;
|
||||
|
||||
--fs-xl: clamp(3.75rem, 12vw + 1rem, 6rem);
|
||||
--fs-600: 1.5rem;
|
||||
--fs-500: 1.25rem;
|
||||
--fs-400: 1rem;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--clr-ts-dark);
|
||||
color: var(--clr-ts-light);
|
||||
font-family: var(--ff-body);
|
||||
font-size: var(--fs-400);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: var(--ff-heading);
|
||||
font-size: var(--fs-xl);
|
||||
}
|
||||
+10
-2
@@ -1,5 +1,13 @@
|
||||
{
|
||||
"extends": "astro/tsconfigs/strict",
|
||||
"include": [".astro/types.d.ts", "**/*"],
|
||||
"exclude": ["dist"]
|
||||
"include": [
|
||||
".astro/types.d.ts",
|
||||
"**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"dist"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"jsx": "preserve"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user