ben
/
bitshift
mirror of https://github.com/earwig/bitshift
1
1
Fork 0
Code Releases 1 Activity
A semantic search engine for source code https://bitshift.benkurtovic.com/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
377 Commits
2 Branches
8.8 MiB
 
 
 
 
 
 
Tree: 061454a9c4
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '061454a9c4'
${ noResults }
bitshift/static/sass/about.sass

140 lines
2.8 KiB
Raw Blame History 

  1. /*

  2.  Stylesheet for `templates/about.html`

  3.  */

  4. 

  5. @import mixins

  6. @import variables

  7. 

  8. $centered-section-min-width: 500px

  9. 

  10. div.bg

  11.     $img-height: 650px

  12. 

  13.     position: fixed

  14.     width: 100%

  15.     left: 0

  16.     z-index: -1

  17. 

  18.     &#img-1

  19.         background: url(../img/about/bg1.png) no-repeat

  20.         background-size: cover

  21.         height: 600px

  22.         top: -300px

  23. 

  24.     &#img-2

  25.         background: url(../img/about/bg2.png) no-repeat

  26.         background-size: cover

  27.         height: $img-height + 300

  28.         top: 1150px

  29. 

  30.     &#img-3

  31.         background: url(../img/about/bg3.png) no-repeat

  32.         background-size: cover

  33.         height: $img-height + 300

  34.         top: 2050px

  35. 

  36.     &#img-4

  37.         background: url(../img/about/bg4.png) no-repeat

  38.         background-size: cover

  39.         height: $img-height + 400

  40.         top: 3200px

  41. 

  42. div.section

  43.     background-color: white

  44.     border: 1px solid $baseColor2

  45.     margin-bottom: 200px

  46.     margin-top: 300px

  47.     padding-bottom: 80px

  48.     padding-top: 20px

  49.     overflow: hidden

  50. 

  51.     &#top

  52.         margin-top: 0px

  53. 

  54.         div#wrap

  55.             width: 100%

  56.             position: relative

  57.             padding-top: 56.782% // aspect ration, 9 / 16

  58. 

  59.             iframe#vimeo

  60.                 border: 1px solid $baseColor3

  61.                 margin-top: 40px

  62. 

  63.                 position: absolute

  64.                 top: 0

  65.                 left: 0

  66.                 height: none

  67.                 width: none

  68. 

  69.     div.centered

  70.         font-size: 110%

  71.         line-height: 150%

  72.         margin-left: auto

  73.         margin-right: auto

  74.         min-width: 500px

  75.         width: 65%

  76. 

  77.         &#how

  78.             b

  79.                 font-family: monospace

  80.                 font-size: 110%

  81. 

  82.             ul

  83.                 list-style: none

  84. 

  85.                 span

  86.                     color: $baseColor1

  87.                     font-weight: bold

  88. 

  89.         h1

  90.             color: $baseColor1

  91. 

  92.             span

  93.                 color: $baseColor2

  94. 

  95.         a

  96.             color: #727070

  97.             font-style: italic

  98.             text-decoration: none

  99. 

  100.             &:hover

  101.                 @extend .t3

  102. 

  103.                 color: #575757

  104. 

  105.         span#title

  106.             color: $baseColor1

  107.             font-weight: bold

  108. 

  109. div.person

  110.     font-size: 80%

  111.     overflow: hidden

  112. 

  113.     &#top

  114.         margin-top: 40px

  115. 

  116.     >div

  117.         $image-min-width: 100px

  118. 

  119.         display: inline-block

  120.         height: 100%

  121.         margin-bottom: 40px

  122.         vertical-align: top

  123. 

  124.         &.photo

  125.             margin-right: 40px

  126.             width: $image-min-width

  127. 

  128.             img

  129.                 display: block

  130.                 height: $image-min-width

  131.                 width: $image-min-width

  132. 

  133.         &.bio

  134.             min-width: $centered-section-min-width - $image-min-width - 50px

  135.             width: 70%

  136. 

  137.             h1

  138.                 font-size: 130%

  139.                 margin: 0