m3tam3re/m3tam3re.com
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

redesign 2023

Browse Source
This commit is contained in:
m3tam3re
2023-10-12 14:01:05 +02:00
commit 19bfc7311a
3053 changed files with 76380 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

364
themes/FixIt/assets/css/_partials/_single/_code.scss Normal file
View File

@ -0,0 +1,364 @@
// inline code
code {
padding: 0.2em 0.4em;
margin: 0;
font-size: $code-font-size;
font-family: $code-font-family;
color: $code-color;
background-color: rgba(175, 184, 193, 0.2);
text-decoration: inherit;
@include border-radius($global-border-radius);
@include overflow-wrap(break-word);
@include line-break(auto);
[data-theme='dark'] & {
color: $code-color-dark;
background-color: rgba(99, 110, 123, 0.4);
}
}
// indented code
pre {
margin: 0;
line-height: 1.45em;
padding: 0.5rem;
overflow: auto;
font-size: $code-font-size;
font-family: $code-font-family;
@include border-radius($global-border-radius);
@include tab-size(4);
background-color: $code-background-color;
[data-theme='dark'] & {
background-color: $code-background-color-dark;
}
code {
padding: 0;
background-color: transparent;
@include border-radius(0);
@include max-content(min-width);
[data-theme='dark'] & {
background-color: transparent;
}
}
img {
min-height: 1em;
max-height: 1.2em;
vertical-align: text-bottom;
}
}
.highlight,
.gist {
font-size: $code-font-size;
font-family: $code-font-family;
.table-wrapper {
> table,
> table thead,
> table tr,
> table td {
margin: 0;
padding: 0;
border: none !important;
white-space: nowrap;
}
}
}
// block fenced code
.highlight {
margin: 0.5rem 0;
> .chroma {
position: relative;
.code-header {
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
width: 100%;
font-family: $global-font-family;
font-weight: bold;
line-height: 1.4em;
color: $code-info-color;
background-color: darken($code-background-color, 3%);
@include border-radius($global-border-radius);
@include transition(border-radius 0.2s ease);
[data-theme='dark'] & {
color: $code-info-color-dark;
background-color: darken($code-background-color-dark, 6%);
}
&:hover {
cursor: pointer;
}
.ellipses,
.edit,
.copy {
@extend .print-d-none;
}
.code-title {
width: 100%;
padding: 0.4rem;
.arrow {
padding: 0 0.2rem;
@include transition(transform 0.2s ease);
}
.title-inner {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
}
.code-title::after {
padding-left: 0.2rem;
content: 'Code';
}
.ellipses {
padding: 0.4rem;
}
.edit,
.copy {
display: none;
padding: 0.4rem;
&:hover {
cursor: pointer;
color: $global-link-hover-color;
[data-theme='dark'] & {
color: $global-link-hover-color-dark;
}
}
}
@each $type, $text in $code-type-map {
&.language-#{$type} .code-title::after {
content: $text;
}
}
}
// delayed loading table-wrapper
.table-wrapper {
max-height: 0;
overflow: hidden;
@include border-radius(0 0 $global-border-radius $global-border-radius);
@include details-transition-open;
}
table {
border-spacing: 0;
width: auto;
overflow: auto;
display: block;
background-color: $code-background-color;
[data-theme='dark'] & {
background-color: $code-background-color-dark;
}
td {
vertical-align: top;
padding: 0;
}
pre {
padding: 0.25rem;
outline-offset: -1px;
@include border-radius(0);
}
/* lineNumbersInTable=false */
.ln {
min-width: 1.25rem;
}
// ========== lineNumbersInTable ========== //
// line numbers
.lntd:first-child {
min-width: 1.6rem;
text-align: right;
position: sticky;
left: 0;
pre {
@include user-select(none);
}
}
// code content
.lntd:last-child {
width: 100%;
pre {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
code {
width: 100%;
}
}
// ========== lineNumbersInTable ========== //
}
&.open {
.code-header {
background-color: darken($code-background-color, 6%);
@include border-radius($global-border-radius $global-border-radius 0 0);
[data-theme='dark'] & {
background-color: darken($code-background-color-dark, 3%);
}
}
.table-wrapper {
max-height: 100%;
@include details-transition-close;
}
.arrow {
@include transform(rotate(90deg));
}
.ellipses {
display: none;
}
.edit,
.copy {
display: inline;
}
}
}
/* LineHighlight */
.hl {
display: block;
background-color: $code-hightlight-color;
box-shadow: -0.5rem 0 0 $code-hightlight-color, 0.5rem 0 0 $code-hightlight-color;
[data-theme='dark'] & {
background-color: $code-hightlight-color-dark;
box-shadow: -0.5rem 0 0 $code-hightlight-color-dark, 0.5rem 0 0 $code-hightlight-color-dark;
}
}
/* GenericUnderline */
.gl {
text-decoration: underline;
}
/* GenericStrong */
.gs {
font-weight: bold;
}
/* GenericEmph */
.ge {
font-style: italic;
}
/* lineNumbersInTable=false */
.ln {
padding-right: 0.5rem;
display: inline-block;
min-width: 1.1rem;
text-align: right;
}
/* LineNumbers */
.lnt,
.ln {
color: $global-font-secondary-color;
[data-theme='dark'] & {
color: $global-font-secondary-color-dark;
}
}
// ========== Higtlight Color ========== //
/* Error */
.err {
font-style: italic;
border-bottom: 1px dotted $code-error-color;
}
/* GenericDeleted */
.gd {
background-color: #ffebe9;
[data-theme='dark'] & {
background-color: #78191b;
}
}
/* GenericInserted */
.gi {
background-color: #dafbe1;
[data-theme='dark'] & {
background-color: #1b4721;
}
}
@each $class, $color in $code-highlight-color-map {
.#{$class} {
color: $color;
}
}
[data-theme='dark'] & {
@each $class, $color in $code-highlight-color-map-dark {
.#{$class} {
color: $color;
}
}
}
// ========== Higtlight Color ========== //
}
// gist shortcode
.gist {
.gist-file,
.gist-data,
.gist-meta {
border: none;
}
.gist-data {
background-color: transparent;
}
.gist-meta {
padding: 0.4rem 0.8rem;
@include link(false, false);
background-color: darken($code-background-color, 5%);
[data-theme='dark'] & {
background-color: darken($code-background-color-dark, 5%);
}
}
.table-wrapper {
.highlight,
&::-webkit-scrollbar {
background-color: #f6f8fa;
[data-theme='dark'] & {
background-color: #2d333b;
}
}
}
[data-theme='dark'] & {
@import './github-dark-dimmed';
}
}

