-
-
-
Ansible Playbook Editor
-
Edit your playbook here...
+
+
+
Ansible Sandbox
+
+
+
+
+
+
+
+
+
+
+ Deploy a Nginx web server with a sample website in a controlled environment.
+
+
+
+
+ Runtime: ~3 min
+
+
+
+ 1 VM
+
+
+
+
+
+
+
+ Deploy a multi-container application using Docker Compose with automatic configuration.
+
+
+
+
+ Runtime: ~5 min
+
+
+
+ 1 VM
+
+
+
+
+
+
+
+ Deploy a lightweight Kubernetes cluster with basic services and sample application.
+
+
+
+
+ Runtime: ~8 min
+
+
+
+ 3 VMs
+
+
+
+
+
+
+
+ Deploy a Linux, Apache, MySQL, and PHP stack with a sample application.
+
+
+
+
+ Runtime: ~4 min
+
+
+
+ 1 VM
+
+
+
+
+
+
+
+ Apply security best practices to a Linux server including firewall, SSH hardening, and more.
+
+
+
+
+ Runtime: ~6 min
+
+
+
+ 1 VM
+
+
-
-
Deployment Output
-
Output will appear here when you deploy...
+
+
+
+
+
+
+
+
+
+
+
-
+
- Public
+ Offline
@@ -894,7 +895,7 @@
diff --git a/styles.css b/styles.css
index 50f8984..931f050 100644
--- a/styles.css
+++ b/styles.css
@@ -2759,137 +2759,140 @@ section {
}
/* Enhanced Mobile Optimizations */
-@media (max-width: 480px) {
- section {
- padding: 3rem 0;
+@media (max-width: 768px) {
+ /* Improve readability on mobile */
+ body {
+ font-size: 16px;
+ }
+
+ /* Make buttons more tappable */
+ .btn, .nav-link, .service-item, .tech-card, .project-card {
+ padding: 0.8rem;
}
- .section-title {
- font-size: 1.75rem;
- }
-
- .section-description {
- font-size: 0.95rem;
- }
-
- .container {
- padding: 0 1rem;
- }
-
- /* Architecture section mobile optimization */
- .architecture-diagram {
- flex-direction: column;
- }
-
- .diagram-wrapper {
- width: 100%;
+ /* Better spacing for section headers on mobile */
+ .section-header {
margin-bottom: 2rem;
}
- .architecture-details {
- width: 100%;
+ .section-title {
+ font-size: 1.8rem;
}
- /* Improved mobile tech grid */
- .tech-grid {
+ /* Improved hero section for mobile */
+ .hero {
+ padding: 6rem 0 3rem;
+ }
+
+ .hero-title {
+ font-size: 2rem;
+ line-height: 1.3;
+ }
+
+ .hero-description {
+ font-size: 1rem;
+ margin-bottom: 1.5rem;
+ }
+
+ .cta-buttons {
+ flex-wrap: wrap;
+ gap: 1rem;
+ }
+
+ /* Improved card layouts for touch */
+ .tech-grid, .services-grid, .projects-grid, .dashboard-grid {
grid-template-columns: 1fr;
+ gap: 1rem;
}
- .tech-card {
- padding: 1.5rem;
+ .tech-card, .service-item, .project-card {
+ padding: 1.25rem;
}
- /* Services optimization */
- .services-grid {
- grid-template-columns: 1fr;
- }
-
- .service-items {
- grid-template-columns: 1fr;
- }
-
- /* Contact form mobile friendly */
- .contact-grid {
- grid-template-columns: 1fr;
- }
-
- .contact-form {
- padding: 1.5rem;
- }
-
- /* Top links mobile optimization */
- .top-links {
- padding: 0.5rem 1rem;
- justify-content: center;
- }
-
- .laforceit-link, .signin-button {
- font-size: 0.85rem;
- }
-
- /* Projects section mobile */
- .projects-grid {
- grid-template-columns: 1fr;
- }
-
- /* Dashboard section mobile */
- .dashboard-grid {
- grid-template-columns: 1fr;
- }
-}
-
-/* Touch-friendly adjustments */
-@media (hover: none) {
- .btn:hover::before {
- display: none;
- }
-
- .btn:active {
- transform: scale(0.98);
- }
-
- .service-item, .tech-card, .project-card, .dashboard-card {
- transition: transform 0.2s ease;
+ /* Enhanced tap targets for touch */
+ .service-item, .tech-card, .project-card, .dashboard-card, .footer-link {
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.service-item:active, .tech-card:active, .project-card:active, .dashboard-card:active {
transform: scale(0.98);
}
-
- .nav-link:active::after {
- width: 100%;
- }
}
-/* Improved scrolling for mobile */
-@media (max-width: 768px) {
- html {
- scroll-padding-top: var(--mobile-nav-height);
+/* Tablet-specific optimizations */
+@media (min-width: 481px) and (max-width: 1024px) {
+ /* Two-column layouts for tablets */
+ .tech-grid, .services-grid, .projects-grid {
+ grid-template-columns: repeat(2, 1fr);
}
- /* Handle form inputs better on mobile */
- input, textarea, select, button {
- font-size: 16px !important; /* Prevents zoom on focus in iOS */
+ /* Balanced spacing for tablets */
+ section {
+ padding: 4rem 0;
}
- /* Optimized footer for mobile */
- .footer-content {
- flex-direction: column;
- }
-
- .footer-info {
- margin-bottom: 2rem;
- text-align: center;
- width: 100%;
- }
-
- .footer-links {
- width: 100%;
- grid-template-columns: 1fr;
+ /* Hero layout adjustments */
+ .hero-content {
gap: 2rem;
}
- .footer-links-column {
- text-align: center;
+ /* Architecture diagram adjustments */
+ .architecture-diagram {
+ flex-direction: column;
+ }
+
+ /* Footer improvements */
+ .footer-content {
+ flex-wrap: wrap;
+ }
+}
+
+/* Phone-specific optimizations */
+@media (max-width: 480px) {
+ .hero-stats {
+ grid-template-columns: repeat(2, 1fr);
+ gap: 1rem;
+ }
+
+ .stat-item {
+ padding: 0.75rem;
+ }
+
+ .stat-value {
+ font-size: 1.25rem;
+ }
+
+ /* Single column layouts for phones */
+ .contact-grid, .architecture-details {
+ grid-template-columns: 1fr;
+ }
+
+ /* Improved form elements for touch */
+ input, textarea, button {
+ font-size: 16px; /* Prevents zoom on input focus on iOS */
+ padding: 0.8rem;
+ }
+
+ /* Navbar adjustments */
+ .navbar .container {
+ padding: 0 1rem;
+ }
+}
+
+/* Touch optimizations */
+@media (hover: none) {
+ /* Disable hover effects on touch devices */
+ .btn::before, .service-item:hover, .tech-card:hover {
+ transform: none;
+ }
+
+ /* Use active states instead */
+ .btn:active, .nav-link:active, .service-item:active {
+ opacity: 0.8;
+ }
+
+ /* Larger tap targets */
+ .nav-link, .footer-link, .dashboard-link {
+ padding: 0.6rem;
}
}
\ No newline at end of file