Skip to content

Commit 84bc65f

Browse files
GustavBoeGustavBoe
committed
Styled create post page.
1 parent e80165f commit 84bc65f

4 files changed

Lines changed: 48 additions & 32 deletions

File tree

‎create.html‎

Lines changed: 39 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
@@ -8,32 +8,47 @@
88
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
99
<link
1010
href="https://fonts.googleapis.com/css2?family=Tsukimi+Rounded&display=swap"
11-
rel="stylesheet"
12-
/>
13-
<link rel="stylesheet" href="./src/style.css" />
14-
<script
15-
src="https://kit.fontawesome.com/ebc3e386e0.js"
16-
crossorigin="anonymous"
17-
></script>
11+
rel="stylesheet" />
12+
<link href="./src/output.css" rel="stylesheet" />
13+
1814
<script type="module" src="./src/api/postsServices.js" defer></script>
1915
</head>
2016
<body>
2117
<header id="desktop-header" class="desktop-header"></header>
22-
<h1 class="create-heading tsukimi-rounded-regular">Create a post</h1>
23-
<form id="create-form">
24-
<label for="title">Title*</label>
25-
<input name="title" id="title" required class="create-title" />
26-
<label for="url">Image URL</label>
27-
<input type="url" name="url" id="url" class="create-url" />
28-
<textarea
29-
name="body"
30-
id="body"
31-
cols="25"
32-
rows="5"
33-
placeholder="Caption your Still photo"
34-
class="create-textarea"
35-
></textarea>
36-
<button class="create-button">Create post</button>
37-
</form>
18+
<section class="flex flex-col items-center gap-10 mx-auto max-w-100">
19+
<h1 class="font-tsukimi text-3xl">Create a post</h1>
20+
<form
21+
id="create-form"
22+
class="flex flex-col items-center justify-items-center text-left gap-5 w-[40%]">
23+
¨
24+
<div class="flex flex-col items-center w-full">
25+
<label for="title" class="self-start">Title</label>
26+
<input
27+
name="title"
28+
id="title"
29+
required
30+
class="border rounded-sm pl-2 w-full" />
31+
</div>
32+
<div class="flex flex-col items-center w-full">
33+
<label for="url" class="self-start">Image URL</label>
34+
<input
35+
type="url"
36+
name="url"
37+
id="url"
38+
class="border rounded-sm pl-2 w-full" />
39+
</div>
40+
41+
<textarea
42+
name="body"
43+
id="body"
44+
cols="25"
45+
rows="5"
46+
placeholder="Caption your Still photo"
47+
class="border rounded-sm pl-2 w-full"></textarea>
48+
<button class="border-2 px-4 py-2 hover:bg-black hover:text-white">
49+
Create post
50+
</button>
51+
</form>
52+
</section>
3853
</body>
3954
</html>

‎edit.html‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
@@ -8,13 +8,11 @@
88
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
99
<link
1010
href="https://fonts.googleapis.com/css2?family=Tsukimi+Rounded&display=swap"
11-
rel="stylesheet"
12-
/>
13-
<link rel="stylesheet" href="./src/style.css" />
11+
rel="stylesheet" />
12+
<link href="./src/output.css" rel="stylesheet" />
1413
<script
1514
src="https://kit.fontawesome.com/ebc3e386e0.js"
16-
crossorigin="anonymous"
17-
></script>
15+
crossorigin="anonymous"></script>
1816
<script type="module" src="./src/api/editPost.js" defer></script>
1917
</head>
2018
<body>
@@ -30,8 +28,7 @@ <h1 class="edit-heading tsukimi-rounded-regular">Edit your post</h1>
3028
id="body"
3129
cols="25"
3230
rows="5"
33-
class="edit-body"
34-
></textarea>
31+
class="edit-body"></textarea>
3532
<button class="edit-button" type="submit">Save changes</button>
3633
<button id="delete-button">Delete post</button>
3734
</form>

‎src/components/headerFooterLoader.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,4 +49,5 @@ export function createHeader() {
4949
headerNavigation.append(headerLogo);
5050
headerNavigation.append(linksContainer);
5151
pageHeader.append(headerNavigation);
52+
pageHeader.classList.add("mb-15");
5253
}

‎src/output.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -186,6 +186,9 @@
186186
.mb-5 {
187187
margin-bottom: calc(var(--spacing) * 5);
188188
}
189+
.mb-15 {
190+
margin-bottom: calc(var(--spacing) * 15);
191+
}
189192
.flex {
190193
display: flex;
191194
}

0 commit comments

Comments
 (0)