added the second image page
This commit is contained in:
parent
f2ecccdfd5
commit
49f68c9f58
@ -7,8 +7,8 @@
|
||||
|
||||
<nav>
|
||||
<ul id="nav-pc">
|
||||
<li class={path === '/images/23' ? 'active' : ''}><a href="/">2023</a></li>
|
||||
<li class={path === '/images/23.1' ? 'active' : ''}><a href="/">2023.1</a></li>
|
||||
<li class={path === '/images/23' ? 'active' : ''}><a href="/images/23">2023</a></li>
|
||||
<li class={path === '/images/23.1' ? 'active' : ''}><a href="/images/23.1">2023.1</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
65
src/routes/images/23.1/+page.svelte
Normal file
65
src/routes/images/23.1/+page.svelte
Normal file
@ -0,0 +1,65 @@
|
||||
<script>
|
||||
import Nav from "../../Nav.svelte";
|
||||
import ImagesNav from "../../components/images-nav.svelte";
|
||||
</script>
|
||||
|
||||
<Nav />
|
||||
<ImagesNav />
|
||||
|
||||
<div class="main">
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
|
||||
</div>
|
||||
<div class="column">
|
||||
|
||||
</div>
|
||||
<div class="column">
|
||||
|
||||
</div>
|
||||
<div class="column">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.main {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
/* Create four equal columns that sits next to each other */
|
||||
.column {
|
||||
flex: 25%;
|
||||
max-width: 25%;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.column img {
|
||||
margin-top: 8px;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Responsive layout - makes a two column-layout instead of four columns */
|
||||
@media screen and (max-width: 800px) {
|
||||
.column {
|
||||
flex: 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
|
||||
@media screen and (max-width: 600px) {
|
||||
.column {
|
||||
flex: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user