Advertisement
JonathanKevinTaswin6

Untitled

Dec 4th, 2024
89
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 1.53 KB | None | 0 0
  1. body {
  2.   font-family: Arial, sans-serif;
  3.   background-color: #ffffff;
  4.   color: #000000;
  5.   padding: 20px;
  6.   margin: 0;
  7.   display: flex;
  8.   flex-wrap: wrap;
  9.   justify-content: space-between;
  10.   gap: 15px;
  11.   max-width: 100%;
  12. }
  13.  
  14. h1 {
  15.   width: 100%;
  16.   text-align: left;
  17.   margin-bottom: 20px;
  18. }
  19.  
  20. @media (max-width: 768px) {
  21.   h1 {
  22.     text-align: center;
  23.   }
  24. }
  25.  
  26. p {
  27.   margin: 2px 0;
  28. }
  29.  
  30. .comment-preview {
  31.   width: 100%;
  32.   padding: 10px;
  33.   border-radius: 8px;
  34.   text-decoration: none;
  35.   color: inherit;
  36.   overflow: hidden;
  37.   background-color: transparent;
  38. }
  39.  
  40. .comment-preview:hover {
  41.   background-color: #f5f5f5;
  42. }
  43.  
  44. .thumbnail {
  45.   width: 100%;
  46.   background-color: transparent;
  47.   border-radius: 8px;
  48.   display: flex;
  49.   align-items: center;
  50.   justify-content: center;
  51.   margin-bottom: 10px;
  52. }
  53.  
  54. .thumbnail img {
  55.   width: 100%;
  56.   height: auto;
  57.   object-fit: cover;
  58.   border-radius: 8px;
  59. }
  60.  
  61. a {
  62.   color: inherit;
  63.   text-decoration: none;
  64. }
  65.  
  66. a:hover {
  67.   color: #007acc;
  68. }
  69.  
  70. @media (prefers-color-scheme: dark) {
  71.   body {
  72.     background-color: #121212;
  73.     color: #e0e0e0;
  74.   }
  75.   .comment-preview:hover {
  76.     background-color: #333333;
  77.   }
  78.   a:hover {
  79.     color: #87ceeb;
  80.   }
  81. }
  82.  
  83. @media (min-width: 1024px) {
  84.   body {
  85.     justify-content: flex-start;
  86.     padding: 20px;
  87.   }
  88.   .comment-preview {
  89.     margin: 15px;
  90.     width: 300px;
  91.   }
  92. }
  93.  
  94. @media (max-width: 768px) {
  95.   body {
  96.     justify-content: center;
  97.     padding: 10px;
  98.   }
  99.   .comment-preview {
  100.     width: 100%;
  101.     margin: 0;
  102.   }
  103. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement