use variables for background colors

This commit is contained in:
j 2021-10-13 16:54:25 +01:00
parent 770c000a93
commit 40b2e06c83
3 changed files with 34 additions and 6 deletions

View file

@ -1,3 +1,10 @@
:root {
--bg-color-1: #6666ff;
--bg-color-2: #0099ff;
--bg-color-3: #ffff00;
--bg-color-4: #ff3399;
}
@keyframes background_animation {
0%,100% {
background-position: 0 0;
@ -10,7 +17,7 @@
}
}
body {
background: linear-gradient(to right, #6666ff, #0099ff , #ffff00, #ff3399);
background: linear-gradient(to right, var(--bg-color-1), var(--bg-color-2) , var(--bg-color-3), var(--bg-color-4));
animation: background_animation 60s ease-in-out infinite;
background-size: 400% 100%;
color: #ddd;

View file

@ -2,10 +2,10 @@
{% block main %}
<style>
:root {
--film-color: {{ film.color }};
}
body {
background: var(--film-color);
--bg-color-1: {{ film.color_1 }};
--bg-color-2: {{ film.color_2 }};
--bg-color-3: {{ film.color_2 }};
--bg-color-4: {{ film.color_4 }};
}
</style>

View file

@ -37,13 +37,34 @@ class Film(models.Model):
def duration(self):
return ox.format_timecode(self.data['duration'])[:-4]
def color(self):
def color_1(self):
hue = self.data['hue']
saturation = self.data['saturation'] * 100
saturation = 70
lightness = self.data['lightness'] * 100
return "hsl({}, {}%, {}%)".format(hue, saturation, lightness)
def color_2(self):
hue = self.data['hue']
saturation = self.data['saturation'] * 100
saturation = 70
lightness = self.data['lightness'] * 50
return "hsl({}, {}%, {}%)".format(hue, saturation, lightness)
def color_3(self):
hue = self.data['hue']
saturation = self.data['saturation'] * 100
saturation = 70
lightness = self.data['lightness'] * 110
return "hsl({}, {}%, {}%)".format(hue, saturation, lightness)
def color_4(self):
hue = self.data['hue']
saturation = self.data['saturation'] * 100
saturation = 70
lightness = self.data['lightness'] * 80
return "hsl({}, {}%, {}%)".format(hue, saturation, lightness)
def json(self):
data = {}
data['id'] = self.padma_id