From f22f3e876a6492837a4a2f6d2cf3f1b22fcc8dff Mon Sep 17 00:00:00 2001
From: Michael Drury <mpdrury15@gmail.com>
Date: Fri, 28 Apr 2023 13:41:36 +0100
Subject: [PATCH] changing font sizes to using vw so changes when screen size
changes and changed the footer logo and some text sizes
---
shop/static/styles.css | 23 ++++++++++++++++-------
shop/templates/cart.html | 4 ++--
shop/templates/home.html | 8 ++++----
shop/templates/shopping.html | 16 ++++++++--------
shop/templates/wishlist.html | 4 ++--
5 files changed, 32 insertions(+), 23 deletions(-)
diff --git a/shop/static/styles.css b/shop/static/styles.css
index 7239a77..c0b5b06 100644
--- a/shop/static/styles.css
+++ b/shop/static/styles.css
@@ -112,14 +112,18 @@ a:link {
border: 2px solid black;
}
-.item_home_name {
- font-size: 200%;
+.item_shopping_name {
+ font-size: 2vw;
color: black;
font-family: Monaco, sans-serif;
}
-.item_home_name:hover {
- font-size: 230%;
+.shopping_item_text{
+ font-size: 1.4vw;
+}
+
+.item_shopping_name:hover {
+ font-size: 2.1vw;
}
.navbar {
@@ -331,7 +335,7 @@ li {
margin-top: 50px;
}
-.home_right_text {
+.shopping_right_text {
font-size: 150%;
}
@@ -399,11 +403,16 @@ li {
background-color: #202020;
}
-.footer_logo {
+.footer_logo_div {
margin-left: 50px;
margin-top: 10px;
}
+.footer_logo_left {
+ height: 100px;
+ max-width: 30%
+}
+
.footer_contact {
color: white;
text-align: center;
@@ -434,7 +443,7 @@ li {
.start_shopping_text {
color: white;
- font-size: 400%;
+ font-size: 4vw;
font-family: Andale Mono, monospace;
}
diff --git a/shop/templates/cart.html b/shop/templates/cart.html
index 37f95f3..1e35e85 100644
--- a/shop/templates/cart.html
+++ b/shop/templates/cart.html
@@ -60,8 +60,8 @@
<!--repeated footer in page as dont want every page to have it-->
<footer id="footer">
- <div class = "footer_logo">
- <img style = "height:100px" src = "{{ url_for('static', filename='images/dark_logo.png') }}" alt="logo image"/>
+ <div class = "footer_logo_div">
+ <img class = "footer_logo_left" src = "{{ url_for('static', filename='images/dark_logo.png') }}" alt="logo image"/>
</div>
<div class = "footer_contact">
<p>Contact us:</p>
diff --git a/shop/templates/home.html b/shop/templates/home.html
index d4fd91b..e60b0e5 100644
--- a/shop/templates/home.html
+++ b/shop/templates/home.html
@@ -6,11 +6,11 @@
<div id="content-wrap">
<div class = "home_right">
- <img src = "{{ url_for('static', filename='images/cog.png') }}" alt="cog" style="width:60px;">
+ <img src = "{{ url_for('static', filename='images/cog.png') }}" alt="cog" style="width:4vw;">
</div>
<div class = "home_left">
- <img src = "{{ url_for('static', filename='images/cog.png') }}" alt="cog" style="width:60px;">
+ <img src = "{{ url_for('static', filename='images/cog.png') }}" alt="cog" style="width:4vw;">
</div>
<h1 class = "home_title" >Rocky Alpine Cycles</h1>
@@ -33,8 +33,8 @@
<!--repeated footer in page as dont want every page to have it-->
<footer id="footer">
- <div class = "footer_logo">
- <img style = "height:100px" src = "{{ url_for('static', filename='images/dark_logo.png') }}" alt="logo image"/>
+ <div class = "footer_logo_div">
+ <img class = "footer_logo_left" src = "{{ url_for('static', filename='images/dark_logo.png') }}" alt="logo image"/>
</div>
<div class = "footer_contact">
<p>Contact us:</p>
diff --git a/shop/templates/shopping.html b/shop/templates/shopping.html
index 5bfd29f..3a53bf7 100644
--- a/shop/templates/shopping.html
+++ b/shop/templates/shopping.html
@@ -7,11 +7,11 @@
<div id="content-wrap">
<div class = "shopping_side">
- <p class = "home_right_text">You are {% if not current_user.is_authenticated %}not {% endif %}logged in.</p>
+ <p class = "shopping_right_text">You are {% if not current_user.is_authenticated %}not {% endif %}logged in.</p>
<form action="" method="POST">
<div>
<form method="POST">
- <div class = "home_right_text">
+ <div class = "shopping_right_text">
{{ order_by_form.csrf_token }}
<p>
{{ order_by_form.order.label }} {{ order_by_form.order(class = "field_order_by") }} {{ order_by_form.submit(class = "field_order_by") }}
@@ -20,7 +20,7 @@
</form>
<form method="POST">
- <div class = "home_right_text">
+ <div class = "shopping_right_text">
{{ type_form.csrf_token }}
<p>
{{ type_form.type.label }} {{ type_form.type(class = "field_order_by") }} {{ type_form.submit1(class = "field_order_by") }}
@@ -68,9 +68,9 @@
<div class = "item_shopping_block">
<a href="/item?id={{item.product_id}}">
<img class = "item_shopping_img" src = "{{ url_for('static', filename='images/' + item.product_image) }}" alt="product image"/></a>
- <p><a class = "item_home_name" href="/item?id={{item.product_id}}"><b>{{ item.product_name }}</b></a></p>
- <p>price: £{{ item.product_price }}</p>
- <p>product type: {{ item.product_type }}</p>
+ <p><a class = "item_shopping_name" href="/item?id={{item.product_id}}"><b>{{ item.product_name }}</b></a></p>
+ <p class = "shopping_item_text">price: £{{ item.product_price }}</p>
+ <p class = "shopping_item_text">product type: {{ item.product_type }}</p>
{% if current_user.is_authenticated %}
<form method = "post">
<input type = "hidden" name = "item_id_cart" value = {{ item.product_id }}>
@@ -92,8 +92,8 @@
<!--repeated footer in page as dont want every page to have it-->
<footer id="footer">
- <div class = "footer_logo">
- <img style = "height:100px" src = "{{ url_for('static', filename='images/dark_logo.png') }}" alt="logo image"/>
+ <div class = "footer_logo_div">
+ <img class = "footer_logo_left" src = "{{ url_for('static', filename='images/dark_logo.png') }}" alt="logo image"/>
</div>
<div class = "footer_contact">
<p>Contact us:</p>
diff --git a/shop/templates/wishlist.html b/shop/templates/wishlist.html
index 7885df6..bf614eb 100644
--- a/shop/templates/wishlist.html
+++ b/shop/templates/wishlist.html
@@ -47,8 +47,8 @@
<!--repeated footer in page as dont want every page to have it-->
<footer id="footer">
- <div class = "footer_logo">
- <img style = "height:100px" src = "{{ url_for('static', filename='images/dark_logo.png') }}" alt="logo image"/>
+ <div class = "footer_logo_div">
+ <img class = "footer_logo_left" src = "{{ url_for('static', filename='images/dark_logo.png') }}" alt="logo image"/>
</div>
<div class = "footer_contact">
<p>Contact us:</p>
--
GitLab