Switch to YAMT to pretty up code snippets and more

Out with the manually hard-coded theme 😸
This commit is contained in:
R Tyler Croy 2020-06-21 15:39:47 -07:00
parent f75bb2a54a
commit d3cfc473f0
No known key found for this signature in database
GPG Key ID: E5C92681BEF6CEA2
52 changed files with 1285 additions and 199 deletions

View File

@ -7,4 +7,5 @@ gem 'jekyll'
gem "jekyll-tagging"
gem "jekyll-include-cache"
gem 'jekyll-paginate'
gem 'jekyll-seo-tag'
gem 'jekyll-watch'

View File

@ -34,6 +34,8 @@ GEM
jekyll-paginate (1.1.0)
jekyll-sass-converter (2.1.0)
sassc (> 2.0.1, < 3.0)
jekyll-seo-tag (2.6.1)
jekyll (>= 3.3, < 5.0)
jekyll-tagging (1.1.0)
nuggets
jekyll-watch (2.2.1)
@ -73,6 +75,7 @@ DEPENDENCIES
jekyll
jekyll-include-cache
jekyll-paginate
jekyll-seo-tag
jekyll-tagging
jekyll-watch
pygments.rb

View File

@ -1,4 +1,5 @@
name: 'rtyler'
title: 'rtyler'
description: 'a moderately technical blog'
tag_page_layout: tag_page
tag_page_dir: tag
@ -9,6 +10,7 @@ incremental: true
plugins:
- jekyll-paginate
- jekyll-include-cache
- jekyll-seo-tag
lsi: false
exclude:
@ -32,7 +34,8 @@ nav:
# Sass
sass:
style: :compressed
style: compressed
sourcemap: never
# Scopes
defaults:
@ -53,3 +56,23 @@ collections:
microblog:
output: true
permalink: /microblog/:year/:month/:slug/
kramdown:
input: GFM
syntax_highlighter: rouge
syntax_highlighter_opts:
css_class: 'highlight'
span:
line_numbers: false
block:
line_numbers: false
start_line: 1
social:
links:
- https://twitter.com/agentdero
- https://www.github.com/rtyler
twitter:
username: agentdero
card: summary

4
_data/pages.yml Normal file
View File

@ -0,0 +1,4 @@
pages:
- {name: 'About', url: 'about.html'}
- {name: 'Tags', url: 'categories'}
- {name: 'Feed', url: 'atom.xml'}

39
_data/settings.yml Normal file
View File

@ -0,0 +1,39 @@
#Google Analytics
analytics-id: #leave blank to not use Analytics
#Subtitle
subtitle:
active: true
text: a moderately technical blog
#Nav
nav:
pages:
active: true
social:
active: true
#Featured images in homepage
featured-img:
active: true
#Show categories at the end of posts
categories:
active: true
#Show date and read time under the post title
date-under-post:
active: true
#Use MathJAX
mathjax:
active: true
#Show related posts based on categories
related-posts:
active: false
title: "You May Also Enjoy"
#Disqus
disqus:
disqus_shortname:

11
_data/social.yml Normal file
View File

@ -0,0 +1,11 @@
# These are the socials supported by default. If you want to add one which isn't present, find the icon name on https://fontawesome.com/
# and add it's color in /_sass/social.scss. Brand defines Font Awesome's font type (fas is solid, fab is brand).
social:
- {icon: 'github', type: "brand", link: 'https://www.github.com/pandasekh'}
- {icon: 'twitter', type: "brand", link: 'https://twitter.com/PandaSekh'}
- {icon: 'linkedin', type: "brand", link: 'https://www.linkedin.com/in/alessio-franceschi/'}
- {icon: 'envelope', type: "solid", link: 'mailto:alessiofranceschi2@gmail.com'}
- {icon: 'rss', type: "solid", link: "/feed.xml"}

View File

@ -1,14 +1,9 @@
<script type="text/javascript">
<!--//--><![CDATA[//><!--
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." :
"http://www.");document.write(unescape("%3Cscript src='" + gaJsHost +
"google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
//--><!]]>
</script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
try{var pageTracker =
_gat._getTracker("UA-4216293-2");pageTracker._trackPageview();} catch(err)
{}
//--><!]]>
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.data.settings.analytics-id }}"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '{{ site.data.settings.analytics-id }}');
</script>

