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.5 MiB
 
 
 
 
 
 
Tree: feae14ab1a
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'feae14ab1a'
${ noResults }
bitshift/static/sass/about.sass

143 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: 1800px

  29. 

  30.     &#img-3

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

  32.         background-size: cover

  33.         height: $img-height + 300

  34.         top: 2650px

  35. 

  36.     &#img-4

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

  38.         background-size: cover

  39.         height: $img-height + 400

  40.         top: 4000px

  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.         h2

  55.             color: $baseColor1

  56.             margin-top: 40px

  57. 

  58.         div.video

  59.             width: 100%

  60.             position: relative

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

  62. 

  63.             iframe#vimeo

  64.                 border: 1px solid $baseColor3

  65. 

  66.                 position: absolute

  67.                 top: 0

  68.                 left: 0

  69.                 height: none

  70.                 width: none

  71. 

  72.     div.centered

  73.         font-size: 110%

  74.         line-height: 150%

  75.         margin-left: auto

  76.         margin-right: auto

  77.         min-width: 500px

  78.         width: 65%

  79. 

  80.         &#how

  81.             b

  82.                 font-family: monospace

  83.                 font-size: 110%

  84. 

  85.             ul

  86.                 list-style: none

  87. 

  88.                 span

  89.                     color: $baseColor1

  90.                     font-weight: bold

  91. 

  92.         h1

  93.             color: $baseColor1

  94. 

  95.             span

  96.                 color: $baseColor2

  97. 

  98.         a

  99.             color: #727070

  100.             font-style: italic

  101.             text-decoration: none

  102. 

  103.             &:hover

  104.                 @extend .t3

  105. 

  106.                 color: #575757

  107. 

  108.         span#title

  109.             color: $baseColor1

  110.             font-weight: bold

  111. 

  112. div.person

  113.     font-size: 80%

  114.     overflow: hidden

  115. 

  116.     &#top

  117.         margin-top: 40px

  118. 

  119.     >div

  120.         $image-min-width: 100px

  121. 

  122.         display: inline-block

  123.         height: 100%

  124.         margin-bottom: 40px

  125.         vertical-align: top

  126. 

  127.         &.photo

  128.             margin-right: 40px

  129.             width: $image-min-width

  130. 

  131.             img

  132.                 display: block

  133.                 height: $image-min-width

  134.                 width: $image-min-width

  135. 

  136.         &.bio

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

  138.             width: 70%

  139. 

  140.             h1

  141.                 font-size: 130%

  142.                 margin: 0