Mataroa: 두 판 사이의 차이

마타로아
웹사이트 정보
URL	홈페이지 파일:GitHub-Mark-120px-plus.png깃허브
종류	블로그
언어	영어

2022년 7월 15일 (금) 09:07 판

Mataroa(마타로아)는 미니멀리즘을 추구하는 블로그 플랫폼이다.

개발자가 블로그 플랫폼들의 시각적 혼잡함, 추적기와 광고가 싫어서 만들었다고 한다.

2020년 5월 30일 이후에 만들어진 것으로 추정된다. 출처

특징

광고와 추적기, 쿠키가 없다.
RSS, 이메일 newsletter를 지원한다.
리브레 위키처럼 가입 시 이메일이 필요 없다.
언제든지 블로그 내보내기 기능을 사용할 수 있다.
만약 새로운 플랫폼으로 넘어간다면 새 도메인으로 redirect 할 수 있다.
댓글 기능이 있다.
오픈소스 이다.
html 태그를 직접 써야 된다 그러므로 편집기는 마크텍스트 같은 프로그램을 써야 편하다.
마크다운을 지원한다.
테마나 확장 프로그램 기능은 없으나 글자 크기 늘리는 테마 하나가 있다.
iframe 태그 지원이 잘 되어 있다.
Tor 브라우저를 통해 익명으로 글을 쓸 수 있다.

팁

글자 크기 늘리는 테마를 적용 한다면 웹폰트가 없기 때문에 브라우저에서 한글 세리프 폰트를 변경하는게 좋다.

지원하는 주요 문법 목록

출처: 베어 블로그 설명, 마타로아 블로그 설명

Markdown

기울임 하는법
예제
```
 *텍스트* 
```
- 결과 : 텍스트

두껍게 하는법
예제
```
 **텍스트** 
```
- 결과 : 텍스트

순서 없는 목록 만드는 법

예제

 * 텍스트 (엔터 이후 띄어쓰기 4번이상) * 텍스트

결과
- 텍스트
  - 텍스트

순서 없는 목록 만드는 법
예제
```
 1. 텍스트 2. 텍스트 
```
- 결과
  1. 텍스트
  2. 텍스트

하이퍼링크 만드는 법
예제
```
 [텍스트](링크) 혹은 <링크> 
```
- 결과 : 텍스트 혹은 링크

하이퍼링크 만드는 법
예제
```
 ![텍스트](링크) 
```
- 결과

고정폭 코드 상자 만드는 법
예제
```
 `텍스트` 
```
- 결과 : 텍스트

상자 만드는 법

예제

 
```
텍스트
```

결과

 
```
텍스트
```

인용문 만드는 법

예제

 
> 텍스트
>> 텍텍스트

결과

“ 텍스트

“ 텍텍스트 “

“

줄바꿈 하는 법
예제

 텍스트(띄어쓰기 두개)
텍스트 (리브레 위키의 <br/> 문법이랑 같음)
---
(목록)* 텍스트(띄어쓰기 두개)
텍스트(리브레 위키의 *: 문법이랑 같음)

결과

텍스트
텍스트

---

텍스트
텍스트

Html

지원하는 html 태그 목록: 링크
글자 색 변환

예시

 <span style="color: #2889E4;">텍스트</span>

결과 : 텍스트

각주 기능 만드는 법

예시

텍스트 중에
<sup id="2">
<a href="#1">1
</a>
</sup>
를 달 수 있다

결과

텍스트 중에^[1]를 달 수 있다

각주 기능 만드는 법 2

예시

<hr> </hr>
<ol> 
<li id="1">
각주 테스트 <a href="#2">↑</a>
</li>
</ol>

결과

각주 테스트 <a href="#2">↑</a>

가로줄 만드는 법
- 예시
```
 <hr></hr> 
```
- 결과

Ctrl Shift C를 애용하자

캡션 다는 법
- 예시
```
 <figcaption> 캡션 </figcaption> 
```
  사진 밑에 부가 설명을 넣을 수 있습니다.

CSS

bearblog 용 마타로아 블로그 css 입니다. 원본 출처

Custom styles: 에 붙여 넣기 하고 Extend existing styles 체크하면 됩니다.


/* reset */
html {
    /* fix line height in all browsers */
    line-height: 1.15;
    /* prevent adjustments of font size after orientation changes in iOS */
    -webkit-text-size-adjust: 100%;
}

body {
    /* remove margin in all browsers */
    margin: 0;

	
}

hr {
    /* fix height in Firefox */
    height: 0;
    /* fix inheritance of border color in Firefox */
    color: inherit;
}

abbr[title] {
    /* fix text decoration in Chrome, Edge, Safari. */
    text-decoration: underline dotted;
}

