249 lines
6.4 KiB
Text
249 lines
6.4 KiB
Text
|
<html>
|
||
|
|
||
|
<head>
|
||
|
<title><%=meta.author%> - <%=meta.title%></title>
|
||
|
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Fira+Sans|Fira+Mono">
|
||
|
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.2.0/build/styles/default.min.css">
|
||
|
<style>
|
||
|
body,
|
||
|
* {
|
||
|
font-family: "Fira Sans";
|
||
|
scroll-behavior: smooth;
|
||
|
}
|
||
|
|
||
|
body {
|
||
|
margin: 1em;
|
||
|
}
|
||
|
|
||
|
#usi-logo {
|
||
|
width: 75px;
|
||
|
height: 75px;
|
||
|
}
|
||
|
|
||
|
header {
|
||
|
display: flex;
|
||
|
align-content: space-between;
|
||
|
width: 100%;
|
||
|
justify-items: center;
|
||
|
}
|
||
|
|
||
|
header ul {
|
||
|
list-style: none;
|
||
|
}
|
||
|
|
||
|
header .title {
|
||
|
flex: 1;
|
||
|
margin-left: 1em;
|
||
|
}
|
||
|
|
||
|
html {
|
||
|
min-height: 100vh;
|
||
|
}
|
||
|
|
||
|
pre,
|
||
|
code {
|
||
|
font-family: "Fira Mono"
|
||
|
}
|
||
|
|
||
|
pre {
|
||
|
background: rgb(202, 227, 255);
|
||
|
padding: 1em;
|
||
|
}
|
||
|
|
||
|
td {
|
||
|
text-align: center
|
||
|
}
|
||
|
|
||
|
td:last-child {
|
||
|
text-align: left;
|
||
|
}
|
||
|
|
||
|
th {
|
||
|
font-weight: normal;
|
||
|
color: rgb(0, 61, 131);
|
||
|
}
|
||
|
|
||
|
thead {
|
||
|
border-bottom: 2px solid rgb(202, 227, 255);
|
||
|
}
|
||
|
|
||
|
table {
|
||
|
width: 100%
|
||
|
}
|
||
|
|
||
|
span.task {
|
||
|
display: inline-flex;
|
||
|
border-radius: 50%;
|
||
|
border: 1px solid white;
|
||
|
background: #ffbc00;
|
||
|
width: 2em;
|
||
|
height: 2em;
|
||
|
justify-content: center;
|
||
|
align-items: center;
|
||
|
font-weight: normal;
|
||
|
margin-top: 2em;
|
||
|
}
|
||
|
|
||
|
section.feedback {
|
||
|
padding: 2em;
|
||
|
background-color: rgb(92, 192, 223);
|
||
|
background-image: linear-gradient(1deg, white, transparent,rgba(255,255,255,0.5) 90%,transparent 100%);
|
||
|
}
|
||
|
|
||
|
section.instructions {
|
||
|
padding: 2em;
|
||
|
background-color: rgb(255, 241, 196);
|
||
|
background-image: linear-gradient(1deg, white, transparent,rgba(255,255,255,0.5) 90%,transparent 100%);
|
||
|
}
|
||
|
|
||
|
section.instructions::before {
|
||
|
content: "Task Description";
|
||
|
font-size: 1.75em;
|
||
|
color: #ffbc00;
|
||
|
font-weight: bold;
|
||
|
transform: translateY(-2em) rotate(1deg);
|
||
|
display: block;
|
||
|
margin-bottom: -2em;
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
section.pass, section.exceed, section.ok {
|
||
|
margin-top: 1em;
|
||
|
}
|
||
|
|
||
|
section.pass span, section.exceed span, section.hint span, section.ok span {
|
||
|
margin-right: 0.5em;
|
||
|
padding: 0.5em;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
section.pass {
|
||
|
border: 2px solid green;
|
||
|
}
|
||
|
|
||
|
section.ok {
|
||
|
border: 2px solid rgb(6, 175, 6);
|
||
|
}
|
||
|
|
||
|
section.exceed {
|
||
|
border: 2px solid rgb(34, 255, 34);
|
||
|
}
|
||
|
|
||
|
section.hint {
|
||
|
border: 2px solid rgb(255, 214, 34);
|
||
|
}
|
||
|
|
||
|
section.pass span {
|
||
|
background-color: green; color: white;
|
||
|
background-image: linear-gradient(45deg, #000000a6, transparent);
|
||
|
}
|
||
|
|
||
|
section.ok span {
|
||
|
background-color: rgb(6, 175, 6); color: white;
|
||
|
background-image: linear-gradient(135deg, #000000a6, transparent);
|
||
|
}
|
||
|
|
||
|
section.exceed span {
|
||
|
background-color: rgb(34, 255, 34);
|
||
|
background-image: linear-gradient(-45deg, white, transparent);
|
||
|
}
|
||
|
|
||
|
section.hint span {
|
||
|
background-color: rgb(255, 214, 34);
|
||
|
background-image: linear-gradient(-45deg, white, transparent);
|
||
|
}
|
||
|
|
||
|
.deadline {
|
||
|
text-align: right;
|
||
|
}
|
||
|
|
||
|
p.deadline {
|
||
|
font-size: 2em;
|
||
|
}
|
||
|
|
||
|
.deadline b {
|
||
|
border-bottom: 1px solid black;
|
||
|
}
|
||
|
|
||
|
form label {
|
||
|
display: inline-block;
|
||
|
margin-right: 1em;
|
||
|
vertical-align: middle;
|
||
|
}
|
||
|
|
||
|
blockquote {
|
||
|
border-left: 10px solid #fff2ca;
|
||
|
padding-left: 2em;
|
||
|
margin: 1em;
|
||
|
}
|
||
|
|
||
|
|
||
|
form button {
|
||
|
min-width: 10em;
|
||
|
min-height: 2em;
|
||
|
background: #008d4f;
|
||
|
color: white;
|
||
|
font-weight: bold;
|
||
|
font-size: 1.5em;
|
||
|
}
|
||
|
|
||
|
form input[type=text],
|
||
|
form textarea,
|
||
|
form select {
|
||
|
flex: 3;
|
||
|
margin: 0.5em;
|
||
|
font-size: 1.1em;
|
||
|
}
|
||
|
|
||
|
form p { display: flex;
|
||
|
align-items: stretch;
|
||
|
min-height: 2.5em;
|
||
|
padding-left: 0.5em;
|
||
|
flex-direction: column}
|
||
|
|
||
|
nav .task {display: unset; background:white}
|
||
|
|
||
|
nav .d1 {display: block}
|
||
|
nav .d1 + .d2 {margin-left: 2em}
|
||
|
nav .d2 {margin-left: 1em}
|
||
|
|
||
|
footer {
|
||
|
text-align: center; color: gray;
|
||
|
}
|
||
|
|
||
|
</style>
|
||
|
</head>
|
||
|
<body>
|
||
|
|
||
|
<header> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="usi-logo" x="0px" y="0px" width="200" height="200" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" class="injected-svg svg">
|
||
|
<g>
|
||
|
<path d="M180,41.7h-51.1V31.1h42.2C153.1,12.5,127.8,1,99.9,1C45.2,1.1,0.9,45.4,1,100.1c0,26.8,10.7,51.1,28.1,68.9 c-1.4-2-2.4-4.1-3-6.1c-1-3.5-1-5.9-1.1-15.8v-47.1h14.8v48.5c0,3.4-0.1,6.6,1,9.6c3,7.6,11.3,8.5,16,8.5c2.3,0,8.3-0.1,12.6-3.9 c4.4-3.9,4.4-8.4,4.4-15v-47.7h14.9v49.7c-0.1,8.9-0.1,16.3-8.5,23.5c-8,7-18.4,7.7-23.8,7.7c-4.8,0-9.5-0.6-14-2.1 c-1.8-0.6-3.5-1.4-5-2.3c17.1,14,39,22.4,62.8,22.4c54.7-0.1,99-44.4,98.9-99.1C199,78.1,191.9,58,180,41.7z M175.3,94.4l-6.3-9 c2.1-1.4,8.7-5.7,8.7-17.7c0-2-0.2-4.1-1-6.2c-1.7-4.1-4.6-4.9-6.6-4.9c-3.6,0-4.9,2.5-5.7,4.3c-0.5,1.3-0.6,1.5-1.8,6.6l-1.5,6.9 c-0.9,3.6-1.3,5.4-2,7.2c-1.1,2.6-4.5,9.6-14,9.6c-10.9,0-17.8-9.2-17.8-22.6c0-12.3,6.1-19,11.6-23l6.6,8.8 c-2.8,1.9-8.5,5.7-8.5,14.8c0,5.8,2.6,10.8,7,10.8c4.9,0,5.8-5.3,6.8-10.5l1.3-5.9c1.6-7.7,4.8-18.6,17-18.6 c13.1,0,18.4,12.2,18.4,24.3c0,3.2-0.3,6.7-1.3,10.2C185.1,83.4,182.3,90.1,175.3,94.4z"></path>
|
||
|
</g>
|
||
|
</svg>
|
||
|
<div class="title">
|
||
|
<h2><%=meta.lecture%></h2>
|
||
|
<h1><%=meta.title%></h1>
|
||
|
</div>
|
||
|
<ul>
|
||
|
<li><%=meta.author%></li>
|
||
|
</ul>
|
||
|
</header>
|
||
|
|
||
|
<nav>
|
||
|
<h1>Table of Contents</h1>
|
||
|
<%-toc.toc %>
|
||
|
</nav>
|
||
|
|
||
|
<main>
|
||
|
<%-md %>
|
||
|
</main>
|
||
|
|
||
|
|
||
|
<footer>
|
||
|
<%=meta.timestamp%>
|
||
|
</footer>
|
||
|
|
||
|
</body>
|
||
|
|
||
|
</html>
|