Browse Source
made everything except the json part. thinking about combining it with the calendar
site-edits
made everything except the json part. thinking about combining it with the calendar
site-edits
7 changed files with 155 additions and 108 deletions
-
54index.html
-
21src/index.ts
-
24src/main.ts
-
120src/style.css
-
1src/syllabus.ts
-
35syllabus.html
-
8vite.config.ts
@ -0,0 +1,21 @@ |
|||
import './style.css' |
|||
/*fetch("data/lecture_schedule.json") |
|||
.then(response => response.json()) |
|||
.then(data => { |
|||
document.getElementById("course-title").textContent = |
|||
`${data.course.title} (${data.course.semester})`; |
|||
|
|||
const scheduleList = document.getElementById("schedule"); |
|||
|
|||
data.weeks.forEach(week => { |
|||
const li = document.createElement("li"); |
|||
li.innerHTML = `
|
|||
<strong>${week.week}주차 (${week.date})</strong><br> |
|||
주제: ${week.topic} |
|||
`;
|
|||
scheduleList.appendChild(li); |
|||
}); |
|||
}) |
|||
.catch(error => { |
|||
console.error("schedule not loaded:", error); |
|||
});*/ |
|||
@ -1,24 +0,0 @@ |
|||
import './style.css' |
|||
import typescriptLogo from './typescript.svg' |
|||
import viteLogo from '/vite.svg' |
|||
import { setupCounter } from './counter.ts' |
|||
|
|||
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
|
|||
<div> |
|||
<a href="https://vite.dev" target="_blank"> |
|||
<img src="${viteLogo}" class="logo" alt="Vite logo" /> |
|||
</a> |
|||
<a href="https://www.typescriptlang.org/" target="_blank"> |
|||
<img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" /> |
|||
</a> |
|||
<h1>Vite + TypeScript</h1> |
|||
<div class="card"> |
|||
<button id="counter" type="button"></button> |
|||
</div> |
|||
<p class="read-the-docs"> |
|||
Click on the Vite and TypeScript logos to learn more |
|||
</p> |
|||
</div> |
|||
`
|
|||
|
|||
setupCounter(document.querySelector<HTMLButtonElement>('#counter')!) |
|||
@ -1,96 +1,68 @@ |
|||
:root { |
|||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; |
|||
line-height: 1.5; |
|||
font-weight: 400; |
|||
|
|||
color-scheme: light dark; |
|||
color: rgba(255, 255, 255, 0.87); |
|||
background-color: #242424; |
|||
|
|||
font-synthesis: none; |
|||
text-rendering: optimizeLegibility; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
|
|||
a { |
|||
font-weight: 500; |
|||
color: #646cff; |
|||
text-decoration: inherit; |
|||
} |
|||
a:hover { |
|||
color: #535bf2; |
|||
} |
|||
|
|||
body { |
|||
margin: 0; |
|||
display: flex; |
|||
place-items: center; |
|||
place-items:top; |
|||
min-width: 320px; |
|||
min-height: 100vh; |
|||
} |
|||
|
|||
h1 { |
|||
font-size: 3.2em; |
|||
text-align: center; |
|||
font-size: 4.2em; |
|||
line-height: 1.1; |
|||
} |
|||
|
|||
#app { |
|||
max-width: 1280px; |
|||
margin: 0 auto; |
|||
padding: 2rem; |
|||
text-align: center; |
|||
} |
|||
ul { |
|||
|
|||
.logo { |
|||
height: 6em; |
|||
padding: 1.5em; |
|||
will-change: filter; |
|||
transition: filter 300ms; |
|||
text-align:left; |
|||
font-size: 2em; |
|||
line-height: 1.8; |
|||
} |
|||
.logo:hover { |
|||
filter: drop-shadow(0 0 2em #646cffaa); |
|||
} |
|||
.logo.vanilla:hover { |
|||
filter: drop-shadow(0 0 2em #3178c6aa); |
|||
} |
|||
|
|||
.card { |
|||
padding: 2em; |
|||
padding: 0.8em; |
|||
width: fit-content; |
|||
background-color: #d0ff00dc; |
|||
} |
|||
|
|||
.read-the-docs { |
|||
color: #888; |
|||
.highlight1{ |
|||
color:blue; |
|||
font-size:1em; |
|||
font-weight:bold; |
|||
} |
|||
|
|||
button { |
|||
border-radius: 8px; |
|||
border: 1px solid transparent; |
|||
padding: 0.6em 1.2em; |
|||
font-size: 1em; |
|||
font-weight: 500; |
|||
font-family: inherit; |
|||
background-color: #1a1a1a; |
|||
cursor: pointer; |
|||
transition: border-color 0.25s; |
|||
.highlight2{ |
|||
color:red; |
|||
font-size:1em; |
|||
font-weight:bold; |
|||
} |
|||
.highlight3{ |
|||
color:black |
|||
font=size:1em; |
|||
font-weight:bold; |
|||
} |
|||
button:hover { |
|||
border-color: #646cff; |
|||
.highlight4{ |
|||
color:black; |
|||
font=size:1.4em; |
|||
font-weight:bold; |
|||
} |
|||
button:focus, |
|||
button:focus-visible { |
|||
outline: 4px auto -webkit-focus-ring-color; |
|||
|
|||
h2{ |
|||
font-size:3em; |
|||
line-height:3; |
|||
} |
|||
.calendar { |
|||
width: 100%; |
|||
table-layout: fixed; |
|||
border-collapse: collapse; |
|||
} |
|||
|
|||
@media (prefers-color-scheme: light) { |
|||
:root { |
|||
color: #213547; |
|||
background-color: #ffffff; |
|||
} |
|||
a:hover { |
|||
color: #747bff; |
|||
} |
|||
button { |
|||
background-color: #f9f9f9; |
|||
} |
|||
.calendar th, |
|||
.calendar td { |
|||
border: 1px solid #ccc; |
|||
height: 170px; |
|||
text-align: center; |
|||
vertical-align: top; |
|||
} |
|||
|
|||
.calendar th { |
|||
background: #f5f5f5; |
|||
} |
|||
@ -0,0 +1 @@ |
|||
import './style.css' |
|||
@ -0,0 +1,8 @@ |
|||
export default { |
|||
server: { |
|||
watch: { |
|||
usePolling: true, |
|||
interval: 100, |
|||
}, |
|||
}, |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue