Finished syntax highlighter docs and moved overrides to CSS

This commit is contained in:
squidfunk
2020-07-19 22:23:26 +02:00
parent 2fdee428ff
commit 8602969890
31 changed files with 578 additions and 1147 deletions

View File

@@ -52,7 +52,7 @@ $admonitions: (
$name: nth($names, 1);
$icon: nth($props, 1);
// Inline icon through postcss in webpack
// Inline icon through PostCSS in Webpack
--md-admonition-icon--#{$name}: svg-load("@mdi/svg/svg/#{$icon}.svg");
}
}

View File

@@ -0,0 +1,41 @@
////
/// Copyright (c) 2016-2020 Martin Donath <martin.donath@squidfunk.com>
///
/// Permission is hereby granted, free of charge, to any person obtaining a
/// copy of this software and associated documentation files (the "Software"),
/// to deal in the Software without restriction, including without limitation
/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
/// and/or sell copies of the Software, and to permit persons to whom the
/// Software is furnished to do so, subject to the following conditions:
///
/// The above copyright notice and this permission notice shall be included in
/// all copies or substantial portions of the Software.
///
/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
/// DEALINGS
////
// ----------------------------------------------------------------------------
// Dependencies
// ----------------------------------------------------------------------------
@import "modularscale";
@import "material-color";
// ----------------------------------------------------------------------------
// Local imports
// ----------------------------------------------------------------------------
@import "utilities/break";
@import "utilities/convert";
@import "config";
@import "overrides/admonition";
@import "overrides/announce";
@import "overrides/typeset";

View File

@@ -0,0 +1,83 @@
////
/// Copyright (c) 2016-2020 Martin Donath <martin.donath@squidfunk.com>
///
/// Permission is hereby granted, free of charge, to any person obtaining a
/// copy of this software and associated documentation files (the "Software"),
/// to deal in the Software without restriction, including without limitation
/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
/// and/or sell copies of the Software, and to permit persons to whom the
/// Software is furnished to do so, subject to the following conditions:
///
/// The above copyright notice and this permission notice shall be included in
/// all copies or substantial portions of the Software.
///
/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
/// DEALINGS
////
// ----------------------------------------------------------------------------
// Variables
// ----------------------------------------------------------------------------
///
/// Admonition flavours
///
$admonitions: (
sponsor: heart-fill-24 #EA4AAA
) !default;
// ----------------------------------------------------------------------------
// Rules: layout
// ----------------------------------------------------------------------------
// Icon definitions
:root {
@each $names, $props in $admonitions {
$name: nth($names, 1);
$icon: nth($props, 1);
// Inline icon through PostCSS in Webpack
--md-admonition-icon--#{$name}: svg-load(
"@primer/octicons/build/svg/#{$icon}.svg"
);
}
}
// ----------------------------------------------------------------------------
// Rules: flavours
// ----------------------------------------------------------------------------
@each $names, $props in $admonitions {
$name: nth($names, 1);
$tint: nth($props, 2);
// Define base class
.md-typeset .admonition.#{$name} {
border-color: $tint;
}
// Define base class
.md-typeset .#{$name} > .admonition-title {
background-color: transparentize($tint, 0.9);
// Icon
&::before {
background-color: $tint;
mask-image: var(--md-admonition-icon--#{$name});
}
}
// Define synonyms for base class
@if length($names) > 1 {
@for $n from 2 through length($names) {
.#{nth($names, $n)} {
@extend .#{$name};
}
}
}
}

View File

@@ -0,0 +1,47 @@
////
/// Copyright (c) 2016-2020 Martin Donath <martin.donath@squidfunk.com>
///
/// Permission is hereby granted, free of charge, to any person obtaining a
/// copy of this software and associated documentation files (the "Software"),
/// to deal in the Software without restriction, including without limitation
/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
/// and/or sell copies of the Software, and to permit persons to whom the
/// Software is furnished to do so, subject to the following conditions:
///
/// The above copyright notice and this permission notice shall be included in
/// all copies or substantial portions of the Software.
///
/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
/// DEALINGS
////
// ----------------------------------------------------------------------------
// Rules
// ----------------------------------------------------------------------------
// Announcement bar
.md-announce {
// Preserve link colors
a,
a:focus,
a:hover {
color: currentColor;
}
// Don't wrap name of blog article
strong {
white-space: nowrap;
}
// Twitter icon
.twitter {
margin-left: .2em;
color: #00ACEE;
}
}

View File

@@ -0,0 +1,57 @@
////
/// Copyright (c) 2016-2020 Martin Donath <martin.donath@squidfunk.com>
///
/// Permission is hereby granted, free of charge, to any person obtaining a
/// copy of this software and associated documentation files (the "Software"),
/// to deal in the Software without restriction, including without limitation
/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
/// and/or sell copies of the Software, and to permit persons to whom the
/// Software is furnished to do so, subject to the following conditions:
///
/// The above copyright notice and this permission notice shall be included in
/// all copies or substantial portions of the Software.
///
/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
/// DEALINGS
////
// ----------------------------------------------------------------------------
// Rules
// ----------------------------------------------------------------------------
// Typesetted content
.md-typeset {
// Extension: switch buttons
.tx-switch button {
cursor: pointer;
transition: opacity 250ms;
// Hovered button
&:hover {
opacity: 0.75;
}
// Code block
> code {
display: block;
color: var(--md-primary-bg-color);
background-color: var(--md-primary-fg-color);
}
}
// Two-column layout
.tx-columns {
columns: 2;
// Column
> * {
break-inside: avoid;
}
}
}

View File

@@ -51,30 +51,16 @@
<meta name="twitter:title" content="{{ title }}" />
<meta name="twitter:description" content="{{ config.site_description }}" />
<meta name="twitter:image" content="{{ image }}" />
<!-- Extra stylesheets -->
<link
rel="stylesheet"
href="{{ 'assets/stylesheets/overrides.css' | url }}"
/>
{% endblock %}
<!-- Announcement bar -->
{% block announce %}
<style>
/* Preserve link color */
.md-announce a,
.md-announce a:focus,
.md-announce a:hover {
color: currentColor;
}
/* Don't wrap name of blog article */
.md-announce strong {
white-space: nowrap;
}
/* Twitter icon */
.md-announce .twitter {
margin-left: .2em;
color: #00acee;
}
</style>
<a href="https://twitter.com/squidfunk">
For updates follow <strong>@squidfunk</strong> on
<span class="twemoji twitter">