OCram85/beautifulSA-jekyll
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

add support for internal or external css/js/googlefonts

Browse Source
This commit is contained in:
Dean Attali 2015-03-02 17:10:41 -08:00
parent d2965a16bd
commit e2f16fd06d
7 changed files with 84 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -3,6 +3,4 @@ TODO write instructions
known bug (problem on GitHub Pages part) - if you have a project page and want a custom 404 page, you must use a custom domain. See https://help.github.com/articles/custom-404-pages/. This means that if you have a regular User Page you can use the 404 page from this theme, but if it's a website for a specific repository, the 404 page will not be used. known bug (problem on GitHub Pages part) - if you have a project page and want a custom 404 page, you must use a custom domain. See https://help.github.com/articles/custom-404-pages/. This means that if you have a regular User Page you can use the 404 page from this theme, but if it's a website for a specific repository, the 404 page will not be used.
mention that avatar img + css + js have to be served locally, not from a URL
can also give googlefonts can also give googlefonts

19
_includes/footer-scripts.html
View File

@ -1,8 +1,19 @@
<script src="{{ site.baseurl }}/js/jquery-1.11.2.min.js"></script> {% if page.common-ext-js %}
<script src="{{ site.baseurl }}/js/bootstrap.min.js"></script> {% for js in page.common-ext-js %}
<script src="{{ js }}"></script>
{% endfor %}
{% endif %}
{% if include.full %} {% if page.common-js %}
<script src="{{ site.baseurl }}/js/main.js"></script> {% for js in page.common-js %}
<script src="{{ js | prepend: site.baseurl | replace: '//', '/' }}"></script>
{% endfor %}
{% endif %}
{% if page.ext-js %}
{% for js in page.ext-js %}
<script src="{{ js }}"></script>
{% endfor %}
{% endif %} {% endif %}
{% if page.js %} {% if page.js %}

40
_includes/head.html
View File

@ -8,23 +8,41 @@
<meta name="author" content="{{ site.author.name }}" /> <meta name="author" content="{{ site.author.name }}" />
<meta name="description" content="{{ site.description }}"> <meta name="description" content="{{ site.description }}">
<link rel="stylesheet" href="{{ site.baseurl }}/css/bootstrap.min.css" /> <link rel="alternate" type="application/rss+xml" title="{{ site.name }} - {{ site.description }}" href="{{ site.baseurl }}/feed.xml" />
<!-- I choose not to use the bootstrap theme css, I think it looks less appealing
<link rel="stylesheet" href="{{ site.baseurl }}/css/bootstrap-theme.min.css" /> --> {% if page.common-ext-css %}
{% for css in page.common-ext-css %}
<link rel="stylesheet" href="{{ css }}" />
{% endfor %}
{% endif %}
{% if include.full %} {% if page.common-css %}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" /> {% for css in page.common-css %}
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" /> <link rel="stylesheet" href="{{ css | prepend: site.baseurl | replace: '//', '/' }}" />
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" /> {% endfor %}
<link rel="stylesheet" href="{{ site.baseurl }}/css/main.css" /> {% endif %}
<link rel="alternate" type="application/rss+xml" title="{{ site.name }} - {{ site.description }}" href="{{ site.baseurl }}/feed.xml" />
{% else %} {% if page.common-googlefonts %}
<link rel="stylesheet" href="{{ site.baseurl }}/css/main-minimal.css" /> {% for font in page.common-googlefonts %}
<link rel="stylesheet" href="//fonts.googleapis.com/css?family={{ font }}" />
{% endfor %}
{% endif %} {% endif %}
{% if page.ext-css %}
{% for css in page.ext-css %}
<link rel="stylesheet" href="{{ css }}" />
{% endfor %}
{% endif %}
{% if page.css %} {% if page.css %}
{% for css in page.css %} {% for css in page.css %}
<link rel="stylesheet" href="{{ css | prepend: site.baseurl | replace: '//', '/' }}" /> <link rel="stylesheet" href="{{ css | prepend: site.baseurl | replace: '//', '/' }}" />
{% endfor %} {% endfor %}
{% endif %} {% endif %}
{% if page.googlefonts %}
{% for font in page.googlefonts %}
<link rel="stylesheet" href="//fonts.googleapis.com/css?family={{ font }}" />
{% endfor %}
{% endif %}
</head> </head>

19
_layouts/default.html
View File

@ -1,7 +1,22 @@
---
common-css:
- "/css/bootstrap.min.css"
- "/css/main.css"
common-ext-css:
- "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
common-googlefonts:
- "Lora:400,700,400italic,700italic"
- "Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800"
common-js:
- "/js/jquery-1.11.2.min.js"
- "/js/bootstrap.min.js"
- "/js/main.js"
---
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
{% include head.html full = true %} {% include head.html %}
<body> <body>
@ -13,7 +28,7 @@
{% include footer.html %} {% include footer.html %}
{% include footer-scripts.html full = true %} {% include footer-scripts.html %}
</body> </body>
</html> </html>

13
_layouts/minimal.html
View File

@ -1,7 +1,16 @@
---
common-css:
- "/css/bootstrap.min.css"
- "/css/main-minimal.css"
common-js:
- "/js/jquery-1.11.2.min.js"
- "/js/bootstrap.min.js"
---
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
{% include head.html full = false %} {% include head.html %}
<body> <body>
@ -11,7 +20,7 @@
{% include footer-minimal.html %} {% include footer-minimal.html %}
{% include footer-scripts.html full = false %} {% include footer-scripts.html %}
</body> </body>
</html> </html>

5
contact.md
View File

@ -2,6 +2,7 @@
layout: minimal layout: minimal
js: "/js/contact.js" js: "/js/contact.js"
css: "/css/contact.css" css: "/css/contact.css"
googlefonts: Lobster
--- ---
Just kidding, you can't contact me here. Just kidding, you can't contact me here.
@ -14,4 +15,6 @@ It's also an example of how you can easily add CSS or JavaScript files to a temp
<button type="button" class="btn btn-default" id="contact-btn"> <button type="button" class="btn btn-default" id="contact-btn">
Click me Click me
</button> </button>
<p id="googlefont-test">You can even use any <a href="http://www.google.com/fonts/">Google fonts</a> you'd like to be extra fancy, like this Lobster font</p>

8
css/contact.css
View File

@ -1,3 +1,11 @@
body {
padding-top: 30px;
}
#contact-div { #contact-div {
color: red; color: red;
}
#googlefont-test {
font-family: Lobster;
} }