Kaynağa Gözat

Work on #55: add styled bio divs.

Add:
        templates/about.html, static/sass/about.sass
                -Add biography-section HTML structure and styling, containing
                filler images and lorem ipsum; now, it's just a matter of
                substituting in the appropriate content.

        static/img/about.bio(1, 2, 3).jpg
                -Add placeholder bio images.
tags/v1.0^2
Severyn Kozak 10 yıl önce
ebeveyn
işleme
9ab6155e79
5 değiştirilmiş dosya ile 76 ekleme ve 15 silme
  1. BIN
     
  2. BIN
     
  3. BIN
     
  4. +40
    -5
      static/sass/about.sass
  5. +36
    -10
      templates/about.html



+ 40
- 5
static/sass/about.sass Dosyayı Görüntüle

@@ -5,6 +5,8 @@
@import mixins
@import variables

$centered-section-min-width: 500px

div.bg
$img-height: 650px

@@ -28,22 +30,22 @@ div.bg
background: url(../img/about/bg3.png) no-repeat
background-size: cover
height: $img-height + 250
top: 1600px
top: 1560px

&#img-4
background: url(../img/about/bg4.png) no-repeat
background-size: cover
height: $img-height + 300
top: 5450px
height: $img-height + 400
top: 5280px

div.section
background-color: white
border: 1px solid $baseColor2
height: 300px
margin-bottom: 200px
margin-top: 300px
padding-bottom: 50px
padding-top: 20px
overflow: hidden

&#top
margin-top: 0px
@@ -53,7 +55,8 @@ div.section
line-height: 150%
margin-left: auto
margin-right: auto
width: 50%
min-width: 500px
width: 65%

&#how
b
@@ -86,3 +89,35 @@ div.section
span#title
color: $baseColor1
font-weight: bold

div.person
font-size: 80%
overflow: hidden

&#top
margin-top: 40px

>div
$image-min-width: 100px

display: inline-block
height: 100%
margin-bottom: 40px
vertical-align: top

&.photo
margin-right: 40px
width: $image-min-width

img
display: block
height: $image-min-width
width: $image-min-width

&.bio
min-width: $centered-section-min-width - $image-min-width - 50px
width: 70%

h1
font-size: 130%
margin: 0

+ 36
- 10
templates/about.html Dosyayı Görüntüle

@@ -12,10 +12,10 @@
= endblock

= block after_body
<div id="img-1" class="bg" speed="-1.25"></div>
<div id="img-2" class="bg" speed="1.8"></div>
<div id="img-3" class="bg" speed="1.6"></div>
<div id="img-4" class="bg" speed="3.8"></div>
<!-- <div id="img-1" class="bg" speed="-1.25"></div> -->
<!-- <div id="img-2" class="bg" speed="1.8"></div> -->
<!-- <div id="img-3" class="bg" speed="1.6"></div> -->
<!-- <div id="img-4" class="bg" speed="3.64"></div> -->

<div id="top" class="section">
<div class="centered">
@@ -24,10 +24,10 @@
online source-code search engine, developed by programmers, for programmers. The engine currently aggregates
publicly-available code from two online frameworks &#8211; <a href="https://github.com/">GitHub</a> and <a
href="https://bitbucket.org/">Bitbucket</a> &#8211; but has the necessary infrastructure to quickly incorporate
others, like <a href="http://stackoverflow.com/">StackOverflow</a> and <a href="https://gitorious.org/">Gitorious</a>
<span id="title">bitshift</span> supports a robust query language, which allows users to search for specific
languages, files, dates of creation and last modifcation, and symbols (function, class, and variable names),
amongst other attributes.
others, like <a href="http://stackoverflow.com/">StackOverflow</a> and
<a href="https://gitorious.org/">Gitorious</a>. <span id="title">bitshift</span> supports a robust query
language, which allows users to search for specific languages, files, dates of creation and last modifcation,
and symbols (function, class, and variable names), amongst other attributes.
</div>
</div>

@@ -42,14 +42,40 @@
</ul>

The engine was developed over the span of four months, and is primarily implemented in <b>Python</b>, but has
parser in <b>Ruby</b>, <b>Java</b>, and a number of other languages.
parsers in <b>Ruby</b>, <b>Java</b>, and a number of other languages.
</div>
</div>

<div class="section">
<div class="centered">
<h1><span>&raquo;</span> Who</h1>
Who who? <b>Us who.</b> <span style="font-size:70%;">More stuffs to come (photos and bios).</span>
<div id="top" class="person">
<div class="photo">
<img src="img/about/bio1.jpg" alt="Severyn Kozak's photo.">
</div
><div class="bio">
<h1>Benjamin Attal</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porttitor bibendum enim. Proin porttitor tortor eget scelerisque pharetra. Etiam ac arcu congue, ultricies sem a, hendrerit arcu. Duis imperdiet tellus ut arcu tincidunt, ut sagittis enim aliquam. Quisque eget magna a lacus feugiat fringilla. Etiam consequat dictum neque nec ullamcorper. Sed in nunc erat. Donec at metus feugiat, consequat massa in, lacinia purus. Fusce pulvinar iaculis cursus. Curabitur cursus sit amet ligula eleifend sollicitudin.
</div>
</div>
<div class="person">
<div class="photo">
<img src="img/about/bio2.jpg" alt="Severyn Kozak's photo.">
</div
><div class="bio">
<h1>Benjamin Kurtovic</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porttitor bibendum enim. Proin porttitor tortor eget scelerisque pharetra. Etiam ac arcu congue, ultricies sem a, hendrerit arcu. Duis imperdiet tellus ut arcu tincidunt, ut sagittis enim aliquam. Quisque eget magna a lacus feugiat fringilla. Etiam consequat dictum neque nec ullamcorper. Sed in nunc erat. Donec at metus feugiat, consequat massa in, lacinia purus. Fusce pulvinar iaculis cursus. Curabitur cursus sit amet ligula eleifend sollicitudin.
</div>
</div>
<div class="person">
<div class="photo">
<img src="img/about/bio3.jpg" alt="Severyn Kozak's photo.">
</div
><div class="bio">
<h1>Severyn Kozak</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porttitor bibendum enim. Proin porttitor tortor eget scelerisque pharetra. Etiam ac arcu congue, ultricies sem a, hendrerit arcu. Duis imperdiet tellus ut arcu tincidunt, ut sagittis enim aliquam. Quisque eget magna a lacus feugiat fringilla. Etiam consequat dictum neque nec ullamcorper. Sed in nunc erat. Donec at metus feugiat, consequat massa in, lacinia purus. Fusce pulvinar iaculis cursus. Curabitur cursus sit amet ligula eleifend sollicitudin.
</div>
</div>
</div>
</div>
= endblock

Yükleniyor…
İptal
Kaydet