58 lines
1.6 KiB
CSS
58 lines
1.6 KiB
CSS
* { margin: 0; font-family: Arial, Helvetica, sans-serif; }
|
|
|
|
/***** mobile *****/
|
|
@media ( min-width: 720px ) {
|
|
#menu {
|
|
width:100%;
|
|
height:100px;
|
|
background-color:yellow;
|
|
position:fixed;
|
|
}
|
|
|
|
#menu>span {
|
|
font-size: 18px;
|
|
background-color:green;
|
|
top:35px;
|
|
}
|
|
div#menu>span{ position:absolute; }
|
|
#menu>span#to_about { left:30px; }
|
|
#menu>span#to_fragments { left:120px; }
|
|
#menu>span#to_timeline { right:30px; }
|
|
|
|
a, a:hover, a:visited {
|
|
color:black;
|
|
}
|
|
|
|
div#logo_wrapper {
|
|
position:absolute;
|
|
left: calc(50% - 70px);
|
|
top: 10px;
|
|
background-color:cyan;
|
|
}
|
|
img#logo_foh { width:140px; }
|
|
|
|
div#about_icon_wrapper {
|
|
position:absolute;
|
|
left: calc(50% - 200px);
|
|
top: 50px;
|
|
background-color:orange;
|
|
}
|
|
img#about_icon { width:100px; }
|
|
|
|
div#timeline_icon_wrapper {
|
|
position:fixed;
|
|
right: 30px;
|
|
bottom: 30px;
|
|
background-color:teal;
|
|
}
|
|
img#timeline_icon { width:140px; }
|
|
}
|
|
|
|
.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;}
|
|
|