timeline.css 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. body {
  2. max-width:95%;
  3. margin:auto;
  4. }
  5. @media only screen and (min-width: 768px) {
  6. .column {
  7. float: left;
  8. width: 30%;
  9. }
  10. .timeline {
  11. float: right;
  12. width: 67%;
  13. }
  14. }
  15. /* POSTING */
  16. /* .postcell */
  17. .timeline article {
  18. border: 1px solid red;
  19. text-align: left;
  20. margin: 0.25em 0
  21. }
  22. .timeline article h4 {
  23. text-align: right;
  24. margin: 0.5em
  25. }
  26. .timeline article h4 ~ * {
  27. margin: 1em 1em 1em 3em;
  28. word-wrap: break-word;
  29. }
  30. .buttons {
  31. margin-left: 1em;
  32. margin-bottom:0.5em;
  33. }
  34. .hashtag {
  35. color: green;
  36. font-weight: bold;
  37. }
  38. /* PROFILE */
  39. .column figure {
  40. margin-left: 3%;
  41. }
  42. .avatar {
  43. vertical-align: middle;
  44. width: 50px;
  45. height: 50px;
  46. }
  47. .column {
  48. border:1px solid blue;
  49. padding-left: 10px;
  50. padding:1%;
  51. }
  52. .profile .handle{
  53. font-size: 1.1em;
  54. font-weight: bold;
  55. }
  56. .profile .email{
  57. font-size: 0.8em;
  58. text-align:left;
  59. text-decoration:none;
  60. }
  61. .profile .bio {
  62. font-size: 0.9em;
  63. vertical-align: middle;
  64. margin: 1em
  65. }
  66. /* IMAGES */
  67. .gallery {
  68. margin:auto;
  69. display: flex;
  70. align-items: center;
  71. width: 100%;
  72. }
  73. .gallery .panel {
  74. margin: 2px;
  75. width: auto
  76. }
  77. .gallery .panel img {
  78. width: 100%;
  79. height: 100%;
  80. }
  81. .gallery .panel img:hover {
  82. border: 1px solid #777;
  83. filter: invert(100%);
  84. }
  85. /* WEBRING */
  86. .timeline article figure img {
  87. margin-left:3%;
  88. margin-top:2%;
  89. height: 4em;
  90. width:auto;
  91. vertical-align:top;
  92. }
  93. .timeline article figure {
  94. display:flex;
  95. margin-left:0;
  96. }
  97. .timeline article figcaption {
  98. margin-left: 3%;
  99. display: inline-block;
  100. font-size: 0.85em;
  101. }
  102. .timeline article figcaption ul {
  103. list-style-type:none;
  104. padding-left:0;
  105. }
  106. .timeline article figcaption p {
  107. margin-top:0;
  108. margin-bottom:0;
  109. }
  110. .timeline article .short-bio{
  111. padding-left: 3%;
  112. padding-right: 2%;
  113. font-style: italic;
  114. word-wrap: break-word;
  115. }
  116. footer {
  117. text-align:center;
  118. }