diff options
| author | Dominik Juelg <djuelg@gmx.de> | 2016-05-18 23:25:00 +0300 |
|---|---|---|
| committer | Dominik Juelg <djuelg@gmx.de> | 2016-05-18 23:25:00 +0300 |
| commit | 174d07667bac7f48051e4dd59c3697caebd0f25f (patch) | |
| tree | b343e378e63c99be48a3af940732d140cfda02fb | |
| parent | fb85b44ec6e780a675ce944f10dee4c7bb35fef9 (diff) | |
added mobile device support on start-screen
| -rw-r--r-- | layouts/index.html | 5 | ||||
| -rw-r--r-- | layouts/partials/head.html | 1 | ||||
| -rwxr-xr-x | layouts/partials/start-screen.svg | 2 | ||||
| -rw-r--r-- | static/css/default.css | 19 | ||||
| -rw-r--r-- | static/css/mobile.css | 62 |
5 files changed, 78 insertions, 11 deletions
diff --git a/layouts/index.html b/layouts/index.html index eb62df1..0f253eb 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -6,6 +6,11 @@ <body> <div class="wrapper"> <div class="start-screen"> + <div class="mobile"> + <div><img src="{{ .Site.Params.logo }}"></div> + <div><a href="{{ .Site.Params.button_2 }}">Playground</a></div> + <div><a href="{{ .Site.Params.button_3 }}" rel="me">About</a></div> + </div> {{ partial "start-screen.svg" . }} </div> diff --git a/layouts/partials/head.html b/layouts/partials/head.html index c19714d..6ff070a 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -10,6 +10,7 @@ {{ "<!-- Load CSS config -->" | safeHTML }} <link rel="stylesheet" href="/css/normalize.css" type="text/css"> <link rel="stylesheet" href="/css/default.css" type="text/css"> +<link rel="stylesheet" href="/css/mobile.css" type="text/css"> <link rel="stylesheet" href="/css/code-style.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/highlight.min.js"></script> diff --git a/layouts/partials/start-screen.svg b/layouts/partials/start-screen.svg index ebecb85..7948fe6 100755 --- a/layouts/partials/start-screen.svg +++ b/layouts/partials/start-screen.svg @@ -2,8 +2,6 @@ version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" - height="100%" - width="100%" viewBox="-160 0 4600 2245.7" preserveAspectRatio="xMidYMin slice"> diff --git a/static/css/default.css b/static/css/default.css index 385f395..6e3af4b 100644 --- a/static/css/default.css +++ b/static/css/default.css @@ -26,6 +26,11 @@ overflow: hidden; } +.start-screen svg { + height: 100%; + width: 100%; +} + .start-screen a { fill: #008080; } @@ -148,6 +153,10 @@ margin-top: 10px; } +.mobile { + display: none; +} + @media only screen and (orientation: portrait) { .start-screen { min-height: 200px; @@ -488,7 +497,7 @@ hr { height: auto !important; } -.publish-date { +.publish-date, .attention-message { height: 120px; width: 120px; border-radius: 50%; @@ -509,16 +518,8 @@ hr { } .attention-message { - height: 120px; - width: 120px; - border-radius: 50%; background-color: #FF7400; - text-align: center; - line-height: 1em; - color: #EFFFFF; - float: left; margin-top: -38px; - margin-right: 20px; } .attention-message h1 { diff --git a/static/css/mobile.css b/static/css/mobile.css new file mode 100644 index 0000000..e6d87ed --- /dev/null +++ b/static/css/mobile.css @@ -0,0 +1,62 @@ +/** + * + * CSS for mobile devices + */ + +@media only screen and (max-width: 500px) { + + .start-screen svg { + display: none; + height: 0; + width: 0; + } + + .start-screen { + height: 60vh; + width: 100vw; + margin: 0; + background-color: #4CABAB; + } + + .mobile { + display: inline; + } + + .mobile div { + height: 20vh; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 4px 2px -2px #333; + } + + .mobile div:first-child, .mobile div:first-child:hover { + background-color: #333; + } + + .mobile a, .mobile a:hover { + text-decoration: none; + font-size: 2em; + color: #EFFFFF !important; + } + + .mobile div:hover { + background-color: #FF7400; + } + + .mobile img { + height: 15vh; + width: 15vh; + text-align: center; + } + + .wrapper { + min-width: 320px + } + + .publish-date, .attention-message { + float: initial; + text-align: center; + margin: 0; + } +}
\ No newline at end of file |
