459 lines
11 KiB
CSS
459 lines
11 KiB
CSS
|
|
/***** temp color *****/
|
|
/* body {background-color: gray;}
|
|
#menu {background-color: yellow;}
|
|
#menu>span {background-color: green;}
|
|
div#logo_wrapper {background-color:cyan;}
|
|
div#about_icon_wrapper {background-color:orange;}
|
|
div#timeline_icon_wrapper {background-color: teal;}
|
|
div#margin {background-color:brown;}
|
|
div#fragments_wrapper {background-color:skyblue;}
|
|
div#about_wrapper {background-color:skyblue;}
|
|
p.col {background-color:navajowhite;}
|
|
div#wrapper_sns {background-color:palevioletred;}
|
|
div#wrapper_author {background-color: palegreen;}
|
|
div#fragment_wrapper {background-color: burlywood;}
|
|
div#introduction {background-color: violet;}
|
|
div#archive {background-color: grey;}
|
|
div#frags {background-color:skyblue;}
|
|
div.frag {background-color:beige;}
|
|
div.image {background-color:magenta}
|
|
div.pdf object {background-color:mediumaquamarine}
|
|
div.x-empty {background-color:mediumseagreen}
|
|
div#archive_exit {background-color: rgba(123, 60, 99, 0.9)};
|
|
*/
|
|
|
|
|
|
|
|
|
|
/***** common *****/
|
|
* { margin: 0; font-family: Arial, Helvetica, "돋움", sans-serif; word-break: normal; }
|
|
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;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#menu span a:hover, #menu span a:active, #menu span a:focus {
|
|
text-decoration: underline;
|
|
text-underline-position: under;
|
|
}
|
|
|
|
.col {
|
|
font-size: 15px;
|
|
line-height: 22.5px;
|
|
}
|
|
|
|
.list {
|
|
font-size: 18px;
|
|
line-height: 26px;
|
|
}
|
|
|
|
.focus {
|
|
animation: rainbowLinkText 3s;
|
|
}
|
|
|
|
a.anchor {
|
|
display: block;
|
|
position: relative;
|
|
visibility: hidden;
|
|
}
|
|
|
|
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 *****/
|
|
|
|
/* MENU */
|
|
#menu {
|
|
width:100%;
|
|
height:50px;
|
|
padding-top:120px;
|
|
position:fixed;
|
|
z-index:10;
|
|
text-align:left;
|
|
/* padding-left:30px; */
|
|
transition: 0.3s;
|
|
}
|
|
|
|
div#menu>span{
|
|
font-size: 18px;
|
|
top:20px;
|
|
position:relative;
|
|
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);
|
|
top: 10px;
|
|
}
|
|
img#logo_foh { width:100px; }
|
|
|
|
div#about_icon_wrapper {
|
|
position:fixed;
|
|
left: 10px;
|
|
top: 50px;
|
|
}
|
|
img#about_icon { width:80px; }
|
|
|
|
div#timeline_icon_wrapper {
|
|
display: none;
|
|
position:fixed;
|
|
right: 30px;
|
|
bottom: 30px;
|
|
}
|
|
img#timeline_icon { width:100px; }
|
|
|
|
div#margin {
|
|
position:relative;
|
|
height:180px;
|
|
}
|
|
|
|
div#wrapper_author {
|
|
position:relative;
|
|
padding:15px;
|
|
}
|
|
|
|
div#contents {
|
|
position:relative;
|
|
height:150px;
|
|
padding:20px;
|
|
}
|
|
|
|
svg#author_frag {
|
|
max-height: 400px;
|
|
/* width:100% */
|
|
}
|
|
|
|
/* ABOUT ==> CODE OF CONDUCT */
|
|
a#wrapper_coc{
|
|
display:block;
|
|
width:120px;
|
|
overflow-x: visible;
|
|
margin-top:30px;
|
|
margin-bottom:30px;
|
|
text-decoration: none;
|
|
}
|
|
img#icon_coc {
|
|
width: 80px;
|
|
margin:10px;
|
|
}
|
|
|
|
/* ABOUT ==> SOCIAL MEDIA */
|
|
div#wrapper_sns {
|
|
bottom:50px;
|
|
left:100px;
|
|
margin-top: 50px;
|
|
padding-bottom: 50px;
|
|
}
|
|
img#icon_fb, img#icon_ig { height: 40px; margin-right:20px;}
|
|
|
|
g {
|
|
animation: anim_tranparency 0.3s;
|
|
}
|
|
|
|
/* FRAGMENT ==> AUTHOR ==> ARCHIVE DROP-DOWN */
|
|
|
|
div#archive_exit {
|
|
top:0px;
|
|
z-index: 99;
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
div#archive {
|
|
margin:0px;
|
|
position: fixed;
|
|
bottom: 0px;
|
|
width:100%;
|
|
z-index: 100;
|
|
}
|
|
|
|
div#archive_list {
|
|
display: none;
|
|
position: absolute;
|
|
max-height:335px;
|
|
width:100%;
|
|
overflow-y: scroll;
|
|
border: 1px solid;
|
|
bottom: 40px;
|
|
/* z-index: 10; */
|
|
background:#fff;
|
|
}
|
|
|
|
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:100%;
|
|
background:#fff;
|
|
border:1px solid;
|
|
height: 40px;
|
|
padding: 0px;
|
|
}
|
|
|
|
img#icon_archive_more {width: 16px;}
|
|
|
|
|
|
a.anchor {
|
|
top: -50px;
|
|
}
|
|
|
|
/***** pc *****/
|
|
@media ( min-width: 780px ) {
|
|
|
|
/* MENU */
|
|
#menu {
|
|
width:100%;
|
|
height:100px;
|
|
position:fixed;
|
|
z-index:10;
|
|
padding:0px;
|
|
}
|
|
|
|
div#menu>span {
|
|
position:absolute;
|
|
font-size: 18px;
|
|
top:35px;
|
|
}
|
|
/* div#menu>span{ } */
|
|
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;
|
|
left: calc(50% - 70px);
|
|
top: 10px;
|
|
}
|
|
|
|
img#logo_foh { width:140px; }
|
|
|
|
div#about_icon_wrapper {
|
|
position:absolute;
|
|
left: calc(50% - 200px);
|
|
top: 50px;
|
|
}
|
|
img#about_icon { width:100px; }
|
|
|
|
div#timeline_icon_wrapper {
|
|
position:fixed;
|
|
right: 30px;
|
|
bottom: 30px;
|
|
}
|
|
img#timeline_icon { width:140px; }
|
|
|
|
|
|
/* COMMON CONTENT AREA */
|
|
div#margin {
|
|
position:relative;
|
|
height:150px;
|
|
}
|
|
div#contents {
|
|
position:relative;
|
|
height:150px;
|
|
padding:50px;
|
|
}
|
|
|
|
/* HOME ==> FRAGMENTS */
|
|
div#fragments_wrapper {
|
|
height:calc(100vh - 250px);
|
|
}
|
|
|
|
/* ABOUT ==> CONTENTS */
|
|
div#about_wrapper {
|
|
margin:50px;
|
|
}
|
|
|
|
p.col {
|
|
display:inline-block;
|
|
width:100%;
|
|
margin-bottom: 50px;
|
|
}
|
|
p.col:nth-child(3) {margin-bottom: 100px;}
|
|
|
|
/* ABOUT ==> CODE OF CONDUCT */
|
|
a#wrapper_coc{
|
|
display:block;
|
|
width:120px;
|
|
overflow-x: visible;
|
|
margin-top:30px;
|
|
text-decoration: none;
|
|
}
|
|
img#icon_coc {
|
|
width: 100px;
|
|
margin:10px;
|
|
}
|
|
|
|
/* FRAGMENT ==> AUTHOR */
|
|
div#wrapper_author {
|
|
width: 300px;
|
|
position: fixed;
|
|
z-index: 10;
|
|
left: 100px;
|
|
height: calc(100% - 200px);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
div#fragment_wrapper {
|
|
margin:10px;
|
|
}
|
|
|
|
div#fragment_wrapper > img {
|
|
width: fit-content;
|
|
min-width: 100px;
|
|
}
|
|
|
|
div#introduction {
|
|
margin:10px;
|
|
}
|
|
|
|
/* FRAGMENT ==> AUTHOR ==> ARCHIVE DROP-DOWN */
|
|
div#archive {
|
|
width:140px;
|
|
top: 100px;
|
|
right: 115px;
|
|
bottom: unset;
|
|
}
|
|
|
|
div#archive:hover #archive_list{
|
|
display: block;
|
|
}
|
|
|
|
div#archive_list {
|
|
bottom:auto;
|
|
top:30px;
|
|
width:300px;
|
|
right:0px;
|
|
/* z-index: 10; */
|
|
}
|
|
button#archive_button{
|
|
width:100%;
|
|
background:#fff;
|
|
border:1px solid;
|
|
height: 30px;
|
|
}
|
|
|
|
/* img#icon_archive_more {width: 16px;} */
|
|
|
|
|
|
|
|
/* FRAGMENT ==> CONTENTS */
|
|
div#frags{
|
|
position: absolute;
|
|
/* background-color:skyblue; */
|
|
left:480px;
|
|
top:50px;
|
|
width: calc(100% - 530px);
|
|
/* height:2000px; */
|
|
}
|
|
|
|
div.frag{
|
|
/* background:beige; */
|
|
margin:10px;
|
|
}
|
|
|
|
div.png, div.jpeg {
|
|
/* max-height:200px;
|
|
max-width: 1000px; */
|
|
}
|
|
|
|
a.anchor {
|
|
top: -200px;
|
|
}
|
|
|
|
}
|
|
|
|
@media ( min-width: 1080px ) {
|
|
/* ABOUT */
|
|
p.col:nth-child(1) {margin-left: 0px;}
|
|
|
|
p.col {
|
|
display:inline-block;
|
|
margin-left: 4%;
|
|
width:30%;
|
|
vertical-align:top;
|
|
}
|
|
|
|
/* ABOUT ==> SOCIAL MEDIA */
|
|
div#wrapper_sns {
|
|
position: fixed;
|
|
bottom:50px;
|
|
left:100px;
|
|
}
|
|
img#icon_fb, img#icon_ig { height: 50px; margin-right:20px;}
|
|
|
|
|
|
div#frags>div {
|
|
margin-right:30px;
|
|
max-width: 450px;
|
|
}
|
|
}
|
|
|
|
|
|
/* default */
|
|
|
|
div#frags>div {
|
|
margin-bottom: 30px;
|
|
padding-top: 50px;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
padding:20px;
|
|
}
|
|
|
|
div#frags>a {
|
|
display:none;
|
|
}
|
|
|
|
span.filename, figcaption {
|
|
font-style: italic;
|
|
}
|
|
|
|
figure img{width:100%; max-width: calc(100vw - 80px)}
|
|
/* .pdf{width:100%; max-width: calc(100vw - 80px); height: 600px;}
|
|
.x-empty, .plain, .rtf, .unkown-file, .quicktime, video, .pdf{width:100%; max-width: calc(100vw - 80px)} */
|
|
video {width:100%; max-width: calc(100vw - 80px)}
|
|
.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;} */
|
|
/* .pdf object{width:100%; height: 450px;} */
|
|
.x-empty, .plain, .rtf, .unkown-file, .quicktime, video, .pdf{width:100%; max-width: calc(100vw - 80px);}
|
|
|
|
|
|
@keyframes anim_tranparency {
|
|
0% {
|
|
/* 투명도가 0, 즉, 보이지 않음*/
|
|
opacity: 0;
|
|
}
|
|
/* 1초 기준 0.7부터 보이기 시작함*/
|
|
70% {
|
|
/* 투명도가 0, 즉, 보이지 않음*/
|
|
opacity: 0;
|
|
}
|
|
/* 1초 기준, 0.9초에 완전히 보임*/
|
|
90% {
|
|
/* 투명도가 1, 즉, 보임*/
|
|
opacity: 1;
|
|
}
|
|
} |