From 87565cc50ead48e7c63298f963f57ee9e3212395 Mon Sep 17 00:00:00 2001 From: Guillaume Date: Fri, 17 Nov 2023 08:47:49 +0100 Subject: [PATCH] Add icon --- components/code-block.tsx | 4 +- components/markdown.tsx | 33 +- pages/_document.tsx | 2 +- public/fonts/{mockoon.ttf => mockoon.woff} | Bin 5288 -> 5500 bytes styles/OLDstyle.scss | 361 --------------------- styles/_user.scss | 6 + styles/font.scss | 5 +- 7 files changed, 39 insertions(+), 372 deletions(-) rename public/fonts/{mockoon.ttf => mockoon.woff} (58%) delete mode 100644 styles/OLDstyle.scss diff --git a/components/code-block.tsx b/components/code-block.tsx index 92b277eb..c0b17867 100644 --- a/components/code-block.tsx +++ b/components/code-block.tsx @@ -1,6 +1,6 @@ import { FunctionComponent } from 'react'; import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; -import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism'; +import { nord } from 'react-syntax-highlighter/dist/cjs/styles/prism'; const CodeBlock: FunctionComponent<{ code: string; @@ -12,7 +12,7 @@ const CodeBlock: FunctionComponent<{ const optionalProps: { style?: any } = {}; if (dark) { - optionalProps.style = vscDarkPlus; + optionalProps.style = nord; } return ( diff --git a/components/markdown.tsx b/components/markdown.tsx index a80cdb0e..cbca68ee 100644 --- a/components/markdown.tsx +++ b/components/markdown.tsx @@ -29,7 +29,6 @@ const heading = (props) => { <> {children} @@ -39,17 +38,37 @@ const heading = (props) => { ); switch (props.node.tagName) { case 'h1': - return

{container(props.children)}

; + return

{container(props.children)}

; case 'h2': - return

{container(props.children)}

; + return ( +

+ {container(props.children)} +

+ ); case 'h3': - return

{container(props.children)}

; + return ( +

+ {container(props.children)} +

+ ); case 'h4': - return

{container(props.children)}

