Design Refresh

Author: DisclosedCode

README.md

@@ -3,16 +3,16 @@
 ### About
 
 Code-based references for various programming languages, frameworks and tools designed to simplify your coding experience by providing practical and focused guides that are constantly updated and refined. 
-All of these references are available at https://referencecollection.com/ or directly in the [reference directory](./references).
+All of these references are available directly in the [reference directory](./references) or at https://referencecollection.com/
 
 ### How it started
 
-Throughout my education and career. Whenever I learned a new programming language, I developed the habit of creating a reference file with the same extension as the language. In this file, I documented the language's basic, intermediate, and advanced concepts. This organized approach made it easier for me to quickly review important information and refresh my knowledge. I created this repository to share these reference guides and to keep expanding them in a consistent, accessible format. Additionally, I am working on training AI to help write even better references, enhancing the quality and accessibility of these resources for all developers.
+Over the course of my university studies and professional career, I've developed a habit whenever I start learning a new programming language: I’d create a reference file with the same extension as the language. In this file, I documented everything from basic syntax to advanced features, keeping everything organized so I can easily refresh my knowledge whenever I need to.
 
-### Contributing
+I put together this repository and this [website](https://referencecollection.com/) to share these reference guides with others and keep adding new ones in a consistent, easy-to-access format, hoping they’ll be useful for developers looking to quickly grasp key concepts and streamline their learning process.
 
-We welcome contributions from the community to help make this repository a valuable resource for developers of all levels. Whether you're fixing a typo, adding new references, or suggesting improvements, your contributions are appreciated.
+I’m also working on training AI to help build even better guides. The goal is to make these resources even more useful and accessible for developers of all levels.
 
-### How to Contribute
+### Contributing
 
-Comming soon.
+Contributions are encouraged to help make this repository a valuable resource for developers of all levels. Whether it's fixing a typo, adding new references, or suggesting improvements, all contributions are greatly appreciated.

assets/css/main.css

@@ -13,17 +13,12 @@
 }
 
 @font-face {
-    font-family: "GeistMono Medium";
-    src: url("../fonts/GeistMono-Medium.woff2") format("woff2");
+    font-family: "Geist Regular";
+    src: url("../fonts/Geist-Regular.woff2") format("woff2");
     font-display: swap;
 }
 
 /* Minimal CSS reset for browser compatibility */
