Advertisement
rfog

Material Design CSS for Just Read

Nov 27th, 2023 (edited)
813
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.65 KB | None | 0 0
  1. @import url("https://fonts.googleapis.com/css?family=Noticia Text");
  2.  
  3. @import url("https://fonts.googleapis.com/css?family=Neuton");
  4.  
  5.  
  6. * {
  7.     box-sizing: border-box;
  8. }
  9.  
  10. body {
  11.     margin: 0px;
  12.     font-family: Neuton, serif;
  13.     text-align: justify;
  14.     line-height: 1.5em;
  15.     font-size: 19px;
  16.     color: rgb(42, 42, 42);
  17.     background-color: rgb(250, 250, 250);
  18. }
  19.  
  20. p {
  21.     text-align: justify;
  22. }
  23.  
  24. article_content {
  25.     text-align: justify;
  26. }
  27.  
  28. article_content img {
  29.     display: block;
  30.     margin: auto;
  31. }
  32.  
  33. h1,
  34. h2 {
  35.     font-family: Noticia Text, serif;
  36. }
  37.  
  38. h1 {
  39.     font-size: 1.875em;
  40.     text-align: center;
  41.     font-weight: bold;
  42.     line-height: 1.5em;
  43. }
  44.  
  45. h2 {
  46.     font-size: 1.25em;
  47.     text-align: center;
  48.     font-weight: bold;
  49.     line-height: 1.5em;
  50. }
  51.  
  52. h3 {
  53.     font-family: Noticia Text, serif;
  54.     font-size: 1em;
  55.     line-height: 1.5em;
  56.     padding-top: 0.9375em;
  57.     padding-bottom: 0.9375em;
  58.     border-bottom: 1px solid rgb(216, 216, 216);
  59.     border-top: 1px solid rgb(216, 216, 216);
  60. }
  61.  
  62. hr {
  63.     height: 1px;
  64.     background-color: rgb(255, 255, 255);
  65.     border: none;
  66.     width: 100%;
  67.     margin: 0px;
  68. }
  69.  
  70. a[href] {
  71.     color: rgb(0, 0, 0);
  72. }
  73.  
  74. a[href]:hover {
  75.     color: rgb(0, 0, 0);
  76. }
  77.  
  78. img {
  79.     max-width: 50%;
  80.     margin: 10px 25%;
  81.     border: 1px solid rgb(221, 221, 221);
  82.     padding: 2px;
  83.     display: block;
  84. }
  85.  
  86. li {
  87.     line-height: 1.5em;
  88. }
  89.  
  90. pre {
  91.     background-color: rgb(255, 0, 0);
  92.     padding: 10px;
  93.     overflow: auto;
  94. }
  95.  
  96. aside,
  97. [class*="sidebar"],
  98. [id*="sidebar"] {
  99.     max-width: 90%;
  100.     margin: 0px auto;
  101.     border: 1px solid lightgrey;
  102.     padding: 5px 15px;
  103. }
  104.  
  105. .simple-date {
  106.     display: inline-block;
  107.     font-family: "Source Sans Pro Light", sans-serif;
  108.     font-size: 18px;
  109.     padding-right: 15px;
  110.     padding-top: 10px;
  111.     padding-bottom: 10px;
  112.     border-right: 1px solid rgb(216, 216, 216);
  113. }
  114.  
  115. .simple-author {
  116.     display: inline-block;
  117.     font-family: "Source Sans Pro Semibold", sans-serif;
  118.     font-size: 18px;
  119.     color: rgb(39, 170, 225);
  120.     line-height: 22px;
  121.     padding-left: 10px;
  122.     padding-top: 10px;
  123.     padding-bottom: 10px;
  124. }
  125.  
  126. .simple-container {
  127.     max-width: 600px;
  128.     margin: 0px auto;
  129.     padding-top: 70px;
  130.     padding-bottom: 20px;
  131. }
  132.  
  133. @media (max-width: 750px) {
  134.     .simple-container {
  135.         padding-left: 50px;
  136.         padding-right: 50px;
  137.         box-shadow: rgb(136, 136, 136) 0px 0px 10px;
  138.     }
  139. }
  140.  
  141. @media (max-width: 450px) {
  142.     .simple-container {
  143.         padding-top: 30px;
  144.         padding-left: 20px;
  145.         padding-right: 20px;
  146.     }
  147. }
  148.  
  149. .emoji,
  150. svg.icon {
  151.     width: 1em;
  152. }
Tags: CSS just read
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement