1 body {2 font-family: sans-serif;3 max-width: 800px;4 margin: 0 auto;5 padding: 16px;6 overflow-x: hidden;7 }8 9 p {10 text-align: justify;11 font-size: 90%;12 }13 14 p:first-letter {15 font-size: 200%;16 }17 18 /************************************ first-page ************************************/19 .first-page {20 padding: 64px 0;21 }22 23 .first-page .document-title {24 font-size: 300%;25 font-weight: bold;26 text-align: center;27 }28 29 .first-page .document-meta {30 font-size: 60%;31 margin: 32px auto;32 max-width: 400px;33 }34 35 .first-page .document-meta .title {36 text-align: right;37 color: silver;38 text-transform: capitalize;39 vertical-align: top;40 }41 42 .first-page .document-meta .title:after {43 content: ':';44 }45 46 .first-page .document-meta .contents {47 color: gray;48 }49 50 /************************************ headers ************************************/51 h1 a,52 h2 a,53 h3 a,54 h4 a,55 h5 a,56 h6 a {57 color: black;58 text-decoration: none;59 }60 61 h1 .identation,62 h2 .identation,63 h3 .identation,64 h4 .identation,65 h5 .identation,66 h6 .identation {67 color: silver;68 padding-right: 0.5em;69 }70 71 h1:hover .identation,72 h2:hover .identation,73 h3:hover .identation,74 h4:hover .identation,75 h5:hover .identation,76 h6:hover .identation {77 text-decoration: underline;78 }79 80 h1:target .identation,81 h2:target .identation,82 h3:target .identation,83 h4:target .identation,84 h5:target .identation,85 h6:target .identation {86 color: dodgerblue;87 }88 89 /************************************ code ************************************/90 .code-frame {91 padding: 16px 0;92 }93 94 .code-title {95 border: solid gray 1px;96 background-color: gray;97 color: white;98 font-size: 14px;99 padding: 2px;100 }101 102 .code-frame pre {103 display: block;104 margin: 0;105 border: dashed gray 1px;106 border-top: none;107 overflow: hidden;108 }109 110 .code-frame:hover pre {111 overflow: auto;112 }113 114 /************************************ index ************************************/115 .index {116 border: solid silver 1px;117 background: #F5F5F5;118 padding: 16px;119 }120 121 .index a {122 color: dodgerblue;123 text-decoration: none;124 }125 126 .index a:hover {127 text-decoration: underline;128 }129 130 .index .identation {131 padding-right: 0.5em;132 }133 134 .index ol {135 list-style-type: none;136 padding: 0;137 margin: 0;138 }139 140 .index ol ol {141 padding-left: 32px;142 }143 144 145 146 147 148 149 150 blockquote {151 border: solid silver 1px;152 padding: 16px 16px 16px 48px;153 font-style: oblique;154 background-color: #F4F4F4;155 margin: 0;156 }157 158 .comentario {159 display: inline-block;160 margin-left: 4px;161 position: absolute;162 max-width: 600px;163 border-radius: 3px;164 overflow: hidden;165 166 transition: all 0.3s ease;167 }168 169 .comentario-ver {170 font-size: 10px;171 padding: 3px;172 cursor: pointer;173 background-color: silver;174 color: white;175 width: auto;176 min-width: 90px;177 text-align: center;178 179 transition: all 0.3s ease;180 }181 182 .comentario-texto {183 display: none;184 padding: 8px;185 border: solid orange 1px;186 max-height: 400px;187 overflow-y: auto;188 }189 190 .comentario:hover {191 z-index: 999;192 box-shadow: 2px 2px 2px rgba(0,0,0,0.4);193 }194 195 .comentario:hover .comentario-ver {196 width: 100%;197 background-color: orange;198 }199 200 .comentario:hover .comentario-texto {201 display: block;202 background-color: rgba(255,255,255, 0.85);203 204 }205 206 207 208 Enlace
El enlace para compartir es: