alina
/
alinamarquardt.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

optimizations

main
Alina Marquardt 2025-05-13 20:21:24 +02:00
parent 0133dc8511
commit e8401b3324
2 changed files with 22 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
public_html/index.html
View File

@ -9,11 +9,11 @@
<meta name="author" content="alina marquardt" /> <meta name="author" content="alina marquardt" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preload" fetchpriority="high" as="image" href="img/bg.jpg" type="image/jpeg"> <link rel="preload" fetchpriority="high" as="image" href="img/bg.webp" type="image/jpeg">
<link rel="preload" fetchpriority="high" as="image" href="img/bg_blur.jpg" type="image/jpeg"> <link rel="preload" fetchpriority="high" as="image" href="img/bg_blur.webp" type="image/jpeg">
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
<script src="js/three.min.js"></script> <script src="js/three.min.js" defer></script>
<script src="functions.js" defer></script> <script src="functions.js" defer></script>
</head> </head>
@ -52,7 +52,7 @@
<article class="opaque whitebg album"> <article class="opaque whitebg album">
<a href="https://lastfuture.bandcamp.com/track/misinterpreter-2" target="_blank"> <a href="https://lastfuture.bandcamp.com/track/misinterpreter-2" target="_blank">
<img class="albumcover" src="img/album/lastfuture_-_misinterpreter.jpg" /> <img class="albumcover" src="img/album/lastfuture_-_misinterpreter.jpg" width="120" height="120" />
<h2>lastfuture <em>misinterpreter</em></h2> <h2>lastfuture <em>misinterpreter</em></h2>
<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div> <div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
</a> </a>
@ -61,7 +61,7 @@
<div class="clearfix"></div> <div class="clearfix"></div>
<article class="opaque whitebg album"> <article class="opaque whitebg album">
<a href="https://lastfuture.bandcamp.com/album/signal-to-noise" target="_blank"> <a href="https://lastfuture.bandcamp.com/album/signal-to-noise" target="_blank">
<img class="albumcover" src="img/album/lastfuture_-_signal_to_noise.jpg" /> <img class="albumcover" src="img/album/lastfuture_-_signal_to_noise.jpg" width="120" height="120" />
<h2>lastfuture <em>signal to noise</em></h2> <h2>lastfuture <em>signal to noise</em></h2>
<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div> <div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
</a> </a>
@ -70,7 +70,7 @@
<div class="clearfix"></div> <div class="clearfix"></div>
<article class="opaque whitebg album"> <article class="opaque whitebg album">
<a href="https://lastfuture.bandcamp.com/album/dreamshifter" target="_blank"> <a href="https://lastfuture.bandcamp.com/album/dreamshifter" target="_blank">
<img class="albumcover" src="img/album/lastfuture_-_dreamshifter.jpg" /> <img class="albumcover" src="img/album/lastfuture_-_dreamshifter.jpg" width="120" height="120" />
<h2>lastfuture <em>dreamshifter</em></h2> <h2>lastfuture <em>dreamshifter</em></h2>
<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div> <div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
</a> </a>
@ -79,7 +79,7 @@
<div class="clearfix"></div> <div class="clearfix"></div>
<article class="opaque whitebg album"> <article class="opaque whitebg album">
<a href="https://lastfuture.bandcamp.com/album/reverse-kill" target="_blank"> <a href="https://lastfuture.bandcamp.com/album/reverse-kill" target="_blank">
<img class="albumcover" src="img/album/lastfuture_-_reverse_kill.jpg" /> <img class="albumcover" src="img/album/lastfuture_-_reverse_kill.jpg" width="120" height="120" />
<h2>lastfuture <em>reverse kill</em></h2> <h2>lastfuture <em>reverse kill</em></h2>
<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div> <div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
</a> </a>

19
public_html/style.css
View File

@ -291,6 +291,7 @@ p {
font-style: italic; font-style: italic;
font-weight: 400; font-weight: 400;
src: local('Source Sans Pro'), url('fonts/SourceSansPro-It.woff') format('woff'); src: local('Source Sans Pro'), url('fonts/SourceSansPro-It.woff') format('woff');
font-display: swap;
} }
@font-face { @font-face {
@ -298,6 +299,7 @@ p {
font-style: normal; font-style: normal;
font-weight: 200; font-weight: 200;
src: local('Source Sans Pro'), url('fonts/SourceSansPro-ExtraLight.woff') format('woff'); src: local('Source Sans Pro'), url('fonts/SourceSansPro-ExtraLight.woff') format('woff');
font-display: swap;
} }
@font-face { @font-face {
@ -305,6 +307,7 @@ p {
font-style: italic; font-style: italic;
font-weight: 200; font-weight: 200;
src: local('Source Sans Pro'), url('fonts/SourceSansPro-ExtraLightIt.woff') format('woff'); src: local('Source Sans Pro'), url('fonts/SourceSansPro-ExtraLightIt.woff') format('woff');
font-display: swap;
} }
@font-face { @font-face {
@ -312,6 +315,7 @@ p {
font-style: normal; font-style: normal;
font-weight: 300; font-weight: 300;
src: local('Source Sans Pro'), url('fonts/SourceSansPro-Light.woff') format('woff'); src: local('Source Sans Pro'), url('fonts/SourceSansPro-Light.woff') format('woff');
font-display: swap;
} }
@font-face { @font-face {
@ -319,6 +323,7 @@ p {
font-style: italic; font-style: italic;
font-weight: 300; font-weight: 300;
src: local('Source Sans Pro'), url('fonts/SourceSansPro-LightIt.woff') format('woff'); src: local('Source Sans Pro'), url('fonts/SourceSansPro-LightIt.woff') format('woff');
font-display: swap;
} }
@font-face { @font-face {
@ -326,6 +331,7 @@ p {
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
src: local('Source Sans Pro'), url('fonts/SourceSansPro-Semibold.woff') format('woff'); src: local('Source Sans Pro'), url('fonts/SourceSansPro-Semibold.woff') format('woff');
font-display: swap;
} }
@font-face { @font-face {
@ -333,6 +339,7 @@ p {
font-style: italic; font-style: italic;
font-weight: 600; font-weight: 600;
src: local('Source Sans Pro'), url('fonts/SourceSansPro-SemiboldIt.woff') format('woff'); src: local('Source Sans Pro'), url('fonts/SourceSansPro-SemiboldIt.woff') format('woff');
font-display: swap;
} }
@font-face { @font-face {
@ -340,6 +347,7 @@ p {
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
src: local('Source Sans Pro'), url('fonts/SourceSansPro-Bold.woff') format('woff'); src: local('Source Sans Pro'), url('fonts/SourceSansPro-Bold.woff') format('woff');
font-display: swap;
} }
@font-face { @font-face {
@ -347,6 +355,7 @@ p {
font-style: italic; font-style: italic;
font-weight: 700; font-weight: 700;
src: local('Source Sans Pro'), url('fonts/SourceSansPro-BoldIt.woff') format('woff'); src: local('Source Sans Pro'), url('fonts/SourceSansPro-BoldIt.woff') format('woff');
font-display: swap;
} }
@font-face { @font-face {
@ -354,6 +363,7 @@ p {
font-style: normal; font-style: normal;
font-weight: 900; font-weight: 900;
src: local('Source Sans Pro'), url('fonts/SourceSansPro-Black.woff') format('woff'); src: local('Source Sans Pro'), url('fonts/SourceSansPro-Black.woff') format('woff');
font-display: swap;
} }
@font-face { @font-face {
@ -361,6 +371,7 @@ p {
font-style: italic; font-style: italic;
font-weight: 900; font-weight: 900;
src: local('Source Sans Pro'), url('fonts/SourceSansPro-BlackIt.woff') format('woff'); src: local('Source Sans Pro'), url('fonts/SourceSansPro-BlackIt.woff') format('woff');
font-display: swap;
} }
:root { :root {
@ -440,7 +451,7 @@ textarea:-moz-placeholder {
body { body {
background-color: black; background-color: black;
/* background-image: url('img/bg.jpg'); */ /* background-image: url('img/bg.webp'); */
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: top left; background-position: top left;
background-attachment: fixed; background-attachment: fixed;
@ -462,7 +473,7 @@ a {
left: 0; left: 0;
height: 100%; height: 100%;
width: 100%; width: 100%;
background-image: url('img/bg.jpg'); background-image: url('img/bg.webp');
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: top left; background-position: top left;
background-attachment: fixed; background-attachment: fixed;
@ -728,7 +739,7 @@ article.album .listenbuy {
padding: 0.25em 1em; padding: 0.25em 1em;
opacity: 0; opacity: 0;
background-color: var(--button-color-hover); background-color: var(--button-color-hover);
background-image: url('img/bg_blur.jpg'); background-image: url('img/bg_blur.webp');
background-repeat: no-repeat; background-repeat: no-repeat;
background-attachment: fixed; background-attachment: fixed;
transition: opacity 0.25s, margin 0.25s, height 0.25s; transition: opacity 0.25s, margin 0.25s, height 0.25s;
@ -770,7 +781,7 @@ article.album a:hover {
.blurgreen { .blurgreen {
background-color: #437888; background-color: #437888;
background-image: url('img/bg_blur.jpg'); background-image: url('img/bg_blur.webp');
background-repeat: no-repeat; background-repeat: no-repeat;
background-attachment: fixed; background-attachment: fixed;
color: white; color: white;