Complete

taniarascia · Jul 3, 2022 · 2284bcb · 2284bcb
1 parent 03f0072
commit 2284bcb
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 19 deletions.
diff --git a/src/components/Layout.js b/src/components/Layout.js
@@ -12,6 +12,7 @@ import '../styles/navigation.css'
 import '../styles/card.css'
 import '../styles/layout.css'
 import '../styles/projects.css'
+import '../styles/patterns.css'
 import '../new-moon.css'
 import '../styles/dark-mode.css'
 

diff --git a/src/components/PostSidebar.js b/src/components/PostSidebar.js
@@ -65,10 +65,9 @@ export const PostSidebar = ({
  I'm a software developer by day, and I've written hundreds of articles
  and tutorials about things that interest me in my spare time. This
  site is and has always been free of ads, trackers, social media,
- affiliates, sponsored posts, and all the other nonsense we're so used
- to seeing on the web.
+ affiliates, and sponsored posts.
  </p>
- <p>I hope you enjoy the post!</p>
+ <p>I hope you enjoy the post and have a nice day.</p>
  </div>
  </aside>
  )

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -26,13 +26,38 @@ export default function Index({ data }) {
  <>
  <Helmet title={config.siteTitle} />
  <SEO />
- <div className="container">
+ <div className="container hero-container">
  <Hero title="Hi, I'm Tania">
  <p className="hero-description small width">
- I'm a software developer who occasionally creates open-source
- projects. I like accordions, board games, and stand-up comedy.
+ I'm a software developer who creates open-source projects. I like
+ accordions, board games, and stand-up comedy. <br />
+ <br />
+ This is my digital garden. 🌱
  </p>
  </Hero>
+ <div>
+ <div className="circles">
+ <div className="circle rainbow-1" />
+ <div className="circle rainbow-2" />
+ <div className="circle rainbow-3" />
+ <div className="circle rainbow-4" />
+ <div className="circle rainbow-5" />
+ </div>
+ <div className="circles desktop-only">
+ <div className="circle rainbow-1" />
+ <div className="circle rainbow-2" />
+ <div className="circle rainbow-3" />
+ <div className="circle rainbow-4" />
+ <div className="circle rainbow-5" />
+ </div>
+ <div className="circles desktop-only">
+ <div className="circle rainbow-1" />
+ <div className="circle rainbow-2" />
+ <div className="circle rainbow-3" />
+ <div className="circle rainbow-4" />
+ <div className="circle rainbow-5" />
+ </div>
+ </div>
  </div>
  <div className="container">
  <section className="segment">

diff --git a/src/styles/card.css b/src/styles/card.css
@@ -46,7 +46,7 @@
 .card time {
  display: block;
  font-family: var(--font-family-monospace);
- color: var(--font-color-muted);
+ color: var(--card-time-color);
  font-size: 0.8rem;
 }
 
@@ -57,6 +57,10 @@
  align-items: center;
 }
 
+.card.muted time {
+ color: var(--font-color-muted);
+}
+
 .card.muted h2 {
  margin: 0.25rem 0 1rem;
 }

diff --git a/src/styles/dark-mode.css b/src/styles/dark-mode.css
@@ -14,12 +14,14 @@
  --star: var(--rainbow-5);
  --year: var(--rainbow-4);
  --post-time-color: var(--rainbow-4);
+ --card-time-color: var(--rainbow-1);
  --link: #a4a9ff;
  --link-hover-color: #222;
  --blockquote-background: var(--gray-9);
  --marker: #e77cc7;
  --file-background: rgba(0, 0, 0, 0.2);
  --inline-code-background-color: rgba(0, 0, 0, 0.2);
+ --highlight-color: var(--rainbow-4);
 
  --code-font-color: #b3b9c5;
  --code-background-color: var(--gray-9);

diff --git a/src/styles/layout.css b/src/styles/layout.css
@@ -13,10 +13,19 @@ main {
 
 /* Hero */
 
+@media screen and (min-width: 700px) {
+ .hero-container {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ }
+}
+
 .hero {
  padding: 2.5rem 0 0.5rem;
  position: relative;
  overflow: hidden;
+ width: 100%;
 }
 
 .hero h1 {
@@ -50,7 +59,7 @@ p.hero-description {
 }
 
 .highlight {
- color: var(--link);
+ color: var(--highlight-color);
 }
 
 /* Preview */
@@ -137,7 +146,7 @@ p.hero-description {
 
 .post-content a:hover {
  background: var(--link);
- color:var(--link-hover-color);
+ color: var(--link-hover-color);
  text-decoration: none;
 }
 
@@ -257,7 +266,7 @@ a.post time {
 }
 
 .list a:hover {
- background: var(--indigo);
+ background: var(--highlight-color);
  color: white;
  text-decoration: none;
 }
@@ -289,9 +298,9 @@ a.tag:hover {
 }
 
 a.tag.active {
- background: var(--indigo) !important;
+ background: var(--highlight-color) !important;
  color: white;
- border-color: var(--indigo);
+ border-color: var(--highlight-color);
  font-weight: 600;
 }
 
@@ -322,7 +331,7 @@ a.category {
 }
 
 a.category.active {
- background: var(--indigo);
+ background: var(--highlight-color);
  color: white;
 }
 
@@ -364,13 +373,14 @@ a.category.active .count {
  align-items: flex-end;
 }
 
-.flex-column {
- flex: 1;
+.desktop-only {
+ display: none !important;
 }
 
-.vertical-list {
- display: flex;
- flex-direction: column;
+@media screen and (min-width: 700px) {
+ .desktop-only {
+ display: flex !important;
+ }
 }
 
 /* Article */

diff --git a/src/styles/patterns.css b/src/styles/patterns.css
@@ -1,5 +1,17 @@
 /* Colors */
 
+.circles {
+ display: flex;
+ gap: 1rem;
+}
+
+.circle {
+ height: 50px;
+ width: 50px;
+ margin: 0.5rem 0;
+ border-radius: 50%;
+}
+
 .red-1 {
  background: var(--red-1);
 }

diff --git a/src/styles/variables.css b/src/styles/variables.css
@@ -80,12 +80,14 @@
  --year: var(--gray-8);
  --star: var(--gray-6);
  --post-time-color: var(--gray-6);
+ --card-time-color: var(--font-color-muted);
+ --highlight-color: var(--indigo);
  --blockquote-background: var(--indigo-muted);
  --file-background: #e9ecef;
  --inline-code-background-color: rgba(0, 0, 0, 0.05);
 
  /* Sizs */
- --content-width: 1200px;
+ --content-width: 1160px;
  --content-width--small: 550px;
  --content-width--medium: 700px;
 }