App.scss 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. .App {
  2. text-align: center;
  3. }
  4. .App-logo {
  5. height: 40vmin;
  6. pointer-events: none;
  7. }
  8. @media (prefers-reduced-motion: no-preference) {
  9. .App-logo {
  10. animation: App-logo-spin infinite 20s linear;
  11. }
  12. }
  13. .App-header {
  14. background-color: #282c34;
  15. min-height: 100vh;
  16. display: flex;
  17. flex-direction: column;
  18. align-items: center;
  19. justify-content: center;
  20. font-size: calc(10px + 2vmin);
  21. color: white;
  22. }
  23. .App-link {
  24. color: #61dafb;
  25. }
  26. @keyframes App-logo-spin {
  27. from {
  28. transform: rotate(0deg);
  29. }
  30. to {
  31. transform: rotate(360deg);
  32. }
  33. }
  34. .Logo {
  35. height: 40vmin;
  36. pointer-events: none;
  37. }
  38. header, footer {
  39. max-height: 100px;
  40. background-color: black;
  41. .Logo {
  42. max-height: 100px;
  43. }
  44. }
  45. nav {
  46. display: flex;
  47. background-color: black;
  48. justify-content: space-evenly;
  49. .item {
  50. &:hover {
  51. background-color: rgba(58, 55, 55, 0.925);
  52. }
  53. &:active {
  54. background-color: rgba(92, 87, 87, 0.925);
  55. }
  56. }
  57. }
  58. main {
  59. display: flex;
  60. aside {
  61. width: 16%;
  62. }
  63. }
  64. li {
  65. list-style: none;
  66. }
  67. .CatLink {
  68. padding: 3px;
  69. margin: 10px 0px;
  70. border-left: 5px solid rgb(47, 121, 170);
  71. //border-right: 5px solid rgb(47, 121, 170);
  72. background-color: whitesmoke;
  73. &:hover {
  74. background-color: black;
  75. a {
  76. color: white;
  77. }
  78. }
  79. &:active {
  80. background-color:rgb(47, 121, 170);
  81. }
  82. }
  83. .GoodCard {
  84. background-color: whitesmoke;
  85. border: 1px dashed black;
  86. margin: 5px;
  87. padding: 5px;
  88. }
  89. .GoodImg {
  90. max-width: 300px;
  91. height: auto;
  92. }
  93. .KoshikCnt {
  94. border-top: 5px solid rgb(47, 121, 170);
  95. border-bottom: 5px solid rgb(47, 121, 170);
  96. color: white;
  97. padding: 0px 10px;
  98. }
  99. .form {
  100. background-color: whitesmoke;
  101. text-align: center;
  102. border: 5px solid rgb(47, 121, 170);
  103. padding: 5px;
  104. margin-left: 30px;
  105. }
  106. .Content {
  107. padding: 10px;
  108. margin: 0 auto;
  109. }