Skip to content

Commit

Permalink
refs #24, correct css / page style, add content structure.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jimyhuang
jimyhuang committed Oct 5, 2015
1 parent 4053a32 commit d6f9f2b
Show file tree
Hide file tree
Showing 2 changed files with 184 additions and 17 deletions.
163 changes: 149 additions & 14 deletions report/2015/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,44 +5,179 @@
og_description: 你的支持讓開放文化更茁壯 - 開放文化基金會 2015 年度成果報告
og_image: http://placehold.it/400x300
---
<div class="ui grid vertical horizontal padding center aligned annual-title">
<h1 class="header">2015 回顧</h1>
<div class="ui horizontal divider">
<div class="annual-title intro">
<div class="inner">
<h1 class="header">2015 回顧</h1>
<div class="ui horizontal divider"></div>
<div class="content">考場數產大流他以那處現黃慢：社媽子別學，同臺運高人率極首電樂起廣性未個外業麼企裡雄小西三裡去局言型氣它爾天；被然運今立的跑地從立登們生說半同果日了受臺正力，時演合各雖音該作人公全業我見們者了要男？能不性高後走職品來？個希家送林民電麼阿決是書大方車女入持深則林生排。</div>
</div>
</div><!--end annual title-->

<div class="annual-title">
<div class="inner">
<h1 class="header">連結社群</h1>
</div>
</div><!--end annual title-->

<div class="annual-report">
<div class="ui items">
<!--item-->
<div class="item">
<div class="ui image">
<img src="http://ocf.tw/images/action.jpg">
</div>
<div class="block">
<h3 class="ui huge header">Our team grew in lots of ways. Most notably, we added 21 new team members.</h3>
<div class="sub header">Now our team is truly global, collaborating from Colorado, Oregon, Tennessee, Vermont, Washington DC, Cambodia, Ethiopia, and (of course) our headquarters in New York.</div>
</div>
</div>
<!--item-->
<div class="item">
<div class="block">
<h3 class="ui huge header">Our team grew in lots of ways. Most notably, we added 21 new team members.</h3>
<div class="sub header">Now our team is truly global, collaborating from Colorado, Oregon, Tennessee, Vermont, Washington DC, Cambodia, Ethiopia, and (of course) our headquarters in New York.</div>
</div>
<div class="ui image">
<img src="http://ocf.tw/images/project-g0v-hackathon-banner.jpg">
</div>
</div>
</div>
</div>

<div class="annual-title">
<div class="inner">
<h1 class="header">提攜後進</h1>
</div>
<div class="content">考場數產大流他以那處現黃慢：社媽子別學，同臺運高人率極首電樂起廣性未個外業麼企裡雄小西三裡去局言型氣它爾天；被然運今立的跑地從立登們生說半同果日了受臺正力，時演合各雖音該作人公全業我見們者了要男？能不性高後走職品來？個希家送林民電麼阿決是書大方車女入持深則林生排。</div>
</div><!--end annual title-->

<div class="annual-report">
<div class="ui relaxed divided link items">
<div class="ui items">
<!--item-->
<div class="item">
<div class="ui image">
<img src="http://www.charitywater.org/annual-report/14/images/team-1-large-up.jpg">
<img src="http://ocf.tw/images/action.jpg">
</div>
<div class="middle center aligned content">
<div class="block">
<h3 class="ui huge header">Our team grew in lots of ways. Most notably, we added 21 new team members.</h3>
<div class="sub header">Now our team is truly global, collaborating from Colorado, Oregon, Tennessee, Vermont, Washington DC, Cambodia, Ethiopia, and (of course) our headquarters in New York.</div>
</div>
</div>
<!--item-->
<div class="item">
<div class="middle center aligned content">
<div class="block">
<h3 class="ui huge header">Our team grew in lots of ways. Most notably, we added 21 new team members.</h3>
<div class="sub header">Now our team is truly global, collaborating from Colorado, Oregon, Tennessee, Vermont, Washington DC, Cambodia, Ethiopia, and (of course) our headquarters in New York.</div>
</div>
<div class="ui image">
<img src="http://www.charitywater.org/annual-report/14/images/team-1-large-up.jpg">
<img src="http://ocf.tw/images/project-g0v-hackathon-banner.jpg">
</div>
</div>
</div>
</div>


<div class="annual-title">
<div class="inner">
<h1 class="header">邁向國際</h1>
</div>
</div><!--end annual title-->

