coustom css tags with granunlar controls added

thedemonsid · Apr 28, 2024 · 494f8a6 · 494f8a6
1 parent 0555748
commit 494f8a6
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 15 deletions.
diff --git a/src/app/editor/page.jsx b/src/app/editor/page.jsx
@@ -25,7 +25,6 @@ function Page() {
   }
 
   const handleClick = () => {
-    // Copy the current value of the textarea to the content state
     const editorContent = document.querySelector('.editor textarea').value;
     setContent(editorContent);
   };
@@ -37,15 +36,15 @@ function Page() {
   return (
     <div className='relative flex flex-col md:flex-row w-full h-screen text-yellow-300 wrapper font-techy'>
       <div className='relative w-full md:w-1/2 h-1/2 md:h-screen bg-gray-300 border-2 border-yellow-300 editor'>
-        <h1 className='absolute top-0 left-0 w-full mt-1 font-mono text-3xl text-center'>Editor</h1>
-        <textarea className='w-full h-full overflow-auto bg-slate-900'></textarea>
-        <button className='absolute bottom-0 right-0 font-mono text-2xl bg-yellow-300 text-slate-900' onClick={handleClick}>Preview</button>
+        <h1 className='absolute top-0 left-0 w-full mt-3 font-techy text-3xl text-center'>Editor</h1>
+        <textarea className='w-full h-full overflow-auto bg-gray-700 '></textarea>
+        <button className='absolute bottom-2 right-2 font-mono text-2xl shadow-md rounded-sm w-32 hover:bg-slate-400 bg-yellow-300 text-red-500' onClick={handleClick}>Preview</button>
       </div>
-      <div className='relative w-full md:w-1/2 h-1/2 md:h-screen overflow-auto bg-gray-500 border-2 border-yellow-300 preview'>
-        <h1 className='absolute top-0 left-0 w-full mt-3 font-mono text-3xl text-center'>Preview</h1>
-        <div dangerouslySetInnerHTML={{ __html: content }} className='mt-10 ' onClick={displayContent} />
+      <div className='relative w-full md:w-1/2 h-1/2 md:h-screen overflow-auto bg-gray-800 border-2 border-yellow-300 preview'>
+        <h1 className='absolute top-0 left-0 w-full mt-3 font-techy text-3xl text-center'>Preview</h1>
+        <div dangerouslySetInnerHTML={{ __html: content }} className='mt-10 ml-2' onClick={displayContent} />
       </div>
-      <button className='absolute bottom-0 right-0 font-mono text-2xl bg-yellow-300 text-slate-900' onClick={handleSave}>Save</button>
+      <button className='absolute bottom-2 right-2 font-mono text-2xl shadow-md rounded-sm w-32 hover:bg-slate-400 bg-yellow-300 text-red-500' onClick={handleSave}>Save</button>
     </div>
   );
 }

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -5,6 +5,15 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* Reset some default styles to ensure consistent behavior across browsers */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+
+}
+
 
 @layer base {
   :root {
@@ -95,30 +104,40 @@ vs-log, vs-list {
 vs-item {
   display: list-item;
   margin-left: 1rem;
-  color: goldenrod;
+  color: rgb(194, 159, 72);
 }
 
 /* Heading styles */
 vs-title {
   font-size: 2rem;
+  top: 1.5rem;
   font-weight: bold;
-  color: #c65050; /* Redish */
+  color: rgb(224, 146, 172); /* Redish */
 }
 
 vs-subtitle {
   font-size: 1.5rem;
   font-weight: bold;
+  margin-top: 1rem;
   color: #b6d91a; /* Greenish */
 }
 
 /* Paragraph style */
 vs-log {
   font-size: 1rem;
   line-height: 1.5;
-  color: #f7fafc; /* Light gray */
+  color: rgb(203, 178, 178); 
   font-family: 'Courier New', Courier, monospace;
 }
 
+vs-sidehead{
+  font-size: 1.2rem;
+  line-height: 1.5;
+  color: #b6d91a; 
+font-family: 'Courier New', Courier, monospace;
+}
+
+
 /* Highlight style */
 vs-item {
 
@@ -139,6 +158,7 @@ ancient-script {
 }
 vs-code-editor {
   display: block;
+  margin-top: 1rem;
   font-family: 'Courier New', Courier, monospace;
   background-color: #1e1e1e;
   color: #d4d4d4;
@@ -148,7 +168,7 @@ vs-code-editor {
 }
 
 vs-code-highlight {
-  color: #e6db74;
+  color: #bcb362;
   font-weight: bold;
 }
 
@@ -173,15 +193,20 @@ vs-code-output {
 }
 
 vs-code-lang {
-  color: #f8f8f2;
-  font-weight: bold;
-  text-transform: uppercase;
+  color: #b6d91a;
+  font-style: oblique;
+
 }
 
 vs-code-package {
   color: #66d9ef;
   font-weight: bold;
 }
+vs-var{
+  color: orange;
+  font-weight: 300;
+}
+
 img {
   max-width: 50%;
   height: auto;
@@ -191,6 +216,14 @@ img {
   display: block;
   border-radius: 0.5rem;
 }
+li{
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  margin-left: 1rem;
+  margin-right: 1rem;
+  color: rgb(224, 146, 172); /* Redish */
+  list-style: lower-greek;
+}