10
_includes/categories.html Normal file
View File

@ -0,0 +1,10 @@
<div class="categories">
<span>Tags:
{% assign categories = post.tags %}
{% for category in categories %}
<a href="{% capture url %}/tag/{{ category | slugify }}.html{% endcapture %}
{{ url | relative_url }}">{{category}}</a>
{% unless forloop.last %}&nbsp;{% endunless %}
{% endfor %}
</span>
</div>

19
_includes/disqus.html Normal file
View File

@ -0,0 +1,19 @@
<section class="disqus">
<p id="load-comments" onclick="loadDisqus()">Load Comments</p>
<div id="disqus_thread"></div>
<script id="loadDisqus" type="text/javascript">
var disqus_loaded = false;
var disqus_shortname = "{{ site.data.settings.disqus.disqus_shortname }}";
var disqus_identifier = "{{ page.url }}";
function loadDisqus() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.async = true;
e.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(e);
document.getElementById("load-comments").style.display = "none";
};
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments.</a></noscript>
</section>

3
_includes/footer.html Normal file
View File

@ -0,0 +1,3 @@
<footer class= "footer">
<p>Copyright© {{site.author.name}} 2020. All right reserved. Theme designed by <a href="https://alessiofranceschi.me/">Alessio Franceschi</a>.</p>
</footer>

4
_includes/gif.html Normal file
View File

@ -0,0 +1,4 @@
<video autoplay loop muted playsinline>
<source src="{{/assets/gif/{{include.file}}.webm | relative_url }}" type="video/webm">
<source src="{{/assets/gif/{{include.file}}.mp4 | relative_url }}" type="video/mp4">
</video>

31
_includes/head.html Normal file
View File

@ -0,0 +1,31 @@
<html lang="en-US">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
{% if page.title == "Home" %}
{{ site.title }} | {{ site.description }}
{% else %}
{{ page.title }} | {{ site.title }}
{% endif %}
</title>
<meta name="description" content="
{% if page.description %}{{ page.description }}
{% else %}{{ site.description }}
{% endif %}">
<link rel="icon" href="{{"assets/favicon.ico" | relative_url }}" type="image/x-icon">
<link rel="shortcut icon" href="{{"assets/favicon.ico" | relative_url }}" type="image/x-icon">
<!-- CSS -->
<link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
<link rel="stylesheet" href="{{ "/assets/css/syntax.css" | relative_url }}">
<!-- SEO Plugin -->
{% seo %}
<!-- Google Analytics -->
{% if site.data.settings.analytics-id%}
{%- include analytics.html -%}
{% endif %}
<!-- End Google Analytics -->

25
_includes/header.html Normal file
View File

@ -0,0 +1,25 @@
<header id="header">
<div id = site_title>
<a href="{{ "/" | absolute_url }}">
<h1>{{site.title}}</h1>
</a>
{% if site.data.settings.subtitle.active %}
<h2>
{{ site.data.settings.subtitle.text }}
</h2>
{% endif %}
</div>
<div id="subheader">
{% if site.data.settings.nav.pages.active %}
<nav class="pages">
{%- include pages.html -%}
</nav>
{% endif %}
{% if site.data.settings.nav.social.active %}
<nav class="social">
{% include social.html %}
</nav>
{% endif %}
</div>
</header>

3
_includes/pages.html Normal file
View File

@ -0,0 +1,3 @@
{% for item in site.data.pages.pages %}
<a href="{{ item.url | relative_url}}">{{ item.name }}</a>
{% endfor %}

View File

@ -0,0 +1,21 @@
{% if post.layout != post %}
{% assign words = post.content | strip_html | number_of_words %}
{% if words < 180 %}
Less than 1 minute read
{% elsif words < 360 %}
1 minute read
{% else %}
{{ words | divided_by:180 }} minute read
{% endif %}
{% endif %}
{% if post.layout == post %}
{% assign words = content | strip_html | number_of_words %}
{% if words < 180 %}
Less than 1 minute read
{% elsif words < 360 %}
1 minute read
{% else %}
{{ words | divided_by:180 }} minute read
{% endif %}
{% endif %}