<div class="annual-report">
<div class="ui items">
<!--item-->
<div class="item">
<div class="ui image">
<img src="http://ocf.tw/images/action.jpg">
</div>
<div class="block">
<h3 class="ui huge header">Our team grew in lots of ways. Most notably, we added 21 new team members.</h3>
<div class="sub header">Now our team is truly global, collaborating from Colorado, Oregon, Tennessee, Vermont, Washington DC, Cambodia, Ethiopia, and (of course) our headquarters in New York.</div>
</div>
</div>
<!--item-->
<div class="item">
<div class="block">
<h3 class="ui huge header">Our team grew in lots of ways. Most notably, we added 21 new team members.</h3>
<div class="sub header">Now our team is truly global, collaborating from Colorado, Oregon, Tennessee, Vermont, Washington DC, Cambodia, Ethiopia, and (of course) our headquarters in New York.</div>
</div>
<div class="ui image">
<img src="http://ocf.tw/images/project-g0v-hackathon-banner.jpg">
</div>
</div>
</div>
</div>

<div class="annual-title">
<div class="inner">
<h1 class="header">開放文化</h1>
</div>
</div><!--end annual title-->

<div class="annual-report">
<div class="ui items">
<!--item-->
<div class="item">
<div class="ui image">
<img src="http://ocf.tw/images/action.jpg">
</div>
<div class="block">
<h3 class="ui huge header">Our team grew in lots of ways. Most notably, we added 21 new team members.</h3>
<div class="sub header">Now our team is truly global, collaborating from Colorado, Oregon, Tennessee, Vermont, Washington DC, Cambodia, Ethiopia, and (of course) our headquarters in New York.</div>
</div>
</div>
<!--item-->
<div class="item">
<div class="block">
<h3 class="ui huge header">Our team grew in lots of ways. Most notably, we added 21 new team members.</h3>
<div class="sub header">Now our team is truly global, collaborating from Colorado, Oregon, Tennessee, Vermont, Washington DC, Cambodia, Ethiopia, and (of course) our headquarters in New York.</div>
</div>
<div class="ui image">
<img src="http://ocf.tw/images/project-g0v-hackathon-banner.jpg">
</div>
</div>
</div>
</div>

<div class="annual-title">
<div class="inner">
<h1 class="header">我們的財務</h1>
</div>
</div><!--end annual title-->

<div class="annual-report">
<div class="ui items">
<!--item-->
<div class="item">
<div class="ui image">
<img src="http://ocf.tw/images/action.jpg">
</div>
<div class="block">
<h3 class="ui huge header">Our team grew in lots of ways. Most notably, we added 21 new team members.</h3>
<div class="sub header">Now our team is truly global, collaborating from Colorado, Oregon, Tennessee, Vermont, Washington DC, Cambodia, Ethiopia, and (of course) our headquarters in New York.</div>
</div>
</div>
<!--item-->
<div class="item">
<div class="block">
<h3 class="ui huge header">Our team grew in lots of ways. Most notably, we added 21 new team members.</h3>
<div class="sub header">Now our team is truly global, collaborating from Colorado, Oregon, Tennessee, Vermont, Washington DC, Cambodia, Ethiopia, and (of course) our headquarters in New York.</div>
</div>
<div class="ui image">
<img src="http://ocf.tw/images/project-g0v-hackathon-banner.jpg">
</div>
</div>
</div>
</div>
<div class="ui hidden divider"></div>
<script>
// lazy load image
$('.demo.items .image img')
.visibility({
type : 'image',
transition : 'fade in',
duration : 1000
$(document).ready(function(){
$('.annual-report .block').css('opacity', 0.1);
$('.annual-report .block').visibility({
once: false,
onpassing: function(){
$(this).fadeTo(900, 0.9);
}
});
});
</script>
38 changes: 35 additions & 3 deletions report/2015/report.css
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,51 @@
.annual-report .ui.items>.item>.content,
.annual-report .ui.items {
margin: 10px;
}
.annual-report .ui.items>.item {
display: table;
}
.annual-report .ui.items>.item>.block,
.annual-report .ui.items>.item>.image
{
width: 50%;
min-height:300px;
margin: 0;
display: table-cell;
vertical-align: middle;
}
.annual-report .ui.items>.item>.block {
text-align: center;
padding: 40px;
}

.annual-title {
margin-bottom: 10px;
min-height: 350px;
display: table;
width: 100%;
border-spacing: 10px 0;
margin: 10px 0;
}
.annual-title .inner {
display: table-cell;
vertical-align: middle;
background: #37AAB0;
color: #FFF;
margin: 10px;
}
.annual-title h1.header {
font-size: 5em;
}
.annual-title h1.header,
.annual-title .content {
max-width: 960px;
margin: 0 auto;
text-align: center;
}
.annual-title .ui.horizontal.divider {
max-width: 200px;
margin: 0 auto;
}

/* intro */
.annual-title.intro {
min-height:550px;
}

0 comments on commit d6f9f2b

Please sign in to comment.