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

added ASCII art text to Alina.nfo, fixed logo for FF

main
Alina Marquardt 2023-03-06 15:43:27 +00:00
parent 18843dd3c8
commit 1c06a47136
3 changed files with 101 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
css/main.css
View File

File diff suppressed because one or more lines are too long

55
index.html
View File

@ -3,27 +3,60 @@
<meta charset="utf-8">
<title>lastfuture.de</title>
<link rel="stylesheet" href="css/main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=B612+Mono&family=VT323&display=swap" rel="stylesheet">
</head>
<body>
<logo
<div id="logo"
x-data="logo"
role="img" aria-label="animated lastfuture logo"
@click="if(sidebar) $dispatch('winchange'); sidebar = !sidebar; togglePhase();"
@winchange.window="sidebar = true; togglePhase();"
:class="{ 'sidebar': sidebar }">
<span>lastfuture.gif</span>
</logo>
<span>lastfuture.obj</span>
</div>
<article id="article1" @winchange.window="expanded = false; clicked = true" :class="{ 'ontop': !clicked, 'expanded': expanded }" x-data="article">
<h1
@click="if(!expanded) $dispatch('winchange'); toggle()"
>AlinaNada.nfo</h1>
>Alina.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>
<pre>
@@@ @@@@@@ @@@@@@:@@@@@@@ d.
@@! @@! @@@ !@@ @@! dML'
@!! @!@!@!@! !@@!! @@! .MMMM''
!!: !!: !!! !:! !!:,MMMMML''
: ::.:.:': :':.::.::: ':dMMMMMMM'''
@@@@@@@!@@@ @@@:@@@@@@@ dMMMMMMMML''''
@@! @@! @@@ @@@ ,MMMMMMMMMMM'''''
@!!!:! @!@ !@! @!! dMMMMMMMMMMMML'''''
!!: !!: !!! :!!,MMMMMMMMMMMMMMM''''''
': :'::.: :dMMMMMMMMMMMMMMMML'''''''
@@@ @@@:@@@@@@@ @@@@@@@:.MMMMMMMMMMMMMMMMMMM''''''''
@@! @@@ @@! @@@ @@! ,MMMMMMMMMMMMMMMMMMMML''''''''
@!@ !@! @!@!!@! @!!!:.!MMMMMMMMMMMMMMMMMMMMMM''''''''
!!: !!! !!: :!! !!: '"YPMMMMMMMMMMMMMMMMMMMML''''''
::::': :: '::.:.:::.:.' '"YPMMMMMMMMMMMMMMMM''''
'""YPMMMMMMMMM'''
.-. .-. '"YPMMML'
/\ |. _ _ ( ` ) "'
a.k.a. /--\||| )(_| `. .'
`.'
-=[MMM88oO::.. . Who is Alina? . ..::Oo88MMM]=-
Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio, dapibus ac facilisis in, egestas eget
quam. Donec ullamcorper nulla non metus auctor fringilla.
Nulla vitae elit libero, a pharetra augue. Nulla vitae
elit libero, a pharetra augue.
</pre>
</div>
</article>
<article id="article2" @winchange.window="expanded = false" :class="{ 'expanded': expanded }" x-data="article">
@ -51,7 +84,7 @@
<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>
<footer></footer>
<!--<footer></footer>-->
<script src="js/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.11.1/dist/cdn.min.js"></script>
</body>

38
sass/main.scss
View File

@ -10,7 +10,7 @@ $window-text: white;
border: 4px solid $window-chrome;
border-top-width: 2.6rem;
background-color: white;
box-shadow: 0px 4px 0px rgba(0,0,0,0.3);
box-shadow: 0px 3px 0px rgba(0,0,0,0.3);
}
[x-cloak] {
@ -42,7 +42,7 @@ footer {
z-index: 10;
}
h1, logo span {
h1, #logo span {
font-family: 'VT323', sans-serif;
position: absolute;
font-size: 2rem;
@ -58,7 +58,7 @@ h1, logo span {
user-select: none; /* Standard syntax */
text-shadow: 0px 3px rgba(0,0,0,0.5);
}
h1::before, logo span::before {
h1::before, #logo span::before {
content: "";
display: inline-block;
position: relative;
@ -86,7 +86,7 @@ article {
right: 30px;
width: calc( 100% - 390px );
z-index: 30;
transition: all 0.1s ease-in-out;
transition: border 0.2s ease-in-out;
&.ontop {
z-index: 120;
}
@ -94,16 +94,30 @@ article {
border-color: $window-chrome-active;
z-index: 120 !important;
}
pre {
font-family: 'B612 Mono', monospace;
background-color: #233733;
color: #85dcb5;
font-size: 1rem;
line-height: 1.2em;
}
}
#article1 {
//top: 55px;
//right: 30px;
//z-index: 30;
//width: calc( 100% - 390px );
right: 60px;
.content {
padding: 0px;
}
&.expanded {
padding: 0px;
}
width: 645px;
h1::before {
background-position: 120px 0;
}
.content {
overflow-y: scroll;
}
}
#article2 {
@ -117,7 +131,7 @@ article {
}
#article3 {
top: 175px;
top: 173px;
right: 77px;
z-index: 28;
width: calc( 100% - 600px );
@ -137,13 +151,13 @@ article {
}
}
logo {
#logo {
//width 680px 510px 425px 340px 289px
//height 400px 300px 250px 200px 170px
width: 800px;
height: 600px;
max-width: calc( 100% - 60px );
max-height: calc( 100% - 60px );
max-width: calc( 100vw - 60px );
max-height: calc( 100vh - 60px );
top: 35px;
left: 140px;
background-size: 680px 400px;