-
-body {
-    scroll-behavior: smooth;
-}
-
 *,
 *::before,
 *::after {
@@ -84,14 +79,14 @@ a {
     --main-radius: 0.25rem;
 
     /* Font */
+    --font: 'Geist Regular', sans-serif;
     --font-medium: 'Geist Medium', sans-serif;
-    --font-mono-medium: 'GeistMono Medium', sans-serif;
     --font-jetbrains: 'JetBrainsMono', sans-serif;
     --font-size: 0.850rem;
 
     /* Colors */
     --background-primary: #fefcfa;
-    --background-secondary: #f9f8f8;
+    --background-secondary: #f6f5f5;
 
     --c1: #8d8d8d;
     --c2: #374253;
@@ -100,7 +95,9 @@ a {
     --c5: #e0eefe;
     --c6: #00abff;
     --c7: #e73b2c;
-    --c8: #f0f0f0;
+    --c9: #ecebeb;
+    --c10: #f9edd6;
+    --c11: #f4f4f4;
 
     /* Shadows */
     --box-shadow-0: rgba(0, 0, 0, 0.15) 0px 3px 10px;
@@ -112,7 +109,7 @@ a {
 
     /* Colors */
     --background-primary: #fefcfa;
-    --background-secondary: #f9f8f8;
+    --background-secondary: #f6f5f5;
 
     --c1: #8d8d8d;
     --c2: #374253;
@@ -121,7 +118,9 @@ a {
     --c5: #e0eefe;
     --c6: #00abff;
     --c7: #e73b2c;
-    --c8: #f0f0f0;
+    --c9: #ecebeb;
+    --c10: #f9edd6;
+    --c11: #f4f4f4;
 
     /* Shadows */
     --box-shadow-0: rgba(0, 0, 0, 0.15) 0px 3px 10px;
@@ -130,8 +129,8 @@ a {
 :root[app-appearance="dark"] {
 
     /* Colors */
-    --background-primary: #161614;
-    --background-secondary: #222222;
+    --background-primary: #111111;
+    --background-secondary: #1e1e1e;
 
     --c1: #818b94;
     --c2: #d7dbe1;
@@ -140,7 +139,9 @@ a {
     --c5: #003672;
     --c6: #00abff;
     --c7: #e73b2c;
-    --c8: #2b2d2e;
+    --c9: #282828;
+    --c10: #2a2110;
+    --c11: #1e1e1e;
 
     --box-shadow-0: rgba(0, 0, 0, 0.25) 0px 1px 4px 1px;
 
@@ -173,6 +174,7 @@ body {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     background-color: var(--background-primary);
+    scroll-behavior: smooth;
 }
 
 .main_container {
@@ -194,7 +196,7 @@ body {
     align-content: center;
     justify-content: space-between;
     align-items: center;
-    font-family: var(--font-mono-medium);
+    font-family: var(--font-jetbrains);
     font-size: var(--font-size);
     height: var(--navigation-height);
 }
@@ -358,50 +360,52 @@ body {
     flex-direction: column;
     align-items: center;
     text-align: center;
-    padding: 11rem var(--main-side-padding) 8rem var(--main-side-padding);
+    row-gap: 0.25rem;
+    padding: 9rem var(--main-side-padding) 8rem var(--main-side-padding);
 }
 
 .hero_content h1:nth-child(1) {
-    font-family: var(--font-mono-medium);
-    font-size: var(--font-size);
-    line-height: 1.6;
+    font-family: var(--font-jetbrains);
+    font-size: 0.8rem;
+    line-height: 1.7;
     color: var(--c3);
+    background-color: var(--c10);
     font-weight: normal;
+    padding: 0 0.7rem;
+    border-radius: 5rem;
 }
 
 .hero_content h1:nth-child(2) {
     font-family: var(--font-medium);
-    line-height: 1.2;
-    font-size: 2.15rem;
+    line-height: 1.15;
+    font-size: 2.60rem;
     font-weight: 500;
     color: var(--c2);
 }
 
 .hero_content p {
-    font-family: var(--font-mono-medium);
-    font-size: var(--font-size);
-    line-height: 1.6;
+    font-family: var(--font-jetbrains);
+    font-size: 0.925rem;
+    line-height: 1.7;
+    letter-spacing: -0.01em;
     color: var(--c1);
     margin-top: 5px;
 }
 
-.accent {
-    background-color: var(--c8);
-}
-
 /* REFERENCES */
 
 .references {
-    background-color: var(--background-secondary);
+    background-color: var(--background-primary);
     border-top: 1px solid var(--c4);
     min-height: 350px;
+    padding-bottom: 7rem;
 }
 
 
 .references_container,
 .hero_container {
     position: relative;
-    max-width: 670px;
+    max-width: 650px;
     margin: 0 auto;
     padding-bottom: 1rem;
 }
@@ -434,13 +438,13 @@ body {
     width: 100%;
     font-size: 16px;
     outline: 0;
-    border-radius: 0.50rem;
+    border-radius: var(--main-radius);
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     display: flex;
     -webkit-appearance: none;
     vertical-align: middle;
-    padding: 1rem 0.5rem 1rem 1.85rem;
+    padding: 0.95rem 0.5rem 0.9rem 1.85rem;
     color: var(--c1);
     background-color: var(--background-primary);
     border: 1px solid var(--c4);
@@ -523,7 +527,7 @@ input[type="search"]::-ms-clear {
 }
 
 .footer_bar {
-    font-family: var(--font-mono-medium);
+    font-family: var(--font-jetbrains);
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -569,7 +573,7 @@ input[type="search"]::-ms-clear {
 /* License */
 
 #license {
-    font-family: var(--font-mono-medium);
+    font-family: var(--font-jetbrains);
     font-size: 0.750rem;
     text-align: center;
     padding-top: 0.5rem;
@@ -591,27 +595,30 @@ input[type="search"]::-ms-clear {
 .languages {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: 0.7rem;
+    gap: 0.950rem;
 }
 
 .language {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    font-family: var(--font-mono-medium);
-    font-size: 0.915rem;
+    font-family: var(--font-jetbrains);
+    font-size: 0.875rem;
     padding: 0.950rem;
-    background-color: var(--background-primary);
+    background-color: var(--c11);
     border-radius: var(--main-radius);
     color: var(--c2);
-    box-shadow: inset 0 0 0 1px var(--c4);
 }
 
 .language_wrapper {
     display: flex;
     align-items: center;
 }
 
+.language:hover {
+    background-color: var(--c9);
+}
+
 .language:hover .language_icon {
     color: var(--c7);
 }
@@ -635,7 +642,7 @@ input[type="search"]::-ms-clear {
 }
 
 .header_title {
-    font-family: var(--font-mono-medium);
+    font-family: var(--font-jetbrains);
     text-transform: capitalize;
     display: flex;
     align-items: center;
@@ -653,7 +660,7 @@ input[type="search"]::-ms-clear {
 }
 
 .header_buttons {
-    font-family: var(--font-mono-medium);
+    font-family: var(--font-jetbrains);
     display: flex;
     flex-direction: row;
     margin: 1.2rem 0 0.3rem 0;
@@ -667,18 +674,6 @@ input[type="search"]::-ms-clear {
     column-gap: 1rem;
 }
 
-.share_dropdown {
-    position: relative;
-}
-
-.share_dropdown [type="checkbox"]:checked,
-.share_dropdown [type="checkbox"]:not(:checked) {
-    position: absolute;
-    display: none;
-    opacity: 0;
-    pointer-events: none;
-}
-
 .header_back {
     display: flex;
     cursor: pointer;
@@ -692,52 +687,6 @@ input[type="search"]::-ms-clear {
     color: var(--c2);
 }
 
-.header_share {
-    display: flex;
-    cursor: pointer;
-    align-items: center;
-    padding: 0.40rem 0.50rem;
-    column-gap: 0.5rem;
-    color: var(--c6);
-}
-
-.header_share:hover svg {
-    color: var(--c6);
-}
-
-.share_container {
-    position: absolute;
-    display: none;
-    margin-top: 10px;
-    border-radius: var(--main-radius);
-    background-color: var(--background-secondary);
-    box-shadow: inset 0 0 0 1px var(--c4);
-    z-index: 100;
-}
-
-.show_dropdown {
-    display: flex;
-}
-
-.share_container ul li a {
-    display: flex;
-    column-gap: 0.5rem;
-    cursor: pointer;
-    align-items: center;
-    padding: .655em;
-    margin: .450em;
-    min-width: 165px;
-    color: var(--c2);
-}
-
-.share_container ul li a svg {
-    color: var(--c4);
-}
-
-.share_container ul li a:hover svg {
-    color: var(--c2);
-}
-
 .header_contribute {
     display: flex;
     cursor: pointer;
@@ -752,8 +701,7 @@ input[type="search"]::-ms-clear {
 }
 
 .header_contribute svg,
-.header_back svg,
-.header_share svg {
+.header_back svg {
     color: var(--c4);
 }