b,
strong {
    /* fix font weight in Edge and Safari */
    font-weight: bolder;
}

code,
kbd,
samp,
pre {
    /* improve consistency of default fonts in all browsers */
    font-family: monospace;
    /* correct the odd 'em' font sizing in all browsers */
    font-size: 1em;
}

small {
    /* fix font size in all browsers */
    font-size: 80%;
}

/* prevent sub and sup from affecting the line height in all browsers */
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

table {
    /* remove text indentation from table contents in Chrome and Safari */
    text-indent: 0;
    /* fix table border color inheritance in Chrome and Safari */
    border-color: inherit;
}

button,
input,
optgroup,
select,
textarea {
    /* fix font styles in all browsers */
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    /* remove margin in Firefox and Safari */
    margin: 0;
}

button,
select {
    /* remove inheritance of text transform in Edge and Firefox */
    text-transform: none;
}

button,
[type='button'],
[type='reset'],
[type='submit'] {
    /* fix inability to style clickable types in iOS and Safari */
    -webkit-appearance: button;
}

/* remove inner border and padding in Firefox */
::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

:-moz-focusring {
    /* restore focus styles unset by the previous rule */
    outline: 1px dotted ButtonText;
}

:-moz-ui-invalid {
    /* remove additional ':invalid' styles in Firefox */
    box-shadow: none;
}

progress {
    /* fix vertical alignment in Chrome and Firefox */
    vertical-align: baseline;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    /* fix cursor style of increment and decrement buttons in Safari */
    height: auto;
}

[type='search'] {
    /* fix appearance in Chrome and Safari */
    -webkit-appearance: textfield;
    /* fix outline in Safari */
    outline-offset: -2px;
}

::-webkit-search-decoration {
    /* remove inner padding in Chrome and Safari on macOS */
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    /* fix inability to style clickable types in iOS and Safari */
    -webkit-appearance: button;
    /* change font properties to 'inherit' in Safari. */
    font: inherit;
}

summary {
    /* fix display in Chrome and Safari */
    display: list-item;
}

/* general */
:root {
    --link-color: #1175e2;
    --ascent-color: #006cdf;
    --dark-grey-color: #757575;
    --light-grey-color: #eff1f5;
    --airy-grey-color: #fafafa;
    --green-color: #26bd60;
    --red-color: #ff0000;
    --purple-color: #cd1ecd;
}

/* dark mode
 * create a new color (dark-mode-color)
 * override existing colors */
@media (prefers-color-scheme: dark) {
    :root {
        --dark-mode-color: #212529;

        --link-color: #3395ff;
        --dark-grey-color: #78828a;
        --light-grey-color: #353535;
        --airy-grey-color: #2b2b2b;
        --purple-color: #dd47ec;
    }
}

html,
body {
    {% if request.theme_zialucia %}
    font-size: 20px;
    {% endif %}
    font-family: sans-serif;
    line-height: 1.5;
    margin: 0 auto;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    max-width: 100%;
    
}
@media (max-width: 34rem) {
    html,
    body {
        /* mobile base font size remains 16px whether zialucia on or off */
        font-size: 16px;
    }
}
@media (prefers-color-scheme: dark) {
    body {
        color: #fff;
        background: var(--dark-mode-color);
    }
}

a {
    text-decoration: none;
    color: var(--link-color);
}

a:hover {
    text-decoration: underline;
}

a.btn {
    display: inline-block;
    cursor: pointer;
    background: var(--link-color);
    color: #fff;
    border: 1px solid var(--ascent-color);
    padding: 8px 24px;
}

a.btn:hover,
a.btn:active {
    background: var(--ascent-color);
    text-decoration: none;
}

a.btn:disabled {
    pointer-events: none;
    background: var(--ascent-color);
}


h1 {
    font-size: 1.8rem;
    font-weight: 500;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--light-grey-color);
    margin: 16px 0;
    font-weight: bold;
    font-family: sans-serif;
}

.title h1 {
    margin: 0 auto;
    max-width: 612px;
}

h2,
h3 {
    font-weight: 500;
    margin: 16px 0;
    font-family: sans-serif;
}

main {
	font-family: serif;
	font-size: 18px;
       max-width: 612px;
    margin: 0 auto;
}

.highlight, .code {
    padding: 1px 0px;
    background-color: #2b2b2b;
    color: #ddd;
}


@media print {
    main {
        max-width: unset;
    }
}

@media print {
    article {
        page-break-before: always;
    }
}

