nightmare theme + typo + comments

pull/23/head
remrem 11 months ago
parent b479703742
commit 6b5f479c6d

@ -4,6 +4,11 @@ body {
color: #1a2c4c;
}
.posts-container ul {
display: flex;
flex-direction: column;
gap: 1rem;
}
.profile-container {
background-color: #fff;
@ -11,6 +16,7 @@ body {
border-radius: 8px;
margin: 20px auto;
padding: 20px;
padding-bottom: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 70%;
}
@ -148,23 +154,6 @@ body {
cursor: pointer;
}
html {
--s: 257px;
/* control the size */
--c1: #38476b;
--c2: #bda3b6;
--_c: var(--c1) calc(100% - var(--s)/2) 99%, #0000;
--_g: var(--s), #0000 calc(99% - var(--s)/2), var(--_c);
background:
radial-gradient(var(--s) at 100% var(--_g)),
radial-gradient(calc(var(--s)/4) at 50% calc(100%/3), var(--_c)) var(--s) 0,
radial-gradient(var(--s) at 0% var(--_g)) 0 calc(3*var(--s)) var(--c2);
background-size:
calc(2*var(--s)) calc(9*var(--s)/4),
calc(2*var(--s)) calc(3*var(--s)/4);
}
header {
background-color: #bda3b6;
padding: 4px;
@ -172,6 +161,10 @@ header {
border-style: solid;
border-color: #1a2c4c;
border-width: 2px;
&.nightmare {
background-color: #010101;
}
}
nav {
@ -190,6 +183,10 @@ nav {
text-decoration: none;
color: #333;
margin-right: 30px;
&.nightmare {
color: white;
}
}
nav img {

@ -21,7 +21,7 @@ security:
login_path: app_login
check_path: app_login
enable_csrf: true
default_target_path: all post
default_target_path: all_posts
logout:
path: app_logout
target: /login

@ -2,23 +2,8 @@
font-family: "Helvetica", 'Courier New', Courier, monospace;
}
#wrapper {
display: flex;
flex-direction: column;
gap: 1rem;
margin: 2em auto;
width: 70%;
>h1 {
color: white;
font-size: 3em;
margin-top: 0;
}
}
html {
--s: 257px;
/* control the size */
--c1: #38476b;
--c2: #bda3b6;
@ -31,4 +16,27 @@ html {
background-size:
calc(2*var(--s)) calc(9*var(--s)/4),
calc(2*var(--s)) calc(3*var(--s)/4);
&.nightmare {
--c1: #990000;
--c2: #101010;
}
}
#wrapper {
display: flex;
flex-direction: column;
gap: 1rem;
margin: 2em auto;
width: 70%;
>h1 {
color: white;
font-size: 3em;
margin-top: 0;
}
}
ul {
padding: 0;
}

@ -2,7 +2,12 @@
background-color: #f2f2f7;
border: 1px solid black;
border-radius: 1rem;
padding: 20px;
padding: 10px;
&.nightmare {
background-color: #3a3c6e;
color: white;
}
.comment-info {
display: flex;
@ -15,7 +20,10 @@
p {
white-space: pre-wrap;
font-size: 1em;
margin: 0 auto;
}
margin-left: 5px;
}
a {

@ -1,11 +1,17 @@
#post-wrapper {
width: 70%;
background-color: #f2f2f7;
color: black;
margin: 0 auto;
border: 3px solid black;
border-radius: 1rem;
padding: 20px;
margin-top: 10vh;
margin-top: 5vh;
&.nightmare {
background-color: #1b1447;
color: white;
}
h1 {
font-size: 3em;
@ -30,7 +36,10 @@
}
#comments-wrapper {
padding: 10px;
display: flex;
flex-direction: column;
gap: 10px;
padding: 10px 0px;
}
}

@ -1,9 +1,15 @@
#post-wrapper {
background-color: #f2f2f7;
color: black;
border: 3px solid black;
border-radius: 1rem;
padding: 20px;
transition: .3s;
&.nightmare {
background-color: #1b1447;
color: white;
}
}
#post-wrapper:hover {

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html class="{{ nightmare|default('') }}">
<head>
<meta charset="UTF-8">
<title>{% block title %}Fukafukashita{% endblock %}</title>
@ -14,19 +14,21 @@
{% endblock %}
</head>
<body>
<header>
<header class="{{ nightmare|default('') }}">
<nav>
<div class="nav-links">
<a class="nav-logo" href="/">
<img src="{{ asset('images/logo.jpg') }}" alt="Logo">
</a>
<a class="nav-link" href="/"><h1>FukaFukashita</h1></a>
<a class="nav-link {{ nightmare|default('') }}" href="/"><h1>Fukafukashita</h1></a>
</div>
<div class="nav-links">
<a href="/profil/post/follow" class="nav-link">Abonnements</a>
<a href="/profil" class="nav-link">Compte</a>
{% if is_granted('ROLE_USER') %}
<a href="/logout" class="nav-link">Se déconnecter</a>
<a href="/profil/post/follow" class="nav-link {{ nightmare|default('') }}">Feed</a>
<a href="/profil" class="nav-link {{ nightmare|default('') }}">Profile</a>
<a href="/logout" class="nav-link {{ nightmare|default('') }}">Log out</a>
{% else %}
<a href="/login" class="nav-link {{ nightmare|default('') }}">Log in</a>
{% endif %}
</div>
</nav>

