diff --git a/css/main.css b/css/main.css index e8f8a99..ac94dd9 100644 --- a/css/main.css +++ b/css/main.css @@ -18,7 +18,7 @@ body { } footer { - height: 60px; + height: 50px; width: 100%; bottom: 0px; right: 0px; @@ -28,30 +28,33 @@ footer { } h1, logo span { - font-family: "Langar", sans-serif; + font-family: "VT323", sans-serif; position: absolute; - font-size: 1.6rem; + font-size: 2rem; line-height: 1.3em; font-weight: 400; - top: -36px; + top: -42px; color: white; width: 100%; - padding-left: 15px; + padding-left: 0px; cursor: pointer; -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10 and IE 11 */ 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 { - margin-top: 2px; -} - -h1 span { - font-family: sans-serif; - font-weight: bold; - margin-right: 0.2em; +h1::before, logo span::before { + content: ""; + display: inline-block; + position: relative; + vertical-align: -6px; + margin: 0 6px; + 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 { @@ -82,12 +85,19 @@ article.expanded { z-index: 120 !important; } +#article1 h1::before { + background-position: 120px 0; +} + #article2 { top: 132px; right: 147px; z-index: 29; width: calc(100% - 460px); } +#article2 h1::before { + background-position: 150px 0; +} #article3 { top: 175px; @@ -95,6 +105,9 @@ article.expanded { z-index: 28; width: calc(100% - 600px); } +#article3 h1::before { + background-position: 60px 0; +} #article4 { top: 243px; @@ -103,6 +116,9 @@ article.expanded { z-index: 27; width: calc(100% - 600px); } +#article4 h1::before { + background-position: 90px 0; +} logo { width: 800px; @@ -136,5 +152,8 @@ logo.sidebar { z-index: 10; border-color: #498584; } +logo span::before { + background-position: 0px 0; +} /*# sourceMappingURL=main.css.map */ diff --git a/images/wood.png b/images/wood.png index dcea5be..179707f 100644 Binary files a/images/wood.png and b/images/wood.png differ diff --git a/index.html b/index.html index ef23fd2..6fef418 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ - +

✽ AlinaNada.nfo

+ >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.

@@ -29,7 +29,7 @@

𝄢 music.mp3

+ >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.

diff --git a/sass/main.scss b/sass/main.scss index 680fc56..ed31c87 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -33,7 +33,7 @@ body { } footer { - height: 60px; + height: 50px; width: 100%; bottom: 0px; right: 0px; @@ -43,28 +43,32 @@ footer { } h1, logo span { - font-family: 'Langar', sans-serif; + font-family: 'VT323', sans-serif; position: absolute; - font-size: 1.6rem; + font-size: 2rem; line-height: 1.3em; font-weight: 400; - top: -36px; + top: -42px; color: $window-text; width: 100%; - padding-left: 15px; + padding-left: 0px; cursor: pointer; -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10 and IE 11 */ 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 { - margin-top: 2px; -} -h1 span { - font-family: sans-serif; - font-weight: bold; - margin-right: 0.2em; +h1::before, logo span::before { + content: ""; + display: inline-block; + position: relative; + vertical-align: -6px; + margin: 0 6px; + 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 { @@ -97,6 +101,9 @@ article { //right: 30px; //z-index: 30; //width: calc( 100% - 390px ); + h1::before { + background-position: 120px 0; + } } #article2 { @@ -104,6 +111,9 @@ article { right: 147px; z-index: 29; width: calc( 100% - 460px ); + h1::before { + background-position: 150px 0; + } } #article3 { @@ -111,6 +121,9 @@ article { right: 77px; z-index: 28; width: calc( 100% - 600px ); + h1::before { + background-position: 60px 0; + } } #article4 { @@ -119,6 +132,9 @@ article { left: 77px; z-index: 27; width: calc( 100% - 600px ); + h1::before { + background-position: 90px 0; + } } logo { @@ -141,6 +157,9 @@ logo { z-index: 10; border-color: $window-chrome; } + span::before { + background-position: 0px 0; + } z-index: 50; @include window-chrome(); border-color: black;