maik/Personal-Website
1
0
Fork 0
mirror of https://github.com/maikka39/Personal-Website.git synced 2026-09-27 12:46:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use 4 level indentation everywhere

Browse Source
This commit is contained in:
maik
2024-11-23 17:31:14 +01:00
parent dd9e97016c
commit c859780f74
26 changed files with 1921 additions and 1903 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/workflows/hugo_cd.yml
+49 -49
View File
@@ -1,62 +1,62 @@
name: Hugo CD name: Hugo CD
on: on:
push: push:
branches: branches:
- "master" - "master"
defaults: defaults:
run: run:
working-directory: ./ working-directory: ./
jobs: jobs:
build: build:
timeout-minutes: 6 timeout-minutes: 6
name: Build name: Build
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- name: Checkout code - name: Checkout code
uses: actions/checkout@v4 uses: actions/checkout@v4
- name: Setup hugo - name: Setup hugo
uses: peaceiris/actions-hugo@v3 uses: peaceiris/actions-hugo@v3
with: with:
hugo-version: "latest" hugo-version: "latest"
extended: true extended: true
- name: Build - name: Build
run: hugo --minify run: hugo --minify
- name: Upload deployment - name: Upload deployment
uses: actions/upload-artifact@v4 uses: actions/upload-artifact@v4
with: with:
name: public-html name: public-html
path: ./public path: ./public
deploy: deploy:
timeout-minutes: 6 timeout-minutes: 6
name: Deploy name: Deploy
runs-on: ubuntu-latest runs-on: ubuntu-latest
needs: build needs: build
environment: environment:
name: production name: production
url: https://maik.dev/ url: https://maik.dev/
steps: steps:
- name: Download deployment - name: Download deployment
uses: actions/download-artifact@v4 uses: actions/download-artifact@v4
with: with:
name: public-html name: public-html
path: ./public-html path: ./public-html
- name: Setup SSH config for remote server - name: Setup SSH config for remote server
run: | run: |
mkdir -p ~/.ssh mkdir -p ~/.ssh
echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/id_ed25519 echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/id_ed25519
echo "${{ secrets.SSH_HOST }} ssh-ed25519 ${{ secrets.SSH_HOST_KEY }}" > ~/.ssh/known_hosts echo "${{ secrets.SSH_HOST }} ssh-ed25519 ${{ secrets.SSH_HOST_KEY }}" > ~/.ssh/known_hosts
chmod 600 ~/.ssh/id_ed25519 chmod 600 ~/.ssh/id_ed25519
eval "$(ssh-agent -s)" eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_ed25519 ssh-add ~/.ssh/id_ed25519
- name: Transfer deployment to remote server - name: Transfer deployment to remote server
run: | run: |
rsync -avh --delete-after ./public-html/ ${{ secrets.SSH_USERNAME }}@${{ secrets.SSH_HOST }}:~/maik.dev rsync -avh --delete-after ./public-html/ ${{ secrets.SSH_USERNAME }}@${{ secrets.SSH_HOST }}:~/maik.dev
.github/workflows/hugo_ci.yml
+25 -25
View File
@@ -1,34 +1,34 @@
name: Hugo CI name: Hugo CI
on: on:
push: push:
branches: branches:
- "*" - "*"
- "*/*" - "*/*"
- "**" - "**"
- "!master" - "!master"
pull_request: pull_request:
branches: branches:
- "master" - "master"
defaults: defaults:
run: run:
working-directory: ./ working-directory: ./
jobs: jobs:
ci: ci:
timeout-minutes: 5 timeout-minutes: 5
name: CI name: CI
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- name: Checkout code - name: Checkout code
uses: actions/checkout@v4 uses: actions/checkout@v4
- name: Setup hugo - name: Setup hugo
uses: peaceiris/actions-hugo@v3 uses: peaceiris/actions-hugo@v3
with: with:
hugo-version: "latest" hugo-version: "latest"
extended: true extended: true
- name: Build - name: Build
run: hugo -D -F run: hugo -D -F
config/_default/hugo.toml
+146 -139
View File
@@ -10,192 +10,199 @@ pygmentsUseClasses = true
PygmentsStyle = "monokai" PygmentsStyle = "monokai"
archetypeDir = "archetypes" archetypeDir = "archetypes"
contentDir = "content" contentDir = "content"
dataDir = "data" dataDir = "data"
layoutDir = "layouts" layoutDir = "layouts"
publishDir = "public" publishDir = "public"
buildDrafts = false buildDrafts = false
buildFuture = false buildFuture = false
buildExpired = false buildExpired = false
canonifyURLs = true canonifyURLs = true
enableRobotsTXT = true enableRobotsTXT = true
enableGitInfo = true enableGitInfo = true
enableEmoji = true enableEmoji = true
[permalinks] [permalinks]
[permalinks.page] [permalinks.page]
posts = "/posts/:title/" posts = "/posts/:title/"
writeups = "/:sections/:title/" writeups = "/:sections/:title/"
# writeups = "/writeups/:title/" # writeups = "/writeups/:title/"
portfolio = "/portfolio/:title/" portfolio = "/portfolio/:title/"
[outputs] [outputs]
home = ["HTML", "RSS"] home = ["HTML", "RSS"]
page = ["HTML", "RSS"] page = ["HTML", "RSS"]
[pagination] [pagination]
pagerSize = 12 pagerSize = 12
[params] [params]
dateform = "Jan 2, 2006" dateform = "Jan 2, 2006"
dateformShort = "Jan 2" dateformShort = "Jan 2"
dateformNum = "2006-01-02" dateformNum = "2006-01-02"
dateformNumTime = "2006-01-02 15:04 -0700" dateformNumTime = "2006-01-02 15:04 -0700"
dateformMonth = "Jan, 2006" dateformMonth = "Jan, 2006"
# Metadata mostly used in document's head # Metadata mostly used in document's head
description = "Hey there, my name is Maik de Kruif, I create websites, bots and other kinds of software. At the moment, I'm still studying computer science at Avans University of Applied Sciences. I am also a big fan of open-source software, which is why you'll find many of my projects on Github. And last but not least, I love playing around with cyber-security related stuff." description = "Hey there, my name is Maik de Kruif, I create websites, bots and other kinds of software. At the moment, I'm still studying computer science at Avans University of Applied Sciences. I am also a big fan of open-source software, which is why you'll find many of my projects on Github. And last but not least, I love playing around with cyber-security related stuff."
keywords = "Devloper, Software Engineer, Software Developer, Maik, Computer Science, Portfolio, Blog, Maik de Kruif" keywords = "Devloper, Software Engineer, Software Developer, Maik, Computer Science, Portfolio, Blog, Maik de Kruif"
images = [""] images = [""]
genre = "Blog" genre = "Blog"
rssLimit = 15 rssLimit = 15
showReadingTimeInList = false showReadingTimeInList = false
homeSubtitle = "Software Engineering, Linux and Cyber Security" homeSubtitle = "Software Engineering, Linux and Cyber Security"
# Prefix of link to the git commit detail page. GitInfo must be enabled. # Prefix of link to the git commit detail page. GitInfo must be enabled.
gitUrl = "https://github.com/maikka39/Personal-Website/commit/" gitUrl = "https://github.com/maikka39/Personal-Website/commit/"
# Add domain for GoatCounter to enable # Add domain for GoatCounter to enable
goatCounter = "webstats.maik.dev" goatCounter = "webstats.maik.dev"
# Show pageviews on posts, writeups, etc. # Show pageviews on posts, writeups, etc.
showPageViews = true showPageViews = true
# Set disableReadOtherPosts to true in order to hide the links to other posts. # Set disableReadOtherPosts to true in order to hide the links to other posts.
disableReadOtherPosts = false disableReadOtherPosts = false
# Sharing buttons # Sharing buttons
# There are a lot of buttons preconfigured. If you want to change them, # There are a lot of buttons preconfigured. If you want to change them,
# generate the buttons here: https://sharingbuttons.io # generate the buttons here: https://sharingbuttons.io
# and add them into your own `layouts/partials/sharing-buttons.html` # and add them into your own `layouts/partials/sharing-buttons.html`
# Preconfigured: facebook, twitter, tumblr, email, pinterest, linkedin, reddit, xing, whatsapp, hackernews, telegram # Preconfigured: facebook, twitter, tumblr, email, pinterest, linkedin, reddit, xing, whatsapp, hackernews, telegram
enableSharingButtons = true enableSharingButtons = true
sharingButtons = ["twitter", "email", "linkedin", "reddit", "whatsapp", "telegram"] sharingButtons = [
"twitter",
"email",
"linkedin",
"reddit",
"whatsapp",
"telegram",
]
# Integrate Javascript files or stylesheets by adding the url to the external assets or by # Integrate Javascript files or stylesheets by adding the url to the external assets or by
# linking local files with their path relative to the static folder, e.g. "css/styles.css" # linking local files with their path relative to the static folder, e.g. "css/styles.css"
customCSS = [] customCSS = []
customJS = [] customJS = []
# Toggle this option need to rebuild SCSS, requires extended version of Hugo # Toggle this option need to rebuild SCSS, requires extended version of Hugo
justifyContent = false # Set "text-align: justify" to .post-content. justifyContent = false # Set "text-align: justify" to .post-content.
# Default theme "light" or "dark" # Default theme "light" or "dark"
defaultTheme = "light" defaultTheme = "light"
themeColor = "#252627" themeColor = "#252627"
# Colors for favicons # Colors for favicons
[params.favicon.color] [params.favicon.color]
mask = "#252627" mask = "#252627"
msapplication = "#252627" msapplication = "#252627"
theme = "#252627" theme = "#252627"
[params.logo] [params.logo]
logoText = "$ cd /home/" logoText = "$ cd /home/"
logoHomeLink = "/" logoHomeLink = "/"
# Uncomment this if you want a portrait on your start page # Uncomment this if you want a portrait on your start page
[params.portrait] [params.portrait]
path = "/img/home/portrait.png" path = "/img/home/portrait.png"
alt = "Portrait" alt = "Portrait"
size = "175px" size = "175px"
[params.author] [params.author]
name = "Maik de Kruif" name = "Maik de Kruif"
email = "maik@maik.dev" email = "maik@maik.dev"
twitter = "@maik_dev" twitter = "@maik_dev"
image = "/img/home/portrait.png" image = "/img/home/portrait.png"
[params.general] [params.general]
twitter = "@maik_dev" twitter = "@maik_dev"
# Wallets # Wallets
[[params.wallets]] [[params.wallets]]
name = "XMR" name = "XMR"
address = "83cfsXGHPaW81hKJtAPYZEgbfFqANMTXXRwghsBpjf5oTDRV3BnCC4jFno8tLTnF4C6gJzGjPEmpvjntXaiGBB7kVitkDKi" address = "83cfsXGHPaW81hKJtAPYZEgbfFqANMTXXRwghsBpjf5oTDRV3BnCC4jFno8tLTnF4C6gJzGjPEmpvjntXaiGBB7kVitkDKi"
# Social icons # Social icons
[[params.social]] [[params.social]]
name = "email" name = "email"
url = "mailto:maik@maik.dev" url = "mailto:maik@maik.dev"
[[params.social]] [[params.social]]
name = "github" name = "github"
url = "https://github.com/maikka39" url = "https://github.com/maikka39"
[[params.social]] [[params.social]]
name = "linkedin" name = "linkedin"
url = "https://www.linkedin.com/in/maikdekruif/" url = "https://www.linkedin.com/in/maikdekruif/"
[[params.social]] [[params.social]]
name = "twitter" name = "twitter"
url = "https://twitter.com/maik_dev" url = "https://twitter.com/maik_dev"
[[params.social]] [[params.social]]
name = "discord" name = "discord"
url = "https://discord.gg/wXCMdzCDcH" url = "https://discord.gg/wXCMdzCDcH"
[[params.social]] [[params.social]]
name = "instagram" name = "instagram"
url = "https://www.instagram.com/maik.dev/" url = "https://www.instagram.com/maik.dev/"
[[params.social]] [[params.social]]
name = "stackoverflow" name = "stackoverflow"
url = "https://stackoverflow.com/users/9146982/maik-de-kruif" url = "https://stackoverflow.com/users/9146982/maik-de-kruif"
# [[params.social]] # [[params.social]]
# name = "rss" # name = "rss"
# url = "posts/index.xml" # url = "posts/index.xml"
# [[params.social]] # [[params.social]]
# name = "hackerrank" # name = "hackerrank"
# url = "https://www.hackerrank.com/maik_dev" # url = "https://www.hackerrank.com/maik_dev"
# [[params.social]] # [[params.social]]
# name = "medium" # name = "medium"
# url = "https://medium.com/@maikka39" # url = "https://medium.com/@maikka39"
[[params.social]] [[params.social]]
name = "steam" name = "steam"
url = "https://steamcommunity.com/id/maikka39" url = "https://steamcommunity.com/id/maikka39"
[[params.social]] [[params.social]]
name = "reddit" name = "reddit"
url = "https://www.reddit.com/user/maikka39" url = "https://www.reddit.com/user/maikka39"
# [[params.social]] # [[params.social]]
# name = "lbry" # name = "lbry"
# url = "https://lbry.tv/@Maik:c" # url = "https://lbry.tv/@Maik:c"
[[params.social]] [[params.social]]
name = "youtube" name = "youtube"
url = "https://www.youtube.com/channel/UCepNO6s7q0Kcyn8cc3rZNFA" url = "https://www.youtube.com/channel/UCepNO6s7q0Kcyn8cc3rZNFA"
[languages] [languages]
[languages.en] [languages.en]
weight = 1 weight = 1
copyright = "© Maik de Kruif (maik_dev). All rights reserved." copyright = "© Maik de Kruif (maik_dev). All rights reserved."
[menu] [menu]
[[menu.main]] [[menu.main]]
identifier = "about" identifier = "about"
name = "About" name = "About"
url = "about/" url = "about/"
[[menu.main]] [[menu.main]]
identifier = "portfolio" identifier = "portfolio"
name = "Portfolio" name = "Portfolio"
url = "portfolio/" url = "portfolio/"
[[menu.main]] [[menu.main]]
identifier = "posts" identifier = "posts"
name = "Posts" name = "Posts"
url = "posts/" url = "posts/"
[[menu.main]] [[menu.main]]
identifier = "writeups" identifier = "writeups"
name = "Writeups" name = "Writeups"
url = "writeups/" url = "writeups/"
config/production/hugo.toml
+2 -2
View File
@@ -1,5 +1,5 @@
baseURL = "https://maik.dev/" baseURL = "https://maik.dev/"
[services] [services]
[services.googleAnalytics] [services.googleAnalytics]
id = "UA-136337666-1" id = "UA-136337666-1"
themes/maik-blog/assets/js/menu.js
+8 -8
View File
@@ -3,20 +3,20 @@
const menuTrigger = document.querySelector(".menu-trigger"); const menuTrigger = document.querySelector(".menu-trigger");
const menu = document.querySelector(".menu"); const menu = document.querySelector(".menu");
const mobileQuery = getComputedStyle(document.body).getPropertyValue( const mobileQuery = getComputedStyle(document.body).getPropertyValue(
"--phoneWidth" "--phoneWidth"
); );
const isMobile = () => window.matchMedia(mobileQuery).matches; const isMobile = () => window.matchMedia(mobileQuery).matches;
const isMobileMenu = () => { const isMobileMenu = () => {
menuTrigger && menuTrigger.classList.toggle("hidden", !isMobile()); menuTrigger && menuTrigger.classList.toggle("hidden", !isMobile());
menu && menu.classList.toggle("hidden", isMobile()); menu && menu.classList.toggle("hidden", isMobile());
}; };
isMobileMenu(); isMobileMenu();
menuTrigger && menuTrigger &&
menuTrigger.addEventListener( menuTrigger.addEventListener(
"click", "click",
() => menu && menu.classList.toggle("hidden") () => menu && menu.classList.toggle("hidden")
); );
window.addEventListener("resize", isMobileMenu); window.addEventListener("resize", isMobileMenu);
themes/maik-blog/assets/js/nav.js
+29 -27
View File
@@ -1,38 +1,40 @@
// Path navigation on top left
window.addEventListener("load", () => { window.addEventListener("load", () => {
const terminal = document.getElementById('nav-terminal') const terminal = document.getElementById("nav-terminal");
const keyDown = (e) => { const keyDown = (e) => {
if (e.keyCode === 13) { if (e.keyCode === 13) {
if (document.activeElement !== document.body) return if (document.activeElement !== document.body) return;
if (terminal.textContent.length === 0) return if (terminal.textContent.length === 0) return;
if (terminal.textContent.includes("~")) terminal.textContent = "" if (terminal.textContent.includes("~")) terminal.textContent = "";
window.location.href = window.location.origin + "/" + terminal.textContent window.location.href =
return window.location.origin + "/" + terminal.textContent;
} return;
}
if (e.keyCode === 8) { if (e.keyCode === 8) {
terminal.textContent = terminal.textContent.slice(0, -1) terminal.textContent = terminal.textContent.slice(0, -1);
return return;
} }
if (e.keyCode === 192) { if (e.keyCode === 192) {
if (terminal.textContent.length !== 0) return if (terminal.textContent.length !== 0) return;
terminal.textContent += "~" terminal.textContent += "~";
return return;
} }
if (e.keyCode === 191) { if (e.keyCode === 191) {
terminal.textContent += "/" terminal.textContent += "/";
return return;
} }
if (e.keyCode < 65 || e.keyCode > 90) return if (e.keyCode < 65 || e.keyCode > 90) return;
terminal.textContent += e.key.toLowerCase() terminal.textContent += e.key.toLowerCase();
} };
document.addEventListener('keydown', keyDown) document.addEventListener("keydown", keyDown);
}) });
themes/maik-blog/assets/js/theme.js
+13 -13
View File
@@ -6,20 +6,20 @@ const isDark = theme === "dark";
var metaThemeColor = document.querySelector("meta[name=theme-color]"); var metaThemeColor = document.querySelector("meta[name=theme-color]");
if (theme !== null) { if (theme !== null) {
document.body.classList.toggle("dark-theme", isDark); document.body.classList.toggle("dark-theme", isDark);
isDark isDark
? metaThemeColor.setAttribute("content", "#252627") ? metaThemeColor.setAttribute("content", "#252627")
: metaThemeColor.setAttribute("content", "#fafafa"); : metaThemeColor.setAttribute("content", "#fafafa");
} }
themeToggle.addEventListener("click", () => { themeToggle.addEventListener("click", () => {
document.body.classList.toggle("dark-theme"); document.body.classList.toggle("dark-theme");
window.localStorage && window.localStorage &&
window.localStorage.setItem( window.localStorage.setItem(
"theme", "theme",
document.body.classList.contains("dark-theme") ? "dark" : "light" document.body.classList.contains("dark-theme") ? "dark" : "light"
); );
document.body.classList.contains("dark-theme") document.body.classList.contains("dark-theme")
? metaThemeColor.setAttribute("content", "#252627") ? metaThemeColor.setAttribute("content", "#252627")
: metaThemeColor.setAttribute("content", "#fafafa"); : metaThemeColor.setAttribute("content", "#fafafa");
}); });
themes/maik-blog/assets/scss/_buttons.scss
+79 -77
View File
@@ -1,89 +1,21 @@
.button-container { .button-container {
display: table; display: table;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
button, button,
.button, .button,
a.button { a.button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 8px 18px;
margin-bottom: 5px;
background: $light-background-secondary;
text-decoration: none;
text-align: center;
font-weight: 500;
border-radius: 8px;
border: 1px solid transparent;
appearance: none;
cursor: pointer;
outline: none;
.dark-theme & {
background: $dark-background-secondary;
color: inherit;
}
/* variants */
&.outline {
background: transparent;
border-color: $light-background-secondary;
box-shadow: none;
padding: 8px 18px;
.dark-theme & {
border-color: $dark-background-secondary;
color: inherit;
}
:hover {
transform: none;
box-shadow: none;
}
}
&.primary {
box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
&:hover {
box-shadow: 0 2px 6px rgba(50, 50, 93, .21), 0 1px 3px rgba(0, 0, 0, .08);
}
}
&.link {
background: none;
font-size: 1rem;
}
&.small {
font-size: .8rem;
}
&.wide {
min-width: 200px;
padding: 14px 24px;
}
}
.code-toolbar {
margin-bottom: 20px;
.toolbar-item a {
position: relative; position: relative;
display: inline-flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 3px 8px; padding: 8px 18px;
margin-bottom: 5px; margin-bottom: 5px;
background: $light-background-secondary; background: $light-background-secondary;
text-decoration: none; text-decoration: none;
text-align: center; text-align: center;
font-size: 13px;
font-weight: 500; font-weight: 500;
border-radius: 8px; border-radius: 8px;
border: 1px solid transparent; border: 1px solid transparent;
@@ -92,8 +24,78 @@ a.button {
outline: none; outline: none;
.dark-theme & { .dark-theme & {
background: $dark-background-secondary; background: $dark-background-secondary;
color: inherit; color: inherit;
} }
}
} /* variants */
&.outline {
background: transparent;
border-color: $light-background-secondary;
box-shadow: none;
padding: 8px 18px;
.dark-theme & {
border-color: $dark-background-secondary;
color: inherit;
}
:hover {
transform: none;
box-shadow: none;
}
}
&.primary {
box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11),
0 1px 3px rgba(0, 0, 0, 0.08);
&:hover {
box-shadow: 0 2px 6px rgba(50, 50, 93, 0.21),
0 1px 3px rgba(0, 0, 0, 0.08);
}
}
&.link {
background: none;
font-size: 1rem;
}
&.small {
font-size: 0.8rem;
}
&.wide {
min-width: 200px;
padding: 14px 24px;
}
}
.code-toolbar {
margin-bottom: 20px;
.toolbar-item a {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 3px 8px;
margin-bottom: 5px;
background: $light-background-secondary;
text-decoration: none;
text-align: center;
font-size: 13px;
font-weight: 500;
border-radius: 8px;
border: 1px solid transparent;
appearance: none;
cursor: pointer;
outline: none;
.dark-theme & {
background: $dark-background-secondary;
color: inherit;
}
}
}
themes/maik-blog/assets/scss/_code.scss
+6 -7
View File
@@ -20,9 +20,8 @@
} }
input[type="checkbox"]:checked { input[type="checkbox"]:checked {
~ .highlight,
~.highlight, ~ .code-toolbar .highlight {
~.code-toolbar .highlight {
max-height: 0; max-height: 0;
padding: 0; padding: 0;
@@ -30,7 +29,7 @@
overflow: hidden; overflow: hidden;
} }
~.code-toolbar { ~ .code-toolbar {
padding: 0; padding: 0;
border-top: none; border-top: none;
@@ -39,11 +38,11 @@
} }
} }
~label { ~ label {
border-radius: 10px; border-radius: 10px;
} }
~label .collapsable-code__toggle:after { ~ label .collapsable-code__toggle:after {
content: attr(data-label-expand); content: attr(data-label-expand);
} }
} }
@@ -117,4 +116,4 @@
.code-toolbar { .code-toolbar {
margin: 0; margin: 0;
} }
} }
themes/maik-blog/assets/scss/_fonts.scss
+37 -37
View File
@@ -1,53 +1,53 @@
@font-face { @font-face {
font-family: 'Inter UI'; font-family: "Inter UI";
font-style: normal; font-style: normal;
font-display: fallback; font-display: fallback;
font-weight: 400; font-weight: 400;
src: url("../fonts/Inter-UI-Regular.woff2") format("woff2"), src: url("../fonts/Inter-UI-Regular.woff2") format("woff2"),
url("../fonts/Inter-UI-Regular.woff") format("woff"); url("../fonts/Inter-UI-Regular.woff") format("woff");
} }
@font-face { @font-face {
font-family: 'Inter UI'; font-family: "Inter UI";
font-style: italic; font-style: italic;
font-display: fallback; font-display: fallback;
font-weight: 400; font-weight: 400;
src: url("../fonts/Inter-UI-Italic.woff2") format("woff2"), src: url("../fonts/Inter-UI-Italic.woff2") format("woff2"),
url("../fonts/Inter-UI-Italic.woff") format("woff"); url("../fonts/Inter-UI-Italic.woff") format("woff");
} }
@font-face { @font-face {
font-family: 'Inter UI'; font-family: "Inter UI";
font-style: normal; font-style: normal;
font-display: auto; font-display: auto;
font-weight: 600; font-weight: 600;
src: url("../fonts/Inter-UI-Medium.woff2") format("woff2"), src: url("../fonts/Inter-UI-Medium.woff2") format("woff2"),
url("../fonts/Inter-UI-Medium.woff") format("woff"); url("../fonts/Inter-UI-Medium.woff") format("woff");
} }
@font-face { @font-face {
font-family: 'Inter UI'; font-family: "Inter UI";
font-style: italic; font-style: italic;
font-display: fallback; font-display: fallback;
font-weight: 600; font-weight: 600;
src: url("../fonts/Inter-UI-MediumItalic.woff2") format("woff2"), src: url("../fonts/Inter-UI-MediumItalic.woff2") format("woff2"),
url("../fonts/Inter-UI-MediumItalic.woff") format("woff"); url("../fonts/Inter-UI-MediumItalic.woff") format("woff");
} }
@font-face { @font-face {
font-family: 'Inter UI'; font-family: "Inter UI";
font-style: normal; font-style: normal;
font-display: fallback; font-display: fallback;
font-weight: 800; font-weight: 800;
src: url("../fonts/Inter-UI-Bold.woff2") format("woff2"), src: url("../fonts/Inter-UI-Bold.woff2") format("woff2"),
url("../fonts/Inter-UI-Bold.woff") format("woff"); url("../fonts/Inter-UI-Bold.woff") format("woff");
} }
@font-face { @font-face {
font-family: 'Inter UI'; font-family: "Inter UI";
font-style: italic; font-style: italic;
font-display: fallback; font-display: fallback;
font-weight: 800; font-weight: 800;
src: url("../fonts/Inter-UI-BoldItalic.woff2") format("woff2"), src: url("../fonts/Inter-UI-BoldItalic.woff2") format("woff2"),
url("../fonts/Inter-UI-BoldItalic.woff") format("woff"); url("../fonts/Inter-UI-BoldItalic.woff") format("woff");
} }
themes/maik-blog/assets/scss/_footer.scss
+69 -69
View File
@@ -1,77 +1,77 @@
.footer { .footer {
padding: 40px 20px; padding: 40px 20px;
flex-grow: 0; flex-grow: 0;
color: $light-color-secondary;
&__inner {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
width: 760px;
max-width: 100%;
@media #{$media-size-tablet} {
flex-direction: column;
}
}
&__content {
display: flex;
flex-direction: column;
align-items: center;
font-size: 1rem;
color: $light-color-secondary; color: $light-color-secondary;
&__section { &__inner {
display: flex; display: flex;
flex-direction: row; align-items: center;
align-items: center; justify-content: center;
padding: 5px; margin: 0 auto;
width: 760px;
@media #{$media-size-tablet} { max-width: 100%;
margin-top: 10px;
}
&.regular {
@media #{$media-size-tablet} {
flex-direction: column;
}
&>*:not(:last-child)::after {
content: "•";
padding: 0 5px;
@media #{$media-size-tablet} {
content: "";
padding: 0;
}
}
&>*:last-child {
padding: 0 5px;
@media #{$media-size-tablet} {
padding: 0;
}
}
}
&.donations {
white-space: nowrap;
overflow-x: scroll;
max-width: 600px;
position: relative;
@media #{$media-size-tablet} { @media #{$media-size-tablet} {
max-width: 180px; flex-direction: column;
}
}
&__content {
display: flex;
flex-direction: column;
align-items: center;
font-size: 1rem;
color: $light-color-secondary;
&__section {
display: flex;
flex-direction: row;
align-items: center;
padding: 5px;
@media #{$media-size-tablet} {
margin-top: 10px;
}
&.regular {
@media #{$media-size-tablet} {
flex-direction: column;
}
& > *:not(:last-child)::after {
content: "•";
padding: 0 5px;
@media #{$media-size-tablet} {
content: "";
padding: 0;
}
}
& > *:last-child {
padding: 0 5px;
@media #{$media-size-tablet} {
padding: 0;
}
}
}
&.donations {
white-space: nowrap;
overflow-x: scroll;
max-width: 600px;
position: relative;
@media #{$media-size-tablet} {
max-width: 180px;
}
.wallet {
.name {
font-weight: 700;
}
}
}
} }
.wallet {
.name {
font-weight: 700;
}
}
}
} }
}
} }
themes/maik-blog/assets/scss/_header.scss
+39 -39
View File
@@ -1,54 +1,54 @@
.header { .header {
background: #fafafa; background: #fafafa;
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 20px;
.dark-theme & {
background: #242626;
}
&__right {
display: flex;
flex-direction: row;
align-items: center;
@media #{$media-size-phone} {
flex-direction: row-reverse;
}
}
&__inner {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: center;
margin: 0 auto; position: relative;
width: 760px; padding: 20px;
max-width: 100%;
a { .dark-theme & {
text-decoration: none; background: #242626;
}
&__right {
display: flex;
flex-direction: row;
align-items: center;
@media #{$media-size-phone} {
flex-direction: row-reverse;
}
}
&__inner {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 auto;
width: 760px;
max-width: 100%;
a {
text-decoration: none;
}
} }
}
} }
.theme-toggle { .theme-toggle {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
line-height: 1; line-height: 1;
cursor: pointer; cursor: pointer;
} }
.theme-toggler { .theme-toggler {
fill: currentColor; fill: currentColor;
} }
.unselectable { .unselectable {
user-select: none; user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
} }
themes/maik-blog/assets/scss/_logo.scss
+42 -42
View File
@@ -1,42 +1,42 @@
.logo { .logo {
display: flex; display: flex;
align-items: center; align-items: center;
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: bold;
font-display: auto; font-display: auto;
font-family: monospace, monospace; font-family: monospace, monospace;
img { img {
height: 44px; height: 44px;
} }
&__mark { &__mark {
margin-right: 5px; margin-right: 5px;
} }
&__text { &__text {
font-size: 1.125rem; font-size: 1.125rem;
}
&__cursor {
display: inline-block;
width: 10px;
height: 1rem;
background: #252627;
margin-left: 2px;
border-radius: 1px;
animation: cursor 1s infinite;
.dark-theme & {
background: #fafafa;
} }
}
@media (prefers-reduced-motion: reduce) {
&__cursor { &__cursor {
animation: none; display: inline-block;
width: 10px;
height: 1rem;
background: #252627;
margin-left: 2px;
border-radius: 1px;
animation: cursor 1s infinite;
.dark-theme & {
background: #fafafa;
}
}
@media (prefers-reduced-motion: reduce) {
&__cursor {
animation: none;
}
} }
}
} }
// // Fading // // Fading
@@ -56,15 +56,15 @@
// Blinking // Blinking
@keyframes cursor { @keyframes cursor {
0% { 0% {
visibility: hidden; visibility: hidden;
} }
50% { 50% {
visibility: hidden; visibility: hidden;
} }
100% { 100% {
visibility: visible; visibility: visible;
} }
} }
themes/maik-blog/assets/scss/_main.scss
+366 -366
View File
@@ -1,59 +1,60 @@
/* Webkit Scrollbar Customize */ /* Webkit Scrollbar Customize */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 8px; width: 8px;
height: 8px; height: 8px;
background: #212020; background: #212020;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: #888; background: #888;
&:hover { &:hover {
background: #dcdcdc; background: #dcdcdc;
} }
} }
html { html {
box-sizing: border-box; box-sizing: border-box;
line-height: 1.6; line-height: 1.6;
letter-spacing: 0.06em; letter-spacing: 0.06em;
scroll-behavior: smooth; scroll-behavior: smooth;
} }
*, *,
*:before, *:before,
*:after { *:after {
box-sizing: inherit; box-sizing: inherit;
} }
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Roboto", font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Roboto",
"Segoe UI", Helvetica, Arial, sans-serif; "Segoe UI", Helvetica, Arial, sans-serif;
font-display: auto; font-display: auto;
font-size: 1rem;
line-height: 1.54;
background-color: $light-background;
color: $light-color;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
font-feature-settings: "liga", "tnum", "case", "calt", "zero", "ss01", "locl";
-webkit-overflow-scrolling: touch;
-webkit-text-size-adjust: 100%;
display: flex;
min-height: 100vh;
flex-direction: column;
@media #{$media-size-phone} {
font-size: 1rem; font-size: 1rem;
} line-height: 1.54;
background-color: $light-background;
color: $light-color;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
font-feature-settings: "liga", "tnum", "case", "calt", "zero", "ss01",
"locl";
-webkit-overflow-scrolling: touch;
-webkit-text-size-adjust: 100%;
&.dark-theme { display: flex;
background-color: $dark-background; min-height: 100vh;
color: $dark-color; flex-direction: column;
}
@media #{$media-size-phone} {
font-size: 1rem;
}
&.dark-theme {
background-color: $dark-background;
color: $dark-color;
}
} }
h2, h2,
@@ -61,462 +62,461 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
display: flex; display: flex;
align-items: center; align-items: center;
line-height: 1.3; line-height: 1.3;
} }
h1 { h1 {
font-size: 2.625rem; font-size: 2.625rem;
} }
h2 { h2 {
font-size: 1.625rem; font-size: 1.625rem;
} }
h3 { h3 {
font-size: 1.375rem; font-size: 1.375rem;
} }
h4 { h4 {
font-size: 1.125rem; font-size: 1.125rem;
} }
@media #{$media-size-phone} { @media #{$media-size-phone} {
h1 { h1 {
font-size: 2rem; font-size: 2rem;
} }
h2 { h2 {
font-size: 1.4rem; font-size: 1.4rem;
} }
h3 { h3 {
font-size: 1.15rem; font-size: 1.15rem;
} }
h4 { h4 {
font-size: 1.125rem; font-size: 1.125rem;
} }
} }
a { a {
color: inherit; color: inherit;
} }
img { img {
display: block; display: block;
width: auto; width: auto;
height: auto; height: auto;
max-width: 100%; max-width: 100%;
&.left {
margin-right: auto;
}
&.center {
margin-left: auto;
margin-right: auto;
}
&.right {
margin-left: auto;
}
&.circle {
border-radius: 50%;
max-width: 25%;
margin: auto;
}
}
figure {
display: table;
max-width: 100%;
margin: 25px 0;
img {
border-radius: 8px;
padding: 5px;
.dark-theme & {
background-color: #ffffff4f;
}
}
&.left {
margin-right: auto;
}
&.left-floated {
margin-right: auto;
float: left;
img {
margin: 20px 20px 20px 0;
}
}
&.center {
margin-left: auto;
margin-right: auto;
}
&.right {
margin-left: auto;
}
&.right-floated {
margin-left: auto;
float: right;
img {
margin: 20px 0 20px 20px;
}
}
&.rounded {
img {
border-radius: 50%;
}
}
figcaption {
font-size: 1.125rem;
line-height: 1.3;
margin-top: 0.4em;
font-weight: bold;
opacity: 0.8;
&.left { &.left {
text-align: left; margin-right: auto;
} }
&.center { &.center {
text-align: center; margin-left: auto;
margin-right: auto;
} }
&.right { &.right {
text-align: right; margin-left: auto;
} }
}
&.small { &.circle {
max-width: 300px; border-radius: 50%;
width: 90%; max-width: 25%;
margin: 5px 0; margin: auto;
} }
}
&.inline { figure {
display: inline-table; display: table;
} max-width: 100%;
margin: 25px 0;
&.floated-focus { img {
display: flex; border-radius: 8px;
position:fixed; padding: 5px;
top: 0;
left: 0; .dark-theme & {
width: 100vw; background-color: #ffffff4f;
max-width: unset; }
height: 100vh; }
padding: 3rem;
margin: 0; &.left {
align-items: center; margin-right: auto;
justify-content: center; }
flex-direction: column;
background-color: #212020ec; &.left-floated {
z-index: 10000; margin-right: auto;
float: left;
img {
margin: 20px 20px 20px 0;
}
}
&.center {
margin-left: auto;
margin-right: auto;
}
&.right {
margin-left: auto;
}
&.right-floated {
margin-left: auto;
float: right;
img {
margin: 20px 0 20px 20px;
}
}
&.rounded {
img {
border-radius: 50%;
}
}
figcaption { figcaption {
color: #ddd3c6; font-size: 1.125rem;
font-size: 1.5rem; line-height: 1.3;
margin-top: 0.4em;
font-weight: bold;
opacity: 0.8;
&.left {
text-align: left;
}
&.center {
text-align: center;
}
&.right {
text-align: right;
}
} }
&:after { &.small {
content: "Close"; max-width: 300px;
margin-top: 1rem; width: 90%;
text-decoration: underline; margin: 5px 0;
cursor: pointer; }
display: block;
color: #999288; &.inline {
display: inline-table;
}
&.floated-focus {
display: flex;
position: fixed;
top: 0;
left: 0;
width: 100vw;
max-width: unset;
height: 100vh;
padding: 3rem;
margin: 0;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: #212020ec;
z-index: 10000;
figcaption {
color: #ddd3c6;
font-size: 1.5rem;
}
&:after {
content: "Close";
margin-top: 1rem;
text-decoration: underline;
cursor: pointer;
display: block;
color: #999288;
}
} }
}
} }
code { code {
font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace; font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
font-display: auto; font-display: auto;
font-feature-settings: normal; font-feature-settings: normal;
background: $light-background-secondary; background: $light-background-secondary;
padding: 1px 6px; padding: 1px 6px;
margin: 0 2px; margin: 0 2px;
border-radius: 5px; border-radius: 5px;
font-size: 0.95rem; font-size: 0.95rem;
word-wrap: break-word; word-wrap: break-word;
.dark-theme & { .dark-theme & {
background: $dark-background-secondary; background: $dark-background-secondary;
} }
} }
pre { pre {
// background: #212020; // background: #212020;
padding: 10px 10px 10px 20px; padding: 10px 10px 10px 20px;
border-radius: 8px; border-radius: 8px;
font-size: 0.95rem; font-size: 0.95rem;
overflow: auto; overflow: auto;
@media #{$media-size-phone} { @media #{$media-size-phone} {
white-space: pre-wrap; white-space: pre-wrap;
word-wrap: break-word; word-wrap: break-word;
} }
code { code {
background: none !important; background: none !important;
color: #ccc; color: #ccc;
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: inherit; font-size: inherit;
.dark-theme & { .dark-theme & {
color: inherit; color: inherit;
}
} }
}
} }
blockquote { blockquote {
border-left: 2px solid; border-left: 2px solid;
margin: 40px; margin: 40px;
padding: 10px 20px; padding: 10px 20px;
@media #{$media-size-phone} { @media #{$media-size-phone} {
margin: 10px; margin: 10px;
padding: 10px; padding: 10px;
} }
&:before { &:before {
content: "”"; content: "”";
font-family: Georgia, serif; font-family: Georgia, serif;
font-display: auto; font-display: auto;
font-size: 3.875rem; font-size: 3.875rem;
position: absolute; position: absolute;
left: -40px; left: -40px;
top: -20px; top: -20px;
} }
p:first-of-type { p:first-of-type {
margin-top: 0; margin-top: 0;
} }
p:last-of-type { p:last-of-type {
margin-bottom: 0; margin-bottom: 0;
} }
} }
ul, ul,
ol { ol {
margin-left: 40px; margin-left: 40px;
padding: 0; padding: 0;
@media #{$media-size-phone} { @media #{$media-size-phone} {
margin-left: 20px; margin-left: 20px;
} }
} }
ol ol { ol ol {
list-style-type: lower-alpha; list-style-type: lower-alpha;
} }
.container { .container {
flex: 1 auto; flex: 1 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
} }
.content { .content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1 auto; flex: 1 auto;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 0; margin: 0;
@media #{$media-size-phone} { @media #{$media-size-phone} {
margin-top: 0; margin-top: 0;
} }
&-list { &-list {
display: block; display: block;
} }
} }
hr { hr {
width: 100%; width: 100%;
border: none; border: none;
background: $light-border-color; background: $light-border-color;
height: 1px; height: 1px;
.dark-theme & { .dark-theme & {
background: $dark-border-color; background: $dark-border-color;
} }
} }
svg { svg {
height: 1em; height: 1em;
} }
.hidden { .hidden {
display: none; display: none;
} }
.hide-on-phone { .hide-on-phone {
@media #{$media-size-phone} { @media #{$media-size-phone} {
display: none; display: none;
} }
} }
.hide-on-tablet { .hide-on-tablet {
@media #{$media-size-tablet} { @media #{$media-size-tablet} {
display: none; display: none;
} }
} }
// Accessibility // Accessibility
.screen-reader-text { .screen-reader-text {
border: 0; border: 0;
clip: rect(1px, 1px, 1px, 1px); clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%); clip-path: inset(50%);
height: 1px; height: 1px;
margin: -1px; margin: -1px;
overflow: hidden; overflow: hidden;
padding: 0; padding: 0;
position: absolute !important; position: absolute !important;
width: 1px; width: 1px;
word-wrap: normal !important; word-wrap: normal !important;
} }
.screen-reader-text:focus { .screen-reader-text:focus {
background-color: #f1f1f1; background-color: #f1f1f1;
border-radius: 3px; border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important; clip: auto !important;
clip-path: none; clip-path: none;
color: #21759b; color: #21759b;
display: block; display: block;
font-size: 14px; font-size: 14px;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: bold; font-weight: bold;
height: auto; height: auto;
width: auto; width: auto;
top: 5px; top: 5px;
left: 5px; left: 5px;
line-height: normal; line-height: normal;
padding: 15px 23px 14px; padding: 15px 23px 14px;
text-decoration: none; text-decoration: none;
z-index: 100000; z-index: 100000;
} }
// Custom // Custom
.socials { .socials {
user-select: none; user-select: none;
svg { svg {
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
table { table {
width: 100%; width: 100%;
padding: 10px 10px 10px 20px; padding: 10px 10px 10px 20px;
border-radius: 8px; border-radius: 8px;
font-size: 0.95rem; font-size: 0.95rem;
overflow: auto; overflow: auto;
background: $light-background-secondary; background: $light-background-secondary;
th { th {
padding: 8px 0px; padding: 8px 0px;
} }
td {
padding: 6px 0px;
border-top: 1px solid $light-color-secondary;
}
.dark-theme & {
background: $dark-background-secondary;
td { td {
border-top-color: $dark-color-secondary; padding: 6px 0px;
border-top: 1px solid $light-color-secondary;
}
.dark-theme & {
background: $dark-background-secondary;
td {
border-top-color: $dark-color-secondary;
}
} }
}
} }
.feather { .feather {
display: inline-block; display: inline-block;
vertical-align: -0.125em; vertical-align: -0.125em;
width: 1em; width: 1em;
height: 1em; height: 1em;
} }
.nostyle { .nostyle {
text-decoration: none; text-decoration: none;
} }
.breadcrumbs { .breadcrumbs {
display: inline;
ol {
list-style-type: none;
margin: 0;
display: inline; display: inline;
li { ol {
display: inline; list-style-type: none;
margin: 0;
display: inline;
li {
display: inline;
}
} }
}
} }
.article-heading { .article-heading {
a { a {
position: relative; position: relative;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
&::after { &::after {
content: " "; content: " ";
display: inline-block; display: inline-block;
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
height: 100%; height: 100%;
background-image: url("data:image/svg+xml, %3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20class=%22feather%20feather-link%22%3E%3Cpath%20d=%22M10%2013a5%205%200%200%200%207.54.54l3-3a5%205%200%200%200-7.07-7.07l-1.72%201.71%22%3E%3C/path%3E%3Cpath%20d=%22M14%2011a5%205%200%200%200-7.54-.54l-3%203a5%205%200%200%200%207.07%207.07l1.71-1.71%22%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: auto 50%;
}
}
@media #{$media-size-tablet-min} {
&:hover {
&::after {
right: 100%;
width: 1.5em;
background-image: url("data:image/svg+xml, %3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20class=%22feather%20feather-link%22%3E%3Cpath%20d=%22M10%2013a5%205%200%200%200%207.54.54l3-3a5%205%200%200%200-7.07-7.07l-1.72%201.71%22%3E%3C/path%3E%3Cpath%20d=%22M14%2011a5%205%200%200%200-7.54-.54l-3%203a5%205%200%200%200%207.07%207.07l1.71-1.71%22%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: auto 50%;
}
} }
}
}
@media #{$media-size-tablet} { @media #{$media-size-tablet-min} {
&:hover { &:hover {
&::after { &::after {
left: 100%; right: 100%;
width: 1.2em; width: 1.5em;
}
}
}
@media #{$media-size-tablet} {
&:hover {
&::after {
left: 100%;
width: 1.2em;
}
}
} }
}
} }
}
} }
themes/maik-blog/assets/scss/_masonry.scss
+10 -12
View File
@@ -1,16 +1,14 @@
.masonry { .masonry {
display: grid; display: grid;
margin-top: 20px; margin-top: 20px;
grid-gap: 20px 90px; grid-gap: 20px 90px;
grid-template-columns: repeat(2, minmax(250px, 1fr)); grid-template-columns: repeat(2, minmax(250px, 1fr));
// grid-auto-rows: 20px; // Set by JavaScript
// margin-bottom: calc(4 * 20px); // Set by JavaScript
> * { > * {
margin: 0; margin: 0;
} }
@media #{$media-size-medium} { @media #{$media-size-medium} {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
} }
themes/maik-blog/assets/scss/_menu.scss
+58 -58
View File
@@ -1,67 +1,67 @@
.menu { .menu {
background: #fafafa; background: #fafafa;
border-right: 1px solid; border-right: 1px solid;
margin-right: 18px; margin-right: 18px;
z-index: 9999; z-index: 9999;
.dark-theme & { .dark-theme & {
background: #252627; background: #252627;
}
@media #{$media-size-phone} {
position: absolute;
top: 50px;
right: 0;
border: none;
margin: 0;
padding: 10px;
}
&__inner {
display: flex;
align-items: center;
justify-content: flex-start;
max-width: 100%;
margin: 0 auto;
padding: 0 15px;
font-size: 1rem;
list-style: none;
li {
margin: 0 12px;
} }
@media #{$media-size-phone} { @media #{$media-size-phone} {
flex-direction: column; position: absolute;
align-items: flex-start; top: 50px;
padding: 0; right: 0;
border: none;
li {
margin: 0; margin: 0;
padding: 5px; padding: 10px;
}
}
}
&-trigger {
width: 24px;
height: 24px;
fill: currentColor;
margin-left: 10px;
cursor: pointer;
}
a {
display: inline-block;
margin-right: 15px;
text-decoration: none;
&:hover {
text-decoration: underline;
} }
&:last-of-type { &__inner {
margin-right: 0; display: flex;
align-items: center;
justify-content: flex-start;
max-width: 100%;
margin: 0 auto;
padding: 0 15px;
font-size: 1rem;
list-style: none;
li {
margin: 0 12px;
}
@media #{$media-size-phone} {
flex-direction: column;
align-items: flex-start;
padding: 0;
li {
margin: 0;
padding: 5px;
}
}
} }
}
} &-trigger {
width: 24px;
height: 24px;
fill: currentColor;
margin-left: 10px;
cursor: pointer;
}
a {
display: inline-block;
margin-right: 15px;
text-decoration: none;
&:hover {
text-decoration: underline;
}
&:last-of-type {
margin-right: 0;
}
}
}
themes/maik-blog/assets/scss/_mixins.scss
+2 -2
View File
@@ -1,3 +1,3 @@
@mixin dimmed { @mixin dimmed {
opacity: .6; opacity: 0.6;
} }
themes/maik-blog/assets/scss/_normalize.scss
+61 -61
View File
@@ -8,8 +8,8 @@
* 2. Prevent adjustments of font size after orientation changes in iOS. * 2. Prevent adjustments of font size after orientation changes in iOS.
*/ */
html { html {
line-height: 1.15; // 1 line-height: 1.15; // 1
-webkit-text-size-adjust: 100%; // 2 -webkit-text-size-adjust: 100%; // 2
} }
/* Sections /* Sections
@@ -20,7 +20,7 @@ html {
*/ */
body { body {
margin: 0; margin: 0;
} }
/** /**
@@ -28,7 +28,7 @@ body {
*/ */
main { main {
display: block; display: block;
} }
/** /**
@@ -37,8 +37,8 @@ main {
*/ */
h1 { h1 {
font-size: 2em; font-size: 2em;
margin: 0.67em 0; margin: 0.67em 0;
} }
/* Grouping content /* Grouping content
@@ -50,9 +50,9 @@ h1 {
*/ */
hr { hr {
box-sizing: content-box; // 1 box-sizing: content-box; // 1
height: 0; // 1 height: 0; // 1
overflow: visible; // 2 overflow: visible; // 2
} }
/** /**
@@ -61,9 +61,9 @@ hr {
*/ */
pre { pre {
font-family: monospace, monospace; // 1 font-family: monospace, monospace; // 1
font-display: auto; font-display: auto;
font-size: 1em; // 2 font-size: 1em; // 2
} }
/* Text-level semantics /* Text-level semantics
@@ -74,7 +74,7 @@ pre {
*/ */
a { a {
background-color: transparent; background-color: transparent;
} }
/** /**
@@ -83,9 +83,9 @@ a {
*/ */
abbr[title] { abbr[title] {
border-bottom: none; // 1 border-bottom: none; // 1
text-decoration: underline; // 2 text-decoration: underline; // 2
text-decoration: underline dotted; // 2 text-decoration: underline dotted; // 2
} }
/** /**
@@ -94,7 +94,7 @@ abbr[title] {
b, b,
strong { strong {
font-weight: bolder; font-weight: bolder;
} }
/** /**
@@ -105,9 +105,9 @@ strong {
code, code,
kbd, kbd,
samp { samp {
font-family: monospace, monospace; // 1 font-family: monospace, monospace; // 1
font-display: auto; font-display: auto;
font-size: 1em; // 2 font-size: 1em; // 2
} }
/** /**
@@ -115,7 +115,7 @@ samp {
*/ */
small { small {
font-size: 80%; font-size: 80%;
} }
/** /**
@@ -125,18 +125,18 @@ small {
sub, sub,
sup { sup {
font-size: 75%; font-size: 75%;
line-height: 0; line-height: 0;
position: relative; position: relative;
vertical-align: baseline; vertical-align: baseline;
} }
sub { sub {
bottom: -0.25em; bottom: -0.25em;
} }
sup { sup {
top: -0.5em; top: -0.5em;
} }
/* Embedded content /* Embedded content
@@ -147,7 +147,7 @@ sup {
*/ */
img { img {
border-style: none; border-style: none;
} }
/* Forms /* Forms
@@ -163,11 +163,11 @@ input,
optgroup, optgroup,
select, select,
textarea { textarea {
font-family: inherit; // 1 font-family: inherit; // 1
font-display: auto; font-display: auto;
font-size: 100%; // 1 font-size: 100%; // 1
line-height: 1.15; // 1 line-height: 1.15; // 1
margin: 0; // 2 margin: 0; // 2
} }
/** /**
@@ -177,7 +177,7 @@ textarea {
button, button,
input { input {
overflow: visible; // 1 overflow: visible; // 1
} }
/** /**
@@ -187,7 +187,7 @@ input {
button, button,
select { select {
text-transform: none; // 1 text-transform: none; // 1
} }
/** /**
@@ -198,7 +198,7 @@ button,
[type="button"], [type="button"],
[type="reset"], [type="reset"],
[type="submit"] { [type="submit"] {
-webkit-appearance: button; -webkit-appearance: button;
} }
/** /**
@@ -209,8 +209,8 @@ button::-moz-focus-inner,
[type="button"]::-moz-focus-inner, [type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner { [type="submit"]::-moz-focus-inner {
border-style: none; border-style: none;
padding: 0; padding: 0;
} }
/** /**
@@ -221,7 +221,7 @@ button:-moz-focusring,
[type="button"]:-moz-focusring, [type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring, [type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring { [type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText; outline: 1px dotted ButtonText;
} }
/** /**
@@ -229,7 +229,7 @@ button:-moz-focusring,
*/ */
fieldset { fieldset {
padding: 0.35em 0.75em 0.625em; padding: 0.35em 0.75em 0.625em;
} }
/** /**
@@ -240,12 +240,12 @@ fieldset {
*/ */
legend { legend {
box-sizing: border-box; // 1 box-sizing: border-box; // 1
color: inherit; // 2 color: inherit; // 2
display: table; // 1 display: table; // 1
max-width: 100%; // 1 max-width: 100%; // 1
padding: 0; // 3 padding: 0; // 3
white-space: normal; // 1 white-space: normal; // 1
} }
/** /**
@@ -253,7 +253,7 @@ legend {
*/ */
progress { progress {
vertical-align: baseline; vertical-align: baseline;
} }
/** /**
@@ -261,7 +261,7 @@ progress {
*/ */
textarea { textarea {
overflow: auto; overflow: auto;
} }
/** /**
@@ -271,8 +271,8 @@ textarea {
[type="checkbox"], [type="checkbox"],
[type="radio"] { [type="radio"] {
box-sizing: border-box; // 1 box-sizing: border-box; // 1
padding: 0; // 2 padding: 0; // 2
} }
/** /**
@@ -281,7 +281,7 @@ textarea {
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button { [type="number"]::-webkit-outer-spin-button {
height: auto; height: auto;
} }
/** /**
@@ -290,8 +290,8 @@ textarea {
*/ */
[type="search"] { [type="search"] {
-webkit-appearance: textfield; // 1 -webkit-appearance: textfield; // 1
outline-offset: -2px; // 2 outline-offset: -2px; // 2
} }
/** /**
@@ -299,7 +299,7 @@ textarea {
*/ */
[type="search"]::-webkit-search-decoration { [type="search"]::-webkit-search-decoration {
-webkit-appearance: none; -webkit-appearance: none;
} }
/** /**
@@ -308,8 +308,8 @@ textarea {
*/ */
::-webkit-file-upload-button { ::-webkit-file-upload-button {
-webkit-appearance: button; // 1 -webkit-appearance: button; // 1
font: inherit; // 2 font: inherit; // 2
} }
/* Interactive /* Interactive
@@ -320,7 +320,7 @@ textarea {
*/ */
details { details {
display: block; display: block;
} }
/* /*
@@ -328,7 +328,7 @@ details {
*/ */
summary { summary {
display: list-item; display: list-item;
} }
/* Misc /* Misc
@@ -339,7 +339,7 @@ summary {
*/ */
template { template {
display: none; display: none;
} }
/** /**
@@ -347,5 +347,5 @@ template {
*/ */
[hidden] { [hidden] {
display: none; display: none;
} }
themes/maik-blog/assets/scss/_portfolio.scss
+171 -171
View File
@@ -1,206 +1,206 @@
.portfolio { .portfolio {
width: 100%; width: 100%;
max-width: 1000px; max-width: 1000px;
text-align: left; text-align: left;
padding: 20px; padding: 20px;
margin: 20px auto; margin: 20px auto;
@media #{$media-size-medium} {
max-width: 800px;
}
@media #{$media-size-tablet} {
max-width: 600px;
}
&-title {
font-size: 2.625rem;
margin: 0 0 20px;
@media #{$media-size-phone} {
font-size: 2rem;
}
a {
text-decoration: none;
}
}
&-timespan {
margin-top: -20px;
font-size: 0.9em;
}
&-tags {
display: block;
margin-bottom: 20px;
font-size: 1rem;
opacity: 0.5;
a {
text-decoration: none;
}
}
&-content {
margin-top: 30px;
}
&-links {
font-size: 0.8em;
margin-top: -8px;
opacity: 0.7;
a {
text-decoration: none;
}
> * {
margin-right: 8px;
}
}
&-cover {
border-radius: 8px;
margin: 30px -50px;
width: 1060px;
max-width: 1060px;
@media #{$media-size-medium} { @media #{$media-size-medium} {
max-width: 860px; max-width: 800px;
} }
@media #{$media-size-tablet} { @media #{$media-size-tablet} {
margin: 20px 0; max-width: 600px;
width: 100%;
}
}
&-info {
margin-top: 30px;
font-size: 0.8rem;
line-height: normal;
@include dimmed;
p {
margin: 0.8em 0;
} }
a:hover { &-title {
border-bottom: 1px solid white; font-size: 2.625rem;
margin: 0 0 20px;
@media #{$media-size-phone} {
font-size: 2rem;
}
a {
text-decoration: none;
}
} }
svg { &-timespan {
margin-right: 0.8em; margin-top: -20px;
font-size: 0.9em;
} }
.tag { &-tags {
margin-right: 0.5em; display: block;
display: inline-block; margin-bottom: 20px;
font-size: 1rem;
opacity: 0.5;
&::before { a {
content: "#"; text-decoration: none;
} }
} }
}
.flag { &-content {
border-radius: 50%; margin-top: 30px;
margin: 0 5px; }
}
&-links {
font-size: 0.8em;
margin-top: -8px;
opacity: 0.7;
a {
text-decoration: none;
}
> * {
margin-right: 8px;
}
}
&-cover {
border-radius: 8px;
margin: 30px -50px;
width: 1060px;
max-width: 1060px;
@media #{$media-size-medium} {
max-width: 860px;
}
@media #{$media-size-tablet} {
margin: 20px 0;
width: 100%;
}
}
&-info {
margin-top: 30px;
font-size: 0.8rem;
line-height: normal;
@include dimmed;
p {
margin: 0.8em 0;
}
a:hover {
border-bottom: 1px solid white;
}
svg {
margin-right: 0.8em;
}
.tag {
margin-right: 0.5em;
display: inline-block;
&::before {
content: "#";
}
}
}
.flag {
border-radius: 50%;
margin: 0 5px;
}
} }
.pagination { .pagination {
margin-top: 20px; margin-top: 20px;
&__title { &__title {
display: flex; display: flex;
text-align: center; text-align: center;
position: relative; position: relative;
margin: 20px 0; margin: 20px 0;
&-h { &-h {
text-align: center; text-align: center;
margin: 0 auto; margin: 0 auto;
padding: 5px 10px; padding: 5px 10px;
background: $light-background; background: $light-background;
color: $light-color-secondary; color: $light-color-secondary;
font-size: 0.8rem; font-size: 0.8rem;
text-transform: uppercase; text-transform: uppercase;
text-decoration: none; text-decoration: none;
letter-spacing: 0.1em; letter-spacing: 0.1em;
z-index: 1; z-index: 1;
.dark-theme & { .dark-theme & {
background: $dark-background; background: $dark-background;
color: $dark-color-secondary; color: $dark-color-secondary;
} }
}
hr {
position: absolute;
left: 0;
right: 0;
width: 100%;
margin-top: 15px;
z-index: 0;
}
} }
hr { &__buttons {
position: absolute; display: flex;
left: 0; align-items: center;
right: 0; justify-content: center;
width: 100%;
margin-top: 15px;
z-index: 0;
}
}
&__buttons { a {
display: flex; text-decoration: none;
align-items: center; font-weight: bold;
justify-content: center; }
a {
text-decoration: none;
font-weight: bold;
} }
}
} }
.button { .button {
position: relative; position: relative;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: $light-background-secondary; background: $light-background-secondary;
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
border-radius: 8px; border-radius: 8px;
max-width: 40%; max-width: 40%;
padding: 0; padding: 0;
cursor: pointer; cursor: pointer;
appearance: none; appearance: none;
.dark-theme & { .dark-theme & {
background: $dark-background-secondary; background: $dark-background-secondary;
} }
+ .button { + .button {
margin-left: 10px; margin-left: 10px;
} }
a { a {
display: flex; display: flex;
padding: 8px 16px; padding: 8px 16px;
text-decoration: none; text-decoration: none;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
&__text { &__text {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
&.next .button__icon { &.next .button__icon {
margin-left: 8px; margin-left: 8px;
} }
&.previous .button__icon { &.previous .button__icon {
margin-right: 8px; margin-right: 8px;
} }
} }
themes/maik-blog/assets/scss/_portfolios.scss
+176 -176
View File
@@ -1,192 +1,192 @@
.portfolios { .portfolios {
width: 100%; width: 100%;
max-width: calc(1000px + 50px + 80px); max-width: calc(1000px + 50px + 80px);
text-align: left; text-align: left;
padding: 20px calc(20px + 50px + 15px); padding: 20px calc(20px + 50px + 15px);
margin: 20px auto; margin: 20px auto;
counter-reset: portfolio; counter-reset: portfolio;
@media #{$media-size-medium} { @media #{$media-size-medium} {
max-width: calc(800px + 50px + 80px); max-width: calc(800px + 50px + 80px);
}
@media #{$media-size-tablet} {
max-width: 660px;
}
&:not(:last-of-type) {
border-bottom: 1px solid $light-border-color;
.dark-theme & {
border-color: $dark-border-color;
}
}
&-group {
display: flex;
margin-bottom: 1.9em;
line-height: normal;
@media #{$media-size-tablet} {
display: block;
}
}
&-list {
flex-grow: 1;
margin: 0;
padding: 0;
list-style: none;
}
.portfolio {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
margin: 80px auto;
position: relative;
counter-increment: portfolio;
> * {
flex: 1;
padding: 5px;
} }
@media #{$media-size-tablet} { @media #{$media-size-tablet} {
flex-direction: column-reverse; max-width: 660px;
} }
.read-more { &:not(:last-of-type) {
white-space: nowrap; border-bottom: 1px solid $light-border-color;
max-width: max-content;
.dark-theme & {
border-color: $dark-border-color;
}
} }
&-cover { &-group {
margin: 0;
}
&-title {
font-size: 1rem;
margin: 5px 0 2px 0;
}
&-company {
font-size: 0.9rem;
margin: 5px 0 5px 0;
}
&-meta {
font-size: 0.8em;
}
&-content {
margin-top: 12px;
}
&-item {
border-bottom: 1px grey dashed;
a {
display: flex; display: flex;
justify-content: space-between; margin-bottom: 1.9em;
align-items: baseline; line-height: normal;
padding: 12px 0;
text-decoration: none; @media #{$media-size-tablet} {
} display: block;
}
} }
&-day { &-list {
flex-shrink: 0; flex-grow: 1;
margin-left: 1em; margin: 0;
@include dimmed; padding: 0;
list-style: none;
} }
&-skills { .portfolio {
&-title { display: flex;
font-size: 0.9rem; flex-direction: row;
margin: 15px 0 0 0; flex-wrap: nowrap;
} align-items: center;
margin: 80px auto;
position: relative;
counter-increment: portfolio;
> * {
flex: 1;
padding: 5px;
}
@media #{$media-size-tablet} {
flex-direction: column-reverse;
}
.read-more {
white-space: nowrap;
max-width: max-content;
}
&-cover {
margin: 0;
}
&-title {
font-size: 1rem;
margin: 5px 0 2px 0;
}
&-company {
font-size: 0.9rem;
margin: 5px 0 5px 0;
}
&-meta {
font-size: 0.8em;
}
&-content {
margin-top: 12px;
}
&-item {
border-bottom: 1px grey dashed;
a {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 12px 0;
text-decoration: none;
}
}
&-day {
flex-shrink: 0;
margin-left: 1em;
@include dimmed;
}
&-skills {
&-title {
font-size: 0.9rem;
margin: 15px 0 0 0;
}
}
&::before {
display: block;
content: counter(portfolio);
position: absolute;
transform: translate(-50%, -50%);
border-radius: 50%;
font-weight: bold;
min-width: 50px;
min-height: 50px;
line-height: 50px;
text-align: center;
top: 30px;
z-index: 10;
background-color: $light-color;
color: $light-background;
.dark-theme & {
background-color: $dark-color;
color: $dark-background;
}
}
&::after {
display: block;
content: "";
position: absolute;
top: -50px;
width: calc(50% + 50px);
height: calc(100% + 83px);
pointer-events: none;
border-bottom: 3px solid;
border-top: 3px solid;
}
&:nth-child(odd) {
// margin-left: 40px;
// background: #cfc;
&::before {
left: -48.5px;
}
&::after {
left: -50px;
border-left: 3px solid;
border-radius: 15px 0 0 15px;
}
}
&:nth-child(even) {
// margin-left: -40px;
// background: #fcc;
&::before {
right: -98.5px;
}
&::after {
right: -50px;
border-right: 3px solid;
border-radius: 0 15px 15px 0;
}
}
&:first-child {
&::after {
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
&:last-child {
&::after {
border-bottom: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
} }
&::before {
display: block;
content: counter(portfolio);
position: absolute;
transform: translate(-50%, -50%);
border-radius: 50%;
font-weight: bold;
min-width: 50px;
min-height: 50px;
line-height: 50px;
text-align: center;
top: 30px;
z-index: 10;
background-color: $light-color;
color: $light-background;
.dark-theme & {
background-color: $dark-color;
color: $dark-background;
}
}
&::after {
display: block;
content: "";
position: absolute;
top: -50px;
width: calc(50% + 50px);
height: calc(100% + 83px);
pointer-events: none;
border-bottom: 3px solid;
border-top: 3px solid;
}
&:nth-child(odd) {
// margin-left: 40px;
// background: #cfc;
&::before {
left: -48.5px;
}
&::after {
left: -50px;
border-left: 3px solid;
border-radius: 15px 0 0 15px;
}
}
&:nth-child(even) {
// margin-left: -40px;
// background: #fcc;
&::before {
right: -98.5px;
}
&::after {
right: -50px;
border-right: 3px solid;
border-radius: 0 15px 15px 0;
}
}
&:first-child {
&::after {
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
&:last-child {
&::after {
border-bottom: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
}
} }
themes/maik-blog/assets/scss/_posts.scss
+83 -83
View File
@@ -1,101 +1,101 @@
.posts { .posts {
width: 100%; width: 100%;
max-width: 1000px; max-width: 1000px;
text-align: left; text-align: left;
padding: 20px; padding: 20px;
margin: 20px auto; margin: 20px auto;
@media #{$media-size-medium} { @media #{$media-size-medium} {
max-width: 800px; max-width: 800px;
}
@media #{$media-size-tablet} {
max-width: 660px;
}
&:not(:last-of-type) {
border-bottom: 1px solid $light-border-color;
.dark-theme & {
border-color: $dark-border-color;
} }
}
&-group {
display: flex;
margin-bottom: 1.9em;
line-height: normal;
@media #{$media-size-tablet} { @media #{$media-size-tablet} {
display: block; max-width: 660px;
}
}
&-list {
flex-grow: 1;
margin: 0;
padding: 0;
list-style: none;
}
&-breadcrumbs {
margin: 0 0 -25px;
@media #{$media-size-phone} {
font-size: 0.9rem;
margin: 0 0 -15px;
}
}
.post {
&-title {
font-size: 1.9rem;
margin: 5px 0 5px 0;
} }
&-subtitle { &:not(:last-of-type) {
font-size: 1.1rem; border-bottom: 1px solid $light-border-color;
margin: 5px 0 10px 0;
font-weight: 600; .dark-theme & {
border-color: $dark-border-color;
}
} }
&-year { &-group {
padding-top: 6px;
margin-right: 1.8em;
font-size: 1.6em;
@include dimmed;
@media #{$media-size-tablet} {
margin: -6px 0 4px;
}
}
&-item {
border-bottom: 1px grey dashed;
a {
display: flex; display: flex;
justify-content: space-between; margin-bottom: 1.9em;
align-items: baseline; line-height: normal;
padding: 12px 0;
text-decoration: none; @media #{$media-size-tablet} {
} display: block;
}
} }
&-day { &-list {
flex-shrink: 0; flex-grow: 1;
margin-left: 1em; margin: 0;
@include dimmed; padding: 0;
list-style: none;
} }
&-cover { &-breadcrumbs {
margin-top: 20px; margin: 0 0 -25px;
margin-bottom: 20px;
@media #{$media-size-phone} {
font-size: 0.9rem;
margin: 0 0 -15px;
}
} }
&-content { .post {
margin-top: 10px; &-title {
margin-bottom: 10px; font-size: 1.9rem;
margin: 5px 0 5px 0;
}
&-subtitle {
font-size: 1.1rem;
margin: 5px 0 10px 0;
font-weight: 600;
}
&-year {
padding-top: 6px;
margin-right: 1.8em;
font-size: 1.6em;
@include dimmed;
@media #{$media-size-tablet} {
margin: -6px 0 4px;
}
}
&-item {
border-bottom: 1px grey dashed;
a {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 12px 0;
text-decoration: none;
}
}
&-day {
flex-shrink: 0;
margin-left: 1em;
@include dimmed;
}
&-cover {
margin-top: 20px;
margin-bottom: 20px;
}
&-content {
margin-top: 10px;
margin-bottom: 10px;
}
} }
}
} }
themes/maik-blog/assets/scss/_sharing-buttons.scss
+28 -28
View File
@@ -1,34 +1,34 @@
.sharing-buttons { .sharing-buttons {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
.resp-sharing-button__icon, .resp-sharing-button__icon,
.resp-sharing-button__link { .resp-sharing-button__link {
display: inline-block; display: inline-block;
} }
.resp-sharing-button__link { .resp-sharing-button__link {
text-decoration: none; text-decoration: none;
margin: 0.5em; margin: 0.5em;
} }
.resp-sharing-button { .resp-sharing-button {
border-radius: 5px; border-radius: 5px;
transition: 25ms ease-out; transition: 25ms ease-out;
padding: 0.5em 0.75em; padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
} }
.resp-sharing-button__icon svg { .resp-sharing-button__icon svg {
width: 1em; width: 1em;
height: 1em; height: 1em;
margin-right: 0.4em; margin-right: 0.4em;
vertical-align: top; vertical-align: top;
} }
.resp-sharing-button--small svg { .resp-sharing-button--small svg {
margin: 0; margin: 0;
vertical-align: middle; vertical-align: middle;
} }
} }
themes/maik-blog/assets/scss/_variables.scss
+3 -3
View File
@@ -23,7 +23,7 @@ $media-size-medium-min: "(min-width: 1200px)";
/* variables for js, must be the same as these in @custom-media queries */ /* variables for js, must be the same as these in @custom-media queries */
:root { :root {
--phoneWidth: (max-width: 684px); --phoneWidth: (max-width: 684px);
--tabletWidth: (max-width: 900px); --tabletWidth: (max-width: 900px);
--mediumWidth: (max-width: 1200px); --mediumWidth: (max-width: 1200px);
} }
themes/maik-blog/assets/scss/syntax_highlighting.scss
+400 -400
View File
@@ -1,403 +1,403 @@
/* Background */ /* Background */
.chroma { .chroma {
color: #f8f8f2; color: #f8f8f2;
background-color: #272822; background-color: #272822;
/* Other */ /* Other */
.x { .x {
} }
/* Error */ /* Error */
.err { .err {
color: #960050; color: #960050;
background-color: #1e0010; background-color: #1e0010;
} }
/* LineTableTD */ /* LineTableTD */
.lntd { .lntd {
vertical-align: top; vertical-align: top;
padding: 0; padding: 0;
margin: 0; margin: 0;
border: 0; border: 0;
} }
/* LineTable */ /* LineTable */
.lntable { .lntable {
border-spacing: 0; border-spacing: 0;
padding: 0; padding: 0;
margin: 0; margin: 0;
border: 0; border: 0;
width: auto; width: auto;
overflow: auto; overflow: auto;
display: block; display: block;
} }
/* LineHighlight */ /* LineHighlight */
.hl { .hl {
display: block; display: block;
width: 100%; width: 100%;
background-color: #ffffcc; background-color: #ffffcc;
} }
/* LineNumbersTable */ /* LineNumbersTable */
.lnt { .lnt {
margin-right: 0.4em; margin-right: 0.4em;
padding: 0 0.4em 0 0.4em; padding: 0 0.4em 0 0.4em;
color: #7f7f7f; color: #7f7f7f;
} }
/* LineNumbers */ /* LineNumbers */
.ln { .ln {
margin-right: 0.4em; margin-right: 0.4em;
padding: 0 0.4em 0 0.4em; padding: 0 0.4em 0 0.4em;
color: #7f7f7f; color: #7f7f7f;
} }
/* Keyword */ /* Keyword */
.k { .k {
color: #66d9ef; color: #66d9ef;
} }
/* KeywordConstant */ /* KeywordConstant */
.kc { .kc {
color: #66d9ef; color: #66d9ef;
} }
/* KeywordDeclaration */ /* KeywordDeclaration */
.kd { .kd {
color: #66d9ef; color: #66d9ef;
} }
/* KeywordNamespace */ /* KeywordNamespace */
.kn { .kn {
color: #f92672; color: #f92672;
} }
/* KeywordPseudo */ /* KeywordPseudo */
.kp { .kp {
color: #66d9ef; color: #66d9ef;
} }
/* KeywordReserved */ /* KeywordReserved */
.kr { .kr {
color: #66d9ef; color: #66d9ef;
} }
/* KeywordType */ /* KeywordType */
.kt { .kt {
color: #66d9ef; color: #66d9ef;
} }
/* Name */ /* Name */
.n { .n {
} }
/* NameAttribute */ /* NameAttribute */
.na { .na {
color: #a6e22e; color: #a6e22e;
} }
/* NameBuiltin */ /* NameBuiltin */
.nb { .nb {
} }
/* NameBuiltinPseudo */ /* NameBuiltinPseudo */
.bp { .bp {
} }
/* NameClass */ /* NameClass */
.nc { .nc {
color: #a6e22e; color: #a6e22e;
} }
/* NameConstant */ /* NameConstant */
.no { .no {
color: #66d9ef; color: #66d9ef;
} }
/* NameDecorator */ /* NameDecorator */
.nd { .nd {
color: #a6e22e; color: #a6e22e;
} }
/* NameEntity */ /* NameEntity */
.ni { .ni {
} }
/* NameException */ /* NameException */
.ne { .ne {
color: #a6e22e; color: #a6e22e;
} }
/* NameFunction */ /* NameFunction */
.nf { .nf {
color: #a6e22e; color: #a6e22e;
} }
/* NameFunctionMagic */ /* NameFunctionMagic */
.fm { .fm {
} }
/* NameLabel */ /* NameLabel */
.nl { .nl {
} }
/* NameNamespace */ /* NameNamespace */
.nn { .nn {
} }
/* NameOther */ /* NameOther */
.nx { .nx {
color: #a6e22e; color: #a6e22e;
} }
/* NameProperty */ /* NameProperty */
.py { .py {
} }
/* NameTag */ /* NameTag */
.nt { .nt {
color: #f92672; color: #f92672;
} }
/* NameVariable */ /* NameVariable */
.nv { .nv {
} }
/* NameVariableClass */ /* NameVariableClass */
.vc { .vc {
} }
/* NameVariableGlobal */ /* NameVariableGlobal */
.vg { .vg {
} }
/* NameVariableInstance */ /* NameVariableInstance */
.vi { .vi {
} }
/* NameVariableMagic */ /* NameVariableMagic */
.vm { .vm {
} }
/* Literal */ /* Literal */
.l { .l {
color: #ae81ff; color: #ae81ff;
} }
/* LiteralDate */ /* LiteralDate */
.ld { .ld {
color: #e6db74; color: #e6db74;
} }
/* LiteralString */ /* LiteralString */
.s { .s {
color: #e6db74; color: #e6db74;
} }
/* LiteralStringAffix */ /* LiteralStringAffix */
.sa { .sa {
color: #e6db74; color: #e6db74;
} }
/* LiteralStringBacktick */ /* LiteralStringBacktick */
.sb { .sb {
color: #e6db74; color: #e6db74;
} }
/* LiteralStringChar */ /* LiteralStringChar */
.sc { .sc {
color: #e6db74; color: #e6db74;
} }
/* LiteralStringDelimiter */ /* LiteralStringDelimiter */
.dl { .dl {
color: #e6db74; color: #e6db74;
} }
/* LiteralStringDoc */ /* LiteralStringDoc */
.sd { .sd {
color: #e6db74; color: #e6db74;
} }
/* LiteralStringDouble */ /* LiteralStringDouble */
.s2 { .s2 {
color: #e6db74; color: #e6db74;
} }
/* LiteralStringEscape */ /* LiteralStringEscape */
.se { .se {
color: #ae81ff; color: #ae81ff;
} }
/* LiteralStringHeredoc */ /* LiteralStringHeredoc */
.sh { .sh {
color: #e6db74; color: #e6db74;
} }
/* LiteralStringInterpol */ /* LiteralStringInterpol */
.si { .si {
color: #e6db74; color: #e6db74;
} }
/* LiteralStringOther */ /* LiteralStringOther */
.sx { .sx {
color: #e6db74; color: #e6db74;
} }
/* LiteralStringRegex */ /* LiteralStringRegex */
.sr { .sr {
color: #e6db74; color: #e6db74;
} }
/* LiteralStringSingle */ /* LiteralStringSingle */
.s1 { .s1 {
color: #e6db74; color: #e6db74;
} }
/* LiteralStringSymbol */ /* LiteralStringSymbol */
.ss { .ss {
color: #e6db74; color: #e6db74;
} }
/* LiteralNumber */ /* LiteralNumber */
.m { .m {
color: #ae81ff; color: #ae81ff;
} }
/* LiteralNumberBin */ /* LiteralNumberBin */
.mb { .mb {
color: #ae81ff; color: #ae81ff;
} }
/* LiteralNumberFloat */ /* LiteralNumberFloat */
.mf { .mf {
color: #ae81ff; color: #ae81ff;
} }
/* LiteralNumberHex */ /* LiteralNumberHex */
.mh { .mh {
color: #ae81ff; color: #ae81ff;
} }
/* LiteralNumberInteger */ /* LiteralNumberInteger */
.mi { .mi {
color: #ae81ff; color: #ae81ff;
} }
/* LiteralNumberIntegerLong */ /* LiteralNumberIntegerLong */
.il { .il {
color: #ae81ff; color: #ae81ff;
} }
/* LiteralNumberOct */ /* LiteralNumberOct */
.mo { .mo {
color: #ae81ff; color: #ae81ff;
} }
/* Operator */ /* Operator */
.o { .o {
color: #f92672; color: #f92672;
} }
/* OperatorWord */ /* OperatorWord */
.ow { .ow {
color: #f92672; color: #f92672;
} }
/* Punctuation */ /* Punctuation */
.p { .p {
} }
/* Comment */ /* Comment */
.c { .c {
color: #75715e; color: #75715e;
} }
/* CommentHashbang */ /* CommentHashbang */
.ch { .ch {
color: #75715e; color: #75715e;
} }
/* CommentMultiline */ /* CommentMultiline */
.cm { .cm {
color: #75715e; color: #75715e;
} }
/* CommentSingle */ /* CommentSingle */
.c1 { .c1 {
color: #75715e; color: #75715e;
} }
/* CommentSpecial */ /* CommentSpecial */
.cs { .cs {
color: #75715e; color: #75715e;
} }
/* CommentPreproc */ /* CommentPreproc */
.cp { .cp {
color: #75715e; color: #75715e;
} }
/* CommentPreprocFile */ /* CommentPreprocFile */
.cpf { .cpf {
color: #75715e; color: #75715e;
} }
/* Generic */ /* Generic */
.g { .g {
} }
/* GenericDeleted */ /* GenericDeleted */
.gd { .gd {
color: #f92672; color: #f92672;
} }
/* GenericEmph */ /* GenericEmph */
.ge { .ge {
font-style: italic; font-style: italic;
} }
/* GenericError */ /* GenericError */
.gr { .gr {
} }
/* GenericHeading */ /* GenericHeading */
.gh { .gh {
} }
/* GenericInserted */ /* GenericInserted */
.gi { .gi {
color: #a6e22e; color: #a6e22e;
} }
/* GenericOutput */ /* GenericOutput */
.go { .go {
} }
/* GenericPrompt */ /* GenericPrompt */
.gp { .gp {
} }
/* GenericStrong */ /* GenericStrong */
.gs { .gs {
font-weight: bold; font-weight: bold;
} }
/* GenericSubheading */ /* GenericSubheading */
.gu { .gu {
color: #75715e; color: #75715e;
} }
/* GenericTraceback */ /* GenericTraceback */
.gt { .gt {
} }
/* GenericUnderline */ /* GenericUnderline */
.gl { .gl {
} }
/* TextWhitespace */ /* TextWhitespace */
.w { .w {
} }
} }
themes/maik-blog/i18n/en.toml
+3 -3
View File
@@ -25,14 +25,14 @@ other = "Oops, page not found…"
# posts/single.html # posts/single.html
# #
[readingTime] [readingTime]
one = "One minute" one = "One minute"
other = "{{ .Count }} minutes" other = "{{ .Count }} minutes"
[tableOfContents] [tableOfContents]
other = "Table of Contents" other = "Table of Contents"
[wordCount] [wordCount]
one = "One Word" one = "One Word"
other = "{{ .Count }} Words" other = "{{ .Count }} Words"
[post] [post]
@@ -44,4 +44,4 @@ present = "Present"
skillsDeveloped = "Skills developed" skillsDeveloped = "Skills developed"
viewSource = "View source" viewSource = "View source"
viewSourceKind = "View {{ . }} source" viewSourceKind = "View {{ . }} source"
liveDemo = "Live demo" liveDemo = "Live demo"
themes/maik-blog/theme.toml
+16 -6
View File
@@ -1,14 +1,24 @@
name = "maik-blog" name = "maik-blog"
description = "A simple theme for my blog." description = "A simple theme for my blog."
tags = ["blog", "clean", "dark", "light", "monochromatic", "personal", "responsive"] tags = [
"blog",
"clean",
"dark",
"light",
"monochromatic",
"personal",
"responsive",
"technical",
"highlighting",
]
features = ["blog", "shortcode", "syntax highlighting"] features = ["blog", "shortcode", "syntax highlighting"]
min_version = 0.30 min_version = 0.30
[author] [author]
name = "Maik de Kruif" name = "Maik de Kruif"
homepage = "https://maik.dev/" homepage = "https://maik.dev/"
[original] [original]
name = "hello-friend" name = "hello-friend"
homepage = "https://github.com/panr/hugo-theme-hello-friend" homepage = "https://github.com/panr/hugo-theme-hello-friend"
repo = "https://github.com/panr/hugo-theme-hello-friend" repo = "https://github.com/panr/hugo-theme-hello-friend"