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

added sprites

main
Alina Marquardt 2023-02-28 18:23:53 +00:00
parent e4f70a2752
commit 18843dd3c8
4 changed files with 68 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
css/main.css
View File

@ -18,7 +18,7 @@ body {
} }
footer { footer {
height: 60px; height: 50px;
width: 100%; width: 100%;
bottom: 0px; bottom: 0px;
right: 0px; right: 0px;
@ -28,30 +28,33 @@ footer {
} }
h1, logo span { h1, logo span {
font-family: "Langar", sans-serif; font-family: "VT323", sans-serif;
position: absolute; position: absolute;
font-size: 1.6rem; font-size: 2rem;
line-height: 1.3em; line-height: 1.3em;
font-weight: 400; font-weight: 400;
top: -36px; top: -42px;
color: white; color: white;
width: 100%; width: 100%;
padding-left: 15px; padding-left: 0px;
cursor: pointer; cursor: pointer;
-webkit-user-select: none; /* Safari */ -webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */ -ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */ user-select: none; /* Standard syntax */
text-shadow: 0px 2px rgba(0, 0, 0, 0.5); text-shadow: 0px 3px rgba(0, 0, 0, 0.5);
} }
logo span { h1::before, logo span::before {
margin-top: 2px; content: "";
} display: inline-block;
position: relative;
h1 span { vertical-align: -6px;
font-family: sans-serif; margin: 0 6px;
font-weight: bold; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAAeCAMAAACylMSIAAAACVBMVEX///8AAAD///9+749PAAAAAnRSTlMAf7YpoZUAAAC3SURBVHja7ZbRCoQwDATd/v9HHxQM4SYJxYNehcyDD013O4qI107G5Peelt4sPRz1toX4w35GsoaW/pe0pKI3PHWAbKqJH7X066QL70LLgn5KXQbXpXXT0rulQVbEW7IiZkeCBeuzsufV0sdKs46v76K0927pl0ozY1oe3TAl6evKDeufvJY+TZrrJJwGxhMY4wis2HpLnyYtyQ54/KvNcits6cOlBcINV06RIjYNd4Yrklp6u/QHWCYPKBXAoUwAAAAASUVORK5CYII=");
margin-right: 0.2em; width: 30px;
height: 30px;
background-size: 180px 30px;
background-position: 30px 0;
} }
article { article {
@ -82,12 +85,19 @@ article.expanded {
z-index: 120 !important; z-index: 120 !important;
} }
#article1 h1::before {
background-position: 120px 0;
}
#article2 { #article2 {
top: 132px; top: 132px;
right: 147px; right: 147px;
z-index: 29; z-index: 29;
width: calc(100% - 460px); width: calc(100% - 460px);
} }
#article2 h1::before {
background-position: 150px 0;
}
#article3 { #article3 {
top: 175px; top: 175px;
@ -95,6 +105,9 @@ article.expanded {
z-index: 28; z-index: 28;
width: calc(100% - 600px); width: calc(100% - 600px);
} }
#article3 h1::before {
background-position: 60px 0;
}
#article4 { #article4 {
top: 243px; top: 243px;
@ -103,6 +116,9 @@ article.expanded {
z-index: 27; z-index: 27;
width: calc(100% - 600px); width: calc(100% - 600px);
} }
#article4 h1::before {
background-position: 90px 0;
}
logo { logo {
width: 800px; width: 800px;
@ -136,5 +152,8 @@ logo.sidebar {
z-index: 10; z-index: 10;
border-color: #498584; border-color: #498584;
} }
logo span::before {
background-position: 0px 0;
}
/*# sourceMappingURL=main.css.map */ /*# sourceMappingURL=main.css.map */

BIN
images/wood.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.6 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

6
index.html
View File

@ -5,7 +5,7 @@
<link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/main.css">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Langar&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
</head> </head>
<body> <body>
<logo <logo
@ -19,7 +19,7 @@
<article id="article1" @winchange.window="expanded = false; clicked = true" :class="{ 'ontop': !clicked, 'expanded': expanded }" x-data="article"> <article id="article1" @winchange.window="expanded = false; clicked = true" :class="{ 'ontop': !clicked, 'expanded': expanded }" x-data="article">
<h1 <h1
@click="if(!expanded) $dispatch('winchange'); toggle()" @click="if(!expanded) $dispatch('winchange'); toggle()"
><span>✽</span> AlinaNada.nfo</h1> >AlinaNada.nfo</h1>
<div class="content" x-cloak x-show="expanded"> <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 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>
@ -29,7 +29,7 @@
<article id="article2" @winchange.window="expanded = false" :class="{ 'expanded': expanded }" x-data="article"> <article id="article2" @winchange.window="expanded = false" :class="{ 'expanded': expanded }" x-data="article">
<h1 <h1
@click="if(!expanded) $dispatch('winchange'); toggle()" @click="if(!expanded) $dispatch('winchange'); toggle()"
><span>𝄢</span> music.mp3</h1> >music.mp3</h1>
<div class="content" x-cloak x-show="expanded"> <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 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> </div>

45
sass/main.scss
View File

@ -33,7 +33,7 @@ body {
} }
footer { footer {
height: 60px; height: 50px;
width: 100%; width: 100%;
bottom: 0px; bottom: 0px;
right: 0px; right: 0px;
@ -43,28 +43,32 @@ footer {
} }
h1, logo span { h1, logo span {
font-family: 'Langar', sans-serif; font-family: 'VT323', sans-serif;
position: absolute; position: absolute;
font-size: 1.6rem; font-size: 2rem;
line-height: 1.3em; line-height: 1.3em;
font-weight: 400; font-weight: 400;
top: -36px; top: -42px;
color: $window-text; color: $window-text;
width: 100%; width: 100%;
padding-left: 15px; padding-left: 0px;
cursor: pointer; cursor: pointer;
-webkit-user-select: none; /* Safari */ -webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */ -ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */ user-select: none; /* Standard syntax */
text-shadow: 0px 2px rgba(0,0,0,0.5); text-shadow: 0px 3px rgba(0,0,0,0.5);
} }
logo span { h1::before, logo span::before {
margin-top: 2px; content: "";
} display: inline-block;
h1 span { position: relative;
font-family: sans-serif; vertical-align: -6px;
font-weight: bold; margin: 0 6px;
margin-right: 0.2em; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAAeCAMAAACylMSIAAAACVBMVEX///8AAAD///9+749PAAAAAnRSTlMAf7YpoZUAAAC3SURBVHja7ZbRCoQwDATd/v9HHxQM4SYJxYNehcyDD013O4qI107G5Peelt4sPRz1toX4w35GsoaW/pe0pKI3PHWAbKqJH7X066QL70LLgn5KXQbXpXXT0rulQVbEW7IiZkeCBeuzsufV0sdKs46v76K0927pl0ozY1oe3TAl6evKDeufvJY+TZrrJJwGxhMY4wis2HpLnyYtyQ54/KvNcits6cOlBcINV06RIjYNd4Yrklp6u/QHWCYPKBXAoUwAAAAASUVORK5CYII=');
width: 30px;
height: 30px;
background-size: 180px 30px;
background-position: 30px 0;
} }
article { article {
@ -97,6 +101,9 @@ article {
//right: 30px; //right: 30px;
//z-index: 30; //z-index: 30;
//width: calc( 100% - 390px ); //width: calc( 100% - 390px );
h1::before {
background-position: 120px 0;
}
} }
#article2 { #article2 {
@ -104,6 +111,9 @@ article {
right: 147px; right: 147px;
z-index: 29; z-index: 29;
width: calc( 100% - 460px ); width: calc( 100% - 460px );
h1::before {
background-position: 150px 0;
}
} }
#article3 { #article3 {
@ -111,6 +121,9 @@ article {
right: 77px; right: 77px;
z-index: 28; z-index: 28;
width: calc( 100% - 600px ); width: calc( 100% - 600px );
h1::before {
background-position: 60px 0;
}
} }
#article4 { #article4 {
@ -119,6 +132,9 @@ article {
left: 77px; left: 77px;
z-index: 27; z-index: 27;
width: calc( 100% - 600px ); width: calc( 100% - 600px );
h1::before {
background-position: 90px 0;
}
} }
logo { logo {
@ -141,6 +157,9 @@ logo {
z-index: 10; z-index: 10;
border-color: $window-chrome; border-color: $window-chrome;
} }
span::before {
background-position: 0px 0;
}
z-index: 50; z-index: 50;
@include window-chrome(); @include window-chrome();
border-color: black; border-color: black;