mobile size changes

This commit is contained in:
Gary 2026-02-24 10:00:26 -08:00
parent d7fe327beb
commit 578ca7e5d4
7 changed files with 213 additions and 56 deletions

View File

@ -47,15 +47,22 @@
<main>
<div class="flex-column bg-vid">
<div>
<div class="flex">
<h1>about</h1>
<div class="flex-row">
<a
class="button-1"
class="button-2"
role="button"
href="https://odysee.com/@shilohcode:e/about:11"
>Watch</a
>
<a
class="button-1"
role="button"
target="_blank"
href="https://cloud.shilohcode.com/apps/calendar/appointment/JFes64HZYiw7"
>schedule a call</a
>
</div>
</div>
<video autoplay loop muted poster="/assets/about.png">
@ -66,7 +73,7 @@
</video>
</div>
<div class="flex-column bg-vid">
<div>
<div class="flex">
<h2>
have no fellowship <br />
with the fruitless <br />
@ -81,6 +88,13 @@
<h2>our creed</h2>
<div class="flex-row">
<a class="button-1" role="button" href="/creed">Read</a>
<a
class="button-1"
role="button"
target="_blank"
href="https://cloud.shilohcode.com/apps/calendar/appointment/JFes64HZYiw7"
>schedule a call</a
>
</div>
</div>
</div>

View File

@ -40,7 +40,7 @@
<main>
<div class="flex-column">
<div>
<div class="flex">
<h1>open jobs at shiloh</h1>
<p>
check this page for current open positions with shiloh. we're always

View File

@ -46,7 +46,7 @@
<main>
<div class="flex-column bg-vid">
<div>
<div class="flex">
<h1>get involved</h1>
<div class="flex-row">
<a
@ -66,6 +66,15 @@
>Contribute</a
>
</div>
<div class="flex-row">
<a
class="button-1"
role="button"
target="_blank"
href="https://cloud.shilohcode.com/apps/calendar/appointment/JFes64HZYiw7"
>schedule a call</a
>
</div>
</div>
<video autoplay loop muted poster="/assets/get-involved.png">
<source

View File

@ -47,7 +47,7 @@
<main>
<div class="flex-column bg-vid-main">
<div>
<div class="flex">
<h1>contact us</h1>
<div class="flex-row">
<div class="flex-container">
@ -57,6 +57,13 @@
href="mailto:support(at)shilohcode(dot)com"
>email</a
>
<a
class="button-1"
role="button"
target="_blank"
href="https://cloud.shilohcode.com/apps/calendar/appointment/JFes64HZYiw7"
>schedule a call</a
>
</div>
</div>
</div>

View File

@ -463,4 +463,101 @@ a {
padding-top: 10px;
padding-bottom: 10px;
}
.button-1 {
align-items: center;
border-radius: 5px;
color: #6e564f;
cursor: pointer;
display: -webkit-flex;
display: flex;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
font-family: Inter, sans-serif;
font-size: 30px;
font-weight: 300;
justify-content: center;
line-height: 1;
outline: none;
text-align: center;
text-decoration: none;
transition: border 0.3s, color 0.3s;
white-space: nowrap;
border: 2px solid #6e564f;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
height: fit-content;
width: min-content;
position: relative;
z-index: 1;
background: white;
}
.button-2 {
align-items: center;
border-radius: 5px;
color: white;
cursor: pointer;
display: -webkit-flex;
display: flex;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
font-family: Inter, sans-serif;
font-size: 30px;
font-weight: 200;
justify-content: center;
line-height: 1;
margin: 1rem;
outline: none;
text-align: center;
text-decoration: none;
transition: color 0.3s;
white-space: nowrap;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 5rem;
padding-right: 5rem;
height: fit-content;
position: relative;
z-index: 1;
}
h1,
h2 {
color: white;
text-align: center;
position: relative;
z-index: 1;
font-size: 3rem;
font-weight: 100;
}
h3,
h4 {
color: white;
text-align: center;
position: relative;
z-index: 1;
font-size: 2rem;
font-weight: 100;
}
.header-large {
font-size: 3rem;
}
p,
ul,
ol,
td,
li,
cite {
word-break: normal;
color: #fefff1;
text-align: left;
max-width: fit-content;
}
.flex {
display: contents;
}
}

View File