4
themes/FixIt/assets/css/_partials/_single/_comment.scss Normal file
View File

@ -0,0 +1,4 @@
>#comments {
padding: 2rem 0;
@extend .print-d-none;
}

67
themes/FixIt/assets/css/_partials/_single/_fixit-decryptor.scss Normal file
View File

@ -0,0 +1,67 @@
.fixit-decryptor-container {
font-family: $global-font-family;
text-align: center;
margin-top: 3rem;
.fixit-encryptor-shortcode & {
margin-top: 1rem;
}
#fixit-decryptor-input,
.fixit-decryptor-input,
.fixit-encryptor-btn {
display: inline-block;
box-sizing: border-box;
outline: none;
color: $global-font-color;
border: 1px solid darken($global-border-color, 15%);
border-radius: $global-border-radius;
@include transition(all 0.1s ease-out);
box-shadow: 0px 0px 5px 0px darken($global-border-color, 15%);
&:active,
&:focus,
&:hover {
color: darken($global-link-hover-color, 6%);
border-color: $global-link-hover-color;
box-shadow: 0px 0px 5px 0px lighten($global-link-hover-color, 20%);
[data-theme='dark'] & {
color: lighten($global-link-hover-color-dark, 6%);
border-color: $global-link-hover-color-dark;
box-shadow: 0px 0px 5px 0px darken($global-link-hover-color-dark, 20%);
}
}
[data-theme='dark'] & {
color: $global-font-color-dark;
border-color: lighten($global-border-color-dark, 15%);
box-shadow: 0px 0px 5px 0px lighten($global-border-color-dark, 15%);
}
}
#fixit-decryptor-input,
.fixit-decryptor-input {
width: clamp(50%, 400px, 100%);
height: 3rem;
padding-left: 1rem;
padding-right: 1rem;
background-color: $global-background-color;
[data-theme='dark'] & {
background-color: $global-background-color-dark;
}
}
.fixit-encryptor-btn {
cursor: pointer;
@include transition(all 0.1s ease-out);
padding: 0.6rem 1rem;
background-color: $header-background-color;
[data-theme='dark'] & {
background-color: $header-background-color-dark;
}
}
}

115
themes/FixIt/assets/css/_partials/_single/_footer.scss Normal file
View File

