refactor: Format site files for 11ty
- Convert HTML pages into NJK templates - Add front matter to NJK templates - Modularize monolithic stylesheet
This commit is contained in:
217
_site/styles/about.css
Normal file
217
_site/styles/about.css
Normal file
@@ -0,0 +1,217 @@
|
||||
/* |--↓-↓-↓ Start about.html ↓-↓-↓--| */
|
||||
#about-page main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#main-top {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
width: 95vw;
|
||||
position: center;
|
||||
}
|
||||
|
||||
#business-info {
|
||||
display: block;
|
||||
align-items: center;
|
||||
width: 25vw;
|
||||
background-color:#f0c06d;
|
||||
border: solid #f7f7f7;
|
||||
border-radius: 10px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
|
||||
}
|
||||
|
||||
#phone,
|
||||
#hours {
|
||||
background-color: #f7f7f7;
|
||||
border: solid #bdd4da;
|
||||
border-radius: 10px;
|
||||
margin: 5px 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#business-info h3,
|
||||
#feedback-intro h1 {
|
||||
font-size: 1.875rem;
|
||||
text-align: center;
|
||||
text-shadow: 0.5px 0.5px 2px #014038, /* Bottom-right base shadow */
|
||||
-0.5px -0.5px 2px #014038, /* Top-left base shadow */
|
||||
-0.5px 0.5px 2px #014038, /* Bottom-left base shadow */
|
||||
0.5px -0.5px 2px #014038; /* Top-right base shadow */
|
||||
color: #f7f7f7;
|
||||
background-color: #96baa0;
|
||||
border: solid #f7f7f7;
|
||||
max-width: 75vw;
|
||||
border-radius: 10px;
|
||||
padding-left: 10px;
|
||||
transform: translateX(0px);
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
#business-info p {
|
||||
text-align: center;
|
||||
font-size: 14pt;
|
||||
}
|
||||
|
||||
#business-info h4 {
|
||||
text-align: center;
|
||||
background-color: #bdd4da;
|
||||
border: solid #f7f7f7;
|
||||
border-radius: 15px;
|
||||
padding: 0 10px;
|
||||
width: 50%;
|
||||
margin-left: 22.5%;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
#story {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: left;
|
||||
width: 70vw;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
#story h1 {
|
||||
background-color: #96baa0;
|
||||
color: #f7f7f7;
|
||||
border: solid #f7f7f7;
|
||||
border-radius: 15px;
|
||||
text-shadow: 0.5px 0.5px 2px #014038, /* Bottom-right base shadow */
|
||||
-0.5px -0.5px 2px #014038, /* Top-left base shadow */
|
||||
-0.5px 0.5px 2px #014038, /* Bottom-left base shadow */
|
||||
0.5px -0.5px 2px #014038; /* Top-right base shadow */
|
||||
width: 50%;
|
||||
padding: 5px 10px;
|
||||
text-align: center;
|
||||
margin-right: 12.5%;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
#story p {
|
||||
color: #014038;
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#feedback {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #96baa0;
|
||||
border: solid #f7f7f7;
|
||||
border-radius: 15px;
|
||||
width: 90vw;
|
||||
margin-top: 30px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
#feedback h1 {
|
||||
background-color: #a4ccd6;
|
||||
border: solid #f7f7f7;
|
||||
border-radius: 10px;
|
||||
width: 50vw;
|
||||
padding: 5px 10px;
|
||||
text-align: center;
|
||||
margin-left: 25vw;
|
||||
margin-right: 25vw;
|
||||
text-shadow: 0.5px 0.5px 2px #014038, /* Bottom-right base shadow */
|
||||
-0.5px -0.5px 2px #014038, /* Top-left base shadow */
|
||||
-0.5px 0.5px 2px #014038, /* Bottom-left base shadow */
|
||||
0.5px -0.5px 2px #014038; /* Top-right base shadow */
|
||||
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
#feedback h3 {
|
||||
color: #00231c;
|
||||
font-weight: bold;
|
||||
width: 85vw;
|
||||
text-align: center;
|
||||
margin-left: 7.5vw;
|
||||
margin-right: 7.5vw;
|
||||
|
||||
}
|
||||
|
||||
#feedback p {
|
||||
color: #00231c;
|
||||
width: 85vw;
|
||||
text-align: center;
|
||||
margin-left: 7.5vw;
|
||||
margin-right: 7.5vw;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#feedback-form form{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 20px;
|
||||
align-items: baseline;
|
||||
width: 95%;
|
||||
margin-top: 20px; /* Adds some spacing above the form */
|
||||
}
|
||||
|
||||
#customer-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
width: 95%; /* Adjusted width */
|
||||
gap: 25px; /* Adds spacing between input fields */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#customer-info input {
|
||||
background-color: #f7f7f7;
|
||||
border: solid #014038;
|
||||
border-radius: 15px;
|
||||
width: 90%; /* Ensures the input fields fill the section width */
|
||||
height: 30px; /* Adjusts height to match the textarea */
|
||||
text-align: center;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
#customer-message {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 90%; /* Adjusted width */
|
||||
}
|
||||
|
||||
#customer-message #message-field textarea {
|
||||
width: 50vw; /* Takes full width of the section */
|
||||
height: 30vh; /* Adjust height as needed */
|
||||
background-color: #f7f7f7;
|
||||
border: solid #014038;
|
||||
border-radius: 15px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
#form-submit-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 10px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
#form-submit {
|
||||
padding: 10px 20px;
|
||||
background-color: #bdd4da;
|
||||
border: solid #f7f7f7;
|
||||
border-radius: 10px;
|
||||
color: #014038;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
margin-bottom: 10px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
#form-submit:hover {
|
||||
background-color: #f7f7f7;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
/* | ↑-↑-↑ End About.html ↑-↑-↑--| */
|
||||
Reference in New Issue
Block a user