Адаптация под мобильную версию
This commit is contained in:
NikDizell
parent
6561aba471
commit
05609de844
@ -165,7 +165,7 @@ body {
|
||||
background: var(--gradient-primary);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
padding: 0.875rem 1.75rem;
|
||||
padding: 0.6rem 1.2rem;
|
||||
border-radius: var(--radius-lg);
|
||||
font-weight: 600;
|
||||
transition: var(--transition);
|
||||
@ -1187,4 +1187,149 @@ body {
|
||||
|
||||
.theme-toggle-checkbox:checked + .theme-toggle-label .theme-icon.moon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ===== MOBILE RESPONSIVE STYLES ===== */
|
||||
@media (max-width: 768px) {
|
||||
.hero-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.125rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 1.125rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.grid-2 {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.modern-card {
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.375rem;
|
||||
}
|
||||
|
||||
.content-card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.about-section {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.skills-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.competence-item {
|
||||
flex-direction: column;
|
||||
padding: 1.5rem;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.competence-scan-container {
|
||||
width: 100%;
|
||||
max-width: 280px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.recall-header {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.recall-meta {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-contacts p {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
margin: 5% auto;
|
||||
max-width: 95%;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 1.5rem 1.5rem 1rem;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.breadcrumbs {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.hero-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 1.875rem;
|
||||
}
|
||||
|
||||
.modern-card {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.content-card {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.about-section {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.competence-scan-container {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@ -160,7 +160,7 @@ body {
|
||||
background: var(--gradient-primary);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
padding: 0.875rem 1.75rem;
|
||||
padding: 0.6rem 1.2rem;
|
||||
border-radius: var(--radius-lg);
|
||||
font-weight: 600;
|
||||
transition: var(--transition);
|
||||
@ -1071,4 +1071,198 @@ body {
|
||||
|
||||
.theme-toggle-checkbox:checked + .theme-toggle-label .theme-icon.moon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ===== MOBILE RESPONSIVE STYLES ===== */
|
||||
@media (max-width: 768px) {
|
||||
.hero-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.125rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 1.125rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.grid-2 {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.modern-card {
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.375rem;
|
||||
}
|
||||
|
||||
.content-card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.about-section {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.skills-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.competence-item {
|
||||
flex-direction: column;
|
||||
padding: 1.5rem;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.competence-scan-container {
|
||||
width: 100%;
|
||||
max-width: 280px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.recall-header {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.recall-meta {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-contacts p {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
margin: 5% auto;
|
||||
max-width: 95%;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 1.5rem 1.5rem 1rem;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.breadcrumbs {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.hero-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 1.875rem;
|
||||
}
|
||||
|
||||
.modern-card {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.content-card {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.about-section {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.competence-scan-container {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Явные стили для мобильного меню в светлой теме */
|
||||
.mobile-menu {
|
||||
background: #FFFFFF !important;
|
||||
}
|
||||
|
||||
.mobile-menu-header {
|
||||
border-bottom: 1px solid #E2E8F0 !important;
|
||||
}
|
||||
|
||||
.mobile-menu-close {
|
||||
color: #1A1F36 !important;
|
||||
}
|
||||
|
||||
.mobile-menu-close:hover {
|
||||
background: #F7FAFC !important;
|
||||
}
|
||||
|
||||
.mobile-nav-link {
|
||||
color: #1A1F36 !important;
|
||||
}
|
||||
|
||||
.mobile-nav-link:hover,
|
||||
.mobile-nav-link.active {
|
||||
background: var(--primary) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.mobile-nav-actions {
|
||||
border-top: 1px solid #E2E8F0 !important;
|
||||
}
|
||||
|
||||
/* Стили для переключателя темы в мобильном меню */
|
||||
.mobile-menu .theme-toggle-label {
|
||||
background: #F7FAFC !important;
|
||||
border: 2px solid #CBD5E0 !important;
|
||||
}
|
||||
|
||||
.mobile-menu .theme-toggle-label:hover {
|
||||
border-color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.mobile-menu .theme-icon.sun {
|
||||
color: #1A1F36 !important;
|
||||
}
|
||||
|
||||
.mobile-menu .theme-icon.moon {
|
||||
color: #1A1F36 !important;
|
||||
}
|
||||
@ -104,14 +104,14 @@
|
||||
</div>
|
||||
<div class="skill-category">
|
||||
<h4>💬 Telegram</h4>
|
||||
<p><strong><a href="https://t.me/odinesina_prog" target="_blank">@odinesina_prog</a></strong></p>
|
||||
<p><strong><a href="https://t.me/odinesina_prog" target="_blank" class="btn btn-primary" style="display: inline-flex; padding: 0.5rem 1rem;">@odinesina_prog</a></strong></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<div class="card-actions justify-center">
|
||||
<div class="card-actions">
|
||||
<a href="{% url 'solution' %}" class="btn btn-primary">📂 Посмотреть мои проекты</a>
|
||||
<a href="{% url 'recall' %}" class="btn btn-secondary">⭐ Отзывы клиентов</a>
|
||||
</div>
|
||||
|
||||
@ -189,6 +189,151 @@
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
/* ===== MOBILE RESPONSIVE STYLES ===== */
|
||||
@media (max-width: 768px) {
|
||||
.hero-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.125rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 1.125rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.grid-2 {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.modern-card {
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.375rem;
|
||||
}
|
||||
|
||||
.content-card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.about-section {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.skills-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.competence-item {
|
||||
flex-direction: column;
|
||||
padding: 1.5rem;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.competence-scan-container {
|
||||
width: 100%;
|
||||
max-width: 280px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.recall-header {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.recall-meta {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-contacts p {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
margin: 5% auto;
|
||||
max-width: 95%;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 1.5rem 1.5rem 1rem;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.breadcrumbs {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.hero-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 1.875rem;
|
||||
}
|
||||
|
||||
.modern-card {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.content-card {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.about-section {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.competence-scan-container {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -215,8 +360,9 @@
|
||||
|
||||
<div class="nav-actions">
|
||||
<a href="https://t.me/odinesina_prog" target="_blank" class="telegram-btn">
|
||||
<span class="telegram-icon">📱</span>
|
||||
Telegram
|
||||
<span class="telegram-icon">
|
||||
<img src="{% static 'programmer/images/share_tg.png' %}" alt="Telegram" width="20" height="20">
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<!-- Theme Toggle Switch -->
|
||||
@ -260,8 +406,9 @@
|
||||
|
||||
<div class="mobile-nav-actions">
|
||||
<a href="https://t.me/odinesina_prog" target="_blank" class="btn btn-primary" style="width: 100%; text-align: center;">
|
||||
<span class="telegram-icon">📱</span>
|
||||
Telegram
|
||||
<span class="telegram-icon">
|
||||
<img src="{% static 'programmer/images/share_tg.png' %}" alt="Telegram" width="20" height="20">
|
||||
</span>
|
||||
</a>
|
||||
<div class="theme-switcher" style="justify-content: center;">
|
||||
<input type="checkbox" id="mobile-theme-toggle" class="theme-toggle-checkbox">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user