parent
dd9e97016c
commit
c859780f74
26 changed files with 1918 additions and 1900 deletions
@ -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 |
||||
|
||||
@ -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 |
||||
|
||||
@ -1,5 +1,5 @@ |
||||
baseURL = "https://maik.dev/" |
||||
|
||||
[services] |
||||
[services.googleAnalytics] |
||||
id = "UA-136337666-1" |
||||
[services.googleAnalytics] |
||||
id = "UA-136337666-1" |
||||
|
||||
@ -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); |
||||
}); |
||||
|
||||
@ -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; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@ -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"); |
||||
} |
||||
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"); |
||||
} |
||||
|
||||
@ -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; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@ -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; |
||||
} |
||||
|
||||
@ -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; |
||||
} |
||||
} |
||||
|
||||
@ -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; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@ -1,3 +1,3 @@ |
||||
@mixin dimmed { |
||||
opacity: .6; |
||||
} |
||||
opacity: 0.6; |
||||
} |
||||
|
||||
@ -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; |
||||
} |
||||
} |
||||
|
||||
@ -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; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@ -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; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@ -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; |
||||
} |
||||
} |
||||
.resp-sharing-button--small svg { |
||||
margin: 0; |
||||
vertical-align: middle; |
||||
} |
||||
} |
||||
|
||||
@ -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 { |
||||
} |
||||
} |
||||
|
||||
@ -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" |
||||
|
||||
Loading…
Reference in new issue