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
Split 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 @@ @@ -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 { @@ -82,6 +82,33 @@ body {
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 {
text-decoration: underline;
}

197
templates/goals.html
Unescape View File

@ -4,209 +4,64 @@ @@ -4,209 +4,64 @@
<meta charset="UTF-8">
<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/goals.css" />
<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>
<body>
{{template "pageheader" . }}
<div class="wishlist-container">
<header class="wishlist-page-header">
<h1>Manage Your Goals</h1>
<p>Add new goals or track progress on your current items.</p>
<div class="goals-container">
<header class="goals-page-header">
<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>
<section class="add-wishlist">
<h2>Add a New Goal</h2>
<section class="add-goal">
<h2 class="add-goal-title">Add a New Goal</h2>
<form id="add-item-form">
<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>
</div>
<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>
</div>
<div class="form-group">
<label for="item-description">Description</label>
<textarea id="item-description" name="item-description" placeholder="Why is this goal important?" required></textarea>
<label for="item-description" class="goals-form-label">Description</label>
<textarea class="goals-textfield" id="item-description" name="item-description" placeholder="Why is this goal important?" required></textarea>
</div>
<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>
</div>
<button type="submit" class="btn primary-btn">Add to Wishlist</button>
<button type="submit" class="btn primary-btn">Add Goal</button>
</form>
</section>
<section class="wishlist-items">
<h2>Your Current Wishlist</h2>
<div class="items">
<div class="item">
<section>
<h2 class="add-goals-title">Your Current Goals</h2>
<div class="goal-items">
<div class="goal-item">
<div class="item-info">
<h3>Full-Stack Development Certification</h3>
<p>Progress: <span class="progress">75%</span> funded</p>
<h3 class="item-info-title">Full-Stack Development Certification</h3>
<p class="item-info-content">Progress: <span class="goal-progress">75%</span> funded</p>
</div>
<button class="btn danger-btn">Remove</button>
</div>
<div class="item">
<div class="goal-item">
<div class="item-info">
<h3>Data Science Course</h3>
<p>Progress: <span class="progress">40%</span> funded</p>
<h3 class="item-info-title">Data Science Course</h3>
<p class="item-info-content">Progress: <span class="goal-progress">40%</span> funded</p>
</div>
<button class="btn danger-btn">Remove</button>
</div>
</div>
</section>
</div>
{{template "footer"}}
</body>
</html>
Write Preview
Loading…
Cancel
Save