+
@@ -92,9 +99,9 @@ const newLocalizedArticles = await getCollection("articles", ({ data }) => {
position: absolute;
top: -30%;
left: -10%;
- max-width: 100vw;
- width: 320px;
- height: 320px;
+ max-inline-size: 100vw;
+ inline-size: 320px;
+ block-size: 320px;
z-index: -1;
border-radius: 50%;
background-color: var(--color-light-blue);
@@ -121,7 +128,7 @@ const newLocalizedArticles = await getCollection("articles", ({ data }) => {
color: var(--color-dark-blue);
}
.quick-access {
- margin-top: var(--space-xl-2xl);
+ margin-block-start: var(--space-xl-2xl);
container-type: inline-size;
container-name: intro;
}
@@ -171,7 +178,7 @@ const newLocalizedArticles = await getCollection("articles", ({ data }) => {
.section__content {
order: 2;
flex-basis: 0;
- min-width: 40ch;
+ min-inline-size: 40ch;
}
}
diff --git a/src/pages/tags/[tag].astro b/src/pages/tags/[tag].astro
index 382694c..870e620 100644
--- a/src/pages/tags/[tag].astro
+++ b/src/pages/tags/[tag].astro
@@ -1,6 +1,5 @@
---
import BaseLayout from "../../layouts/BaseLayout.astro";
-import ContentPost from "../../components/ContentPost.astro";
export async function getStaticPaths({}) {
const allPosts = await Astro.glob("../../data/**/*.mdx");
@@ -26,12 +25,6 @@ const { posts } = Astro.props;
Posts tagged with {tag}
- {
- posts.map((post) => (
- -
-
-
- ))
- }
+ {posts.map((post) => - {post.frontmatter.title}
)}
diff --git a/src/styles/compositions/sidebar.css b/src/styles/compositions/sidebar.css
index 9a07da1..0427f2d 100644
--- a/src/styles/compositions/sidebar.css
+++ b/src/styles/compositions/sidebar.css
@@ -24,7 +24,7 @@ EXCEPTIONS
.sidebar > :last-child {
flex-basis: 0;
flex-grow: 999;
- min-width: var(--sidebar-content-min-width, 50%);
+ min-inline-size: var(--sidebar-content-min-width, 50%);
}
/*
@@ -50,5 +50,5 @@ A flipped version where the sidebar is on the right
.sidebar-reverse > :first-child {
flex-basis: 0;
flex-grow: 999;
- min-width: var(--sidebar-content-min-width, 50%);
+ min-inline-size: var(--sidebar-content-min-width, 50%);
}
diff --git a/src/styles/global/global-styles.css b/src/styles/global/global-styles.css
index 6cffb6a..ec300a4 100644
--- a/src/styles/global/global-styles.css
+++ b/src/styles/global/global-styles.css
@@ -27,7 +27,7 @@ main {
font-family: var(--font-secondary);
}
:where(h1) {
- max-width: 20ch;
+ max-inline-size: 20ch;
font-size: var(--size-6);
font-weight: bold;
color: var(--color-dark-blue);
@@ -41,7 +41,7 @@ h2,
h3,
.h3 {
- max-width: initial;
+ max-inline-size: initial;
font-size: var(--size-2);
font-weight: bold;
letter-spacing: 0.05rem;
@@ -96,11 +96,11 @@ ol:not([role="list"]) > li + li {
.sr-only {
clip: rect(0 0 0 0);
clip-path: inset(50%);
- height: 1px;
+ block-size: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
- width: 1px;
+ inline-size: 1px;
}
.clean-button {
@@ -181,8 +181,8 @@ button[disabled] {
position: absolute;
left: 0;
bottom: -2px;
- width: 100%;
- height: 2px;
+ inline-size: 100%;
+ block-size: 2px;
text-decoration: none;
transform: scaleX(0);
opacity: 1;
@@ -219,3 +219,35 @@ blockquote cite {
blockquote code {
font-weight: bold;
}
+
+/* code highlight */
+
+.content :not(pre) > code {
+ padding: var(--space-3xs) var(--space-2xs);
+ position: relative;
+ display: inline-block;
+ font-size: var(--size--1);
+ font-family: var(--font-code);
+}
+
+.content :not(pre) > code:before {
+ content: "";
+ position: absolute;
+ inset: 0px -1px;
+ background: var(--color-light-grey);
+ border-radius: 4px;
+ z-index: -1;
+}
+
+.content code[class*="language-"],
+.content pre[class*="language-"] {
+ white-space: pre-wrap;
+}
+
+/* .astro-code .filename {
+ margin: 0.5rem 0;
+ display: block;
+ font-family: var(--font-code);
+ font-size: 1.4rem;
+ text-align: right;
+} */
diff --git a/src/styles/utilities/waves.css b/src/styles/utilities/waves.css
index 40bf28b..4fbf8be 100644
--- a/src/styles/utilities/waves.css
+++ b/src/styles/utilities/waves.css
@@ -1,16 +1,16 @@
.waves {
background: transparent;
- height: 4px;
+ block-size: 4px;
position: relative;
}
.waves::before {
- content: '';
+ content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat;
- height: 10px;
+ block-size: 10px;
background-size: 20px 20px;
background-image: radial-gradient(
circle at 10px -5px,
@@ -19,13 +19,13 @@
);
}
.waves::after {
- content: '';
+ content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat;
- height: 15px;
+ block-size: 15px;
background-size: 40px 20px;
background-image: radial-gradient(
circle at 10px 15px,
@@ -41,30 +41,30 @@
}
.waves--large {
position: absolute;
- height: 30px;
- width: 100%;
+ block-size: 30px;
+ inline-size: 100%;
background: var(--waves-color, var(--color-light));
bottom: 0;
}
.waves--large::before,
.waves--large::after {
- content: '';
+ content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
}
.waves--large::before {
- width: 55%;
- height: 100%;
+ inline-size: 55%;
+ block-size: 100%;
background-color: var(--waves-color, var(--color-light));
left: -1.5%;
top: 40%;
}
.waves--large::after {
- width: 55%;
- height: 109%;
+ inline-size: 55%;
+ block-size: 109%;
background-color: var(--waves-bg-color, var(--color-white));
right: -1.5%;
top: 60%;
diff --git a/src/styles/vendor/one-dark-pro.css b/src/styles/vendor/one-dark-pro.css
new file mode 100644
index 0000000..c840b55
--- /dev/null
+++ b/src/styles/vendor/one-dark-pro.css
@@ -0,0 +1,267 @@
+code[class*="language-"],
+pre[class*="language-"] {
+ color: #abb2bf;
+ background: none;
+ font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+ font-size: var(--size--1);
+ text-align: left;
+ white-space: pre;
+ word-spacing: normal;
+ word-break: normal;
+ word-wrap: normal;
+ line-height: 1.5;
+
+ -moz-tab-size: 2;
+ -o-tab-size: 2;
+ tab-size: 2;
+
+ -webkit-hyphens: none;
+ -moz-hyphens: none;
+ -ms-hyphens: none;
+ hyphens: none;
+}
+/* Code blocks */
+pre[class*="language-"] {
+ padding: var(--space-2xs-xs) var(--space-xs-s);
+ margin: var(--space-2xs-xs) 0;
+ overflow: auto;
+ border-radius: 10px;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+ background: #282c34;
+}
+:not(pre) > code[class*="language-"] {
+ padding: 0.1em;
+ border-radius: 0.3em;
+ white-space: normal;
+}
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+ background: rgba(148, 170, 209, 0.2);
+}
+
+/* General styling */
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata,
+.token.punctuation {
+ color: #abb2bf;
+}
+
+.token.namespace {
+ opacity: 0.7;
+}
+.token.keyword,
+.token.regex,
+.token.important {
+ color: #c678dd;
+}
+.token.property,
+.token.attr-name,
+.token.constant,
+.token.symbol,
+.token.deleted {
+ color: #e06c75;
+}
+
+.token.unit {
+ color: #2f02d1;
+}
+
+.token.boolean,
+.token.number,
+.token.selector,
+.token.tag,
+.token.char,
+.token.builtin,
+.token.inserted,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+ color: #ce004b;
+}
+
+.token.operator,
+.token.pseudo-element,
+.token.pseudo-class,
+.token.attr-value,
+.token.function,
+.token.class-name {
+ color: #abb2bf;
+}
+
+.token.atrule {
+ color: #c678dd;
+}
+
+.token.string {
+ color: #10113a;
+}
+
+/* Specific styling */
+.language-html .token.doctype-tag {
+ color: #e06c75;
+}
+.language-html .token.name {
+ color: #d19a66;
+}
+.language-html .token.punctuation {
+ color: #abb2bf;
+}
+.language-html .token.tag .token.tag {
+ color: #e06c75;
+}
+.language-html .token.tag .token.attr-name {
+ color: #d19a66;
+}
+.language-html .token.tag .token.attr-value {
+ color: #98c379;
+}
+.language-html .token.tag .token.attr-value .token.punctuation {
+ color: #98c379;
+}
+.language-html .token.tag .token.attr-value .token.punctuation.attr-equals {
+ color: #abb2bf;
+}
+.language-html .token.comment {
+ color: #7f848e;
+ font-style: italic;
+}
+code[class*="language-css"],
+pre[class*="language-css"] {
+ color: #d19a66;
+}
+.language-css .token.operator,
+.language-css .token.punctuation,
+.language-css .token.property,
+.language-css .token.operator,
+.language-css .token.combinator {
+ color: #abb2bf;
+}
+.language-css .token.attr-name,
+.language-css .token.color,
+.language-css .token.number,
+.language-css .token.class {
+ color: #d19a66;
+}
+.language-css .token.attr-value,
+.language-css .token.string {
+ color: #98c379;
+}
+.language-css .token.selector,
+.language-css .token.unit {
+ color: #e06c75;
+}
+.language-css .token.property.prefix,
+.language-css .token.pseudo-element,
+.language-css .token.pseudo-class {
+ color: #56b6c2;
+}
+.language-css .token.atrule {
+ color: #abb2bf;
+}
+.language-css .token.atrule .token.rule {
+ color: #c678dd;
+}
+.language-css .token.comment {
+ color: #7f848e;
+ font-style: italic;
+}
+.language-css .token.keyword {
+ color: #56b6c2;
+}
+code[class*="language-javascript"],
+pre[class*="language-javascript"] {
+ color: #e06c75;
+}
+.language-javascript {
+ color: #e06c75;
+}
+.language-javascript .token.punctuation {
+ color: #abb2bf;
+}
+.language-javascript .token.comment {
+ color: #7f848e;
+ font-style: italic;
+}
+.language-javascript .token.keyword.this,
+.language-javascript .token.dom.variable,
+.language-javascript .token.class-name {
+ color: #e5c07b;
+}
+.language-javascript .token.null,
+.language-javascript .token.boolean,
+.language-javascript .token.number {
+ color: #d19a66;
+}
+.language-javascript .token.property-access,
+.language-javascript .token.imports,
+.language-javascript .token.parameter {
+ color: #e06c75;
+}
+.language-javascript .token.parameter {
+ font-style: italic;
+}
+.language-javascript .token.keyword {
+ color: #c678dd;
+}
+.language-javascript .token.function,
+.language-javascript .token.property-access.function.method {
+ color: #61afef;
+}
+.language-javascript .token.regex-source,
+.language-javascript .token.operator {
+ color: #56b6c2;
+}
+.language-javascript .token.regex-delimiter,
+.language-javascript .token.string {
+ color: #98c379;
+}
+.language-json .token.punctuation,
+.language-json .token.operator {
+ color: #abb2bf;
+}
+.language-json .token.string {
+ color: #98c379;
+}
+.language-json .token.boolean,
+.language-json .token.number,
+.language-json .token.null.keyword {
+ color: #d19a66;
+}
+.language-json .token.property {
+ color: #e06c75;
+}
+.language-bash .token.string,
+.language-shell .token.string {
+ color: #98c379;
+}
+.language-bash .token.shebang.important,
+.language-bash .token.comment,
+.language-shell .token.shebang.important,
+.language-shell .token.comment {
+ color: #7f848e;
+ font-style: italic;
+}
+.language-bash .token.builtin.class-name,
+.language-bash .token.entity,
+.language-shell .token.builtin.class-name,
+.language-shell .token.entity {
+ color: #56b6c2;
+}
+.language-bash .token.keyword,
+.language-shell .token.keyword {
+ color: #c678dd;
+}
+.language-bash .token.variable,
+.language-shell .token.variable {
+ color: #e06c75;
+}