timeline.css 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. @media only screen and (min-width: 768px) {
  2. .column {
  3. float: left;
  4. width: 32%;
  5. }
  6. .timeline {
  7. float: right;
  8. width: 67%;
  9. }
  10. }
  11. .postcell {
  12. border: 1px solid red;
  13. text-align: left;
  14. margin: 0.25em 0
  15. }
  16. .message {
  17. margin: 1em 1em 1em 3em;
  18. white-space: pre-wrap;
  19. word-wrap: break-word;
  20. }
  21. .buttons {
  22. margin-left: 1em;
  23. margin-bottom:0.5em;
  24. }
  25. .timestamp {
  26. text-align: right;
  27. margin: 0.5em
  28. }
  29. .hashtag {
  30. color: green;
  31. font-weight: bold;
  32. }
  33. .avatar {
  34. vertical-align: middle;
  35. width: 50px;
  36. height: 50px;
  37. }
  38. .column .profile {
  39. vertical-align: middle;
  40. padding-left: 10px;
  41. padding:1%;
  42. }
  43. .column .profile .handle{
  44. font-size: 1.1em;
  45. font-weight: bold;
  46. }
  47. .column .profile .email{
  48. font-size: 0.8em;
  49. text-align:left;
  50. text-decoration:none;
  51. }
  52. .column .profile .bio {
  53. font-size: 0.9em;
  54. vertical-align: middle;
  55. margin: 1em
  56. }
  57. .gallery {
  58. margin:auto;
  59. display: flex;
  60. align-items: center;
  61. width: 100%;
  62. }
  63. .gallery .panel {
  64. margin: 2px;
  65. width: auto
  66. }
  67. .gallery .panel img {
  68. width: 100%;
  69. height: 100%;
  70. }
  71. .gallery .panel img:hover {
  72. border: 1px solid #777;
  73. filter: invert(100%);
  74. }
  75. .postcell .avatar {
  76. margin-left:3%;
  77. margin-top:2%;
  78. height: 4em;
  79. width:auto;
  80. vertical-align:top;
  81. }
  82. .postcell .wrapper {
  83. margin-top:2%;
  84. display: inline-block;
  85. }
  86. .postcell .wrapper .last-updated,
  87. .postcell .wrapper .post-count {
  88. font-size: 1em;
  89. color:grey;
  90. }
  91. .postcell .short-bio{
  92. padding-left: 3%;
  93. padding-right: 2%;
  94. font-style: italic;
  95. word-wrap: break-word;
  96. }
  97. /* Clear floats after the columns */
  98. .row:after {
  99. content: "";
  100. display: table;
  101. clear: both;
  102. }