Add Sample Works

This commit is contained in:
Hyunchul Kim 2020-11-09 01:25:18 +09:00
parent fcf1373f23
commit 7f705d97e9
2 changed files with 113 additions and 0 deletions

58
test_data/common.css Normal file
View file

@ -0,0 +1,58 @@
* { 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;}

View file

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Generated with distribusi https://git.vvvvvvaria.org/varia/distribusi -->
<meta name="generator" content="distribusi" />
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="https://frog.dianaband.info/src/style/common.css" />
</head>
<body>
<div>
<div id="menu">
<div id="logo_wrapper" class="svg_wrapper">
<img id="logo_foh"src="https://frog.dianaband.info/src/img/logo.svg" alt="환대의 조각 로고">
</div>
<div id="about_icon_wrapper" class="svg_wrapper">
<img id="about_icon"src="https://frog.dianaband.info/src/img/icon_about.svg" alt="각진 꽃 모양 어바웃 버튼">
</div>
<div id="timeline_icon_wrapper" class="svg_wrapper">
<img id="about_icon"src="https://frog.dianaband.info/src/img/icon_timeline.svg" alt="구름 모양 타임라인 버튼">
</div>
<span id="to_about">
<a href="">
ABOUT
</a>
</span>
<span id="to_fragments">
<a href="">
FRAGMENTS
</a>
</span>
<span id="to_timeline">
<a href="">
TIMELINE
</a>
</span>
</div>
<div id="margin">
<!-- to avoid overlapping -->
</div>
<div id="contents">
<!-- part generated by distribusi begins-->
<div id="folder" class="dir"><a href='grape'>grape/</a></div>
<div id="folder" class="dir"><a href='fig'>fig/</a></div>
<div id="folder" class="dir"><a href='carrot'>carrot/</a></div>
<div id="" class="octet-stream"><a href='.DS_Store'>.DS_Store</a><span class="filename">.DS_Store</span></div>
</div>
<!-- part generated by distribusi ends-->
</div>
</body>
</html>