Alyssa Chan alyssachanspace
alyssachanspace
/ font.css
Last active
February 7, 2017 03:24
The font CSS property is either a shorthand property for setting font-style, font-variant, font-weight, font-size, line-height and font-family, or a way to set the element's font to a system font, using specific keywords.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* font-size font-family */ | |
| font: 1em "Open Sans", sans-serif; | |
| /* font-style font-size font-family */ | |
| font: italic 2em "Open Sans", sans-serif; | |
| /* font-style font-variant font-weight font-size/line-height font-family */ | |
| font: italic small-caps bolder 16px/3 cursive; | |
| /* font-style font-variant font-weight font-stretch font-size/line-height font-family */ |
alyssachanspace
/ bootstrap-embed-responsive.html
Last active
August 19, 2017 15:44
Embed video responsively by using Bootstrap.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- 16:9 aspect ratio --> | |
| <div class="embed-responsive embed-responsive-16by9"> | |
| <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/D6Ac5JpCHmI"></iframe> | |
| </div> | |
| <!-- 4:3 aspect ratio --> | |
| <div class="embed-responsive embed-responsive-4by3"> | |
| <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/D6Ac5JpCHmI"></iframe> | |
| </div> |
alyssachanspace
/ inline-embed-responsive-video.html
Last active
August 19, 2017 15:44
Inline embed video responsively.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <p style="position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0;"> | |
| <iframe style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 0 none;" src="https://www.youtube.com/embed/D6Ac5JpCHmI" allowfullscreen></iframe> | |
| </p> |
alyssachanspace
/ embed-responsive-video.html
Last active
February 20, 2017 06:58
HTML code of embedding video responsively.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!--Embed YouTube Video--> | |
| <div class="video-container"> | |
| <iframe width="560" height="315" src="https://www.youtube.com/embed/D6Ac5JpCHmI" allowfullscreen></iframe> | |
| </div> | |
| <!--Embed Vimeo Video--> | |
| <div class="video-container"> | |
| <iframe src="https://player.vimeo.com/video/158050352" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> | |
| </div> |
alyssachanspace
/ embed-responsive-video.css
Created
February 2, 2017 18:25
Style sheet of embedding video responsively.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .video-container { | |
| position: relative; | |
| padding-bottom: 56.25%; | |
| padding-top: 30px; | |
| height: 0; | |
| overflow: hidden; | |
| } | |
| .video-container iframe, | |
| .video-container object, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <a href="#" class="back-to-top">回到頁首</a> | |
| <script> | |
| jQuery(document).ready(function() { | |
| var offset = 220; | |
| var duration = 500; | |
| jQuery(window).scroll(function() { | |
| if (jQuery(this).scrollTop() > offset) { | |
| jQuery('.back-to-top').fadeIn(duration); | |
| } else { | |
| jQuery('.back-to-top').fadeOut(duration); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .back-to-top { | |
| display:none; | |
| position: fixed; | |
| bottom: 2em; | |
| right: 0px; | |
| text-decoration: none; | |
| color: #000000; | |
| background-color: rgba(235, 235, 235, 0.80); | |
| font-size: 12px; | |
| padding: 1em; |
alyssachanspace
/ notosanssc.css
Created
February 2, 2017 18:01
Noto is a font family that aims to support all languages in the world. This is the Sans Simplified Chinese family. It has Thin, Light, Regular, Medium, Bold and Black styles. For more information about Noto, go to google.com/get/noto. Noto Sans SC has been subsetted to cover all the Chinese characters listed in China’s 通用规范汉字表 (Tōngyòng Guīfàn H…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * Noto Sans SC (Chinese Simplified) http://www.google.com/fonts/earlyaccess | |
| */ | |
| @font-face { | |
| font-family: 'Noto Sans SC'; | |
| font-style: normal; | |
| font-weight: 100; | |
| src: url(//fonts.gstatic.com/ea/notosanssc/v1/NotoSansSC-Thin.woff2) format('woff2'), | |
| url(//fonts.gstatic.com/ea/notosanssc/v1/NotoSansSC-Thin.woff) format('woff'), | |
| url(//fonts.gstatic.com/ea/notosanssc/v1/NotoSansSC-Thin.otf) format('opentype'); |
alyssachanspace
/ cwtexhei.css
Created
February 2, 2017 17:59
cwTeXHei font (Chinese: 黑體) is derived from the cwTeX Traditional Chinese Type 1 fonts made by Tsong-Min Wu, Tsong-Huey Wu and Edward G.J. Lee.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * cwTeXHei (Chinese-traditional) http://www.google.com/fonts/earlyaccess | |
| */ | |
| @font-face { | |
| font-family: 'cwTeXHei'; | |
| font-style: normal; | |
| font-weight: 500; | |
| src: url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.eot); | |
| src: url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.eot?#iefix) format('embedded-opentype'), | |
| url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.woff2) format('woff2'), |
alyssachanspace
/ cwtexming.css
Created
February 2, 2017 17:58
cwTeXMing font (Chinese: 明體) is derived from the cwTeX Traditional Chinese Type 1 fonts made by Tsong-Min Wu, Tsong-Huey Wu and Edward G.J. Lee.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * cwTeXMing (Chinese Traditional) http://www.google.com/fonts/earlyaccess | |
| */ | |
| @font-face { | |
| font-family: 'cwTeXMing'; | |
| font-style: normal; | |
| font-weight: 500; | |
| src: url(//fonts.gstatic.com/ea/cwtexming/v3/cwTeXMing-zhonly.eot); | |
| src: url(//fonts.gstatic.com/ea/cwtexming/v3/cwTeXMing-zhonly.eot?#iefix) format('embedded-opentype'), | |
| url(//fonts.gstatic.com/ea/cwtexming/v3/cwTeXMing-zhonly.woff2) format('woff2'), |
NewerOlder