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

Merge branch 'main' of https://gitea.rkg.lv/elukjanovica/Picture-Puzzle-website

main
elukjanovica 2024-04-27 09:25:52 +03:00
parent 4e1a925dac 7f4c537564
commit 5cd315927a
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, .featured-post,
.latest-post { .latest-post {
padding: 20px 40px; padding: 20px 35px;
box-sizing: border-box; box-sizing: border-box;
margin-bottom: 20px; margin-bottom: 20px;
text-align: center; text-align: center;
@ -193,6 +193,8 @@ h2 {
.featured-post img, .featured-post img,
.latest-post img { .latest-post img {
width: 500px;
height: 350px;
margin-bottom: 10px; margin-bottom: 10px;
flex-shrink: 0; flex-shrink: 0;
border-radius: 6px; border-radius: 6px;
@ -291,6 +293,7 @@ input#password, input#username,
textarea:hover { 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; 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); transform: translateY(-2px);
min-width: 250px;
} }
/* Button */ /* Button */
@ -425,4 +428,67 @@ i.far.fa-comment {
.gif-container:hover .tooltiptext { .gif-container:hover .tooltiptext {
visibility: visible; visibility: visible;
opacity: 1; 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> <body>
<nav> <nav>
<div class="logo-container"> <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"> <div class="gif-container">
<img src="{{ url_for('static', filename='images/bird.gif') }}" class="clickable" aria-label="Copy game link" alt="Bird"> <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> <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-posts-container">
<div class="featured-post"> <div class="featured-post">
<a href="{{ url_for('post', alias='update-1-1') }}"> <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> <h3>Game 'Picture Puzzle remake' update 1.1</h3>
</a> </a>
</div> </div>
<div class="featured-post"> <div class="featured-post">
<a href="{{ url_for('post', alias='how-it-was-made') }}"> <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> <h3>How the 'Picture Puzzle remake' was made</h3>
</a> </a>
</div> </div>
<div class="featured-post"> <div class="featured-post">
<a href="{{ url_for('post', alias='history') }}"> <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> <h3>Picture Puzzle history</h3>
</a> </a>
</div> </div>
@ -43,7 +43,7 @@
{% for post in latest_posts[:3] %} {% for post in latest_posts[:3] %}
<div class="latest-post"> <div class="latest-post">
<a href="{{ url_for('post', alias=post.alias) }}"> <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> <h3>{{ post.title }}</h3>
</a> </a>
</div> </div>

2
templates/posts.html
View File

@ -5,7 +5,7 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<h2>All Posts</h2> <h2 class="center">All Posts</h2>
<div class="posts-container"> <div class="posts-container">
<div class="posts"> <div class="posts">
{% for post in posts %} {% for post in posts %}