using tailwind css

author: Darshan Baral <darshanbaral@gmail.com> 2021-05-03 00:21:24 +0300
committer: Darshan Baral <darshanbaral@gmail.com> 2021-05-03 00:21:24 +0300
commit: 782688dfb634382b61d3f2f90e33af3ad533fd4c (patch)
tree: b73741d4d8d5f6af5085ef5de6248a9ec61853ee /layouts
parent: b83b21bd2469dc11ba1eccec3802cbade2e10f69 (diff)
15 files changed, 115 insertions, 126 deletions
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 8ff7026..a762b4d 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -1,12 +1,8 @@
 <!DOCTYPE html>
-<html lang="{{ .Site.Language }}">
+<html lang="{{ .Site.Language }}" class="{{ .Site.Params.theme }}">
   {{- partial "head.html" . -}}
-  <body
-    class="bg-dark container mt-2 mb-2"
-    style="font-family: 'Roboto', sans-serif;"
-  >
+  <body class="max-w-screen-md mx-auto prose dark:prose-dark px-2 pb-4 bg-gray-100 dark:bg-dark1 duration-250">
     {{- partial "header.html" . -}}
-    <div id="content">{{- block "main" . }}{{ end }}</div>
-    {{- partial "footer.html" . -}}
+    <main class="flex sm:flex-row-reverse flex-row flex-wrap">{{- block "main" . }}{{ end }}</main>
   </body>
 </html>
diff --git a/layouts/index.html b/layouts/index.html
index 9e93933..0d46702 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,19 +1,21 @@
 {{ define "main" }}
-<div class="row no-gutters">
-  <div class="col-sm-4 order-sm-2 bg-secondary text-white p-2">
+<section
+  class="w-full sm:w-2/5 bg-gray-200 dark:bg-dark2 p-3 rounded shadow flex flex-col justify-between"
+>
+  <div>
     {{ partial "profilePhoto" . }}
+    {{ partial "social.html" . }}
     {{ partial "aboutDesc" . }}
-    <hr style="width:50%;" />
     {{ partial "language.html" . }}
-    <hr style="width:50%;" />
     {{ partial "hobby.html" . }}
   </div>
+  {{- partial "footer.html" . -}}
+</section>
 
-  <div class="col-sm-8 text-white p-2">
-    {{ partial "experience.html" . }}
-    {{ partial "education.html" . }}
-    {{ partial "project.html" . }}
-    {{ partial "skill.html" . }}
-  </div>
-</div>
+<section class="w-full sm:w-3/5 px-3">
+  {{ partial "experience.html" . }}
+  {{ partial "education.html" . }}
+  {{ partial "project.html" . }}
+  {{ partial "skill.html" . }}
+</section>
 {{ end }}
diff --git a/layouts/partials/aboutDesc.html b/layouts/partials/aboutDesc.html
index eb7871f..315b639 100644
--- a/layouts/partials/aboutDesc.html
+++ b/layouts/partials/aboutDesc.html
@@ -1,6 +1,4 @@
 <div class="d-flex flex-column mt-2">
-  <h3 class="text-light">{{ .Site.Params.description }}</h3>
-  <p class="text-white">
-    {{ .Site.Params.aboutme.description | markdownify }}
-  </p>
+  <h3>{{ .Site.Params.description }}</h3>
+  <p class="mb-2 ml-1">{{ .Site.Params.aboutme.description | markdownify }}</p>
 </div>
diff --git a/layouts/partials/education.html b/layouts/partials/education.html
index 1dee5fe..8fafbbe 100644
--- a/layouts/partials/education.html
+++ b/layouts/partials/education.html
@@ -1,19 +1,18 @@
-<h3>
+<div class="mb-8">
+  <h2>
   <i class="fas fa-graduation-cap"></i>
   {{ .Site.Params.education.title }}
-</h3>
+</h2>
 {{ range.Site.Params.education.list }}
-<dl>
-  <dt>{{ .degree }}</dt>
-  <dd class="mb-0 ml-3">{{ .college }}</dd>
-  <dd class="mb-0 ml-3">{{ .dates }}</dd>
+<h3>{{ .degree }}</h3>
+  <p class="ml-1 mb-0"><span class="font-semibold">{{ .college }}</span> &middot; {{ .dates }}</p>
   {{ if .thesis_link }}
-  <dd class="mb-0 ml-4">
+  <p class="ml-2 mb-0">
     Thesis:
     <a class="text-warning" href="{{ .thesis_link }}"
       ><i>{{ .thesis_title }}</i></a
     >
-  </dd>
+  </p>
   {{ end }}
-</dl>
 {{ end }}
+</div>
diff --git a/layouts/partials/experience.html b/layouts/partials/experience.html
index 8138be9..c9108a6 100644
--- a/layouts/partials/experience.html
+++ b/layouts/partials/experience.html
@@ -1,16 +1,15 @@
-<h3>
-  <i class="fas fa-briefcase"></i>
-  {{ .Site.Params.experiences.title }}
-</h3>
+<div class="mb-8">
+  <h2 class="mt-8 sm:mt-0">
+    <i class="fas fa-briefcase"></i>
+    {{ .Site.Params.experiences.title }}
+  </h2>
 
-{{ range.Site.Params.jobs.list }}
-<dl>
-  <dt>{{ .position }}</dt>
-  <dd class="mb-0 ml-3">{{ .dates | markdownify }}</dd>
-  <dd class="mb-0 ml-3">
-    {{ if .link }}<a class="text-warning" href="{{ .link }}">{{ .company }}</a
-    >{{ else }} {{ .company }} {{ end }}
-  </dd>
-  <dd class="mb-0 ml-3">{{ .details | markdownify }}</dd>
-</dl>
-{{ end }}
+  {{ range.Site.Params.jobs.list }}
+  <h3 class="mb-1">{{ .position }}</h3>
+  <p class="ml-1 mb-0">
+    {{ if .link }}<a class="font-semibold" href="{{ .link }}">{{ .company }}</a>
+    {{ else }}{{ .company }}{{ end }} &middot; {{ .dates | markdownify }}
+  </p>
+  <p class="ml-2 mb-0">{{ .details | markdownify }}</p>
+  {{ end }}
+</div>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 7f0bb6f..b8b89fb 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,11 +1,7 @@
-<footer class="text-right mt-4">
-  <a class="text-warning" href="{{ .Site.Params.copyright_link }}">
-    {{ .Site.Params.copyright | markdownify }}
-  </a>
-  <span class="text-white">|</span>
-  <a class="text-warning" href="https://github.com/darshanbaral/sada">
-    <i>sada</i></a
-  >
-  <span class="text-white">by</span>
-  <a class="text-warning" href="https://www.darshanbaral.com">darshan</a>.
+<footer class="text-center text-sm pt-2 border-t border-gray-500 mt-6">
+  <p>{{ .Site.Params.copyright | markdownify }}</p>
+  <p>
+    <a href="https://github.com/darshanbaral/sada">sada</a> by
+    <a href="https://www.darshanbaral.com">darshan</a>
+  </p>
 </footer>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index fd5deb8..5f30fca 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -6,10 +6,7 @@
   <meta name="description" content="{{ .Site.Params.description }}" />
   <meta name="author" content="{{ .Site.Params.author }}" />
 
-  <script src="/src/toggleTheme.js"></script>
-  <script src="/src/sada_main.js"></script>
-
-  <link href="{{ `src/bootstrap.min.css` | relURL }}" rel="stylesheet" />
+  {{ partial "linkCSS" . }}
   <link
     rel="stylesheet"
     href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
@@ -20,17 +17,4 @@
     rel="stylesheet"
     href="https://cdn.rawgit.com/jpswalsh/academicons/master/css/academicons.min.css"
   />
-  <link
-    href="https://fonts.googleapis.com/css?family=Roboto|Material+Icons"
-    rel="stylesheet"
-  />
-
-  <style>
-    .bg-dark {
-      background-color: #23272c !important;
-    }
-    .bg-light {
-      background-color: #ddd !important;
-    }
-  </style>
 </head>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 8c24eb4..e2cb2a3 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,14 +1,22 @@
