Compare commits
7 Commits
e906cf0c1f
...
ca1577553d
| Author | SHA1 | Date |
|---|---|---|
 Robert McGovern
|
ca1577553d | |
|
Robert McGovern
|
c970213cbb | |
|
Robert McGovern
|
27b514e9bd | |
|
Robert McGovern
|
61809329ec | |
|
Robert McGovern
|
aaf47fe6d7 | |
|
Robert McGovern
|
d4978ee0f1 | |
|
Robert McGovern
|
bf006151c9 |
18
.eleventy.js
18
.eleventy.js
|
|
@ -105,8 +105,8 @@ module.exports = function (eleventyConfig) {
|
|||
collection.getFilteredByGlob("./src/_pages/**/*")
|
||||
);
|
||||
|
||||
eleventyConfig.addCollection("posts", (collection) =>
|
||||
collection
|
||||
eleventyConfig.addCollection("posts", (collection) => {
|
||||
availablePages = collection
|
||||
.getFilteredByGlob("./src/_posts/**/*")
|
||||
.filter(
|
||||
(item) => item.data.draft !== true && item.date <= new Date()
|
||||
|
|
@ -118,8 +118,10 @@ module.exports = function (eleventyConfig) {
|
|||
prev: all[i + 1],
|
||||
};
|
||||
return cur;
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
return availablePages;
|
||||
});
|
||||
|
||||
eleventyConfig.addCollection("projects", (collection) =>
|
||||
collection
|
||||
|
|
@ -259,7 +261,11 @@ module.exports = function (eleventyConfig) {
|
|||
eleventyConfig.addPassthroughCopy("src/assets");
|
||||
// eleventyConfig.addPassthroughCopy({ "src/_sass": "assets/css" });
|
||||
|
||||
eleventyConfig.addShortcode("post_url", (collection, slug) => {
|
||||
let availablePages = [];
|
||||
|
||||
eleventyConfig.addShortcode("post_url", (slug) => {
|
||||
let collection = availablePages;
|
||||
|
||||
try {
|
||||
if (collection.length < 1) {
|
||||
throw "Collection appears to be empty";
|
||||
|
|
@ -279,7 +285,7 @@ module.exports = function (eleventyConfig) {
|
|||
}
|
||||
} catch (e) {
|
||||
console.error(
|
||||
`RMCG:An error occured while searching for the url to ${slug}. Details:`,
|
||||
`RMCG:An error occurred while searching for the url to ${slug}. Details:`,
|
||||
e
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,194 +0,0 @@
|
|||
---
|
||||
title: What happens when I finish a Frontend Mentor Challenge
|
||||
tags: [webdev, site, frontendmentor]
|
||||
category: [programming, webdev]
|
||||
eleventyExcludeFromCollections: true
|
||||
---
|
||||
|
||||
I've been doing challenges from [Frontend Mentor](https://frontendmentor.io) as a means to practice frontend web development. Specifically working with plain HTML, CSS and JavaScript.
|
||||
|
||||
Rather than just take the simple route of a Git repo per challenge, I put them all in a single repo that is pushed to two[^1] servers ([Github](https://github.com/tarasis/tarasis.github.io) and a [Gitea](https://git.tarasis.net/tarasis/tarasis.github.io) instance).
|
||||
|
||||
The repo is actually a website built with [11ty](https://www.11ty.dev) and [Nunjucks](https://mozilla.github.io/nunjucks/) for templating. The challenges, and other pages I build are in the **projects** directory. They are simply copied over to **www* during the build.
|
||||
|
||||
When I do a `git push all`, on my server it runs a script that does the 11ty build. On Github I use a **Github Action**[^2] which builds the site and then a separate action that deploys the page. Vercel watches the main branch on Github for updates and does a similar build action and deployment.
|
||||
|
||||
That is then deployed to three different places: [Github Pages](https://tarasis.github.io), [Vercel](https://tarasis.vercel.app), and my own site at [rmcg.dev](https://rmcg.dev).
|
||||
|
||||
## Digging a little deeper
|
||||
|
||||
The front page of the deployed site acts as a gateway to all of the challenges, for instance this is the newbie section for Frontend Mentor challenges:
|
||||
|
||||
|
||||
|
||||
Each section is generated from a json file I created, where I have the service name, location of an svg file, alt text for it, the difficulty level, then there is an array of challenges in that difficulty level.
|
||||
|
||||
```json
|
||||
"services": [
|
||||
{
|
||||
"name": "Frontend Mentor",
|
||||
"svgSource": "/svgs/frontendmentor.svg",
|
||||
"svgAltText": "Frontend Mentor Logo",
|
||||
"description": "Collection of challenges I completed for Frontend Mentor",
|
||||
"cssClass": "",
|
||||
"difficulty": [
|
||||
{
|
||||
"title": "Junior",
|
||||
"cssClass": "frontEndMentorChallenges",
|
||||
"challenges": [
|
||||
{
|
||||
"title": "Advice Generator App",
|
||||
"url": "/FrontendMentor/junior/advice-generator-app/",
|
||||
"description": "",
|
||||
"techUsed": [
|
||||
"html5",
|
||||
"css3",
|
||||
"js"
|
||||
],
|
||||
"screenshotURL": "/FrontendMentor/junior/advice-generator-app/screenshots/mobile.png",
|
||||
"screenshotAltText": "Advice Generator App"
|
||||
}
|
||||
]
|
||||
},
|
||||
```
|
||||
|
||||
When the 11ty build occurs, it takes two nunjucks snippets then first takes the service section and fills out the details:
|
||||
|
||||
{% raw %}
|
||||
```liquid
|
||||
{% for service in webprojects.services %}
|
||||
<div class="projectsDiv {{service.cssClass}}">
|
||||
<div class="alignedHeader">
|
||||
<h2 class="projectsSection__title">{{service.name}}</h2>
|
||||
{% if service.svgSource%}
|
||||
<img src="{{service.svgSource}}" alt="{{service.svgAltText}}"/>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if service.description%}
|
||||
<p>{{service.description}}</p>
|
||||
{% endif %}
|
||||
|
||||
{% for difficultyLevel in service.difficulty %}
|
||||
{% if difficultyLevel.challenges | length %}
|
||||
<div class="{{difficultyLevel.cssClass}}">
|
||||
{% if difficultyLevel.title%}
|
||||
<h3>{{difficultyLevel.title}} Challenges</h3>
|
||||
{% endif %}
|
||||
{% if difficultyLevel.description%}
|
||||
<p>{{difficultyLevel.description}}</p>
|
||||
{% endif %}
|
||||
<div class="projects-grid">
|
||||
{% for challenge in difficultyLevel.challenges %}
|
||||
{% set projectContent = challenge %}
|
||||
{% include "components/project.njk" %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
```
|
||||
{% endraw %}
|
||||
|
||||
If you note the `div` with class `projects-grid`, this is where the second nunjucks snippet occurs. It loops through all of the challenges in the json array represented by `difficultyLevel.challenges`.
|
||||
|
||||
Basically I pass in the challenge to the snippet below, and use the contents to fill out the a card with a screenshot of the finished build, a short description, and shields for HTML/CSS and if used JavaScript. When I get to later challenges I'll add in 11ty, Vue or whatever. (I'll probably simplify the code too so it grabs the tech svg based on the name, rather than having if checks ... we'll see.)
|
||||
|
||||
{% raw %}
|
||||
```liquid
|
||||
{# {% set projectPrefix = project %} #}
|
||||
|
||||
{% if projectContent %}
|
||||
<div class="project-card stacked">
|
||||
<a href="{{projectContent.url}}">
|
||||
<img loading="lazy" class="card__img" src="{{projectContent.screenshotURL}}"
|
||||
alt="{{projectContent.screenshotAltText}}"/>
|
||||
</a>
|
||||
<div class="card__content">
|
||||
<h3 class="card__title">
|
||||
{{projectContent.title}}
|
||||
</h3>
|
||||
{% if projectContent.description | length %}
|
||||
<p class="card__description">
|
||||
{{projectContent.description}}
|
||||
</p>
|
||||
{% endif %}
|
||||
<ul class="card__techUsed">
|
||||
{% for tech in projectContent.techUsed %}
|
||||
{% if tech === "html5" %}
|
||||
<li>
|
||||
<img src="/svgs/html5.svg" alt="HTML5"/>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if tech === "css3" %}
|
||||
<li>
|
||||
<img src="/svgs/css3.svg" alt="CSS3"/>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if tech === "js" %}
|
||||
<li>
|
||||
<img src="/svgs/javascript.svg" alt="JavaScript"/>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
```
|
||||
{% endraw %}
|
||||
|
||||
The finished build is then copied and published.
|
||||
|
||||
## Improvements ...
|
||||
|
||||
There are improvements I will make at some point, specifically adding optimisation of the images I use. There is little point is downloading a 1440x800px image for the challenge preview when only a small portion of it is shown. I am aware that during the build process you can have 11ty generate more web friendly images at differing sizes.
|
||||
|
||||
## Final thoughts
|
||||
|
||||
First if you want to know more about whats going on, please do ask I'll do my best to answer. Otherwise I've found 11ty incredibly useful for this purpose, and easy to use. So much so that my intent was/is to move the blog from Jekyll to 11ty ... I just haven't gotten to it yet and because I like the Minimal Mistakes theme I use here.
|
||||
|
||||
Having a static site where I can quickly add a challenge to the front page without having to repeat html myself is just a such a relief. Especially as the file gets longer and longer :) At this point in time I've finished 17 challenges for Frontend Mentor with 75 ish more to go. There's 1 for Dev Challenges, and 5 for FreeCodeCamp.
|
||||
|
||||
**NOTE** ... There are other project directories that aren't listed on the front page. You can see the code in the projects directory on Github / my gitea instance, and live under [others](https://rmcg.dev/others/). They are things I've done based of Youtube videos or other videos.
|
||||
|
||||
[^1]: Because I like redundancy when I can, and I want control of my code.
|
||||
|
||||
[^2]: The build action I use ...
|
||||
|
||||
```
|
||||
name: Build Eleventy
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
strategy:
|
||||
matrix:
|
||||
node-version: [17.x]
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
|
||||
- name: Use Node.js ${{ matrix.node-version }}
|
||||
uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: ${{ matrix.node-version }}
|
||||
|
||||
- name: Install dependencies & build
|
||||
run: |
|
||||
npm ci
|
||||
npm run build
|
||||
|
||||
- name: Deploy
|
||||
uses: peaceiris/actions-gh-pages@v3.7.3
|
||||
with:
|
||||
publish_dir: ./www
|
||||
github_token: ${{ secrets.GITHUB_TOKEN }}
|
||||
```
|
||||
|
|
@ -179,15 +179,33 @@ $(document).ready(function() {
|
|||
}
|
||||
```
|
||||
|
||||
<p>notice</p>{: .notice}
|
||||
<p>primary</p>{: .notice--primary}
|
||||
<p>info</p>{: .notice--info}
|
||||
<p>warning</p>{: .notice--warning}
|
||||
<p>success</p>{: .notice--success}
|
||||
<p>danger</p>{: .notice--danger}
|
||||
notice
|
||||
{: .notice}
|
||||
|
||||
primary
|
||||
{: .notice--primary}
|
||||
|
||||
info
|
||||
{: .notice--info}
|
||||
|
||||
warning
|
||||
{: .notice--warning}
|
||||
|
||||
success
|
||||
{: .notice--success}
|
||||
|
||||
danger
|
||||
{: .notice--danger}
|
||||
|
||||
TIP: Unless you are wed to the theme, don't try porting it. Really. Headaches await. 🤯
|
||||
{: .notice--warning}
|
||||
|
||||
**success**
|
||||
{: .notice--success}
|
||||
|
||||
|
||||
<div class="notice--success" markdown="1">
|
||||
# Headline for the Notice
|
||||
<h3> Headline for the Notice</h3>
|
||||
<br>
|
||||
Text for the notice
|
||||
</div>
|
||||
|
|
@ -23,7 +23,7 @@ gallery:
|
|||
title: DevOps Roadmap
|
||||
date: 2020-04-21 00:44:00 +01:00
|
||||
---
|
||||
I mentioned in the [goals post]({% post_url collections.posts, "goals" %}), one of the things I am aiming to do is to start learning web development.
|
||||
I mentioned in the [goals post]({% post_url "goals" %}), one of the things I am aiming to do is to start learning web development.
|
||||
|
||||
I was well aware that what falls under the banner of web development is massive, I just hadn't realised quite how large it was.
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ After numerous hours / days of hacking (much more than I care to admit), I have
|
|||
TIP: Unless you are wed to the theme, don't try porting it. Really. Headaches await. 🤯
|
||||
{: .notice--warning}
|
||||
|
||||
There was a surprising amount of hacking needed to get the `liquid` calls to work properly. The main issue is that main of the required variables don't contain the data expected by `Minimal Mistakes`. So this mean debugging to find what is where. For instance the `post` variable doesn't contain a posts `title`, that is usually a global variable. (Same with many others) HOWEVER, there are instances where the `title` might actually be in a passed in varaible at `include.aPost.data.title`, or `post.data.title` for the RSS feed file.
|
||||
There was a surprising amount of hacking needed to get the `liquid` calls to work properly. The main issue is that main of the required variables don't contain the data expected by `Minimal Mistakes`. So this mean debugging to find what is where. For instance the `post` variable doesn't contain a posts `title`, that is usually a global variable. (Same with many others) HOWEVER, there are instances where the `title` might actually be in a passed in variable at `include.aPost.data.title`, or `post.data.title` for the RSS feed file.
|
||||
|
||||
Not everything is in place; specifically site search is currently disabled as is the archive of posts by year, and finally comments aren't working though in theory they should (they had also stopped working on the Jekyll version of the site). All will be returned at some point.
|
||||
|
||||
|
|
@ -21,7 +21,7 @@ Also todo: add mappings from old urls to new. Most are the same, but a handful h
|
|||
|
||||
Before I finish I should give some thanks / hat tips so various blog posts / git hub repos for bits I've cribbed.
|
||||
|
||||
First and foremost is a blog / repo by [Quinn Dombrowski](https://quinndombrowski.com/blog/2022/02/10/eleventy-and-me/). Her post was what led me to realise that I could actually get `Minimal Mistakes theme` running on 11ty. I spent a little time with her blog [repo](https://github.com/quinnanya/quinnanya.github.io), initally mostly going through the steps to get it to build with 11ty 1.0.x or 2.0.0beta1.
|
||||
First and foremost is a blog / repo by [Quinn Dombrowski](https://quinndombrowski.com/blog/2022/02/10/eleventy-and-me/). Her post was what led me to realise that I could actually get `Minimal Mistakes theme` running on 11ty. I spent a little time with her blog [repo](https://github.com/quinnanya/quinnanya.github.io), initially mostly going through the steps to get it to build with 11ty 1.0.x or 2.0.0beta1.
|
||||
|
||||
Once I got it building, I started trying to port `Minimal Mistakes` myself, only cribbing bits out of `.eleventy.js`. I figured the best way to understand how it was to work with `11ty` was to do the changes to the templates myself. Although in the end I did wholesale rip Quinn's code for pagination on the front page because I couldn't get the original `paginatior` code to work.
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
---
|
||||
title: Border Radius on an Outline in CSS
|
||||
tags: [webdev, css]
|
||||
category: [css, webdev]
|
||||
date: 2023-02-20
|
||||
excerpt: A little note about using border-radius with an outline.
|
||||
layout: single
|
||||
---
|
||||
|
||||
Yesterday I was fiddling with the site adding a button to [copy code blocks]({% post_url "copy-code-blocks" %}) to the clipboard. While I was doing that I figured I'd also add a border to both proper code blocks and to inline code blocks. Something to make them stand out a little more.
|
||||
|
||||
Initially I considered using an `outline`, rather than `border`. So that it didn't take up pixels as the site uses `box-sizing: border-box`. However, I discovered that `outline` doesn't allow you to control the radius. There was no `outline-radius` like there is `border-radius`.
|
||||
|
||||
After a bit of searching I came across [this](https://stackoverflow.com/questions/5394116/outline-radius) post, which has some solutions and workarounds. Someone noted that there was a Firefox only option: `-moz-outline-radius`. A later [answer](https://stackoverflow.com/a/66661654) noted that as of April 2021 in Firefox you could use `border-radius` but it was the only browser that supported it.
|
||||
|
||||
So I dutifully tried it out, and yes it did work.
|
||||
|
||||
|
||||
|
||||
But then I noticed that it was also working in Safari Technology Preview Release 163! Unfortunately Safari 16.3 (Desktop) doesn't support it.
|
||||
|
||||
One possible bug I noticed while experimenting was that Safari TP would ignore the outline style `dashed` if `border-radius` was set. Safari TP would instead make the outline solid.
|
||||
|
|
@ -5,231 +5,7 @@ permalink: /assets/css/tocompile.scss
|
|||
|
||||
@charset "utf-8";
|
||||
|
||||
.author__urls.social-icons .svg-inline--fa,
|
||||
.page__footer-follow .social-icons .svg-inline--fa {
|
||||
color: rgba(102, 235, 97, 0.829) !important;
|
||||
}
|
||||
|
||||
/* Colors */
|
||||
$background-color: #141010 !default;
|
||||
$text-color: #fff6fbb9 !default;
|
||||
$primary-color: #ff00ff !default;
|
||||
$link-color: $primary-color !default;
|
||||
$link-color-hover: mix(#fff, $link-color, 25%) !default;
|
||||
$link-color-visited: mix(#000, $link-color, 25%) !default;
|
||||
$code-background-color: mix(rgb(43, 39, 39), $background-color, 15%) !default;
|
||||
$code-background-color-dark: mix(rgb(59, 54, 54), $background-color, 20%) !default;
|
||||
|
||||
/* Notices */
|
||||
|
||||
$success-color: #3fa63f !default;
|
||||
$warning-color: #d67f05 !default;
|
||||
$danger-color: #ff0000 !default;
|
||||
$info-color: #3b9cba !default;
|
||||
|
||||
// section not needed under 11ty
|
||||
/* neon syntax highlighting (base16) */
|
||||
$base00: #1a191a;
|
||||
$base01: #e0e0e0;
|
||||
$base02: #b4a6a6;
|
||||
$base03: #928e8e;
|
||||
$base04: #ccc2c2;
|
||||
$base05: #bd6262;
|
||||
$base06: #a74040;
|
||||
$base07: #701b1b;
|
||||
$base08: #ff0086;
|
||||
$base09: #fd8900;
|
||||
$base0a: #aba800;
|
||||
$base0b: #00c918;
|
||||
$base0c: #1faaaa;
|
||||
$base0d: #3777e6;
|
||||
$base0e: #ad00a1;
|
||||
$base0f: #926e5c;
|
||||
// base16-atelier-heath
|
||||
// base16-synth-midnight-dark
|
||||
// base16-summerfruit-dark
|
||||
// base16-seti
|
||||
// base16-outrun-dark (a bit bright)
|
||||
// base16-material-darker
|
||||
// base16-harmonic-dark
|
||||
// base16-google-dark (little dark for my tastes)
|
||||
// base16-default-dark (little dull)
|
||||
// base16-classic-dark
|
||||
// base16-brewer
|
||||
|
||||
// section not needed under 11ty
|
||||
// Hacking the syntax highlighting
|
||||
.nb {
|
||||
/* Name.Builtin */
|
||||
color: $base0f !important;
|
||||
}
|
||||
|
||||
.o {
|
||||
/* Operator */
|
||||
color: $base04 !important;
|
||||
}
|
||||
.n {
|
||||
/* Name */
|
||||
color: $base05 !important;
|
||||
}
|
||||
.p {
|
||||
/* Punctuation */
|
||||
color: #3ab469 !important;
|
||||
}
|
||||
.sr {
|
||||
/* Literal.String.Regex */
|
||||
color: $base0c !important;
|
||||
}
|
||||
|
||||
// Progress Bar
|
||||
#progress-bar {
|
||||
background: linear-gradient(to right, red, orange , yellow, green,
|
||||
blue, indigo, violet var(--scroll), transparent 0);
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// Scroll to top
|
||||
#scroll-to-top {
|
||||
background: rgb(215, 210, 210);
|
||||
display:block;
|
||||
position:fixed;
|
||||
font-size:25px;
|
||||
bottom:25px;
|
||||
right:10%;
|
||||
opacity:0;
|
||||
z-index:99;
|
||||
text-align:center;
|
||||
transform:translateY(30%);
|
||||
transition:transform 0.5s ease-in-out, opacity 0.5s ease-in-out
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
#scroll-to-top {
|
||||
font-size:20px
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
#scroll-to-top {
|
||||
right:5%;
|
||||
bottom:15px
|
||||
}
|
||||
}
|
||||
#scroll-to-top :last-child {
|
||||
transition:transform 0.7s ease-in-out
|
||||
}
|
||||
#scroll-to-top :last-child:active,
|
||||
#scroll-to-top :last-child:hover {
|
||||
transform:translateY(-10%)
|
||||
}
|
||||
#scroll-to-top span {
|
||||
cursor:pointer;
|
||||
color:#dee3ee
|
||||
}
|
||||
#scroll-to-top span:hover .up-arrow,
|
||||
#scroll-to-top span:active .up-arrow {
|
||||
color:#00adb5
|
||||
}
|
||||
|
||||
tt,
|
||||
code,
|
||||
kbd,
|
||||
samp,
|
||||
pre {
|
||||
color: #1bb6be !important
|
||||
}
|
||||
|
||||
$github-color: #fff !default;
|
||||
|
||||
div.highlight {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
div pre {
|
||||
border: 4px #7e1c1c solid;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
code {
|
||||
outline: 1px #7e1c1c solid;
|
||||
}
|
||||
|
||||
code > span {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
// messes up table code blocks
|
||||
//code > span:first-child {
|
||||
// padding-top: 5px;
|
||||
//}
|
||||
|
||||
//code > span:last-child {
|
||||
// padding-bottom: 5px;
|
||||
//}
|
||||
|
||||
// hack to remove outline that above sets
|
||||
td > div > pre {
|
||||
border: unset;
|
||||
}
|
||||
|
||||
pre > code > div {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
td {
|
||||
display: inline-flex;
|
||||
// below is hack so Firefox looks the same as Safari / Chrome.
|
||||
// Both will ignore the assignment because they don't know about "ruby-base"
|
||||
// https://caniuse.com/mdn-css_properties_display_ruby_values
|
||||
display: ruby-base;
|
||||
}
|
||||
|
||||
// === for copy-code-to-clipboard
|
||||
|
||||
// h/t https://simplernerd.com/hugo-add-copy-to-clipboard-button/
|
||||
|
||||
.clipboard-button {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
padding: 6px 8px 4px 8px;
|
||||
margin: 5px;
|
||||
// color: gray-500;
|
||||
// border-color: gray-500;
|
||||
// background-color: gray-100;
|
||||
border: 1px solid;
|
||||
border-radius: 6px;
|
||||
font-size: 0.8em;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
transition: 0.1s;
|
||||
}
|
||||
.clipboard-button > svg {
|
||||
// fill: gray-500;
|
||||
}
|
||||
.clipboard-button:hover {
|
||||
cursor: pointer;
|
||||
border-color: #01b139;
|
||||
background-color: #87d09e;
|
||||
opacity: 1;
|
||||
}
|
||||
.clipboard-button:hover > svg {
|
||||
fill: #1900ff;
|
||||
}
|
||||
.clipboard-button:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.highlight:hover > .clipboard-button {
|
||||
opacity: 1;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
line-height: 1.5;
|
||||
}
|
||||
@import "my-vars.scss";
|
||||
|
||||
//@import "progress.css"; // for progress bar
|
||||
//@import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin
|
||||
|
|
|
|||
|
|
@ -0,0 +1,227 @@
|
|||
@charset "utf-8";
|
||||
|
||||
.author__urls.social-icons .svg-inline--fa,
|
||||
.page__footer-follow .social-icons .svg-inline--fa {
|
||||
color: rgba(102, 235, 97, 0.829) !important;
|
||||
}
|
||||
|
||||
/* Colors */
|
||||
$background-color: #141010 !default;
|
||||
$text-color: #fff6fbb9 !default;
|
||||
$primary-color: #ca34fc !default;
|
||||
$link-color: $primary-color !default;
|
||||
$link-color-hover: mix(#fff, $link-color, 25%) !default;
|
||||
$link-color-visited: mix(#000, $link-color, 25%) !default;
|
||||
$code-background-color: mix(rgb(43, 39, 39), $background-color, 15%) !default;
|
||||
$code-background-color-dark: mix(rgb(59, 54, 54), $background-color, 20%) !default;
|
||||
|
||||
/* Notices */
|
||||
|
||||
$success-color: #02d702 !default;
|
||||
$warning-color: #d67f05 !default;
|
||||
$danger-color: #d90404 !default;
|
||||
$info-color: #3b9cba !default;
|
||||
|
||||
// section not needed under 11ty
|
||||
/* neon syntax highlighting (base16) */
|
||||
$base00: #1a191a;
|
||||
$base01: #e0e0e0;
|
||||
$base02: #b4a6a6;
|
||||
$base03: #928e8e;
|
||||
$base04: #ccc2c2;
|
||||
$base05: #bd6262;
|
||||
$base06: #a74040;
|
||||
$base07: #701b1b;
|
||||
$base08: #ff0086;
|
||||
$base09: #fd8900;
|
||||
$base0a: #aba800;
|
||||
$base0b: #00c918;
|
||||
$base0c: #1faaaa;
|
||||
$base0d: #3777e6;
|
||||
$base0e: #ad00a1;
|
||||
$base0f: #926e5c;
|
||||
// base16-atelier-heath
|
||||
// base16-synth-midnight-dark
|
||||
// base16-summerfruit-dark
|
||||
// base16-seti
|
||||
// base16-outrun-dark (a bit bright)
|
||||
// base16-material-darker
|
||||
// base16-harmonic-dark
|
||||
// base16-google-dark (little dark for my tastes)
|
||||
// base16-default-dark (little dull)
|
||||
// base16-classic-dark
|
||||
// base16-brewer
|
||||
|
||||
// section not needed under 11ty
|
||||
// Hacking the syntax highlighting
|
||||
.nb {
|
||||
/* Name.Builtin */
|
||||
color: $base0f !important;
|
||||
}
|
||||
|
||||
.o {
|
||||
/* Operator */
|
||||
color: $base04 !important;
|
||||
}
|
||||
.n {
|
||||
/* Name */
|
||||
color: $base05 !important;
|
||||
}
|
||||
.p {
|
||||
/* Punctuation */
|
||||
color: #3ab469 !important;
|
||||
}
|
||||
.sr {
|
||||
/* Literal.String.Regex */
|
||||
color: $base0c !important;
|
||||
}
|
||||
|
||||
// Progress Bar
|
||||
#progress-bar {
|
||||
background: linear-gradient(to right, red, orange , yellow, green,
|
||||
blue, indigo, violet var(--scroll), transparent 0);
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// Scroll to top
|
||||
#scroll-to-top {
|
||||
background: rgb(215, 210, 210);
|
||||
display:block;
|
||||
position:fixed;
|
||||
font-size:25px;
|
||||
bottom:25px;
|
||||
right:10%;
|
||||
opacity:0;
|
||||
z-index:99;
|
||||
text-align:center;
|
||||
transform:translateY(30%);
|
||||
transition:transform 0.5s ease-in-out, opacity 0.5s ease-in-out
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
#scroll-to-top {
|
||||
font-size:20px
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
#scroll-to-top {
|
||||
right:5%;
|
||||
bottom:15px
|
||||
}
|
||||
}
|
||||
#scroll-to-top :last-child {
|
||||
transition:transform 0.7s ease-in-out
|
||||
}
|
||||
#scroll-to-top :last-child:active,
|
||||
#scroll-to-top :last-child:hover {
|
||||
transform:translateY(-10%)
|
||||
}
|
||||
#scroll-to-top span {
|
||||
cursor:pointer;
|
||||
color:#dee3ee
|
||||
}
|
||||
#scroll-to-top span:hover .up-arrow,
|
||||
#scroll-to-top span:active .up-arrow {
|
||||
color:#00adb5
|
||||
}
|
||||
|
||||
tt,
|
||||
code,
|
||||
kbd,
|
||||
samp,
|
||||
pre {
|
||||
color: #1bb6be !important
|
||||
}
|
||||
|
||||
$github-color: #fff !default;
|
||||
|
||||
div.highlight {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
div pre {
|
||||
border: 4px #7e1c1c solid;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
code {
|
||||
outline: 1px #7e1c1c solid;
|
||||
}
|
||||
|
||||
code > span {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
// messes up table code blocks
|
||||
//code > span:first-child {
|
||||
// padding-top: 5px;
|
||||
//}
|
||||
|
||||
//code > span:last-child {
|
||||
// padding-bottom: 5px;
|
||||
//}
|
||||
|
||||
// hack to remove outline that above sets
|
||||
td > div > pre {
|
||||
border: unset;
|
||||
}
|
||||
|
||||
pre > code > div {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
td {
|
||||
display: inline-flex;
|
||||
// below is hack so Firefox looks the same as Safari / Chrome.
|
||||
// Both will ignore the assignment because they don't know about "ruby-base"
|
||||
// https://caniuse.com/mdn-css_properties_display_ruby_values
|
||||
display: ruby-base;
|
||||
}
|
||||
|
||||
// === for copy-code-to-clipboard
|
||||
|
||||
// h/t https://simplernerd.com/hugo-add-copy-to-clipboard-button/
|
||||
|
||||
.clipboard-button {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
padding: 6px 8px 4px 8px;
|
||||
margin: 5px;
|
||||
// color: gray-500;
|
||||
// border-color: gray-500;
|
||||
// background-color: gray-100;
|
||||
border: 1px solid;
|
||||
border-radius: 6px;
|
||||
font-size: 0.8em;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
transition: 0.1s;
|
||||
}
|
||||
.clipboard-button > svg {
|
||||
// fill: gray-500;
|
||||
}
|
||||
.clipboard-button:hover {
|
||||
cursor: pointer;
|
||||
border-color: #01b139;
|
||||
background-color: #87d09e;
|
||||
opacity: 1;
|
||||
}
|
||||
.clipboard-button:hover > svg {
|
||||
fill: #1900ff;
|
||||
}
|
||||
.clipboard-button:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.highlight:hover > .clipboard-button {
|
||||
opacity: 1;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
font-family: $global-font-family;
|
||||
font-size: $type-size-6 !important;
|
||||
text-indent: initial; /* override*/
|
||||
background-color: mix(#fff, $notice-color, 55%); //original percentage was 90
|
||||
background-color: mix(#fff, $notice-color, 65%); //original percentage was 90
|
||||
border-radius: $border-radius;
|
||||
box-shadow: 0 1px 1px rgba($notice-color, 0.25);
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
|
|
@ -7,9 +7,9 @@ pagination:
|
|||
---
|
||||
|
||||
{%- for post in pagination.items -%}
|
||||
<h2><a href="{% post_url collections.posts, post.fileSlug %}">{{ post.data.title }}</a></h2>
|
||||
<h2><a href="{% post_url post.fileSlug %}">{{ post.data.title }}</a></h2>
|
||||
<em>{{ post.data.date | toUTCString}}</em>
|
||||
<p>{{ post.templateContent | description }} <a href="{% post_url collections.posts, post.fileSlug %}"><em>read more</em></a></p>
|
||||
<p>{{ post.templateContent | description }} <a href="{% post_url post.fileSlug %}"><em>read more</em></a></p>
|
||||
{%- endfor -%}
|
||||
|
||||
|
||||
|
|
@ -45,4 +45,4 @@ pagination:
|
|||
<a href="#" class="pagination disabled">{{ "Last" }}</a>
|
||||
{% endif %}
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
Loading…
Reference in New Issue