View File

@ -0,0 +1,36 @@
<div class="related">
<h4>{{site.data.settings.related-posts.title}}</h4>
{% assign maxRelated = 4 %}
{% assign minCommonTags = 1 %}
{% assign maxRelatedCounter = 0 %}
{% for post in site.posts %}
{% assign sameTagCount = 0 %}
{% assign commonTags = '' %}
{% for category in post.categories %}
{% if post.url != page.url %}
{% if page.categories contains category %}
{% assign sameTagCount = sameTagCount | plus: 1 %}
{% capture tagmarkup %} <span class="label label-default">{{ category }}</span> {% endcapture %}
{% assign commonTags = commonTags | append: tagmarkup %}
{% endif %}
{% endif %}
{% endfor %}
{% if sameTagCount >= minCommonTags %}
<div class = "related-posts">
<h5><a href="{{ post.url | relative_url}}">• {{ post.title }}</a></h5>
</div>
{% assign maxRelatedCounter = maxRelatedCounter | plus: 1 %}
{% if maxRelatedCounter >= maxRelated %}
{% break %}
{% endif %}
{% endif %}
{% endfor %}
</div>

8
_includes/social.html Normal file
View File

@ -0,0 +1,8 @@
{% for item in site.data.social.social %}
{% if item.type == "brand"%}
<a href="{{ item.link }}" target="_blank" id="{{item.icon}}"><i class="fab fa-{{item.icon}}" aria-hidden="true"></i></a>
{% endif %}
{% if item.type == "solid"%}
<a href="{{ item.link }}" target="_blank" id="{{item.icon}}"><i class="fas fa-{{item.icon}}" aria-hidden="true"></i></a>
{% endif %}
{% endfor %}

15
_layouts/archive.html Normal file
View File

@ -0,0 +1,15 @@
---
layout: default
title: Archive
---
{% assign postsByDate =
site.posts | group_by_exp:"post", "post.date | date: '%B %Y'" %}
{% for year in postsByDate %}
<h2 class = "archive-date" id = "date-{{post.date | date: "%B %Y"}}">{{ year.name }}</h1>
<ul>
{% for post in year.items %}
<li><a class = "archive-link" href="{{ post.url | relative_url}}">{{ post.title }}</a></li>
{% endfor %}
</ul>
{% endfor %}

22
_layouts/categories.html Normal file
View File

@ -0,0 +1,22 @@
---
layout: default
permalink: /categories/
title: Categories
---
{% assign categories = site.tags | sort %}
{% for category in categories %}
<div class="archive-group">
{% capture category_name %}{{ category | first }}{% endcapture %}
<div id="#{{ category_name | slugize }}"></div>
<p></p>
<h2 class="archive-cat">{{ category_name }}</h2>
<a name="{{ category_name | slugize }}"></a>
<ul>
{% for post in site.tags[category_name] %}
<li><a class="archive-link" href="{{ post.url | relative_url}}">{{post.title}}</a></li>
{% endfor %}
</ul>
</div>
{% endfor %}

17
_layouts/contact.html Normal file
View File

@ -0,0 +1,17 @@
---
layout: default
title: Contact
---
<h2>Contact Form</h2>
<div class = "form">
<form name = "contact-form" action="{{"/contact-successful.html" | relative_url}}" method = "POST" data-netlify="true">
<input class = "form-input" type="text" name="name" id="name" placeholder="Name" required><br>
<input class = "form-input"type="mail" name="mail" id="mail" placeholder="Email" required><br>
<textarea class = "form-input" name="message" id="message" cols="30" rows="10" placeholder="Message" required></textarea><br>
<input class = "form-button" type="submit" value="Submit"><br>
</form>
</div>

View File

