jekyll-theme-profile 1.2.0 → 1.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b2f22b92e41c06a56c536e5d99441caf1cf9cb125a6fdff6aacc3bcf245a087e
-  data.tar.gz: 68fcc586bc613771d69843c787fbea7c2243fd91a1200c26ee5907b18de63fcc
+  metadata.gz: ae130012a6bd4d104949786dbe52f2231aa28e6bfba3794deac24b2abb4e6115
+  data.tar.gz: f42e1d48dba3e870a9d837dd70afef524c7235761eb8aefe11492fc669986312
 SHA512:
-  metadata.gz: 2be63f78cf84156ef8553aa300119e0dcc73be0f084717bf9886bd866f4b6f10d18c12741e53e1ec2bc2a8d7e1d02c33bdb2f27522f1b106f38ff7907fc4be4b
-  data.tar.gz: 42c51de2313fc240a3904baa32f7e22e012f536cc4cd220c162fec2bb0533fedd4a2d6d5a995f5066922ff8162a8bb7b61e93aaea429399945fe8a9553add580
+  metadata.gz: 205a5156d3b0e054d2c351337c67e596c031a028025dd7688b4b9ad6fcb77cf6feddff1b11adbf642e827b58ffd2b4c462d8bdacf0add47e662c6e2d83c971ae
+  data.tar.gz: b5532c93be5b08b1dd22e8515226872d30cf0dca811b56ed37a1ec0ac28a257998c0a5bea9dbe092c2656ea15c8aca50c99eb21bc0b17d1f62873d8e47f0c414

data/README.md

@@ -255,16 +255,43 @@ style: sidebar # One of "stacked", "sidebar", "topbar"
 You can even change the background by adding the following to your `_config.yml` file.
 
 ```yaml
-# background:
-#   image: /media/background-img.jpg
-#   light:
-#     overlay: rgba(255, 255, 255, 0.5)
-#   dark:
-#     overlay: rgba(0, 0, 0, 0.5)
+background:
+  image: /media/background-img.jpg
+  overlay: rgba(0, 0, 0, 0.5) # Overlay for both light and dark styles
+  light:
+    overlay: rgba(255, 255, 255, 0.5)
+  dark:
+    overlay: rgba(0, 0, 0, 0.5)
+```
+
+or
+
+```yaml
+background:
+  image: /media/background-img.jpg
+  light: # custom overlay for light and dark styles
+    overlay: rgba(255, 255, 255, 0.5)
+  dark:
+    overlay: rgba(0, 0, 0, 0.5)
 ```
 
 [Example page](/test/page/background.md)
 
+#### Header
+
+You can change the header color by adding the following to your `_config.yml` file
+
+```yaml
+header:
+  color: "#4051b5"
+  text: "rgba(255,255,255,0.7)"
+  accent: "#ffffff"
+```
+
+#### Custom styles
+
+You can override any style with styles defined in `/assets/css/style.css` or `/assets/css/style.scss` files.  This is to support config based styling which needs jekyll variables.
+
 ### Nav
 
 In the `nav` section, you can add navigation links that will show up on every page of your website.

data/_config.yml

@@ -6,11 +6,17 @@ user_image: /media/user-image.jpg
 # Optional custom background image and overlay
 # background:
 #   image: /media/background-img.jpg
+#   overlay: rgba(0, 0, 0, 0.7)
 #   light:
 #     overlay: rgba(255, 255, 255, 0.5)
 #   dark:
 #     overlay: rgba(0, 0, 0, 0.5)
-# color: white # The color for the profile card
+
+# Optional custom header colors
+# header:
+#   color: "#4051b5"
+#   text: "rgba(255,255,255,0.7)"
+#   accent: "#ffffff"
 
 repo_info: true # Show the information for the source of this project
 metadata: false # Show the metadata associated with the user
@@ -19,29 +25,29 @@ metadata: false # Show the metadata associated with the user
 # Social media
 social_image: /screenshot.png # The social media thumbnail image to use in post links.
 # icon_color: "#959da5" # The color of the social media icons on the site
-social_media: # Your social media accounts
-  # behance: your_username
-  # dribbble: your_username
-  # docker: your_username
-  # facebook: your_username
-  # github: your_username
-  # hackerrank: your_username
-  # instagram: your_username
-  # keybase: your_username
-  # linkedin: your_username
-  # mail: email@address
-  # mastodon: your_username
-  # medium: your_username
-  # stackoverflow: your_user_id
-  # telegram: your_username
-  # threads: your_username
-  # tiktok: your_username
-  # twitter: your_username
-  # unsplash: your_username
-  # vk: your_username
-  # vscode: your_username
-  # youtube: your_username
-  # x: your_username
+# social_media: # Your social media accounts
+#   behance: your_username
+#   dribbble: your_username
+#   docker: your_username
+#   facebook: your_username
+#   github: your_username
+#   hackerrank: your_username
+#   instagram: your_username
+#   keybase: your_username
+#   linkedin: your_username
+#   mail: email@address
+#   mastodon: your_username
+#   medium: your_username
+#   stackoverflow: your_user_id
+#   telegram: your_username
+#   threads: your_username
+#   tiktok: your_username
+#   twitter: your_username
+#   unsplash: your_username
+#   vk: your_username
+#   vscode: your_username
+#   youtube: your_username
+#   x: your_username
 
 ####################
 # Navigation links
