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
-
112src/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 { |
body { |
||||
margin: 0; |
|
||||
display: flex; |
|
||||
place-items: center; |
|
||||
|
place-items:top; |
||||
min-width: 320px; |
min-width: 320px; |
||||
min-height: 100vh; |
min-height: 100vh; |
||||
} |
} |
||||
|
|
||||
h1 { |
h1 { |
||||
font-size: 3.2em; |
|
||||
|
text-align: center; |
||||
|
font-size: 4.2em; |
||||
line-height: 1.1; |
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; |
|
||||
} |
|
||||
.logo:hover { |
|
||||
filter: drop-shadow(0 0 2em #646cffaa); |
|
||||
|
text-align:left; |
||||
|
font-size: 2em; |
||||
|
line-height: 1.8; |
||||
} |
} |
||||
.logo.vanilla:hover { |
|
||||
filter: drop-shadow(0 0 2em #3178c6aa); |
|
||||
} |
|
||||
|
|
||||
.card { |
.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; |
|
||||
|
.highlight2{ |
||||
|
color:red; |
||||
font-size:1em; |
font-size:1em; |
||||
font-weight: 500; |
|
||||
font-family: inherit; |
|
||||
background-color: #1a1a1a; |
|
||||
cursor: pointer; |
|
||||
transition: border-color 0.25s; |
|
||||
|
font-weight:bold; |
||||
} |
} |
||||
button:hover { |
|
||||
border-color: #646cff; |
|
||||
|
.highlight3{ |
||||
|
color:black |
||||
|
font=size:1em; |
||||
|
font-weight:bold; |
||||
} |
} |
||||
button:focus, |
|
||||
button:focus-visible { |
|
||||
outline: 4px auto -webkit-focus-ring-color; |
|
||||
|
.highlight4{ |
||||
|
color:black; |
||||
|
font=size:1.4em; |
||||
|
font-weight:bold; |
||||
} |
} |
||||
|
|
||||
@media (prefers-color-scheme: light) { |
|
||||
:root { |
|
||||
color: #213547; |
|
||||
background-color: #ffffff; |
|
||||
|
h2{ |
||||
|
font-size:3em; |
||||
|
line-height:3; |
||||
} |
} |
||||
a:hover { |
|
||||
color: #747bff; |
|
||||
|
.calendar { |
||||
|
width: 100%; |
||||
|
table-layout: fixed; |
||||
|
border-collapse: collapse; |
||||
} |
} |
||||
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