framework done

Aditya-0712 · Jul 11, 2023 · b3127c8 · b3127c8
1 parent 8022ac5
commit b3127c8
Show file tree

Hide file tree

Showing 7 changed files with 205 additions and 2 deletions.
diff --git a/home.html b/home.html
@@ -67,7 +67,7 @@
             </div>
         </div>
 
-        <a href="#" class="add">
+        <a href="post.html" class="add">
             <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512">
                 <path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/>
             </svg>

diff --git a/post.html b/post.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>BlogBase | Post</title>
+        <meta name="viewport" content="width=device-width , initial-scale=1.0">
+        <link rel="stylesheet" href="public/fonts.css">
+        <link rel="stylesheet" href="public/post.css">
+    </head>
+    <body>
+        <a href="home.html" class="back"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 288 480 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-370.7 0 73.4-73.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-128 128z"/>
+        </svg></a>
+        <div class="name">
+            <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
+                <path d="M406.5 399.6C387.4 352.9 341.5 320 288 320H224c-53.5 0-99.4 32.9-118.5 79.6C69.9 362.2 48 311.7 48 256C48 141.1 141.1 48 256 48s208 93.1 208 208c0 55.7-21.9 106.2-57.5 143.6zm-40.1 32.7C334.4 452.4 296.6 464 256 464s-78.4-11.6-110.5-31.7c7.3-36.7 39.7-64.3 78.5-64.3h64c38.8 0 71.2 27.6 78.5 64.3zM256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-272a40 40 0 1 1 0-80 40 40 0 1 1 0 80zm-88-40a88 88 0 1 0 176 0 88 88 0 1 0 -176 0z"/>
+            </svg>
+            <p>Username</p>
+        </div>
+
+        <div class="content">
+            <textarea class="title" autocomplete="off" placeholder="Title" maxlength="12"></textarea>
+            <textarea class="blog" autocomplete="off" placeholder="Type here...." maxlength="5000"></textarea>
+        </div>
+
+        <p class="submit">Post Blog</p>
+
+        <script src="public/post.js"></script>
+    </body>
+</html>
diff --git a/public/home.css b/public/home.css
@@ -171,7 +171,6 @@ body
     margin:20px auto 0px auto;
     border-radius: 5px;
     border:1px solid rgba(0,0,0,0.2);
-    overflow-y:scroll;
 }
 
 .poster
@@ -215,6 +214,10 @@ body
     font-size:20px;
     margin:15px auto 0px auto;
     color:#3a3a3a;
+    max-width: 300px;
+    word-wrap: break-word;
+    overflow-y: scroll;
+    max-height: 600px;
 }
 
 .date 
@@ -324,4 +327,9 @@ body
         width: auto;
         max-width: 1100px;
     }
+
+    .content 
+    {
+        max-width: 1000px;
+    }
 }
diff --git a/public/images/post-mobile-bg.avif b/public/images/post-mobile-bg.avif
diff --git a/public/images/post-pc-bg.avif b/public/images/post-pc-bg.avif
diff --git a/public/post.css b/public/post.css
@@ -0,0 +1,167 @@
+*
+{
+    display:flex;
+    -webkit-tap-highlight-color: transparent;
+}
+
+title
+{
+    display: none;
+}
+
+body 
+{
+    flex-direction: column;
+    margin: 0;
+    width:100%;
+    font-size:0;
+    background-image: url(images/post-mobile-bg.avif);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-color: rgba(236,227,255,1);
+}
+
+.back 
+{
+    margin:15px auto 0px 15px;
+}
+
+.back svg 
+{
+    margin:0;
+    width:30px;
+    height: auto;
+    fill:#3a3a3a;
+}
+
+.name 
+{
+    margin:20px auto 0px 20px;
+    padding:7px;
+    border-radius: 10px;
+    border:1px solid rgba(0,0,0,0.3);
+    background-color: white;
+}
+
+.name svg
+{
+    width:30px;
+    height:30px;
+    fill: #3a3a3a;
+    margin:0;
+}
+
+.name p 
+{
+    font-family: lexend-med;
+    font-size:25px;
+    color:#3a3a3a;
+    margin:auto auto auto 10px;
+}
+
+.content
+{
+    width:320px;
+    flex-direction: column;
+    margin:10px auto 0px auto;
+    background-color: white;
+    padding:7px;
+    border-radius: 10px;
+    border:1px solid rgba(0,0,0,0.3);
+    height:450px;
+}
+
+.content .title
+{
+    width:100%;
+    margin:0;
+    border:0;
+    font-family: lexend-med;
+    font-size:25px;
+    color:black;
+    resize: none;
+    max-height: 32px;
+    background-color: transparent;
+}
+
+.content .title:focus
+{
+    outline: none;
+}
+
+.content .title::placeholder
+{
+    font-family: lexend-med;
+    font-size: 25px;
+    color:rgba(0,0,0,0.3);
+}
+
+.content .blog
+{
+    width:100%;
+    max-width: 100%;
+    margin:10px 0px 0px 0px;
+    color:black;
+    font-family:helvetica-reg;
+    font-size:15px;
+    border:0;
+    word-break: break-all;
+    overflow: hidden;
+    max-width: 300px;
+    resize: none;
+    height: 450px;
+    background-color: transparent;
+    overflow-y: scroll;
+}
+
+.content .blog:focus
+{
+    outline: none;
+}
+
+.content .blog::placeholder
+{
+    font-family: helvetica-reg;
+    font-size: 15px;
+    color:rgba(0,0,0,0.3);
+}
+
+.submit 
+{
+    margin:10px 20px 0px auto;
+    font-family: helvetica-med;
+    font-size: 15px;
+    color:white;
+    background-color: blueviolet;
+    padding:7px;
+    border-radius: 5px;
+    border:1px solid rgba(0,0,0,0.3);
+    cursor:pointer;
+}
+
+@media screen and (min-width:800px) 
+{
+    .content
+    {
+        margin:10px auto 0px 20px;
+        width: 1000px;
+    }
+
+    .content .blog 
+    {
+        width:990px;
+        max-width: 990px;
+    }
+
+    .submit
+    {
+        margin:10px auto 70px 20px;
+        background-color: #3a3a3a;
+        font-size: 20px;
+    }
+
+    .submit:hover 
+    {
+        background-color: #272727;
+    }
+}
diff --git a/public/post.js b/public/post.js