@ -1,67 +1,18 @@
{% if site.tags != "" %}
{% include collect-tags.html %}
{% endif %}
<!DOCTYPE html>
<html lang="en">
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% if page.title %}{{ page.title }}{% else %}{{ site.name }}{% endif %}</title>
<style type="text/css">
body {
margin: 0px;
font-family: 'proxima-nova', 'Helvetica', 'Avenir', 'Arial', sans-serif;
color: #4D4D4D;
background-color: white;
font-size: 1.1rem;
}
a:link, a:visited {
color: black;
}
a:hover {
color: red;
text-decoration: none;
}
@media(min-width: 1024px) {
.content {
max-width: 65%;
}
main {
margin-left: auto;
margin-right: auto;
}
footer {
margin-left: auto;
margin-right: auto;
margin-top: 2rem;
padding-top: 1rem;
border-top: 2px solid #e9e9e9;
max-width: 55%;
}
}
header.masthead {
float: right;
margin-right: 1rem;
}
.notice {
background: #ffffe0;
text-align: center;
margin-left: auto;
margin-right: auto;
padding: 1rem;
}
img {
max-width: 100%;
}
li {
margin: 0.5rem;
}
</style>
{% include head.html %}
</head>
<body>
<div class="container">
{{ content }}
{% include header.html %}
<div class="post-container">
{{ content }}
</div>
</div>
{%- include footer.html -%}
</body>
</html>

55
_layouts/home.html Normal file
View File

@ -0,0 +1,55 @@
---
layout: default
title: Home
---
{% for post in paginator.posts %}
<div class="post">
<h2 id = "post-title"><a href="{{ post.url | relative_url }}">{{ post.title }}</a></h2>
{% if site.data.settings.date-under-post.active %}
<div class = "post-info">
<span>
<i class="far fa-calendar" aria-hidden="true"></i>
<time datetime="{{ post.date | date_to_xmlschema }}" class="by-line">{{ post.date | date_to_string }}</time> - <i class="far fa-clock"></i>
{% include reading_time.html %}
</span>
{% if site.data.settings.categories.active %}
{% include categories.html %}
{% endif %}
</div>
{% endif %}
{% if site.data.settings.featured-img.active %}
<div class = "featured-img-container">
{% if post.image %}
<a href="{{ post.url | relative_url }}"><img src="{{ post.image | relative_url }}"/></a>
{% endif %}
{% if post.gif %}
{% include gif.html file = post.gif %}
{% endif %}
</div>
{% endif %}
<p>
{% if post.customexcerpt %}
{{post.customexcerpt | strip_html | truncatewords:50}}
{% else %}
{{ post.excerpt }}
{% endif %}
<span class = "continue-reading"><a href="{{ post.url | relative_url }}">Continue reading...</a></span>
</p>
</div>
{% endfor %}
<!-- Pagination links -->
<div class = "paginator">
{% if paginator.total_pages > 1 %}
{% if paginator.next_page %}
<a class = "older paginate-button" href="{{ paginator.next_page_path | relative_url }}">Older Posts</a>
{% endif %}
{% if paginator.previous_page %}
<a class = "newer paginate-button" href="{{ paginator.previous_page_path | relative_url }}">Newer Posts</a>
{% endif %}
{% endif %}
</div>

View File

@ -2,24 +2,4 @@
layout: default
---
<main class="content" role="main">
<article class="post">
<header class="post-header">
<a id="blog-logo" href="{{site.baseurl}}">
{% if site.logo %}
<img src="{{site.logo}}" alt="{{ site.name }}" />
{% else %}
<span class="blog-title">{{ site.name }}</span>
{%endif%}
</a>
</header>
<h1 class="post-title">{{ page.title }}</h1>
<section class="post-content">
{{content}}
</section>
</article>
</main>
{{ content }}

View File

@ -1,38 +1,46 @@
---
layout: default
---
<!doctype html>
<html>
<head>
{% include head.html %}
</head>
<style type="text/css">
.post-tags {
margin-bottom: 0.5rem;
}
</style>
<header class="masthead">
<h1 class="masthead-title--small">
<a href="{{ site.baseurl }}/">{{ site.name }}</a>
</h1>
</header>
<body>
<main class="content">
<div class="post">
<h1 class="post-title">{{ page.title }}</h1>
<div class="post-tags">
{% for tag in page.tags %}
<span class="post-tag">
<a href="/tag/{{ tag }}.html">{{ tag }}</a>
&nbsp;
</span>
{% endfor %}
</div>
<div class="post-date">
<em>
<time>{{ page.date | date_to_string }}</time>
</em>
</div>
{{ content }}
</div>
</main>
<div class="container">
{% include header.html %}
<footer>
<a href="https://github.com/rtyler/brokenco.de/edit/master/{{page.path}}">Improve this page</a>
</footer>
<div class="post-container">
<article id = "post">
<h2 id = "post-title">{{ page.title }}</h2>
{% if site.data.settings.date-under-post.active %}
<div class = "post-info">
<span>
<i class="far fa-calendar" aria-hidden="true"></i> <span>{{ page.date | date_to_string }}</span> - <i class="far fa-clock"></i> {% include reading_time.html %}
</span>
{% if site.data.settings.categories.active %}
{% assign post = page %}
{% include categories.html %}
{% endif %}
</div>
{% endif %}
{{ content }}
</article>
</div>
{% if site.data.settings.related-posts.active %}
{% include related-posts.html %}
{% endif %}
{% if site.data.settings.disqus.disqus_shortname %}
{% include disqus.html %}
{% endif %}
</div>
{%- include footer.html -%}
{% if site.data.settings.mathjax.active %}
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
{% endif %}
</body>
</html>

View File

@ -2,13 +2,15 @@
layout: default
---
<main class="content"
<h2>{{ page.tag }}</h2>
<div class="archive-group">
{% capture page.tag %}{{ category | first }}{% endcapture %}
<p></p>
<h2 class="archive-cat">{{ page.tag }}</h2>
<ul>
{% for post in site.tags[page.tag] %}
<li>
<a href="{{ post.url }}">{{ post.title }}</a> ({{ post.date | date_to_string }})
</li>
<li><a class="archive-link" href="{{ post.url | relative_url}}">{{post.title}}</a></li>
{% endfor %}
</ul>
</main>
</div>

10
_sass/archive.scss Normal file
View File

@ -0,0 +1,10 @@
.archive-link{
text-decoration: none;
color: black;
font-style: italic;
font-size: 1.5rem;
}
.archive-link:hover{
text-decoration: underline;
}

127
_sass/base.scss Normal file
View File

@ -0,0 +1,127 @@
//Colors
$base: #5d5d5d;
$light-grey: #ebebeb;
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html{
scroll-behavior: smooth;
}
.container {
margin-left: auto;
margin-right: auto;
width: 700px;
}
.task-list{
list-style: none;
}
//Disqus
#load-comments{
border: 1px solid #e0e0e0;
border-radius: 3px;
padding: 15px 35px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
text-align: center;
max-width: fit-content;
//Make text not selectable
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: $base;
}
#load-comments:hover{
cursor: pointer;
color: black;
background-color: $light-grey;
}
//End Disqus
//Alerts
.alert{
padding: 20px;
border-radius: 0 4px 4px 0;
color: #fff;
display: block;
font-size: larger;
font-family: 'Montserrat', sans-serif;
}
.y{
background-color: #f3b244;
border-left: 7px solid #dc900e;
}
.g{
background-color: #60c17d;
border-left: 7px solid #55ab6f;
}
.r{
background-color: #e45454;
border-left: 7px solid #cb2020;
}
//End Alerts
//Blockquote
blockquote {
border-left: .25em solid #dfe2e5;
color: #6a737d;
padding: 0 1em;
cite{
display: inline-block;
margin-top: 50px;
cite::before{
content: "- ";
margin-left: 10px;
}
}
}
//End Blockquote
//MathJAX
.MathJax_Display{
.MathJax {
font-size: 1.2rem;
}
}
//End MathJAX
//ToC
#markdown-toc::before {
content: "Contents";
font-size: 1.1rem;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
}
#markdown-toc {
border: 1px solid #aaa;
border-radius: 10px;
padding: 1.5em;
list-style: disc;
display: inline-block;
background-color: $light-grey;
line-height: 25px;
li{
a{
font-family: 'PT Serif', serif;
text-decoration: none;
}
a:hover{
font-style: italic;
}
}
ul{
list-style: disc;
}
}
//End ToC

40
_sass/contact.scss Normal file
View File

@ -0,0 +1,40 @@
.form{
.form-input{
font-family: 'PT Serif', serif;
font-size: 1rem;
width: 100%;
padding: 10px 0;
background: none;
border: none;
border-bottom: 1px solid #666;
color: #666;
outline: none;
transition: border-color .2s;
margin-top: 15px;
}
.form-button {
background: none;
text-transform: uppercase;
font-size: 1rem;
cursor: pointer;
outline: none;
margin-top: 10px;
border: black 1px solid;
padding: 10px;
border-radius: 10px;
font-family: 'PT Serif', serif;
}
.form-button:hover{
background-color: $light-grey;
}
.success{
a{
text-decoration:none;
border-bottom: 2px solid $light-grey;
box-shadow: inset 0 -4px 0 $light-grey;
color: inherit;
transition: background 0.1s cubic-bezier(.33,.66,.66,1);
}
}
}

24
_sass/footer.scss Normal file
View File

@ -0,0 +1,24 @@
.footer{
p{
text-align: center;
font-size: 0.85rem;
}
a{
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
a:visited{
color: $base;
}
}
.footer::before{
display: block;
content: '';
width: 5rem;
height: 1px;
margin: 23px auto;
background-color: #d5d5d5;
}

106
_sass/header.scss Normal file
View File

@ -0,0 +1,106 @@
// Colors for social icons
$github: #24292e;
$twitter: #1DA1F2;
$linkedin: #0e76a8;
$rss: #f26522;
$mail: #5d5c5d;
$instagram: #e1306c;
$facebook: #3b5998;
$messenger: #0084ff;
$youtube: #ff0000;
$whatsapp: #25d366;
$reddit: #ff4500;
header{
margin-left: auto;
margin-right: auto;
// Disabling to make the header links align with the left side of the post
// container
// width: 550px;
overflow: hidden;
#site_title{
text-align: center;
color: black;
a{
text-decoration: none;
}
h1{
margin-bottom: 0px;
}
h2{
margin-top: 0px;
font-style: oblique;
font-size: 1.2rem;
}
}
#subheader{
display: block;
margin-top: 15px;
.pages{
display: block;
float: left;
a:hover{
color: black;
}
a{
text-decoration: none;
color: $base;
font-family: 'PT Serif', serif;
margin-right: 3px;
font-size: 1.05rem;
}
}
.social{
display: block;
float: right;
i{
margin-right: 3px;
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}
a{
color: $base;
}
i{
font-size: 1.1rem;
}
#github:hover{
color: $github;
}
#twitter:hover{
color: $twitter;
}
#linkedin:hover{
color: $linkedin;
}
#rss:hover{
color: $rss;
}
#envelope:hover{
color: $mail;
}
#instagram:hover{
color: $instagram;
}
#facebook:hover{
color: $facebook;
}
#messenger:hover{
color: $messenger;
}
#youtube:hover{
color: $youtube;
}
#whatsapp:hover{
color: $whatsapp;
}
#reddit:hover{
color: $reddit;
}
}
}
}

39
_sass/home.scss Normal file
View File

@ -0,0 +1,39 @@
//Mixins
@mixin border($amount){
-webkit-border-radius: $amount;
-moz-border-radius: $amount;
-khtml-border-radius: $amount;
border-radius: $amount;
}
.featured-img-container{
margin-block-start: 1em;
margin-block-end: 1em;
img{
max-width: 100%;
height: auto;
max-height: 450px;
@include border(7px);
}
}
.continue-reading{
a{
color: $base;
text-decoration: none;
font-style: italic;
font-size: 0.96rem;
}
a:hover{
color: black;
}
}
.post-info{
font-size: 1rem;
color: $base;
border-bottom: 1px solid #c6c4c4;
padding-bottom: 3px;
font-family: 'PT Serif', serif;
}

51
_sass/mobile.scss Normal file
View File

@ -0,0 +1,51 @@
@media (max-width: 768px){
html{
overflow-y: auto;
}
.container {
width: 80vw;
}
#header{
width: 80vw;
#subheader{
display: flex;
flex-flow: column wrap;
align-items: center;
.pages{
margin-top: 12px;
order: 2;
text-align: center;
a{
font-size: 1.15rem;
}
}
.social{
order: 1;
i{
font-size: 1.3rem;
}
}
}
}
#post-title{
text-align: center;
}
p{
font-size: 1.2rem;
}
.post-info{
text-align: center;
}
::-webkit-scrollbar {
height: 3px;
}
div .highlight{
padding-left: 8px;
padding-right: 0px;
}
pre .highlight{
padding-left: 8px;
padding-right: 0px;
}
}

36
_sass/paginator.scss Normal file
View File

@ -0,0 +1,36 @@
.paginator{
display: flex;
margin-left: auto;
margin-right: auto;
justify-content: space-around;
.older{
text-align: left;
-webkit-box-flex: 1;
}
.newer{
text-align: right;
-webkit-box-flex: 1;
}
a{
text-decoration: none;
color: $base;
}
a:hover{
color: black;
}
.paginate-button{
border: 1px solid #e0e0e0;
border-radius: 3px;
padding: 15px 35px;
display: inline-block;
font-size: 16px;
}
.paginate-button:hover{
background-color: $light-grey;
}
}

78
_sass/post.scss Normal file
View File

@ -0,0 +1,78 @@
li.post{
display: block;
padding-top: 1rem;
}
.post{
padding-bottom: 1rem;
}
img{
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 15px;
max-width: 100%;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-khtml-border-radius: 7px;
border-radius: 7px;
}
.post-container{
p, li{
a{
text-decoration:none;
border-bottom: 2px solid $light-grey;
box-shadow: inset 0 -4px 0 $light-grey;
color: inherit;
transition: background 0.1s cubic-bezier(.33,.66,.66,1);
}
a:visited{
text-decoration:none;
border-bottom: 2px solid $light-grey;
box-shadow: inset 0 -4px 0 $light-grey;
color: inherit;
transition: background 0.1s cubic-bezier(.33,.66,.66,1);
}
a:hover{
background: $light-grey;
}
}
}
.categories{
p{
display: inline-block;
}
a{
text-decoration:none;
border-bottom: 2px solid $light-grey;
box-shadow: inset 0 -4px 0 $light-grey;
color: inherit;
transition: background 0.1s cubic-bezier(.33,.66,.66,1);
}
a:visited{
text-decoration:none;
border-bottom: 2px solid $light-grey;
box-shadow: inset 0 -4px 0 $light-grey;
color: inherit;
transition: background 0.1s cubic-bezier(.33,.66,.66,1);
}
a:hover{
background: $light-grey;
}
}
article::after{
display: block;
content: '';
width: 5rem;
height: 1px;
margin: 30px auto;
background-color: #d5d5d5;
}

22
_sass/related-posts.scss Normal file
View File

@ -0,0 +1,22 @@
.related{
h4{
font-style: italic;
text-decoration: underline;
}
h5{
margin-top: 0px;
text-align: left;
font-size: 1rem;
}
.related-posts{
opacity: 0.8;
margin-right: 25px;
}
.related-posts:hover{
opacity: 1;
font-style: italic;
}
padding-top: 10px;
padding-bottom: 15px;
margin:0 auto;
}

17
_sass/scrollbar.scss Normal file
View File

@ -0,0 +1,17 @@
::-webkit-scrollbar {
width: 7px;
height: 7px;
border: 1px solid #d5d5d5;
padding-top: 5px;
border-radius: 30px;
}
::-webkit-scrollbar-track {
border-radius: 30px;
background: #eeeeee;
}
::-webkit-scrollbar-thumb {
border-radius: 30px;
background: #b0b0b0;
}

41
_sass/typography.scss Normal file
View File

@ -0,0 +1,41 @@
h1, h2, h3, h4, h5, h6{
font-family: 'Montserrat', sans-serif;
margin-bottom: 10px;
text-decoration: none;
color: black;
a{
text-decoration: none;
color: black;
font-family: 'Montserrat', sans-serif;
}
}
p, ul, ol{
font-family: 'PT Serif', serif;
li{
font-family: 'PT Serif', serif;
font-size: 1.15rem;
}
}
h2{
margin-bottom: 0px;
}
h3{
font-size: 1.4rem;
}
h4{
font-size: 1.3rem;
}
h5{
font-size: 1.2rem;
}
p{
font-size: 1.15rem;
}
a{
font-family: 'PT Serif', serif;
}

4
assets/css/main.scss Normal file
View File

@ -0,0 +1,4 @@
---
---
@import "base", "typography", "header", "post", "home", "footer", "paginator", "archive", "scrollbar", "contact", "related-posts", "mobile";

258
assets/css/syntax.scss Normal file
View File

@ -0,0 +1,258 @@
---
---
/* These two lines of CSS can't be used together, as they will break some elements. Uncomment the one you want to use and comment or delete the other one.
white-space: pre-wrap - returns on a new line every word outside of the code block. No horizontal scrollbar. This breaks the lines of code, if you show them. https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
overflow-x: auto - The lines of code remain exactly the same as you typed. In case of overflow, it adds an horizontal scrollbar. This works with lines of code. https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x
*/
pre{
/* white-space: pre-wrap; */
overflow-x: auto;
}
.highlight{
font-size: 16px;
border-radius: 5px;
padding-left: 10px;
padding-right: 10px;
padding-top: 1px;
padding-bottom: 1px;
}
pre.lineo{
color: white;
}
.highlight table td { padding: 5px; }
.highlight table pre { margin: 0; }
.highlight .c, .highlight .ch, .highlight .cd, .highlight .cpf {
color: #75715e;
font-style: italic;
}
.highlight .cm {
color: #75715e;
font-style: italic;
}
.highlight .c1 {
color: #75715e;
font-style: italic;
}
.highlight .cp {
color: #75715e;
font-weight: bold;
}
.highlight .cs {
color: #75715e;
font-weight: bold;
font-style: italic;
}
.highlight .err {
color: #960050;
background-color: #1e0010;
}
.highlight .gi {
color: #ffffff;
background-color: #324932;
}
.highlight .gd {
color: #ffffff;
background-color: #493131;
}
.highlight .ge {
color: #ffffff;
font-style: italic;
}
.highlight .gr {
color: #aa0000;
}
.highlight .gt {
color: #aa0000;
}
.highlight .gh {
color: #999999;
}
.highlight .go {
color: #888888;
}
.highlight .gp {
color: #555555;
}
.highlight .gs {
font-weight: bold;
}
.highlight .gu {
color: #aaaaaa;
}
.highlight .k, .highlight .kv {
color: #66d9ef;
font-weight: bold;
}
.highlight .kc {
color: #66d9ef;
font-weight: bold;
}
.highlight .kd {
color: #66d9ef;
font-weight: bold;
}
.highlight .kp {
color: #66d9ef;
font-weight: bold;
}
.highlight .kr {
color: #66d9ef;
font-weight: bold;
}
.highlight .kt {
color: #66d9ef;
font-weight: bold;
}
.highlight .kn {
color: #f92672;
font-weight: bold;
}
.highlight .ow {
color: #f92672;
font-weight: bold;
}
.highlight .o {
color: #f92672;
font-weight: bold;
}
.highlight .mf {
color: #ae81ff;
}
.highlight .mh {
color: #ae81ff;
}
.highlight .il {
color: #ae81ff;
}
.highlight .mi {
color: #ae81ff;
}
.highlight .mo {
color: #ae81ff;
}
.highlight .m, .highlight .mb, .highlight .mx {
color: #ae81ff;
}
.highlight .se {
color: #ae81ff;
}
.highlight .sb {
color: #e6db74;
}
.highlight .sc {
color: #e6db74;
}
.highlight .sd {
color: #e6db74;
}
.highlight .s2 {
color: #e6db74;
}
.highlight .sh {
color: #e6db74;
}
.highlight .si {
color: #e6db74;
}
.highlight .sx {
color: #e6db74;
}
.highlight .sr {
color: #e6db74;
}
.highlight .s1 {
color: #e6db74;
}
.highlight .ss {
color: #e6db74;
}
.highlight .s, .highlight .sa, .highlight .dl {
color: #e6db74;
}
.highlight .na {
color: #a6e22e;
}
.highlight .nc {
color: #a6e22e;
font-weight: bold;
}
.highlight .nd {
color: #a6e22e;
font-weight: bold;
}
.highlight .ne {
color: #a6e22e;
font-weight: bold;
}
.highlight .nf, .highlight .fm {
color: #a6e22e;