Merge branch 'main' of https://gitea.rkg.lv/elukjanovica/Picture-Puzzle-website
						commit
						5cd315927a
					
				| 
						 | 
				
			
			@ -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 */
 | 
			
		||||
| 
						 | 
				
			
			@ -426,3 +429,66 @@ i.far.fa-comment {
 | 
			
		|||
    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;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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 %}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue