Merge pull request #155 from phel-lang/design-adjustments-2

Keep improving design

Author: JesusValeraDev

config.toml

@@ -10,7 +10,7 @@ compile_sass = false
 # Whether to build a search index to be used later on by a JavaScript library
 build_search_index = false
 
-generate_feeds = true
+generate_feeds = false
 
 [markdown]
 # Whether to do syntax highlighting

css/components/blog.css

@@ -1,4 +1,4 @@
-/* Blog post list - clean style */
+/* Blog post list */
 @utility post-list {
   list-style: none;
   padding: 0;
@@ -15,11 +15,8 @@
   display: none;
 }
 
-/* Blog post card */
-.post-list li a {
-  text-decoration: none;
-  transition: all var(--duration-fast) var(--ease-out);
-  position: relative;
+.blog-entry .meta {
+  color: var(--color-gray-light);
 }
 
 .post-list li a::after {
@@ -37,141 +34,6 @@
   width: 100%;
 }
 
-/* Blog post title */
-.post-list li a h2 {
-  color: var(--color-light-text-primary);
-  margin: 0 0 var(--space-sm) 0;
-  font-size: var(--text-xl);
-  font-weight: 700;
-  transition: color var(--duration-fast) var(--ease-out);
-}
-
-.post-list li a:hover h2 {
-  color: var(--color-light-link);
-}
-
-/* Blog post meta */
-.post-list li a .meta {
-  display: flex;
-  align-items: center;
-  gap: var(--space-md);
-  color: var(--color-gray-light);
-  font-size: var(--text-sm);
-  font-weight: 500;
-  margin-bottom: var(--space-md);
-}
-
-.post-list li a .meta time {
-  display: flex;
-  align-items: center;
-  gap: var(--space-xs);
-}
-
-.post-list li a .meta time::before {
-  content: '📅';
-  font-size: var(--text-base);
-}
-
-/* Blog post excerpt */
-.post-list li a .excerpt {
-  color: var(--color-light-text-secondary);
-  line-height: var(--leading-relaxed);
-  font-size: var(--text-base);
-  margin: 0;
-}
-
-/* Blog entry (single post view) */
-@utility blog-entry {
-  max-width: var(--container-content);
-  margin: 0 auto;
-}
-
-.blog-entry header {
-  margin-bottom: var(--space-3xl);
-  padding-bottom: var(--space-xl);
-  border-bottom: 1px solid var(--color-light-border);
-}
-
-.blog-entry header h1 {
-  margin-top: 0;
-  margin-bottom: var(--space-md);
-  font-size: clamp(2rem, 5vw, 3rem);
-  color: var(--color-light-text-primary);
-}
-
-.blog-entry .meta {
-  display: flex;
-  align-items: center;
-  gap: var(--space-xs);
-  flex-wrap: wrap;
-  color: var(--color-gray-light);
-  font-size: var(--text-base);
-}
-
-.blog-entry .meta time {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-  font-weight: 500;
-}
-
-.blog-entry .meta .author {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-  font-weight: 500;
-}
-
-.blog-entry .meta .author::before {
-  content: '✍️';
-  font-size: var(--text-lg);
-}
-
-/* Blog content styling */
-.blog-entry .content {
-  font-size: var(--text-body);
-  line-height: var(--leading-relaxed);
-  color: var(--color-light-text-secondary);
-}
-
-.blog-entry .content > *:first-child {
-  margin-top: 0;
-}
-
-/* Blog tags */
-.blog-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-sm);
-  margin: var(--space-2xl) 0;
-  padding-top: var(--space-xl);
-  border-top: 1px solid var(--color-light-border);
-}
-
-.blog-tag {
-  display: inline-flex;
-  align-items: center;
-  padding: var(--space-sm) var(--space-lg);
-  background: var(--color-light-bg-secondary);
-  color: var(--color-light-link);
-  border: 1px solid var(--color-light-border);
-  border-radius: var(--radius-full);
-  font-size: var(--text-sm);
-  font-weight: 600;
-  text-decoration: none;
-  transition: all var(--duration-fast) var(--ease-out);
-}
-
-.blog-tag::before {
-  content: '#';
-  opacity: 0.5;
-  margin-right: var(--space-xs);
-}
-
-.blog-tag::after {
-  display: none;
-}
-
 /* Pagination */
 @utility pagination {
   display: flex;
@@ -221,55 +83,15 @@
 }
 
 /* Featured post highlight */
