012 プロフィール -黒・露草-

長文スペース。詳細な設定などが記述できます。
　海のおきへ、遠く遠く出ていきますと、水の色は、いちばん美しいヤグルマソウの花びらのようにまっさおになり、きれいにすきとおったガラスのように、すみきっています。けれども、そのあたりは、とてもとても深いので、どんなに長いいかり綱づなをおろしても、底まで届くようなことはありません。海の底から、水の面おもてまで届くためには、教会の塔とうを、いくつもいくつも、積みかさねなければならないでしょう。そういう深いところに、人魚たちは住んでいるのです。
「人魚の姫」ハンス・クリスチャン・アンデルセン／青空文庫

自動改行「しない」で作成。
カスタムプロパティでカラーコード一括変換に挑戦してみました。
アクセントカラー１箇所変更するだけOKになってます。

和風なプロフィールというリクエストをいただいたので作ってみました。
和風とは……という感じですが。

色/柄違い→ 淡・若菜色#d8e698 ／濃・藤紫#a59aca ／白・紅梅#f2a0a1 ／黒・露草#38a1db

HEAD

*,::after,::before{box-sizing:border-box}
*{margin: 0; padding: 0;}
ol,ul{list-style:none}
img{max-width:100%}
table{border-collapse:collapse}
textarea{white-space:revert}

:root{
--main-color: #38a1db; /* アクセントカラー */
}

body {
font-family: 'Noto Serif JP', serif;
font-size: 0.85em;
background: #fbfaf5;
color: #000;
line-height: 1.8;
}

a{
color: var(--main-color);
font-weight: bold;
}

a:hover{
color: #ccc;
}

.wrp{
width: 90%;
max-width: 600px;
margin: 10px auto;
}

header{
font-size: 1.2em;
text-align: center;
background-color: var(--main-color);
background-image: linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000),
linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
background-repeat: repeat;
padding: 30px;
}
header span{
padding: 7px;
background: rgba(251, 250, 245, 0.8);
}

h1 {
font-family: 'Yuji Syuku', serif;
font-weight: bold; 
font-size: 1.8em;
}

h2 {
font-family: 'Yuji Syuku', serif;
font-weight: bold; 
font-size:1.2em;
position: relative;
padding: 8px 8px 8px 45px;
}
h2:after {
  content: "";
  display: block;
  height: 4px;
  background: -webkit-linear-gradient(to right, rgb(90, 90, 90), transparent);
  background: linear-gradient(to right, rgb(90, 90, 90), transparent);
}
h2 span:before {
	background-color: var(--main-color);
	border-radius: 50%;
	content: '';
	display: block;
	position: absolute;
	top: 10px;
	left: 15px;
	width: 15px;
	height: 15px;
	box-shadow: 9px 10px 0px var(--main-color),
			 -2px 13px 0px var(--main-color);
}
h2 span:after {
	border: 2px solid #fbfaf5;
	border-radius: 50%;
	content: '';
	display: block;
	position: absolute;
	top: 20px;
	left: 19px;
	width: 12px;
	height: 12px;
}

.icon {
width: 100px;
border: 5px double #666;
background: #fbfaf5;
margin: 15px;
}

.prof0 {
text-align: center;
margin: 30px;
}
.prof {
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  -ms-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  display: inline-block;
  text-align: left;
}
.prof span{
font-weight: bold;
background: var(--main-color);
padding: 5px 3px;
border: 3px double #666;
}

li{
margin: 10px;
}

.text{
padding: 1em 2em;
}

p{
margin-bottom: 30px;
}

footer{
text-align: center;
padding: 3px;
}
footer a{
background: var(--main-color);
color:#000;
padding: 5px;
border: 3px double #666;
}
footer a:hover{
background: #ccc;
color:#000;
}

</style>

BODY

山田やまだ花子はなこ

詳細

ソースコード