diff --git a/css/main.css b/css/main.css index 9130e68..1b7c482 100644 --- a/css/main.css +++ b/css/main.css @@ -23,46 +23,78 @@ h1, logo span { font-size: 1.6rem; line-height: 1.3em; font-weight: 400; - top: -34px; + top: -36px; color: white; width: 100%; - padding-left: 30px; + padding-left: 15px; cursor: pointer; -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10 and IE 11 */ user-select: none; /* Standard syntax */ } +logo span { + margin-top: 2px; +} + +h1 span { + font-family: sans-serif; + font-weight: bold; + margin-right: 0.2em; +} + article { - border: 4px solid #00AEC1; + border: 4px solid #285a71; border-top-width: 2.6rem; background-color: white; + box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); position: absolute; padding: 4px 0px; - top: 55px; - right: 30px; - width: calc(100% - 390px); min-width: 500px; max-width: 880px; line-height: 1.3em; font-size: 1.2rem; + top: 55px; + right: 30px; + width: calc(100% - 390px); z-index: 30; + transition: all 0.1s ease-in-out; } article .content { padding: 18px 30px; } -article.main-article { +article.ontop { z-index: 120; } +article.expanded { + border-color: #00AEC1; + z-index: 120 !important; +} + +#article2 { + top: 132px; + right: 147px; + z-index: 29; + width: calc(100% - 460px); +} + +#article3 { + top: 175px; + right: 77px; + z-index: 28; + width: calc(100% - 600px); +} logo { width: 100%; height: 100%; background-size: 680px 400px; z-index: 50; - border: 4px solid #00AEC1; + border: 4px solid #285a71; border-top-width: 2.6rem; background-color: white; + box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); + border-color: #00AEC1; transition: all 0.3s ease-in-out; position: absolute; left: 0; @@ -81,6 +113,7 @@ logo.sidebar { left: 30px; top: 30px; z-index: 10; + border-color: #285a71; } /*# sourceMappingURL=main.css.map */ diff --git a/index.html b/index.html index d0c32e2..1e28644 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ - + + lastfuture.de @@ -10,20 +11,38 @@ - lastfuture + lastfuture.gif -
+

Untitled-1.txt

+ @click="if(!expanded) $dispatch('winchange'); toggle()" + >✽ AlinaNada.nfo

Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui. Praesent commodo cursus magna, 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.

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.

-
+
+
+

𝄢 music.mp3

+
+

Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui. Praesent commodo cursus magna, 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.

+
+
+ +
+

code.py

+
+

Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui. Praesent commodo cursus magna, 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.

+
+
diff --git a/js/main.js b/js/main.js index 9210c61..2d049ce 100644 --- a/js/main.js +++ b/js/main.js @@ -6,13 +6,21 @@ const loadImage = (url) => new Promise((resolve, reject) => { }); document.addEventListener('alpine:init', () => { + Alpine.data('article', () => ({ + expanded: false, + clicked: false, + toggle() { + this.expanded = ! this.expanded + this.clicked = true + } + })) Alpine.data('logo', () => ({ logoPhase: 0, phases: { 1: 'images/lf-anim-simple.gif', 2: 'images/lf-anim.gif', }, - sidebar: true, + sidebar: false, init() { console.log("logo init"); this.preloadPhase(1); diff --git a/sass/main.scss b/sass/main.scss index f162056..dc83c6b 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -1,13 +1,15 @@ $font-stack: Helvetica, sans-serif; $primary-color: #333; $background-color: #222; -$window-chrome: #00AEC1; +$window-chrome: #285a71; +$window-chrome-active: #00AEC1; $window-text: white; @mixin window-chrome { border: 4px solid $window-chrome; border-top-width: 2.6rem; background-color: white; + box-shadow: 2px 2px 3px rgba(0,0,0,0.5); } [x-cloak] { @@ -35,15 +37,23 @@ h1, logo span { font-size: 1.6rem; line-height: 1.3em; font-weight: 400; - top: -34px; + top: -36px; color: $window-text; width: 100%; - padding-left: 30px; + padding-left: 15px; cursor: pointer; -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10 and IE 11 */ user-select: none; /* Standard syntax */ } +logo span { + margin-top: 2px; +} +h1 span { + font-family: sans-serif; + font-weight: bold; + margin-right: 0.2em; +} article { .content { @@ -52,17 +62,43 @@ article { @include window-chrome(); position: absolute; padding: 4px 0px; - top: 55px; - right: 30px; - width: calc( 100% - 390px ); min-width: 500px; max-width: 880px; line-height: 1.3em; font-size: 1.2rem; + top: 55px; + right: 30px; + width: calc( 100% - 390px ); z-index: 30; - &.main-article { + transition: all 0.1s ease-in-out; + &.ontop { z-index: 120; } + &.expanded { + border-color: $window-chrome-active; + z-index: 120 !important; + } +} + +#article1 { + //top: 55px; + //right: 30px; + //z-index: 30; + //width: calc( 100% - 390px ); +} + +#article2 { + top: 132px; + right: 147px; + z-index: 29; + width: calc( 100% - 460px ); +} + +#article3 { + top: 175px; + right: 77px; + z-index: 28; + width: calc( 100% - 600px ); } logo { @@ -79,9 +115,11 @@ logo { left: 30px; top: 30px; z-index: 10; + border-color: $window-chrome; } z-index: 50; @include window-chrome(); + border-color: $window-chrome-active; transition: all 0.3s ease-in-out; position: absolute; left: 0;