Lexema-HRM/docs/index.md

<h1 id="lexema-hrm" style="text-align: center; margin-bottom: 30px; color: #2c3e50;">
  <a href="#lexema-hrm" style="color: inherit; text-decoration: none;">Lexema-HRM</a>
</h1>

<div class="menu">
  <div class="button-column">
    <a href="Штатное расписание.md" class="button">
      <span class="button-content">
        <svg class="button-icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
          <rect x="15" y="20" width="100" height="90" rx="5" ry="5" fill="#4a6baf" stroke="#2c3e50" stroke-width="2"/>
          <line x1="20" y1="35" x2="80" y2="35" stroke="#ffffff" stroke-width="1.5"/>
          <line x1="20" y1="50" x2="80" y2="50" stroke="#ffffff" stroke-width="1.5"/>
          <line x1="20" y1="65" x2="80" y2="65" stroke="#ffffff" stroke-width="1.5"/>
          <text x="30" y="45" font-family="Arial" font-size="6" fill="#ffffff">1. Руководитель</text>
          <text x="30" y="60" font-family="Arial" font-size="6" fill="#ffffff">2. Специалист</text>
          <text x="30" y="75" font-family="Arial" font-size="6" fill="#ffffff">3. Рабочий</text>
        </svg>
        Штатное расписание
      </span>
    </a>
    <a href="кадровый-учет.md" class="button">Кадровый учет</a>
    <a href="кадровый-учет.md" class="button">Воинский учет</a>
  </div>
  <div class="button-column">
    <a href="Учет труда. Документы.md" class="button">Учет труда</a>
    <a href="зарплата.md" class="button">Зарплата</a>
    <a href="Расчет зарплаты. Анализ и отчетность/Расчет зарплаты. Анализ и отчетность.md" class="button">Отчетность</a>
  </div>
</div>

<style>
.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.button-column {
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 15px 20px;
  background: #2c3e50;
  color: white!important;
  text-decoration: none;
  border-radius: 5px;
  text-align: center;
  font-size: 1.1em;
  box-sizing: border-box;
  transition: all 0.3s ease;
  gap: 15px;
}

.button-content {
  display: flex;
  align-items: center;
  gap: 15px;
}

.button-icon {
  width: 100px; /* Увеличенный размер */
  height: 100px; /* Увеличенный размер */
}

.button:hover {
  background: #1a252f;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

@media (min-width: 768px) {
  .button {
    padding: 20px;
    font-size: 1.2em;
  }
  
  h1 {
    font-size: 2.5em;
  }
  
  h1 a:hover {
    text-decoration: underline;
  }
  
  .button-icon {
    width: 24px; /* Увеличенный размер для десктопа */
    height: 24px;
  }
}
</style>