alina/lastfuture-de
1
0
Fork 0
Code Issues Projects Releases Activity

navigation logic, styling, placeholders

Browse Source
This commit is contained in:
Alina Marquardt
2023-02-28 15:25:52 +00:00
parent feff3b9142
commit a44f874bb9
4 changed files with 121 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
index.html
View File

@@ -1,5 +1,6 @@
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>lastfuture.de</title>
<link rel="stylesheet" href="css/main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
@@ -10,20 +11,38 @@
<logo
x-data="logo"
role="img" aria-label="animated lastfuture logo"
@click="sidebar = !sidebar; togglePhase()"
@click="if(sidebar) $dispatch('winchange'); sidebar = !sidebar; togglePhase();"
@winchange.window="sidebar = true; togglePhase();"
:class="sidebar ? 'sidebar' : ''">
<span>lastfuture</span>
<span>lastfuture.gif</span>
</logo>
<article class="main-article" x-data="{ expanded: false }">
<article id="article1" @winchange.window="expanded = false; clicked = true" :class="{ 'ontop': !clicked, 'expanded': expanded }" x-data="article">
<h1
@click="expanded = !expanded"
>Untitled-1.txt</h1>
@click="if(!expanded) $dispatch('winchange'); toggle()"
><span>✽</span> AlinaNada.nfo</h1>
<div class="content" x-cloak x-show="expanded">
<p>Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui. <a href="//google.com/">Praesent commodo cursus magna</a>, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus.</p>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>
</article>
</article>
<article id="article2" @winchange.window="expanded = false" :class="{ 'expanded': expanded }" x-data="article">
<h1
@click="if(!expanded) $dispatch('winchange'); toggle()"
><span>𝄢</span> music.mp3</h1>
<div class="content" x-cloak x-show="expanded">
<p>Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui. <a href="//google.com/">Praesent commodo cursus magna</a>, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus.</p>
</div>
</article>
</article>
<article id="article3" @winchange.window="expanded = false" :class="{ 'expanded': expanded }" x-data="article">
<h1
@click="if(!expanded) $dispatch('winchange'); toggle()"
>code.py</h1>
<div class="content" x-cloak x-show="expanded">
<p>Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui. <a href="//google.com/">Praesent commodo cursus magna</a>, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus.</p>
</div>
</article>
<script src="js/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.11.1/dist/cdn.min.js"></script>
</body>