; + return ( +

+ {container(props.children)} +

+ ); case 'h5': - return
{container(props.children)}
; + return ( +
+ {container(props.children)} +
+ ); case 'h6': - return
{container(props.children)}
; + return ( +
+ {container(props.children)} +
+ ); } }; diff --git a/pages/_document.tsx b/pages/_document.tsx index 98e6932e..a9f3d607 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -12,7 +12,7 @@ class MyDocument extends Document { diff --git a/public/fonts/mockoon.ttf b/public/fonts/mockoon.woff similarity index 58% rename from public/fonts/mockoon.ttf rename to public/fonts/mockoon.woff index 9ec9ec27597f00b1aea33d603675c3f9460ee192..21d84455e676623fb1fac9e10e81fd893c0149b6 100644 GIT binary patch delta 495 zcmZ3X`A18v+~3WOfsp|SL~9th!L$Jb4j2uA01Q6yI;;T!}O)LP4 zWdQj(ApG#d?WXj^VvyJsARnX_gay)bD${^scYw?bAiTZ(=;e&m#1sYwp*28xGZ0o2 zyU&*a6a#%hdf^AdAYfnq?%Ft&m4TtD9b1^LA#K>x+S)iDEE%*;0?9_VHip6tV@ z%=({i0pI-1C5(=o^-K&5{|_){F&|*yXV3teU}SD)YND>Dti;YHDk3hXD9)~Ks?MgY zq^@RaVs2(^BrYZ@!p_Dn&NwZ=0tf=YBxAr8hbufj86|;0P*M^QAR;2g!x##a1}Oq6 zP~ve42q=N5(K0nv-~l>o^A;`>b{VHA5zBafo39MqEI=^^hKJQ>ePQ%u79n#+naMUn vF_RO7SSHU9a*$!U#OlU+g7pJO22c?wGG!Q7GjM`5Ffak5Qg}17@KQzqjD~E` delta 287 zcmeyPwL-I=fsuiMft#U$ftkU;KUm+0Ux=?3D6$8L6OwZi3m(3|UC+S4C zyEz_df%J zFp$gGR*+v@0(2-4h=3fRz`)FWeKHSYH>1$x8H~!T|M=$f&D(r{(UEg=BeyZT%&Siu zzsB?1d}ZKf0qJ3Q7ir5F-HQ CvPgme diff --git a/styles/OLDstyle.scss b/styles/OLDstyle.scss deleted file mode 100644 index 9d57a05d..00000000 --- a/styles/OLDstyle.scss +++ /dev/null @@ -1,361 +0,0 @@ -/** - * Custom variables followed by theme variables followed by Bootstrap variables - * to ensure cascade of styles. - */ - -// Bootstrap functions -@import '~bootstrap/scss/functions'; - -// Theme functions -@import 'theme/functions'; - -// Custom variables -@import 'custom-variables'; - -// Theme variables -@import 'theme/variables'; - -// Bootstrap core -@import 'custom-bootstrap'; - -// Theme core -@import 'theme/theme'; - -// custom font -@import 'font'; - -// Custom Scss -// ########## -div.icon { - i { - font-size: xxx-large; - } -} - -pre code, -code { - color: $primary; - background-color: lighten($primary, 40%); - padding: 0 0.5rem; - display: inline-block; - border-radius: 5px; - font-size: $font-size-base !important; -} -pre .code { - border-radius: 5px; -} - -.code-block { - position: relative; - - .code-block-copy { - position: absolute; - top: 0; - right: 15px; - } -} - -// disable some style for blocks of code -pre code { - background-color: transparent; - padding: 0; -} - -h1, -.h1 { - code { - font-size: $h1-font-size; - } -} - -h2, -.h2 { - code { - font-size: $h2-font-size; - } -} - -h3, -.h3 { - code { - font-size: $h3-font-size; - } -} - -h4, -.h4 { - code { - font-size: $h4-font-size; - } -} - -h5, -.h5 { - code { - font-size: $h5-font-size; - } -} - -h6, -.h6 { - code { - font-size: $h6-font-size; - } -} - -footer { - .footer-social { - font-size: 1.3em; - } -} - -.cta-border { - border-color: $primary; -} - -.simple-card-min { - p.text-muted { - font-size: initial; - } -} - -aside { - select { - &.form-select { - color: $primary; - option { - color: $black; - } - } - } -} -// TERMINAL -header.terminal { - background: #30353a; - height: 30px; - border-radius: 8px 8px 0 0; - padding-left: 10px; -} -.terminal-container header .button { - width: 12px; - height: 12px; - margin: 10px 4px 0 0; - display: inline-block; - border-radius: 8px; -} -.green { - background-color: #3bb662 !important; -} -.red { - background-color: #e75448 !important; -} -.yellow { - background-color: #e5c30f !important; -} -.terminal-container { - text-align: left; - width: 100%; - border-radius: 10px; - margin: auto; - margin-bottom: 14px; - position: relative; -} -.terminal-fixed-top { - margin-top: 30px; -} -.terminal-home { - background-color: #30353a; - padding: 1em 1em 1em 2em; - border-bottom-left-radius: 6px; - border-bottom-right-radius: 6px; - color: #fafafa; -} - -p.console { - font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', - 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', - 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, - monospace; - font-size: 0.9rem; - &:before { - content: '$'; - color: #3bb662; - } -} - -.card-min-height { - min-height: 260px; -} -.article-header { - background: rgb(38, 40, 48); - background: linear-gradient( - 90deg, - rgba(38, 40, 48, 1) 0%, - rgba(59, 164, 220, 1) 120% - ); - color: #adeae1; - text-align: left; - - a { - color: #adeae1; - &:visited { - color: #adeae1; - } - &:hover, - &:active { - color: darken(#adeae1, 40%); - } - } - - img { - max-width: 80%; - } -} - -.quote { - border-left: 4px solid lighten($primary, 20%); - background-color: lighten($primary, 40%); - p { - padding: 0; - margin: 0; - } -} - -.quotation { - position: relative; - quotes: '“' '”'; - - &:before, - &:after { - position: absolute; - color: lighten($primary, 20%); - font-size: 3rem; - } - - &:before { - content: open-quote; - top: 0; - left: 0; - } - - &:after { - content: close-quote; - right: 0; - top: auto; - bottom: 0; - } -} - -.sponsoring-message { - a { - text-decoration: none; - } -} - -.skewed-screenshot { - perspective: 1500px; - perspective-origin: 0; - img { - transform: rotateY(-20deg) rotateX(5deg); - } -} - -.fade-in { - animation: fadein 1s; -} - -@keyframes fadein { - from { - opacity: 0; - } - to { - opacity: 1; - } -} - -.card-img-start-lg { - border-radius: $border-radius $border-radius 0 0; - - @include media-breakpoint-up(lg) { - border-radius: $border-radius 0 0 $border-radius; - } -} - -.ellipsis { - position: relative; - - &::after { - content: ''; - position: absolute; - bottom: 0; - right: 0; - background: linear-gradient(180deg, #00000000 10%, white); - text-align: right; - height: 80px; - left: 0; - } -} - -.breadcrumb-item { - + .breadcrumb-item { - &::before { - content: '→'; - font-family: inherit; - } - } -} - -// bootstrap table override -.table > :not(:first-child) { - border-top: inherit; -} - -.with-indicator { - position: relative; - - &::before { - content: ''; - position: absolute; - bottom: -2px; - right: -2px; - background-color: #39c939; - display: block; - width: 6px; - height: 6px; - border-radius: 50%; - } -} - -/* Only works with h5 font size and badge-lg */ -.badge-arrow { - position: relative; - border-radius: 0; - - $arrow-height: 0.75rem * 2 + $h5-font-size; - - &::before { - content: ''; - position: absolute; - left: 0; - top: 0; - width: $arrow-height; - height: $arrow-height; - border-top: $arrow-height/2 solid transparent; - border-bottom: $arrow-height/2 solid transparent; - border-left: $arrow-height/2 solid white; - border-right: $arrow-height/2 solid transparent; - } - - &::after { - content: ''; - position: absolute; - right: 0; - top: 0; - width: $arrow-height; - height: $arrow-height; - border-top: $arrow-height/2 solid white; - border-bottom: $arrow-height/2 solid white; - border-right: $arrow-height/2 solid white; - border-left: $arrow-height/2 solid transparent; - } -} diff --git a/styles/_user.scss b/styles/_user.scss index e83ab4dd..820c0f1a 100644 --- a/styles/_user.scss +++ b/styles/_user.scss @@ -6,6 +6,12 @@ div.icon { } } +kbd { + background-color: $light; + color: $primary-desat; + border: $border-width solid $border-color; +} + pre code, code { color: $primary; diff --git a/styles/font.scss b/styles/font.scss index e256eea6..561c1ca0 100644 --- a/styles/font.scss +++ b/styles/font.scss @@ -1,6 +1,6 @@ @font-face { font-family: 'mockoon'; - src: url('/fonts/mockoon.ttf?fqkf57') format('truetype'); + src: url('/fonts/mockoon.woff?eompgf') format('woff'); font-weight: normal; font-style: normal; font-display: block; @@ -94,3 +94,6 @@ .icon-open:before { content: '\e901'; } +.icon-search:before { + content: '\e913'; +}