Improve styling a bit, continue refactoring

kirillbobyrev · Feb 20, 2025 · c152228 · c152228
1 parent efcb0f4
commit c152228
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 70 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -1,5 +1,3 @@
-/* Variables */
-
 :root {
   --text-color: #333;
   --max-width: 48rem;
@@ -8,8 +6,8 @@
   --accent: #4285f4;
   --accent-light: #93a9d1;
   --background: #fff;
-  --muted: #BDBDBD;
-  --muted-background: #f5f5f6;
+  --muted: #6c757d;
+  --muted-background: #f8f9fa;
 
   /* Typography */
   --line-height: 1.6;
@@ -18,8 +16,6 @@
   --body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 
-/* Base styles */
-
 body {
   scroll-behavior: smooth;
   font-family: var(--body-font);
@@ -46,36 +42,30 @@ figcaption {
   margin-top: 0.5rem;
 }
 
-/* Typography */
-
 a {
   color: var(--accent);
 }
 
+a:hover {
+  color: darken(var(--accent), 10%);
+}
+
 blockquote {
   border-left: 3px solid var(--accent-light);
   padding-left: 1rem;
   font-style: italic;
 }
 
 code {
-  font-family:
-    ui-monospace,
-    SFMono-Regular,
-    "SF Mono",
-    Menlo,
-    Consolas,
-    "Liberation Mono",
-    monospace;
+  font-family: "JetBrains Mono";
   font-size: 0.9rem;
-  line-height: var(--line-height);
 }
 
 pre:has(code),
 p>code {
   border: thin solid var(--muted);
-  padding: 1rem;
-  border-radius: 0.4rem;
+  padding: 0.5rem;
+  border-radius: 0.3rem;
   overflow-x: auto;
   background-color: var(--muted-background);
   font-size: 0.95rem;
@@ -93,25 +83,18 @@ hr {
   background: var(--muted);
 }
 
-pre:has(code),
-p>code {
-  border: thin solid var(--muted);
-  padding: .5rem;
-  border-radius: 0.3rem;
-  overflow-x: auto;
+time {
+  font-style: italic;
 }
 
-p>code {
-  border-radius: 0.2rem;
-  padding: 0.05rem 0.2rem;
+.year-heading {
+  font-size: 1.2rem;
 }
 
-time {
-  font-style: italic;
+.muted {
+  color: var(--muted);
 }
 
-/* Title and menu. */
-
 .site-title {
   color: #222;
   text-decoration: none;
@@ -139,8 +122,6 @@ time {
   text-decoration: none;
 }
 
-/* Posts */
-
 .blog-posts {
   list-style: none;
   padding-left: 0;
@@ -150,21 +131,18 @@ time {
   display: flex;
 }
 
-/* Headings */
+p {
+  margin-bottom: 1.5rem;
+}
 
+h1,
 h2,
 h3,
 h4 {
-  padding-top: .5rem;
-  padding-bottom: .5rem;
+  margin-top: 1.5rem;
+  margin-bottom: 0.75rem;
 }
 
-h2 {
-  position: relative;
-}
-
-/* Misc */
-
 ul:has(li>input) {
   list-style: none;
   padding-left: 0;
@@ -187,7 +165,7 @@ th {
 }
 
 /* Ensure responsive design for small screens */
-@media (max-width: 400px) {
+@media (max-width: 600px) {
   body {
     padding: 1rem;
   }

diff --git a/content/_index.md b/content/_index.md
@@ -50,8 +50,6 @@ unit, and moved to :us: California. At Waymo I build Machine Learning models
 that improve [Simulation](https://waymo.com/blog/2021/07/simulation-city)
 realism and ensure safety of our self-driving system.
 
-My favorite languages are C++, Rust and Python.
-
 ## Outside of work
 
 - When I'm not working, I enjoy training Jiu Jitsu, playing chess and

diff --git a/content/blog/modern-operating-systems.md b/content/blog/modern-operating-systems.md
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
@@ -5,20 +5,20 @@ <h1>
     {{ .Title }}
   </h1>
 
-  {{ if .Date }}
-  <p>
+  <p class="muted">
     <time datetime="{{ .PublishDate }}" pubdate>
       {{ .Date | dateFormat site.Params.dateDisplayFormat }}
     </time>
+
     {{ if not (eq .Lastmod .PublishDate) }}
       &mdash; Updated: <time datetime="{{ .Lastmod }}" pubdate>{{ .Lastmod | dateFormat site.Params.dateDisplayFormat
         }}</time>
     {{ end }}
+
     {{ if gt .ReadingTime 5 }}
       &mdash; {{ .ReadingTime }} minutes to read
     {{ end }}
   </p>
-  {{ end }}
 
   {{ .Content }}
 

diff --git a/layouts/blog/list.html b/layouts/blog/list.html
@@ -3,12 +3,15 @@
 {{ .Content }}
 
 <ul class="blog-posts">
-  {{ range .Pages }}
+  {{ range .Pages.GroupByDate "2006" }}
+    <h2 class="year-heading">{{ .Key }}</h2>
+    {{ range .Pages }}
     <li>
       <article>
         <a href="{{ .Permalink }}">{{ .Title }}</a>
       </article>
     </li>
+    {{ end }}
   {{ end }}
 </ul>
 

diff --git a/layouts/partials/head.html b/layouts/partials/head.html
@@ -54,3 +54,5 @@
   {{ $style := resources.Get "css/style.css" }}
   <link rel="stylesheet" href="{{ $style.Permalink }}">
 {{ end }}
+
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap">