User:0x99/styles.css: Difference between revisions

Revision as of 09:04, 16 September 2023

#pm-header {
  background-color: #f8f9fc;
  border: 1px solid #dee3ed;
  margin-bottom: 5px;
  padding: 10px;
  text-align: center;
}

#pm-main-visual {
  border-color: #ebdfff;
  background-color: #fbf9ff;
}

#pm-main-visual .pm-container__h2 {
  border-color: #dfcbff;
  background-color: #eee3ff;
}

#pm-news {
  background-color: #fdf2ff;
  border-color: #f8d7ff;
}

#pm-news .pm-container__h2 {
  border-color: #f8d4ff;
  background-color: #fbe7ff;
}

#pm-content-left {
  border-color: #d7f2ff;
  background-color: #f2fbff;
}

#pm-content-left .pm-container__h2 {
  border-color: #bdebff;
  background-color: #d6f2ff;
}

#pm-content-right {
  border-color: #ffefbb;
  background-color: #fffdf5;
}

#pm-content-right .pm-container__h2 {
  background-color: #fff9e6;
  border-color: #ffefbb;
}

.pm-container .pm-container__box {
  border: 1px solid #000;
  margin-bottom: 5px;
  padding: 10px 10px 0;
}

.pm-container .pm-container__h2 {
  border: 1px solid #000;
  font-family: sans-serif;
  font-size: 1em;
  font-weight: bold;
  margin-bottom: 10px;
  margin-top: 0;
  padding: 10px;
}

.pm-container .pm-container__content {
  margin: 0 0 10px 0;
}

@media (min-width: 875px) {
  .pm-container {
    display: flex;
  }
  
  .pm-container .pm-container__left {
    margin-right: 2px;
  }
  
  .pm-container .pm-container__middle {
    margin-left: 2px;
    margin-right: 2px;
  }
  
  .pm-container .pm-container__right {
    margin-left: 2px;
  }

  .pm-container .pm-container__box--1\/2 {
    flex: 1 1 50%;
  }

  .pm-container .pm-container__box--2\/3 {
    flex: 1 1 66%;
  }

  .pm-container .pm-container__box--1\/3 {
    flex: 1 1 33%;
  }

  .pm-container .pm-container__box--1\/4 {
    flex: 1 1 25%;
  }

  .pm-container .pm-container__box--2\/4 {
    flex: 1 1 50%;
  }

  .pm-container .pm-container__box--3\/4 {
    flex: 1 1 75%;
  }
}