@ -0,0 +1,115 @@
.post-footer {
margin: 2rem 0;
&:has(~.post-reward) {
margin-bottom: 0;
}
.post-info {
border-bottom: 1px solid $global-border-color;
padding: 1rem 0 0.3rem;
[data-theme='dark'] & {
border-bottom: 1px solid $global-border-color-dark;
}
.post-info-line {
display: flex;
justify-content: space-between;
.post-info-mod {
font-size: 0.8em;
color: $global-font-secondary-color;
[data-theme='dark'] & {
color: $global-font-secondary-color-dark;
}
@include link(false, false);
}
.post-info-license {
font-size: 0.8em;
color: $global-font-secondary-color;
[data-theme='dark'] & {
color: $global-font-secondary-color-dark;
}
@include link(false, false);
}
.post-info-md {
font-size: 0.8rem;
width: fit-content;
@include link(false, false);
>span:not(:first-child)::before {
content: '|';
margin-left: 0.25rem;
margin-right: 0.25rem;
}
}
.post-info-share {
@extend .print-d-none;
a * {
vertical-align: text-bottom;
}
}
}
}
.post-info-more {
padding: 0.3rem 0 1rem;
display: flex;
justify-content: space-between;
font-size: 0.9rem;
section:last-child {
@extend .print-d-none;
}
}
.post-tags {
max-width: 65%;
* {
display: inline;
}
@include link(true, true);
.post-tag:not(:last-child)::after {
content: ',';
margin-right: 0.25rem;
}
}
.post-nav {
display: flex;
justify-content: space-between;
gap: 1.5rem;
@extend .print-d-none;
.post-nav-item {
flex: 1;
font-size: 1rem;
font-weight: 600;
@include transition(all 0.3s ease-out);
&[rel='next'] {
text-align: right;
}
&[rel='prev']:hover {
@include transform(translateX(-4px));
}
&[rel='next']:hover {
@include transform(translateX(4px));
}
}
}
}

169
themes/FixIt/assets/css/_partials/_single/_github-dark-dimmed.scss Normal file
View File

