편집 요약 없음 |
|||
(사용자 2명의 중간 판 9개는 보이지 않습니다) | |||
6번째 줄: | 6번째 줄: | ||
|그림 = [[파일:마타로아 홈페이지.png|150px]] | |그림 = [[파일:마타로아 홈페이지.png|150px]] | ||
|그림설명 = | |그림설명 = | ||
|URL = | |URL = [https://mataroa.blog 홈페이지] [https://github.com/sirodoht/mataroa 깃허브] | ||
|종류 = [[블로그]] | |종류 = [[블로그]] | ||
|운영 = | |운영 = | ||
20번째 줄: | 20번째 줄: | ||
}} | }} | ||
'''Mataroa'''(마타로아)는 미니멀리즘을 추구하는 [[블로그]] 플랫폼이다. | |||
미니멀리즘을 추구하는 블로그 플랫폼이다. | |||
개발자가 블로그 플랫폼들의 시각적 혼잡함, 추적기와 광고가 싫어서 만들었다고 한다. | 개발자가 블로그 플랫폼들의 시각적 혼잡함, 추적기와 광고가 싫어서 만들었다고 한다. | ||
2020년 5월 30일 이후에 | 2020년 5월 30일 이후에 만들어진 것으로 추정된다. [https://nutcroft.com/blog/welcome-to-mataroa/ 출처] | ||
== 특징 == | == 특징 == | ||
*광고와 추적기, 쿠키가 없다. | |||
*광고와 | |||
*[[RSS]], 이메일 newsletter를 지원한다. | *[[RSS]], 이메일 newsletter를 지원한다. | ||
*리브레 위키처럼 가입 시 이메일이 필요 없다. | *리브레 위키처럼 가입 시 이메일이 필요 없다. | ||
*언제든지 블로그 내보내기 기능을 사용할 수 있다. | *언제든지 블로그 내보내기 기능을 사용할 수 있다. | ||
*만약 새로운 플랫폼으로 넘어간다면 새 도메인으로 redirect 할 수 있다. | *만약 새로운 플랫폼으로 넘어간다면 새 도메인으로 redirect 할 수 있다. | ||
*댓글 기능이 있다. | *댓글 기능이 있다. | ||
*오픈소스 이다. | *오픈소스 이다. | ||
*html 태그를 직접 써야 된다 그러므로 편집기는 [https://marktext.app/ 마크텍스트] 같은 프로그램을 써야 편하다. | *html 태그를 직접 써야 된다 그러므로 편집기는 [https://marktext.app/ 마크텍스트] 같은 프로그램을 써야 편하다. | ||
* | *[[마크다운]]을 지원한다. | ||
*테마나 확장 프로그램 기능은 없으나 글자 크기 늘리는 테마 하나가 있다. | |||
*테마나 확장 프로그램 기능은 | |||
*iframe 태그 지원이 잘 되어 있다. | *iframe 태그 지원이 잘 되어 있다. | ||
*[[Tor]] 브라우저를 통해 익명으로 글을 쓸 수 있다. | *[[Tor]] 브라우저를 통해 익명으로 글을 쓸 수 있다. | ||
== 팁 == | == 팁 == | ||
글자 크기 늘리는 테마를 적용 | 글자 크기 늘리는 테마를 적용 한다면 웹폰트가 없기 때문에 브라우저에서 폰트를 변경하는게 좋다. | ||
== 지원하는 주요 문법 목록 == | == 지원하는 주요 문법 목록 == | ||
출처 | 출처: [https://herman.bearblog.dev/markdown-cheatsheet/ 베어 블로그 설명], [https://1.mataroa.blog/guides/markdown/ 마타로아 블로그 설명] | ||
[https://herman.bearblog.dev/markdown-cheatsheet/ 베어 블로그 설명], [https://1.mataroa.blog/guides/markdown/ 마타로아 블로그 설명] | |||
=== Markdown === | === [[마크다운|Markdown]] === | ||
* 기울임 하는법 | * 기울임 하는법 | ||
*: 예제 <pre> *텍스트* </pre> | *: 예제 <pre> *텍스트* </pre> | ||
128번째 줄: | 124번째 줄: | ||
*: 텍스트 | *: 텍스트 | ||
===Html=== | === [[Html]] === | ||
*지원하는 html 태그 목록: [https://github.com/sirodoht/mataroa/blob/9ddce2e3d1e23c80c72fdd6363bc21a54d910eaf/main/helpers.py 링크] | *지원하는 html 태그 목록: [https://github.com/sirodoht/mataroa/blob/9ddce2e3d1e23c80c72fdd6363bc21a54d910eaf/main/helpers.py 링크] | ||
186번째 줄: | 182번째 줄: | ||
**예시 <pre> <figcaption> 캡션 </figcaption> </pre> | **예시 <pre> <figcaption> 캡션 </figcaption> </pre> | ||
**: 사진 밑에 부가 설명을 넣을 수 있습니다. | **: 사진 밑에 부가 설명을 넣을 수 있습니다. | ||
=== [[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 체크하면 됩니다. | |||
<div class="mw-collapsible-content"><pre> | |||
/* 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); | |||
} | |||
</pre> | |||
</div> | |||
</div> | |||
{{각주}} | {{각주}} | ||
[[분류:블로그]] | [[분류:블로그]] |
2023년 9월 7일 (목) 23:03 기준 최신판
마타로아 | |
---|---|
웹사이트 정보 | |
URL | 홈페이지 깃허브 |
종류 | 블로그 |
언어 | 영어 |
Mataroa(마타로아)는 미니멀리즘을 추구하는 블로그 플랫폼이다.
개발자가 블로그 플랫폼들의 시각적 혼잡함, 추적기와 광고가 싫어서 만들었다고 한다.
2020년 5월 30일 이후에 만들어진 것으로 추정된다. 출처
특징[편집 | 원본 편집]
- 광고와 추적기, 쿠키가 없다.
- RSS, 이메일 newsletter를 지원한다.
- 리브레 위키처럼 가입 시 이메일이 필요 없다.
- 언제든지 블로그 내보내기 기능을 사용할 수 있다.
- 만약 새로운 플랫폼으로 넘어간다면 새 도메인으로 redirect 할 수 있다.
- 댓글 기능이 있다.
- 오픈소스 이다.
- html 태그를 직접 써야 된다 그러므로 편집기는 마크텍스트 같은 프로그램을 써야 편하다.
- 마크다운을 지원한다.
- 테마나 확장 프로그램 기능은 없으나 글자 크기 늘리는 테마 하나가 있다.
- iframe 태그 지원이 잘 되어 있다.
- Tor 브라우저를 통해 익명으로 글을 쓸 수 있다.
팁[편집 | 원본 편집]
글자 크기 늘리는 테마를 적용 한다면 웹폰트가 없기 때문에 브라우저에서 폰트를 변경하는게 좋다.
지원하는 주요 문법 목록[편집 | 원본 편집]
출처: 베어 블로그 설명, 마타로아 블로그 설명
Markdown[편집 | 원본 편집]
- 기울임 하는법
- 예제
*텍스트*
- 결과 : 텍스트
- 예제
- 두껍게 하는법
- 예제
**텍스트**
- 결과 : 텍스트
- 예제
- 순서 없는 목록 만드는 법
- 예제
* 텍스트 (엔터 이후 띄어쓰기 4번이상) * 텍스트
- 결과
- 텍스트
- 텍스트
- 텍스트
- 예제
- 순서 없는 목록 만드는 법
- 예제
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); }
각주
- ↑ 각주 테스트