/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
/* Добавляем адаптивный viewport (должен быть в HTML ) */
/* */
html,
button,
input,
select,
textarea {
color: #222;
}
html {
font-size: 1em;
line-height: 1.4;
}
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
audio,
canvas,
img,
video {
vertical-align: middle;
max-width: 100%; /* Чтобы изображения не выходили за границы */
height: auto;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
textarea {
resize: vertical;
}
.browsehappy {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
body {
width: 100%;
min-width: 320px; /* Минимальная ширина для мобильных */
background-repeat: no-repeat;
background-position: 50% 0;
background-color: #000;
font-family: arial, helvetica, verdana, "times new roman", sans-serif;
color: white;
overflow-x: hidden; /* Убираем горизонтальный скролл */
}
.main {
width: 100%;
max-width: 720px; /* Ограничиваем ширину на больших экранах */
margin: 0 auto;
padding: 0 15px; /* Отступы по бокам на мобильных */
box-sizing: border-box; /* Чтобы padding не ломал ширину */
}
.header {
height: auto; /* Гибкая высота */
padding: 10px 0;
}
.header a {
width: 100%;
max-width: 258px;
height: auto;
display: block;
margin: 10px auto;
text-align: center;
}
.menu {
background-repeat: repeat-x;
height: auto;
padding: 5px 0;
width: 100%;
text-align: center;
}
.menu ul {
padding: 0;
margin: 0;
}
.menu ul li {
display: inline-block; /* Лучше, чем inline для мобильных */
color: white;
font-size: 0.7em;
margin: 0 5px;
}
.menu ul li a {
color: white;
text-decoration: none;
}
.menu ul li a:hover {
text-decoration: underline;
}
.intro {
width: 100%;
height: 0;
padding-top: 54.58%; /* Соотношение высоты к ширине (393/720*100%) */
background: url(../img/infinix.png) center no-repeat;
background-size: contain; /* Главное изменение - изображение полностью помещается */
position: relative;
text-align: right;
}
.intro h1 {
position: absolute;
top: 7%;
right: 4%;
margin: 0;
font-family: 'Open Sans Condensed', sans-serif;
font-size: clamp(1.2rem, 4vw, 2rem); /* Адаптивный размер текста */
}
.slogan {
font-family: 'PT Sans Caption', sans-serif;
width: 100%;
height: auto;
padding: 10px 0;
background-color: white;
text-align: left;
}
.slogan h3 {
padding: 8px 0 0 15px;
margin: 0;
color: black;
font-size: 1em; /* Уменьшаем шрифт */
}
.text {
font-family: 'PT Sans Caption', sans-serif;
padding: 8px 15px 20px 15px;
font-size: 0.9em;
line-height: 1.4;
}
.text pre {
font-family: arial, helvetica, verdana, "times new roman", sans-serif !important;
font-size: 0.9em !important;
overflow-x: auto; /* Горизонтальный скролл для длинного кода */
white-space: pre-wrap; /* Перенос строк */
}
/* ==========================================================================
Media Queries (Адаптация под мобильные)
========================================================================== */
@media (max-width: 768px) {
.intro {
background-size: cover;
text-align: center;
}
.intro h1 {
padding: 10px 0;
text-align: center;
}
}
@media (max-width: 480px) {
body {
background-size: auto 100%; /* Оптимизация фона */
}
.intro h1 {
font-size: 1.2em;
}
.menu ul {
white-space: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 5px; /* Добавляем немного места для скролла */
}
.menu ul li {
display: inline-block;
margin: 0 5px;
}
}