Making the web svelter with SvelteKit

# Making the web Svelter with SvelteKit

### Part 4 - Local and global CSS

[Back to part 3](part3_slides.html)
						---
						## Where to include CSS?

- Inside a +page.svelte og +layout.svelte file
							- CSS is always page-component-specific
						- Inside a component .svelte file
							- CSS is available wherever the component i used -
						- In a separate .css file
							- Can be imported and used site-wide via import '/path/to/css/file'
						---
						## Component-specific CSS

<img src="images/part4_css.png" />
						---
						## Global CSS from components

<img src="images/part4_css_2.png" />
						---
						## Including from a CSS file

```svelte [2]
						<script>
							import '../app.css';
							import Slideshow from "$lib/components/Slideshow.svelte";
							import PhotoAlbumIndex from "$lib/components/PhotoAlbumIndex.svelte";

export let data;
						</script>

<style>

</style>
						```
						---
						## /app.css

```css []
						body {
							font-family: sans-serif;
							line-height: 1.15;
							margin: 0;
						}

a {
							text-decoration: none;
						}
						```
						---
						## Import /app.css in /src/routes/+page.svelte

```svelte [2]
						<script>
							 import '../app.css';
							 import Slideshow from "$lib/components/Slideshow.svelte";

export let data;
						 </script>
						```
						---
						## Add HTML to +page.svelte

```svelte []
						<div class="photo-albums-area">
							 <h1>Fotoalbum</h1>

<div class="photo-album-grid">
								 <a href="/album/makro">
									 <div class="grid-item">
										 <img class="grid-item-photo" src="/images/IMGP4117.jpg">
										 <div class="grid-item-caption">
											 <h1>makro</h1>
										 </div>
									 </div>
								 </a>
								 <a href="/album/norge2020">
									 <div class="grid-item">
										 <img class="grid-item-photo" src="/images/background1.jpg">
										 <div class="grid-item-caption">
											 <h1>Norge 2020</h1>
										 </div>
									 </div>
								 </a>
							 </div>
						 </div>
						```
						---
						## And CSS

```svelte []
						<style>
							 .photo-albums-area h1 {
								 text-align: center;
								 margin-top: 40px;
								 margin-bottom: 40px;
								 font-weight: 100;
								 font-size: 4rem;
							 }

.photo-album-grid {
								 display: grid;
								 grid-template-columns: repeat(3, 30vw);
								 grid-gap: 3%;
								 margin-left: 1%;
							 }

.grid-item {
								 width: 30vw;
								 height: 20vh;
								 transition: opacity 0.3s ease-in-out, transform 0.5s;
								 overflow: hidden;
							 }

.grid-item img {
								 width: 30vw;
								 height: 20vh;
								 object-fit: cover;
								 transition: opacity 0.3s ease-in-out, transform 2s;
							 }

.grid-item:hover img {
								 transform: scale(1.7);
							 }

.grid-item-caption {
								 position: relative;
								 top: -120px;
								 opacity: 0;
							 }

.grid-item:hover {
								 transform: scale(1.15);
							 }

.in-album .grid-item-caption {
								 top: -100px;
							 }

.in-album .grid-item:hover {
								 transform: scale(1);
							 }

.in-album .grid-item-caption h1 {
								 font-size: 1em;
							 }

.grid-item-caption {
								 animation: ease-in-out 1s;
							 }

.grid-item:hover .grid-item-caption {
								 opacity: 1;
								 background: rgba(0,0,0,0.5);
							 }

.grid-item-caption h1 {
								 text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
								 font-size: 3em;
								 color: white;
								 font-weight: 100;
							 }
						</style>
						```
						---
						## Onwards

[part 5](part5_slides.html)