lil home page
This commit is contained in:
Chaoscaot
+7
-2
@@ -1,5 +1,5 @@
|
||||
import i18n from "astro-i18n"
|
||||
import { defineConfig } from 'astro/config';
|
||||
import { defineConfig, sharpImageService } from 'astro/config';
|
||||
import svelte from "@astrojs/svelte";
|
||||
import tailwind from "@astrojs/tailwind";
|
||||
|
||||
@@ -8,5 +8,10 @@ import prefetch from "@astrojs/prefetch";
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
output: "static",
|
||||
integrations: [i18n(), svelte(), tailwind()]
|
||||
image: {
|
||||
service: sharpImageService(),
|
||||
},
|
||||
integrations: [i18n(), svelte(), tailwind(), prefetch({
|
||||
selector: "a"
|
||||
})]
|
||||
});
|
||||
|
||||
+29
-25
@@ -1,27 +1,31 @@
|
||||
{
|
||||
"name": "steamwar-website",
|
||||
"type": "module",
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview",
|
||||
"astro": "astro",
|
||||
"i18n:install": "astro-i18n install",
|
||||
"i18n:sync": "astro-i18n sync",
|
||||
"i18n:extract:keys": "astro-i18n extract:keys"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/prefetch": "^0.4.0",
|
||||
"@astrojs/svelte": "^4.0.2",
|
||||
"@astrojs/tailwind": "^5.0.0",
|
||||
"@astropub/icons": "^0.2.0",
|
||||
"astro-i18n": "^1.8.1",
|
||||
"tailwindcss": "^3.0.24",
|
||||
"svelte": "^4.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"astro": "^3.1.1"
|
||||
}
|
||||
"name": "steamwar-website",
|
||||
"type": "module",
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview",
|
||||
"astro": "astro",
|
||||
"i18n:install": "astro-i18n install",
|
||||
"i18n:sync": "astro-i18n sync",
|
||||
"i18n:extract:keys": "astro-i18n extract:keys"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/prefetch": "^0.4.0",
|
||||
"@astrojs/svelte": "^4.0.2",
|
||||
"@astrojs/tailwind": "^5.0.0",
|
||||
"@astropub/icons": "^0.2.0",
|
||||
"@types/node": "^20.6.3",
|
||||
"astro-i18n": "^1.8.1",
|
||||
"cssnano": "^6.0.1",
|
||||
"postcss-nesting": "^12.0.1",
|
||||
"svelte": "^4.0.0",
|
||||
"tailwindcss": "^3.0.24"
|
||||
},
|
||||
"dependencies": {
|
||||
"astro": "^3.1.1",
|
||||
"sharp": "^0.32.6"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
autoprefixer: {},
|
||||
cssnano: {},
|
||||
'tailwindcss/nesting': 'postcss-nesting',
|
||||
tailwindcss: {},
|
||||
},
|
||||
};
|
||||
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,127 @@
|
||||
/* barlow-condensed-thin */
|
||||
@font-face {
|
||||
font-family: Barlow Condensed;
|
||||
font-style: normal;
|
||||
font-weight: 100;
|
||||
src: local("Barlow Condensed Thin"), local("BarlowCondensed-Thin"), url(barlow-condensed-thin.woff2) format("woff2");
|
||||
}
|
||||
/* barlow-condensed-thin-italic */
|
||||
@font-face {
|
||||
font-family: Barlow Condensed;
|
||||
font-style: italic;
|
||||
font-weight: 100;
|
||||
src: local("Barlow Condensed Thin Italic"), local("BarlowCondensed-ThinItalic"), url(barlow-condensed-thin-italic.woff2) format("woff2");
|
||||
}
|
||||
/* barlow-condensed-extralight */
|
||||
@font-face {
|
||||
font-family: Barlow Condensed;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Barlow Condensed ExtraLight"), local("BarlowCondensed-ExtraLight"), url(barlow-condensed-extralight.woff2) format("woff2");
|
||||
}
|
||||
/* barlow-condensed-extralight-italic */
|
||||
@font-face {
|
||||
font-family: Barlow Condensed;
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local("Barlow Condensed ExtraLight Italic"), local("BarlowCondensed-ExtraLightItalic"), url(barlow-condensed-extralight-italic.woff2) format("woff2");
|
||||
}
|
||||
/* barlow-condensed-light */
|
||||
@font-face {
|
||||
font-family: Barlow Condensed;
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: local("Barlow Condensed Light"), local("BarlowCondensed-Light"), url(barlow-condensed-light.woff2) format("woff2");
|
||||
}
|
||||
/* barlow-condensed-light-italic */
|
||||
@font-face {
|
||||
font-family: Barlow Condensed;
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
src: local("Barlow Condensed Light Italic"), local("BarlowCondensed-LightItalic"), url(barlow-condensed-light-italic.woff2) format("woff2");
|
||||
}
|
||||
/* barlow-condensed-regular */
|
||||
@font-face {
|
||||
font-family: Barlow Condensed;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Barlow Condensed Regular"), local("BarlowCondensed-Regular"), url(barlow-condensed-regular.woff2) format("woff2");
|
||||
}
|
||||
/* barlow-condensed-italic */
|
||||
@font-face {
|
||||
font-family: Barlow Condensed;
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local("Barlow Condensed Italic"), local("BarlowCondensed-Italic"), url(barlow-condensed-italic.woff2) format("woff2");
|
||||
}
|
||||
/* barlow-condensed-medium */
|
||||
@font-face {
|
||||
font-family: Barlow Condensed;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: local("Barlow Condensed Medium"), local("BarlowCondensed-Medium"), url(barlow-condensed-medium.woff2) format("woff2");
|
||||
}
|
||||
/* barlow-condensed-medium-italic */
|
||||
@font-face {
|
||||
font-family: Barlow Condensed;
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
src: local("Barlow Condensed Medium Italic"), local("BarlowCondensed-MediumItalic"), url(barlow-condensed-medium-italic.woff2) format("woff2");
|
||||
}
|
||||
/* barlow-condensed-semibold */
|
||||
@font-face {
|
||||
font-family: Barlow Condensed;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Barlow Condensed SemiBold"), local("BarlowCondensed-SemiBold"), url(barlow-condensed-semibold.woff2) format("woff2");
|
||||
}
|
||||
/* barlow-condensed-semibold-italic */
|
||||
@font-face {
|
||||
font-family: Barlow Condensed;
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local("Barlow Condensed SemiBold Italic"), local("BarlowCondensed-SemiBoldItalic"), url(barlow-condensed-semibold-italic.woff2) format("woff2");
|
||||
}
|
||||
/* barlow-condensed-bold */
|
||||
@font-face {
|
||||
font-family: Barlow Condensed;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local("Barlow Condensed Bold"), local("BarlowCondensed-Bold"), url(barlow-condensed-bold.woff2) format("woff2");
|
||||
}
|
||||
/* barlow-condensed-bold-italic */
|
||||
@font-face {
|
||||
font-family: Barlow Condensed;
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
src: local("Barlow Condensed Bold Italic"), local("BarlowCondensed-BoldItalic"), url(barlow-condensed-bold-italic.woff2) format("woff2");
|
||||
}
|
||||
/* barlow-condensed-extrabold */
|
||||
@font-face {
|
||||
font-family: Barlow Condensed;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Barlow Condensed ExtraBold"), local("BarlowCondensed-ExtraBold"), url(barlow-condensed-extrabold.woff2) format("woff2");
|
||||
}
|
||||
/* barlow-condensed-extrabold-italic */
|
||||
@font-face {
|
||||
font-family: Barlow Condensed;
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local("Barlow Condensed ExtraBold Italic"), local("BarlowCondensed-ExtraBoldItalic"), url(barlow-condensed-extrabold-italic.woff2) format("woff2");
|
||||
}
|
||||
/* barlow-condensed-black */
|
||||
@font-face {
|
||||
font-family: Barlow Condensed;
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
src: local("Barlow Condensed Black"), local("BarlowCondensed-Black"), url(barlow-condensed-black.woff2) format("woff2");
|
||||
}
|
||||
/* barlow-condensed-black-italic */
|
||||
@font-face {
|
||||
font-family: Barlow Condensed;
|
||||
font-style: italic;
|
||||
font-weight: 900;
|
||||
src: local("Barlow Condensed Black Italic"), local("BarlowCondensed-BlackItalic"), url(barlow-condensed-black-italic.woff2) format("woff2");
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 304 KiB |
@@ -0,0 +1,21 @@
|
||||
---
|
||||
|
||||
import {astroI18n} from "astro-i18n";
|
||||
const { title, description } = Astro.props.frontmatter || Astro.props;
|
||||
---
|
||||
|
||||
<html lang={astroI18n.langCode}>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="description" content={description}/>
|
||||
<title>{title}</title>
|
||||
<slot name="head" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
import Basic from "./Basic.astro";
|
||||
import { Image } from 'astro:assets';
|
||||
import '../styles/button.css';
|
||||
import localLogo from "../images/logo.png"
|
||||
import {l, t} from "astro-i18n";
|
||||
|
||||
const { title } = Astro.props;
|
||||
---
|
||||
|
||||
<Basic title={title}>
|
||||
<slot name="head" slot="head" />
|
||||
<Fragment>
|
||||
<div>
|
||||
<nav-bar class="h-24 sm:h-12 fixed top-0 left-0 right-0 flex flex-col sm:flex-row items-center justify-evenly sm:justify-between px-4 transition-colors z-10 \
|
||||
before:bg-transparent before:absolute before:top-0 before:left-0 before:bottom-0 before:right-0 before:bg-black before:-z-10 before:scale-y-0 before:transition-transform before:origin-top">
|
||||
<a class="flex items-center" href={l("/")}>
|
||||
<Image src={localLogo} alt={t("navbar.logo.alt")} width="44" height="44" quality="max" class="mr-2 p-1 bg-black rounded-full" />
|
||||
<h1 class="text-2xl uppercase font-bold inline-block">
|
||||
{t("navbar.title")}
|
||||
</h1>
|
||||
</a>
|
||||
<div class="flex items-center">
|
||||
<a class="btn btn-gray" href={l("/")}>
|
||||
<span class="btn__text">Start</span>
|
||||
</a>
|
||||
<a class="btn btn-gray" rel="prefetch" href={l("/blog")}>
|
||||
<span class="btn__text">Blog</span>
|
||||
</a>
|
||||
<a class="btn">
|
||||
<span class="btn__text">Login</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav-bar>
|
||||
<script>
|
||||
class Navbar extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
if (window.scrollY != 0) {
|
||||
this.classList.add("scrolled");
|
||||
} else {
|
||||
this.classList.remove("scrolled");
|
||||
}
|
||||
|
||||
window.onscroll = e => {
|
||||
if (window.scrollY != 0) {
|
||||
this.classList.add("scrolled");
|
||||
} else {
|
||||
this.classList.remove("scrolled");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('nav-bar', Navbar);
|
||||
</script>
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
</div>
|
||||
</Fragment>
|
||||
</Basic>
|
||||
|
||||
<style>
|
||||
.scrolled {
|
||||
@apply text-white;
|
||||
|
||||
&::before {
|
||||
@apply scale-y-100;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+15
-1
@@ -1,3 +1,17 @@
|
||||
{
|
||||
"hello": "Hello, World!"
|
||||
"home": {
|
||||
"title": "SteamWar.de",
|
||||
"subtitle": {
|
||||
"1": "Players Online: ",
|
||||
"2": "WarGears, AirShips, WarShips",
|
||||
"3": "Version: 1.12 - 1.20"
|
||||
},
|
||||
"join": "Join Now"
|
||||
},
|
||||
"navbar": {
|
||||
"title": "SteamWar.de",
|
||||
"logo": {
|
||||
"alt": "SteamWar.de Logo"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
import NavBarLayout from '../layouts/NavbarLayout.astro'
|
||||
---
|
||||
|
||||
<NavBarLayout title="Blog">
|
||||
<h1>Blog!</h1>
|
||||
</NavBarLayout>
|
||||
+102
-14
@@ -1,17 +1,105 @@
|
||||
---
|
||||
import { t } from "astro-i18n";
|
||||
import * as Icon from '@astropub/icons';
|
||||
import NavbarLayout from "../layouts/NavbarLayout.astro";
|
||||
|
||||
import { Image } from "astro:assets";
|
||||
import localBau from "../images/2022-03-28_13.18.25.png";
|
||||
import {l, t} from "astro-i18n";
|
||||
import {CaretRight} from "@astropub/icons"
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>Astro</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>{t("hello")}</h1>
|
||||
</body>
|
||||
</html>
|
||||
<NavbarLayout title="SteamWar.de - Home">
|
||||
<div class="w-screen h-screen relative mb-4">
|
||||
<Image src={localBau} alt="Bau" width="1920" height="1080" class="w-screen object-cover rounded-b-2xl shadow-2xl" style="height: calc(100vh + 1rem)" draggable="false" />
|
||||
<drop-in class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
|
||||
<h1 class="text-2xl sm:text-8xl font-extrabold text-white -translate-y-16 opacity-0 barlow" style="transition: transform .7s ease-out, opacity .7s linear; text-shadow: 2px 2px 5px black">{t("home.title")}</h1>
|
||||
<text-carousel class="h-20 w-full relative select-none">
|
||||
<h2 class="-translate-y-16">{t("home.subtitle.1")}<player-count /></h2>
|
||||
<h2>{t("home.subtitle.2")}</h2>
|
||||
<h2>{t("home.subtitle.3")}</h2>
|
||||
</text-carousel>
|
||||
<a href={l("join")} class="btn mt-32 px-8 flex opacity-0 -translate-y-16" style="transition: transform .3s ease-out, opacity .3s linear">{t("home.join")} <CaretRight width="24" heigth="24" /></a>
|
||||
<script>
|
||||
class TextCarousel extends HTMLElement {
|
||||
current = 0;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.children[this.current].classList.add("!opacity-100")
|
||||
|
||||
for (let i = 0; i < this.children.length; i++) {
|
||||
if (i !== this.current) {
|
||||
this.children[i].classList.add("translate-y-8")
|
||||
}
|
||||
}
|
||||
|
||||
setInterval(() => {
|
||||
this.next()
|
||||
}, 5000)
|
||||
}
|
||||
|
||||
next() {
|
||||
this.children[this.current].classList.remove("!opacity-100")
|
||||
this.children[this.current].classList.add("translate-y-8")
|
||||
this.children[this.current].classList.remove("!delay-500")
|
||||
this.current = (this.current + 1) % this.children.length
|
||||
this.children[this.current].classList.add("!opacity-100")
|
||||
this.children[this.current].classList.remove("translate-y-8")
|
||||
this.children[this.current].classList.add("!delay-500")
|
||||
}
|
||||
}
|
||||
|
||||
class PlayerCount extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.innerText = String(Math.floor(Math.random() * 100))
|
||||
}
|
||||
}
|
||||
|
||||
class DropIn extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
for (let child of this.children) {
|
||||
if(child.classList.contains("opacity-0")) {
|
||||
child.classList.remove("opacity-0")
|
||||
child.classList.remove("-translate-y-16")
|
||||
} else {
|
||||
child.children[0].classList.remove("opacity-0")
|
||||
child.children[0].classList.remove("-translate-y-16")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("player-count", PlayerCount);
|
||||
customElements.define("text-carousel", TextCarousel);
|
||||
customElements.define("drop-in", DropIn);
|
||||
</script>
|
||||
</drop-in>
|
||||
</div>
|
||||
<h2>HELLO!</h2>
|
||||
</NavbarLayout>
|
||||
|
||||
<style>
|
||||
@import url("/fonts/barlow-condensed/barlow-condensed.css");
|
||||
|
||||
text-carousel{
|
||||
>* {
|
||||
@apply absolute top-0 left-0 w-full text-xl sm:text-4xl underline text-white text-center opacity-0;
|
||||
transition: transform .5s ease-out, opacity .5s linear;
|
||||
text-shadow: 2px 2px 5px black;
|
||||
}
|
||||
}
|
||||
|
||||
.barlow {
|
||||
font-family: Barlow Condensed;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
|
||||
import NavbarLayout from "../layouts/NavbarLayout.astro";---
|
||||
|
||||
<NavbarLayout title="Join">
|
||||
|
||||
</NavbarLayout>
|
||||
@@ -0,0 +1,26 @@
|
||||
.btn {
|
||||
@apply bg-blue-800 text-white font-bold py-2 px-4 rounded cursor-pointer select-none mx-2;
|
||||
@apply hover:bg-blue-700;
|
||||
transition: all 0.5s cubic-bezier(.2,3,.67,.6),
|
||||
background-color .1s ease-in-out,
|
||||
outline-width .1s ease-in-out,
|
||||
outline-color .1s ease-in-out;
|
||||
@apply active:scale-90;
|
||||
|
||||
.btn__text {
|
||||
@apply inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-gray {
|
||||
@apply bg-gray-800 text-white font-bold py-2 px-4 rounded cursor-pointer select-none mx-2;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
@apply bg-transparent underline;
|
||||
@apply hover:bg-transparent hover:outline hover:outline-1;
|
||||
|
||||
.btn__text {
|
||||
@apply underline;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
|
||||
import { randomBytes } from 'crypto'
|
||||
|
||||
const usedIds = new Set<string>()
|
||||
|
||||
export const getRandomId = () => {
|
||||
while (true) {
|
||||
const id = randomBytes(4).toString('hex')
|
||||
if (!usedIds.has(id)) {
|
||||
usedIds.add(id)
|
||||
return id
|
||||
}
|
||||
}
|
||||
}
|
||||
+4
-1
@@ -1,8 +1,11 @@
|
||||
const defaultTheme = require("tailwindcss/defaultTheme");
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
|
||||
theme: {
|
||||
extend: {},
|
||||
extend: {
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user