[YSTU WPROG] Мобильная адаптация

README.md

[YSTU WPROG] Mobile adaptation

Установка с помощью Stylus

Если у вас установлено расширение Stylus, вы можете установить тему, перейдя по ссылке ниже.
(Для ПК не актуально, но как пример)

<meta name="viewport" content="width=device-width, initial-scale=1" />

mobile.css

/* Fixs/Feature for modal */
.popup,
.popup_click {
  width: fit-content;
  margin: inherit!important;
  position: absolute;
  top: 15%;
  left: 35%;
  margin-top: -50px!important;
  margin-left: -50px!important;
}
.prokrutka {
  overflow-x: auto;
  overflow-y: auto;
}

.CenterColumn {
  margin: inherit;
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 800px) {
  .WidthLimiter {
    min-width: max-content;
  }

  /*   header   */
  .ContentHeader {
    max-width: calc(100vw - 0px);
  }
  .ContentHeader > .Logo {
    width: inherit;
    height: inherit;
    position: inherit;
    top: inherit;
    left: inherit;

    padding: 5px;
  }

  .ContentHeader > .Logo > img {
    width: 150px;
  }

  .MainMenuContent > ul {
    flex-direction: column;
    display: flex;
  }
  .MainMenuContent > ul > lim,
  .MainMenuContent > ul > lil,
  .MainMenuContent > ul > lir,
  .MainMenuContent > ul > * {
    border-bottom: 1px solid #ffffff;
    height: inherit;
    /* max-width: calc(100vw - 40px); */
  }

  .MainMenuArea {
    padding: 15px;
  }

  .MainMenuArea .MainMenuContent {
    height: inherit;
    background: inherit;
    background-color: #3670f4;
  }

  /*   content   */
  .WidthLimiter > .Content,
  .NewsLeftColumn > .Content {
    flex-direction: column;
    display: flex;
    max-width: calc(100vw - 0px);
  }

  .LeftColumn {
    width: inherit;
  }

  .RightContentColumn {
    margin-left: inherit;
  }

  /* Скрыть гирлянду */
  .NewsLeftColumn .Content > img {
    display: none;
  }

  /* fix желтого */
  .NewsLeftColumn .Content > .box {
    max-width: calc(100vw - 80px);
  }
  .NewsLeftColumn .Content > .box > pre {
    white-space: pre-wrap;
  }

  /* Объявлеиня */
  .NewsLeftColumn > .Content > font > ul {
    max-width: 100vw;
    margin: inherit;
    padding: 0 0 0 30px;
    line-height: inherit;
  }

  .RightContentColumn > div > div > div > table {
    width: auto;
  }

  .CenterColumn {
    margin: 0 15px;
    flex-direction: column;
  }
  .CenterColumn table,
  .CenterColumn table td {
    width: auto;
  }

  /* Footer */
  .BottomFooter .Copyright > table {
    width: auto;
  }
  .BottomFooter .Copyright > table p.Lightgray {
    margin-left: inherit;
    margin-right: inherit;
    font-size: inherit;
    line-height: inherit;
  }

  .BottomFooter .Copyright > table > tbody > tr > td,
  .NewsLeftColumn > .Content > table > tbody > tr > td,
  .NewsLeftColumn > .Content > font > table > tbody > tr > td {
    display: block;
    max-width: calc(100vw - 50px);
    align-self: inherit;
    text-align: center;
  }

  /* Blue buttons*/
  td > a.bluebut {
    margin: auto;
    border: inherit;
    padding: 4px 20px;
  }

  /* # Timetable */
  .hidetext {
    padding: inherit;
    margin: inherit;
  }

  /* groups list (by .hidetext) */
  .NewsLeftColumn > .Content > .hidetext > table > tbody > tr > td {
    max-width: calc(100vw - 50px);
    align-self: inherit;
    /* text-align: center; */
  }

  /* Fixs/Feature for modal on mobile */
  .popup,
  .popup_click {
    width: calc(100vw - 50px);
    padding: 5px;
    margin: inherit;
    position: absolute;
    top: 30px;
    left: 10px;
    margin-top: inherit;
    margin-left: inherit;
  }
  .prokrutka {
    height: calc(100vh - 180px);
    width: inherit;
  }
}

style.user.css

