This commit is contained in:
Rushil Umaretiya 2020-09-30 01:58:36 -04:00
parent 945cd1b93e
commit 06f4bb5186
4 changed files with 29 additions and 18 deletions

View File

@ -38,6 +38,14 @@ class Location (models.Model):
draw.text((x,y), text, font=font, fill=(255,255,255))
img.save(output)
def add_margin(pil_img, top, right, bottom, left, color):
width, height = pil_img.size
new_width = width + right + left
new_height = height + top + bottom
result = Image.new(pil_img.mode, (new_width, new_height), color)
result.paste(pil_img, (left, top))
return result
self.slug = slugify(self.name)
self.hero = f'heros/hero-{self.slug}.png'
self.hero_mobile = f'heros/hero-{self.slug}-mobile.png'
@ -66,7 +74,7 @@ class Location (models.Model):
drawPic(mobile_output, mobile_output, font, 100, 1470, self.slug.upper())
drawPic(mobile_output, mobile_output, font, 100, 1570, self.slug.upper())
mobile_img = Image.open(mobile_output)
mobile_img.resize((1920, 1080))
mobile_img = mobile_img.resize((1080, 1920))
mobile_img.save(mobile_output)
output = f'{settings.PROJECT_PATH}/media/results/results-{self.slug}.png'

View File

@ -11,7 +11,14 @@
@media (max-width: 768px) {
.hero {
background-image: url("{{ location.hero_mobile.url }}");
background: url("{{ location.hero_mobile.url }}");
background-attachment: fixed
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
</style>
@ -24,8 +31,7 @@
<div id="info-section"class="row">
<div class="col-lg info-col p-5">
<h1 class="info-header">
<img class="img-fluid" src="{% static 'css/res/info-header.png' %}" alt="WHAT IS THIS? <br /> AND WHAT'S HILO?">
{# WHAT IS THIS?<br/> AND WHATS YOUR STORY? #}
WHAT IS THIS?<br/> AND WHATS YOUR STORY?
</h1>
<p class="info">
inspired by a family tradition of “high, low, buffalo”, a fun exercise
@ -87,8 +93,7 @@
{% endfor %}
<div class="row title pb-3 ">
<img class="mx-auto img-fluid" style="max-width: 80%!important;" src="{% static 'css/res/time-to-shine.png' %}">
{# <p class="mx-auto title">NOW IS YOUR TIME TO SHINE</p> #}
<p class="mx-auto title shine">NOW IS YOUR TIME TO SHINE</p>
</div>
{% if hi_text %}
<div class="row pb-3 short-answer">
@ -145,7 +150,7 @@
{% endif %}
{% if place_text %}
<div class="row title">
<img class="mx-auto img-fluid" style="max-width: 80%!important;" src="{% static 'css/res/hilo-hashtag.png' %}">
<p class="mx-auto title">#HILOW</p>
</div>
<div class="row pb-3 short-answer">
<label class="mx-auto" for="{{ form.place.id_for_label }}">{{ place_text|safe }}</label>
@ -159,9 +164,7 @@
{% endif %}
{% if question_text %}
<div class="row title">
<img class="mx-auto img-fluid" style="max-width: 80%!important;" src="{% static 'css/res/bonus-question.png' %}">
{# <p class="mx-auto title">BONUS QUESTION</p> #}
<p class="mx-auto title">BONUS QUESTION</p>
</div>
<div class="row pb-3 short-answer">
<label class="mx-auto" for="{{ form.question.id_for_label }}">{{ question_text|safe }}</label>
@ -175,7 +178,7 @@
{% endif %}
<div class="row">
<button type="submit" class="mx-auto btn text-uppercase">
<img src="{% static 'css/res/submit-white.png' %}">
<img width=75% src="{% static 'css/res/submit-white.png' %}">
</button>
</div>
</form>

View File

@ -17,7 +17,7 @@
src: url("./fonts/FuturaPTHeavy.otf");
font-family: "Futura-Heavy"; }
html {
background-color: #4b4b4b;
background-color: black;
font-family: "Hanson-Bold", "Arial", sans-serif;
overflow-x: none !important; }
@ -88,7 +88,7 @@ body::-webkit-scrollbar {
font-family: "Hanson-Bold", "Arial", sans-serif; }
@media (max-width: 768px) {
.info-header {
font-size: 1.25em; } }
font-size: 1.5em; } }
.info {
font-size: .8em;
@ -131,7 +131,7 @@ body::-webkit-scrollbar {
font-size: 1.1em; }
.title {
color: #000;
color: #fff;
font-size: 1.40em;
text-align: center; }
@media (min-width: 768px) {
@ -139,7 +139,7 @@ body::-webkit-scrollbar {
font-size: 1.45em; } }
.subtitle {
color: #000;
color: #fff;
font-size: 1.1em; }
@media (min-width: 768px) {
.subtitle {

View File

@ -58,14 +58,14 @@ $mobile-width: 768px;
$dark-grey: #333;
$darker-grey: #4b4b4b;
$text: #000000;
$text-light: #000;
$text-light: #fff;
$header-stroke: #305899;
$green: #80ea7b;
$red: #f85151;
html {
background-color: $darker-grey;
background-color: black;
font-family: $font-stack;
overflow-x: none!important;
@ -161,7 +161,7 @@ body::-webkit-scrollbar {
//-webkit-text-stroke: 3px $header-stroke;
@include mobile {
font-size: 1.25em;
font-size: 1.5em;
//text-stroke: 2px $header-stroke;
//-webkit-text-stroke: 2px $header-stroke;
}