new file: Files/flashplayer_32_sa.exe new file: favicon.ico new file: globe.gif new file: imgs/download.png new file: imgs/zuck.jpg new file: index.html new file: other.ico new file: script.js new file: site.webmanifest new file: sitemap.html new file: styles/backround.css new file: styles/border.css new file: styles/fonts/Titillium_Web/OFL.txt new file: styles/fonts/Titillium_Web/TitilliumWeb-Black.ttf new file: styles/fonts/Titillium_Web/TitilliumWeb-Bold.ttf new file: styles/fonts/Titillium_Web/TitilliumWeb-BoldItalic.ttf new file: styles/fonts/Titillium_Web/TitilliumWeb-ExtraLight.ttf new file: styles/fonts/Titillium_Web/TitilliumWeb-ExtraLightItalic.ttf new file: styles/fonts/Titillium_Web/TitilliumWeb-Italic.ttf new file: styles/fonts/Titillium_Web/TitilliumWeb-Light.ttf new file: styles/fonts/Titillium_Web/TitilliumWeb-LightItalic.ttf new file: styles/fonts/Titillium_Web/TitilliumWeb-Regular.ttf new file: styles/fonts/Titillium_Web/TitilliumWeb-SemiBold.ttf new file: styles/fonts/Titillium_Web/TitilliumWeb-SemiBoldItalic.ttf new file: styles/fonts/webfontkit-20221027-163353/generator_config.txt new file: styles/fonts/webfontkit-20221027-163353/specimen_files/grid_12-825-55-15.css new file: styles/fonts/webfontkit-20221027-163353/specimen_files/specimen_stylesheet.css new file: styles/fonts/webfontkit-20221027-163353/stylesheet.css new file: styles/fonts/webfontkit-20221027-163353/titilliumweb-extralight-demo.html new file: styles/fonts/webfontkit-20221027-163353/titilliumweb-extralight-webfont.woff new file: styles/fonts/webfontkit-20221027-163353/titilliumweb-extralight-webfont.woff2 new file: styles/fonts/webfontkit-20221027-165950/generator_config.txt new file: styles/fonts/webfontkit-20221027-165950/specimen_files/grid_12-825-55-15.css new file: styles/fonts/webfontkit-20221027-165950/specimen_files/specimen_stylesheet.css new file: styles/fonts/webfontkit-20221027-165950/stylesheet.css new file: styles/fonts/webfontkit-20221027-165950/titilliumweb-bold-demo.html new file: styles/fonts/webfontkit-20221027-165950/titilliumweb-bold-webfont.woff new file: styles/fonts/webfontkit-20221027-165950/titilliumweb-bold-webfont.woff2 new file: styles/style.css new file: tools/2048/.gitignore new file: tools/2048/.jshintrc new file: tools/2048/CONTRIBUTING.md new file: tools/2048/LICENSE.txt new file: tools/2048/README.md new file: tools/2048/Rakefile new file: tools/2048/favicon.ico new file: tools/2048/index.html new file: tools/2048/js/animframe_polyfill.js new file: tools/2048/js/application.js new file: tools/2048/js/bind_polyfill.js new file: tools/2048/js/classlist_polyfill.js new file: tools/2048/js/game_manager.js new file: tools/2048/js/grid.js new file: tools/2048/js/html_actuator.js new file: tools/2048/js/keyboard_input_manager.js new file: tools/2048/js/local_storage_manager.js new file: tools/2048/js/tile.js new file: tools/2048/meta/apple-touch-icon.png new file: tools/webretro/cores/neocd_libretro.js new file: tools/webretro/cores/neocd_libretro.wasm new file: tools/webretro/cores/nestopia_libretro.js new file: tools/webretro/cores/nestopia_libretro.wasm new file: tools/webretro/cores/o2em_libretro.js new file: tools/webretro/cores/o2em_libretro.wasm new file: tools/webretro/cores/opera_libretro.js new file: tools/webretro/cores/opera_libretro.wasm
159 lines
2.9 KiB
Sass
159 lines
2.9 KiB
Sass
|
||
// Grid
|
||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||
|
||
// .container is main centered wrapper with a max width of 112.0rem (1120px)
|
||
.container
|
||
margin: 0 auto
|
||
max-width: 112.0rem
|
||
padding: 0 2.0rem
|
||
position: relative
|
||
width: 100%
|
||
|
||
// Using flexbox for the grid, inspired by Philip Walton:
|
||
// http://philipwalton.github.io/solved-by-flexbox/demos/grids/
|
||
// By default each .column within a .row will evenly take up
|
||
// available width, and the height of each .column with take
|
||
// up the height of the tallest .column in the same .row
|
||
.row
|
||
display: flex
|
||
flex-direction: column
|
||
padding: 0
|
||
width: 100%
|
||
|
||
&.row-no-padding
|
||
padding: 0
|
||
|
||
&> .column
|
||
padding: 0
|
||
|
||
&.row-wrap
|
||
flex-wrap: wrap
|
||
|
||
// Vertically Align Columns
|
||
// .row-* vertically aligns every .col in the .row
|
||
&.row-top
|
||
align-items: flex-start
|
||
|
||
&.row-bottom
|
||
align-items: flex-end
|
||
|
||
&.row-center
|
||
align-items: center
|
||
|
||
&.row-stretch
|
||
align-items: stretch
|
||
|
||
&.row-baseline
|
||
align-items: baseline
|
||
|
||
.column
|
||
display: block
|
||
// IE 11 required specifying the flex-basis otherwise it breaks mobile
|
||
flex: 1 1 auto
|
||
margin-left: 0
|
||
max-width: 100%
|
||
width: 100%
|
||
|
||
// Column Offsets
|
||
&.column-offset-10
|
||
margin-left: 10%
|
||
|
||
&.column-offset-20
|
||
margin-left: 20%
|
||
|
||
&.column-offset-25
|
||
margin-left: 25%
|
||
|
||
&.column-offset-33,
|
||
&.column-offset-34
|
||
margin-left: 33.3333%
|
||
|
||
&.column-offset-50
|
||
margin-left: 50%
|
||
|
||
&.column-offset-66,
|
||
&.column-offset-67
|
||
margin-left: 66.6666%
|
||
|
||
&.column-offset-75
|
||
margin-left: 75%
|
||
|
||
&.column-offset-80
|
||
margin-left: 80%
|
||
|
||
&.column-offset-90
|
||
margin-left: 90%
|
||
|
||
// Explicit Column Percent Sizes
|
||
// By default each grid column will evenly distribute
|
||
// across the grid. However, you can specify individual
|
||
// columns to take up a certain size of the available area
|
||
&.column-10
|
||
flex: 0 0 10%
|
||
max-width: 10%
|
||
|
||
&.column-20
|
||
flex: 0 0 20%
|
||
max-width: 20%
|
||
|
||
&.column-25
|
||
flex: 0 0 25%
|
||
max-width: 25%
|
||
|
||
&.column-33,
|
||
&.column-34
|
||
flex: 0 0 33.3333%
|
||
max-width: 33.3333%
|
||
|
||
&.column-40
|
||
flex: 0 0 40%
|
||
max-width: 40%
|
||
|
||
&.column-50
|
||
flex: 0 0 50%
|
||
max-width: 50%
|
||
|
||
&.column-60
|
||
flex: 0 0 60%
|
||
max-width: 60%
|
||
|
||
&.column-66,
|
||
&.column-67
|
||
flex: 0 0 66.6666%
|
||
max-width: 66.6666%
|
||
|
||
&.column-75
|
||
flex: 0 0 75%
|
||
max-width: 75%
|
||
|
||
&.column-80
|
||
flex: 0 0 80%
|
||
max-width: 80%
|
||
|
||
&.column-90
|
||
flex: 0 0 90%
|
||
max-width: 90%
|
||
|
||
// .column-* vertically aligns an individual .column
|
||
.column-top
|
||
align-self: flex-start
|
||
|
||
.column-bottom
|
||
align-self: flex-end
|
||
|
||
.column-center
|
||
align-self: center
|
||
|
||
// Larger than mobile screen
|
||
@media (min-width: 40.0rem) // Safari desktop has a bug using `rem`, but Safari mobile works
|
||
|
||
.row
|
||
flex-direction: row
|
||
margin-left: -1.0rem
|
||
width: calc(100% + 2.0rem)
|
||
|
||
.column
|
||
margin-bottom: inherit
|
||
padding: 0 1.0rem
|