diff --git a/example/example.md b/example/example.md index 6cd7205..611fa37 100644 --- a/example/example.md +++ b/example/example.md @@ -6,17 +6,21 @@ theme: speee --- -# タイトル -サブタイトルなど +# Marpスライドテンプレート + + +2021/11/01 + + --- -# h1 要素 + +# 見出し要素の文字サイズ見本 ## h2 要素 @@ -24,10 +28,8 @@ _paginate: false #### h4 要素 -通常の文章、 -改行 1 回した直後の文章。 - -改行 2 回した直後の文章(次のパラグラフ) +##### h5 要素 +###### h6 要素 --- @@ -35,7 +37,15 @@ _paginate: false _class: lead --> -## セクション切り替えなど +# - セクション切り替えなど +--- +# 箇条書きイメージ +- 箇条書き + - あああ +1. 番号付きリスト2 + - あああ +2. 番号付きリスト3 + - eeee --- @@ -53,6 +63,5 @@ _class: lead ```sh #!/bin/bash - echo 'hello world!' -``` +``` \ No newline at end of file diff --git a/marp-themes/speee.css b/marp-themes/speee.css index ee15590..555d405 100644 --- a/marp-themes/speee.css +++ b/marp-themes/speee.css @@ -20,7 +20,7 @@ h3, h4, h5, h6 { - margin: 0.5em 0 0 0; + margin: 0.em 0 0 0; } h1 strong, h2 strong, @@ -32,29 +32,30 @@ h6 strong { } h1 { - font-size: 1.8em; + font-size: 1.5em; } h2 { - font-size: 1.5em; + font-size: 1.2em; } h3 { - font-size: 1.3em; + font-size: 1.1em; } h4 { - font-size: 1.1em; + font-size: 0.9em; } h5 { - font-size: 1em; + font-size: 0.8em; } h6 { - font-size: 0.9em; + font-size: 0.6em; } + p, blockquote { margin: 1em 0 0 0; @@ -62,7 +63,7 @@ blockquote { ul > li, ol > li { - margin: 0.3em 0 0 0; + margin: 0.15em 0 0 0; } ul > li > p, ol > li > p { @@ -138,39 +139,46 @@ table td { } header, -footer, section::after { box-sizing: border-box; font-size: 66%; - height: 70px; - line-height: 50px; - overflow: hidden; - padding: 10px 25px; + height: 0px; + line-height: 30px; + overflow: visible; + padding: 53% 20px; position: absolute; + color :#ccd7e6; + text-align: right; } header { left: 0; right: 0; top: 0; + } footer { + text-align: right; + position:fixed; left: 0; - right: 0; - bottom: 0; + right:2%; + bottom: 2%; + font-size: 0.55em; + font-family: century gothic; } -section:not(.lead):before { +section:not(.lead):not(.cover):before { position: absolute; top: 0px; - left: 0px; - width: 100%; - height: 3%; + left: 2.5%; + width: 30%; + height: 1.5%; content: ""; background: linear-gradient(90deg, #080058, #008bcd); } + section { background-image: url("https://github.com/speee/marp-speee-theme/raw/main/marp-themes/Speee_VI_yokogumi.png"); background-repeat: no-repeat; @@ -178,12 +186,15 @@ section { background-size: 9% auto, 100% 100%; background-color: var(--color-background); color: var(--color-foreground); - font-size: 35px; + font-size: 30px; font-family: "Lato", "Noto Sans JP", sans-serif; height: 720px; line-height: 1.35; letter-spacing: 1.25px; - padding: 70px; + padding-top: 2%; + padding-left:3%; + padding-right:3%; + padding-bottom:3%; width: 1280px; word-wrap: break-word; --color-background: white; @@ -192,10 +203,11 @@ section { --color-dimmed: #33619a; --color-highlight: #0288d1; } -section::after { +section:not(.cover):not(.lead):after { right: 0; bottom: 0; - font-size: 80%; + font-size: 400%; + font-family: century gothic; } section a, section mark { @@ -250,6 +262,7 @@ section.lead { flex-direction: column; flex-wrap: nowrap; justify-content: center; + padding-top: 5%; } section.lead h1, section.lead h2, @@ -257,8 +270,13 @@ section.lead h3, section.lead h4, section.lead h5, section.lead h6 { - text-align: center; + text-align: left; + padding-left: 5%; +} +section.lead h1{ + font-size: 2em; } + section.lead h1 svg[data-marp-fitting=svg], section.lead h2 svg[data-marp-fitting=svg], section.lead h3 svg[data-marp-fitting=svg], @@ -268,7 +286,8 @@ section.lead h6 svg[data-marp-fitting=svg] { --preserve-aspect-ratio: xMidYMid meet; } section.lead p { - text-align: center; + text-align: right; + padding-right: 5%; } section.lead blockquote > h1, section.lead blockquote > h2, @@ -278,6 +297,7 @@ section.lead blockquote > h5, section.lead blockquote > h6, section.lead blockquote > p { text-align: left; + } section.lead blockquote svg[data-marp-fitting=svg]:not([data-marp-fitting-math]) { --preserve-aspect-ratio: xMinYMin meet; @@ -285,10 +305,42 @@ section.lead blockquote svg[data-marp-fitting=svg]:not([data-marp-fitting-math]) section.lead ul > li > p, section.lead ol > li > p { text-align: left; + } section.lead table { margin-left: auto; margin-right: auto; } +/*表紙ページのCSS*/ +section.cover { + --color-background: #003981; + --color-background-stripe: rgba(255, 255, 255, 0.1); + --color-foreground: white; + --color-dimmed: #ccd7e6; + --color-highlight: #81d4fa; + background-image: url("https://raw.githubusercontent.com/speee/marp-speee-theme/main/marp-themes/Speee_VI_yokogumi_white.png"), linear-gradient(115deg, #080058, #008bcd); + display: flex; + flex-direction: column; + flex-wrap: nowrap; + justify-content: center; + padding-top: 5%; + padding-left: 10%; +} +section.cover h1{ + font-size: 2em; + padding-top: 5%; +} +section.cover p{ + text-align: right; + padding-right: 5%; +} + /*--- 先頭文字の定義 ------------------------------ */ + section.lead h1::first-letter{ + font-size : 1.5em; /* 文字サイズ */ + padding-right: 20px; /* 余白 */ + color : #005ea5; /* 文字の色 */ + font-family : century gothic; /* フォント */ +} + /*# sourceMappingURL=speee.css.map */