Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSSの編集を行いました #8

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Conversation

ersatsp
Copy link

@ersatsp ersatsp commented Nov 4, 2021

PAAMデザインチームの佐藤絵莉です!
Marpテンプレートの作成ありがとうございます。
今回初めてMarpを使ったのですが、めちゃくちゃ便利で感動しました・・!
エンジニアの方々にも愛用してもらえるようになると思うと大変嬉しいです^^

私の方で、スライドバージョンのデザインに近づくようCSSの変更と、baseのテンプレートの変更をしてみました。
主に行ったデザイン変更は下記のとおりです。

・見出しタグの文字サイズの変更
・本文のpadding調整
・見出し上部の飾り線の位置
・コピーライト表記の追記
・ページ数デザインの変更
・中表紙を1文字目だけ色、フォント、サイズが変わるよう調整

ただ、エンジニアの方々はLTっぽい使い方が多く、もっと文字サイズが大きいほうがいい、といったご要望もあるのかもしれないと思っております。
エンジニアの目線で上書きしても問題ないか、別種類のテンプレートとして作ったほうがよさそうかといった点はご意見いただければと思います。
また、コード自体汚い部分があると思いますので、ご指摘いただけると大変嬉しいです。

よろしくお願いいたします。

What

Why

How

Ref

PAAMデザインチームの佐藤絵莉です!
Marpテンプレートの作成ありがとうございます。
今回初めてMarpを使ったのですが、めちゃくちゃ便利で感動しました・・!
エンジニアの方々にも愛用してもらえるようになると思うと大変嬉しいです^^

私の方で、スライドバージョンのデザインに近づくようCSSの変更と、baseのテンプレートの変更をしてみました。
主に行ったデザイン変更は下記のとおりです。

・見出しタグの文字サイズの変更
・本文のpadding調整
・見出し上部の飾り線の位置
・コピーライト表記の追記
・ページ数デザインの変更
・中表紙を1文字目だけ色、フォント、サイズが変わるよう調整

ただ、エンジニアの方々はLTっぽい使い方が多く、もっと文字サイズが大きいほうがいい、といったご要望もあるのかもしれないと思っております。
エンジニアの目線で上書きしても問題ないか、別種類のテンプレートとして作ったほうがよさそうかといった点はご意見いただければと思います。
また、コード自体汚い部分があると思いますので、ご指摘いただけると大変嬉しいです。

よろしくお願いいたします。
@bigwheel
Copy link
Contributor

bigwheel commented Nov 5, 2021

@ersatsp コントリビュートありがとうございます!
僕自身CSSがまったく得意でないので本職のデザイナーの方に添削していただけるのは助かります 💦

このPRなのですが1点修正いただきたいところがあります 🙏
それはCSSファイル直接の編集ではなくSCSSファイルを修正してそこからコンパイルしてCSSファイルを作っていただきたい点です!(そのほうがメンテナンスが楽なため) オリジナルの speee.scss を編集したのち

sass speee.scss speee.css

などのコマンドで機械的に speee.css を生成していただければと思います 🙇

@bigwheel
Copy link
Contributor

bigwheel commented Nov 5, 2021

@ersatsp あと、これはもし makenpm コマンドに慣れていたらですが、
https://github.com/speee/marp-speee-theme#%E4%BE%9D%E5%AD%98%E7%89%A9
の手順を使えば scss → css の変換や example画像の生成が自動化されてとても便利です。
ただnpmもmakeも使うのがそこそこ大変なのでもし過去使ったことがあればで構いません!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants