add all to config toml

jamtools · Jul 12, 2022 · 02812b9 · 02812b9
1 parent e1562d8
commit 02812b9
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 19 deletions.
diff --git a/config.toml b/config.toml
@@ -19,6 +19,8 @@ pygmentsUseClasses = true
   locale = "en-US"
   type = "website"
 
+  primary_color = "#30B561" # Green Color
+
   landing_title = "Online Music"
   landing_subtitle = "Collaboration Platform"
   landing_description = "Lorem ispum dolor si amet jue viole grace"
@@ -56,7 +58,6 @@ pygmentsUseClasses = true
   ]
 
   contact_us_url = "#"
-
   privacy_url = "#"
   terms_url = "#"
   help_url = "#"

diff --git a/layouts/index.html b/layouts/index.html
@@ -7,11 +7,9 @@ <h2 class="landing-title text-[36px] lg:text-[64px] leading-tight font-bold">
         </h2>
         <h2 class="landing-subtitle text-[36px] lg:text-[64px] leading-tight font-bold">
           {{ .Site.Params.Landing_subtitle }}
-
         </h2>
         <p class="text-gray mt-3 leading-normal text-base lg:text-xl">
           {{ .Site.Params.Landing_description }}
-
         </p>
 
         <!-- show on mobile, hide on desktop -->
@@ -51,7 +49,7 @@ <h2 class="landing-subtitle text-[36px] lg:text-[64px] leading-tight font-bold">
       </div>
       <div class="w-full lg:w-[45%] mt-16 lg:mt-0">
         <h2 class="text-[32px] lg:text-[64px] leading-normal font-bold mb-4"><span class="text-primary capitalize">About</span> {{ .Site.Params.Site_name }}</h2>
-        <p class="testimonial-description line-clamp-2 text-gray text-xl font-medium">
+        <p class="testimonial-description text-gray text-xl font-medium">
           {{ .Site.Params.About}}
         </p>
       </div>

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -22,6 +22,27 @@ <h1 class="ml-5 text-xl font-medium pb-0.5 first-letter:font-black first-letter:
 </footer>
 
 <script>
+
+  const headerTitle = document.querySelector('.header-title')
+  const landingTitle = document.querySelector('.landing-title')
+  const landingSubtitle = document.querySelector('.landing-subtitle')
+
+  headerTitle.innerHTML = headerTitle.textContent.trim().split('').map((text, i) => {
+    return i == 0 ? `<div class="text-primary font-black text-4xl -mb-0.5">${text}</div>` : text
+  }).join('')
+
+  landingTitle.innerHTML = givePrimaryColor(landingTitle, 0)
+  landingSubtitle.innerHTML = givePrimaryColor(landingSubtitle, landingSubtitle.textContent.trim().split(' ').length - 1)
+
+  function givePrimaryColor (el, index) {
+    return el.textContent
+      .trim()
+      .split(' ')
+      .map((text, i) => i === index ?  `<span class="text-primary">${text}</span>` : text)
+      .join(' ')
+  }
+
+
   // Toggle Menu
   const toggleMenu = document.querySelector('.toggle-menu')
   const menu = document.querySelector('.menu')

diff --git a/layouts/partials/head.html b/layouts/partials/head.html
@@ -9,27 +9,41 @@
   <meta name="description" content="{{ .Site.Params.Description }}">
   <meta property="og:type" content="{{ or .Type `website` }}" />
   <meta property="og:title" content="{{ .Title }}" />
+  <meta property="og:url" content="{{ .Permalink | absURL }}" />
+  <meta property="og:site_name" content="{{ .Site.Params.Site_name}}" />
+
   {{if .Description}}
-  <meta name="og:description" content="{{ .Description }}">
+    <meta name="og:description" content="{{ .Description }}">
+    <meta property="twitter:description" content="{{ .Description }}" />
   {{ else if eq .Kind "section" }}
-  <meta name="og:description" content="{{ .Summary }}">
+    <meta name="og:description" content="{{ .Summary }}">
+    <meta property="twitter:description" content="{{ .Summary }}" />
   {{ else }}
-  <meta name="og:description" content="{{ .Site.Params.Description }}">
+    <meta name="og:description" content="{{ .Site.Params.Description }}">
+    <meta property="twitter:description" content="{{ .Site.Params.Description }}" />
   {{ end }}
-  <meta property="og:url" content="{{ .Permalink | absURL }}" />
-  <meta property="og:site_name" content="{{ .Site.Params.Site_name}}" />
-  <meta name="twitter:card" content="summary" />
+
+  <meta property="twitter:card" content="summary_large_image" />
+  <meta property="twitter:url" content="{{ .Permalink | absURL }}">
+  <meta property="twitter:title" content="{{ .Title }}" />
+  <meta property="twitter:image" content="{{ .Params.thumbnail | absURL }}" />
+
   {{ if .IsPage }}
-  <meta property="article:author" content="{{ or .Author .Site.Params.Author }}" />
-  <meta property="article:published_time" content="{{ .PublishDate.Format `20060102-15:04:05.000` }}" />
-  <meta property="article:modified_time" content="{{ .Page.Lastmod.Format `20060102-15:04:05.000` }}" />
-  <meta property="og:image" content="{{ .Params.thumbnail | absURL }}" />
-  <meta property="og:image:width" content="945" />
-  <meta property="og:image:height" content="595" />
+    <meta property="article:author" content="{{ or .Author .Site.Params.Author }}" />
+    <meta property="article:published_time" content="{{ .PublishDate.Format `20060102-15:04:05.000` }}" />
+    <meta property="article:modified_time" content="{{ .Page.Lastmod.Format `20060102-15:04:05.000` }}" />
+    <meta property="og:image" content="{{ .Params.thumbnail | absURL }}" />
+    <meta property="og:image:width" content="945" />
+    <meta property="og:image:height" content="595" />
   {{ end }}
 
   <!-- Tailwindcss -->
   <link rel="stylesheet" href="/assets/css/styles.css">
+  <style>
+    :root {
+      --primary-color: {{ .Site.Params.Primary_color }}
+    } 
+  </style>
 
   <!-- Google Font -->
   <link rel="preconnect" href="https://fonts.googleapis.com">

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -5,7 +5,7 @@
         <div class="font-black text-4xl text-primary">S</div>
         <div class="pb-0.5">oundTown</div>
       </a> -->
-      <a href="/" class="ml-5 text-xl font-medium pb-0.5 first-letter:font-black first-letter:text-4xl first-letter:text-primary ">
+      <a href="/" class="header-title ml-5 text-xl font-medium flex items-end gap-0.5">
         {{ .Site.Params.Site_name }}
       </a>
       <button name="menu" class="toggle-menu block lg:hidden">

diff --git a/static/assets/css/styles.css b/static/assets/css/styles.css
diff --git a/static/assets/images/hero-image2.png b/static/assets/images/hero-image2.png
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -11,7 +11,7 @@ module.exports = {
     },
     extend: {
       colors: {
-        primary: '#30B561',
+        primary: 'var(--primary-color)',
         secondary: '#181818',
         black: '#121212',
         gray: {