bliper

static html page generation in perl
git clone git://git.2f30.org/bliper
Log | Files | Refs | README | LICENSE

style.css (2705B)


      1 @import "colors.css";
      2 
      3 html {
      4 	overflow-y: scroll;
      5 }
      6 
      7 body {
      8 	font-family: sans-serif;
      9 	font-size: 1em;
     10 }
     11 
     12 .container {
     13 	max-width: 680px;
     14 	margin: 0 auto;
     15 }
     16 
     17 .upstart {
     18 	clear: both;
     19 	text-align: right;
     20 }
     21 
     22 /* menu */
     23 .menu {
     24 	line-height: 1.5em;
     25 	text-align: center;
     26 }
     27 
     28 .menu li {
     29 	display: inline;
     30 	padding: 0 4px;
     31 }
     32 
     33 .menu li a {
     34 	text-decoration: none;
     35 	padding: 0.3em;
     36 	border-top: 0.5ex solid #a7a9ac;
     37 	margin-right: 5px;
     38 	margin-left: -5px;
     39 }
     40 
     41 .menu li a:hover, .menu li a.current {
     42 	border-top: 0.5ex solid #0091d0;
     43 }
     44 
     45 h1, h2, h3, h4, h5 {
     46 	font-weight: normal;
     47 }
     48 
     49 h1 {
     50 	font-size: 1.8em;
     51 }
     52 
     53 h3 {
     54 	margin-top: 30px;
     55 }
     56 
     57 .latart {
     58 	text-align: center;
     59 }
     60 
     61 a, a:hover {
     62 	text-decoration: underline;
     63 }
     64 
     65 a em {
     66 	font-size: 0.9em;
     67 }
     68 
     69 .previewlink {
     70 	text-decoration: none;
     71 	text-align: right;
     72 	display: block;
     73 }
     74 
     75 .previewlink:hover {
     76 	text-decoration: underline;
     77 }
     78 
     79 .preview {
     80 	border: 1px solid #c0c0c0;
     81 	padding: 5px 20px;
     82 	position: relative;
     83 	margin: 0 auto;
     84 	transition: background-color 400ms linear;
     85 }
     86 
     87 .preview:hover {
     88 	background: #e3e3e3;
     89 }
     90 
     91 a.indexlink {
     92 	line-height: 2em;
     93 }
     94 
     95 p {
     96 	max-width: 680px;
     97 	white-space: normal;
     98 	line-height: 1.6em;
     99 	text-align: justify;
    100 }
    101 
    102 .preview p {
    103 	margin-top: 0em;
    104 	margin-bottom: 0em;
    105 }
    106 
    107 .container ul li {
    108 	/* list-style: none; */
    109 }
    110 
    111 .container ul li:before {
    112 	/* content: "\2192"; */
    113 	/* float: left; */
    114 }
    115 
    116 pre {
    117 	font-family: monospace;
    118 	border: 1px solid #c0c0c0;
    119 	padding: 5px;
    120 	max-width: 680px;
    121 	word-wrap: break-word;
    122 	white-space: pre-wrap;
    123 	overflow-x: auto;
    124 }
    125 
    126 p code, li code {
    127 	border: 1px solid #c0c0c0;
    128 	max-width: 680px;
    129 	padding: 0.3em;
    130 	margin: 0.3em;
    131 	word-wrap: break-word;
    132 	white-space: pre-wrap;
    133 }
    134 
    135 code {
    136 	font-family: Monaco, Consolas, "Courier New", monospace;
    137 	font-size: 13px;
    138 }
    139 
    140 .logo {
    141 	border: none;
    142 	display: block;
    143 	margin-left: auto;
    144 	margin-right: auto;
    145 	margin-bottom: 70px;
    146 }
    147 
    148 img {
    149 	margin-top: 20px;
    150 	max-width: 100%;
    151 	height: auto;
    152 }
    153 
    154 li {
    155 	line-height: 1.6em;
    156 	text-align: justify;
    157 }
    158 
    159 hr {
    160 	width: 300%;
    161 	margin-left: -40%;
    162 	margin-top: 40px;
    163 }
    164 
    165 blockquote {
    166 	margin: 10px 0 10px 50px;
    167 	padding-left: 15px;
    168 	border-left: 3px solid #ccc;
    169 }
    170 
    171 footer {
    172 	max-width: 100%;
    173 	text-align: center;
    174 	margin: 2em auto 0 auto;
    175 	padding-top: 2em;
    176 	padding-bottom: 3em;
    177 	border-top: 1px solid #c0c0c0;
    178 }
    179 
    180 #disqus_thread {
    181 	max-width: 680px;
    182 	margin: 0 auto;
    183 }
    184 
    185 @media screen and (min-width: 481px) {
    186 	.menu {
    187 		margin-left: -30px;
    188 	}
    189 }
    190 
    191 @media screen and (max-width: 480px) {
    192 	.menu li {
    193 		display: list-item;
    194 		margin-left: -40px;
    195 		list-style: none;
    196 		text-align: center;
    197 		padding-top: 10px;
    198 		text-transform: uppercase;
    199 	}
    200 
    201 	.menu li a {
    202 		border: none;
    203 	}
    204 
    205 	.menu li a:hover {
    206 		border: none;
    207 	}
    208 
    209 	a em {
    210 		font-size: 1em;
    211 	}
    212 }