A semantic search engine for source code https://bitshift.benkurtovic.com/
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

about.sass 2.8 KiB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. /*
  2. Stylesheet for `templates/about.html`
  3. */
  4. @import mixins
  5. @import variables
  6. $centered-section-min-width: 500px
  7. div.bg
  8. $img-height: 650px
  9. position: fixed
  10. width: 100%
  11. left: 0
  12. z-index: -1
  13. &#img-1
  14. background: url(../img/about/bg1.png) no-repeat
  15. background-size: cover
  16. height: 600px
  17. top: -300px
  18. &#img-2
  19. background: url(../img/about/bg2.png) no-repeat
  20. background-size: cover
  21. height: $img-height + 300
  22. top: 1150px
  23. &#img-3
  24. background: url(../img/about/bg3.png) no-repeat
  25. background-size: cover
  26. height: $img-height + 300
  27. top: 2050px
  28. &#img-4
  29. background: url(../img/about/bg4.png) no-repeat
  30. background-size: cover
  31. height: $img-height + 400
  32. top: 3200px
  33. div.section
  34. background-color: white
  35. border: 1px solid $baseColor2
  36. margin-bottom: 200px
  37. margin-top: 300px
  38. padding-bottom: 80px
  39. padding-top: 20px
  40. overflow: hidden
  41. &#top
  42. margin-top: 0px
  43. div#wrap
  44. width: 100%
  45. position: relative
  46. padding-top: 56.782% // aspect ration, 9 / 16
  47. iframe#vimeo
  48. border: 1px solid $baseColor3
  49. margin-top: 40px
  50. position: absolute
  51. top: 0
  52. left: 0
  53. height: none
  54. width: none
  55. div.centered
  56. font-size: 110%
  57. line-height: 150%
  58. margin-left: auto
  59. margin-right: auto
  60. min-width: 500px
  61. width: 65%
  62. &#how
  63. b
  64. font-family: monospace
  65. font-size: 110%
  66. ul
  67. list-style: none
  68. span
  69. color: $baseColor1
  70. font-weight: bold
  71. h1
  72. color: $baseColor1
  73. span
  74. color: $baseColor2
  75. a
  76. color: #727070
  77. font-style: italic
  78. text-decoration: none
  79. &:hover
  80. @extend .t3
  81. color: #575757
  82. span#title
  83. color: $baseColor1
  84. font-weight: bold
  85. div.person
  86. font-size: 80%
  87. overflow: hidden
  88. &#top
  89. margin-top: 40px
  90. >div
  91. $image-min-width: 100px
  92. display: inline-block
  93. height: 100%
  94. margin-bottom: 40px
  95. vertical-align: top
  96. &.photo
  97. margin-right: 40px
  98. width: $image-min-width
  99. img
  100. display: block
  101. height: $image-min-width
  102. width: $image-min-width
  103. &.bio
  104. min-width: $centered-section-min-width - $image-min-width - 50px
  105. width: 70%
  106. h1
  107. font-size: 130%
  108. margin: 0