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%;
}