From ba554deca149ea9174ac21dc8238d848ffb16a97 Mon Sep 17 00:00:00 2001 From: Sanghee Kim Date: Fri, 4 Mar 2016 21:15:48 +0100 Subject: [PATCH 1/3] Import cal + css from Jiyoun --- design_membership/calendar.html | 110 ++++++++++++++++++++ design_membership/stylesheet.css | 166 +++++++++++++++++++++++++++++++ 2 files changed, 276 insertions(+) create mode 100644 design_membership/calendar.html create mode 100644 design_membership/stylesheet.css diff --git a/design_membership/calendar.html b/design_membership/calendar.html new file mode 100644 index 00000000..acd783f5 --- /dev/null +++ b/design_membership/calendar.html @@ -0,0 +1,110 @@ + + + + + Calendar + + + + + + +
+ +
+ +
+ +

September

+ + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MoTuWeThFrSaSu
2627282930311
2345678
9101112131415
16171819202122
23242526272829
30123456
+ +
+ +
+ + + \ No newline at end of file diff --git a/design_membership/stylesheet.css b/design_membership/stylesheet.css new file mode 100644 index 00000000..4c257151 --- /dev/null +++ b/design_membership/stylesheet.css @@ -0,0 +1,166 @@ +@charset "utf-8"; +/* CSS Document */ + +/* ---------- FONTAWESOME ---------- */ +/* ---------- http://fortawesome.github.com/Font-Awesome/ ---------- */ +/* ---------- http://weloveiconfonts.com/ ---------- */ + +@import url(http://weloveiconfonts.com/api/?family=fontawesome); + +*[class*="fontawesome-"]:before { + font-family: 'FontAwesome', sans-serif; +} + +/* ---------- GENERAL ---------- */ + +body { + background: #f9f9f9; + color: #0e171c; + font: 100 100%/.7em 'Lato', sans-serif; + margin: 0; +} + +a { + text-decoration: none; +} + +/*Month size*/ +h2 { + font-size: .8em; + line-height: 1em; + /*margin: .1em 0;*/ +} + +td{ + font-size:.7em; +} + +h3 { + font-size: .7em; + line-height: .1em; + margin: .13em 0; +} + +table { + /*border-collapse: collapse;*/ + border-spacing: 0; +} + +.container { + height: 270px; + left: 50%; + margin: -100px 0 0 -100px; /* Calendar location */ + position: absolute; + top: 50%; + width: 13%; +} + +/* ---------- CALENDAR ---------- */ + +.calendar { + text-align: center; +} + +.calendar header { + position: relative; +} + +.calendar h2 { + text-transform: uppercase; + color: #1A6687; +} +/*Title*/ +.calendar thead { + font-size: .9em; + font-weight: 600; + text-transform: uppercase; + color: #8BC4C9; +} + +/*Body text*/ +.calendar tbody { + color: #7c8a95; +} + +/*select date*/ +.calendar tbody td:hover { + border: .2em solid #8BC4C9; +} + +.calendar td { + border: .7em solid none; + border-radius: 50%; + display: inline-block; + height: 2em; + line-height: 2em; + text-align: center; + width: 2em; +} + +.calendar .prev-month, +.calendar .next-month { + color: #cbd1d2; +} + +.calendar .prev-month:hover, +.calendar .next-month:hover { + border: 2px solid #cbd1d2; +} + +/*Today*/ +.current-day { + background: #8BC4C9; + color: #f9f9f9; +} + +.event { + cursor: pointer; + position: relative; +} + +/*Little dot*/ +.event:after { + background: #8BC4C9; + border-radius: 50%; + bottom: .3em; + display: block; + content: ''; + height: .3em; + left: 50%; + margin: -.5em 0 0 -.1em; + position: absolute; + width: .3em; +} + +.event.current-day:after { + background: #f9f9f9; +} + +/*Next,Prev month*/ +.btn-prev, +.btn-next { + border: 2px solid none; + border-radius: 50%; + color: #8BC4C9; + height: 2em; + font-size: .75em; + line-height: 2em; + margin: -1em; + position: absolute; + top: 50%; + width: 2em; +} + +.btn-prev:hover, +.btn-next:hover { + background: none; + color: #1A6687; +} + +.btn-prev { + left: 1.7em; +} + +.btn-next { + right: 1.7em; +} \ No newline at end of file From 28a50b90027359559f0f69e9ceebc8d87574f6df Mon Sep 17 00:00:00 2001 From: jiyounyoon Date: Mon, 14 Mar 2016 14:13:31 -0700 Subject: [PATCH 2/3] Add new files for design --- design_membership/stylesheet.css | 63 ++++++++++++++++---------------- 1 file changed, 31 insertions(+), 32 deletions(-) diff --git a/design_membership/stylesheet.css b/design_membership/stylesheet.css index 4c257151..d0ed6d1f 100644 --- a/design_membership/stylesheet.css +++ b/design_membership/stylesheet.css @@ -16,7 +16,7 @@ body { background: #f9f9f9; color: #0e171c; - font: 100 100%/.7em 'Lato', sans-serif; + font: 300 100%/1.5em 'Lato', sans-serif; margin: 0; } @@ -26,33 +26,30 @@ a { /*Month size*/ h2 { - font-size: .8em; - line-height: 1em; - /*margin: .1em 0;*/ -} - -td{ - font-size:.7em; + font-size: 1.5em; + line-height: 1.25em; + margin: .25em 0; } h3 { - font-size: .7em; - line-height: .1em; - margin: .13em 0; + font-size: 1.5em; + line-height: 1em; + margin: .33em 0; } table { /*border-collapse: collapse;*/ border-spacing: 0; + margin:auto; } .container { - height: 270px; + height: 558px; left: 50%; - margin: -100px 0 0 -100px; /* Calendar location */ + margin: -255px 0 0 -245px; position: absolute; top: 50%; - width: 13%; + width: 540px; } /* ---------- CALENDAR ---------- */ @@ -71,7 +68,6 @@ table { } /*Title*/ .calendar thead { - font-size: .9em; font-weight: 600; text-transform: uppercase; color: #8BC4C9; @@ -84,17 +80,20 @@ table { /*select date*/ .calendar tbody td:hover { - border: .2em solid #8BC4C9; + border: .5px solid #8BC4C9; + -webkit-border: .5px solid none; + border-radius: 50%; } .calendar td { - border: .7em solid none; + border: .5px solid transparent; border-radius: 50%; display: inline-block; - height: 2em; - line-height: 2em; + height: 2.5em; + line-height: 2.5em; text-align: center; - width: 2em; + width: 2.5em; + } .calendar .prev-month, @@ -104,7 +103,7 @@ table { .calendar .prev-month:hover, .calendar .next-month:hover { - border: 2px solid #cbd1d2; + border: .5px solid #cbd1d2; } /*Today*/ @@ -122,14 +121,14 @@ table { .event:after { background: #8BC4C9; border-radius: 50%; - bottom: .3em; + bottom: .35em; display: block; content: ''; - height: .3em; + height: .35em; left: 50%; - margin: -.5em 0 0 -.1em; + margin: -.25em 0 0 -.25em ; position: absolute; - width: .3em; + width: .35em; } .event.current-day:after { @@ -139,18 +138,18 @@ table { /*Next,Prev month*/ .btn-prev, .btn-next { - border: 2px solid none; - border-radius: 50%; + border: 1px solid transparent; color: #8BC4C9; height: 2em; font-size: .75em; line-height: 2em; - margin: -1em; + margin: auto; position: absolute; - top: 50%; - width: 2em; + top: .3em; + width: 10em; } + .btn-prev:hover, .btn-next:hover { background: none; @@ -158,9 +157,9 @@ table { } .btn-prev { - left: 1.7em; + left: 6em; } .btn-next { - right: 1.7em; + right: 6em; } \ No newline at end of file From 7b12f11f7d7d0da5bb23af6f39532a0cf2ef22e2 Mon Sep 17 00:00:00 2001 From: Sanghee Kim Date: Wed, 23 Mar 2016 18:25:49 +0100 Subject: [PATCH 3/3] calendar added --- design_membership/calendar/calendar.html | 107 +++++++++++++++ design_membership/calendar/stylesheet.css | 160 ++++++++++++++++++++++ 2 files changed, 267 insertions(+) create mode 100644 design_membership/calendar/calendar.html create mode 100644 design_membership/calendar/stylesheet.css diff --git a/design_membership/calendar/calendar.html b/design_membership/calendar/calendar.html new file mode 100644 index 00000000..5b3b04a2 --- /dev/null +++ b/design_membership/calendar/calendar.html @@ -0,0 +1,107 @@ + + + + + Calendar + + + + + + +
+ +
+ +
+ + September + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MoTuWeThFrSaSu
2627282930311
2345678
9101112131415
16171819202122
23242526272829
30123456
+ +
+ +
+ + + \ No newline at end of file diff --git a/design_membership/calendar/stylesheet.css b/design_membership/calendar/stylesheet.css new file mode 100644 index 00000000..25861a58 --- /dev/null +++ b/design_membership/calendar/stylesheet.css @@ -0,0 +1,160 @@ +@charset "utf-8"; +/* CSS Document */ + +/* ---------- FONTAWESOME ---------- */ +/* ---------- http://fortawesome.github.com/Font-Awesome/ ---------- */ +/* ---------- http://weloveiconfonts.com/ ---------- */ + +@import url(http://weloveiconfonts.com/api/?family=fontawesome); + +*[class*="fontawesome-"]:before { + font-family: 'FontAwesome', sans-serif; +} + +/* ---------- GENERAL ---------- */ + +body { + background: #f9f9f9; + color: #0e171c; + font: 300 100%/1em 'Lato', sans-serif; + margin: 0; +} + +a { + text-decoration: none; +} + +/*Month size*/ +#monthtitle { + font-size: 1.2em; + line-height: 1.25em; + margin: .25em 0; + font-weight: 600; +} + +h3 { + font-size: 1.5em; + line-height: 1em; + margin: .33em 0; +} + +table { + border-collapse: collapse; + border-spacing: 0; + margin:auto; + +} + +.container { + height: 358px; + left: 50%; + margin: -255px 0 0 -245px; + position: absolute; + top: 50%; + width: 340px; +} + +/* ---------- CALENDAR ---------- */ + +.calendar { + text-align: center; +} + +.calendar header { + position: relative; +} + +.calendar #monthtitle { + text-transform: uppercase; + color: #1A6687; +} +/*Title*/ +.calendar thead { + font-weight: 500; + /*text-transform: uppercase;*/ + color: #8BC4C9; + /*margin-bottom:1px;*/ + +} + +/*Body text*/ +.calendar tbody { + color: #7c8a95; +} + +/*select date*/ +.calendar tbody td:hover { + background: #8BC4C9; + color: #f9f9f9; + /*border: .1px solid #8BC4C9;*/ + + /*border-radius: 50%;*/ +} + +.calendar thead>tr>td{ + border-top:hidden; + border-left:hidden; + border-right: hidden; +} + +.calendar td { + border: .1px solid #cbd1d2; + /*border-radius: 50%;*/ + display: inline-block; + height: 2.5em; + line-height: 2.5em; + text-align: center; + width: 2.5em; + +} + +.calendar .prev-month, +.calendar .next-month { + /*border: .1px solid #cbd1d2;*/ + color: #cbd1d2; + +} + +.calendar .prev-month:hover, +.calendar .next-month:hover { + border: .5px solid #cbd1d2; + background: #cbd1d2; + color: #f9f9f9; +} + +/*Today*/ +.current-day { + color: #8BC4C9; + /*background-color: #8BC4C9;*/ +} + + +/*Next,Prev month*/ +.btn-prev, +.btn-next { + border: 1px solid transparent; + color: #8BC4C9; + font-size: 1.5em; + padding: 1em; + /*height: .7em;*/ + /*line-height: .3em;*/ + /*margin: auto;*/ + /*position: absolute;*/ + /*top: .1em;*/ + /*width: 25em;*/ +} + + +.btn-prev:hover, +.btn-next:hover { + background: none; + color: #1A6687; +} + +.btn-prev { + left: 6em; +} + +.btn-next { + right: 6em; +} \ No newline at end of file