Source of static website jo-e.de built with HUGO https://jo-e.de
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.

96 lines
1.6KB

  1. // mobile ~320..480px
  2. // 320px ~ 16rem/16px ~ 18.8235/17px ~ 17.7778/18px
  3. // 480px ~ 30rem/16px ~ 28.2353rem/17px ~ 26.6667rem/18px
  4. @media (min-width: 320px) and (max-width: 767px) {
  5. html,
  6. body {
  7. font-size: $small-device-font-size;
  8. }
  9. .sidebar {
  10. top: 0;
  11. background-image: $sidebar-bg-img-ls;
  12. width: 100%;
  13. margin: 0;
  14. padding: 0;
  15. .sidebar-content {
  16. min-height: initial;
  17. .sidebar-title,
  18. .sidebar-image,
  19. .sidebar-description {
  20. display: none;
  21. }
  22. }
  23. .sidebar-copyright {
  24. display: none;
  25. }
  26. li {
  27. padding: .1rem 0;
  28. }
  29. }
  30. .content {
  31. margin-top: 3rem;
  32. max-width: 45rem;
  33. padding: 1.5rem;
  34. }
  35. }
  36. // tablet/medium device ~768px+
  37. // 768px ~ 48em/16px ~ 45.1765em/17px ~ 42.6667/18px
  38. @media (min-width: 768px) {
  39. html,
  40. body {
  41. font-size: $small-device-font-size;
  42. }
  43. .sidebar {
  44. background-image: $sidebar-bg-img-bar;
  45. height: 100%;
  46. display: flex;
  47. flex-direction: column;
  48. width: $sidebar-width;
  49. overflow: auto;
  50. .sidebar-content {
  51. flex: 1 0 auto;
  52. }
  53. .sidebar-footer {
  54. flex-shrink: 0;
  55. }
  56. }
  57. .content {
  58. margin-left: $sidebar-width;
  59. max-width: $content-max-width;
  60. }
  61. .post-footer{
  62. .post-navigation {
  63. display: flex;
  64. justify-content: space-between;
  65. a {
  66. width: calc(50% - 5px);
  67. &:nth-child(2) {
  68. margin-top: 0;
  69. }
  70. }
  71. }
  72. }
  73. input#menuToggle,
  74. input#menuToggle + label {
  75. display: none;
  76. }
  77. }
  78. // Large devices (laptops/desktops, 992px and up)
  79. // ~ 62rem/16px ~ 58.3529rem/17px ~ 55.1111rem/18px
  80. @media (min-width: 992px) {
  81. html,
  82. body {
  83. font-size: $large-device-font-size;
  84. }
  85. }