Updated Navbar.
This commit is contained in:
parent
59845e4e54
commit
c2c30a5b49
8 changed files with 337 additions and 175 deletions
|
|
@ -2,7 +2,7 @@
|
|||
import '$lib/css/base.css';
|
||||
import '$lib/css/archive.css';
|
||||
import SvgIcon from '@jamescoyle/svelte-icon';
|
||||
import { mdiChevronRight, mdiHomeVariantOutline } from '@mdi/js';
|
||||
import { mdiChevronRight } from '@mdi/js';
|
||||
import anime from 'animejs';
|
||||
|
||||
export let fontPost = 1;
|
||||
|
|
|
|||
132
frontend/src/lib/components/navbar.svelte
Normal file
132
frontend/src/lib/components/navbar.svelte
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
<!-- svelte-ignore a11y-missing-content -->
|
||||
<script>
|
||||
import '$lib/css/base.css';
|
||||
import '$lib/css/navbar.css';
|
||||
import { page } from '$app/stores';
|
||||
import anime from 'animejs';
|
||||
|
||||
import Search from '$lib/components/search.svelte';
|
||||
|
||||
const SCROLL = 150;
|
||||
|
||||
$: pageUrl = $page.url.pathname;
|
||||
let scrollY;
|
||||
let cursorX;
|
||||
let cursorY;
|
||||
|
||||
let navbar_title;
|
||||
let navbar_category;
|
||||
let navbar_search;
|
||||
|
||||
function isActive(str, url) {
|
||||
if (url === str) return 'navbar-active';
|
||||
else return '';
|
||||
}
|
||||
|
||||
function isActiveMultiple(strArray, url) {
|
||||
for (const str of strArray) {
|
||||
const returnVal = isActive(str, url);
|
||||
if (returnVal != '') return returnVal;
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
function update_gradient(event, div) {
|
||||
const rect = div.getBoundingClientRect();
|
||||
cursorX = event.clientX - rect.left;
|
||||
cursorY = event.clientY - rect.top;
|
||||
div.style.backgroundImage = `radial-gradient(circle farthest-corner at ${Math.floor(cursorX)}px ${Math.floor(cursorY)}px, var(--navbar-ligher) 0%, var(--navbar-darker) 100%)`;
|
||||
}
|
||||
|
||||
function animateForeground(isEntering, div_back) {
|
||||
const targetOpacity = isEntering ? 1 : 0;
|
||||
|
||||
anime({
|
||||
targets: div_back,
|
||||
opacity: [1 - targetOpacity, targetOpacity],
|
||||
duration: 400,
|
||||
easing: 'easeInOutQuad'
|
||||
});
|
||||
}
|
||||
|
||||
function changeScroll() {
|
||||
document.documentElement.style.setProperty(
|
||||
'--navbar-height',
|
||||
scrollY < SCROLL ? '6rem' : '5rem'
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window bind:scrollY on:scroll={changeScroll} />
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class={scrollY < SCROLL ? 'flex-row' : 'flex-row floating'}>
|
||||
<div
|
||||
role="banner"
|
||||
class="navbar-height flex-row container"
|
||||
on:mousemove={(event) => {
|
||||
update_gradient(event, navbar_title);
|
||||
}}
|
||||
on:mouseenter={() => {
|
||||
animateForeground(true, navbar_title);
|
||||
}}
|
||||
on:mouseleave={() => {
|
||||
animateForeground(false, navbar_title);
|
||||
}}
|
||||
>
|
||||
<div class="navbar-title content">
|
||||
<h1>Etheryo Blog</h1>
|
||||
</div>
|
||||
<div class={scrollY < SCROLL ? 'navbar-overlay-front' : ''} />
|
||||
<div class={scrollY < SCROLL ? 'navbar-overlay-back' : ''} bind:this={navbar_title} />
|
||||
</div>
|
||||
|
||||
<div
|
||||
role="banner"
|
||||
class="navbar-height flex-row flex-end container"
|
||||
on:mousemove={(event) => {
|
||||
update_gradient(event, navbar_category);
|
||||
}}
|
||||
on:mouseenter={() => {
|
||||
animateForeground(true, navbar_category);
|
||||
}}
|
||||
on:mouseleave={() => {
|
||||
animateForeground(false, navbar_category);
|
||||
}}
|
||||
>
|
||||
<div class="content navbar-categories">
|
||||
<div>
|
||||
<a class={isActiveMultiple(['/', '/articles', '/style'], pageUrl)} href="/articles"
|
||||
>Articles</a
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<a class={isActive('/authors', pageUrl)} href="/authors">Auteurs</a>
|
||||
</div>
|
||||
<div>
|
||||
<a class={isActive('/categories', pageUrl)} href="/categories">Catégories</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class={scrollY < SCROLL ? 'navbar-overlay-front' : ''} />
|
||||
<div class={scrollY < SCROLL ? 'navbar-overlay-back' : ''} bind:this={navbar_category} />
|
||||
</div>
|
||||
|
||||
<div
|
||||
role="banner"
|
||||
class="navbar-height flex-row container"
|
||||
on:mousemove={(event) => {
|
||||
update_gradient(event, navbar_search);
|
||||
}}
|
||||
on:mouseenter={() => {
|
||||
animateForeground(true, navbar_search);
|
||||
}}
|
||||
on:mouseleave={() => {
|
||||
animateForeground(false, navbar_search);
|
||||
}}
|
||||
>
|
||||
<div class="content navbar-search"><Search /></div>
|
||||
<div class={scrollY < SCROLL ? 'navbar-overlay-front' : ''} />
|
||||
<div class={scrollY < SCROLL ? 'navbar-overlay-back' : ''} bind:this={navbar_search} />
|
||||
</div>
|
||||
</nav>
|
||||
<div class="navbar-fake" />
|
||||
|
|
@ -80,6 +80,11 @@ h1 {
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
.center {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.margin-padding-0 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -93,3 +98,24 @@ h1 {
|
|||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.margin-left-3 {
|
||||
margin-left: 3rem;
|
||||
}
|
||||
|
||||
.margin-05 {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.padding-left-3 {
|
||||
padding-left: 3rem;
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.inherit-w-h {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
}
|
||||
|
|
@ -1,13 +1,22 @@
|
|||
:root {
|
||||
--navbar-height: 6rem;
|
||||
--transition: all .4s ease 0s;
|
||||
--navbar-dark: #261C2CFF;
|
||||
--navbar-darker: #261C2CFF;
|
||||
--navbar-light: #413543FF;
|
||||
--navbar-ligher: #413543FF;
|
||||
--navbar-outline: 2px solid rgb(40, 32, 44, 0.5);
|
||||
--navbar-inset: inset 0px 0px 0px 2px rgba(52, 42, 58, 0.5);
|
||||
--navbar-blur: blur(0.6rem);
|
||||
}
|
||||
|
||||
nav {
|
||||
height: 5rem;
|
||||
height: var(--navbar-height);
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
z-index: 5;
|
||||
transition: all .3s ease 0s;
|
||||
}
|
||||
|
||||
nav>div {
|
||||
transition: all .3s ease 0s;
|
||||
transition: var(--transition);
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -16,38 +25,87 @@ a {
|
|||
|
||||
.navbar-background {
|
||||
border-radius: 0.5rem;
|
||||
background-color: var(--color-text);
|
||||
background-image: linear-gradient(to right, var(--navbar-dark) 0%, var(--navbar-light) 100%);
|
||||
height: 90%;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
.navbar-fake {
|
||||
height: 5rem;
|
||||
height: var(--navbar-height);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Background */
|
||||
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"navbar-overlay-back"
|
||||
"navbar-overlay-front"
|
||||
"navbar-content";
|
||||
}
|
||||
|
||||
.navbar-overlay-front {
|
||||
grid-area: overlay;
|
||||
background-image: linear-gradient(to right, var(--navbar-dark) 0%, var(--navbar-light) 100%);
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: rgba(52, 42, 58, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, var(--navbar-inset);
|
||||
outline: 2px solid rgb(40, 32, 44, 0.5);
|
||||
}
|
||||
|
||||
.navbar-overlay-back {
|
||||
grid-area: overlay;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: var(--navbar-inset);
|
||||
outline: var(--navbar-outline)
|
||||
}
|
||||
|
||||
.content {
|
||||
grid-area: overlay;
|
||||
z-index: 1;
|
||||
width: inherit;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Each element */
|
||||
.navbar-height {
|
||||
height: var(--navbar-height);
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.navbar-title {
|
||||
width: 15rem;
|
||||
justify-content: center;
|
||||
margin-left: 3rem;
|
||||
margin-right: 3rem;
|
||||
}
|
||||
|
||||
.navbar-title h1 {
|
||||
color: var(--color-background);
|
||||
font-family: Gabarito;
|
||||
font-weight: 700;
|
||||
margin: 0 !important;
|
||||
cursor: default;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.navbar-categories {
|
||||
width: 25rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: var(--navbar-height);
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.navbar-categories a {
|
||||
text-decoration: none;
|
||||
font-family: Gabarito;
|
||||
font-weight: 400;
|
||||
font-family: JetBrains Mono;
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
transition: all .3s ease 0s;
|
||||
color: var(--color-background);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.navbar-categories div {
|
||||
|
|
@ -61,22 +119,19 @@ a {
|
|||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
background-color: var(--palette-purple);
|
||||
background-color: var(--palette-pink);
|
||||
transition: all .3s ease 0s;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
.navbar-categories-white>div>a::before,
|
||||
.navbar-categories-white>div>a::after {
|
||||
background-color: var(--palette-pink) !important;
|
||||
}
|
||||
|
||||
.navbar-categories>div>a::before {
|
||||
top: -6px;
|
||||
top: -3px;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
.navbar-categories>div>a::after {
|
||||
bottom: -6px;
|
||||
bottom: -3px;
|
||||
height: 3px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
|
|
@ -86,17 +141,11 @@ a {
|
|||
}
|
||||
|
||||
.navbar-categories>div>a:hover {
|
||||
color: var(--palette-purple);
|
||||
}
|
||||
|
||||
.navbar-categories-white>div>a:hover {
|
||||
color: var(--palette-pink);
|
||||
}
|
||||
|
||||
.navbar-search {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.navbar-search input {
|
||||
|
|
@ -123,39 +172,28 @@ a {
|
|||
/* Floating */
|
||||
|
||||
.floating {
|
||||
background-color: rgba(248, 241, 241, 0.5);
|
||||
box-shadow: #41354340 0px 8px 18px -1px;
|
||||
-webkit-backdrop-filter: blur(1rem);
|
||||
backdrop-filter: blur(1rem);
|
||||
height: 4rem;
|
||||
background-image: linear-gradient(to right, #241d25e5 0%, #3d2b47e5 100%);
|
||||
box-shadow: rgba(52, 42, 58, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
padding-top: 0;
|
||||
-webkit-backdrop-filter: var(--navbar-blur);
|
||||
backdrop-filter: var(--navbar-blur);
|
||||
}
|
||||
|
||||
.floating>div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.floating>div>h1 {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.floating>div>div>a {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* Active */
|
||||
|
||||
.navbar-active {
|
||||
color: var(--palette-pink);
|
||||
color: var(--palette-pink) !important;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.navbar-active-scroll {
|
||||
color: var(--palette-purple) !important;
|
||||
}
|
||||
|
||||
.navbar-active::after {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,50 +1,4 @@
|
|||
.base {
|
||||
margin-left: 3rem;
|
||||
}
|
||||
|
||||
.blank {
|
||||
height: 10rem;
|
||||
background-color: #00000000;
|
||||
}
|
||||
|
||||
/* Menu */
|
||||
|
||||
.menu-border {
|
||||
background-image: -webkit-gradient(linear, right bottom, left bottom, color-stop(0, rgb(52, 42, 58)), color-stop(100, rgb(38, 28, 44)));
|
||||
background-image: -webkit-linear-gradient(left, rgb(52, 42, 58) 0%, rgb(38, 28, 44) 100%);
|
||||
background-image: -moz-linear-gradient(left, rgb(52, 42, 58) 0%, rgb(38, 28, 44) 100%);
|
||||
background-image: -o-linear-gradient(left, rgb(52, 42, 58) 0%, rgb(38, 28, 44) 100%);
|
||||
background-image: linear-gradient(to left, rgb(52, 42, 58) 0%, rgb(38, 28, 44) 100%);
|
||||
padding: 0.8rem;
|
||||
width: 40rem;
|
||||
border-radius: 1rem;
|
||||
box-shadow: rgba(52, 42, 58, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
|
||||
}
|
||||
|
||||
|
||||
.menu {
|
||||
border-radius: 0.8rem;
|
||||
background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, rgb(52, 42, 58)), color-stop(100, rgb(38, 28, 44)));
|
||||
background-image: -webkit-linear-gradient(right, rgb(52, 42, 58) 0%, rgb(38, 28, 44) 100%);
|
||||
background-image: -moz-linear-gradient(right, rgb(52, 42, 58) 0%, rgb(38, 28, 44) 100%);
|
||||
background-image: -o-linear-gradient(right, rgb(52, 42, 58) 0%, rgb(38, 28, 44) 100%);
|
||||
background-image: linear-gradient(to right, rgb(52, 42, 58) 0%, rgb(38, 28, 44) 100%);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 10rem;
|
||||
}
|
||||
|
||||
.menu p {
|
||||
font-family: 'JetBrains Mono';
|
||||
font-weight: 600;
|
||||
margin: 0 !important;
|
||||
font-size: 5rem;
|
||||
color: var(--color-background);
|
||||
filter: drop-shadow(0px 15px 25px rgba(0, 0, 0, 0.3)) drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.1));
|
||||
}
|
||||
|
||||
.menu svg {
|
||||
margin-right: 3rem;
|
||||
color: var(--color-background);
|
||||
filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 15px 25px) drop-shadow(rgba(0, 0, 0, 0.1) 0px 5px 10px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,63 +2,10 @@
|
|||
<script>
|
||||
import '$lib/css/base.css';
|
||||
import '$lib/css/navbar.css';
|
||||
import { page } from '$app/stores';
|
||||
|
||||
$: pageUrl = $page.url.pathname;
|
||||
let scrollY;
|
||||
|
||||
function isActive(str, url, condition) {
|
||||
if (url === str) return condition ? 'navbar-active' : 'navbar-active navbar-active-scroll';
|
||||
else return '';
|
||||
}
|
||||
|
||||
function isActiveMultiple(strArray, url, condition) {
|
||||
for (const str of strArray) {
|
||||
const returnVal = isActive(str, url, condition);
|
||||
if (returnVal != '') return returnVal;
|
||||
}
|
||||
return '';
|
||||
}
|
||||
import Navbar from '$lib/components/navbar.svelte';
|
||||
</script>
|
||||
|
||||
<svelte:window bind:scrollY />
|
||||
<!-- Navbar -->
|
||||
<nav class={scrollY < 50 ? 'flex-row' : 'flex-row floating'}>
|
||||
<div
|
||||
class={scrollY < 50 ? 'navbar-title flex-row navbar-background shadow' : 'navbar-title h-100'}
|
||||
>
|
||||
<h1>Etheryo Blog</h1>
|
||||
</div>
|
||||
<div
|
||||
class={scrollY < 50
|
||||
? 'navbar-categories navbar-categories-white flex-row flex-end navbar-background shadow'
|
||||
: 'flex-end navbar-categories h-100'}
|
||||
>
|
||||
<div>
|
||||
<a class={isActiveMultiple(['/', '/articles'], pageUrl, scrollY < 50)} href="/articles"
|
||||
>Articles</a
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<a class={isActive('/authors', pageUrl, scrollY < 50)} href="/authors">Auteurs</a>
|
||||
</div>
|
||||
<div>
|
||||
<a class={isActive('/categories', pageUrl, scrollY < 50)} href="/categories">Catégories</a>
|
||||
</div>
|
||||
<div>
|
||||
<a class={isActive('/rss', pageUrl, scrollY < 50)} href="/rss">Flux RSS</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class={scrollY < 50
|
||||
? 'navbar-search navbar-background shadow'
|
||||
: 'navbar-search navbar-search-floating h-100'}
|
||||
>
|
||||
<input type="text" placeholder="Rechercher..." />
|
||||
</div>
|
||||
</nav>
|
||||
<div class="navbar-fake" />
|
||||
|
||||
<Navbar/>
|
||||
<slot />
|
||||
|
||||
<!-- Footer -->
|
||||
|
|
|
|||
64
frontend/src/routes/old_layout.svelte
Normal file
64
frontend/src/routes/old_layout.svelte
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
<!-- svelte-ignore a11y-missing-content -->
|
||||
<script>
|
||||
import '$lib/css/base.css';
|
||||
import '$lib/css/navbar.css';
|
||||
import { page } from '$app/stores';
|
||||
|
||||
$: pageUrl = $page.url.pathname;
|
||||
let scrollY;
|
||||
|
||||
function isActive(str, url, condition) {
|
||||
if (url === str) return condition ? 'navbar-active' : 'navbar-active navbar-active-scroll';
|
||||
else return '';
|
||||
}
|
||||
|
||||
function isActiveMultiple(strArray, url, condition) {
|
||||
for (const str of strArray) {
|
||||
const returnVal = isActive(str, url, condition);
|
||||
if (returnVal != '') return returnVal;
|
||||
}
|
||||
return '';
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window bind:scrollY />
|
||||
<!-- Navbar -->
|
||||
<nav class={scrollY < 50 ? 'flex-row' : 'flex-row floating'}>
|
||||
<div
|
||||
class={scrollY < 50 ? 'navbar-title flex-row navbar-background shadow' : 'navbar-title h-100'}
|
||||
>
|
||||
<h1>Etheryo Blog</h1>
|
||||
</div>
|
||||
<div
|
||||
class={scrollY < 50
|
||||
? 'navbar-categories navbar-categories-white flex-row flex-end navbar-background shadow'
|
||||
: 'flex-end navbar-categories h-100'}
|
||||
>
|
||||
<div>
|
||||
<a class={isActiveMultiple(['/', '/articles'], pageUrl, scrollY < 50)} href="/articles"
|
||||
>Articles</a
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<a class={isActive('/authors', pageUrl, scrollY < 50)} href="/authors">Auteurs</a>
|
||||
</div>
|
||||
<div>
|
||||
<a class={isActive('/categories', pageUrl, scrollY < 50)} href="/categories">Catégories</a>
|
||||
</div>
|
||||
<div>
|
||||
<a class={isActive('/rss', pageUrl, scrollY < 50)} href="/rss">Flux RSS</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class={scrollY < 50
|
||||
? 'navbar-search navbar-background shadow'
|
||||
: 'navbar-search navbar-search-floating h-100'}
|
||||
>
|
||||
<input type="text" placeholder="Rechercher..." />
|
||||
</div>
|
||||
</nav>
|
||||
<div class="navbar-fake" />
|
||||
|
||||
<slot />
|
||||
|
||||
<!-- Footer -->
|
||||
|
|
@ -1,8 +1,6 @@
|
|||
<script>
|
||||
import '$lib/css/base.css';
|
||||
import '$lib/css/style.css';
|
||||
import SvgIcon from '@jamescoyle/svelte-icon';
|
||||
import { mdiAccount } from '@mdi/js';
|
||||
|
||||
import Post from '$lib/components/post-min.svelte';
|
||||
import Search from '$lib/components/search.svelte';
|
||||
|
|
@ -10,14 +8,9 @@
|
|||
</script>
|
||||
|
||||
<div class="base">
|
||||
<br /><br />
|
||||
<div class="menu-border">
|
||||
<div class="menu flex-row">
|
||||
<SvgIcon type="mdi" path={mdiAccount} size="120"></SvgIcon>
|
||||
<p>Test</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blank"></div>
|
||||
<div class="blank" />
|
||||
<div class="blank" />
|
||||
<div class="margin-left-3">
|
||||
<Post
|
||||
cover="https://share.etheryo.fr/Rando-01.11.2023/Groupe%20Ombre%20Lac%20Montagne%20Rouge%20Bleu.jpg"
|
||||
profile="https://avatars.githubusercontent.com/u/115081848?v=4"
|
||||
|
|
@ -26,12 +19,20 @@
|
|||
author="Yohan boujon"
|
||||
date="26/07/2024"
|
||||
/>
|
||||
<div class="blank"></div>
|
||||
<Search/>
|
||||
<div class="blank"></div>
|
||||
<Post/>
|
||||
<div class="blank"></div>
|
||||
<Archive/>
|
||||
<div class="blank"></div>
|
||||
<div class="blank"></div>
|
||||
</div>
|
||||
<div class="blank" />
|
||||
<div class="margin-left-3">
|
||||
<Search />
|
||||
</div>
|
||||
<div class="blank" />
|
||||
<div class="margin-left-3">
|
||||
<Post />
|
||||
</div>
|
||||
|
||||
<div class="blank" />
|
||||
<div class="margin-left-3">
|
||||
<Archive />
|
||||
</div>
|
||||
|
||||
<div class="blank" />
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue