search

techno-tim / littlelink-server

A lightweight, open source, stateless, and self-hosted alternative to linktree in a Docker container!
https://links.technotim.live
MIT License
921 stars 162 forks source link

Gradient background #3

Open timothystewart6 opened 3 years ago

timothystewart6 commented 3 years ago

it currently supports Dark and Light mode. A gradient that spans a few hex values would be nice.

jjjonesjr33 commented 3 years ago

Can be done once you gain access to the index.html

Example

<style>
body {
  background-image: url('https://i.imgur.com/somerandompicture.png');
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: #000000;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}
</style>
timothystewart6 commented 3 years ago

Thanks! Will do this in code so that you don't have to map the volume and it's completely stateless.

kenjibailly commented 2 years ago

This is a lovely idea! I second this!

kenjibailly commented 2 years ago

Any progress on this? :)

timothystewart6 commented 2 years ago

not yet, will add soon!

jjjonesjr33 commented 2 years ago

Since this has not been built, for those who else are wondering if there is a a workaround. Here you go.

For Remote Images

This code pulls from an external image url.

Add Path, create the normalize.css file in the appdata docker folder location. Container Path: /usr/src/app/build/public/css/normalize.css Host Path: /mnt/user/appdata/littlelink/css/normalize.css

Use this code for normalize.css

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{background-image:url(https://i.imgur.com/something.png);background-size:cover;background-attachment:fixed;background-repeat:no-repeat;background-position: center;}margin>
/*# sourceMappingURL=normalize.css.map*/

Just replace the https://i.imgur.com/something.png in the code

For Locally Hosted Images

This code pulls stored images

Create a container path to store you images, then map the container to give it access to the images. Container Path: /usr/src/app/build/public/static/media/local Host Path: /mnt/user/appdata/littlelink/images

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{background-image:url(/static/media/local/Background.webp);background-size:cover;background-attachment:fixed;background-repeat:no-repeat;background-position: center;}margin>
/*# sourceMappingURL=normalize.css.map*/

I stored mine as a webp so it loads faster and just named it as Background in the folder /static/media/local/Background.webp

FYI

If you do Locally Hosted Images, you can use the path and store your profile image as well. Just change the location of AVATAR_URL: and AVATAR_2X_URL: to the mapped folder and the phone being used.

I stored mine as a webp so it loads faster and just named it as Profile in the folder /static/media/local/Profile.webp