style.scss 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. .gaztime {
  2. $color_main: #ff6900;
  3. $color_alt: #f7a130;
  4. padding: 2rem;
  5. position: relative;
  6. flex: none;
  7. color: #fff;
  8. background-color: $color_main;
  9. background-image: url("//dd.unicraft.org/static/branding/gaz-time/header/bg.png");
  10. background-repeat: no-repeat;
  11. background-size: cover;
  12. background-position: right center;
  13. display: flex;
  14. flex-wrap: wrap;
  15. @media (max-width: 1000px) {
  16. padding: 2rem 1rem;
  17. }
  18. @media (max-width: 800px) {
  19. background-size: auto 100%;
  20. background-position: 60% bottom;
  21. }
  22. &_logo {
  23. flex: none;
  24. width: auto;
  25. margin: auto 0;
  26. @media (max-width: 1200px) {
  27. height: 100px;
  28. }
  29. @media (max-width: 800px) {
  30. height: 100px;
  31. margin-bottom: 20px;
  32. }
  33. }
  34. &_text {
  35. line-height: 1.1;
  36. max-width: 370px;
  37. margin: auto 2rem;
  38. padding-bottom: 1rem;
  39. &_main {
  40. font-size: 30px;
  41. padding: 10px 20px;
  42. @media (max-width: 1000px) {
  43. background-color: rgba($color_main, 0.85);
  44. }
  45. }
  46. &_bluebox {
  47. font-size: 12px;
  48. text-transform: uppercase;
  49. padding: 10px 20px;
  50. background: #00b5e2;
  51. max-width: max-content;
  52. }
  53. }
  54. }