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>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circolog</title>
<link rel="stylesheet" type="text/css" href="res/css/main.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 {
@ -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%;
}