diff options
Diffstat (limited to 'sass/app.scss')
-rw-r--r-- | sass/app.scss | 128 |
1 files changed, 128 insertions, 0 deletions
diff --git a/sass/app.scss b/sass/app.scss new file mode 100644 index 0000000..39726d8 --- /dev/null +++ b/sass/app.scss @@ -0,0 +1,128 @@ +body { + margin: 0; + color: black; + background-color: white; +} + +html { + font-family: Sans-Serif; +} + +.container { + max-width: 60em; + margin-left: auto; + margin-right: auto; +} + +ul.departures { + position:relative; + width:100%; + + border-width:1px 2px; + margin-bottom: 5em; + + list-style-type:none; + margin:0; + padding:0; + + > li { + display: block; + height: 3em; + width: 100%; + position: relative; + cursor: pointer; + border-bottom: 1px solid grey; + background-color: white; + + &.cancelled { + background-color: #ffe7d0; + } + } + + .line { + position: absolute; + bottom: 2px; + left: 2px; + max-width: 6em; + max-height: 3ex; + max-width: 5em; + overflow: hidden; + font-size: 140%; + background-color: #eeeeee; + font-weight: bold; + padding-left: 0.1em; + padding-right: 0.1em; + } + + .tram { + background-color:#ffcccc; + } + + .suburban { + background-color:#aaffba; + border-radius: 30px; + } + + .subway { + background-color:#aac0ff; + } + + .bus { + background-color:#eeaaee; + border-radius: 10px; + } + + .dest { + position: absolute; + bottom: 0; + left: 5em; + width: 70%; + overflow: hidden; + background-color: transparent; + font-size: 150%; + color: black; + } + + .destsuffix { + position: absolute; + top: 1px; + left: 7.6em; + width: 70%; + height: 1.2em; + overflow: hidden; + } + + .time { + position: absolute; + right: 5px; + top: 1px; + background-color: transparent; + padding-left: 0.2em; + color: black; + + .delay { + padding-right: 1ex; + color: #ff0000; + } + } + + .platform { + position: absolute; + bottom: 0; + right: 5px; + overflow: hidden; + background-color: transparent; + font-size: 140%; + font-weight: bold; + color: black; + } +} + +@media only screen and (max-width: 600px) { + ul.departures > li { + font-size: 85%; + } +} + +@media only screen and (min-width: 600px) { +} |