codegirl007
/
sponsorahacker
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

clean up goal styling, move css to own file, make naming consistent

master
Stephanie Gredell 1 year ago
parent
38c20ec99a
commit
725d73201e
3 changed files with 148 additions and 171 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 95
      assets/css/goals.css
  2. 27
      assets/css/style.css
  3. 197
      templates/goals.html

95
assets/css/goals.css
Unescape View File

@ -0,0 +1,95 @@
.goals-container {
max-width: 800px;
margin: 30px auto;
padding: 20px;
}
.goals-page-header {
text-align: center;
margin-bottom: 40px;
}
.goals-page-header-title {
font-size: 2em;
color: #457B9D; /* Muted blue for main headings */
}
.goals-page-header-content {
font-size: 1.1em;
color: #495057; /* Slightly darker gray for descriptions */
}
.add-goal {
margin-bottom: 40px;
padding: 20px;
background-color: #FFFFFF; /* White for section backgrounds */
border-radius: 8px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}
.add-goals-title {
margin-bottom: 20px;
font-size: 1.5em;
color: #457B9D;
}
.add-goal-title {
color: #A3C1AD; /* Muted green for emphasis */
}
.form-group {
margin-bottom: 20px;
}
.goals-form-label {
display: block;
font-weight: bold;
margin-bottom: 8px;
color: #495057; /* Dark gray for labels */
}
input, textarea {
width: 100%;
padding: 10px;
font-size: 1em;
border: 1px solid #DDD;
border-radius: 5px;
box-sizing: border-box;
}
.goals-textfield {
resize: none;
height: 100px;
}
.goal-items {
display: flex;
flex-direction: column;
gap: 20px;
}
.goal-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
border: 1px solid #DDD;
border-radius: 5px;
background-color: #F9F9F9; /* Subtle light gray for contrast */
}
.item-info-title {
margin: 0 0 5px 0;
font-size: 1.2em;
color: #333;
}
.item-info-content {
margin: 0;
font-size: 1em;
color: #666;
}
.goal-progress {
font-weight: bold;
color: #457B9D; /* Muted blue for progress text */
}

27
assets/css/style.css
Unescape View File

@ -82,6 +82,33 @@ body {
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
} }
.primary-btn {
background-color: #457B9D; /* Muted blue */
color: #FFFFFF;
}
.primary-btn:hover {
background-color: #356081;
}
.danger-btn {
background-color: #E57373; /* Light muted red */
color: #FFFFFF;
}
.danger-btn:hover {
background-color: #D32F2F;
}
.btn {
display: inline-block;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 1em;
cursor: pointer;
}
.how-it-works-button:hover { .how-it-works-button:hover {
text-decoration: underline; text-decoration: underline;
} }

197
templates/goals.html
Unescape View File

@ -4,209 +4,64 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="assets/css/style.css" /> <link rel="stylesheet" type="text/css" href="assets/css/style.css" />
<link rel="stylesheet" type="text/css" href="assets/css/goals.css" />
<title>Goals</title> <title>Goals</title>
<style>
.wishlist-container {
max-width: 800px;
margin: 30px auto;
padding: 20px;
}
.wishlist-page-header {
text-align: center;
margin-bottom: 40px;
}
.wishlist-page-header h1 {
font-size: 2em;
color: #457B9D; /* Muted blue for main headings */
}
.wishlist-page-header p {
font-size: 1.1em;
color: #495057; /* Slightly darker gray for descriptions */
}
section {
margin-bottom: 40px;
padding: 20px;
background-color: #FFFFFF; /* White for section backgrounds */
border-radius: 8px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}
.add-wishlist h2, .wishlist-items h2 {
margin-bottom: 20px;
font-size: 1.5em;
}
.add-wishlist h2 {
color: #A3C1AD; /* Muted green for emphasis */
}
.wishlist-items h2 {
color: #457B9D; /* Muted blue */
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
font-weight: bold;
margin-bottom: 8px;
color: #495057; /* Dark gray for labels */
}
input, textarea {
width: 100%;
padding: 10px;
font-size: 1em;
border: 1px solid #DDD;
border-radius: 5px;
box-sizing: border-box;
}
textarea {
resize: none;
height: 100px;
}
.btn {
display: inline-block;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 1em;
cursor: pointer;
}
.primary-btn {
background-color: #457B9D; /* Muted blue */
color: #FFFFFF;
}
.primary-btn:hover {
background-color: #356081;
}
.danger-btn {
background-color: #E57373; /* Light muted red */
color: #FFFFFF;
}
.danger-btn:hover {
background-color: #D32F2F;
}
.items {
display: flex;
flex-direction: column;
gap: 20px;
}
.item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
border: 1px solid #DDD;
border-radius: 5px;
background-color: #F9F9F9; /* Subtle light gray for contrast */
}
.item-info h3 {
margin: 0 0 5px 0;
font-size: 1.2em;
color: #333;
}
.item-info p {
margin: 0;
font-size: 1em;
color: #666;
}
.progress {
font-weight: bold;
color: #457B9D; /* Muted blue for progress text */
}
.footer a:hover {
color: #FFFFFF;
}
@media (max-width: 768px) {
.items {
gap: 15px;
}
.item {
flex-direction: column;
align-items: flex-start;
}
.item button {
margin-top: 10px;
align-self: flex-end;
}
}
</style>
</head> </head>
<body> <body>
{{template "pageheader" . }} {{template "pageheader" . }}
<div class="wishlist-container">
<header class="wishlist-page-header"> <div class="goals-container">
<h1>Manage Your Goals</h1> <header class="goals-page-header">
<p>Add new goals or track progress on your current items.</p> <h1 class="goals-page-header-title">Manage Your Goals</h1>
<p class="goals-page-header-content">Add new goals or track progress on your current items.</p>
</header> </header>
<section class="add-wishlist"> <section class="add-goal">
<h2>Add a New Goal</h2> <h2 class="add-goal-title">Add a New Goal</h2>
<form id="add-item-form"> <form id="add-item-form">
<div class="form-group"> <div class="form-group">
<label for="item-name">Goal Name</label> <label for="item-name" class="goals-form-label">Goal Name</label>
<input type="text" id="item-name" name="item-name" placeholder="e.g., Full-Stack Certification" required> <input type="text" id="item-name" name="item-name" placeholder="e.g., Full-Stack Certification" required>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="funding-amount">Amount of funding needed</label> <label for="funding-amount" class="goals-form-label">Amount of funding needed</label>
<input type="text" inputmode="numeric" id="funding-amount" name="funding-amount" placeholder="100.00" required> <input type="text" inputmode="numeric" id="funding-amount" name="funding-amount" placeholder="100.00" required>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="item-description">Description</label> <label for="item-description" class="goals-form-label">Description</label>
<textarea id="item-description" name="item-description" placeholder="Why is this goal important?" required></textarea> <textarea class="goals-textfield" id="item-description" name="item-description" placeholder="Why is this goal important?" required></textarea>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="item-url">Link to learn more:</label> <label for="item-url" class="goals-form-label">Link to learn more:</label>
<input type="text" id="item-url" name="item-url" placeholder="Where can we learn more?" required></input> <input type="text" id="item-url" name="item-url" placeholder="Where can we learn more?" required></input>
</div> </div>
<button type="submit" class="btn primary-btn">Add to Wishlist</button> <button type="submit" class="btn primary-btn">Add Goal</button>
</form> </form>
</section> </section>
<section class="wishlist-items"> <section>
<h2>Your Current Wishlist</h2> <h2 class="add-goals-title">Your Current Goals</h2>
<div class="items"> <div class="goal-items">
<div class="item"> <div class="goal-item">
<div class="item-info"> <div class="item-info">
<h3>Full-Stack Development Certification</h3> <h3 class="item-info-title">Full-Stack Development Certification</h3>
<p>Progress: <span class="progress">75%</span> funded</p> <p class="item-info-content">Progress: <span class="goal-progress">75%</span> funded</p>
</div> </div>
<button class="btn danger-btn">Remove</button> <button class="btn danger-btn">Remove</button>
</div> </div>
<div class="item"> <div class="goal-item">
<div class="item-info"> <div class="item-info">
<h3>Data Science Course</h3> <h3 class="item-info-title">Data Science Course</h3>
<p>Progress: <span class="progress">40%</span> funded</p> <p class="item-info-content">Progress: <span class="goal-progress">40%</span> funded</p>
</div> </div>
<button class="btn danger-btn">Remove</button> <button class="btn danger-btn">Remove</button>
</div> </div>
</div> </div>
</section> </section>
</div> </div>
{{template "footer"}} {{template "footer"}}
</body> </body>
</html> </html>
Write Preview
Loading…
Cancel
Save