From 7f4c53756442f737e2a1584d1f81f54abc33b6c7 Mon Sep 17 00:00:00 2001
From: elukjanovica <lukjanovichaelina.com>
Date: Sat, 20 Apr 2024 17:00:24 +0300
Subject: [PATCH]
---
static/css/main.css | 70 ++++++++++++++++++++++++++++++++++++++++++--
templates/base.html | 2 +-
templates/index.html | 8 ++---
templates/posts.html | 2 +-
4 files changed, 74 insertions(+), 8 deletions(-)
diff --git a/static/css/main.css b/static/css/main.css
index 9a9ed41..638c774 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -170,7 +170,7 @@ h2 {
.featured-post,
.latest-post {
- padding: 20px 40px;
+ padding: 20px 35px;
box-sizing: border-box;
margin-bottom: 20px;
text-align: center;
@@ -193,6 +193,8 @@ h2 {
.featured-post img,
.latest-post img {
+ width: 500px;
+ height: 350px;
margin-bottom: 10px;
flex-shrink: 0;
border-radius: 6px;
@@ -291,6 +293,7 @@ input#password, input#username,
textarea:hover {
box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
transform: translateY(-2px);
+ min-width: 250px;
}
/* Button */
@@ -425,4 +428,67 @@ i.far.fa-comment {
.gif-container:hover .tooltiptext {
visibility: visible;
opacity: 1;
-}
\ No newline at end of file
+}
+
+.center {
+ text-align: center;
+}
+
+/* Mobile-specific */
+@media only screen and (max-width: 767px) {
+ /* Navbar */
+ nav {
+ padding: 0.7rem 0.5rem;
+ }
+
+ nav li a, nav a.link {
+ padding: 0.1rem;
+ }
+
+ .dropdown-content {
+ padding: 5px;
+ }
+
+ nav ul li a {
+ font-size: 16px;
+ }
+
+ nav ul li {
+ margin-right: 0.4rem;
+ }
+
+ nav img {
+ max-width: 50px;
+ max-height: 50px;
+ }
+
+ nav ul {
+ margin-right: 0.5rem;
+ }
+
+ .logo {
+ min-width: 140px;
+ }
+
+ /* Content */
+ .content {
+ padding: 20px;
+ }
+
+ /* Posts */
+ .post {
+ padding: 15px;
+ }
+
+ /* Featured and latest posts */
+ .featured-post,
+ .latest-post {
+ padding: 20px;
+ }
+
+ .featured-post img,
+ .latest-post img {
+ width: 100%;
+ height: auto;
+ }
+}
diff --git a/templates/base.html b/templates/base.html
index 4c83c48..fff1e4e 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -11,7 +11,7 @@
<body>
<nav>
<div class="logo-container">
- <a href="{{ url_for('index') }}"><img src="{{ url_for('static', filename='images/Picture-Puzzle-logo.png') }}" alt="Picture Puzzle website logo"></a>
+ <a href="{{ url_for('index') }}"><img class="logo" src="{{ url_for('static', filename='images/Picture-Puzzle-logo.png') }}" alt="Picture Puzzle website logo"></a>
<div class="gif-container">
<img src="{{ url_for('static', filename='images/bird.gif') }}" class="clickable" aria-label="Copy game link" alt="Bird">
<span class="tooltiptext" id="copyNotification">Get link to game</span>
diff --git a/templates/index.html b/templates/index.html
index 16db6b2..a7abd91 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -18,19 +18,19 @@
<div class="featured-posts-container">
<div class="featured-post">
<a href="{{ url_for('post', alias='update-1-1') }}">
- <img src="{{ url_for('static', filename='images/skeleton.png') }}" alt="Featured Post" width="500" height="350">
+ <img src="{{ url_for('static', filename='images/skeleton.png') }}" alt="Featured Post">
<h3>Game 'Picture Puzzle remake' update 1.1</h3>
</a>
</div>
<div class="featured-post">
<a href="{{ url_for('post', alias='how-it-was-made') }}">
- <img src="{{ url_for('static', filename='images/coding.png') }}" alt="Another Featured Post" width="500" height="350">
+ <img src="{{ url_for('static', filename='images/coding.png') }}" alt="Another Featured Post">
<h3>How the 'Picture Puzzle remake' was made</h3>
</a>
</div>
<div class="featured-post">
<a href="{{ url_for('post', alias='history') }}">
- <img src="{{ url_for('static', filename='images/picture-puzzle.png') }}" alt="Another Featured Post" width="500" height="350">
+ <img src="{{ url_for('static', filename='images/picture-puzzle.png') }}" alt="Another Featured Post">
<h3>Picture Puzzle history</h3>
</a>
</div>
@@ -43,7 +43,7 @@
{% for post in latest_posts[:3] %}
<div class="latest-post">
<a href="{{ url_for('post', alias=post.alias) }}">
- <img src="{{ url_for('static', filename='images/' + post.image) }}" alt="{{ post.title }}" width="500" height="350">
+ <img src="{{ url_for('static', filename='images/' + post.image) }}" alt="{{ post.title }}">
<h3>{{ post.title }}</h3>
</a>
</div>
diff --git a/templates/posts.html b/templates/posts.html
index 1e22996..7a1e40d 100644
--- a/templates/posts.html
+++ b/templates/posts.html
@@ -5,7 +5,7 @@
{% endblock %}
{% block content %}
-<h2>All Posts</h2>
+<h2 class="center">All Posts</h2>
<div class="posts-container">
<div class="posts">
{% for post in posts %}