Skip to content

Commit

Permalink
Merge pull request #10 from DrR0X-glitch/beta
Browse files Browse the repository at this point in the history 
HAD-45 Add mobile styling to homepage
  • Loading branch information
@DrR0X-glitch
DrR0X-glitch authored Dec 1, 2023
2 parents 67d7002 + cc759f2 commit 30a3e28
Show file tree
Hide file tree
Showing 3 changed files with 125 additions and 73 deletions.
5 changes: 5 additions & 0 deletions overrides/changelog.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
{% extends "main.html" %} {% block tabs %} {{ super() }}
<style>
/* Application header should be static for the landing page */
.md-header {
position: initial;
}

/* Remove spacing, as we cannot hide it completely */
.md-main__inner {
margin: 0;
Expand Down
171 changes: 112 additions & 59 deletions overrides/home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,11 @@

{% extends "main.html" %} {% block tabs %} {{ super() }}
<style>
/* Application header should be static for the landing page */
.md-header {
position: initial;
}

/* Remove spacing, as we cannot hide it completely */
.md-main__inner {
margin: 0;
Expand Down Expand Up @@ -29,9 +34,8 @@
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
color: white;
background-color: #2d2d30;
font-family: Arial, sans-serif;
}

.markdown-body {
Expand All @@ -50,6 +54,7 @@
}

.hero-section .content {
color: white;
display: flex;
align-items: center;
}
Expand Down Expand Up @@ -88,26 +93,9 @@
outline: 2px solid white; /* CTA button outline on hover */
}

/* Additional styles for responsiveness */
@media screen and (max-width: 768px) {
.text-content,
.logo {
width: 100%;
float: none;
text-align: center;
}

.hero-section h1 {
font-size: 30px;
}

.hero-section p {
font-size: 16px;
}
}

/* Feature Description Section */
.feature-section {
color: white;
background-color: #2d2d30;
padding: 80px 0;
}
Expand Down Expand Up @@ -159,19 +147,76 @@
.feature li {
padding: 3px 0;
}

/* Mobile styles */
@media screen and (max-width: 768px) {
.container {
max-width: 100%;
}
.hero-section {
padding: 40px 20px; /* Adjust mobile padding for hero section */
}

.content {
flex-direction: column; /* Stack content vertically on mobile */
align-items: center; /* Center items on mobile */
}

.text-content {
order: 1;
width: 100%; /* Full width for text content on mobile */
padding: 20px 0 0; /* Adjust padding for mobile */
text-align: center; /* Center text content */
}

.logo {
width: 100%; /* Adjust logo width on mobile */
order: 0;
}

.cta-button {
display: block; /* Full width for CTA button on mobile */
margin-top: 20px; /* Add margin to separate button from text */
}

.feature-section {
padding: 40px 20px; /* Adjust mobile padding for feature section */
}

.feature {
flex: 0 0 calc(100% - 20px); /* Full width for features on mobile with some spacing */
margin: 10px 0; /* Adjust margin between features */
border-radius: 10px;
}

.feature p {
font-size: 16px; /* Reduce font size for feature descriptions on mobile */
}

.feature h2,
.feature h3 {
font-size: 20px; /* Reduce font size for feature headings on mobile */
}

.feature img {
width: 36px;
height: 36px;
margin-bottom: 8px; /* Adjust spacing for feature images on mobile */
}
}
</style>

<!-- Your HTML content goes here -->
<section class="hero-section accent-color">
<section class="hero-section">
<div class="container">
<div class="content">
<div class="text-content">
<h1>Welcome to HASS.Agent</h1>
<p>A windows Home Assistant client(Companion App) that provides powerful features for automating your windows system.</p>
<a href="/getting-started" class="cta-button">Get Started</a>
<a href="getting-started" class="cta-button">Get Started</a>
</div>
<div class="logo">
<img src="assets/images/logo/logo-256.png" alt="Hass.agent Logo" width="256" height="256" />
<img src="assets/images/logo/logo-256.png" alt="Hass.agent Logo" />
</div>
</div>
</div>
Expand All @@ -180,48 +225,56 @@ <h1>Welcome to HASS.Agent</h1>
<section class="feature-section">
<div class="container">
<div class="feature">
<img src="assets/images/icons/sensors.png" alt="Sensors Icon" />
<h2>Sensors</h2>
<p>Send all sorts of telemetry data from windows to home assistant.</p>
<h3>Examples:</h3>
<ul>
<li>Current CPU Load</li>
<li>Are you using webcam</li>
<li>Are you logged in</li>
</ul>
<a href="setup/sensors">
<img src="assets/images/icons/sensors.png" alt="Sensors Icon" />
<h2>Sensors</h2>
<p>Send all sorts of telemetry data from windows to home assistant.</p>
<h3>Examples:</h3>
<ul>
<li>Current CPU Load</li>
<li>Are you using webcam</li>
<li>Are you logged in</li>
</ul>
</a>
</div>
<div class="feature">
<img src="assets/images/icons/commands.png" alt="Commands Icon" />
<h2>Commands</h2>
<p>Control your pc by interacting with entities in home assiatant.</p>
<h3>Examples:</h3>
<ul>
<li>Open App</li>
<li>Shutdown/logoff/restart</li>
<li>Run powershell command</li>
</ul>
<a href="setup/commands">
<img src="assets/images/icons/commands.png" alt="Commands Icon" />
<h2>Commands</h2>
<p>Control your pc by interacting with entities in home assistant.</p>
<h3>Examples:</h3>
<ul>
<li>Open App</li>
<li>Shutdown/logoff/restart</li>
<li>Run powershell command</li>
</ul>
</a>
</div>
<div class="feature">
<img src="assets/images/icons/bell-regular.svg" alt="Notifications Icon" />
<h2>Notifications</h2>
<p>Send dynamic windows notifications with images and actions from home assistant.</p>
<h3>Examples:</h3>
<ul>
<li>Send from automations</li>
<li>Attach images</li>
<li>Add actions</li>
</ul>
<a href="setup/notifications">
<img src="assets/images/icons/bell-regular.svg" alt="Notifications Icon" />
<h2>Notifications</h2>
<p>Send dynamic windows notifications with images and actions from home assistant.</p>
<h3>Examples:</h3>
<ul>
<li>Send from automations</li>
<li>Attach images</li>
<li>Add actions</li>
</ul>
</a>
</div>
<div class="feature">
<img src="assets/images/icons/quick-actions.png" alt="Quick Actions Icon" />
<h2>Quick Actions</h2>
<p>Add any home assistant entity to your taskbar for quick access.</p>
<h3>Examples:</h3>
<ul>
<li>Toggle lights</li>
<li>Run scripts</li>
<li>Start Vacuum</li>
</ul>
<a href="setup/quick-actions">
<img src="assets/images/icons/quick-actions.png" alt="Quick Actions Icon" />
<h2>Quick Actions</h2>
<p>Add any home assistant entity to your taskbar for quick access.</p>
<h3>Examples:</h3>
<ul>
<li>Toggle lights</li>
<li>Run scripts</li>
<li>Start Vacuum</li>
</ul>
</a>
</div>
</div>
</section>
Expand Down
22 changes: 8 additions & 14 deletions overrides/main.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
<!-- Elements added to main will be displayed on all pages -->
{% extends "base.html" %}

<!-- Outdated bar -->
{% block outdated %} You're not viewing the latest version.
<a href="{{ '../' ~ base_url }}">
<strong>Click here to go to latest.</strong>
</a>
{% endblock %}

<!-- Add released header tag -->
{% block extrahead %} {{ super() }}
<script src="https://embed.released.so/1/embed.js" defer></script>
Expand All @@ -11,13 +18,6 @@
<released-widget channel-id="19883fcf-9c0f-45a3-8b50-f67ebca6fbbd"></released-widget>
{% endblock %}

<!-- Outdated bar -->
{% block outdated %} You're not viewing the latest version.
<a href="{{ '../' ~ base_url }}">
<strong>Click here to go to latest.</strong>
</a>
{% endblock %}

<!-- Announcement bar -->
{% block announce %}

Expand All @@ -28,16 +28,10 @@
.md-announce strong {
white-space: nowrap;
}
/* .announcement {
color: white;
}
.announcement:hover {
color: #41bdf5;
} */
</style>

<strong>
<a href="/contributing/need-help">We need help! If you have experience in C# or Python we would love to have you help out. Click here for more.</a>
<a href="/latest/contributing/need-help">We need help! If you have experience in C# or Python we would love to have you help out. Click here for more.</a>
</strong>

{% endblock %} {% block released_widget %}
Expand Down

0 comments on commit 30a3e28

Please sign in to comment.