More documented the repo

.gitignore

@@ -1,8 +1,5 @@
 # custom
 
-static/index.js
-static/index.css
-
 # Django #
 *.log
 *.pot

CONTRIBUTING.md

@@ -4,6 +4,14 @@ When contributing to this repository, please first discuss the change you wish t
 
 Please note we have a code of conduct, please follow it in all your interactions with the project.
 
+## Changing the code
+
++ Before making any changes to the code, you need to [set up this project in your system](https://github.com/suvansh-rana/developer-search/wiki/Project-Setup).
+
++ To more deeply understand the code structure of the project, go [here](https://github.com/suvansh-rana/developer-search/wiki/About-the-Tech-Stack).
+
+
+---
 
 # Code of Conduct
 

static/index.css

@@ -0,0 +1,124 @@
+:root {
+    /* --accent-color: #1e88e5; */
+    --accent-color: blue;
+    --accent-color-transparent: #1e88e520;
+    --borderRadius: 20px;
+    --youtube: red
+}
+
+body {
+    display: flex;
+    min-height: 100vh;
+    flex-direction: column;
+}
+
+main {
+   flex: 1 0 auto;
+}
+
+#dev-heading {
+    color: var(--accent-color);
+}
+
+.background {
+    background-color: var(--accent-color);
+}
+
+.major-mono, input {
+    /* font-family: 'Major Mono Display', monospace; */
+    font-family: monospace;
+
+}
+
+.tabs {
+    overflow-x: auto;
+    height: 70px;
+}
+
+.tabs .tab a {
+    color: var(--accent-color);
+}
+
+
+.tabs .tab a:hover, .tabs .tab a.active {
+    color: var(--accent-color);
+}
+
+
+.tabs .tab a:focus, .tabs .tab a:focus.active {
+    background-color:var(--accent-color-transparent);
+    outline: none;
+}
+
+.tabs .indicator {
+    background-color:transparent;
+}
+
+.tab a{
+    border-radius: var(--borderRadius);
+    text-transform: capitalize;
+    font-size: 0.9em!important;
+}
+
+.tab a.active{
+  border-bottom: 1.5px solid var(--accent-color);
+  background-color: var(--accent-color-transparent);
+}
+
+
+.input-field .prefix.active {
+    color: var(--accent-color);
+}
+
+#search-box {
+    border-radius: var(--borderRadius);
+}
+
+#search-field{
+    border: 0!important;
+    padding-left: 50px; 
+    margin:0;
+    background-color: transparent;
+    font-size: 1em;
+    font-weight: 200;
+    color: #111!important;
+}
+
+.no-margin {
+    margin: 0!important;
+}
+
+#search-icon {
+    left: 10px;
+    font-size: 24px;
+    top: 23%;
+}
+
+
+.light-text {
+    font-weight: 200;
+}
+
+.search-card{
+    border-radius: var(--borderRadius);
+}
+
+.search-title {
+    font-size: 1em!important;
+    line-height: 1.5!important;
+}
+
+.search-link {
+    color: var(--accent-color);
+    word-break: break-all;
+    font-size: 0.8em;
+}
+
+.search-snippet {
+    font-size:  0.85em!important;
+    margin-top: 10px!important;
+}
+
+.med-font {
+    font-size: 1.2em!important;
+}

static/index.js

@@ -0,0 +1,3 @@
+const tabs = document.querySelector(".tabs");
+
+const instance = M.Tabs.init(tabs, {});