README.md

irohacss

This CSS framework is under development. Also, this Gist is a sample.

CSS file type

• irohacss.css (under development) Please specify Class and use it like normal CSS.

• no_class_irohacss.css This is the version without classes. This is supposed to be used in theme etc. of MarkDown generator.

Install

For MarkDrip theme

Run wget -P ~/.markdrip https://gist.githubusercontent.com/Comamoca/0d09739c9e488a8bf079631e732679da/raw/9f058febb5b504ef948b74860b3788556dec00f6/irohacss.css

To apply CSS

Run markdrip --theme irohacss

irohacss.css

@charset "UTF-8";

/* * { */
	/* appearance: none; */
/* 	-webkit-appearance: none; */
/* 	-moz-appearance: none; */
/* 	-o-appearance: none; */
/* } */

h1 {
	color: #9DB79E;
}
h2 {
	color: #D0C296;
}
h3 {
	color: #E8CEA6;
}
h4 {
	color: #d4b78c;
;
}
h5 {
	color: #d9bf9c;
}

a {
	color: #73B5B1;
}

button {
  /* ブラウザ特有のスタイルを無効に */
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;

  /* 整える */
  margin: 1em 0; /* 前後の隙間 */
  padding: 0.6em 1em; /* 塗りの余白 */
  font-size: 1em; /* フォントサイズ */
  background-color: #73B5B1; /* 背景色 */
  color: #FFF; /* テキストカラー */
  cursor: pointer; /* カーソルを指マークに */
  border-radius: 3px; /* 角の丸み */
  border: 0; /* 枠線を消す */
  transition: 0.3s; /* ホバーの変化を滑らかに */
}

/* ホバー時（カーソルをのせた時）の見た目 */
button:hover {
  background-color: #9DB79E; /* 背景色 */
}

table{
	width: 10em;
  border-collapse: collapse;
  margin-bottom: 10px;
  margin-top: 10px;
}

table tr{
  background-image: linear-gradient(40deg, #73B5B1 0%, #D0C296 74%);
}

table tr:last-child *{
  border-bottom: none;
}

table th,table td{
  text-align: center;
  border: solid 2px #fff;
  color: white;
  padding: 10px 0;
}

input[type="text"],
input[type="mail"],
textarea {
	font-size: 0.95em; /* フォントサイズ */
	margin: 1em 0; /* 前後の余白 */
	padding: 0.5em; /* テキスト周りの余白 */
	border: solid 2px #73B5B1; /* 線の色 */
	border-radius: 4px; /* 角丸 */
}

input[type='checkbox'],
input[type='radio'] {
	height: 1em;
	width: 1em;
	padding: 0.5em; /* テキスト周りの余白 */
}


label{
	display:block;
	position:relative;
	padding-left:1em;
}
label input{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	margin:auto;
}

figure, blockquote {
  margin: 0; /* ブラウザデフォルトの隙間をリセット */
}
blockquote { 
	color: #565656;
  padding: 0 0 0 0.5em; /* 左側に余白 */
  border-left: solid 3px #9DB79E; /* 左側に線 */
  font-style: italic; /* 引用文を斜体に */
}
figure p {
  margin: 0.5em 0;
}
figure figcaption {
  text-align: right; /* 出典は右寄せに */
}

ul {
  list-style-type: none; /* 記号を消す */
  padding: 0; /* 余計な余白を消す */
}
ul li {
  position: relative; /* 位置調整 */
  padding-left: 1em; /* 点が配置されるスペース */
}

/* 疑似要素で点を表示 */
ul li:before {
  content: '';
  position: absolute; /* 位置調整 */
  left: 0; /* 位置調整 */
  top: .5em; /* 位置調整 */
  width: 7px; /* 幅 */
  height: 7px; /* 高さ */
  border-radius: 50%; /* 円形に */
  background: #73B5B1; /* 背景色 */
}

ol {
	position: relative;
	right: 41px;
  list-style: none;
  counter-reset: ol_li; /* ol_li カウンタをセットする(値もリセット) */
}
ol li:before {
  margin-right: .25em;
  counter-increment: ol_li; /* ol_li カウンタの値に1加える */
  content: counter(ol_li); /* before擬似要素のcontentで出力 */
  color: #73B5B1; /* 色を変更 */
}

code {
	position: relative;
	right: 76px;
  display: inline-block;
  padding: 0.1em 0.25em; /* 文字周りの余白 */
  color: #444; /* 文字色 */
  background-color: #FEF4EA; /* 背景色 */
  border-radius: 3px; /* 角丸 */
  border: solid 1px #9DB79E; /* 枠線 */
}

body {
	max-width: 900px;
	margin: auto;
	width: 250px;
}

button {
	margin-top: 10px;
	margin-bottom: 10px;
	/* display:block; */
	/* margin: 0 auto; */
}

.center {
	background: lightgray;
	height: 200px;
	position: relative; /*中央揃えしたい要素の親要素に指定*/
}