You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

150 lines
1.8KB

  1. body {
  2. display: flex;
  3. flex-flow: column wrap;
  4. line-height: 1.5em;
  5. }
  6. main {
  7. max-width: 50em;
  8. margin: auto;
  9. flex: 8 0;
  10. padding: 1.5rem;
  11. }
  12. img {
  13. max-width: 100%;
  14. }
  15. code, blockquote {
  16. background: #eee;
  17. }
  18. code {
  19. font-family: monospace;
  20. }
  21. blockquote {
  22. font-style: italic;
  23. border-left: 10px solid #ccc;
  24. margin: 1.5em 10px;
  25. padding: 0.5em 10px;
  26. }
  27. /* Homepage */
  28. .intro > h1 {
  29. color: #212121;
  30. font-size: 6vh;
  31. }
  32. .intro > h2 {
  33. color: #757575;
  34. font-size: 3vmin;
  35. }
  36. /* Page content */
  37. .content {
  38. padding-top: 20px;
  39. }
  40. /* Profile picture */
  41. .profile {
  42. width: 10vh;
  43. height: 10vh;
  44. border-radius: 50%;
  45. }
  46. /* Colored links */
  47. a:link, a:visited {
  48. color: var(--accent);
  49. }
  50. a.icon:hover {
  51. text-decoration: none;
  52. }
  53. a:hover {
  54. color: var(--accent) !important;
  55. }
  56. /* Copyright message */
  57. .copyright {
  58. margin: 15px 0;
  59. }
  60. /* Paginator */
  61. .pages {
  62. padding: 15px 0;
  63. }
  64. .pages-icon {
  65. padding: 0 15px;
  66. }
  67. /* List item for posts/projects */
  68. .item {
  69. padding: 10px 0;
  70. }
  71. .item-tag {
  72. background-color: var(--accent);
  73. }
  74. /* Navigation */
  75. .navbar-icon {
  76. width: 1em;
  77. height: 1em;
  78. display: inline-block !important;
  79. }
  80. .navbar-icon.email {
  81. background-image: url('/icons/email.svg');
  82. }
  83. .navbar-icon.twitter {
  84. background-image: url('/icons/twitter.svg');
  85. }
  86. .navbar-icon.git {
  87. background-image: url('/icons/share.svg');
  88. }
  89. nav{
  90. flex: 1 0 auto;
  91. display: flex;
  92. }
  93. nav div {
  94. flex: 1 0 33%;
  95. }
  96. nav a {
  97. flex: 1 0 33%;
  98. }
  99. /* Colored borders at top/bottom of page */
  100. .navbar.navbar-default {
  101. border-bottom: var(--border-width) solid var(--accent);
  102. }
  103. footer {
  104. flex: 1 0 auto;
  105. border-top: var(--border-width) solid var(--accent);
  106. }
  107. /* helpers */
  108. .right {
  109. text-align: right;
  110. float: right;
  111. }
  112. .left {
  113. text-align: left;
  114. float: left;
  115. }