Shiloh/Heartily
Shiloh/Heartily
Archived
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

styling update

Browse Source
This commit is contained in:
Caretaker0699 2023-06-30 15:28:56 -07:00
parent f6ebf7b4fa
commit 3c33a88fe0
3 changed files with 74 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
static/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

35
static/style.css
View File

@ -63,14 +63,14 @@ header {
.logo p {
font-size: 32px;
color: #f8f8f2;
color: #999999;
margin: 10px;
}
.logo-name {
font-size: 32px;
font-weight: bold;
color: #f8f8f2;
color: #999999;
margin: 10px;
}
@ -99,21 +99,22 @@ header {
.search-input::placeholder {
color: #75715e;
}
}
.search-button {
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 16px;
background-color: #fd971f;
background-color: #D7011D;
color: #f8f8f2;
cursor: pointer;
margin: 10px;
}
.search-button:hover {
background-color: #f4bf75;
background-color: #FF3D5A;
}
.notification-overlay {
@ -121,7 +122,7 @@ header {
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background-color: #ff5795c7;
background-color: #D7011D;
color: #f8f8f2;
border: 5px solid #272822;
padding: 20px;
@ -166,11 +167,12 @@ header {
display: inline-block;
text-decoration: none;
color: #f8f8f2;
background-color: #fd971f;
background-color: #D7011D;
padding: 10px 20px;
border: none;
border-radius: 5px;
margin: 5px;
background-color: 0.3s ease;
}
.wrapper .button-text {
@ -191,7 +193,7 @@ header {
}
.wrapper:hover {
background-color: #f4bf75;
background-color: #FF3D5A;
}
.wrapper:hover .button-text {
@ -234,7 +236,7 @@ header {
}
.listed-items {
border: 1px solid #a0d170;
border: 1px solid #333333;
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
@ -242,7 +244,7 @@ header {
}
.listed-items:hover {
border: 1px solid #d1d1d1;
border: 1px solid #FFD3E0;
background-color: #f0f0f007;
}
@ -252,11 +254,12 @@ header {
display: inline-block;
text-decoration: none;
color: #f8f8f2;
background-color: #fd971f;
background-color: #D7011D;
padding: 10px 20px;
border: none;
border-radius: 5px;
margin: 5px;
background-color: 0.3s ease;
}
.load-more-button .button-text {
@ -277,7 +280,7 @@ header {
}
.load-more-button:hover {
background-color: #f4bf75;
background-color: #FF3D5A;
}
.load-more-button:hover .button-text {
@ -298,16 +301,20 @@ header {
height: 40px;
border: none;
border-radius: 50%;
background-color: #fd971f;
background-color: #D7011D;
color: #f8f8f2;
font-size: 20px;
text-align: center;
line-height: 40px;
cursor: pointer;
opacity: 0;
transition: opacity 0.3s ease;
transition: opacity 0.3s ease, background-color 0.3s ease;
z-index: 9999;
}
.scroll-to-top-button:hover {
background-color: #FF3D5A;
}
.scroll-to-top-button.show {
opacity: 1;

61
templates/index.html
View File

@ -1,15 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="description" content="Servant Hearts, Working for the Lord. The Biblically based job search board.">
<meta name="keywords" content="heartily, Christian jobs, Biblically based, christian job opportunities, Job openings in Christian organizations ">
<meta name="author" content="heartily">
<title>Heartily</title>
<link
rel="stylesheet"
href="{{ url_for('static', filename='style.css') }}"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
/>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
<link rel="apple-touch-icon" href="{{ url_for('static', filename='heartily1.gif') }}">
</head>
<body>
<header>
@ -94,6 +95,50 @@
</div>
<script>
// Define an array of placeholder texts
var placeholderTexts = [
"Search for jobs",
"Seize every task",
"Glorify the Lord with your work",
"Explore job listings",
"Search by job title or keywords",
"Labor diligently for the Lord",
"Make an eternal impact",
"Work as unto the Lord",
"Boldy share your testimony",
"Take a step of Faith",
"Discover joy in your work",
"Give Jesus your every hour",
// Add more placeholder texts as needed
];
// Get the search input element
var searchInput = document.querySelector(".search-input");
// Function to simulate typing effect for the placeholder text
function typePlaceholderText(text, index) {
if (index < text.length) {
searchInput.placeholder = text.substring(0, index + 1);
setTimeout(function() {
typePlaceholderText(text, index + 1);
}, 100); // Adjust the typing speed (milliseconds per character)
}
}
// Function to set a random placeholder text with typewriter effect
function setRandomPlaceholderText() {
var randomIndex = Math.floor(Math.random() * placeholderTexts.length);
var randomText = placeholderTexts[randomIndex];
typePlaceholderText(randomText, 0);
}
// Call the function initially to set a random placeholder text
setRandomPlaceholderText();
// Call the function periodically to change the placeholder text
setInterval(setRandomPlaceholderText, 5000); // Change the text every 5 seconds (adjust as desired)
// JavaScript code for displaying the notification overlay
function showNotification(message) {
var overlay = document.getElementById("notification-overlay");