@@ -90,6 +96,20 @@ posts_limit: 3 # The number of posts to show in home
 paginate: 6 # The number of posts to show per page of pagination of blog posts
 paginate_path: "/assets/blog/page:num"
 
+markdown: kramdown
+highlighter: rouge
+# kramdown:
+#   input: GFM
+#   syntax_highlighter: rouge
+#   syntax_highlighter_opts: # Rouge Options › https://github.com/jneen/rouge#full-options
+#     css_class: highlight
+#     # default_lang: console
+#     span:
+#       line_numbers: false
+#     block:
+#       line_numbers: true
+#       start_line: 1
+
 # ============= general settings for the theme ===============
 plugins:
   - jekyll-github-metadata
@@ -120,5 +140,3 @@ exclude:
   - .deprecated
   - .github
   - "*.gem"
-
-markdown: kramdown

data/_includes/header.html

@@ -66,6 +66,7 @@
   <meta name="twitter:site" content="@{{ site.social_media.twitter }}">
   {%- endif %}
 
+  <link href="{{ '/assets/css/theme.css' | relative_url }}" rel="stylesheet" type="text/css">
   <link href="{{ '/assets/css/style.css' | relative_url }}" rel="stylesheet" type="text/css">
   <link rel="icon" type="image/x-icon" href="{{ '/assets/img/favicon.ico' | relative_url}}">
   <link rel="canonical" href="{{ page.url | absoulte_url }}">
@@ -168,16 +169,6 @@
   </script>
 
 {%- if bg_image %}
-{%- if site.backgrournd.overlay %}
-  {%- assign dark_overlay = site.background.overlay %}
-  {%- assign light_overlay = site.background.overlay %}
-{%- endif %}
-{%- if site.background.dark.overlay %}
-  {%- assign dark_overlay = site.background.dark.overlay %}
-{%- endif %}
-{%- if site.background.light.overlay %}
-  {%- assign light_overlay = site.background.light.overlay %}
-{%- endif %}
 <style>
   body {
       position: relative;
@@ -187,26 +178,6 @@
       background-attachment: fixed;
       z-index: -10;
   }
-  /* Dark mode styles */
-  [data-color-mode='dark'] {
-      --overlay-color: {{ dark_overlay }};
-  }
-  @media(prefers-color-scheme: dark) {
-    [data-color-mode='auto'][data-dark-theme='dark_dimmed'] {
-      --overlay-color: {{ dark_overlay }};
-    }
-  }
-
-  /* Light mode styles */
-  [data-color-mode='light'] {
-      --overlay-color: {{ light_overlay }};
-  }
-
-  @media(prefers-color-scheme: light) {
-    [data-color-mode='auto'][data-light-theme='light'] {
-      --overlay-color: {{ light_overlay }};
-    }
-  }
 </style>
 {%- endif %}
 </head>

data/_layouts/default.html

@@ -40,11 +40,12 @@
 
 <body class="min-height-full">
     {%- if style == 'stacked' %}
-    <div class="container-lg p-responsive min-height-full">
-        <div class="d-flex flex-justify-end pt-2">
-            {%- include toggle.html %}
-        </div>
-        <div class="Profile text-center py-3 border-bottom">
+    <div class="container-lg min-height-full">
+
+        <div class="Profile text-center py-1">
+            <div class="d-flex flex-justify-end pt-2">
+                {%- include toggle.html %}
+            </div>
             {%- include masthead.html metadata=metadata %}
             {%- if site.repo_info %}
             <div class="my-2">
@@ -52,7 +53,7 @@
             </div>
             {%- endif %}
             {%- if site.social_media %}
-            <div class="my-2">
+            <div class="my-2 mx-2">
                 {%- include social.html %}
             </div>
             {%- endif %}
@@ -75,15 +76,15 @@
     </div>
     {%- elsif style == 'sidebar' %}
     <div class="container-xl d-lg-flex min-height-full">
-        <div class="Profile col-lg-4 border-gray-light px-4 py-6 text-center">
+        <div class="Profile col-lg-4 border-gray-light pt-6 text-center">
             {%- include masthead.html metadata=metadata %}
             {%- if site.repo_info %}
             <div class="my-2">
-                {% include mini-repo-info-card.html class="Box-row-link" %}
+                {% include mini-repo-info-card.html %}
             </div>
             {%- endif %}
             {%- if site.social_media %}
-            <div class="my-2">
+            <div class="my-2 mx-2">
                 {%- include social.html %}
             </div>
             {%- endif %}
@@ -118,7 +119,7 @@
                         {% octicon mark-github height:32 %}
                     </a>
                 </div>
-                <div class="Header-item Header-item--full">{{ name }}</div>
+                <div class="Header-item Header-link Header-item--full">{{ name }}</div>
                 {%- if site.social_media %}
                 <div class="Header-item hide-md hide-sm">
                     {%- include social.html %}

