1. body {

  2.   font-family: system-ui, sans-serif;

  3. }

  4. 

  5. * {

  6.   box-sizing: border-box;

  7. }

  8. 

  9. nav {

  10.   padding: 20px;

  11. }

  12. 

  13. .sidebar {

  14.   padding: 10px;

  15.   height: 500px;

  16.   float: left;

  17.   width: 30%;

  18. }

  19. 

  20. .post {

  21.   padding: 20px;

  22.   float: left;

  23.   width: 60%;

  24. }

  25. 

  26. h1, h2 {

  27.   padding: 0;

  28. }

  29. 

  30. ul, li {

  31.   margin: 0;

  32. }

  33. 

  34. .post p {

  35.   font-size: larger;

  36.   font-family: Georgia, serif;

  37. }

  38. 

  39. .comments {

  40.   margin-top: 40px;

  41. }

  42. 

  43. .comment {

  44.   border: 2px solid #aaa;

  45.   border-radius: 4px;

  46.   padding: 20px;

  47. }

  48. 

  49. /* https://codepen.io/mandelid/pen/vwKoe */

  50. .spinner {

  51.   display: inline-block;

  52.   transition: opacity linear 0.1s;

  53.   width: 20px;

  54.   height: 20px;

  55.   border: 3px solid rgba(80, 80, 80, 0.5);

  56.   border-radius: 50%;

  57.   border-top-color: #fff;

  58.   animation: spin 1s ease-in-out infinite;

  59.   opacity: 0;

  60. }

  61. .spinner--active {

  62.   opacity: 1;

  63. }

  64. 

  65. @keyframes spin {

  66.   to {

  67.     transform: rotate(360deg);

  68.   }

  69. }

  70. @keyframes spin {

  71.   to {

  72.     transform: rotate(360deg);

  73.   }

  74. }
About Sign Up Leave Feedback Contact