blallo/circolog-website
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Mobile-optimize css. Still bad colors.

Browse source
This commit is contained in:
Blallo 2019-03-22 18:08:01 +01:00
parent d285798ad8
commit 29b319e2f3
No known key found for this signature in database
GPG key ID: 0CBE577C9B72DC3F
2 changed files with 35 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
index.html
View file

@ -1,6 +1,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circolog</title> <title>Circolog</title>
<link rel="stylesheet" type="text/css" href="res/css/main.css"> <link rel="stylesheet" type="text/css" href="res/css/main.css">
<link rel="stylesheet" type="text/css" href="res/css/asciinema-player.css"> <link rel="stylesheet" type="text/css" href="res/css/asciinema-player.css">

44
res/css/main.css
View file

@ -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 { body .section:first-child {
@ -116,21 +134,20 @@ body .section:first-child {
} }
body .section:not(:first-child) { body .section:not(:first-child) {
animation-name: appear-from-right; animation-name: appear-from-below;
animation-duration: 3s; animation-duration: 1.2s;
animation-timing-function: cubic-bezier(0.05, 0.05, 1.0, 1.0); animation-timing-function: cubic-bezier(.27,.72,.44,1.01);
} }
.section { .section {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
font-family: "Exo2"; font-family: "Exo2";
box-sizing: border-box;
border: 5px solid #000; border: 5px solid #000;
border-radius: 5px; border-radius: 5px;
margin-bottom: 2em; 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 { .section > div {
@ -141,11 +158,13 @@ body .section:not(:first-child) {
} }
.section > *:nth-child(odd){ .section > *:nth-child(odd){
background-color: hsla(120,100%,70%,0.7); color: #FFDC00;
background-color: #0074D9;
} }
.section > *:nth-child(even){ .section > *:nth-child(even){
background-color: rgba(100, 200, 200, 0.7); color: #001F3F;
background-color: #39CCCC;
} }
.section > * { .section > * {
@ -165,6 +184,11 @@ body .section:not(:first-child) {
} }
.container ul { .container ul {
color: #001F3F;
text-align: left; text-align: left;
padding-left: 5em; padding-left: 5%;
}
.pane {
max-width: 100%;
} }