Mercurial > hgrepos > hgweb.cgi > skipweb

changeset 3813:71785b6d57ac

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
changed design(nav,h1,explanation)
author Fumichan <c116092@h.koeki-u.ac.jp>
date Sat, 02 Feb 2019 15:31:06 +0900
parents f26697bf28c7
children b9bace18001f
files css/main.css index.html oasis/oasis.html shuzai/index.html shuzai/trad/trad.html
diffstat 5 files changed, 156 insertions(+), 129 deletions(-) [+]
line wrap: on
line diff
--- a/css/main.css	Sat Feb 02 12:48:06 2019 +0900
+++ b/css/main.css	Sat Feb 02 15:31:06 2019 +0900
@@ -1,7 +1,6 @@
 /* SKIP - Shonai Koeki Information Project - main style sheet */
 
 /* body */
-
 body{
     margin:0;
     padding:0;
@@ -10,7 +9,6 @@
 
 
 /* header */
-
 header{
 	padding-top: 50px;
 	text-align: center;
@@ -23,38 +21,68 @@
 
 
 /* nav */
-
-nav{
-  border-top: 2px solid orange;
-  border-bottom: 2px solid orange;
-  margin: 20px 0;
-}
-nav ul{
-  display: table;
-  margin: 0 auto;
-  padding: 0;
-  width: 80%;
-  text-align: center;
+@media only screen and (min-width:601px) {
+  nav{
+    border-top: 2px solid orange;
+    border-bottom: 2px solid orange;
+    margin: 10px 0;
+  }
+  nav ul{
+    display: table;
+    margin: 0 auto;
+    padding: 0;
+    width: 80%;
+    text-align: center;
+  }
+  nav ul li{
+    display: table-cell;
+    min-width: 150px;
+    border-right: 2px solid orange;
+  }
+  nav ul li:first-child{
+    border-left: 2px solid orange;
+  }
+  nav ul li a{
+    display: block;
+    width: 100%;
+    padding: 10px 0;
+    text-decoration: none;
+    color: #000;
+    font-size: large;
+  }
+  nav ul li a:hover{
+    background-color:#F8E750;
+    border-bottom: 0 solid #F8E750;
+  }
 }
-nav ul li{
-  display: table-cell;
-  min-width: 150px;
-  border-right: 2px solid orange;
-}
-nav ul li:first-child{
-  border-left: 2px solid orange;
-}
-nav ul li a{
-  display: block;
-  width: 100%;
-  padding: 10px 0;
-  text-decoration: none;
-  color: #000;
-  font-size: large;
-}
-nav ul li a:hover{
-  background-color:#F8E750;
-  border-bottom: 0 solid #F8E750;
+
+@media only screen and (max-width:600px) {
+  nav{
+    margin: 10px 2em;
+  }
+  nav ul {
+    padding: 0;
+    position: relative;
+  }
+  nav ul li {
+    color: black;
+    border-left: solid 8px orange;
+    background: white;
+    margin-bottom: 5px;
+    line-height: 1.5;
+    padding: 0.5em;
+    list-style-type: none!important;
+  }
+  nav ul li a{
+    display: block;
+    width: 100%;
+    text-decoration: none;
+    margin: 0 10px;
+    color: #000;
+  }
+  nav ul li:hover{
+    background-color:#F8E750;
+  }
 }
 
 
@@ -64,8 +92,17 @@
 }
 
 
+/* h1 */
+h1 {
+    padding: 0.5em 1em;
+    margin: 1em 0;
+    background: #fbfbfb;
+    border-left: solid 6px #5bb7ae;
+    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33);
+}
+
+
 /* h2 */
-
 h2 {
   position: relative;
   padding-left: 25px;
@@ -93,22 +130,21 @@
 }
 
 /* section explanation */
+.explanation {
+  background: #fff;
+  border: 5px double #4cb;
+  border-radius: 10px;
+  padding: 0.5em 1em;
+  margin: 2em 2ex 4em 2ex;
+}
 
-.explanation {
-    background: #fff;
-    border: 5px double #4cb;
-    border-radius: 10px;
-    padding: 0.5em 1em;
-    margin: 2em 2em;
+
+/* img */
+img.photo {
+    max-width: 100%;
 }
 
 /*
-p.mimg {
-    float: left;
-    margin-right: 2px;
-    margin-bottom: 1px;
-}
-
 a.tlink{
     text-align: right;
     background-color: white;
--- a/index.html	Sat Feb 02 12:48:06 2019 +0900
+++ b/index.html	Sat Feb 02 15:31:06 2019 +0900
@@ -17,12 +17,11 @@
 
     <body>
 
-        <!--#include virtual = "/navi.html"-->
-
         <header>
             <img src="img/skiplogo.png" alt="SKIP - Shonai Koeki Information Project -">
         </header>
 
+        <!--#include virtual = "/navi.html"-->
 
         <section class="contents">
             <h2>SKIPとは</h2>
--- a/oasis/oasis.html	Sat Feb 02 12:48:06 2019 +0900
+++ b/oasis/oasis.html	Sat Feb 02 15:31:06 2019 +0900
@@ -17,18 +17,16 @@
 
     <body>
 
-        <!--#include virtual = "/navi.html"-->
-
         <header>
-            <img src="../img/skiplogo.png" alt="SKIP - Shonai Koeki Information Project -">
+          <img class="kamo" src="../img/skiplogo.png" alt="カモンくん">
         </header>
 
+        <!--#include virtual = "/navi.html"-->
 
         <section class="contents">
 
           <h1>
-            <img class="kamo" src="skip-kamo-small.png" alt="カモンくん">
-酒田みなとオアシスまつり
+          酒田みなとオアシスまつり
           </h1>
 
           <h2>記事一覧</h2>
@@ -48,7 +46,7 @@
 
           <h2 id="2017">2017年</h2>
           <section class="explanation">
-            <p><a href="imgp5351.jpg"><img class="mimg" src="imgp5351_2.jpg"></a></p>
+            <p><a href="imgp5351.jpg"><img class="photo" src="imgp5351_2.jpg"></a></p>
             <h3><a href="https://skip.koeki-prj.org/event/oasis2017/oasis2017.html">
             ゲームはこちらのページで遊べます</a></h3>
 
--- a/shuzai/index.html	Sat Feb 02 12:48:06 2019 +0900
+++ b/shuzai/index.html	Sat Feb 02 15:31:06 2019 +0900
@@ -10,12 +10,11 @@
 
   <body>
 
-    <!--#include virtual = "/navi.html"-->
-
     <header>
       <img src="../img/skiplogo.png" alt="SKIP - Shonai Koeki Information Project -">
     </header>
 
+        <!--#include virtual = "/navi.html"-->
 
     <section class="contents">
 
--- a/shuzai/trad/trad.html	Sat Feb 02 12:48:06 2019 +0900
+++ b/shuzai/trad/trad.html	Sat Feb 02 15:31:06 2019 +0900
@@ -1,64 +1,63 @@
 <!DOCTYPE html>
 <html lang="ja">
-<head>
-<title>伝統芸能</title>
-<style type="text/css">
-<!--
--->
-</style>
-<link rel="stylesheet" type="text/css" href="../../css/main.css">
-<link rel="stylesheet" href="https://www.yatex.org/gitbucket/KoekiBrandingPJ/Loremap/raw/master/src/colorbox/example3/colorbox.css" />
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-<script src="https://www.yatex.org/gitbucket/KoekiBrandingPJ/Loremap/raw/master/src/colorbox/jquery.colorbox-min.js"></script>
-<link rel="stylesheet" href="https://www.yatex.org/gitbucket/KoekiBrandingPJ/Loremap/raw/master/src/leaflet/leaflet.css" />
-<script src="https://www.yatex.org/gitbucket/KoekiBrandingPJ/Loremap/raw/master/src/leaflet/leaflet.js"></script>
-<script src="https://www.yatex.org/gitbucket/KoekiBrandingPJ/Loremap/raw/master/src/leaflet/leaflet-sidebar.min.js"></script>
-<link rel="stylesheet" href="https://www.yatex.org/gitbucket/KoekiBrandingPJ/Loremap/raw/master/src/leaflet/leaflet-sidebar.min.css" />
-<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
-<script src="https://www.yatex.org/gitbucket/KoekiBrandingPJ/Loremap/raw/master/src/leaflet/leaflet-omnivore.min.js"></script>
-<!-- <script src="../src/leaflet/leaflet-omnivore.js"></script> -->
+  <head>
+    <title>伝統芸能</title>
+    <link rel="stylesheet" type="text/css" href="../../css/main.css">
+    <link rel="stylesheet" href="https://www.yatex.org/gitbucket/KoekiBrandingPJ/Loremap/raw/master/src/colorbox/example3/colorbox.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+    <script src="https://www.yatex.org/gitbucket/KoekiBrandingPJ/Loremap/raw/master/src/colorbox/jquery.colorbox-min.js"></script>
+    <link rel="stylesheet" href="https://www.yatex.org/gitbucket/KoekiBrandingPJ/Loremap/raw/master/src/leaflet/leaflet.css">
+    <script src="https://www.yatex.org/gitbucket/KoekiBrandingPJ/Loremap/raw/master/src/leaflet/leaflet.js"></script>
+    <script src="https://www.yatex.org/gitbucket/KoekiBrandingPJ/Loremap/raw/master/src/leaflet/leaflet-sidebar.min.js"></script>
+    <link rel="stylesheet" href="https://www.yatex.org/gitbucket/KoekiBrandingPJ/Loremap/raw/master/src/leaflet/leaflet-sidebar.min.css">
+    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
+    <script src="https://www.yatex.org/gitbucket/KoekiBrandingPJ/Loremap/raw/master/src/leaflet/leaflet-omnivore.min.js"></script>
+    <!-- <script src="../src/leaflet/leaflet-omnivore.js"></script> -->
+    <style type="text/css">
+    <!--
+    div#mymap {width: 50vw; height: 50vh; margin: 0 auto;}
+    //.lorem {font-style: italic; color: #AAA;}
+    .sidebar{top:50;background-color:red;}
+    //.sidebar-content{opacity:0.8}
+    -->
+    </style>
+  </head>
 
-<style type="text/css">
-<!--
-div#mymap {width: 50vw; height: 50vh; margin: 0 auto;}
-//.lorem {font-style: italic; color: #AAA;}
-.sidebar{top:50;background-color:red;}
-//.sidebar-content{opacity:0.8}
--->
-</style>
-</head>
+  <body>
+
+    <header>
+      <img class="kamo" src="../img/skiplogo.png" alt="カモンくん">
+    </header>
 
-<body>
-<!--#include virtual="/navi.html"-->
+    <!--#include virtual="/navi.html"-->
+
+    <section class="contents">
 
-<section class="contents">
-<h1>伝統芸能</h1>
+      <h1>伝統芸能</h1>
 
-<p>SKIPでは庄内地方の伝統芸能を取材しました。</p>
+      <p>SKIPでは庄内地方の伝統芸能を取材しました。</p>
 
 
-<h2 id="toshi">取材一覧</h2>
-<section class="explanation">
-<ul>
-<li><a href ="https://skip.koeki-prj.org/shuzai/trad/kamegasaki/index.html">亀ケ崎獅子舞 亀ヶ崎十一面観音堂春祭り</a></li>
-<li><a href ="https://skip.koeki-prj.org/shuzai/trad/kaminakamura/index.html">上中村神楽 上中村皇太神社例大祭</a></li>
-<li><a href ="https://skip.koeki-prj.org/shuzai/trad/kadotakagura/index.html">門田神楽 門田住吉神社例大祭</a></li>
-<li><a href ="https://skip.koeki-prj.org/shuzai/trad/sumiyoshi/index.html">板戸神楽  板戸住吉神社例大祭</a></li>
-<li><a href ="https://skip.koeki-prj.org/shuzai/trad/kamiichigami/index.html">上市神神代神楽  東光山薬師神社例大祭</a></li>
-<li><a href ="https://skip.koeki-prj.org/shuzai/trad/shimoichigami/index.html">下市神神代神楽  八雲神社例大祭</a></li>
-</ul>
-</section>
-</div>
+      <h2 id="toshi">取材一覧</h2>
+      <section class="explanation">
+        <ul>
+          <li><a href ="https://skip.koeki-prj.org/shuzai/trad/kamegasaki/index.html">亀ケ崎獅子舞 亀ヶ崎十一面観音堂春祭り</a></li>
+          <li><a href ="https://skip.koeki-prj.org/shuzai/trad/kaminakamura/index.html">上中村神楽 上中村皇太神社例大祭</a></li>
+          <li><a href ="https://skip.koeki-prj.org/shuzai/trad/kadotakagura/index.html">門田神楽 門田住吉神社例大祭</a></li>
+          <li><a href ="https://skip.koeki-prj.org/shuzai/trad/sumiyoshi/index.html">板戸神楽  板戸住吉神社例大祭</a></li>
+          <li><a href ="https://skip.koeki-prj.org/shuzai/trad/kamiichigami/index.html">上市神神代神楽  東光山薬師神社例大祭</a></li>
+          <li><a href ="https://skip.koeki-prj.org/shuzai/trad/shimoichigami/index.html">下市神神代神楽  八雲神社例大祭</a></li>
+        </ul>
+      </section>
 
 
-<div id="mymap" class="sidebar-map" >
-<div id="sidebar" class="sidebar collapsed">
-  <!-- Nav tabs -->
+      <div id="mymap" class="sidebar-map" >
+      <div id="sidebar" class="sidebar collapsed">
+      <!-- Nav tabs -->
         <div class="sidebar-tabs">
-            <ul role="tablist">
-              <li><a href="#home" role="tab"><i id="FaW" class="fa fa-map-marker"></i></a></li>
-
-            </ul>
+          <ul role="tablist">
+            <li><a href="#home" role="tab"><i id="FaW" class="fa fa-map-marker"></i></a></li>
+          </ul>
         </div>
 
         <!-- Tab panes -->
@@ -67,32 +66,28 @@
             <h1 class="sidebar-header">
               <span class="sidebar-close"><i class="fa fa-caret-left"></i></span>marker's infomation
             </h1>
-
-	    <div id="mak_info">
-	    </div>
-
+            <div id="mak_info">
+	          </div>
           </div>
-
+        </div>
+	      <!--<div class="zoom-left"></div>-->
+        </div>
+      </div>
 
-        </div>
-	<!--<div class="zoom-left"></div>-->
-</div>
-</div>
-
-<script type="text/javascript" src="./new_late_geojson.js" charset="utf-8"></script>
+      <script type="text/javascript" src="./new_late_geojson.js" charset="utf-8"></script>
 
 
-<h2 id="toshi">各種マニュアル</h2>
-<section class="explanation">
-<ul>
-<li><a href ="https://skip.koeki-prj.org/docs/manual/movie-mac/manual.html">iMovie - Macで編集 -</a></li>
-<li><a href ="">iMovie - iPhoneで編集 -</a></li>
-</ul>
-</section>
+      <h2 id="toshi">各種マニュアル</h2>
+      <section class="explanation">
+        <ul>
+          <li><a href ="https://skip.koeki-prj.org/docs/manual/movie-mac/manual.html">iMovie - Macで編集 -</a></li>
+          <li><a href ="">iMovie - iPhoneで編集 -</a></li>
+        </ul>
+      </section>
 
-</section>
-<footer>
-    <p class="copyright">Copyright (C) 2018 SKIP - Shonai Koeki Information Project - . All Rights Reserved.</p>
-</footer>
-</body>
+    </section>
+    <footer>
+        <p class="copyright">Copyright (C) 2018 SKIP - Shonai Koeki Information Project - . All Rights Reserved.</p>
+    </footer>
+  </body>
 </html>

yatex.org