-<script src="{{ `src/sada_main.js` | relURL }}"></script>
-<div class="d-flex flex-column border-bottom border-secondary pl-2 pr-2">
-  <h1 class="text-white mb-1">{{ .Site.Params.profile.name }}</h1>
-  <div class="d-flex flex-row justify-content-between">
-    {{ partial "social.html" . }}
-    <h3
-      class="toggleTheme text-white mt-2"
-      onclick="toggleTheme()"
-      title="toggle theme"
-    >
-      <i class="material-icons" style="cursor: pointer;">brightness_medium</i>
-    </h3>
-  </div>
-</div>
+<header class="flex flex-row justify-between mb-6 px-3 pt-2">
+  <h1 class="mb-1">{{ .Site.Params.profile.name }}</h1>
+  <i
+    class="toggle-theme text-3xl cursor-pointer fas {{ if eq .Site.Params.theme `light` }}fa-moon{{ else }}fa-sun{{ end }} text-gray-600 hover:text-gray-800 dark:text-gray-500 dark:hover:text-gray-200"
+    onclick="toggleTheme(this)"
+  ></i>
+</header>
+
+<script>
+  const toggleTheme = (el) => {
+    const html = document.querySelector("html");
+    if (el.classList.contains("fa-moon")) {
+      el.classList.remove("fa-moon");
+      el.classList.add("fa-sun");
+      html.classList.add("dark");
+    } else {
+      el.classList.remove("fa-sun");
+      el.classList.add("fa-moon");
+      html.classList.remove("dark");
+    }
+  };
+</script>
diff --git a/layouts/partials/hobby.html b/layouts/partials/hobby.html
index e2164f7..114c3d6 100644
--- a/layouts/partials/hobby.html
+++ b/layouts/partials/hobby.html
@@ -1,6 +1,4 @@
 <h3>{{ .Site.Params.hobbies.title }}</h3>
-<ul class="list-unstyled" style="text-indent: 1.25em;">
-    {{ range .Site.Params.hobbies.list }}
-    <li>{{ .interest }}</li>
-    {{ end }}
-</ul>
-\ No newline at end of file
+{{ range .Site.Params.hobbies.list }}
+<p class="ml-1">{{ .interest }}</p>
+{{ end }}
diff --git a/layouts/partials/language.html b/layouts/partials/language.html
index 612426b..c361bcd 100644
--- a/layouts/partials/language.html
+++ b/layouts/partials/language.html
@@ -1,6 +1,4 @@
 <h3>{{ .Site.Params.language.title }}</h3>
-<ul class="list-unstyled" style="text-indent: 1.25em;">
-    {{ range .Site.Params.language.list }}
-    <li>{{ .language }} <span class="lang-desc">({{ .level }})</span></li>
-    {{ end }}
-</ul>
-\ No newline at end of file
+{{ range .Site.Params.language.list }}
+<p class="ml-1">{{ .language }} ({{ .level }})</p>
+{{ end }}
diff --git a/layouts/partials/linkCSS.html b/layouts/partials/linkCSS.html
new file mode 100644
index 0000000..d791e58
--- /dev/null
+++ b/layouts/partials/linkCSS.html
@@ -0,0 +1,17 @@
+{{ if .Site.Params.useResources }}
+    {{ $styles := resources.Get "css/main.css" | postCSS }}
+    <!-- process CSS -->
+    {{ if .Site.IsServer }}
+        <link rel="stylesheet" href="{{ $styles.RelPermalink }}" />
+    {{ else }}
+        <!-- minify for prod -->
+        {{ $styles := $styles | minify | fingerprint | resources.PostProcess }}
+        <link
+        rel="stylesheet"
+        href="{{ $styles.RelPermalink }}"
+        integrity="{{ $styles.Data.Integrity }}"
+        />
+    {{ end }}
+{{ else }}
+    <link rel="stylesheet" href="{{ `css/main.min.css` | relURL }}" />
+{{ end }}
diff --git a/layouts/partials/profilePhoto.html b/layouts/partials/profilePhoto.html
index 7c259e1..a812606 100644
--- a/layouts/partials/profilePhoto.html
+++ b/layouts/partials/profilePhoto.html
@@ -1,8 +1,7 @@
-<div class="m-auto text-center w-100">
+<div class="m-auto justify-center w-full flex">
   <img
