Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

139 lines
2.9KB

  1. dark-mode-toggle {
  2. --dark-mode-toggle-dark-icon: url("/wp-content/sun.png");
  3. --dark-mode-toggle-light-icon: url("/wp-content/moon.png");
  4. }
  5. @font-face {
  6. font-family: 'Inter';
  7. font-display: auto;
  8. font-style: normal;
  9. font-weight: 400;
  10. src: url("https://rsms.me/inter/font-files/Inter-Regular.woff2") format("woff2"),
  11. url("https://rsms.me/inter/font-files/Inter-Regular.woff") format("woff");
  12. }
  13. @font-face {
  14. font-family: 'Inter';
  15. font-display: auto;
  16. font-style: normal;
  17. font-weight: 700;
  18. src: url("https://rsms.me/inter/font-files/Inter-Bold.woff2") format("woff2"),
  19. url("https://rsms.me/inter/font-files/Inter-Bold.woff") format("woff");
  20. }
  21. body.light {
  22. background: #ededed;
  23. }
  24. body.dark {
  25. background: #222;
  26. }
  27. .hack code {
  28. font-family: 'Roboto Mono', monospace;
  29. }
  30. .hack, .hack blockquote, .hack em, .hack h1, .hack h2, .hack h3, .hack h4, .hack h5, .hack h6, .hack strong {
  31. font-family: 'Inter', monospace;
  32. font-weight: 700;
  33. }
  34. .hack {
  35. font-family: "Inter", serif;
  36. font-weight: 400;
  37. }
  38. a[rel*="external"]::after {
  39. content: " " url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20class='i-external'%20viewBox='0%200%2032%2032'%20width='14'%20height='14'%20fill='none'%20stroke='%23ff9800'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='9.38%'%3E%3Cpath%20d='M14%209%20L3%209%203%2029%2023%2029%2023%2018%20M18%204%20L28%204%2028%2014%20M28%204%20L14%2018'/%3E%3C/svg%3E");
  40. }
  41. nav a {
  42. padding: 2px;
  43. margin-right: 0.4rem;
  44. }
  45. .side-nav a {
  46. margin-right: 0.4rem;
  47. }
  48. .light nav a.active {
  49. background-color: inherit;
  50. color: #000;
  51. }
  52. .light a {
  53. color: #422eff;
  54. border-bottom: 1px solid #00ff9c;
  55. }
  56. .light pre {
  57. border: none;
  58. background: #222;
  59. padding: 1rem;
  60. }
  61. .light pre code {
  62. color: #00bcd4;
  63. }
  64. .dark a {
  65. color: rgb(82, 174, 255);
  66. border-bottom: 1px solid rgb(15, 143, 94);
  67. }
  68. .light a:hover {
  69. color: #000;
  70. background-color: #00ff9c;
  71. }
  72. .dark a:hover {
  73. color: #333;
  74. background-color: rgb(15, 143, 94);
  75. }
  76. .dark pre {
  77. background-color: #222;
  78. padding: 1rem;
  79. }
  80. .dark table tbody td:first-child {
  81. color: #ccc;
  82. }
  83. .muted, .help-block {
  84. opacity: 0.70;
  85. }
  86. .light
  87. .hack .muted,
  88. .hack .help-block {
  89. color: #0e0e0e;
  90. }
  91. .hack > header {
  92. display: grid;
  93. grid-template-columns: 1fr minmax(min-content, auto);
  94. column-gap: 20px;
  95. grid-template-areas: "nav nav";
  96. }
  97. .leader{
  98. display: flex;
  99. align-items: center;
  100. justify-content: center;
  101. }
  102. .myimage{
  103. margin-right: 10px;
  104. box-shadow: 0 4px 8px 0 rgba(0,0,0,.12),0 2px 4px 0 rgba(0,0,0,.08);
  105. border-width: 1px;
  106. border-radius: 9999px;
  107. border-color: #22292f;
  108. border-style: solid;
  109. height: 4rem;
  110. width: 4rem;
  111. }
  112. small {
  113. font-weight: 400;
  114. }
  115. a.no-underline {
  116. border: none;
  117. }
  118. .archive h1 {
  119. display: grid;
  120. grid-template-columns: 1fr minmax(min-content, auto);
  121. column-gap: 20px;
  122. grid-template-areas: "div div";
  123. }
  124. .post-content p{
  125. max-width: 40rem;
  126. }