Add Sample Works
This commit is contained in:
parent
fcf1373f23
commit
7f705d97e9
2 changed files with 113 additions and 0 deletions
58
test_data/common.css
Normal file
58
test_data/common.css
Normal 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;}
|
||||||
|
|
||||||
55
test_data/sample_home.html
Normal file
55
test_data/sample_home.html
Normal 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>
|
||||||
Loading…
Reference in a new issue