Skip to content

Commit

Permalink
Merge pull request #36 from yvonne-liu/style-calendar
Browse files Browse the repository at this point in the history 
added styling for three pages
  • Loading branch information
@lucysabin
lucysabin authored May 23, 2017
2 parents 640950f + 1155b3e commit fe6c9ef
Show file tree
Hide file tree
Showing 6 changed files with 237 additions and 38 deletions.
101 changes: 86 additions & 15 deletions calendar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,28 +4,99 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/main.css" type="text/css">
<title>Document</title>
<link rel="stylesheet" href="./css/main.css" type="text/css">
<link href="./css/calendar.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Coming+Soon" rel="stylesheet">
<title>Calendar</title>
</head>
<body>

<h1>calendar here</h1>
<div class="container">
<div class="calendar-container">
<header>
<div class="month">May 2017</div>
</header>

<form action="./day.html">
<input type="submit" value="see food logs for a particular day" />
</form>
<table class="calendar">

<form action="./therapynote.html">
<input type="submit" value="see therapy notes for a particular day" />
</form>
<thead>

<form action="./sent.html">
<input type="submit" value="send logs from selected days to therapist" />
</form>
<tr>

<form action="./landing.html">
<input type="submit" value="Back to home" />
</form>
<td>Mon</td>
<td>Tue</td>
<td>Wed</td>
<td>Thu</td>
<td>Fri</td>
<td>Sat</td>
<td>Sun</td>

</tr>

</thead>

<tbody>

<tr>
<td><a class="log-day" href="./day.html">1</td>
<td><a class="log-day" href="./day.html">2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>

<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>

<tr>
<td><a class="session-day" href="./day.html">15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td><a class="session-day" href="./therapynote.html">19</td>
<td>20</td>
<td>21</td>
</tr>

<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td class="current-day">26</td>
<td>27</td>
<td>28</td>
</tr>

<tr>
<td>29</td>
<td>30</td>
<td>31</td>
<td class="next-month">1</td>
<td class="next-month">2</td>
<td class="next-month">3</td>
<td class="next-month">4</td>
</tr>

</tbody>

</table>

<!-- <div class="ring-left"></div>
<div class="ring-right"></div> -->

</div> <!-- end calendar-container -->

</div> <!-- end container -->
<a href="./landing.html" class="">Back</a>
</body>
</html>
92 changes: 92 additions & 0 deletions css/calendar.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
body {
background: rgb(255, 243, 204);
font: 0.8em 'Lato', sans-serif;
padding: 1em;
}

table {
border-collapse: collapse;
/*border-spacing: 0;*/
padding: 1em;
}

td {
padding: 0.5em;
}

.log-day {
color: #555;
text-decoration: none;
}

.container {
padding: 0.5em;
left: 50%;
position: fixed;
top: 30%;
transform: translate(-50%, -50%);
}

.calendar-container {
position: relative;
padding: 0.5em;
}

.calendar-container header {
border-radius: 0.5em 0.5em 0 0;
background: rgb(249, 188, 89);
color: #fff;
padding: 2em 1em;
}

.day {
font-size: 8em;
font-weight: 900;
line-height: 1em;
}

.month {
text-align: center;
font-size: 2em;
line-height: 1em;
text-transform: lowercase;
}

.calendar {
background: #fff;
border-radius: 0 0 1em 1em;
color: #555;
display: inline-block;
padding: 0.5em;
}

.calendar thead {
color: rgb(249, 188, 89);
font-weight: 700;
text-transform: uppercase;
}

.calendar td {
padding: .5em 1em;
text-align: center;
}

.calendar tbody td:hover {
background: #cacaca;
color: #fff;
}

.current-day {
background-color: rgb(249, 188, 89);
color: #fff;
}

.session-day {
color: rgb(249, 188, 89);
text-decoration: none;
}

.prev-month,
.next-month {
color: #cacaca;
}
17 changes: 17 additions & 0 deletions css/day.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
* {
background: rgb(249, 188, 89);
font-family: 'Coming Soon', sans-serif;
color: white;
}

header {
text-align: center;
margin: 1em 0 1em 0;
font-size: 2em;
}

.food-log {
margin-bottom: 0.5em;
border-style: solid;
padding: 0.5em;
}
16 changes: 16 additions & 0 deletions css/therapynote.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
* {
background: rgb(249, 188, 89);
font-family: 'Coming Soon', sans-serif;
color: white;
}

.notes {
margin-top: 1.5em;
border-style: solid;
padding: 0.5em;
}

.session-date {
text-align: center;
font-size: 1.5em;
}
29 changes: 15 additions & 14 deletions day.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,23 +4,24 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/main.css" type="text/css">
<link rel="stylesheet" href="./css/main.css" type="text/css">
<link rel="stylesheet" href="./css/day.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Coming+Soon" rel="stylesheet">
<title>Document</title>
</head>
<body>
<header>may 1st entry</header>
<div class="food-log">
<p>Time: 09:00</p>
<p>For breakfast, I had two bananas and a slice of bread</p>
<p>At the time of eating, I felt okay</p>
</div>

<h1>Monday, May 5th</h1>
<p>Food log 1</p>
<p>Food log 2</p>
<p>Food log 3</p>

<form action="#">
<input type="submit" value="edit" />
</form>

<form action="./calendar.html">
<input type="submit" value="back to calendar" />
</form>

<div class="food-log">
<p>Time: 11:00</p>
<p>For lunch, I didn't eat anything.</p>
<p>I didn't eat anything because I didn't feel like I should eat after breakfast.</p>
</div>
<a href="./calendar.html" class="">Back to Calendar</a>
</body>
</html>
20 changes: 11 additions & 9 deletions therapynote.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,25 +4,27 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/main.css" type="text/css">
<link rel="stylesheet" href="./css/main.css" type="text/css">
<link rel="stylesheet" href="./css/therapynote.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Coming+Soon" rel="stylesheet">
<title>Document</title>
</head>
<body>

<form action="./calendar.html">
<!-- <form action="./calendar.html">
<input type="submit" value="Back to calendar view" />
</form>

<h1>Session with Lisa</h1>
</form> -->
<div class="notes">
<div class="session-date">may 19th session</div>
<ul>
<li>When you start thinking about X, try to focus on Y</li>
<li>When you're feeling X, do Y</li>
<li>etc.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pulvinar sed velit non ornare. Vestibulum rhoncus mollis orci, eget dapibus libero rutrum nec. Mauris pellentesque pulvinar leo, eget finibus neque ullamcorper sed. Vivamus efficitur, sem ut feugiat aliquam, massa massa molestie turpis, at tempor nisl erat et est. Integer vel elit purus. Cras feugiat diam magna, quis vestibulum est sodales id.</li>
<li>Goals for next wek:</li>
</ul>
</div>

<form action="#">
<input type="submit" value="edit" />
</form>
<a href="./calendar.html" class="">Back to Calendar</a>

</body>
</html>

0 comments on commit fe6c9ef

Please sign in to comment.