-.post-list li.featured a {
-  border: 2px solid var(--color-light-link);
-  background: linear-gradient(
-    135deg,
-    rgba(99, 102, 241, 0.05),
-    transparent
-  );
-}
-
-.post-list li.featured a::before {
-  transform: scaleY(1);
-}
-
-/* Reading time indicator */
-.reading-time {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-xs);
-  padding: var(--space-xs) var(--space-md);
-  background: var(--color-light-bg-secondary);
-  border-radius: var(--radius-full);
-  font-size: var(--text-xs);
-  font-weight: 600;
-  color: var(--color-gray-base);
-}
-
-.reading-time::before {
-  content: '⏱️';
-}
-
-/* Blog section header */
-.blog-header {
-  text-align: center;
-  padding: var(--space-3xl) 0;
-  margin-bottom: var(--space-2xl);
-}
-
-.blog-header h1 {
-  font-size: clamp(2.5rem, 6vw, 4rem);
-  margin-bottom: var(--space-md);
-  background: linear-gradient(135deg, var(--color-light-link), var(--color-light-text-accent));
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.blog-header p {
-  font-size: var(--text-xl);
-  color: var(--color-light-text-secondary);
-  max-width: 600px;
-  margin: 0 auto;
-}
+/*.post-list li.featured a {*/
+/*  border: 2px solid var(--color-light-link);*/
+/*  background: linear-gradient(*/
+/*    135deg,*/
+/*    rgba(99, 102, 241, 0.05),*/
+/*    transparent*/
+/*  );*/
+/*}*/
+
+/*.post-list li.featured a::before {*/
+/*  transform: scaleY(1);*/
+/*}*/

css/components/dark-mode.css

@@ -340,14 +340,15 @@
 
 /* Dark mode for sidebar toggle */
 .dark .sidebar-toggle {
-  background: var(--color-dark-bg-secondary);
-  border-color: var(--color-dark-border);
+  background: var(--color-dark-surface);
+  border-color: var(--color-dark-text-secondary);
   color: var(--color-dark-text-primary);
 }
 
 .dark .sidebar-toggle:hover {
   background: var(--color-dark-surface-hover);
   border-color: var(--color-dark-text-accent);
+  color: var(--color-dark-text-accent);
 }
 
 /* Dark mode for sidebar accordion open state */
@@ -672,15 +673,9 @@
 }
 
 .dark .result-type-badge--api {
-  background: rgba(191, 164, 255, 0.3);
-  color: #bfa4ff;
-  border: 1px solid rgba(191, 164, 255, 0.5);
-}
-
-.dark .result-type-badge--docs {
-  background: rgba(191, 164, 255, 0.3);
-  color: #bfa4ff;
-  border: 1px solid rgba(191, 164, 255, 0.5);
+  background: var(--color-dark-text-accent);
+  color: var(--color-dark-bg);
+  border: 1px solid var(--color-dark-text-accent);
 }
 
 .dark .search-results__item .fn-name {

css/components/documentation.css

@@ -317,9 +317,13 @@
 @media (max-width: 767px) {
   .api-namespace-content {
     gap: var(--space-xs);
-    max-width: 100vw;
+    max-width: 100%;
     padding: 0;
   }
+  
+  .api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow {
+    width: 100%;
+  }
 }
 
 /* Collapsed state - show preview with fade */

css/components/layout.css

@@ -67,10 +67,8 @@
   border: 1px solid var(--color-light-border);
   border-radius: var(--radius-lg);
   color: var(--color-light-text-primary);
-  font-weight: 600;
-  font-size: var(--text-sm);
   cursor: pointer;
-  margin: var(--space-md) 0;
+  margin: var(--space-xl) 0;
   transition: all var(--duration-fast) var(--ease-out);
   position: relative;
   z-index: 10;
@@ -82,10 +80,14 @@
 }
 
 .sidebar-toggle[aria-expanded="true"] .sidebar-toggle-text::before {
+  font-weight: 600;
+  font-size: var(--text-base);
   content: 'Hide navigation';
 }
 
 .sidebar-toggle[aria-expanded="false"] .sidebar-toggle-text::before {
+  font-weight: 600;
+  font-size: var(--text-base);
   content: 'Show navigation';
 }
 

css/components/performance.css

@@ -11,7 +11,7 @@
   --color-light-text-primary: #0f172a;
   --color-light-text-secondary: #475569;
   --color-light-text-muted: #64748b;
-  --color-light-text-accent: #0ea5e9;
+  --color-light-text-accent: #915bd5;
   --color-light-link: #512da8;
   --color-light-border: #e2e8f0;
   --color-light-border-subtle: #f1f5f9;

css/theme.css

@@ -17,7 +17,6 @@ const parts = [
   'css/components/blog.css',
   'css/components/features.css',
   'css/components/dark-mode.css',
-  'css/components/performance.css',
 ];
 
 // Check if we're in watch mode

scripts/concat-tailwind.js

@@ -35,13 +35,6 @@
   <meta property="og:image" content="https://phel-lang.org/favicon-512.png" />
   <meta property="og:image:width" content="512" />
   <meta property="og:image:height" content="512" />
-
-  {% block rss %}
-  {% if config.generate_feeds %}
-  <link type="application/atom+xml" rel="alternate" title="{{ config.title }} - Blog" href="{{ get_url(path=config.feed_filename | default(value='atom.xml')) | safe }}">
-  <link type="application/rss+xml" rel="alternate" title="{{ config.title }} - Blog" href="{{ get_url(path=config.feed_filename | default(value='atom.xml')) | safe }}" >
-  {% endif %}
-  {% endblock %}
 </head>
 
 <body>

templates/base.html

@@ -6,7 +6,7 @@
 {% endblock meta_content %}
 {% block content %}
 <h1>Blog</h1>
-<p>Find the newest information about Phel in our Blog. Subscribe the <a href="{{ get_url(path="atom.xml", trailing_slash=false) }}">Atom/RSS feed</a> if you never want to miss a new entry.</p>
+<p>Find the newest information about Phel in our Blog.</p>
 <ul class="post-list">
     {% for page in paginator.pages %}
     <li>