/* ==UserStyle==
@name [YSTU WPROG] Mobile adaptation
@namespace https://github.com/xTCry
@homepageURL https://gist.github.com/xTCry/c4c0ede4ff0904ef788ae29f239467f9
@supportURL https://gist.github.com/xTCry/c4c0ede4ff0904ef788ae29f239467f9
@version 0.0.4
@updateURL https://gist.githubusercontent.com/xTCry/c4c0ede4ff0904ef788ae29f239467f9/raw/style.user.css
@description  [YSTU WPROG] Mobile adaptation
@author xTCry
@license MIT
@preprocessor stylus
==/UserStyle== */
@-moz-document url-prefix("https://ystu.ru/WPROG/"),
url-prefix("https://www.ystu.ru/WPROG/"),
url-prefix("https://ystu.ru/wprog/"),
url-prefix("https://www.ystu.ru/wprog/") {

  /* Fixs/Feature for modal */
  .popup,
  .popup_click {
    width: fit-content;
    margin: inherit!important;
    position: absolute;
    top: 15%;
    left: 35%;
    margin-top: -50px!important;
    margin-left: -50px!important;
  }
  .prokrutka {
    overflow-x: auto;
    overflow-y: auto;
  }

  .CenterColumn {
    margin: inherit;
    display: flex;
    justify-content: center;
  }

  @media screen and (max-width: 800px) {
    .WidthLimiter {
      min-width: max-content;
    }

    /*   header   */
    .ContentHeader {
      max-width: calc(100vw - 0px);
    }
    .ContentHeader > .Logo {
      width: inherit;
      height: inherit;
      position: inherit;
      top: inherit;
      left: inherit;

      padding: 5px;
    }

    .ContentHeader > .Logo > img {
      width: 150px;
    }

    .MainMenuContent > ul {
      flex-direction: column;
      display: flex;
    }
    .MainMenuContent > ul > lim,
    .MainMenuContent > ul > lil,
    .MainMenuContent > ul > lir,
    .MainMenuContent > ul > * {
      border-bottom: 1px solid #ffffff;
      height: inherit;
      /* max-width: calc(100vw - 40px); */
    }

    .MainMenuArea {
      padding: 15px;
    }

    .MainMenuArea .MainMenuContent {
      height: inherit;
      background: inherit;
      background-color: #3670f4;
    }

    /*   content   */
    .WidthLimiter > .Content,
    .NewsLeftColumn > .Content {
      flex-direction: column;
      display: flex;
      max-width: calc(100vw - 0px);
    }

    .LeftColumn {
      width: inherit;
    }

    .RightContentColumn {
      margin-left: inherit;
    }

    /* Скрыть гирлянду */
    .NewsLeftColumn .Content > img {
      display: none;
    }

    /* fix желтого */
    .NewsLeftColumn .Content > .box {
      max-width: calc(100vw - 80px);
    }
    .NewsLeftColumn .Content > .box > pre {
      white-space: pre-wrap;
    }

    /* Объявлеиня */
    .NewsLeftColumn > .Content > font > ul {
      max-width: 100vw;
      margin: inherit;
      padding: 0 0 0 30px;
      line-height: inherit;
    }

    .RightContentColumn > div > div > div > table {
      width: auto;
    }

    .CenterColumn {
      margin: 0 15px;
      flex-direction: column;
    }
    .CenterColumn table,
    .CenterColumn table td {
      width: auto;
    }

    /* Footer */
    .BottomFooter .Copyright > table {
      width: auto;
    }
    .BottomFooter .Copyright > table p.Lightgray {
      margin-left: inherit;
      margin-right: inherit;
      font-size: inherit;
      line-height: inherit;
    }

    .BottomFooter .Copyright > table > tbody > tr > td,
    .NewsLeftColumn > .Content > table > tbody > tr > td,
    .NewsLeftColumn > .Content > font > table > tbody > tr > td {
      display: block;
      max-width: calc(100vw - 50px);
      align-self: inherit;
      text-align: center;
    }

    /* Blue buttons*/
    td > a.bluebut {
      margin: auto;
      border: inherit;
      padding: 4px 20px;
    }

    /* # Timetable */
    .hidetext {
      padding: inherit;
      margin: inherit;
    }

    /* groups list (by .hidetext) */
    .NewsLeftColumn > .Content > .hidetext > table > tbody > tr > td {
      max-width: calc(100vw - 50px);
      align-self: inherit;
      /* text-align: center; */
    }

    /* Fixs/Feature for modal on mobile */
    .popup,
    .popup_click {
      width: calc(100vw - 50px);
      padding: 5px;
      margin: inherit;
      position: absolute;
      top: 30px;
      left: 10px;
      margin-top: inherit;
      margin-left: inherit;
    }
    .prokrutka {
      height: calc(100vh - 180px);
      width: inherit;
    }
  }
}