elukjanovica
/
Picture-Puzzle-website
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

main
elukjanovica 2024-04-20 17:00:24 +03:00
parent cf9fa10298
commit 7f4c537564
4 changed files with 74 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
static/css/main.css
View File

@ -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;
}
}
.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;
}
}

2
templates/base.html
View File

@ -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>

8
templates/index.html
View File

@ -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>

2
templates/posts.html
View File

@ -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 %}