From 39a053477f4d0a5a052aaf09c0d64752218cc0ae Mon Sep 17 00:00:00 2001 From: Hyunchul Kim Date: Mon, 23 Nov 2020 03:32:01 +0900 Subject: [PATCH] Update style --- test_data/src/style/common.css | 159 ++++++++++++++++++++++--------- test_data/src/style/fragment.css | 0 2 files changed, 112 insertions(+), 47 deletions(-) create mode 100644 test_data/src/style/fragment.css diff --git a/test_data/src/style/common.css b/test_data/src/style/common.css index 6d33b55..5544b81 100644 --- a/test_data/src/style/common.css +++ b/test_data/src/style/common.css @@ -16,15 +16,22 @@ div#introduction {background-color: violet;} div#archive {background-color: grey;} div#frags {background-color:skyblue;} - div.frag {background:beige;} */ + div.frag {background-color:beige;} + div.image {background-color:magenta} + div.pdf object {background-color:mediumaquamarine} + div.x-empty {background-color:mediumseagreen} + */ + + /***** common *****/ - * { margin: 0; font-family: Arial, Helvetica, "돋움", sans-serif; word-break: keep-all;} + * { margin: 0; font-family: Arial, Helvetica, "돋움", sans-serif; word-break: keep-all; } a, a:hover, a:visited {color:black;} .label { font-size: 24px; letter-spacing: 2px; } + .shape {fill:none;} #menu span a, #menu span a:visited { font-size: 18px; @@ -46,8 +53,13 @@ line-height: 26px; } + .focus { + animation: rainbowLinkText 0.5s; + } + a:hover text, a:focus text, a:active text { animation-duration: 1s; animation-name: rainbowLink; animation-iteration-count: infinite; } @keyframes rainbowLink {0% {fill: #ff2a2a;} 15% {fill: #ff7a2a;} 30% {fill: #ffc52a; }45% {fill: #43ff2a; }60% {fill: #2a89ff; }75% {fill: #202082; }90% {fill: #6b2aff; } 100% {fill: #e82aff; }} + @keyframes rainbowLinkText {0% {color: #ff2a2a;} 15% {color: #ff7a2a;} 30% {color: #ffc52a; }45% {color: #43ff2a; }60% {color: #2a89ff; }75% {color: #202082; }90% {color: #6b2aff; } 100% {color: #e82aff; }} /***** mobile *****/ @@ -58,7 +70,8 @@ padding-top:120px; position:fixed; z-index:10; - text-align:center; + text-align:left; + /* padding-left:30px; */ transition: 0.3s; } @@ -69,6 +82,9 @@ margin:5px; } + div#menu>span#to_about{margin-left: 20px;} + div#menu>span#to_timeline{display: none;} /*temp*/ + div#logo_wrapper { position:absolute; left: calc(50% - 50px); @@ -84,6 +100,7 @@ img#about_icon { width:80px; } div#timeline_icon_wrapper { + display: none; position:fixed; right: 30px; bottom: 30px; @@ -134,8 +151,48 @@ } img#icon_fb, img#icon_ig { height: 40px; margin-right:20px;} + g { + animation: anim_tranparency 0.3s; + } + + /* FRAGMENT ==> AUTHOR ==> ARCHIVE DROP-DOWN */ + div#archive { + margin:10px; + } + div#archive:hover #archive_list{display: block;} + + div#archive_list { + display: none; + position: absolute; + max-height:335px; + width:200px; + overflow-y: scroll; + border: 1px solid; + z-index: 10; + } + + div#archive_list a { + display: block; + background-color: #fff; + border-top: 1px solid; + padding: 6px 6px; + } + div#archive_list a:nth-child(1) {border-top: none;} + + button#archive_button{ + width:100px; + background:#fff; + border:1px solid; + height: 30px; + } + + img#icon_archive_more {width: 16px;} + + + + /***** pc *****/ - @media ( min-width: 720px ) { + @media ( min-width: 780px ) { /* MENU */ #menu { @@ -152,9 +209,9 @@ top:35px; } /* div#menu>span{ } */ - div#menu>span#to_about { left:30px; } - div#menu>span#to_fragments { left:120px; } - div#menu>span#to_timeline { right:30px; } + div#menu>span#to_about { left:95px; } + div#menu>span#to_fragments { left:190px; } + div#menu>span#to_timeline { right:105px; } div#logo_wrapper { position:absolute; @@ -225,7 +282,7 @@ width: 300px; position: fixed; z-index: 10; - left: 30px; + left: 100px; height: calc(100% - 200px); } @@ -237,46 +294,15 @@ margin:10px; } - /* FRAGMENT ==> AUTHOR ==> ARCHIVE DROP-DOWN */ - div#archive { - margin:10px; - } - div#archive:hover #archive_list{display: block;} - - div#archive_list { - display: none; - position: absolute; - max-height:335px; - width:200px; - overflow-y: scroll; - border: 1px solid; - } - - div#archive_list a { - display: block; - background-color: #fff; - border-top: 1px solid; - padding: 6px 6px; - } - div#archive_list a:nth-child(1) {border-top: none;} - - button#archive_button{ - width:100px; - background:#fff; - border:1px solid; - height: 30px; - } - - img#icon_archive_more {width: 16px;} - + /*archive_list was here*/ /* FRAGMENT ==> CONTENTS */ div#frags{ position: absolute; /* background-color:skyblue; */ - left:400px; + left:480px; top:50px; - width: calc(100% - 450px); - height:2000px; + width: calc(100% - 530px); + /* height:2000px; */ } div.frag{ @@ -315,11 +341,50 @@ /* default */ - .image{max-width: 100%;} - .pdf object{width:640px;height: 640px;} + + div#frags>div { + margin-bottom: 30px; + padding-top: 50px; + display: inline-block; + margin-right:30px; + /* border-top: solid 1px #000; */ + vertical-align: top; + padding:20px; + } + + div#frags>a { + display:none; + } + + span.filename, figcaption { + font-style: italic; + } + + + + .image{width:80%; max-width: 600px;} + .pdf object{width:100%;height: 600px;} + .x-empty, .plain, .rtf, .unkown-file, .quicktime, video, .pdf{width:80%; max-width: 600px;} .dir::before{content:"πŸ“ ";font-size:18px;} .filename{display:block;font-family:mono;} .unkown-file::before{content:"πŸ“„ ";font-size:18px;} /* div{max-width: 640px;display:inline-block;vertical-align:top;margin:1em;padding:1em;} */ - video {width:640px;max-height:640px;} - \ No newline at end of file + video {width: 80%;max-width: 600px;} + + + @keyframes anim_tranparency { + 0% { + /* 투λͺ…도가 0, 즉, 보이지 μ•ŠμŒ*/ + opacity: 0; + } + /* 1초 κΈ°μ€€ 0.7λΆ€ν„° 보이기 μ‹œμž‘ν•¨*/ + 70% { + /* 투λͺ…도가 0, 즉, 보이지 μ•ŠμŒ*/ + opacity: 0; + } + /* 1초 κΈ°μ€€, 0.9μ΄ˆμ— μ™„μ „νžˆ λ³΄μž„*/ + 90% { + /* 투λͺ…도가 1, 즉, λ³΄μž„*/ + opacity: 1; + } + } \ No newline at end of file diff --git a/test_data/src/style/fragment.css b/test_data/src/style/fragment.css new file mode 100644 index 0000000..e69de29