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
+31 -11
View File
@@ -319,24 +319,44 @@ button:hover,
}
#editor-container {
width: 100%;
height: 400px;
border: 1px solid #ddd;
margin-top: 20px;
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
transform: translateY(-100%);
opacity: 0;
display: none; /* Initially hidden */
width: 100%;
height: 400px;
border: 1px solid #ddd;
margin-top: 20px;
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
transform: translateY(-100%);
opacity: 0;
display: none;
/* Initially hidden */
}
#editor-container.visible {
transform: translateY(0);
opacity: 1;
display: block; /* Display when visible */
transform: translateY(0);
opacity: 1;
display: block;
/* Display when visible */
}
@media (max-width: 768px) {
.file-grid {
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
+45 -8
View File
@@ -47,20 +47,57 @@
});
});
</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>
<body>
<nav class="navbar">
<div class="container">
<a href="{{ url_for('main.home', _external=True) }}">Home</a>
{% if current_user.is_authenticated %}
<a href="{{ url_for('main.dashboard', _external=True) }}">Dashboard</a>
<a href="{{ url_for('main.logout', _external=True) }}">Logout</a>
{% else %}
<a href="{{ url_for('main.login', _external=True) }}">Login</a>
<a href="{{ url_for('main.register', _external=True) }}">Register</a>
{% endif %}
<button id="theme-toggle" class="btn">Toggle Dark Mode</button>
<button id="nav-toggle" class="navbar-toggle">&#9776;</button>
<div id="navbar-links" class="navbar-links">
{% if current_user.is_authenticated %}
<a href="{{ url_for('main.dashboard', _external=True) }}">Dashboard</a>
<a href="{{ url_for('main.logout', _external=True) }}">Logout</a>
{% else %}
<a href="{{ url_for('main.login', _external=True) }}">Login</a>
<a href="{{ url_for('main.register', _external=True) }}">Register</a>
{% endif %}
<button id="theme-toggle" class="btn">Toggle Dark Mode</button>
</div>
</div>
</nav>
app/templates/home.html
+28 -2
View File
@@ -169,6 +169,33 @@
text-align: center;
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>
<header>
@@ -209,9 +236,8 @@
</div>
<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>
<a href="{{ url_for('main.dashboard') }}" class="btn">Upload Your Site</a>
</div>
</div>