Update
This commit is contained in:
Hyunchul Kim
parent
d244b6cefa
commit
37b3a5fefc
1 changed files with 291 additions and 0 deletions
291
src/style/common.css
Normal file
291
src/style/common.css
Normal file
|
|
@ -0,0 +1,291 @@
|
||||||
|
|
||||||
|
/***** 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:beige;}
|
||||||
|
|
||||||
|
/***** common *****/
|
||||||
|
* { margin: 0; font-family: Arial, Helvetica, sans-serif; word-break: keep-all;}
|
||||||
|
a, a:hover, a:visited {color:black;}
|
||||||
|
|
||||||
|
/***** mobile *****/
|
||||||
|
|
||||||
|
/* MENU */
|
||||||
|
#menu {
|
||||||
|
width:100%;
|
||||||
|
height:50px;
|
||||||
|
padding-top:120px;
|
||||||
|
position:fixed;
|
||||||
|
z-index:10;
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#menu>span{
|
||||||
|
font-size: 18px;
|
||||||
|
top:20px;
|
||||||
|
position:relative;
|
||||||
|
margin:5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
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 {
|
||||||
|
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;}
|
||||||
|
|
||||||
|
/***** pc *****/
|
||||||
|
@media ( min-width: 720px ) {
|
||||||
|
|
||||||
|
/* MENU */
|
||||||
|
#menu {
|
||||||
|
width:100%;
|
||||||
|
height:100px;
|
||||||
|
position:fixed;
|
||||||
|
z-index:10;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu>span {
|
||||||
|
position:absolute;
|
||||||
|
font-size: 18px;
|
||||||
|
top:35px;
|
||||||
|
}
|
||||||
|
/* div#menu>span{ } */
|
||||||
|
#menu>span#to_about { left:30px; }
|
||||||
|
#menu>span#to_fragments { left:120px; }
|
||||||
|
#menu>span#to_timeline { right:30px; }
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ABOUT ==> SOCIAL MEDIA */
|
||||||
|
div#wrapper_sns {
|
||||||
|
position: fixed;
|
||||||
|
bottom:50px;
|
||||||
|
left:100px;
|
||||||
|
}
|
||||||
|
img#icon_fb, img#icon_ig { height: 50px; margin-right:20px;}
|
||||||
|
|
||||||
|
/* FRAGMENT ==> AUTHOR */
|
||||||
|
div#wrapper_author {
|
||||||
|
width: 300px;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 10;
|
||||||
|
left: 30px;
|
||||||
|
height: calc(100% - 200px);
|
||||||
|
}
|
||||||
|
|
||||||
|
div#fragment_wrapper {
|
||||||
|
margin:10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#introduction {
|
||||||
|
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;
|
||||||
|
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;}
|
||||||
|
|
||||||
|
/* FRAGMENT ==> CONTENTS */
|
||||||
|
div#frags{
|
||||||
|
position: absolute;
|
||||||
|
/* background-color:skyblue; */
|
||||||
|
left:350px;
|
||||||
|
top:50px;
|
||||||
|
width: calc(100% - 400px);
|
||||||
|
height:2000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.frag{
|
||||||
|
/* background:beige; */
|
||||||
|
margin:10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* FRAGMENTS !!!TEMP!!! */
|
||||||
|
svg#authors{max-height:860px;}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* default */
|
||||||
|
.image{max-width: 100%;}
|
||||||
|
.pdf object{width:640px;height: 640px;}
|
||||||
|
.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;}
|
||||||
|
|
||||||
Loading…
Reference in a new issue