Giter Club home page Giter Club logo

texture's Introduction

texture

A configurable jekyll theme for simply beautiful blogs.

Demo: samarsault.com/texture

texture theme preview

Installation on Github Pages

Add this line to your site's _config.yml:

remote_theme: samarsault/texture

NOTE: If you are forking this repo, remove base_url: /texture in the _config.yml which is required to load the required website assets

Installation

Add this line to your Jekyll site's Gemfile:

gem "texture"

And add this line to your Jekyll site's _config.yml:

theme: texture

And then execute:

$ bundle

Or install it yourself as:

$ gem install texture

Usage

The "texture" key in _config.yml is used to customize the theme data.

texture:
  title: Adam Denisov
  tagline: Developer. Designer
  date_format: "%b %-d, %Y"

  social_links:
    twitter: thelehhman
    github:  thelehhman
    linkedIn: in/thelehhman # format: locale/username

Styling

Multiple header styles are supported using the "style" property under texture in _config.yml.

texture:
  style: [yellow|red|black|blue|green|purple]

For example, the blue style looks like this:

texture theme blue

Texture Picker

You can toggle the texture picker to show/experiment various textures on your site using the showPicker variable. Remember to make it false for production.

texture:
  showPicker: [false|true] # show the texture selector(development purposes)

Comments (Disqus)

Comments on posts can be enabled by specifying your disqus_shortname under texture in _config.yml. For example,

texture:
  disqus_shortname: games

Google Analytics

It can be enabled by specifying your analytics id under texture in _config.yml

texture:
  analytics_id: '< YOUR ID >'

Excerpts

Excerpts can be enabled by adding the following line to your _config.yml

show_excerpts: true

Toggle Navbar

texture:
  showNav: true

Navigation

After setting showNav to true navigation can be built by adding the following to your _config.yml

texture:
  navigation:
    - title: My Work
      url: "/my-work"
    - title: Resume
      url: "/resume"

Layouts

  • Home
  • Page
  • Post

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/samarsault/texture. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

Development

To set up your environment to develop this theme, run bundle install.

Your theme is setup just like a normal Jekyll site! To test your theme, run bundle exec jekyll serve and open your browser at http://localhost:4000. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.

When your theme is released, only the files in _layouts, _includes, _sass and assets tracked with Git will be bundled. To add a custom directory to your theme-gem, please edit the regexp in texture.gemspec accordingly.

Donation

If this project help you reduce time to develop, you can give me a cup of coffee :)

paypal

License

The theme is available as open source under the terms of the MIT License.

More Themes

plainwhite

texture's People

Contributors

4ndv avatar awareness481 avatar luoos avatar markusg avatar modestotech avatar ngpaladi avatar samarsault avatar timatlee avatar yijinlee avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

texture's Issues

Navbar is non-functional

Clicking any link on the navbar appends a # to the URL but does not take the user to a new page

Texture does not work with Jekyll 4.0

Hi,

It seems that Texture only works until Jekyll 3.7.
It fails with Jekyll 4.0

I get the error:

Fetching gem metadata from https://rubygems.org/...........
Fetching gem metadata from https://rubygems.org/.
Resolving dependencies...
Bundler could not find compatible versions for gem "jekyll":
  In Gemfile:
    jekyll (~> 4.0)

    texture (~> 0.3) was resolved to 0.3, which depends on
      jekyll (~> 3.7)

My Gemfile:

# frozen_string_literal: true

source "https://rubygems.org"

git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }

# gem "rails"

# Added at 2020-03-09 11:42:29 +0100 by baptistelebail:
gem "jekyll", "~> 4.0"
gem "texture", "~> 0.3"

Inline code snippets are rendered incorrectly

As pictured here, inline code snippets seem to be rendered to the left of their intended location.

Source Markdown of screenshot:


`shshare`, as the name suggests, is a shell script. It's written completely in bash and uses `maim` to capture screenshots and `ffmpeg` to capture screen recordings. `uploader.sh` is installed to the `/etc/shshare/` directory, but can be copied to `$XDG_CONFIG_HOME` and modified to the user's liking. By default, it uploads both screenshots and screen recordings to imgur.```

Links for the navigation panel missing

Thank you a lot for creating this beautiful theme! I am very new to Jekyll and Ruby since this is my first time trying to build my own blog, so I apologize if my question is naive.

I tried to turn on the navigation feature by setting showNav: true. Unfortunately, although the navigation panel is there, clicking it has no effect.

I thought the problem is in _includes/nav.html, where we have:

{%- if site.texture.showNav -%}
<div class="navbar">
	<ul>
		<a href="#"><li>Home</li></a>
		<a href="#"><li>About</li></a>
	</ul>
</div>
{%- endif -%}

I changed it to below and it works.

{%- if site.texture.showNav -%}
<div class="navbar">
	<ul>
		<a href="/#/"><li>Home</li></a>
		<a href="/about/"><li>About</li></a>
	</ul>
</div>
{%- endif -%}

Am I doing the right thing? Or there is actually a method to automatically create the links?

Thank you!

problem including image in page_header.html

Hi, first of of all thanks for the great theme! I really like the look and especially its customizability.

I have tried to add a .png image to the _includes/page_header.html so that it will be displayed on every one of the pages calling the layout: page front matter.

However, the image is just being displayed on the home page and not on the about nor the contact page (which I added). Both the about page and the contact page just show the alt-text that was specified in the page_header.html.

See the live website here.

I am now wondering why this is the case. Obviously the code seems to work, as the image is being displayed on home. However, logically any other page with the layout: page should display the image, too as {%- include page_header.html -%} is obviously included in the page.html.

Thanks in advance for any hints/recommendations!

Need help in altering/modying and understanding the theme

Hello fellow contributors! Thank you so much for coming up with a great theme.

I am new to this system and wanted to understand a few things. If this not the right forum to query here, please accept my apologies and guide me to the right one.

  • I want to know how I can replace the color background/texture of header with an image

  • To go about modifying the HTML layout in general

  • To give the creators credit as and when I take my page live

Also, please do let me know about the correct platform so that I can go there in future for queries pertaning to this.

Thanks.

Deprecation Warning: Using / for division outside of calc() is deprecated

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($max - $min, 1px) or calc(($max - $min) / 1px)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
28 │         font-size: calc(#{$min} + #{($max - $min)/1px} * ((100vw - 320px) / 960));
   │                                     ^^^^^^^^^^^^^^^^^
   ╵
    ../../../../texture-0.5/_sass/_begin.scss 28:31     fluidType()
    theme.scss 21:2                                     @import

How to use the theme

To deploy the theme on Github-pages, is it supposed to be used in the way:

remote_theme: thelehhman/texture

If yes, can you take a look at _config.yml at my repo... why it doesn't work?

Adding more Social Icons

Is it possible to add custom social icons to the theme?
This seems to have some weird content: CSS which is making the font work, and I can't figure out how to add another image.

Change social icon size & interval between icons

First of all, thanks for sharing awesome theme.
I want to increase size of social icons, and increase interval between icons on my homepage.
Could you tell me which options should I change to do that?

+) Tell me how to cite/refer your credit on my homepage.

[RFE] Add twitter feeds on the right side.

Since a lot of the the portion of the screen is empty on the right hand side, it would be good to have something like twitter feeds on the right hand side. What do you folks think?

Tags support?

Hi there, just started getting into this. sorry if this is the right place to post this - Does your theme support blog tags?

Navigation not working

After adding
showNav: true I am able to see Home and About tabs but the click event on them is not working.
Are we required to add extra configurations for that? Also can we please update the documentation on how to use navigation in the config file. I am not able to make that work as well.

add social icon ( mastodon )

Good morning,

First of all, congratulations on your work.

So, I would like to add the mastodon icon, but reviewing the information you have, I saw that the sources are from fontello, but I went to this page and I don't see this icon.

My question is if there is any possibility to update these fonts or if not, how could I add this icon or other icons that are not in the font package that is used.

Note that this modification should be made in the page_header.html page.

Thanks for everything.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.