Advertisement
rfog

Mi CSS para Just Read

Sep 17th, 2023
966
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.82 KB | Source Code | 0 0
  1. @import url("https://fonts.googleapis.com/css?family=Merriweather|Source+Sans+Pro:400,700");
  2.  
  3. body {
  4.   font-family: "Merriweather", serif;
  5.   background-color: #fff;
  6.   line-height: 1.6;
  7.   font-size: 17px;
  8.   text-rendering: optimizeLegibility;
  9.   text-align:   justify;   
  10.   -webkit-hyphens: auto;
  11.   -ms-hyphens: auto;
  12.   hyphens: auto;
  13. }
  14.  
  15. p {
  16.     text-align: justify;   
  17. }
  18.  
  19. h1,
  20. h2 {
  21.   font-family: "Source Sans Pro", sans-serif;
  22.   font-weight: 700;
  23.   text-align:   center;
  24. }
  25.  
  26. h1 {
  27.   font-size: 1.875em;
  28.   line-height: 1.125;
  29.   text-align:   center;
  30. }
  31.  
  32. h2 {
  33.   font-size: 1.45em;
  34.   line-height: 1.2625em;
  35.     text-align: center;
  36. }
  37.  
  38. h3 {
  39.   font-family: "Merriweather", serif;
  40.   font-size: 1.25em;
  41.   line-height: 1.5;
  42. }
  43.  
  44. hr {
  45.   height: 1px;
  46.   background-color: #d8d8d8;
  47.   border: none;
  48.   width: 100%;
  49.   margin: 0px;
  50. }
  51.  
  52. a[href] {
  53.   color: #27aae1;
  54. }
  55.  
  56. a[href]:hover {
  57.   color: #4ecaff;
  58. }
  59.  
  60. .simple-container {
  61.   -webkit-print-color-adjust: exact;
  62. }
  63.  
  64. .youtubeContainer {
  65.   position: relative;
  66.   width: 100%;
  67.   height: 0;
  68.   padding-bottom: 56.25%;
  69.   padding-top: 25px;
  70. }
  71. iframe {
  72.   width: 100%;
  73.   height: 300px;
  74. }
  75. iframe[src*="youtube.com/embed/"] {
  76.   width: 100%;
  77.   height: 100%;
  78.   position: absolute;
  79.   top: 0;
  80.   left: 0;
  81. }
  82.  
  83. video,
  84. img {
  85.   max-width: 100%;
  86.   display: block;
  87.   margin-left: auto;
  88.   margin-right: auto;
  89. }
  90.  
  91.  
  92. li {
  93.   line-height: 1.5em;
  94.   margin-bottom: 5px;
  95. }
  96.  
  97. td {
  98.   border: 1px solid black;
  99.   padding: 3px 7px;
  100. }
  101.  
  102. pre {
  103.   padding: 10px;
  104.   overflow: auto;
  105. }
  106. pre,
  107. code {
  108.   background-color: #e0e0e0;
  109. }
  110.  
  111. blockquote {
  112.   border-left: 4px solid;
  113.   margin-left: 0;
  114.   padding: 1px 7% 1px 7%;
  115.   margin: 0em 0;
  116.   font-size: 1em;
  117.   line-height: 1.4;
  118. }
  119. blockquote > *:first-child {
  120.   margin-top: 0;
  121. }
  122. blockquote > *:last-child {
  123.   margin-bottom: 0;
  124. }
  125.  
  126. figure {
  127.   margin: 0 0 10px;
  128. }
  129. figcaption {
  130.   font-size: 0.9em;
  131.   opacity: 0.7;
  132.   border: 1px solid #eee;
  133.   padding: 17px 17px 12px;
  134. }
  135.  
  136. aside,
  137. [class*="sidebar"],
  138. [id*="sidebar"] {
  139.   max-width: 90%;
  140.   margin: 0 auto;
  141.   border: 1px solid lightgrey;
  142.   padding: 5px 15px;
  143. }
  144.  
  145. .simple-date {
  146.   display: inline-block;
  147.   font-family: "Source Sans Pro", sans-serif;
  148.   font-size: 18px;
  149.   padding-right: 15px;
  150.   padding-top: 10px;
  151.   padding-bottom: 10px;
  152.   border-right: 1px solid #d8d8d8;
  153. }
  154. .rtl .simple-date {
  155.   border-left: 1px solid #d8d8d8;
  156.   border-right: none;
  157.   padding-right: 0;
  158.   padding-left: 15px;
  159. }
  160.  
  161. .simple-author {
  162.   display: inline-block;
  163.   font-family: "Source Sans Pro", sans-serif;
  164.   font-size: 18px;
  165.   color: #27aae1;
  166.   line-height: 22px;
  167.   padding-left: 10px;
  168.   padding-top: 10px;
  169.   padding-bottom: 10px;
  170. }
  171. .rtl .simple-author {
  172.   padding-left: 0;
  173.   padding-right: 10px;
  174. }
  175.  
  176. .simple-article-container {
  177.   max-width: 600px;
  178. }
  179.  
  180. /* Make emojis and icons a reasonable size */
  181. .content-container svg,
  182. [class*="emoji"],
  183. [class*="icon"]:not([class*="no-icon"]) {
  184.   width: 1em;
  185. }
  186. [class*="inline"] {
  187.   display: inline-block;
  188.   min-width: 2rem;
  189. }
  190.  
Tags: CSS just read
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement