denizk0461/pages
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

alt banner now has max width

Browse Source
This commit is contained in:
denizk0461
2025-04-18 13:57:24 +02:00
parent 9e582615fc
commit 5b24ab0726
2 changed files with 19 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
README.md
View File

@@ -1,38 +1,3 @@
# sv # pages-svelte
Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli). Svelte repository for my website hosted at [https://denizk0461.codeberg.page/](https://denizk0461.codeberg.page/)
## Creating a project
If you're seeing this, you've probably already done this step. Congrats!
```bash
# create a new project in the current directory
npx sv create
# create a new project in my-app
npx sv create my-app
```
## Developing
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
```bash
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
```
## Building
To create a production version of your app:
```bash
npm run build
```
You can preview the production build with `npm run preview`.
> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

27
src/lib/banner-title-alt.svelte
View File

@@ -14,14 +14,16 @@
</script> </script>
<div class="container"> <div class="container">
<div class="img-container"> <div class="subcontainer">
<img src="{banner}"> <div class="img-container">
</div> <img src="{banner}">
<div class="text-container"> </div>
<h1 class="title">{title}</h1> <div class="text-container">
{#if subtitle} <h1 class="title">{title}</h1>
<p class="subtitle">{subtitle}</p> {#if subtitle}
{/if} <p class="subtitle">{subtitle}</p>
{/if}
</div>
</div> </div>
</div> </div>
@@ -29,12 +31,17 @@
<style> <style>
.container { .container {
position: relative;
width: 100%; width: 100%;
background-color: var(--color-background-highlight);
}
.subcontainer {
max-width: 1600px;
height: 600px; height: 600px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
background-color: var(--color-background-highlight); margin-left: auto;
margin-right: auto;
} }
.img-container { .img-container {