@ -48,7 +48,7 @@
<main>
<div class="flex-column bg-vid">
<div>
<div class="flex">
<h1>find peace off tech</h1>
<div class="flex-row">
<p>
@ -81,7 +81,7 @@
</video>
</div>
<div class="flex-column bg-vid">
<div>
<div class="flex">
<h2>stress free solutions</h2>
<p>offering managed services in web-hosting, IT, and software</p>
<div class="flex-row">
@ -103,7 +103,7 @@
</video>
</div>
<div class="flex-column bg-vid">
<div>
<div class="flex">
<h2>touch grass show</h2>
<div class="flex-row">
<a
@ -123,7 +123,7 @@
</video>
</div>
<div id="webhosting" class="flex-column bg-vid">
<div>
<div class="flex">
<img
src="./assets/echologo.png"
width="100%"
@ -145,7 +145,7 @@
</div>
</div>
<div id="webhosting" class="flex-column bg-vid">
<div>
<div class="flex">
<img
width="100%"
src="./assets/last_hour_hosting_logo_blue.png"
@ -167,7 +167,7 @@
</div>
</div>
<div class="flex-column bg-vid">
<div>
<div class="flex">
<h2>about</h2>
<div class="flex-row">
<a
@ -188,7 +188,7 @@
</video>
</div>
<div class="flex-column bg-vid">
<div>
<div class="flex">
<h1>get involved</h1>
<div class="flex-row">
<a
@ -216,8 +216,8 @@
/>
</video>
</div>
<div class="flex-column bg-vid-main">
<div>
<div class="flex-column bg-vid">
<div class="flex">
<h2>contact</h2>
<div class="flex-row">
<a

View File

@ -47,7 +47,7 @@
<main>
<div class="flex-column bg-vid">
<div>
<div class="flex">
<h1>solutions</h1>
<div class="flex-row">
<p>
@ -59,9 +59,7 @@
<div class="flex-row">
<a class="button-1" role="button" href="#webhosting">Web-Hosting</a>
<a class="button-1" role="button" href="#it">Managed IT</a>
<a class="button-1" role="button" href="#software"
>Software Development</a
>
<a class="button-1" role="button" href="#software">Software</a>
</div>
</div>
<video autoplay loop muted poster="/assets/services.png">
@ -73,7 +71,7 @@
</div>
<div class="flex-column">
<div>
<div class="flex">
<h3>we designed solutions for 97+ companies including:</h3>
<div>
<img
@ -106,8 +104,9 @@
</div>
</div>
<div id="webhosting" class="flex-column bg-vid">
<div>
<div class="flex">
<img
width="100%"
src="./assets/last_hour_hosting_logo_blue.png"
alt="last hour hosting logo"
/>
@ -127,56 +126,80 @@
</div>
</div>
<div id="it" class="flex-column bg-vid">
<div>
<div class="flex">
<h2>managed IT</h2>
<p>
remote or on-site our managed IT provides you with proactive, expert
care. reduce overhead costs with open-source and a solution you
fully own.
</p>
<video autoplay loop muted poster="/assets/managed-it.png">
<source
src="https://cdn.lasthourhosting.org/shiloh/managed-it.webm"
type="video/webm"
/>
</video>
</div>
</div>
<div id="software" class="flex-column">
<h2>full-stack dev</h2>
<p>
enjoy greater flexibility, lower costs, security, and community-driven
innovation, all while aligning with christian values.
</p>
<div class="flex-row">
<div>
<img
src="./assets/prestashop_logo.png"
alt="Prestashop Logo"
width="300px"
/>
<img
src="./assets/ERPnext_logo.png"
alt="ERPnext Logo"
width="300px"
/>
<img
src="./assets/Nextcloud_Logo.png"
alt="Nextcloud Logo"
width="300px"
/>
<img
src="./assets/WordPress-logotype-alternative.png"
alt="Nextcloud Logo"
width="300px"
/>
<img src="./assets/linux-logo.png" alt="Linux Logo" width="200px" />
<div class="flex-row">
<a
class="button-1"
role="button"
target="_blank"
href="https://cloud.shilohcode.com/apps/calendar/appointment/JFes64HZYiw7"
>schedule a call</a
>
</div>
</div>
</div>
<div class="flex-column bg-vid-main">
<div>
<div id="software" class="flex-column bg-vid">
<div class="flex">
<h2>full-stack dev</h2>
<p>
enjoy greater flexibility, lower costs, security, and
community-driven innovation, all while aligning with christian
values.
</p>
<a
class="button-1"
role="button"
target="_blank"
href="https://cloud.shilohcode.com/apps/calendar/appointment/JFes64HZYiw7"
>schedule a call</a
>
<div class="flex-row">
<div class="flex">
<img
src="./assets/prestashop_logo.png"
alt="Prestashop Logo"
width="300px"
/>
<img
src="./assets/ERPnext_logo.png"
alt="ERPnext Logo"
width="300px"
/>
<img
src="./assets/Nextcloud_Logo.png"
alt="Nextcloud Logo"
width="300px"
/>
<img
src="./assets/WordPress-logotype-alternative.png"
alt="Nextcloud Logo"
width="300px"
/>
<img
src="./assets/linux-logo.png"
alt="Linux Logo"
width="200px"
/>
</div>
</div>
</div>
</div>
<div class="flex-column bg-vid">
<div class="flex">
<h1>contact us</h1>
<div class="flex-row">
<div class="flex-container">
@ -186,6 +209,13 @@
href="mailto:hello-izmqxby3qjkffhh6w7a9s2j3qwj7zu93iji7gxjcn(AT)shilohcode(DOT)com"
>email</a
>
<a
class="button-1"
role="button"
target="_blank"
href="https://cloud.shilohcode.com/apps/calendar/appointment/JFes64HZYiw7"
>schedule a call</a
>
</div>
</div>
</div>