[wip]

北方生き物図鑑

css/kitagata_creature_encyclopedia.css

@@ -1,274 +1,49 @@
-.main_contents {
-    width: 100%;
-}
-
-.main_content {
-    margin-top: 20px;
-    width: 100%
-}
-
-.title_wrapper {
-    display: flex;
-    justify-content: center;
-    margin-bottom: 32px;
-}
-
-.title_text_blue {
-    color: rgb(0 112 192);
-    font-weight: bold;
-}
-
-.title_text {
-    font-size: 40px;
-    font-weight: bold;
-}
-
-.explanation {
-    display: flex;
-    justify-content: center;
-    width: 100%;
-}
-
-.character_image_block_left {
-    width: 20%;
-}
-
-.character_image_block_right {
-    width: 20%;
-}
-
-.character_image {
-    width: 100%;
-}
-
-.explanation_text_block {
-    width: 60%;
-}
-
-.explanation_text_wrapper {
-    text-align: center;
-    line-height: 40px;
-}
-
-.explanation_text {
-    font-size: 28px;
-}
-
-.explanation_text_red {
-    color: rgb(255 0 0);
-}
-
-.plantsAnimals_block {
-    width: 100%;
-}
-
-.plantsAnimals_wrapper {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
+.main {
+    margin-top: 16px;
 }
 
-.tpl_plantsAnimals_block {
+.overview {
     margin-bottom: 20px;
-    width: 48%;
-}
-
-.spring_plantsAnimals_block {
-    position: relative;
-    /*background-image: url("../css/img/kitagata_creature_encyclopedia/creature/spring/spring.png");*/
-}
-
-.spring_plansAnimals_list {
-    background: center/100% repeat-y url("../css/img/kitagata_creature_encyclopedia/creature/spring/spring.png");
-    position: relative;
-    display: flex;
-    flex-wrap: wrap;
-    width: 100%;
-}
-
-.spring_plansAnimals_bloom_left {
-    position: absolute;
-    top: 20px;
-    z-index: 1;
-    width: 10%;
-}
-
-.spring_plansAnimals_bloom_upperLow_1 {
-    position: absolute;
-    top: 110px;
-    left: 100px;
-    z-index: 1;
-    width: 10%;
-}
-
-.spring_plansAnimals_bloom_upperLow_2 {
-    position: absolute;
-    top: 110px;
-    right: 50px;
-    z-index: 1;
-    width: 10%;
-}
-
-.spring_plansAnimals_bloom_middleLow_1 {
-    position: absolute;
-    top: 300px;
-    left: 50px;
-    z-index: 1;
-    width: 10%;
-}
-
-.spring_plansAnimals_bloom_middleLow_2 {
-    position: absolute;
-    top: 300px;
-    right: -5px;
-    z-index: 1;
-    width: 10%;
-}
-
-
-.spring_plansAnimals_bloom_lowerLow_1 {
-    position: absolute;
-    top: 510px;
-    left: 100px;
-    z-index: 1;
-    width: 10%;
-}
-
-.spring_plansAnimals_bloom_lowerLow_2 {
-    position: absolute;
-    top: 510px;
-    right: -5px;
-    z-index: 1;
-    width: 10%;
-}
-
-.spring_bloom_image {
     width: 100%;
 }
 
-.summer_plantsAnimals_backgroundColor {
-    position: relative;
-
-    /*background-image: url("../css/img/kitagata_creature_encyclopedia/creature/summer/summer.png");*/
-}
-
-.summer_plansAnimals_list {
-    background: 100% center/100% repeat-y url("../css/img/kitagata_creature_encyclopedia/creature/summer/summer.png");
-    position: relative;
-    display: flex;
-    flex-wrap: wrap;
-    width: 100%;
+.seasonalCreatures_title {
+    margin-bottom: 16px;
 }
 
-.summer_plansAnimals_grass_lowerLow {
+.seasonalCreatures_title::before {
+    content: '';
+    width: 94%;
+    height: 4px;
+    display: inline-block;
+    background-color: gray;
     position: absolute;
-    top: 460px;
-    left: -10px;
-    z-index: 1;
-    width: 10%;
+    top: 148px;
 }
 
-.autumn_plantsAnimals_backgroundColor {
-    position: relative;
-    /*background-image: url("../css/img/kitagata_creature_encyclopedia/creature/autumn/autumn.png");*/
+.seasonalCreatures_titleText {
+    font-size: 24px;
+    font-weight: bold;
 }
 
-.autumn_plansAnimals_list {
-    background: 100% center/100% repeat-y url(../css/img/kitagata_creature_encyclopedia/creature/autumn/autumn.png);
-    position: relative;
+.creatureList_block {
     display: flex;
     flex-wrap: wrap;
     width: 100%;
 }
 
-.autumn_plansAnimals_bloom_lowerLow_2 {
-    position: absolute;
-    top: 540px;
-    right: -20px;
-    z-index: 1;
-    width: 10%;
-}
-
-.winter_plantsAnimals_backgroundColor {
-    position: relative;
-
-    /*background-image: url("../css/img/kitagata_creature_encyclopedia/creature/winter/winter.png");*/
-}
-
-.winter_plansAnimals_list {
-    background: 100% center/100% repeat-y url("../css/img/kitagata_creature_encyclopedia/creature/winter/winter.png");
-    position: relative;
+.creature_block {
     display: flex;
-    flex-wrap: wrap;
-    width: 100%;
-}
-
-.winter_plansAnimals_snowman_left {
-    position: absolute;
-    top: 520px;
-    left: -10px;
-    z-index: 1;
-    width: 10%;
-}
-
-.winter_plansAnimals_snowman_right {
-    position: absolute;
-    top: 520px;
-    right: -5px;
-    z-index: 1;
-    width: 10%;
-}
-
-.plantsAnimals_text_block {
-    margin-bottom: 16px;
-    font-size: 20px;
-    font-weight: bold;
-}
-
-.plantsAnimals_text_red {
-    font-size: 26px;
-    color: rgb(255,102,204);
-}
-
-.plantsAnimals_text_green {
-    font-size: 26px;
-    color: rgb(84,130,53);
-}
-
-.plantsAnimals_text_orange {
-    font-size: 26px;
-    color: rgb(237,125,49);
-}
-
-.plantsAnimals_text_blue {
-    font-size: 26px;
-    color: rgb(91,155,213);
-}
-
-/*.tpl_plansAnimals_list {*/
-/*    position: relative;*/
-/*    display: flex;*/
-/*    flex-wrap: wrap;*/
-/*    width: 100%;*/
-/*}*/
-
-.tpl_plansAnimals_explanation_block {
-    width: 20%;
+    align-items: center;
+    justify-content: space-around;
+    margin-bottom: 8px;
+    width: 50%;
 }
 
-.tpl_plansAnimals_image_block {
-    width: 100%;
+.creatureImage_block {
+    width: 50%;
 }
 
-.plansAnimals_image {
-    height: 50px;
+.creatureImage {
     width: 100%;
 }
-
-.tpl_plansAnimals_text_block {
-    width: 100%;
-}
-
-.tpl_plansAnimals_text {
-    font-size: 12px;
-}