From 29b319e2f3a8d61b2dad5a1a911e0492e73a00a6 Mon Sep 17 00:00:00 2001 From: Blallo Date: Fri, 22 Mar 2019 18:08:01 +0100 Subject: [PATCH] Mobile-optimize css. Still bad colors. --- index.html | 1 + res/css/main.css | 44 ++++++++++++++++++++++++++++++++++---------- 2 files changed, 35 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 0f3a2a8..76f619e 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,7 @@ + Circolog diff --git a/res/css/main.css b/res/css/main.css index 7e9dcef..58e8447 100644 --- a/res/css/main.css +++ b/res/css/main.css @@ -106,8 +106,26 @@ } } +@keyframes appear-from-below { + from { + margin-top: 100%; + opacity: 0.05; + } + + to { + margin-top: 0%; + opacity: 1.0; + } +} + +@media (min-device-width: 10cm) { + body { + font-size: 25px; + } +} + * { - color: #001F3F; + box-sizing: border-box; } body .section:first-child { @@ -116,21 +134,20 @@ body .section:first-child { } body .section:not(:first-child) { - animation-name: appear-from-right; - animation-duration: 3s; - animation-timing-function: cubic-bezier(0.05, 0.05, 1.0, 1.0); + animation-name: appear-from-below; + animation-duration: 1.2s; + animation-timing-function: cubic-bezier(.27,.72,.44,1.01); } .section { - display: flex; flex-wrap: wrap; font-family: "Exo2"; - box-sizing: border-box; border: 5px solid #000; border-radius: 5px; margin-bottom: 2em; - box-shadow: 5px 10px 5px 5px #001f3f, inset 2px 2px 5px 5px #3A2A1A; + box-shadow: 5px 10px 5px 5px #2A202F, inset 2px 2px 5px 5px #3A2A1A; + overflow: hidden; } .section > div { @@ -141,11 +158,13 @@ body .section:not(:first-child) { } .section > *:nth-child(odd){ - background-color: hsla(120,100%,70%,0.7); + color: #FFDC00; + background-color: #0074D9; } .section > *:nth-child(even){ - background-color: rgba(100, 200, 200, 0.7); + color: #001F3F; + background-color: #39CCCC; } .section > * { @@ -165,6 +184,11 @@ body .section:not(:first-child) { } .container ul { + color: #001F3F; text-align: left; - padding-left: 5em; + padding-left: 5%; +} + +.pane { + max-width: 100%; }