-    class="rounded-circle"
+    class="rounded-full w-4/5"
     src="{{ .Site.Params.profile.photo | relURL }}"
     alt="{{ .Site.Params.author }}"
-    style="width: 300px;"
   />
 </div>
diff --git a/layouts/partials/project.html b/layouts/partials/project.html
index 6270627..2e6f160 100644
--- a/layouts/partials/project.html
+++ b/layouts/partials/project.html
@@ -1,6 +1,9 @@
-<h3 class="mt-4"><i class="fas {{ .Site.Params.projects.icon }}"></i> {{ .Site.Params.projects.title }}</h3>
+<div class="mb-8">
+<h2 class="mt-4">
+    <i class="fas fa-project-diagram"></i> {{ .Site.Params.projects.title }}
+</h2>
 {{ range .Site.Params.projects.list }}
-<ul class="list-unstyled">
-    <li><a class="text-warning" href="{{ .url }}">{{ .title }}</a> - {{ .description | markdownify }}</li>
-</ul>
-{{ end }}
-\ No newline at end of file
+<h3 class="mb-1"><a class="text-warning" href="{{ .url }}">{{ .title }}</a></h3>
+<p class="mb-0 ml-1">{{ .description | markdownify }}</p>
+{{ end }}
+</div>
+\ No newline at end of file
diff --git a/layouts/partials/skill.html b/layouts/partials/skill.html
index e24cc2e..f76d4da 100644
--- a/layouts/partials/skill.html
+++ b/layouts/partials/skill.html
@@ -1,16 +1,10 @@
-<h3>
-  <i class="fas {{ .Site.Params.skills.icon }}"></i>
+<h2>
+  <i class="fas fa-cogs"></i>
   {{ .Site.Params.skills.title }}
-</h3>
+</h2>
 {{ range.Site.Params.skills.list }}
-<code>{{ .skill }}</code>
-<div
-  class="w-100 bg-secondary border border-secondary mt-1 mb-3"
-  style="height:15px;"
->
-  <div
-    class="bg-warning h-100"
-    style="width: {{ .skillrating }}%;"
-  ></div>
+<p class="mt-2">{{ .skill }}</p>
+<div class="w-full border border-gray-500 dark:border-gray-300 mt-1 rounded h-5">
+  <div class="bg-blue-500 dark:bg-yellow-500 h-full" style="width: {{ .skillrating }}%;"></div>
 </div>
 {{ end }}
diff --git a/layouts/partials/social.html b/layouts/partials/social.html
index 38e08bd..b2c4852 100644
--- a/layouts/partials/social.html
+++ b/layouts/partials/social.html
@@ -1,9 +1,7 @@
-<ul class="list-inline mb-1 mt-2">
-    {{ range .Site.Params.social.list }}
-    <li class="list-inline-item ml-1 mr-1">
-        <a class="text-warning" href="{{ .url }}">
-            <i class="{{ .class }} {{ .icon }}" style="font-size: 2em;"></i>
-        </a>
-    </li>
-    {{ end }}
-</ul>
-\ No newline at end of file
+<div class="flex mb-1 mt-2 justify-center flex-wrap">
+  {{ range .Site.Params.social.list }}
+  <a href="{{ .url }}">
+    <i class="{{ .icon }} text-2xl py-1 px-2 m-1 rounded hover:bg-gray-300 dark:hover:bg-dark3"></i>
+  </a>
+  {{ end }}
+</div>
author	Darshan Baral <darshanbaral@gmail.com>	2021-05-03 00:21:24 +0300
committer	Darshan Baral <darshanbaral@gmail.com>	2021-05-03 00:21:24 +0300
commit	782688dfb634382b61d3f2f90e33af3ad533fd4c (patch)
tree	b73741d4d8d5f6af5085ef5de6248a9ec61853ee /layouts
parent	b83b21bd2469dc11ba1eccec3802cbade2e10f69 (diff)