ION_Archive/static-site-hosting
1
0
Fork 0
mirror of https://github.com/ION606/static-site-hosting.git synced 2026-05-14 22:16:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

added mobile layout

Browse Source
This commit is contained in:
ION606
2025-02-17 22:18:29 -05:00
parent 6d3cc0c3bc
commit cf6922c77a
3 changed files with 104 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/styles.css
+22 -2
View File
@@ -326,17 +326,37 @@ button:hover,
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
transform: translateY(-100%); transform: translateY(-100%);
opacity: 0; opacity: 0;
display: none; /* Initially hidden */ display: none;
/* Initially hidden */
} }
#editor-container.visible { #editor-container.visible {
transform: translateY(0); transform: translateY(0);
opacity: 1; opacity: 1;
display: block; /* Display when visible */ display: block;
/* Display when visible */
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.file-grid { .file-grid {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }
.container {
padding: 10px;
}
.navbar {
flex-direction: column;
align-items: flex-start;
}
.navbar a {
margin: 5px 0;
}
.site-card {
padding: 15px;
margin-bottom: 10px;
}
} }
app/templates/base.html
+37
View File
@@ -47,12 +47,48 @@
}); });
}); });
</script> </script>
<style>
/* collapsible navbar */
.navbar-links {
display: flex;
align-items: center;
gap: 1rem;
}
.navbar-toggle {
display: none;
font-size: 1.5rem;
background: none;
border: none;
color: var(--nav-text);
cursor: pointer;
}
@media (max-width: 768px) {
.navbar-links {
display: none;
flex-direction: column;
width: 100%;
}
.navbar-links.active {
display: flex;
}
.navbar-toggle {
display: block;
}
}
</style>
</head> </head>
<body> <body>
<nav class="navbar"> <nav class="navbar">
<div class="container"> <div class="container">
<a href="{{ url_for('main.home', _external=True) }}">Home</a> <a href="{{ url_for('main.home', _external=True) }}">Home</a>
<button id="nav-toggle" class="navbar-toggle">&#9776;</button>
<div id="navbar-links" class="navbar-links">
{% if current_user.is_authenticated %} {% if current_user.is_authenticated %}
<a href="{{ url_for('main.dashboard', _external=True) }}">Dashboard</a> <a href="{{ url_for('main.dashboard', _external=True) }}">Dashboard</a>
<a href="{{ url_for('main.logout', _external=True) }}">Logout</a> <a href="{{ url_for('main.logout', _external=True) }}">Logout</a>
@@ -62,6 +98,7 @@
{% endif %} {% endif %}
<button id="theme-toggle" class="btn">Toggle Dark Mode</button> <button id="theme-toggle" class="btn">Toggle Dark Mode</button>
</div> </div>
</div>
</nav> </nav>
<div class="container"> <div class="container">
app/templates/home.html
+28 -2
View File
@@ -169,6 +169,33 @@
text-align: center; text-align: center;
color: var(--nav-text); color: var(--nav-text);
} }
@media (max-width: 768px) {
header {
padding: 40px 10px;
}
.main-container {
margin: 20px auto;
padding: 10px;
}
.feature-list {
flex-direction: column;
align-items: center;
}
.feature {
width: 90%;
max-width: 300px;
margin: 10px auto;
}
footer {
padding: 15px;
font-size: 0.9rem;
}
}
</style> </style>
<header> <header>
@@ -209,9 +236,8 @@
</div> </div>
<div class="cta-section"> <div class="cta-section">
<h2>Get Started Now</h2> <a href="{{ url_for('main.register') }}" class="btn">Get Started Now</a>
<p>No signup required. Upload your first site and go live instantly!</p> <p>No signup required. Upload your first site and go live instantly!</p>
<a href="{{ url_for('main.dashboard') }}" class="btn">Upload Your Site</a>
</div> </div>
</div> </div>