aside {
    max-width: 34rem;
    border: 1px dashed #000;
    padding: 2px 6px;
    margin-top: 8px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
@media (max-width: 34rem) {
    aside {
        margin-left: 8px;
        margin-right: 8px;
    }
}

.alert-error {
    color: var(--red-color);
}

section {
    max-width: 34rem;
    margin-bottom: 16px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 8px;
    padding-right: 8px;
}

nav {
    max-width: 34rem;
    margin-top: 16px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 8px;
    padding-right: 8px;
}
@media print {
    nav {
        display: none;
    }
}

ol,
ul {
    padding-left: 24px;
}

blockquote {
    border-left: 4px solid var(--light-grey-color);
    padding-left: 16px;
    margin-left: 0;
    color: var(--dark-grey-color);
}

figure {
    border: 1px var(--light-grey-color) solid;
    margin: auto;
    color: var(--dark-grey-color);
}

figcaption {
    font-size: 12px;
    text-align: center;
}

dt {
    font-weight: 700;
}

dd {
    margin-left: 0;
}

table {
    border-collapse: collapse;
    border: 1px solid var(--light-grey-color);
    width: 100%;
    box-sizing: border-box;
}

thead:nth-child(odd),
tr:nth-child(even) {
    background: var(--light-grey-color);
}

th,
td {
    max-width: 0px;
    padding: 4px;
}

pre {
    background: var(--airy-grey-color);
    overflow-x: scroll;
}

code {
    background: var(--airy-grey-color);
    padding: 2px;
}

hr {
    border-top: 1px solid var(--light-grey-color);
    border-bottom: none;
    border-left: none;
    border-right: none;
}

footer {
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 32px;
    margin-bottom: 16px;
    padding-left: 8px;
    padding-right: 8px;
    color: var(--dark-grey-color);
}

.footer-comment {
    margin-bottom: 8px;
}

.help {
    cursor: help;
    text-decoration: dotted underline;
}

/* mods
 * they override specific classes with specific styles */
.type-approve {
    color: var(--green-color) !important;
}

.type-delete {
    color: var(--red-color) !important;
}

.type-danger {
    background: var(--red-color) !important;
    border-color: var(--red-color) !important;
}

/* form */
label {
    display: block;
    margin-top: 16px;
}

input[type="text"],
input[type="url"],
input[type="email"],
input[type="password"],
textarea {
    display: block;
    border: 2px solid var(--light-grey-color);
    box-sizing: border-box;
    width: 34rem;
}
@media (max-width: 34rem) {
    input[type="text"],
    input[type="url"],
    input[type="email"],
    input[type="password"],
    textarea {
        width: 100%;
    }
}
@media (prefers-color-scheme: dark) {
    input[type="text"],
    input[type="url"],
    input[type="email"],
    input[type="password"],
    textarea {
        color: #fff;
        background: var(--light-grey-color);
    }
}

input[type="submit"] {
    cursor: pointer;
    background: var(--link-color);
    color: #fff;
    border: 1px solid var(--ascent-color);
    padding: 8px 24px;
}

input[type="submit"]:hover,
input[type="submit"]:active {
    background: var(--ascent-color);
}

input[type="submit"]:disabled {
    pointer-events: none;
    background: var(--ascent-color);
}

form .helptext {
    color: var(--dark-grey-color);
}

.form-error {
    color: var(--red-color);
}

.form-inline {
    display: inline-block;
}

.form-inline input[type="submit"] {
    border: none;
    background: unset;
    color: var(--link-color);
    padding: 0;
}

.form-inline input[type="submit"]:hover {
    text-decoration: underline;
}

/* landing */
.lead {
    max-width: 34rem;
    border: 1px dashed #000;
    padding-top: 8px;
    padding-bottom: 8px;
}
@media (prefers-color-scheme: dark) {
    .lead {
        border-color: #fff;
    }
}

.cta {
    margin-top: 32px;
    margin-bottom: 32px;
}

.cta-link {
    font-size: 20px;
}

/* comparisons */
.comparisons {
    max-width: 1000px;
}

.comparisons h1,
.comparisons p,
.comparisons ol,
.comparisons ul {
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
}

.comparisons-matrix {
    overflow: scroll;
}

.comparisons table {
    min-width: 800px;
    white-space: nowrap;
}

.comparisons thead > tr > th:not(:first-child),
.comparisons tbody > tr > td:not(:first-child) {
    text-align: center;
}

.comparisons th {
    text-align: left;
}

.comparisons tr {
    min-width: 300px;
}

/* blog index */
.blog a:hover {
    text-decoration: underline;
}

.blog a:visited {
    color: var(--purple-color);
}

.blog a:active {
    color: var(--red-color);
}

.posts {
    list-style: none;
    padding-left: 0;
}

.posts li {
    margin-bottom: 24px;
}

.posts small {
    white-space: nowrap;
    color: var(--dark-grey-color);
}

.posts time {
    white-space: nowrap;
}

.byline {
    color: var(--dark-grey-color);
    margin: 16px 0 24px;
}

.webring {
    margin-top: 64px;
    display: flex;
    justify-content: space-between;
}

.webring-name {
    color: #000;
}
@media (prefers-color-scheme: dark) {
    .webring-name {
        color: #fff;
    }
}

/* post detail */
.posts-item-brand {
    display: block;
    margin-top: 16px;
    margin-bottom: 16px;
    color: var(--dark-grey-color);
}

.posts-item-brand:hover {
    text-decoration: none;
}

.posts-item-brand::before {
    content: "« ";
}

.posts-item-title {
    margin-bottom: 8px;
}

.posts-item-byline {
    color: var(--dark-grey-color);
    margin-bottom: 8px;
}

.posts-item-body p {
    {% if not request.theme_sansserif %}
    font-family: serif;
    font-size: 1.1rem;
    {% endif %}
}

.posts-item-body li {
    {% if not request.theme_sansserif %}
    font-family: serif;
    font-size: 1.1rem;
    {% endif %}
}

.posts-item-body img {
    max-width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* comments */
.comments {
    margin-top: 64px;
}

.comments-title {
    font-size: 1.2rem;
    margin-top: 32px;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--light-grey-color);
}

.comments-body {
    margin-bottom: 16px;
}

.comments-body p {
    margin-top: 4px;
}

/* page detail */
.pages-item-brand {
    display: block;
    margin-top: 16px;
    margin-bottom: 16px;
    color: var(--dark-grey-color);
}

.pages-item-brand:hover {
    text-decoration: none;
}

.pages-item-brand::before {
    content: "« ";
}

.pages-item-title {
    margin-bottom: 8px;
}

.pages-item-byline {
    color: var(--dark-grey-color);
    margin-bottom: 8px;
}

.pages-item-body p {
    {% if not request.theme_sansserif %}
    font-family: serif;
    font-size: 1.1rem;
    {% endif %}
}

.pages-item-body li {
    {% if not request.theme_sansserif %}
    font-family: serif;
    font-size: 1.1rem;
    {% endif %}
}

.pages-item-body img {
    max-width: 100%;
}

.pages-generic-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 16px;
    row-gap: 16px;
    margin-top: 16px;
}
@media (max-width: 490px) {
  .pages-generic-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 340px) {
  .pages-generic-grid {
    grid-template-columns: 1fr;
  }
}

/* dashboard */
.dashboard-cta {
    font-size: 1.1rem;
}

.dashboard-list {
    line-height: 1.6;
}

/* images */
.images-grid {
    max-width: 100%;
    margin-top: 32px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-template-rows: 302px;
}

.images-grid-item {
    display: flex;
    justify-content: center;
    border: 1px solid var(--light-grey-color);
}

.images-grid-item img {
    max-width: 300px;
    max-height: 300px;
    object-fit: contain;
}

/* image detail */
.images-item {
    max-width: 100%;
    margin-top: 32px;
    margin-bottom: 32px;
    text-align: center;
}

.images-item img {
    max-width: 100%;
    max-height: 100vh;
}

.images-item-byline {
    color: var(--dark-grey-color);
}

/* analytics */
.analytics-chart {
    background: var(--light-grey-color);
    line-height: 0;
}

svg .analytics-chart-bar {
    fill: var(--link-color);
}

svg .analytics-chart-bar:hover {
    fill: var(--ascent-color);
}

svg .analytics-chart-text {
    font-family: monospace;
    font-size: 10px;
}

/* billing stripe */
#subscription-form input[type="submit"] {
    margin-top: 8px;
}

#card-element {
    border: 1px solid var(--light-grey-color);
    padding: 4px 8px;
}

#card-element-errors {
    margin-top: 8px;
    color: var(--red-color);
}

각주

↑ 각주 테스트

[1] 각주 테스트

[1]

@@ 185번째 줄: / 185번째 줄: @@
 === [[CSS]] ===
-bear 블로그 용 마타로아 css 입니다.
+[https://bearblog.dev/ bearblog] 용 마타로아 블로그 css 입니다. [https://github.com/mataroa-blog/mataroa/blob/master/main/templates/assets/style.css 원본 출처]
 <div class="mw-collapsible mw-collapsed">
-Custom styles: 에 복사 붙여넣기 하고 Extend existing styles 체크
+Custom styles: 에 붙여 넣기 하고 Extend existing styles 체크하면 됩니다.
-<div class="mw-collapsible-content">
+<div class="mw-collapsible-content"><pre>
-<pre>
 /* reset */

마타로아

웹사이트 정보
URL	홈페이지 파일:GitHub-Mark-120px-plus.png 깃허브
종류	블로그
언어	영어