@ -1,9 +1,10 @@
<div class="comment-wrapper">
<div class="comment-wrapper{% if dream %} nightmare{% endif %}">
<div class="comment-info">
<img src="https://api.dicebear.com/8.x/big-smile/svg?seed={{ post.profil.name }}" width="50px">
<span>{{ post.profil.name }}</span>
<img src="https://api.dicebear.com/8.x/big-smile/svg?seed={{ comment.profil.name }}" width="35px">
<span>{{ comment.profil.name }}</span>
{# <span>- {{ post.dateCreated }}</span> #}
<span>- 12 hours ago</span>
<span>-</span>
{# <span>{{ post.createdAt }}|date('l, F j, Y')</span> #}
</div>
<div class="comment-text">

@ -1,5 +1,9 @@
{% extends 'base.html.twig' %}
{% if post.dream %}
{% set nightmare = 'nightmare' %}
{% endif %}
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('css/components/post.css') }}">
<link rel="stylesheet" href="{{ asset('css/components/form.css') }}">
@ -9,13 +13,14 @@
{% block title %}{{ post.title }}{% endblock %}
{% block body %}
<div id="post-wrapper">
<div id="post-wrapper" class="{% if post.dream %}nightmare{% endif %}">
<div id="post">
<div id="post-info">
<img src="https://api.dicebear.com/8.x/big-smile/svg?seed={{ post.profil.name }}" width="50px">
<span>{{ post.profil.name }}</span>
{# <span>- {{ post.dateCreated }}</span> #}
<span>- Il y a 3 jours</span>
<span>-</span>
<span>{{ post.createdAt|date('l, F j, Y') }}</span>
</div>
<h1 id="post-title">{{ post.title }}</h1>
@ -26,13 +31,16 @@
<div id="comments">
<h2>Comments</h2>
<div class="form-container">
{{ form(commentForm) }}
</div>
{% if is_granted('ROLE_USER') %}
<div class="form-container">
{{ form(commentForm) }}
</div>
{% endif %}
<div id="comments-wrapper">
{% for comment in post.commentaries %}
{% include 'comment/comment.html.twig' with { 'comment' : comment} %}
{% include 'comment/comment.html.twig' with { 'comment' : comment, 'dream' : post.dream } %}
{% endfor %}
</div>
</div>

@ -1,16 +1,17 @@
{% block body %}
<a href="{{ path('display_post', {'id': post.id}) }}">
<div id="post-wrapper">
<div id="post-wrapper" class="{% if post.dream %}nightmare{% endif %}">
<div id="post">
<div id="post-info">
<img src="https://api.dicebear.com/8.x/big-smile/svg?seed={{ post.profil.name }}" width="40px">
<span>{{ post.profil.name }}</span>
{# <span>- {{ post.dateCreated }}</span> #}
<span>- Il y a 3 jours</span>
<span>-</span>
<span>{{ post.createdAt|date('l, F j, Y') }}</span>
</div>
<h1 id="post-title">{{ post.title }}</h1>
<p>{{ post.text|u.truncate(150, true, '...') }}</p>
<p>{{ post.text|u.truncate(150, '...', false) }}</p>
</div>
</div>
</a>

Binary file not shown.
Loading…
Cancel
Save