@portosaur/theme 0.1.5 → 0.3.0

package/theme/css/custom.css

@@ -1,253 +1,16 @@
-/* Catppuccin colors */
-@import url("./catppuccin.css");
-
-/* Bootstrap (some prebuilt) */
-@import url(./bootstrap.css);
-
-/* === Component overrides === */
-
-html {
-  scroll-behavior: smooth;
-  color: var(--ifm-font-color-base);
-  background-color: var(--ifm-footer-background-color) !important;
-}
-
-.main-wrapper {
-  background-color: var(--ifm-background-color) !important;
-}
-
-.navbar {
-  background-color: var(--ifm-navbar-background-color) !important;
-}
-
-/* Reduce gap between navbar items */
-.navbar__items .navbar__item {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.navbar__link {
-  font-size: 0.95rem;
-}
-
-._navbar-more-items {
-  padding-left: 8px;
-  margin-left: -7px;
-  border-left: 1.5px solid var(--ifm-background-surface-color) !important;
-}
-
-._nav-protosaurus-version {
-  opacity: 64%;
-  margin-top: 10px;
-  border-top: 1.2px solid var(--ifm-background-color) !important;
-}
-
-@media (max-width: 768px) {
-  ._navbar-more-items {
-    border-left: 0 !important;
-    padding-left: 13px !important;
-    margin-left: 0 !important;
-  }
-}
-
-/* Search local styles */
-:root {
-  --search-local-modal-background: var(--ifm-background-color);
-  --search-local-modal-shadow: 0 2px 8px 0 var(--ifm-shadow-color);
-  --search-local-hit-background: var(--ifm-card-background-color);
-  --search-local-hit-shadow: 0 1px 3px 0 var(--ifm-shadow-color);
-  --search-local-hit-color: var(--ifm-font-color-base);
-  --search-local-highlight-color: var(--ifm-color-primary);
-  --search-local-muted-color: var(--ifm-font-color-base);
-  --search-local-hit-active-color: var(--ifm-background-color);
-  --search-local-input-active-border-color: var(--ifm-color-primary);
-}
-
-/* Hide keyboard shortcut hint */
-.searchHintContainer_Pkmr {
-  display: none !important;
-}
-
-.navbar__search-input {
-  width: 130px;
-  font-size: 0.85rem;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23cdd6f4' d='M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609,0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021,0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338,4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z'/%3E%3C/svg%3E");
-}
-
-[data-theme="light"] .navbar__search-input {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%234c4f69' d='M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609,0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021,0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338,4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z'/%3E%3C/svg%3E");
-}
-
-.footer {
-  background-color: var(--ifm-footer-background-color) !important;
-  padding-top: 0rem !important;
-  padding-bottom: 0.15rem !important;
-  margin: 0 !important;
-}
-
-.footer__copyright {
-  margin-top: 0 !important;
-  padding-top: 0 !important;
-  font-size: 0.8rem;
-}
-
-.cardDescription_PWke {
-  color: var(--ifm-font-color-base) !important;
-  opacity: 0.6;
-}
-
-.hide-this {
-  display: none !important;
-}
-
-/* Docs Styling */
-
-/* .docs-wrapper {
-  background-color:darksalmon !important;
-  } article {
-      background-color: red !important;
-    } .markdown  {
-      background-color: blue !important;
-      } .hide-this {
-        display: none !important;
-        }
-*/
-
-.breadcrumbs__link {
-  font-size: 0.7rem;
-  padding: 0.1rem 0.2rem !important;
-  opacity: 76%;
-}
-
-.breadcrumbs__item--active .breadcrumbs__link {
-  border: none !important;
-  background-color: transparent !important;
-}
-
-.markdown h1 {
-  text-align: center;
-  color: var(--ifm-color-primary);
-  margin-top: 0.3rem;
-  margin-bottom: 2.7rem !important;
-}
-
-.markdown h2 {
-  color: var(--ifm-color-primary);
-}
-
-.markdown img {
-  display: block;
-  margin: 0 auto;
-  padding: 1px;
-  border: 2px solid var(--ifm-background-surface-color);
-  border-radius: 14px;
-}
-
-mark {
-  background-color: rgba(var(--ctp-peach-rgb), 0.2);
-  color: var(--ifm-font-color-base);
-  padding: 0.17rem 0.27rem;
-  border-radius: 0.2rem;
-  border-bottom: 1px solid var(--ifm-color-primary);
-}
-
-.pagination-nav__link {
-  border: 1px solid var(--ifm-background-color);
-  background-color: var(--ifm-background-surface-color);
-}
-
-.pagination-nav__link:hover {
-  border: 1px solid var(--ifm-color-primary);
-  border-color: var(--ifm-color-primary);
-}
-
-.table-of-contents__link--active {
-  font-weight: bold;
-}
-
-/* Reduced motion preferences */
-@media (prefers-reduced-motion: reduce) {
-  html {
-    scroll-behavior: auto;
-  }
-}
-
-.center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-/* === Global Entrance Animations === */
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes slideUp {
-  from {
-    opacity: 0;
-    transform: translateY(30px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes slideInLeft {
-  from {
-    opacity: 0;
-    transform: translateX(-40px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes slideInRight {
-  from {
-    opacity: 0;
-    transform: translateX(40px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes scaleIn {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes skillAppear {
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Base reveal state */
-.reveal-on-scroll {
-  opacity: 0;
-  transition: opacity 0.3s ease;
-}
-
-.reveal-on-scroll.isVisible {
-  opacity: 1;
-}
+/* ----- Core Theme Variables ----- */
+@import url("./overrides/variables.css");
+
+/* ----- Global Fonts ----- */
+@import "@fontsource/alata";
+
+/* ----- Global Styles ----- */
+@import url("./animations.css");
+
+/* ------ Component Overrides ------ */
+@import url("./overrides/base.css");
+@import url("./overrides/navbar.css");
+@import url("./overrides/footer.css");
+@import url("./overrides/search.css");
+@import url("./overrides/pagination.css");
+@import url("./overrides/markdown.css");

package/theme/css/overrides/base.css

@@ -0,0 +1,37 @@
+/* === Base HTML and Utility Overrides === */
+
+html {
+  scroll-behavior: smooth;
+  color: var(--ifm-font-color-base);
+  background-color: var(--ifm-footer-background-color) !important;
+}
+
+/* Reduced motion preferences */
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+}
+
+.main-wrapper {
+  background-color: var(--ifm-background-color) !important;
+}
+
+.center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+th {
+  text-align: center !important;
+}
+
+[class*="cardDescription_"] {
+  color: var(--ifm-font-color-base) !important;
+  opacity: 0.6;
+}
+
+.hide-this {
+  display: none !important;
+}

package/theme/css/overrides/footer.css

@@ -0,0 +1,14 @@
+/* === Footer Overrides === */
+
+.footer {
+  background-color: var(--ifm-footer-background-color) !important;
+  padding-top: 0rem !important;
+  padding-bottom: 0.15rem !important;
+  margin: 0 !important;
+}
+
+.footer__copyright {
+  margin-top: 0 !important;
+  padding-top: 0 !important;
+  font-size: 0.8rem;
+}

package/theme/css/overrides/markdown.css

@@ -0,0 +1,62 @@
+/* === Markdown Content Styling === */
+
+.markdown {
+  --ifm-font-family-base:
+    "Lexend Variable", system-ui, -apple-system, sans-serif;
+  font-family: var(--ifm-font-family-base);
+}
+
+.breadcrumbs__link {
+  font-size: 0.7rem;
+  padding: 0.1rem 0.2rem !important;
+  opacity: 76%;
+}
+
+.breadcrumbs__item--active .breadcrumbs__link {
+  border: none !important;
+  background-color: transparent !important;
+}
+
+.markdown h1 {
+  text-align: center;
+  color: var(--ifm-color-primary);
+  margin-top: 0.3rem;
+  margin-bottom: 2.7rem !important;
+}
+
+.markdown h2 {
+  color: var(--ifm-color-primary);
+}
+
+.markdown big {
+  display: inline-block;
+  font-size: 1.5rem;
+  margin-bottom: 0.65rem;
+  margin-top: 0.6rem;
+}
+
+.markdown li big,
+.markdown p big {
+  margin-top: inherit;
+  margin-bottom: inherit;
+}
+
+.markdown img {
+  display: block;
+  margin: 0 auto;
+  padding: 1px;
+  border: 2px solid var(--ifm-background-surface-color);
+  border-radius: 14px;
+}
+
+mark {
+  background-color: rgba(var(--ctp-peach-rgb), 0.2);
+  color: var(--ifm-font-color-base);
+  padding: 0.17rem 0.27rem;
+  border-radius: 0.2rem;
+  border-bottom: 1px solid var(--ifm-color-primary);
+}
+
+.table-of-contents__link--active {
+  font-weight: bold;
+}

package/theme/css/overrides/navbar.css

@@ -0,0 +1,37 @@
+/* === Navbar Overrides === */
+
+.navbar {
+  background-color: var(--ifm-navbar-background-color) !important;
+}
+
+/* Reduce gap between navbar items */
+.navbar__items .navbar__item {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.navbar__link {
+  font-size: 0.95rem;
+}
+
+._navbar-more-items {
+  padding-left: 8px;
+  margin-left: -7px;
+  border-left: 1.5px solid var(--ifm-background-surface-color) !important;
+}
+
+._nav-protosaurus-version {
+  opacity: 64%;
+  margin-top: 10px;
+  border-top: 1.2px solid var(--ifm-background-color) !important;
+}
+
+@media (max-width: 768px) {
+  ._navbar-more-items {
+    border-left: 0 !important;
+    padding-left: 13px !important;
+    margin-left: 0 !important;
+  }
+}

package/theme/css/overrides/pagination.css

@@ -0,0 +1,64 @@
+/* === Pagination Overrides === */
+
+.pagination-nav {
+  margin-top: 1.5rem !important;
+}
+
+.pagination-nav__label {
+  font-size: 1.1rem;
+  display: flex;
+  align-items: center;
+}
+
+.pagination-nav__link--prev .pagination-nav__label {
+  justify-content: flex-start;
+  text-align: left;
+}
+
+.pagination-nav__link--next .pagination-nav__label {
+  justify-content: flex-end;
+  text-align: right;
+}
+
+.pagination-nav__link--prev .pagination-nav__label::before {
+  content: "«" !important;
+  margin-right: 0.5rem;
+  flex-shrink: 0;
+  font-size: 1.6rem;
+  line-height: 1;
+}
+
+.pagination-nav__link--next .pagination-nav__label::after {
+  content: "»" !important;
+  margin-left: 0.5rem;
+  flex-shrink: 0;
+  font-size: 1.6rem;
+  line-height: 1;
+}
+
+.pagination-nav__link {
+  border: 1px solid var(--ifm-background-color);
+  background-color: var(--ifm-background-surface-color);
+}
+
+.pagination-nav__link:hover {
+  border: 1px solid var(--ifm-color-primary);
+  border-color: var(--ifm-color-primary);
+}
+
+/* Stack prev/next nav buttons vertically on mobile */
+@media (max-width: 768px) {
+  .pagination-nav {
+    grid-template-columns: 1fr !important;
+    gap: 0.15rem !important;
+  }
+
+  .pagination-nav__link--prev {
+    text-align: left !important;
+  }
+
+  .pagination-nav__link--next {
+    grid-column: 1 !important;
+    text-align: right !important;
+  }
+}

package/theme/css/overrides/search.css

@@ -0,0 +1,28 @@
+/* === Local Search Plugin Overrides === */
+
+:root {
+  --search-local-modal-background: var(--ifm-background-color);
+  --search-local-modal-shadow: 0 2px 8px 0 var(--ifm-shadow-color);
+  --search-local-hit-background: var(--ifm-card-background-color);
+  --search-local-hit-shadow: 0 1px 3px 0 var(--ifm-shadow-color);
+  --search-local-hit-color: var(--ifm-font-color-base);
+  --search-local-highlight-color: var(--ifm-color-primary);
+  --search-local-muted-color: var(--ifm-font-color-base);
+  --search-local-hit-active-color: var(--ifm-background-color);
+  --search-local-input-active-border-color: var(--ifm-color-primary);
+}
+
+/* Hide keyboard shortcut hint */
+.searchHintContainer_Pkmr {
+  display: none !important;
+}
+
+.navbar__search-input {
+  width: 130px;
+  font-size: 0.85rem;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23cdd6f4' d='M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609,0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021,0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338,4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z'/%3E%3C/svg%3E");
+}
+
+[data-theme="light"] .navbar__search-input {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%234c4f69' d='M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609,0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021,0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338,4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z'/%3E%3C/svg%3E");
+}

package/theme/css/{catppuccin.css → overrides/variables.css}

@@ -4,7 +4,7 @@
 **/
 
 /* Import fonts */
-@import url("https://fonts.googleapis.com/css2?family=Alata&family=DM+Serif+Display&display=swap");
+@import "@fontsource-variable/lexend";
 
 :root {
   --ifm-heading-font-family: "Alata", system-ui, -apple-system, sans-serif;

package/theme/pages/index.jsx

@@ -1,12 +1,14 @@
 import Layout from "@theme/Layout";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import UpdateTitle from "../utils/updateTitle.js";
-import HeroSection from "../components/HeroSection/index.js";
-import AboutSection from "../components/AboutSection/index.js";
-import ProjectsSection from "../components/ProjectsSection/index.js";
-import ContactSection from "../components/ContactSection/index.js";
-import ExperienceSection from "../components/ExperienceSection/index.js";
-import NavArrow from "../components/NavArrow/index.js";
+import UpdateTitle from "../utils/updateTitle.jsx";
+import HeroSection from "../components/HeroSection/index.jsx";
+import AboutSection from "../components/AboutSection/index.jsx";
+import ProjectsSection from "../components/ProjectsSection/index.jsx";
+import ContactSection from "../components/ContactSection/index.jsx";
+import ExperienceSection from "../components/ExperienceSection/index.jsx";
+import NavArrow from "../components/NavArrow/index.jsx";
+import ScrollToTop from "../components/ScrollToTop/index.jsx";
+
 export default function Home() {
   const { siteConfig } = useDocusaurusContext();
 
@@ -17,88 +19,24 @@ export default function Home() {
     experience: `Experience | ${siteConfig.title}`,
     contact: `Contact | ${siteConfig.title}`,
   };
+
   const customStyles = `
   /* For future */
   `;
-  return jsxDEV_7x81h0kn(
-    Layout,
-    {
-      title: "Me",
-      description: "My portfolio website",
-      children: [
-        jsxDEV_7x81h0kn(
-          "style",
-          { children: customStyles },
-          undefined,
-          false,
-          undefined,
-          this,
-        ),
-        jsxDEV_7x81h0kn(
-          UpdateTitle,
-          { sections: sectionTitles, defaultTitle: siteConfig.title },
-          undefined,
-          false,
-          undefined,
-          this,
-        ),
-        jsxDEV_7x81h0kn(
-          "main",
-          {
-            children: [
-              jsxDEV_7x81h0kn(
-                HeroSection,
-                { id: "me" },
-                undefined,
-                false,
-                undefined,
-                this,
-              ),
-              jsxDEV_7x81h0kn(
-                AboutSection,
-                { id: "about" },
-                undefined,
-                false,
-                undefined,
-                this,
-              ),
-              jsxDEV_7x81h0kn(
-                ProjectsSection,
-                { id: "projects" },
-                undefined,
-                false,
-                undefined,
-                this,
-              ),
-              jsxDEV_7x81h0kn(
-                ExperienceSection,
-                { id: "experience" },
-                undefined,
-                false,
-                undefined,
-                this,
-              ),
-              jsxDEV_7x81h0kn(
-                ContactSection,
-                { id: "contact" },
-                undefined,
-                false,
-                undefined,
-                this,
-              ),
-              jsxDEV_7x81h0kn(NavArrow, {}, undefined, false, undefined, this),
-            ],
-          },
-          undefined,
-          true,
-          undefined,
-          this,
-        ),
-      ],
-    },
-    undefined,
-    true,
-    undefined,
-    this,
+
+  return (
+    <Layout title="Me" description="My portfolio website">
+      <style>{customStyles}</style>
+      <UpdateTitle sections={sectionTitles} defaultTitle={siteConfig.title} />
+      <main>
+        <HeroSection id="me" />
+        <AboutSection id="about" />
+        <ProjectsSection id="projects" />
+        <ExperienceSection id="experience" />
+        <ContactSection id="contact" />
+        <NavArrow />
+        <ScrollToTop />
+      </main>
+    </Layout>
   );
 }