@ -0,0 +1,169 @@
/**
* Theme: GitHub Dark Dimmed
* Description: Dark Dimmed theme as seen on github.com
* Author: github.com
* Maintainer: https://github.com/hugo-fixit/FixIt
* Updated: 2022-03-01
*/
& {
--color-fg-default: #adbac7;
--color-prettylights-syntax-comment: #768390;
--color-prettylights-syntax-constant: #6cb6ff;
--color-prettylights-syntax-entity: #dcbdfb;
--color-prettylights-syntax-storage-modifier-import: #adbac7;
--color-prettylights-syntax-entity-tag: #8ddb8c;
--color-prettylights-syntax-keyword: #f47067;
--color-prettylights-syntax-string: #96d0ff;
--color-prettylights-syntax-variable: #f69d50;
--color-prettylights-syntax-brackethighlighter-unmatched: #e5534b;
--color-prettylights-syntax-invalid-illegal-text: #cdd9e5;
--color-prettylights-syntax-invalid-illegal-bg: #922323;
--color-prettylights-syntax-carriage-return-text: #cdd9e5;
--color-prettylights-syntax-carriage-return-bg: #ad2e2c;
--color-prettylights-syntax-string-regexp: #8ddb8c;
--color-prettylights-syntax-markup-list: #eac55f;
--color-prettylights-syntax-markup-heading: #316dca;
--color-prettylights-syntax-markup-italic: #adbac7;
--color-prettylights-syntax-markup-bold: #adbac7;
--color-prettylights-syntax-markup-deleted-text: #ffd8d3;
--color-prettylights-syntax-markup-deleted-bg: #78191b;
--color-prettylights-syntax-markup-inserted-text: #b4f1b4;
--color-prettylights-syntax-markup-inserted-bg: #1b4721;
--color-prettylights-syntax-markup-changed-text: #ffddb0;
--color-prettylights-syntax-markup-changed-bg: #682d0f;
--color-prettylights-syntax-markup-ignored-text: #adbac7;
--color-prettylights-syntax-markup-ignored-bg: #255ab2;
--color-prettylights-syntax-meta-diff-range: #dcbdfb;
--color-prettylights-syntax-brackethighlighter-angle: #768390;
--color-prettylights-syntax-sublimelinter-gutter-mark: #545d68;
--color-prettylights-syntax-constant-other-reference-link: #96d0ff;
.blob-num,
.blob-code-inner {
color: val(--color-fg-default);
}
.pl-c /* comment, punctuation.definition.comment, string.comment */ {
color: var(--color-prettylights-syntax-comment);
}
.pl-c1 /* constant, entity.name.constant, variable.other.constant, variable.language, support, meta.property-name, support.constant, support.variable, meta.module-reference, markup.raw, meta.diff.header, meta.output */,
.pl-s .pl-v /* string variable */ {
color: var(--color-prettylights-syntax-constant);
}
.pl-e /* entity */,
.pl-en /* entity.name */ {
color: var(--color-prettylights-syntax-entity);
}
.pl-smi /* variable.parameter.function, storage.modifier.package, storage.modifier.import, storage.type.java, variable.other */,
.pl-s .pl-s1 /* string source */ {
color: var(--color-prettylights-syntax-storage-modifier-import);
}
.pl-ent /* entity.name.tag, markup.quote */ {
color: var(--color-prettylights-syntax-entity-tag);
}
.pl-k /* keyword, storage, storage.type */ {
color: var(--color-prettylights-syntax-keyword);
}
.pl-s /* string */,
.pl-pds /* punctuation.definition.string, source.regexp, string.regexp.character-class */,
.pl-s .pl-pse .pl-s1 /* string punctuation.section.embedded source */,
.pl-sr /* string.regexp */,
.pl-sr .pl-cce /* string.regexp constant.character.escape */,
.pl-sr .pl-sre /* string.regexp source.ruby.embedded */,
.pl-sr .pl-sra /* string.regexp string.regexp.arbitrary-repitition */ {
color: var(--color-prettylights-syntax-string);
}
.pl-v /* variable */,
.pl-smw /* sublimelinter.mark.warning */ {
color: var(--color-prettylights-syntax-variable);
}
.pl-bu /* invalid.broken, invalid.deprecated, invalid.unimplemented, message.error, brackethighlighter.unmatched, sublimelinter.mark.error */ {
color: var(--color-prettylights-syntax-brackethighlighter-unmatched);
}
.pl-ii /* invalid.illegal */ {
color: var(--color-prettylights-syntax-invalid-illegal-text);
background-color: var(--color-prettylights-syntax-invalid-illegal-bg);
}
.pl-c2 /* carriage-return */ {
color: var(--color-prettylights-syntax-carriage-return-text);
background-color: var(--color-prettylights-syntax-carriage-return-bg);
}
.pl-c2::before /* carriage-return */ {
content: '^M';
}
.pl-sr .pl-cce /* string.regexp constant.character.escape */ {
font-weight: bold;
color: var(--color-prettylights-syntax-string-regexp);
}
.pl-ml /* markup.list */ {
color: var(--color-prettylights-syntax-markup-list);
}
.pl-mh /* markup.heading */,
.pl-mh .pl-en /* markup.heading entity.name */,
.pl-ms /* meta.separator */ {
font-weight: bold;
color: var(--color-prettylights-syntax-markup-heading);
}
.pl-mi /* markup.italic */ {
font-style: italic;
color: var(--color-prettylights-syntax-markup-italic);
}
.pl-mb /* markup.bold */ {
font-weight: bold;
color: var(--color-prettylights-syntax-markup-bold);
}
.pl-md /* markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted */ {
color: var(--color-prettylights-syntax-markup-deleted-text);
background-color: var(--color-prettylights-syntax-markup-deleted-bg);
}
.pl-mi1 /* markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted */ {
color: var(--color-prettylights-syntax-markup-inserted-text);
background-color: var(--color-prettylights-syntax-markup-inserted-bg);
}
.pl-mc /* markup.changed, punctuation.definition.changed */ {
color: var(--color-prettylights-syntax-markup-changed-text);
background-color: var(--color-prettylights-syntax-markup-changed-bg);
}
.pl-mi2 /* markup.ignored, markup.untracked */ {
color: var(--color-prettylights-syntax-markup-ignored-text);
background-color: var(--color-prettylights-syntax-markup-ignored-bg);
}
.pl-mdr /* meta.diff.range */ {
font-weight: bold;
color: var(--color-prettylights-syntax-meta-diff-range);
}
.pl-ba /* brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote */ {
color: var(--color-prettylights-syntax-brackethighlighter-angle);
}
.pl-sg /* sublimelinter.gutter-mark */ {
color: var(--color-prettylights-syntax-sublimelinter-gutter-mark);
}
.pl-corl /* constant.other.reference.link, string.other.link */ {
text-decoration: underline;
color: var(--color-prettylights-syntax-constant-other-reference-link);
}
}

101
themes/FixIt/assets/css/_partials/_single/_reward.scss Normal file
View File

