inital version of scroll view, burger menu, css reset
This commit is contained in:
parent
0508d8cd9a
commit
4faf546335
20 changed files with 438 additions and 42 deletions
|
|
@ -12,21 +12,36 @@
|
|||
{% block head %}{% endblock head %}
|
||||
</head>
|
||||
<body>
|
||||
<h1>
|
||||
phtantasmapolis: Looking Back to the Future
|
||||
<br>
|
||||
未竟之城:回顧未來
|
||||
</h1>
|
||||
<nav>
|
||||
<a href="{% url 'films'%}">films - 影片</a> |
|
||||
<a href="{% url 'edits' %}">edits - 編輯</a> |
|
||||
<a href="{% url 'tv' %}">tv - 頻道</a> |
|
||||
<a href="{% url 'essays' %}">essays - 專文</a> |
|
||||
<a href="{% url 'about' %}">about - 關於</a>
|
||||
</nav>
|
||||
<div class="topnav">
|
||||
<a href="/" class="active">
|
||||
phtantasmapolis: Looking Back to the Future
|
||||
<br>
|
||||
未竟之城:回顧未來
|
||||
</a>
|
||||
<nav>
|
||||
<a href="{% url 'films'%}">films - 影片</a>
|
||||
<a href="{% url 'edits' %}">edits - 編輯</a>
|
||||
<a href="{% url 'tv' %}">tv - 頻道</a>
|
||||
<a href="{% url 'essays' %}">essays - 專文</a>
|
||||
<a href="{% url 'about' %}">about - 關於</a>
|
||||
</nav>
|
||||
<a class="icon">
|
||||
<svg height="32px" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
<main>
|
||||
{% block main %}{% endblock main %}
|
||||
</main>
|
||||
</main>
|
||||
{% block end %}{% endblock end %}
|
||||
<script>
|
||||
document.querySelectorAll(".topnav a.icon").forEach(a => {
|
||||
a.onclick = (event) => {
|
||||
var nav = document.querySelector('.topnav nav')
|
||||
nav.style.display = nav.style.display === 'block' ? 'none' : 'block'
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue