From c859780f74f3284b1f8c11836db115f9220c1145 Mon Sep 17 00:00:00 2001 From: Maik de Kruif Date: Sat, 23 Nov 2024 17:31:14 +0100 Subject: [PATCH] Use 4 level indentation everywhere --- .github/workflows/hugo_cd.yml | 110 +-- .github/workflows/hugo_ci.yml | 50 +- config/_default/hugo.toml | 351 ++++---- config/production/hugo.toml | 4 +- themes/maik-blog/assets/js/menu.js | 16 +- themes/maik-blog/assets/js/nav.js | 56 +- themes/maik-blog/assets/js/theme.js | 26 +- themes/maik-blog/assets/scss/_buttons.scss | 152 ++-- themes/maik-blog/assets/scss/_code.scss | 13 +- themes/maik-blog/assets/scss/_fonts.scss | 74 +- themes/maik-blog/assets/scss/_footer.scss | 120 +-- themes/maik-blog/assets/scss/_header.scss | 72 +- themes/maik-blog/assets/scss/_logo.scss | 78 +- themes/maik-blog/assets/scss/_main.scss | 708 ++++++++-------- themes/maik-blog/assets/scss/_masonry.scss | 22 +- themes/maik-blog/assets/scss/_menu.scss | 108 +-- themes/maik-blog/assets/scss/_mixins.scss | 4 +- themes/maik-blog/assets/scss/_normalize.scss | 122 +-- themes/maik-blog/assets/scss/_portfolio.scss | 330 ++++---- themes/maik-blog/assets/scss/_portfolios.scss | 348 ++++---- themes/maik-blog/assets/scss/_posts.scss | 164 ++-- .../assets/scss/_sharing-buttons.scss | 56 +- themes/maik-blog/assets/scss/_variables.scss | 6 +- .../assets/scss/syntax_highlighting.scss | 800 +++++++++--------- themes/maik-blog/i18n/en.toml | 6 +- themes/maik-blog/theme.toml | 22 +- 26 files changed, 1918 insertions(+), 1900 deletions(-) diff --git a/.github/workflows/hugo_cd.yml b/.github/workflows/hugo_cd.yml index baf74c7..b928728 100644 --- a/.github/workflows/hugo_cd.yml +++ b/.github/workflows/hugo_cd.yml @@ -1,62 +1,62 @@ name: Hugo CD on: - push: - branches: - - "master" + push: + branches: + - "master" defaults: - run: - working-directory: ./ + run: + working-directory: ./ jobs: - build: - timeout-minutes: 6 - name: Build - runs-on: ubuntu-latest - steps: - - name: Checkout code - uses: actions/checkout@v4 - - - name: Setup hugo - uses: peaceiris/actions-hugo@v3 - with: - hugo-version: "latest" - extended: true - - - name: Build - run: hugo --minify - - - name: Upload deployment - uses: actions/upload-artifact@v4 - with: - name: public-html - path: ./public - - deploy: - timeout-minutes: 6 - name: Deploy - runs-on: ubuntu-latest - needs: build - environment: - name: production - url: https://maik.dev/ - steps: - - name: Download deployment - uses: actions/download-artifact@v4 - with: - name: public-html - path: ./public-html - - - name: Setup SSH config for remote server - run: | - mkdir -p ~/.ssh - echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/id_ed25519 - echo "${{ secrets.SSH_HOST }} ssh-ed25519 ${{ secrets.SSH_HOST_KEY }}" > ~/.ssh/known_hosts - chmod 600 ~/.ssh/id_ed25519 - eval "$(ssh-agent -s)" - ssh-add ~/.ssh/id_ed25519 - - - name: Transfer deployment to remote server - run: | - rsync -avh --delete-after ./public-html/ ${{ secrets.SSH_USERNAME }}@${{ secrets.SSH_HOST }}:~/maik.dev + build: + timeout-minutes: 6 + name: Build + runs-on: ubuntu-latest + steps: + - name: Checkout code + uses: actions/checkout@v4 + + - name: Setup hugo + uses: peaceiris/actions-hugo@v3 + with: + hugo-version: "latest" + extended: true + + - name: Build + run: hugo --minify + + - name: Upload deployment + uses: actions/upload-artifact@v4 + with: + name: public-html + path: ./public + + deploy: + timeout-minutes: 6 + name: Deploy + runs-on: ubuntu-latest + needs: build + environment: + name: production + url: https://maik.dev/ + steps: + - name: Download deployment + uses: actions/download-artifact@v4 + with: + name: public-html + path: ./public-html + + - name: Setup SSH config for remote server + run: | + mkdir -p ~/.ssh + echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/id_ed25519 + echo "${{ secrets.SSH_HOST }} ssh-ed25519 ${{ secrets.SSH_HOST_KEY }}" > ~/.ssh/known_hosts + chmod 600 ~/.ssh/id_ed25519 + eval "$(ssh-agent -s)" + ssh-add ~/.ssh/id_ed25519 + + - name: Transfer deployment to remote server + run: | + rsync -avh --delete-after ./public-html/ ${{ secrets.SSH_USERNAME }}@${{ secrets.SSH_HOST }}:~/maik.dev diff --git a/.github/workflows/hugo_ci.yml b/.github/workflows/hugo_ci.yml index 288be68..45ba16e 100644 --- a/.github/workflows/hugo_ci.yml +++ b/.github/workflows/hugo_ci.yml @@ -1,34 +1,34 @@ name: Hugo CI on: - push: - branches: - - "*" - - "*/*" - - "**" - - "!master" - pull_request: - branches: - - "master" + push: + branches: + - "*" + - "*/*" + - "**" + - "!master" + pull_request: + branches: + - "master" defaults: - run: - working-directory: ./ + run: + working-directory: ./ jobs: - ci: - timeout-minutes: 5 - name: CI - runs-on: ubuntu-latest - steps: - - name: Checkout code - uses: actions/checkout@v4 + ci: + timeout-minutes: 5 + name: CI + runs-on: ubuntu-latest + steps: + - name: Checkout code + uses: actions/checkout@v4 - - name: Setup hugo - uses: peaceiris/actions-hugo@v3 - with: - hugo-version: "latest" - extended: true + - name: Setup hugo + uses: peaceiris/actions-hugo@v3 + with: + hugo-version: "latest" + extended: true - - name: Build - run: hugo -D -F + - name: Build + run: hugo -D -F diff --git a/config/_default/hugo.toml b/config/_default/hugo.toml index a831c6f..59b7747 100644 --- a/config/_default/hugo.toml +++ b/config/_default/hugo.toml @@ -10,192 +10,199 @@ pygmentsUseClasses = true PygmentsStyle = "monokai" archetypeDir = "archetypes" -contentDir = "content" -dataDir = "data" -layoutDir = "layouts" -publishDir = "public" +contentDir = "content" +dataDir = "data" +layoutDir = "layouts" +publishDir = "public" -buildDrafts = false -buildFuture = false +buildDrafts = false +buildFuture = false buildExpired = false canonifyURLs = true enableRobotsTXT = true -enableGitInfo = true -enableEmoji = true +enableGitInfo = true +enableEmoji = true [permalinks] - [permalinks.page] - posts = "/posts/:title/" - writeups = "/:sections/:title/" - # writeups = "/writeups/:title/" - portfolio = "/portfolio/:title/" +[permalinks.page] +posts = "/posts/:title/" +writeups = "/:sections/:title/" +# writeups = "/writeups/:title/" +portfolio = "/portfolio/:title/" [outputs] - home = ["HTML", "RSS"] - page = ["HTML", "RSS"] +home = ["HTML", "RSS"] +page = ["HTML", "RSS"] [pagination] - pagerSize = 12 +pagerSize = 12 [params] - dateform = "Jan 2, 2006" - dateformShort = "Jan 2" - dateformNum = "2006-01-02" - dateformNumTime = "2006-01-02 15:04 -0700" - dateformMonth = "Jan, 2006" - - # 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." - keywords = "Devloper, Software Engineer, Software Developer, Maik, Computer Science, Portfolio, Blog, Maik de Kruif" - images = [""] - - genre = "Blog" - - rssLimit = 15 - - showReadingTimeInList = false - - homeSubtitle = "Software Engineering, Linux and Cyber Security" - - # Prefix of link to the git commit detail page. GitInfo must be enabled. - gitUrl = "https://github.com/maikka39/Personal-Website/commit/" - - # Add domain for GoatCounter to enable - goatCounter = "webstats.maik.dev" - - # Show pageviews on posts, writeups, etc. - showPageViews = true - - # Set disableReadOtherPosts to true in order to hide the links to other posts. - disableReadOtherPosts = false - - # Sharing buttons - # There are a lot of buttons preconfigured. If you want to change them, - # generate the buttons here: https://sharingbuttons.io - # and add them into your own `layouts/partials/sharing-buttons.html` - # Preconfigured: facebook, twitter, tumblr, email, pinterest, linkedin, reddit, xing, whatsapp, hackernews, telegram - enableSharingButtons = true - sharingButtons = ["twitter", "email", "linkedin", "reddit", "whatsapp", "telegram"] - - # 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" - customCSS = [] - customJS = [] - - # Toggle this option need to rebuild SCSS, requires extended version of Hugo - justifyContent = false # Set "text-align: justify" to .post-content. - - # Default theme "light" or "dark" - defaultTheme = "light" - themeColor = "#252627" - - # Colors for favicons - [params.favicon.color] - mask = "#252627" - msapplication = "#252627" - theme = "#252627" - - [params.logo] - logoText = "$ cd /home/" - logoHomeLink = "/" - - # Uncomment this if you want a portrait on your start page - [params.portrait] - path = "/img/home/portrait.png" - alt = "Portrait" - size = "175px" - - [params.author] - name = "Maik de Kruif" - email = "maik@maik.dev" - twitter = "@maik_dev" - image = "/img/home/portrait.png" - - [params.general] - twitter = "@maik_dev" - - # Wallets - [[params.wallets]] - name = "XMR" - address = "83cfsXGHPaW81hKJtAPYZEgbfFqANMTXXRwghsBpjf5oTDRV3BnCC4jFno8tLTnF4C6gJzGjPEmpvjntXaiGBB7kVitkDKi" - - # Social icons - [[params.social]] - name = "email" - url = "mailto:maik@maik.dev" - - [[params.social]] - name = "github" - url = "https://github.com/maikka39" - - [[params.social]] - name = "linkedin" - url = "https://www.linkedin.com/in/maikdekruif/" - - [[params.social]] - name = "twitter" - url = "https://twitter.com/maik_dev" - - [[params.social]] - name = "discord" - url = "https://discord.gg/wXCMdzCDcH" - - [[params.social]] - name = "instagram" - url = "https://www.instagram.com/maik.dev/" - - [[params.social]] - name = "stackoverflow" - url = "https://stackoverflow.com/users/9146982/maik-de-kruif" - - # [[params.social]] - # name = "rss" - # url = "posts/index.xml" - - # [[params.social]] - # name = "hackerrank" - # url = "https://www.hackerrank.com/maik_dev" - - # [[params.social]] - # name = "medium" - # url = "https://medium.com/@maikka39" - - [[params.social]] - name = "steam" - url = "https://steamcommunity.com/id/maikka39" - - [[params.social]] - name = "reddit" - url = "https://www.reddit.com/user/maikka39" - - # [[params.social]] - # name = "lbry" - # url = "https://lbry.tv/@Maik:c" - - [[params.social]] - name = "youtube" - url = "https://www.youtube.com/channel/UCepNO6s7q0Kcyn8cc3rZNFA" +dateform = "Jan 2, 2006" +dateformShort = "Jan 2" +dateformNum = "2006-01-02" +dateformNumTime = "2006-01-02 15:04 -0700" +dateformMonth = "Jan, 2006" + +# 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." +keywords = "Devloper, Software Engineer, Software Developer, Maik, Computer Science, Portfolio, Blog, Maik de Kruif" +images = [""] + +genre = "Blog" + +rssLimit = 15 + +showReadingTimeInList = false + +homeSubtitle = "Software Engineering, Linux and Cyber Security" + +# Prefix of link to the git commit detail page. GitInfo must be enabled. +gitUrl = "https://github.com/maikka39/Personal-Website/commit/" + +# Add domain for GoatCounter to enable +goatCounter = "webstats.maik.dev" + +# Show pageviews on posts, writeups, etc. +showPageViews = true + +# Set disableReadOtherPosts to true in order to hide the links to other posts. +disableReadOtherPosts = false + +# Sharing buttons +# There are a lot of buttons preconfigured. If you want to change them, +# generate the buttons here: https://sharingbuttons.io +# and add them into your own `layouts/partials/sharing-buttons.html` +# Preconfigured: facebook, twitter, tumblr, email, pinterest, linkedin, reddit, xing, whatsapp, hackernews, telegram +enableSharingButtons = true +sharingButtons = [ + "twitter", + "email", + "linkedin", + "reddit", + "whatsapp", + "telegram", +] + +# 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" +customCSS = [] +customJS = [] + +# Toggle this option need to rebuild SCSS, requires extended version of Hugo +justifyContent = false # Set "text-align: justify" to .post-content. + +# Default theme "light" or "dark" +defaultTheme = "light" +themeColor = "#252627" + +# Colors for favicons +[params.favicon.color] +mask = "#252627" +msapplication = "#252627" +theme = "#252627" + +[params.logo] +logoText = "$ cd /home/" +logoHomeLink = "/" + +# Uncomment this if you want a portrait on your start page +[params.portrait] +path = "/img/home/portrait.png" +alt = "Portrait" +size = "175px" + +[params.author] +name = "Maik de Kruif" +email = "maik@maik.dev" +twitter = "@maik_dev" +image = "/img/home/portrait.png" + +[params.general] +twitter = "@maik_dev" + +# Wallets +[[params.wallets]] +name = "XMR" +address = "83cfsXGHPaW81hKJtAPYZEgbfFqANMTXXRwghsBpjf5oTDRV3BnCC4jFno8tLTnF4C6gJzGjPEmpvjntXaiGBB7kVitkDKi" + +# Social icons +[[params.social]] +name = "email" +url = "mailto:maik@maik.dev" + +[[params.social]] +name = "github" +url = "https://github.com/maikka39" + +[[params.social]] +name = "linkedin" +url = "https://www.linkedin.com/in/maikdekruif/" + +[[params.social]] +name = "twitter" +url = "https://twitter.com/maik_dev" + +[[params.social]] +name = "discord" +url = "https://discord.gg/wXCMdzCDcH" + +[[params.social]] +name = "instagram" +url = "https://www.instagram.com/maik.dev/" + +[[params.social]] +name = "stackoverflow" +url = "https://stackoverflow.com/users/9146982/maik-de-kruif" + +# [[params.social]] +# name = "rss" +# url = "posts/index.xml" + +# [[params.social]] +# name = "hackerrank" +# url = "https://www.hackerrank.com/maik_dev" + +# [[params.social]] +# name = "medium" +# url = "https://medium.com/@maikka39" + +[[params.social]] +name = "steam" +url = "https://steamcommunity.com/id/maikka39" + +[[params.social]] +name = "reddit" +url = "https://www.reddit.com/user/maikka39" + +# [[params.social]] +# name = "lbry" +# url = "https://lbry.tv/@Maik:c" + +[[params.social]] +name = "youtube" +url = "https://www.youtube.com/channel/UCepNO6s7q0Kcyn8cc3rZNFA" [languages] - [languages.en] - weight = 1 - copyright = "© Maik de Kruif (maik_dev). All rights reserved." +[languages.en] +weight = 1 +copyright = "© Maik de Kruif (maik_dev). All rights reserved." [menu] - [[menu.main]] - identifier = "about" - name = "About" - url = "about/" - [[menu.main]] - identifier = "portfolio" - name = "Portfolio" - url = "portfolio/" - [[menu.main]] - identifier = "posts" - name = "Posts" - url = "posts/" - [[menu.main]] - identifier = "writeups" - name = "Writeups" - url = "writeups/" +[[menu.main]] +identifier = "about" +name = "About" +url = "about/" +[[menu.main]] +identifier = "portfolio" +name = "Portfolio" +url = "portfolio/" +[[menu.main]] +identifier = "posts" +name = "Posts" +url = "posts/" +[[menu.main]] +identifier = "writeups" +name = "Writeups" +url = "writeups/" diff --git a/config/production/hugo.toml b/config/production/hugo.toml index bfd6738..e09f9ce 100644 --- a/config/production/hugo.toml +++ b/config/production/hugo.toml @@ -1,5 +1,5 @@ baseURL = "https://maik.dev/" [services] - [services.googleAnalytics] - id = "UA-136337666-1" +[services.googleAnalytics] +id = "UA-136337666-1" diff --git a/themes/maik-blog/assets/js/menu.js b/themes/maik-blog/assets/js/menu.js index 3d7dba6..2b06f49 100644 --- a/themes/maik-blog/assets/js/menu.js +++ b/themes/maik-blog/assets/js/menu.js @@ -3,20 +3,20 @@ const menuTrigger = document.querySelector(".menu-trigger"); const menu = document.querySelector(".menu"); const mobileQuery = getComputedStyle(document.body).getPropertyValue( - "--phoneWidth" + "--phoneWidth" ); const isMobile = () => window.matchMedia(mobileQuery).matches; const isMobileMenu = () => { - menuTrigger && menuTrigger.classList.toggle("hidden", !isMobile()); - menu && menu.classList.toggle("hidden", isMobile()); + menuTrigger && menuTrigger.classList.toggle("hidden", !isMobile()); + menu && menu.classList.toggle("hidden", isMobile()); }; isMobileMenu(); menuTrigger && - menuTrigger.addEventListener( - "click", - () => menu && menu.classList.toggle("hidden") - ); + menuTrigger.addEventListener( + "click", + () => menu && menu.classList.toggle("hidden") + ); -window.addEventListener("resize", isMobileMenu); \ No newline at end of file +window.addEventListener("resize", isMobileMenu); diff --git a/themes/maik-blog/assets/js/nav.js b/themes/maik-blog/assets/js/nav.js index 7e8c880..1ee0ddf 100644 --- a/themes/maik-blog/assets/js/nav.js +++ b/themes/maik-blog/assets/js/nav.js @@ -1,38 +1,40 @@ +// Path navigation on top left window.addEventListener("load", () => { - const terminal = document.getElementById('nav-terminal') + const terminal = document.getElementById("nav-terminal"); - const keyDown = (e) => { - if (e.keyCode === 13) { - if (document.activeElement !== document.body) return - if (terminal.textContent.length === 0) return + const keyDown = (e) => { + if (e.keyCode === 13) { + if (document.activeElement !== document.body) 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 - return - } + window.location.href = + window.location.origin + "/" + terminal.textContent; + return; + } - if (e.keyCode === 8) { - terminal.textContent = terminal.textContent.slice(0, -1) - return - } + if (e.keyCode === 8) { + terminal.textContent = terminal.textContent.slice(0, -1); + return; + } - if (e.keyCode === 192) { - if (terminal.textContent.length !== 0) return + if (e.keyCode === 192) { + if (terminal.textContent.length !== 0) return; - terminal.textContent += "~" - return - } + terminal.textContent += "~"; + return; + } - if (e.keyCode === 191) { - terminal.textContent += "/" - return - } + if (e.keyCode === 191) { + terminal.textContent += "/"; + 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); +}); diff --git a/themes/maik-blog/assets/js/theme.js b/themes/maik-blog/assets/js/theme.js index 930f638..87842ed 100644 --- a/themes/maik-blog/assets/js/theme.js +++ b/themes/maik-blog/assets/js/theme.js @@ -6,20 +6,20 @@ const isDark = theme === "dark"; var metaThemeColor = document.querySelector("meta[name=theme-color]"); if (theme !== null) { - document.body.classList.toggle("dark-theme", isDark); - isDark - ? metaThemeColor.setAttribute("content", "#252627") - : metaThemeColor.setAttribute("content", "#fafafa"); + document.body.classList.toggle("dark-theme", isDark); + isDark + ? metaThemeColor.setAttribute("content", "#252627") + : metaThemeColor.setAttribute("content", "#fafafa"); } themeToggle.addEventListener("click", () => { - document.body.classList.toggle("dark-theme"); - window.localStorage && - window.localStorage.setItem( - "theme", - document.body.classList.contains("dark-theme") ? "dark" : "light" - ); - document.body.classList.contains("dark-theme") - ? metaThemeColor.setAttribute("content", "#252627") - : metaThemeColor.setAttribute("content", "#fafafa"); + document.body.classList.toggle("dark-theme"); + window.localStorage && + window.localStorage.setItem( + "theme", + document.body.classList.contains("dark-theme") ? "dark" : "light" + ); + document.body.classList.contains("dark-theme") + ? metaThemeColor.setAttribute("content", "#252627") + : metaThemeColor.setAttribute("content", "#fafafa"); }); diff --git a/themes/maik-blog/assets/scss/_buttons.scss b/themes/maik-blog/assets/scss/_buttons.scss index 8669fd4..0c71070 100644 --- a/themes/maik-blog/assets/scss/_buttons.scss +++ b/themes/maik-blog/assets/scss/_buttons.scss @@ -1,99 +1,101 @@ .button-container { - display: table; - margin-left: auto; - margin-right: auto; + display: table; + margin-left: auto; + margin-right: auto; } button, .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; + 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 & { - border-color: $dark-background-secondary; - color: inherit; + background: $dark-background-secondary; + color: inherit; } - :hover { - transform: none; - box-shadow: none; + /* 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); + &.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, .21), 0 1px 3px rgba(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; - } + &.link { + background: none; + font-size: 1rem; + } - &.small { - font-size: .8rem; - } + &.small { + font-size: 0.8rem; + } - &.wide { - min-width: 200px; - padding: 14px 24px; - } + &.wide { + min-width: 200px; + padding: 14px 24px; + } } .code-toolbar { - margin-bottom: 20px; + 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; + .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; + .dark-theme & { + background: $dark-background-secondary; + color: inherit; + } } - } -} \ No newline at end of file +} diff --git a/themes/maik-blog/assets/scss/_code.scss b/themes/maik-blog/assets/scss/_code.scss index 5aaa407..cf52ad7 100644 --- a/themes/maik-blog/assets/scss/_code.scss +++ b/themes/maik-blog/assets/scss/_code.scss @@ -20,9 +20,8 @@ } input[type="checkbox"]:checked { - - ~.highlight, - ~.code-toolbar .highlight { + ~ .highlight, + ~ .code-toolbar .highlight { max-height: 0; padding: 0; @@ -30,7 +29,7 @@ overflow: hidden; } - ~.code-toolbar { + ~ .code-toolbar { padding: 0; border-top: none; @@ -39,11 +38,11 @@ } } - ~label { + ~ label { border-radius: 10px; } - ~label .collapsable-code__toggle:after { + ~ label .collapsable-code__toggle:after { content: attr(data-label-expand); } } @@ -117,4 +116,4 @@ .code-toolbar { margin: 0; } -} \ No newline at end of file +} diff --git a/themes/maik-blog/assets/scss/_fonts.scss b/themes/maik-blog/assets/scss/_fonts.scss index be2c5f2..cafd5ee 100644 --- a/themes/maik-blog/assets/scss/_fonts.scss +++ b/themes/maik-blog/assets/scss/_fonts.scss @@ -1,53 +1,53 @@ @font-face { - font-family: 'Inter UI'; - font-style: normal; - font-display: fallback; - font-weight: 400; - src: url("../fonts/Inter-UI-Regular.woff2") format("woff2"), - url("../fonts/Inter-UI-Regular.woff") format("woff"); + font-family: "Inter UI"; + font-style: normal; + font-display: fallback; + font-weight: 400; + src: url("../fonts/Inter-UI-Regular.woff2") format("woff2"), + url("../fonts/Inter-UI-Regular.woff") format("woff"); } @font-face { - font-family: 'Inter UI'; - font-style: italic; - font-display: fallback; - font-weight: 400; - src: url("../fonts/Inter-UI-Italic.woff2") format("woff2"), - url("../fonts/Inter-UI-Italic.woff") format("woff"); + font-family: "Inter UI"; + font-style: italic; + font-display: fallback; + font-weight: 400; + src: url("../fonts/Inter-UI-Italic.woff2") format("woff2"), + url("../fonts/Inter-UI-Italic.woff") format("woff"); } @font-face { - font-family: 'Inter UI'; - font-style: normal; - font-display: auto; - font-weight: 600; - src: url("../fonts/Inter-UI-Medium.woff2") format("woff2"), - url("../fonts/Inter-UI-Medium.woff") format("woff"); + font-family: "Inter UI"; + font-style: normal; + font-display: auto; + font-weight: 600; + src: url("../fonts/Inter-UI-Medium.woff2") format("woff2"), + url("../fonts/Inter-UI-Medium.woff") format("woff"); } @font-face { - font-family: 'Inter UI'; - font-style: italic; - font-display: fallback; - font-weight: 600; - src: url("../fonts/Inter-UI-MediumItalic.woff2") format("woff2"), - url("../fonts/Inter-UI-MediumItalic.woff") format("woff"); + font-family: "Inter UI"; + font-style: italic; + font-display: fallback; + font-weight: 600; + src: url("../fonts/Inter-UI-MediumItalic.woff2") format("woff2"), + url("../fonts/Inter-UI-MediumItalic.woff") format("woff"); } @font-face { - font-family: 'Inter UI'; - font-style: normal; - font-display: fallback; - font-weight: 800; - src: url("../fonts/Inter-UI-Bold.woff2") format("woff2"), - url("../fonts/Inter-UI-Bold.woff") format("woff"); + font-family: "Inter UI"; + font-style: normal; + font-display: fallback; + font-weight: 800; + src: url("../fonts/Inter-UI-Bold.woff2") format("woff2"), + url("../fonts/Inter-UI-Bold.woff") format("woff"); } @font-face { - font-family: 'Inter UI'; - font-style: italic; - font-display: fallback; - font-weight: 800; - src: url("../fonts/Inter-UI-BoldItalic.woff2") format("woff2"), - url("../fonts/Inter-UI-BoldItalic.woff") format("woff"); -} \ No newline at end of file + font-family: "Inter UI"; + font-style: italic; + font-display: fallback; + font-weight: 800; + src: url("../fonts/Inter-UI-BoldItalic.woff2") format("woff2"), + url("../fonts/Inter-UI-BoldItalic.woff") format("woff"); +} diff --git a/themes/maik-blog/assets/scss/_footer.scss b/themes/maik-blog/assets/scss/_footer.scss index 07ab28a..9068cb0 100644 --- a/themes/maik-blog/assets/scss/_footer.scss +++ b/themes/maik-blog/assets/scss/_footer.scss @@ -1,77 +1,77 @@ .footer { - padding: 40px 20px; - flex-grow: 0; - color: $light-color-secondary; + padding: 40px 20px; + flex-grow: 0; + color: $light-color-secondary; - &__inner { - display: flex; - align-items: center; - justify-content: center; - margin: 0 auto; - width: 760px; - max-width: 100%; + &__inner { + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + width: 760px; + max-width: 100%; - @media #{$media-size-tablet} { - flex-direction: column; + @media #{$media-size-tablet} { + flex-direction: column; + } } - } - &__content { - display: flex; - flex-direction: column; - align-items: center; - font-size: 1rem; - color: $light-color-secondary; + &__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; + &__section { + display: flex; + flex-direction: row; + align-items: center; + padding: 5px; - @media #{$media-size-tablet} { - margin-top: 10px; - } + @media #{$media-size-tablet} { + margin-top: 10px; + } - &.regular { - @media #{$media-size-tablet} { - flex-direction: column; - } - &>*:not(:last-child)::after { - content: "•"; - padding: 0 5px; + &.regular { + @media #{$media-size-tablet} { + flex-direction: column; + } + & > *:not(:last-child)::after { + content: "•"; + padding: 0 5px; - @media #{$media-size-tablet} { - content: ""; - padding: 0; - } - } + @media #{$media-size-tablet} { + content: ""; + padding: 0; + } + } - &>*:last-child { - padding: 0 5px; + & > *:last-child { + padding: 0 5px; - @media #{$media-size-tablet} { - padding: 0; - } - } - } + @media #{$media-size-tablet} { + padding: 0; + } + } + } - &.donations { - white-space: nowrap; - overflow-x: scroll; - max-width: 600px; - position: relative; + &.donations { + white-space: nowrap; + overflow-x: scroll; + max-width: 600px; + position: relative; - @media #{$media-size-tablet} { - max-width: 180px; - } + @media #{$media-size-tablet} { + max-width: 180px; + } - .wallet { - .name { - font-weight: 700; - } + .wallet { + .name { + font-weight: 700; + } + } + } } - } } - } } diff --git a/themes/maik-blog/assets/scss/_header.scss b/themes/maik-blog/assets/scss/_header.scss index 3e7035f..7218d3c 100644 --- a/themes/maik-blog/assets/scss/_header.scss +++ b/themes/maik-blog/assets/scss/_header.scss @@ -1,54 +1,54 @@ .header { - background: #fafafa; - display: flex; - align-items: center; - justify-content: center; - position: relative; - padding: 20px; - - .dark-theme & { - background: #242626; - } - - &__right { + background: #fafafa; display: flex; - flex-direction: row; align-items: center; + justify-content: center; + position: relative; + padding: 20px; - @media #{$media-size-phone} { - flex-direction: row-reverse; + .dark-theme & { + background: #242626; } - } - &__inner { - display: flex; - align-items: center; - justify-content: space-between; - margin: 0 auto; - width: 760px; - max-width: 100%; + &__right { + display: flex; + flex-direction: row; + align-items: center; + + @media #{$media-size-phone} { + flex-direction: row-reverse; + } + } - a { - text-decoration: none; + &__inner { + display: flex; + align-items: center; + justify-content: space-between; + margin: 0 auto; + width: 760px; + max-width: 100%; + + a { + text-decoration: none; + } } - } } .theme-toggle { - display: flex; - align-items: center; - justify-content: center; - line-height: 1; - cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + line-height: 1; + cursor: pointer; } .theme-toggler { - fill: currentColor; + fill: currentColor; } .unselectable { - user-select: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; + user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; } diff --git a/themes/maik-blog/assets/scss/_logo.scss b/themes/maik-blog/assets/scss/_logo.scss index c68923e..7b5bf63 100644 --- a/themes/maik-blog/assets/scss/_logo.scss +++ b/themes/maik-blog/assets/scss/_logo.scss @@ -1,42 +1,42 @@ .logo { - display: flex; - align-items: center; - text-decoration: none; - font-weight: bold; - font-display: auto; - font-family: monospace, monospace; + display: flex; + align-items: center; + text-decoration: none; + font-weight: bold; + font-display: auto; + font-family: monospace, monospace; - img { - height: 44px; - } + img { + height: 44px; + } - &__mark { - margin-right: 5px; - } + &__mark { + margin-right: 5px; + } - &__text { - font-size: 1.125rem; - } + &__text { + font-size: 1.125rem; + } - &__cursor { - display: inline-block; - width: 10px; - height: 1rem; - background: #252627; - margin-left: 2px; - border-radius: 1px; - animation: cursor 1s infinite; + &__cursor { + display: inline-block; + width: 10px; + height: 1rem; + background: #252627; + margin-left: 2px; + border-radius: 1px; + animation: cursor 1s infinite; - .dark-theme & { - background: #fafafa; + .dark-theme & { + background: #fafafa; + } } - } - @media (prefers-reduced-motion: reduce) { - &__cursor { - animation: none; + @media (prefers-reduced-motion: reduce) { + &__cursor { + animation: none; + } } - } } // // Fading @@ -56,15 +56,15 @@ // Blinking @keyframes cursor { - 0% { - visibility: hidden; - } + 0% { + visibility: hidden; + } - 50% { - visibility: hidden; - } + 50% { + visibility: hidden; + } - 100% { - visibility: visible; - } + 100% { + visibility: visible; + } } diff --git a/themes/maik-blog/assets/scss/_main.scss b/themes/maik-blog/assets/scss/_main.scss index 284c32a..a3ff14d 100644 --- a/themes/maik-blog/assets/scss/_main.scss +++ b/themes/maik-blog/assets/scss/_main.scss @@ -1,59 +1,60 @@ /* Webkit Scrollbar Customize */ ::-webkit-scrollbar { - width: 8px; - height: 8px; - background: #212020; + width: 8px; + height: 8px; + background: #212020; } ::-webkit-scrollbar-thumb { - background: #888; + background: #888; - &:hover { - background: #dcdcdc; - } + &:hover { + background: #dcdcdc; + } } html { - box-sizing: border-box; - line-height: 1.6; - letter-spacing: 0.06em; - scroll-behavior: smooth; + box-sizing: border-box; + line-height: 1.6; + letter-spacing: 0.06em; + scroll-behavior: smooth; } *, *:before, *:after { - box-sizing: inherit; + box-sizing: inherit; } body { - margin: 0; - padding: 0; - font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Roboto", - "Segoe UI", Helvetica, Arial, sans-serif; - 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} { + margin: 0; + padding: 0; + font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Roboto", + "Segoe UI", Helvetica, Arial, sans-serif; + 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; + } - &.dark-theme { - background-color: $dark-background; - color: $dark-color; - } + &.dark-theme { + background-color: $dark-background; + color: $dark-color; + } } h2, @@ -61,462 +62,461 @@ h3, h4, h5, h6 { - display: flex; - align-items: center; - line-height: 1.3; + display: flex; + align-items: center; + line-height: 1.3; } h1 { - font-size: 2.625rem; + font-size: 2.625rem; } h2 { - font-size: 1.625rem; + font-size: 1.625rem; } h3 { - font-size: 1.375rem; + font-size: 1.375rem; } h4 { - font-size: 1.125rem; + font-size: 1.125rem; } @media #{$media-size-phone} { - h1 { - font-size: 2rem; - } + h1 { + font-size: 2rem; + } - h2 { - font-size: 1.4rem; - } + h2 { + font-size: 1.4rem; + } - h3 { - font-size: 1.15rem; - } + h3 { + font-size: 1.15rem; + } - h4 { - font-size: 1.125rem; - } + h4 { + font-size: 1.125rem; + } } a { - color: inherit; + color: inherit; } img { - display: block; - width: auto; - height: auto; - max-width: 100%; + display: block; + width: auto; + height: auto; + max-width: 100%; - &.left { - margin-right: auto; - } + &.left { + margin-right: auto; + } - &.center { - margin-left: auto; - margin-right: auto; - } + &.center { + margin-left: auto; + margin-right: auto; + } - &.right { - margin-left: auto; - } + &.right { + margin-left: auto; + } - &.circle { - border-radius: 50%; - max-width: 25%; - margin: auto; - } + &.circle { + border-radius: 50%; + max-width: 25%; + margin: auto; + } } figure { - display: table; - max-width: 100%; - margin: 25px 0; + display: table; + max-width: 100%; + margin: 25px 0; - img { - border-radius: 8px; - padding: 5px; + img { + border-radius: 8px; + padding: 5px; - .dark-theme & { - background-color: #ffffff4f; + .dark-theme & { + background-color: #ffffff4f; + } } - } - - &.left { - margin-right: auto; - } - &.left-floated { - margin-right: auto; - float: left; - - img { - margin: 20px 20px 20px 0; + &.left { + margin-right: auto; } - } - - &.center { - margin-left: auto; - margin-right: auto; - } - &.right { - margin-left: auto; - } + &.left-floated { + margin-right: auto; + float: left; - &.right-floated { - margin-left: auto; - float: right; + img { + margin: 20px 20px 20px 0; + } + } - img { - margin: 20px 0 20px 20px; + &.center { + margin-left: auto; + margin-right: auto; } - } - &.rounded { - img { - border-radius: 50%; + &.right { + margin-left: auto; } - } - figcaption { - font-size: 1.125rem; - line-height: 1.3; - margin-top: 0.4em; - font-weight: bold; - opacity: 0.8; + &.right-floated { + margin-left: auto; + float: right; - &.left { - text-align: left; + img { + margin: 20px 0 20px 20px; + } } - &.center { - text-align: center; + &.rounded { + img { + border-radius: 50%; + } } - &.right { - text-align: right; - } - } + figcaption { + font-size: 1.125rem; + line-height: 1.3; + margin-top: 0.4em; + font-weight: bold; + opacity: 0.8; + + &.left { + text-align: left; + } - &.small { - max-width: 300px; - width: 90%; - margin: 5px 0; - } + &.center { + text-align: center; + } - &.inline { - display: inline-table; - } + &.right { + text-align: right; + } + } - &.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; + &.small { + max-width: 300px; + width: 90%; + margin: 5px 0; + } - figcaption { - color: #ddd3c6; - font-size: 1.5rem; + &.inline { + display: inline-table; } - &:after { - content: "Close"; - margin-top: 1rem; - text-decoration: underline; - cursor: pointer; - display: block; - color: #999288; + &.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 { - font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace; - font-display: auto; - font-feature-settings: normal; - background: $light-background-secondary; - padding: 1px 6px; - margin: 0 2px; - border-radius: 5px; - font-size: 0.95rem; - word-wrap: break-word; + font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace; + font-display: auto; + font-feature-settings: normal; + background: $light-background-secondary; + padding: 1px 6px; + margin: 0 2px; + border-radius: 5px; + font-size: 0.95rem; + word-wrap: break-word; - .dark-theme & { - background: $dark-background-secondary; - } + .dark-theme & { + background: $dark-background-secondary; + } } pre { - // background: #212020; - padding: 10px 10px 10px 20px; - border-radius: 8px; - font-size: 0.95rem; - overflow: auto; - - @media #{$media-size-phone} { - white-space: pre-wrap; - word-wrap: break-word; - } + // background: #212020; + padding: 10px 10px 10px 20px; + border-radius: 8px; + font-size: 0.95rem; + overflow: auto; - code { - background: none !important; - color: #ccc; - margin: 0; - padding: 0; - font-size: inherit; + @media #{$media-size-phone} { + white-space: pre-wrap; + word-wrap: break-word; + } - .dark-theme & { - color: inherit; + code { + background: none !important; + color: #ccc; + margin: 0; + padding: 0; + font-size: inherit; + + .dark-theme & { + color: inherit; + } } - } } blockquote { - border-left: 2px solid; - margin: 40px; - padding: 10px 20px; - - @media #{$media-size-phone} { - margin: 10px; - padding: 10px; - } - - &:before { - content: "”"; - font-family: Georgia, serif; - font-display: auto; - font-size: 3.875rem; - position: absolute; - left: -40px; - top: -20px; - } + border-left: 2px solid; + margin: 40px; + padding: 10px 20px; + + @media #{$media-size-phone} { + margin: 10px; + padding: 10px; + } - p:first-of-type { - margin-top: 0; - } + &:before { + content: "”"; + font-family: Georgia, serif; + font-display: auto; + font-size: 3.875rem; + position: absolute; + left: -40px; + top: -20px; + } + + p:first-of-type { + margin-top: 0; + } - p:last-of-type { - margin-bottom: 0; - } + p:last-of-type { + margin-bottom: 0; + } } ul, ol { - margin-left: 40px; - padding: 0; + margin-left: 40px; + padding: 0; - @media #{$media-size-phone} { - margin-left: 20px; - } + @media #{$media-size-phone} { + margin-left: 20px; + } } ol ol { - list-style-type: lower-alpha; + list-style-type: lower-alpha; } .container { - flex: 1 auto; - display: flex; - flex-direction: column; - justify-content: center; - text-align: center; + flex: 1 auto; + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; } .content { - display: flex; - flex-direction: column; - flex: 1 auto; - align-items: center; - justify-content: center; - margin: 0; - - @media #{$media-size-phone} { - margin-top: 0; - } - - &-list { - display: block; - } + display: flex; + flex-direction: column; + flex: 1 auto; + align-items: center; + justify-content: center; + margin: 0; + + @media #{$media-size-phone} { + margin-top: 0; + } + + &-list { + display: block; + } } hr { - width: 100%; - border: none; - background: $light-border-color; - height: 1px; + width: 100%; + border: none; + background: $light-border-color; + height: 1px; - .dark-theme & { - background: $dark-border-color; - } + .dark-theme & { + background: $dark-border-color; + } } svg { - height: 1em; + height: 1em; } .hidden { - display: none; + display: none; } .hide-on-phone { - @media #{$media-size-phone} { - display: none; - } + @media #{$media-size-phone} { + display: none; + } } .hide-on-tablet { - @media #{$media-size-tablet} { - display: none; - } + @media #{$media-size-tablet} { + display: none; + } } // Accessibility .screen-reader-text { - border: 0; - clip: rect(1px, 1px, 1px, 1px); - clip-path: inset(50%); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute !important; - width: 1px; - word-wrap: normal !important; + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute !important; + width: 1px; + word-wrap: normal !important; } .screen-reader-text:focus { - background-color: #f1f1f1; - border-radius: 3px; - box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); - clip: auto !important; - clip-path: none; - color: #21759b; - display: block; - font-size: 14px; - font-size: 0.875rem; - font-weight: bold; - height: auto; - width: auto; - top: 5px; - left: 5px; - line-height: normal; - padding: 15px 23px 14px; - text-decoration: none; - z-index: 100000; + background-color: #f1f1f1; + border-radius: 3px; + box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); + clip: auto !important; + clip-path: none; + color: #21759b; + display: block; + font-size: 14px; + font-size: 0.875rem; + font-weight: bold; + height: auto; + width: auto; + top: 5px; + left: 5px; + line-height: normal; + padding: 15px 23px 14px; + text-decoration: none; + z-index: 100000; } // Custom .socials { - user-select: none; + user-select: none; - svg { - font-size: 1.5rem; - } + svg { + font-size: 1.5rem; + } } table { - width: 100%; - padding: 10px 10px 10px 20px; - border-radius: 8px; - font-size: 0.95rem; - overflow: auto; - background: $light-background-secondary; + width: 100%; + padding: 10px 10px 10px 20px; + border-radius: 8px; + font-size: 0.95rem; + overflow: auto; + background: $light-background-secondary; - th { - padding: 8px 0px; - } + th { + padding: 8px 0px; + } - td { - padding: 6px 0px; + td { + padding: 6px 0px; - border-top: 1px solid $light-color-secondary; - } + border-top: 1px solid $light-color-secondary; + } - .dark-theme & { - background: $dark-background-secondary; + .dark-theme & { + background: $dark-background-secondary; - td { - border-top-color: $dark-color-secondary; + td { + border-top-color: $dark-color-secondary; + } } - } } .feather { - display: inline-block; - vertical-align: -0.125em; - width: 1em; - height: 1em; + display: inline-block; + vertical-align: -0.125em; + width: 1em; + height: 1em; } .nostyle { - text-decoration: none; + text-decoration: none; } .breadcrumbs { - display: inline; - - ol { - list-style-type: none; - margin: 0; display: inline; - li { - display: inline; + ol { + list-style-type: none; + margin: 0; + display: inline; + + li { + display: inline; + } } - } } .article-heading { - a { - position: relative; - text-decoration: none; - - &:hover { - &::after { - content: " "; - display: inline-block; - position: absolute; - top: 50%; - transform: translateY(-50%); - 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; + a { + position: relative; + text-decoration: none; + + &:hover { + &::after { + content: " "; + display: inline-block; + position: absolute; + top: 50%; + transform: translateY(-50%); + 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; + } + } } - } - } - @media #{$media-size-tablet} { - &:hover { - &::after { - left: 100%; - width: 1.2em; + @media #{$media-size-tablet} { + &:hover { + &::after { + left: 100%; + width: 1.2em; + } + } } - } } - } } diff --git a/themes/maik-blog/assets/scss/_masonry.scss b/themes/maik-blog/assets/scss/_masonry.scss index a44ffad..9ffe8cd 100644 --- a/themes/maik-blog/assets/scss/_masonry.scss +++ b/themes/maik-blog/assets/scss/_masonry.scss @@ -1,16 +1,14 @@ .masonry { - display: grid; - margin-top: 20px; - grid-gap: 20px 90px; - grid-template-columns: repeat(2, minmax(250px, 1fr)); - // grid-auto-rows: 20px; // Set by JavaScript - // margin-bottom: calc(4 * 20px); // Set by JavaScript + display: grid; + margin-top: 20px; + grid-gap: 20px 90px; + grid-template-columns: repeat(2, minmax(250px, 1fr)); - > * { - margin: 0; - } + > * { + margin: 0; + } - @media #{$media-size-medium} { - grid-template-columns: 1fr; - } + @media #{$media-size-medium} { + grid-template-columns: 1fr; + } } diff --git a/themes/maik-blog/assets/scss/_menu.scss b/themes/maik-blog/assets/scss/_menu.scss index c6e1633..871d0c0 100644 --- a/themes/maik-blog/assets/scss/_menu.scss +++ b/themes/maik-blog/assets/scss/_menu.scss @@ -1,67 +1,67 @@ .menu { - background: #fafafa; - border-right: 1px solid; - margin-right: 18px; - z-index: 9999; + background: #fafafa; + border-right: 1px solid; + margin-right: 18px; + z-index: 9999; - .dark-theme & { - 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; + .dark-theme & { + background: #252627; } @media #{$media-size-phone} { - flex-direction: column; - align-items: flex-start; - padding: 0; - - li { + position: absolute; + top: 50px; + right: 0; + border: none; margin: 0; - padding: 5px; - } + padding: 10px; } - } - &-trigger { - width: 24px; - height: 24px; - fill: currentColor; - margin-left: 10px; - cursor: pointer; - } + &__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; + } - a { - display: inline-block; - margin-right: 15px; - text-decoration: none; + @media #{$media-size-phone} { + flex-direction: column; + align-items: flex-start; + padding: 0; - &:hover { - text-decoration: underline; + li { + margin: 0; + padding: 5px; + } + } } - &:last-of-type { - margin-right: 0; + &-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; + } } - } -} \ No newline at end of file +} diff --git a/themes/maik-blog/assets/scss/_mixins.scss b/themes/maik-blog/assets/scss/_mixins.scss index a5163b3..533d875 100644 --- a/themes/maik-blog/assets/scss/_mixins.scss +++ b/themes/maik-blog/assets/scss/_mixins.scss @@ -1,3 +1,3 @@ @mixin dimmed { - opacity: .6; -} \ No newline at end of file + opacity: 0.6; +} diff --git a/themes/maik-blog/assets/scss/_normalize.scss b/themes/maik-blog/assets/scss/_normalize.scss index 420cc95..a02b6c2 100644 --- a/themes/maik-blog/assets/scss/_normalize.scss +++ b/themes/maik-blog/assets/scss/_normalize.scss @@ -8,8 +8,8 @@ * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { - line-height: 1.15; // 1 - -webkit-text-size-adjust: 100%; // 2 + line-height: 1.15; // 1 + -webkit-text-size-adjust: 100%; // 2 } /* Sections @@ -20,7 +20,7 @@ html { */ body { - margin: 0; + margin: 0; } /** @@ -28,7 +28,7 @@ body { */ main { - display: block; + display: block; } /** @@ -37,8 +37,8 @@ main { */ h1 { - font-size: 2em; - margin: 0.67em 0; + font-size: 2em; + margin: 0.67em 0; } /* Grouping content @@ -50,9 +50,9 @@ h1 { */ hr { - box-sizing: content-box; // 1 - height: 0; // 1 - overflow: visible; // 2 + box-sizing: content-box; // 1 + height: 0; // 1 + overflow: visible; // 2 } /** @@ -61,9 +61,9 @@ hr { */ pre { - font-family: monospace, monospace; // 1 - font-display: auto; - font-size: 1em; // 2 + font-family: monospace, monospace; // 1 + font-display: auto; + font-size: 1em; // 2 } /* Text-level semantics @@ -74,7 +74,7 @@ pre { */ a { - background-color: transparent; + background-color: transparent; } /** @@ -83,9 +83,9 @@ a { */ abbr[title] { - border-bottom: none; // 1 - text-decoration: underline; // 2 - text-decoration: underline dotted; // 2 + border-bottom: none; // 1 + text-decoration: underline; // 2 + text-decoration: underline dotted; // 2 } /** @@ -94,7 +94,7 @@ abbr[title] { b, strong { - font-weight: bolder; + font-weight: bolder; } /** @@ -105,9 +105,9 @@ strong { code, kbd, samp { - font-family: monospace, monospace; // 1 - font-display: auto; - font-size: 1em; // 2 + font-family: monospace, monospace; // 1 + font-display: auto; + font-size: 1em; // 2 } /** @@ -115,7 +115,7 @@ samp { */ small { - font-size: 80%; + font-size: 80%; } /** @@ -125,18 +125,18 @@ small { sub, sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } sub { - bottom: -0.25em; + bottom: -0.25em; } sup { - top: -0.5em; + top: -0.5em; } /* Embedded content @@ -147,7 +147,7 @@ sup { */ img { - border-style: none; + border-style: none; } /* Forms @@ -163,11 +163,11 @@ input, optgroup, select, textarea { - font-family: inherit; // 1 - font-display: auto; - font-size: 100%; // 1 - line-height: 1.15; // 1 - margin: 0; // 2 + font-family: inherit; // 1 + font-display: auto; + font-size: 100%; // 1 + line-height: 1.15; // 1 + margin: 0; // 2 } /** @@ -177,7 +177,7 @@ textarea { button, input { - overflow: visible; // 1 + overflow: visible; // 1 } /** @@ -187,7 +187,7 @@ input { button, select { - text-transform: none; // 1 + text-transform: none; // 1 } /** @@ -198,7 +198,7 @@ button, [type="button"], [type="reset"], [type="submit"] { - -webkit-appearance: button; + -webkit-appearance: button; } /** @@ -209,8 +209,8 @@ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; + border-style: none; + padding: 0; } /** @@ -221,7 +221,7 @@ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; + outline: 1px dotted ButtonText; } /** @@ -229,7 +229,7 @@ button:-moz-focusring, */ fieldset { - padding: 0.35em 0.75em 0.625em; + padding: 0.35em 0.75em 0.625em; } /** @@ -240,12 +240,12 @@ fieldset { */ legend { - box-sizing: border-box; // 1 - color: inherit; // 2 - display: table; // 1 - max-width: 100%; // 1 - padding: 0; // 3 - white-space: normal; // 1 + box-sizing: border-box; // 1 + color: inherit; // 2 + display: table; // 1 + max-width: 100%; // 1 + padding: 0; // 3 + white-space: normal; // 1 } /** @@ -253,7 +253,7 @@ legend { */ progress { - vertical-align: baseline; + vertical-align: baseline; } /** @@ -261,7 +261,7 @@ progress { */ textarea { - overflow: auto; + overflow: auto; } /** @@ -271,8 +271,8 @@ textarea { [type="checkbox"], [type="radio"] { - box-sizing: border-box; // 1 - padding: 0; // 2 + box-sizing: border-box; // 1 + padding: 0; // 2 } /** @@ -281,7 +281,7 @@ textarea { [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { - height: auto; + height: auto; } /** @@ -290,8 +290,8 @@ textarea { */ [type="search"] { - -webkit-appearance: textfield; // 1 - outline-offset: -2px; // 2 + -webkit-appearance: textfield; // 1 + outline-offset: -2px; // 2 } /** @@ -299,7 +299,7 @@ textarea { */ [type="search"]::-webkit-search-decoration { - -webkit-appearance: none; + -webkit-appearance: none; } /** @@ -308,8 +308,8 @@ textarea { */ ::-webkit-file-upload-button { - -webkit-appearance: button; // 1 - font: inherit; // 2 + -webkit-appearance: button; // 1 + font: inherit; // 2 } /* Interactive @@ -320,7 +320,7 @@ textarea { */ details { - display: block; + display: block; } /* @@ -328,7 +328,7 @@ details { */ summary { - display: list-item; + display: list-item; } /* Misc @@ -339,7 +339,7 @@ summary { */ template { - display: none; + display: none; } /** @@ -347,5 +347,5 @@ template { */ [hidden] { - display: none; -} \ No newline at end of file + display: none; +} diff --git a/themes/maik-blog/assets/scss/_portfolio.scss b/themes/maik-blog/assets/scss/_portfolio.scss index 513e8a5..196c0b2 100644 --- a/themes/maik-blog/assets/scss/_portfolio.scss +++ b/themes/maik-blog/assets/scss/_portfolio.scss @@ -1,206 +1,206 @@ .portfolio { - width: 100%; - max-width: 1000px; - text-align: left; - padding: 20px; - margin: 20px auto; + width: 100%; + max-width: 1000px; + text-align: left; + padding: 20px; + margin: 20px auto; - @media #{$media-size-medium} { - max-width: 800px; - } + @media #{$media-size-medium} { + max-width: 800px; + } + + @media #{$media-size-tablet} { + max-width: 600px; + } - @media #{$media-size-tablet} { - max-width: 600px; - } + &-title { + font-size: 2.625rem; + margin: 0 0 20px; - &-title { - font-size: 2.625rem; - margin: 0 0 20px; + @media #{$media-size-phone} { + font-size: 2rem; + } - @media #{$media-size-phone} { - font-size: 2rem; + a { + text-decoration: none; + } } - a { - text-decoration: none; + &-timespan { + margin-top: -20px; + font-size: 0.9em; } - } - &-timespan { - margin-top: -20px; - font-size: 0.9em; - } + &-tags { + display: block; + margin-bottom: 20px; + font-size: 1rem; + opacity: 0.5; - &-tags { - display: block; - margin-bottom: 20px; - font-size: 1rem; - opacity: 0.5; + a { + text-decoration: none; + } + } - a { - text-decoration: none; + &-content { + margin-top: 30px; } - } - &-content { - margin-top: 30px; - } + &-links { + font-size: 0.8em; + margin-top: -8px; + opacity: 0.7; - &-links { - font-size: 0.8em; - margin-top: -8px; - opacity: 0.7; + a { + text-decoration: none; + } - a { - text-decoration: none; + > * { + margin-right: 8px; + } } - > * { - margin-right: 8px; - } - } + &-cover { + border-radius: 8px; + margin: 30px -50px; + width: 1060px; + max-width: 1060px; - &-cover { - border-radius: 8px; - margin: 30px -50px; - width: 1060px; - max-width: 1060px; + @media #{$media-size-medium} { + max-width: 860px; + } - @media #{$media-size-medium} { - max-width: 860px; + @media #{$media-size-tablet} { + margin: 20px 0; + width: 100%; + } } - @media #{$media-size-tablet} { - margin: 20px 0; - width: 100%; - } - } + &-info { + margin-top: 30px; + font-size: 0.8rem; + line-height: normal; + @include dimmed; - &-info { - margin-top: 30px; - font-size: 0.8rem; - line-height: normal; - @include dimmed; + p { + margin: 0.8em 0; + } - 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: "#"; + } + } } - a:hover { - border-bottom: 1px solid white; + .flag { + border-radius: 50%; + margin: 0 5px; } +} - svg { - margin-right: 0.8em; +.pagination { + margin-top: 20px; + + &__title { + display: flex; + text-align: center; + position: relative; + margin: 20px 0; + + &-h { + text-align: center; + margin: 0 auto; + padding: 5px 10px; + background: $light-background; + color: $light-color-secondary; + font-size: 0.8rem; + text-transform: uppercase; + text-decoration: none; + letter-spacing: 0.1em; + z-index: 1; + + .dark-theme & { + background: $dark-background; + color: $dark-color-secondary; + } + } + + hr { + position: absolute; + left: 0; + right: 0; + width: 100%; + margin-top: 15px; + z-index: 0; + } } - .tag { - margin-right: 0.5em; - display: inline-block; + &__buttons { + display: flex; + align-items: center; + justify-content: center; - &::before { - content: "#"; - } + a { + text-decoration: none; + font-weight: bold; + } } - } - - .flag { - border-radius: 50%; - margin: 0 5px; - } } -.pagination { - margin-top: 20px; - - &__title { - display: flex; - text-align: center; +.button { position: relative; - margin: 20px 0; - - &-h { - text-align: center; - margin: 0 auto; - padding: 5px 10px; - background: $light-background; - color: $light-color-secondary; - font-size: 0.8rem; - text-transform: uppercase; - text-decoration: none; - letter-spacing: 0.1em; - z-index: 1; - - .dark-theme & { - background: $dark-background; - color: $dark-color-secondary; - } - } - - hr { - position: absolute; - left: 0; - right: 0; - width: 100%; - margin-top: 15px; - z-index: 0; - } - } - - &__buttons { - display: flex; + display: inline-flex; align-items: center; justify-content: center; + background: $light-background-secondary; + font-size: 1rem; + font-weight: 600; + border-radius: 8px; + max-width: 40%; + padding: 0; + cursor: pointer; + appearance: none; + + .dark-theme & { + background: $dark-background-secondary; + } + + + .button { + margin-left: 10px; + } a { - text-decoration: none; - font-weight: bold; + display: flex; + padding: 8px 16px; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } - } -} -.button { - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - background: $light-background-secondary; - font-size: 1rem; - font-weight: 600; - border-radius: 8px; - max-width: 40%; - padding: 0; - cursor: pointer; - appearance: none; - - .dark-theme & { - background: $dark-background-secondary; - } - - + .button { - margin-left: 10px; - } - - a { - display: flex; - padding: 8px 16px; - text-decoration: none; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - } - - &__text { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - } - - &.next .button__icon { - margin-left: 8px; - } - - &.previous .button__icon { - margin-right: 8px; - } + &__text { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + + &.next .button__icon { + margin-left: 8px; + } + + &.previous .button__icon { + margin-right: 8px; + } } diff --git a/themes/maik-blog/assets/scss/_portfolios.scss b/themes/maik-blog/assets/scss/_portfolios.scss index 37676a5..3ddb7c9 100644 --- a/themes/maik-blog/assets/scss/_portfolios.scss +++ b/themes/maik-blog/assets/scss/_portfolios.scss @@ -1,192 +1,192 @@ .portfolios { - width: 100%; - max-width: calc(1000px + 50px + 80px); - text-align: left; - padding: 20px calc(20px + 50px + 15px); - margin: 20px auto; - counter-reset: portfolio; - - @media #{$media-size-medium} { - 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; + width: 100%; + max-width: calc(1000px + 50px + 80px); + text-align: left; + padding: 20px calc(20px + 50px + 15px); + margin: 20px auto; + counter-reset: portfolio; - @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-medium} { + max-width: calc(800px + 50px + 80px); } @media #{$media-size-tablet} { - flex-direction: column-reverse; + max-width: 660px; } - .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; - } + &:not(:last-of-type) { + border-bottom: 1px solid $light-border-color; - &-content { - margin-top: 12px; + .dark-theme & { + border-color: $dark-border-color; + } } - &-item { - border-bottom: 1px grey dashed; - - a { + &-group { 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; - } - } + margin-bottom: 1.9em; + line-height: normal; - &::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; - } + @media #{$media-size-tablet} { + display: block; + } } - &::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; + &-list { + flex-grow: 1; + margin: 0; + padding: 0; + list-style: none; } - &: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; - } + .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} { + 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; + } + } } - } } diff --git a/themes/maik-blog/assets/scss/_posts.scss b/themes/maik-blog/assets/scss/_posts.scss index 0a30a4c..6928222 100644 --- a/themes/maik-blog/assets/scss/_posts.scss +++ b/themes/maik-blog/assets/scss/_posts.scss @@ -1,101 +1,101 @@ .posts { - width: 100%; - max-width: 1000px; - text-align: left; - padding: 20px; - margin: 20px auto; - - @media #{$media-size-medium} { - 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; + width: 100%; + max-width: 1000px; + text-align: left; + padding: 20px; + margin: 20px auto; + + @media #{$media-size-medium} { + max-width: 800px; } - } - - &-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; - } - - &-breadcrumbs { - margin: 0 0 -25px; - - @media #{$media-size-phone} { - font-size: 0.9rem; - margin: 0 0 -15px; + max-width: 660px; } - } - .post { - &-title { - font-size: 1.9rem; - margin: 5px 0 5px 0; - } + &:not(:last-of-type) { + border-bottom: 1px solid $light-border-color; - &-subtitle { - font-size: 1.1rem; - margin: 5px 0 10px 0; - font-weight: 600; + .dark-theme & { + border-color: $dark-border-color; + } } - &-year { - padding-top: 6px; - margin-right: 1.8em; - font-size: 1.6em; - @include dimmed; + &-group { + display: flex; + margin-bottom: 1.9em; + line-height: normal; - @media #{$media-size-tablet} { - margin: -6px 0 4px; - } + @media #{$media-size-tablet} { + display: block; + } } - &-item { - border-bottom: 1px grey dashed; - - a { - display: flex; - justify-content: space-between; - align-items: baseline; - padding: 12px 0; - text-decoration: none; - } + &-list { + flex-grow: 1; + margin: 0; + padding: 0; + list-style: none; } - &-day { - flex-shrink: 0; - margin-left: 1em; - @include dimmed; - } + &-breadcrumbs { + margin: 0 0 -25px; - &-cover { - margin-top: 20px; - margin-bottom: 20px; + @media #{$media-size-phone} { + font-size: 0.9rem; + margin: 0 0 -15px; + } } - &-content { - margin-top: 10px; - margin-bottom: 10px; + .post { + &-title { + 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; + } } - } } diff --git a/themes/maik-blog/assets/scss/_sharing-buttons.scss b/themes/maik-blog/assets/scss/_sharing-buttons.scss index ce67cc2..52c69de 100644 --- a/themes/maik-blog/assets/scss/_sharing-buttons.scss +++ b/themes/maik-blog/assets/scss/_sharing-buttons.scss @@ -1,34 +1,34 @@ .sharing-buttons { - display: flex; - flex-wrap: wrap; - justify-content: space-between; + display: flex; + flex-wrap: wrap; + justify-content: space-between; - .resp-sharing-button__icon, - .resp-sharing-button__link { - display: inline-block; - } + .resp-sharing-button__icon, + .resp-sharing-button__link { + display: inline-block; + } - .resp-sharing-button__link { - text-decoration: none; - margin: 0.5em; - } + .resp-sharing-button__link { + text-decoration: none; + margin: 0.5em; + } - .resp-sharing-button { - border-radius: 5px; - transition: 25ms ease-out; - padding: 0.5em 0.75em; - font-family: Helvetica Neue, Helvetica, Arial, sans-serif; - } + .resp-sharing-button { + border-radius: 5px; + transition: 25ms ease-out; + padding: 0.5em 0.75em; + font-family: Helvetica Neue, Helvetica, Arial, sans-serif; + } - .resp-sharing-button__icon svg { - width: 1em; - height: 1em; - margin-right: 0.4em; - vertical-align: top; - } + .resp-sharing-button__icon svg { + width: 1em; + height: 1em; + margin-right: 0.4em; + vertical-align: top; + } - .resp-sharing-button--small svg { - margin: 0; - vertical-align: middle; - } -} \ No newline at end of file + .resp-sharing-button--small svg { + margin: 0; + vertical-align: middle; + } +} diff --git a/themes/maik-blog/assets/scss/_variables.scss b/themes/maik-blog/assets/scss/_variables.scss index 97087a1..1541a84 100644 --- a/themes/maik-blog/assets/scss/_variables.scss +++ b/themes/maik-blog/assets/scss/_variables.scss @@ -23,7 +23,7 @@ $media-size-medium-min: "(min-width: 1200px)"; /* variables for js, must be the same as these in @custom-media queries */ :root { - --phoneWidth: (max-width: 684px); - --tabletWidth: (max-width: 900px); - --mediumWidth: (max-width: 1200px); + --phoneWidth: (max-width: 684px); + --tabletWidth: (max-width: 900px); + --mediumWidth: (max-width: 1200px); } diff --git a/themes/maik-blog/assets/scss/syntax_highlighting.scss b/themes/maik-blog/assets/scss/syntax_highlighting.scss index 50b8b86..ad9ce98 100644 --- a/themes/maik-blog/assets/scss/syntax_highlighting.scss +++ b/themes/maik-blog/assets/scss/syntax_highlighting.scss @@ -1,403 +1,403 @@ /* Background */ .chroma { - color: #f8f8f2; - background-color: #272822; - - /* Other */ - .x { - } - - /* Error */ - .err { - color: #960050; - background-color: #1e0010; - } - - /* LineTableTD */ - .lntd { - vertical-align: top; - padding: 0; - margin: 0; - border: 0; - } - - /* LineTable */ - .lntable { - border-spacing: 0; - padding: 0; - margin: 0; - border: 0; - width: auto; - overflow: auto; - display: block; - } - - /* LineHighlight */ - .hl { - display: block; - width: 100%; - background-color: #ffffcc; - } - - /* LineNumbersTable */ - .lnt { - margin-right: 0.4em; - padding: 0 0.4em 0 0.4em; - color: #7f7f7f; - } - - /* LineNumbers */ - .ln { - margin-right: 0.4em; - padding: 0 0.4em 0 0.4em; - color: #7f7f7f; - } - - /* Keyword */ - .k { - color: #66d9ef; - } - - /* KeywordConstant */ - .kc { - color: #66d9ef; - } - - /* KeywordDeclaration */ - .kd { - color: #66d9ef; - } - - /* KeywordNamespace */ - .kn { - color: #f92672; - } - - /* KeywordPseudo */ - .kp { - color: #66d9ef; - } - - /* KeywordReserved */ - .kr { - color: #66d9ef; - } - - /* KeywordType */ - .kt { - color: #66d9ef; - } - - /* Name */ - .n { - } - - /* NameAttribute */ - .na { - color: #a6e22e; - } - - /* NameBuiltin */ - .nb { - } - - /* NameBuiltinPseudo */ - .bp { - } - - /* NameClass */ - .nc { - color: #a6e22e; - } - - /* NameConstant */ - .no { - color: #66d9ef; - } - - /* NameDecorator */ - .nd { - color: #a6e22e; - } - - /* NameEntity */ - .ni { - } - - /* NameException */ - .ne { - color: #a6e22e; - } - - /* NameFunction */ - .nf { - color: #a6e22e; - } - - /* NameFunctionMagic */ - .fm { - } - - /* NameLabel */ - .nl { - } - - /* NameNamespace */ - .nn { - } - - /* NameOther */ - .nx { - color: #a6e22e; - } - - /* NameProperty */ - .py { - } - - /* NameTag */ - .nt { - color: #f92672; - } - - /* NameVariable */ - .nv { - } - - /* NameVariableClass */ - .vc { - } - - /* NameVariableGlobal */ - .vg { - } - - /* NameVariableInstance */ - .vi { - } - - /* NameVariableMagic */ - .vm { - } - - /* Literal */ - .l { - color: #ae81ff; - } - - /* LiteralDate */ - .ld { - color: #e6db74; - } - - /* LiteralString */ - .s { - color: #e6db74; - } - - /* LiteralStringAffix */ - .sa { - color: #e6db74; - } - - /* LiteralStringBacktick */ - .sb { - color: #e6db74; - } - - /* LiteralStringChar */ - .sc { - color: #e6db74; - } - - /* LiteralStringDelimiter */ - .dl { - color: #e6db74; - } - - /* LiteralStringDoc */ - .sd { - color: #e6db74; - } - - /* LiteralStringDouble */ - .s2 { - color: #e6db74; - } - - /* LiteralStringEscape */ - .se { - color: #ae81ff; - } - - /* LiteralStringHeredoc */ - .sh { - color: #e6db74; - } - - /* LiteralStringInterpol */ - .si { - color: #e6db74; - } - - /* LiteralStringOther */ - .sx { - color: #e6db74; - } - - /* LiteralStringRegex */ - .sr { - color: #e6db74; - } - - /* LiteralStringSingle */ - .s1 { - color: #e6db74; - } - - /* LiteralStringSymbol */ - .ss { - color: #e6db74; - } - - /* LiteralNumber */ - .m { - color: #ae81ff; - } - - /* LiteralNumberBin */ - .mb { - color: #ae81ff; - } - - /* LiteralNumberFloat */ - .mf { - color: #ae81ff; - } - - /* LiteralNumberHex */ - .mh { - color: #ae81ff; - } - - /* LiteralNumberInteger */ - .mi { - color: #ae81ff; - } - - /* LiteralNumberIntegerLong */ - .il { - color: #ae81ff; - } - - /* LiteralNumberOct */ - .mo { - color: #ae81ff; - } - - /* Operator */ - .o { - color: #f92672; - } - - /* OperatorWord */ - .ow { - color: #f92672; - } - - /* Punctuation */ - .p { - } - - /* Comment */ - .c { - color: #75715e; - } - - /* CommentHashbang */ - .ch { - color: #75715e; - } - - /* CommentMultiline */ - .cm { - color: #75715e; - } - - /* CommentSingle */ - .c1 { - color: #75715e; - } - - /* CommentSpecial */ - .cs { - color: #75715e; - } - - /* CommentPreproc */ - .cp { - color: #75715e; - } - - /* CommentPreprocFile */ - .cpf { - color: #75715e; - } - - /* Generic */ - .g { - } - - /* GenericDeleted */ - .gd { - color: #f92672; - } - - /* GenericEmph */ - .ge { - font-style: italic; - } - - /* GenericError */ - .gr { - } - - /* GenericHeading */ - .gh { - } - - /* GenericInserted */ - .gi { - color: #a6e22e; - } - - /* GenericOutput */ - .go { - } - - /* GenericPrompt */ - .gp { - } - - /* GenericStrong */ - .gs { - font-weight: bold; - } - - /* GenericSubheading */ - .gu { - color: #75715e; - } - - /* GenericTraceback */ - .gt { - } - - /* GenericUnderline */ - .gl { - } - - /* TextWhitespace */ - .w { - } + color: #f8f8f2; + background-color: #272822; + + /* Other */ + .x { + } + + /* Error */ + .err { + color: #960050; + background-color: #1e0010; + } + + /* LineTableTD */ + .lntd { + vertical-align: top; + padding: 0; + margin: 0; + border: 0; + } + + /* LineTable */ + .lntable { + border-spacing: 0; + padding: 0; + margin: 0; + border: 0; + width: auto; + overflow: auto; + display: block; + } + + /* LineHighlight */ + .hl { + display: block; + width: 100%; + background-color: #ffffcc; + } + + /* LineNumbersTable */ + .lnt { + margin-right: 0.4em; + padding: 0 0.4em 0 0.4em; + color: #7f7f7f; + } + + /* LineNumbers */ + .ln { + margin-right: 0.4em; + padding: 0 0.4em 0 0.4em; + color: #7f7f7f; + } + + /* Keyword */ + .k { + color: #66d9ef; + } + + /* KeywordConstant */ + .kc { + color: #66d9ef; + } + + /* KeywordDeclaration */ + .kd { + color: #66d9ef; + } + + /* KeywordNamespace */ + .kn { + color: #f92672; + } + + /* KeywordPseudo */ + .kp { + color: #66d9ef; + } + + /* KeywordReserved */ + .kr { + color: #66d9ef; + } + + /* KeywordType */ + .kt { + color: #66d9ef; + } + + /* Name */ + .n { + } + + /* NameAttribute */ + .na { + color: #a6e22e; + } + + /* NameBuiltin */ + .nb { + } + + /* NameBuiltinPseudo */ + .bp { + } + + /* NameClass */ + .nc { + color: #a6e22e; + } + + /* NameConstant */ + .no { + color: #66d9ef; + } + + /* NameDecorator */ + .nd { + color: #a6e22e; + } + + /* NameEntity */ + .ni { + } + + /* NameException */ + .ne { + color: #a6e22e; + } + + /* NameFunction */ + .nf { + color: #a6e22e; + } + + /* NameFunctionMagic */ + .fm { + } + + /* NameLabel */ + .nl { + } + + /* NameNamespace */ + .nn { + } + + /* NameOther */ + .nx { + color: #a6e22e; + } + + /* NameProperty */ + .py { + } + + /* NameTag */ + .nt { + color: #f92672; + } + + /* NameVariable */ + .nv { + } + + /* NameVariableClass */ + .vc { + } + + /* NameVariableGlobal */ + .vg { + } + + /* NameVariableInstance */ + .vi { + } + + /* NameVariableMagic */ + .vm { + } + + /* Literal */ + .l { + color: #ae81ff; + } + + /* LiteralDate */ + .ld { + color: #e6db74; + } + + /* LiteralString */ + .s { + color: #e6db74; + } + + /* LiteralStringAffix */ + .sa { + color: #e6db74; + } + + /* LiteralStringBacktick */ + .sb { + color: #e6db74; + } + + /* LiteralStringChar */ + .sc { + color: #e6db74; + } + + /* LiteralStringDelimiter */ + .dl { + color: #e6db74; + } + + /* LiteralStringDoc */ + .sd { + color: #e6db74; + } + + /* LiteralStringDouble */ + .s2 { + color: #e6db74; + } + + /* LiteralStringEscape */ + .se { + color: #ae81ff; + } + + /* LiteralStringHeredoc */ + .sh { + color: #e6db74; + } + + /* LiteralStringInterpol */ + .si { + color: #e6db74; + } + + /* LiteralStringOther */ + .sx { + color: #e6db74; + } + + /* LiteralStringRegex */ + .sr { + color: #e6db74; + } + + /* LiteralStringSingle */ + .s1 { + color: #e6db74; + } + + /* LiteralStringSymbol */ + .ss { + color: #e6db74; + } + + /* LiteralNumber */ + .m { + color: #ae81ff; + } + + /* LiteralNumberBin */ + .mb { + color: #ae81ff; + } + + /* LiteralNumberFloat */ + .mf { + color: #ae81ff; + } + + /* LiteralNumberHex */ + .mh { + color: #ae81ff; + } + + /* LiteralNumberInteger */ + .mi { + color: #ae81ff; + } + + /* LiteralNumberIntegerLong */ + .il { + color: #ae81ff; + } + + /* LiteralNumberOct */ + .mo { + color: #ae81ff; + } + + /* Operator */ + .o { + color: #f92672; + } + + /* OperatorWord */ + .ow { + color: #f92672; + } + + /* Punctuation */ + .p { + } + + /* Comment */ + .c { + color: #75715e; + } + + /* CommentHashbang */ + .ch { + color: #75715e; + } + + /* CommentMultiline */ + .cm { + color: #75715e; + } + + /* CommentSingle */ + .c1 { + color: #75715e; + } + + /* CommentSpecial */ + .cs { + color: #75715e; + } + + /* CommentPreproc */ + .cp { + color: #75715e; + } + + /* CommentPreprocFile */ + .cpf { + color: #75715e; + } + + /* Generic */ + .g { + } + + /* GenericDeleted */ + .gd { + color: #f92672; + } + + /* GenericEmph */ + .ge { + font-style: italic; + } + + /* GenericError */ + .gr { + } + + /* GenericHeading */ + .gh { + } + + /* GenericInserted */ + .gi { + color: #a6e22e; + } + + /* GenericOutput */ + .go { + } + + /* GenericPrompt */ + .gp { + } + + /* GenericStrong */ + .gs { + font-weight: bold; + } + + /* GenericSubheading */ + .gu { + color: #75715e; + } + + /* GenericTraceback */ + .gt { + } + + /* GenericUnderline */ + .gl { + } + + /* TextWhitespace */ + .w { + } } diff --git a/themes/maik-blog/i18n/en.toml b/themes/maik-blog/i18n/en.toml index dee1eb3..05ce9df 100644 --- a/themes/maik-blog/i18n/en.toml +++ b/themes/maik-blog/i18n/en.toml @@ -25,14 +25,14 @@ other = "Oops, page not found…" # posts/single.html # [readingTime] -one = "One minute" +one = "One minute" other = "{{ .Count }} minutes" [tableOfContents] other = "Table of Contents" [wordCount] -one = "One Word" +one = "One Word" other = "{{ .Count }} Words" [post] @@ -44,4 +44,4 @@ present = "Present" skillsDeveloped = "Skills developed" viewSource = "View source" viewSourceKind = "View {{ . }} source" -liveDemo = "Live demo" \ No newline at end of file +liveDemo = "Live demo" diff --git a/themes/maik-blog/theme.toml b/themes/maik-blog/theme.toml index 5bd223f..a4473fd 100644 --- a/themes/maik-blog/theme.toml +++ b/themes/maik-blog/theme.toml @@ -1,14 +1,24 @@ name = "maik-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"] min_version = 0.30 [author] - name = "Maik de Kruif" - homepage = "https://maik.dev/" +name = "Maik de Kruif" +homepage = "https://maik.dev/" [original] - name = "hello-friend" - homepage = "https://github.com/panr/hugo-theme-hello-friend" - repo = "https://github.com/panr/hugo-theme-hello-friend" +name = "hello-friend" +homepage = "https://github.com/panr/hugo-theme-hello-friend" +repo = "https://github.com/panr/hugo-theme-hello-friend"