@ -0,0 +1,101 @@
.post-reward {
padding: 1rem;
text-align: center;
@extend .print-d-none;
&~.post-footer {
margin-top: 0;
}
&:has(.reward-ways:empty) {
display: none;
}
.comment {
margin: 0.5rem 0;
font-weight: 500;
}
.reward-ways {
display: none;
}
.reward-input:checked~.reward-ways {
display: block;
padding-top: 20px;
div {
display: inline-block;
@include user-select(none);
span {
display: block;
}
&:hover span[data-animation] {
animation: var(--animation-reward, jackInTheBox) 0.8s infinite linear;
// The animation may affect :hover of img in dark mode
pointer-events: none;
}
img {
display: inline-block;
margin: 0.8em 2em 0;
max-width: 100%;
width: $reward-img-width;
}
}
// `fixed` mode only supports desktop
&[data-mode='fixed'] {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 1rem;
background-color: $global-background-color;
@include z-index(2);
@include border-radius($global-border-radius);
@include box-shadow(0 0 1.5rem 0 rgba(0, 0, 0, 0.2));
[data-theme='dark'] & {
background-color: $global-background-color-dark;
@include box-shadow(0 0 1.5rem 0 rgba(255, 255, 255, 0.2));
}
}
}
.reward-button {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
outline: none;
color: lighten($reward-color, 5%);
border: 2px solid lighten($reward-color, 10%);
border-radius: $global-border-radius;
padding: 0.6rem 1rem;
background-color: $global-background-color;
vertical-align: text-top;
line-height: 1rem;
@include transition(all 0.3s ease-out);
&:active,
&:hover {
color: #ffffff;
border-color: $reward-color;
background-color: $reward-color;
[data-theme='dark'] & {
color: #ffffff;
border-color: $reward-color-dark;
background-color: $reward-color-dark;
}
}
[data-theme='dark'] & {
color: $reward-color;
border-color: lighten($reward-color, 5%);
background-color: $global-background-color-dark;
}
}
}

178
themes/FixIt/assets/css/_partials/_single/_toc.scss Normal file
View File

@ -0,0 +1,178 @@
.toc {
.toc-title {
font-size: $toc-title-font-size;
font-weight: bold;
text-transform: uppercase;
}
.toc-content {
font-size: $toc-content-font-size;
ul {
text-indent: -0.8rem;
padding-left: 0.8rem;
list-style: none;
a:first-child::before {
content: '|';
font-weight: bolder;
margin-right: 0.5rem;
color: $single-link-color;
[data-theme='dark'] & {
color: $single-link-color-dark;
}
}
ul {
padding-left: 1.5rem;
}
}
}
ruby {
background: $code-background-color;
rt {
color: $global-font-secondary-color;
}
[data-theme='dark'] & {
background: $code-background-color-dark;
rt {
color: $global-font-secondary-color-dark;
}
}
}
}
#toc-auto {
display: block;
position: sticky;
top: var(--#{$prefix}scroll-mt);
box-sizing: border-box;
visibility: hidden;
@include z-index(1);
@include overflow-wrap(break-word);
@include blur;
@extend .print-d-none;
[data-header-desktop='normal'] & {
--#{$prefix}scroll-mt: #{$global-scroll-margin-top};
}
.toc-title {
margin: 0.5rem 0;
cursor: pointer;
@include user-select(none);
&::before {
content: '|';
font-weight: bolder;
margin-right: 0.5rem;
color: $global-border-color;
[data-theme='dark'] & {
color: $global-border-color-dark;
}
}
i.toc-icon {
@include transition(transform 0.2s ease);
}
}
&.toc-hidden i.toc-icon {
@include transform(rotate(-90deg));
@include transition(transform 0.2s ease);
}
.toc-content {
overflow-y: scroll;
max-height: calc(100vh - #{2*$header-height});
&::-webkit-scrollbar {
width: 0;
}
&.always-active ul {
display: block;
}
> nav > ul {
margin: 0;
}
ul {
ul {
display: none;
}
.has-active > ul {
display: block;
}
}
a.active {
font-weight: bold;
color: $single-link-color;
[data-theme='dark'] & {
color: $single-link-color-dark;
}
&::before {
color: $single-link-hover-color;
[data-theme='dark'] & {
color: $single-link-hover-color-dark;
}
}
}
}
}
#toc-static {
display: none;
margin: 0.8rem 0;
&[data-kept='true'] {
display: block;
}
.toc-title {
display: flex;
justify-content: space-between;
line-height: 2em;
padding: 0 0.75rem;
background: darken($code-background-color, 3%);
[data-theme='dark'] & {
background: darken($code-background-color-dark, 6%);
}
}
.toc-content {
background-color: $code-background-color;
> nav > ul {
margin: 0;
padding: 0.4rem 1rem 0.4rem 1.8rem;
}
[data-theme='dark'] & {
background-color: $code-background-color-dark;
}
}
&.open {
.toc-title {
background: darken($code-background-color, 6%);
[data-theme='dark'] & {
background: darken($code-background-color-dark, 3%);
}
}
}
}