data/_sass/_highlight-syntax.scss

@@ -1,4 +1,4 @@
-.highlight  { width: 100%; overflow: auto; background-color: var(--color-canvas-inset) !important; padding: 8px; }
+.highlight  { overflow: auto; background-color: var(--color-canvas-inset) !important; padding: 8px; }
 .highlight .c { color: #999988; font-style: italic } /* Comment */
 .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
 .highlight .k { font-weight: bold } /* Keyword */
@@ -64,3 +64,33 @@
 .highlight .lineno {-webkit-user-select: none;-moz-user-select: none; -o-user-select: none;}
 .lineno::-moz-selection {background-color: transparent;} /* Mozilla specific */
 .lineno::selection {background-color: transparent;} /* Other major browsers */
+.lineno { opacity: 0.5;}
+
+.highlight table {
+    margin: inherit;
+}
+
+.highlight table tr {
+    background-color: inherit;
+    border-top: inherit;
+}
+
+.highlight table td {
+    padding: inherit;
+    border: inherit;
+}
+
+.highlight pre {
+    background-color: inherit !important;
+    border-radius: 0px !important;
+}
+
+.highlight code pre {
+    padding: 0px !important;
+    background-color: inherit;
+}
+
+.highlight code .gutter,
+.highlight code .rouge-gutter {
+    padding-right: 16px !important;
+}

data/assets/css/style.scss

@@ -1,14 +1,2 @@
 ---
 ---
-@import "jekyll-theme-profile";
-
-{%- if site.color %}
-{%- assign profile_color=site.color %}
-.Profile {
-    color: {{ profile_color }};
-}
-
-.Profile a {
-    color: {{ profile_color }};
-}
-{%- endif %}

data/assets/css/theme.scss

@@ -0,0 +1,89 @@
+---
+---
+{%- if site.background.overlay %}
+  {%- assign dark_overlay = site.background.overlay %}
+  {%- assign light_overlay = site.background.overlay %}
+{%- endif %}
+{%- if site.background.dark.overlay %}
+  {%- assign dark_overlay = site.background.dark.overlay %}
+{%- endif %}
+{%- if site.background.light.overlay %}
+  {%- assign light_overlay = site.background.light.overlay %}
+{%- endif %}
+
+{%- if dark_overlay %}
+/* Dark mode styles */
+[data-color-mode='dark'] {
+    --overlay-color: {{ dark_overlay }};
+}
+@media(prefers-color-scheme: dark) {
+[data-color-mode='auto'][data-dark-theme='dark_dimmed'] {
+    --overlay-color: {{ dark_overlay }};
+}
+}
+{%- endif %}
+
+{%- if light_overlay %}
+/* Light mode styles */
+[data-color-mode='light'] {
+    --overlay-color: {{ light_overlay }};
+}
+
+@media(prefers-color-scheme: light) {
+[data-color-mode='auto'][data-light-theme='light'] {
+    --overlay-color: {{ light_overlay }};
+}
+}
+{%- endif %}
+
+{%- if site.header.color %}
+
+{%- assign header_color=site.header.color %}
+.Header {
+    --color-header-bg: {{ header_color }};
+}
+/* Light mode styles */
+[data-color-mode='light'] {
+    --color-header-bg: {{ header_color }};
+}
+
+@media(prefers-color-scheme: light) {
+[data-color-mode='auto'][data-light-theme='light'] {
+    --color-header-bg: {{ header_color }};
+}
+}
+/* Dark mode styles */
+[data-color-mode='dark'] {
+    --color-header-bg: {{ header_color }};
+}
+@media(prefers-color-scheme: dark) {
+[data-color-mode='auto'][data-dark-theme='dark_dimmed'] {
+    --color-header-bg: {{ header_color }};
+}
+}
+{%- endif %}
+
+{%- if site.header.text %}
+.Header {
+    --color-header-logo: {{ site.header.text }};
+}
+{%- endif %}
+
+{%- if site.header.accent %}
+.Header {
+    --color-header-text: {{ site.header.accent }};
+}
+{%- endif %}
+
+:root{
+    --color-profile-text: var(--color-fg-default);
+    --color-profile-accent: var(--color-accent-fg);
+    --color-profile-bg: var(--color-canvas-default);
+}
+
+@import "jekyll-theme-profile";
+
+.Profile {
+    background-color: var(--color-profile-bg);
+    color: var(--color-profile-text);
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-profile
 version: !ruby/object:Gem::Version
-  version: 1.2.0
+  version: 1.3.0
 platform: ruby
 authors:
 - Allison Thackston
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-08-14 00:00:00.000000000 Z
+date: 2023-08-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -135,6 +135,7 @@ files:
 - _sass/jekyll-theme-profile.scss
 - assets/blog/index.html
 - assets/css/style.scss
+- assets/css/theme.scss
 - assets/img/favicon.ico
 homepage: https://www.althack.dev/jekyll-theme-profile
 licenses:
@@ -148,7 +149,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 2.7.0
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="