some css and metadata

SH20RAJ · Mar 23, 2024 · 421a0fc · 421a0fc
1 parent abde9d5
commit 421a0fc
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 78 deletions.
diff --git a/src/app/[...slug]/layout.js b/src/app/[...slug]/layout.js
@@ -11,15 +11,6 @@ export default async function RootLayout(pr) {
  return (
  <html lang="en">
  <head>
- <meta
- name="google-site-verification"
- content="exvbD16MWo-o_oksJDrekaQ_zwY62YGWEA_XdlE5_XM"
- />
- <script
- async
- src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1828915420581549"
- crossorigin="anonymous"
- ></script>
  <title>{data.title}</title>
  <meta name="description" content={data.description} />
  <meta name="keywords" content={data.tag_list} />
@@ -36,25 +27,6 @@ export default async function RootLayout(pr) {
  <meta name="twitter:description" content={data.description} />
  <meta name="twitter:image" content={data.social_image} />
  <meta name="robots" content="index, follow" />
- <link
- rel="shortcut icon"
- href="https://github.com/fornfun.png"
- type="image/x-icon"
- />
- <script
- async
- src="https://www.googletagmanager.com/gtag/js?id=G-CWL59Y4TR7"
- ></script>
- <script>
- {`window.dataLayer = window.dataLayer || []; function gtag()
- {dataLayer.push(arguments)}
- gtag('js', new Date()); gtag('config', 'G-CWL59Y4TR7');`}
- </script>
- <script
- type="text/javascript"
- src="https://platform-api.sharethis.com/js/sharethis.js#property=65fe7f28fb0d80001211056b&product=sop"
- async="async"
- ></script>
  </head>
  <body>{children}</body>
  </html>

diff --git a/src/app/[...slug]/page.js b/src/app/[...slug]/page.js
@@ -38,7 +38,8 @@ export default async ({ params }) => {
  <Nav />
  {/* <link rel="stylesheet" href="https://dev.to/assets/crayons-132fd5353a6887f948f908fecf2c183d4019983fae2c184971fb9deb4e930bfb.css" /> */}
  <main>
- <div className="postcontainer">
+ <div className="shadow1 postcontainer subpixel-antialiased">
+ <img class="glassload shadow2 postheadimage" src={data.cover_image} alt="" srcset="" />
  <h2 id="title">{data.title}</h2>
  <span class="post-data">
  <Link href={"../" + data.user.username}>
@@ -106,7 +107,7 @@ function ArticleCard({ article }) {
  />
  <div className="card-title">{article.title}</div>
  <div className="line"></div>
- <p className="text-gray-500 mb-4">{article.tag_list.join(", ")}</p>
+ <p className="text-gray-200 small mb-4">{article.tag_list.join(", ")}</p>
  </Link>{" "}
  </div>
  );

diff --git a/src/app/[slug]/page.js b/src/app/[slug]/page.js
@@ -74,7 +74,7 @@ export default function ArticlesPage({ params }) {
  return (
  <>
  <Nav />
-
+ <title>{ "DevArt - Programming Related Articles - "+ params.slug}</title>
  <main className="postscontainer">
  <h2>Latest Posts from {params.slug}</h2>
  <section class="text-gray-600 body-font">

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -17,6 +17,7 @@
 body {
  height: 100vh;
  font-family: Poppins, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+ /* font-size: 15px; */
 }
 .tomato {
  color: tomato;
@@ -39,6 +40,12 @@ nav {
  padding: 10px;
  max-width: 100% !important;
  z-index: 20;
+ background: rgb(0, 212, 255);
+ background: linear-gradient(
+ 90deg,
+ rgba(0, 212, 255, 0.1643251050420168) 3%,
+ rgba(188, 123, 219, 1) 100%
+ );
 }
 
 .logo {
@@ -62,6 +69,15 @@ nav ul {
  justify-content: flex-end;
 }
 
+ol {
+ list-style-type: decimal;
+ margin-left: 20px;
+}
+ul {
+ list-style-type: circle;
+ margin-left: 20px;
+}
+
 br {
  content: "\A";
  white-space: pre;
@@ -107,6 +123,7 @@ main {
  overflow-x: hidden;
  height: fit-content;
  min-width: 55%;
+ font-size: 17px;
 }
 blockquote {
  background: var(--bbg);
@@ -116,16 +133,24 @@ blockquote {
 }
 
 .postcontainer div,
-.postcontainer p, .postcontainer h1 , .postcontainer h2 {
+.postcontainer p,
+.postcontainer h1,
+.postcontainer h2 {
  margin: 20px 0;
 }
-.postcontainer ul {
+.postcontainer ul,
+.postcontainer ol {
  margin: 10px 40px;
 }
-.postcontainer img, .postcontainer iframe {
+.postcontainer img,
+.postcontainer iframe {
  max-width: 100%;
 }
 
+.postheadimage {
+ border-radius: 10px;
+}
+
 .sidebar {
  background: transparent;
  width: 30%;
@@ -189,12 +214,18 @@ footer {
  box-shadow: var(--box-shadow);
  background: var(--black);
  box-shadow: 50px #000;
- scale: 1.01;
+ background: rgb(0, 212, 255);
+ background: linear-gradient(
+ 90deg,
+ rgba(0, 212, 255, 0.1643251050420168) 3%,
+ rgba(188, 123, 219, 1) 100%
+ );
+ transition: background 0.8s linear;
 }
 /* index.html cards */
 .postscontainer .card {
  width: 300px;
- /* height: 200px; */
+ height: 350px;
  align-self: center;
  padding: 10px;
  margin: 0;
@@ -205,8 +236,6 @@ footer {
  backdrop-filter: blur(25px);
 }
 
-
-
 .btn {
  width: 100%;
  background: transparent;
@@ -240,7 +269,6 @@ footer {
  max-width: 75vw;
 }
 
-
 .postscontainer h2 {
  padding: 20px;
 }
@@ -270,12 +298,11 @@ footer {
  font-size: x-large;
 }
 
-
 /* Table of content TOC */
 
 .toc {
  padding: 20px;
- border-left: 2px solid ;
+ border-left: 2px solid;
  margin: 20px 0;
 }
 .toc h1 {
@@ -286,7 +313,6 @@ footer {
  margin: 5px;
  padding: 0 10px;
  border-left: 2px solid transparent;
-
 }
 
 .toc li:hover {
@@ -305,23 +331,29 @@ footer {
  display: block;
  height: 4px;
  /* width: 100%; */
- background: rgb(149, 12, 34);
+ background: rgb(100, 196, 207);
+ background: rgb(2, 0, 36);
+ background: linear-gradient(
+ 90deg,
+ rgba(2, 0, 36, 1) 0%,
+ rgba(4, 103, 190, 1) 0%,
+ rgba(120, 116, 208, 1) 27%,
+ rgba(188, 123, 219, 1) 100%,
+ rgba(0, 212, 255, 1) 100%
+ );
  animation: line 04s cubic-bezier(0.165, 0.84, 0.44, 1);
  bottom: -10px;
  margin-left: -20px;
-
 }
 
-
-
 .usercard {
  width: 100%;
  /* background-image: linear-gradient(rgb(225, 201, 201),rgb(113, 186, 235)); */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
- padding: 20px; 
+ padding: 20px;
  border-top: 4px solid;
  cursor: pointer;
  font-size: larger;
@@ -334,7 +366,7 @@ footer {
  display: inline-block;
  width: 100%;
  bottom: 0px;
- animation: line .4s;
+ animation: line 0.4s;
 }
 
 .usercard img {
@@ -390,7 +422,7 @@ footer {
 
 @media (max-width: 600px) {
  .logo {
- padding: 5px 15px ;
+ padding: 5px 15px;
  margin: 2px;
  }
  main {
@@ -414,8 +446,6 @@ footer {
  }
 }
 
-
-
 /* KeyFrames */
 
 @keyframes box-shadow {
@@ -451,34 +481,53 @@ footer {
 
 .inline-block {
  display: inline-block;
-
 }
 
-
 /* Code Highlighting Added */
 .highlight__panel.js-actions-panel {
- display: none;
+ display: none;
 }
 code {
- color: azure;
+ color: azure;
  background: black;
  padding: 2px;
 }
 .highlight.js-code-highlight {
- border-left: 2px solid aqua;
- overflow: auto;
- color: azure;
- background: black;
- padding: 10px;
+ border-left: 2px solid aqua;
+ overflow: auto;
+ color: azure;
+ background: black;
+ padding: 10px;
+}
+.pl-kos,
+.k,
+.nx {
+ color: pink;
+}
+.pl-ent,
+.p,
+.na {
+ color: hotpink;
+}
+.pl-s,
+.s,
+.s1 {
+ color: aqua;
+}
+.pl-c1,
+.o,
+.nc {
+ color: white;
+}
+.pl-c,
+.c {
+ color: green;
+}
+.dl,
+.nf,
+.nt {
+ color: yellow;
 }
-.pl-kos,.k,.nx{color:pink}
-.pl-ent,.p,.na{color:hotpink}
-.pl-s,.s,.s1{color:aqua}
-.pl-c1,.o,.nc{color:white}
-.pl-c,.c{color:green}
-.dl,.nf,.nt{color:yellow}
-
-
 
 /* Table Wrapper Styles */
 .table-wrapper-paragraph {
@@ -527,12 +576,21 @@ code {
  }
 }
 
-
 /* Images */
 
 .article-body-image-wrapper {
  display: flex;
  justify-content: center;
 }
 
+.shadow1 {
+ box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset,
+ rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
+}
+.shadow2 {
+ box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+}
 
+.small {
+ font-size: medium;
+}
diff --git a/src/app/layout.js b/src/app/layout.js
@@ -1,11 +1,5 @@
 import "./globals.css";
 
-export const metadata = {
- title: "DevArt - Programming Related Articles",
- description:
- "Get Programming Related Articles on Daily Basis on DevArt a better place to spend time....",
-};
-
 export default function RootLayout({ children }) {
  return (
  <html lang="en">