cclohmar
b93de83519
7 languages, 3 pages (What/How/Start), 80-line router, 98KB total.
Features:
- No database, no Composer, no build step — just files on disk
- nginx PHP isolation: only index.php executes
- Bot detection with browser heuristic bypass
- Rate limiting, structured weekly logs, geo-location, Telegram alerts
- Multi-language: Accept-Language auto-detect, nav dropdown
- Article sub-page routing via /start/{slug}
- Apache + Caddy config alternatives documented in Start page
- Sample config — no real keys or secrets
235 lines
3.5 KiB
CSS
235 lines
3.5 KiB
CSS
/* ===== MOBILE RESPONSIVE DESIGN ===== */
|
|
@media screen and (max-width: 768px) {
|
|
.content-wrapper {
|
|
min-height: calc(100vh - 60px - 200px);
|
|
}
|
|
/* Navigation */
|
|
.hamburger {
|
|
display: flex;
|
|
}
|
|
|
|
.nav-container {
|
|
justify-content: space-between;
|
|
gap: 0;
|
|
}
|
|
|
|
.nav-logo-title {
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.nav-title {
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.nav-logo img {
|
|
height: 50px;
|
|
}
|
|
|
|
.nav-menu {
|
|
position: fixed;
|
|
left: -100%;
|
|
top: 70px;
|
|
background-color: #08755B;
|
|
width: 100%;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
transition: 0.3s;
|
|
box-shadow: 0 10px 27px rgba(0,0,0,0.1);
|
|
padding: 2rem 0;
|
|
gap: 0;
|
|
z-index: 999;
|
|
max-height: calc(100vh - 70px);
|
|
overflow-y: auto;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.nav-menu.active {
|
|
left: 0;
|
|
}
|
|
|
|
.nav-menu a {
|
|
width: 100%;
|
|
display: block;
|
|
padding: 1rem;
|
|
font-size: 1.2rem;
|
|
border-bottom: 1px solid rgba(255,255,255,0.1);
|
|
}
|
|
|
|
.nav-menu a:hover {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
transform: none;
|
|
}
|
|
|
|
.hamburger.active .bar:nth-child(2) {
|
|
opacity: 0;
|
|
}
|
|
|
|
.hamburger.active .bar:nth-child(1) {
|
|
transform: translateY(8px) rotate(45deg);
|
|
}
|
|
|
|
.hamburger.active .bar:nth-child(3) {
|
|
transform: translateY(-8px) rotate(-45deg);
|
|
}
|
|
|
|
/* Dropdown mobile styles */
|
|
.dropdown-content {
|
|
display: none;
|
|
position: relative;
|
|
background-color: transparent;
|
|
min-width: auto;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Hero Section */
|
|
.hero-title {
|
|
font-size: 2rem;
|
|
max-width: 90%;
|
|
padding-top: 1.5rem;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: 1.1rem;
|
|
max-width: 90%;
|
|
padding-top: 1rem;
|
|
}
|
|
|
|
.hero-content {
|
|
padding: 2rem 1rem;
|
|
min-height: 300px;
|
|
}
|
|
|
|
.hero-cta {
|
|
max-width: 90%;
|
|
padding: 2rem 1rem;
|
|
margin: 2rem auto;
|
|
}
|
|
|
|
/* Content Sections */
|
|
.content-section {
|
|
max-width: 90%;
|
|
padding: 1.5rem 0;
|
|
}
|
|
|
|
.section-content {
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.section-content ul {
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
.cta-button {
|
|
display: block;
|
|
margin: 1rem auto;
|
|
width: 80%;
|
|
max-width: 250px;
|
|
}
|
|
|
|
/* CTA Section */
|
|
.cta-title {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.cta-subtitle {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.gc-button {
|
|
padding: 0.8rem 1.5rem !important;
|
|
font-size: 1rem !important;
|
|
min-width: 180px !important;
|
|
}
|
|
|
|
/* Footer */
|
|
.footer {
|
|
padding: 1.5rem 1rem;
|
|
}
|
|
|
|
.footer-links {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.footer-links a {
|
|
margin: 0.3rem 0;
|
|
}
|
|
|
|
.footer-info p,
|
|
.footer-copyright p {
|
|
font-size: 0.9rem;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 480px) {
|
|
.content-wrapper {
|
|
min-height: calc(100vh - 60px - 180px); /* Adjust for smaller screens */
|
|
}
|
|
/* Navigation */
|
|
.navbar {
|
|
position: sticky;
|
|
top: 0;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.nav-title {
|
|
font-size: 1.1rem;
|
|
margin: 0 0.3rem;
|
|
}
|
|
|
|
.nav-logo img {
|
|
height: 45px;
|
|
}
|
|
|
|
.nav-logo-title {
|
|
gap: 0.3rem;
|
|
}
|
|
|
|
.nav-menu {
|
|
top: 60px;
|
|
}
|
|
|
|
/* Hero Section */
|
|
.hero-title {
|
|
font-size: 1.8rem;
|
|
max-width: 95%;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: 1rem;
|
|
max-width: 95%;
|
|
}
|
|
|
|
.hero-cta {
|
|
max-width: 95%;
|
|
}
|
|
|
|
/* Content Sections */
|
|
.content-section {
|
|
max-width: 90%;
|
|
padding: 1.5rem 0;
|
|
}
|
|
|
|
/* Footer */
|
|
.footer {
|
|
padding: 1rem 0.5rem;
|
|
}
|
|
|
|
.footer-info p {
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.footer-copyright p {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.footer-links a {
|
|
font-size: 0.9rem;
|
|
margin: 0.2rem 0;
|
|
}
|
|
}
|