seung6lee/dhi-class-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

class 3-5 initial

Browse Source
This commit is contained in:
seung6lee
2026-03-04 21:39:44 +09:00
commit 1873180948
15 changed files with 1044 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/style.scss
+341
View File
@@ -0,0 +1,341 @@
@font-face {
font-family: 'GMarketSans';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
font-weight: 500;
font-display: swap;
}
// ─── Design Tokens ────────────────────────────────────────────────────────────
$accent: #FF4B00;
$accent-light: rgba(255, 75, 0, 0.08);
$black: #0A0A0A;
$gray-9: #1A1A1A;
$gray-7: #4A4A4A;
$gray-5: #888888;
$gray-3: #C8C8C8;
$gray-1: #F0F0F0;
$white: #FFFFFF;
$grid-line: rgba(0, 0, 0, 0.08);
$small_margin: 10px;
$big_margin: 25px;
$nav_width: 400px;
$header_height: 60px;
// ─── Grid Background Mixin ────────────────────────────────────────────────────
@mixin grid-bg($size: 28px, $color: $grid-line) {
background-image:
linear-gradient(to right, $color 1px, transparent 1px),
linear-gradient(to bottom, $color 1px, transparent 1px);
background-size: $size $size;
}
// ─── Reset ────────────────────────────────────────────────────────────────────
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
// ─── Body ─────────────────────────────────────────────────────────────────────
body {
width: 100%;
height: 100vh;
font-family: "GMarketSans", serif;
display: flex;
flex-direction: column;
gap: $small_margin;
background-color: $gray-1;
@include grid-bg(28px, rgba(0,0,0,0.06));
color: $black;
}
// ─── Box ──────────────────────────────────────────────────────────────────────
.box {
border-radius: 0;
position: relative;
}
// ─── Title ────────────────────────────────────────────────────────────────────
.title {
height: 32px;
width: 100%;
border-bottom: 1px solid $gray-3;
margin-bottom: 12px;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: $gray-5;
display: flex;
align-items: center;
// 포인트 컬러 왼쪽 태그
&::before {
content: '';
display: inline-block;
width: 3px;
height: 14px;
background-color: $accent;
margin-right: 8px;
flex-shrink: 0;
}
}
// ─── Header ───────────────────────────────────────────────────────────────────
#header {
width: 100%;
height: $header_height;
background-color: $white;
border-bottom: 1px solid $gray-3;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 24px;
position: relative;
// 헤더 하단 그리드 강조선
&::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 1px;
background: repeating-linear-gradient(
to right,
$accent 0px, $accent 4px,
transparent 4px, transparent 12px
);
}
h1 {
font-size: 16px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: $black;
// 포인트 컬러 강조
span {
color: $accent;
}
}
ul {
display: flex;
flex-direction: row;
li {
display: inline-block;
padding: 0 1.5rem;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.06em;
a {
text-decoration: none;
color: $gray-7;
text-transform: uppercase;
transition: color 0.15s ease;
position: relative;
padding-bottom: 4px;
&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1px;
background-color: $accent;
transition: width 0.2s ease;
}
&:hover {
color: $black;
&::after {
width: 100%;
}
}
&.active {
color: $accent;
&::after {
width: 100%;
}
}
}
}
}
}
// ─── Main ─────────────────────────────────────────────────────────────────────
#main {
width: 100%;
height: calc(100% - #{$header_height} - #{$small_margin});
padding: $small_margin;
display: flex;
flex-direction: row;
gap: $big_margin;
}
// ─── Side ─────────────────────────────────────────────────────────────────────
#side {
width: $nav_width;
height: 100%;
display: flex;
flex-direction: column;
gap: $big_margin;
}
// ─── Info ─────────────────────────────────────────────────────────────────────
#info {
width: 100%;
height: 100%;
background-color: $white;
border: 1px solid $gray-3;
padding: $small_margin;
// 내부 그리드 배경
@include grid-bg(20px, rgba(0,0,0,0.03));
meal-list {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: $small_margin;
overflow-y: hidden;
header {
width: 100%;
height: 40px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
select {
border: 1px solid $gray-3;
border-radius: 0;
padding: 4px 8px;
font-size: 12px;
font-family: "GMarketSans", serif;
letter-spacing: 0.04em;
background-color: $white;
color: $black;
cursor: pointer;
transition: border-color 0.15s, box-shadow 0.15s;
&:hover {
border-color: $black;
box-shadow: none;
}
&:focus {
outline: none;
border-color: $accent;
}
}
}
ul {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: $small_margin;
overflow-y: auto;
overflow-x: hidden;
cursor: ns-resize;
&::-webkit-scrollbar {
display: none;
}
li {
width: 100%;
height: 56px;
border-radius: 0;
border: 1px solid $gray-3;
border-left: 3px solid transparent; // 기본 상태
display: flex;
flex-direction: row;
align-items: center;
padding-left: $small_margin;
flex-shrink: 0;
background-color: $white;
font-size: 13px;
color: $gray-7;
transition: border-left-color 0.15s, background-color 0.15s, color 0.15s;
&:hover {
border-left-color: $accent;
background-color: $accent-light;
color: $black;
}
&.active {
border-left-color: $accent;
background-color: $accent-light;
color: $black;
font-weight: 500;
}
}
}
}
}
// ─── Calendar ─────────────────────────────────────────────────────────────────
#calendar {
border: 1px solid $gray-3;
border-top: 3px solid $accent; // 포인트 컬러 상단 강조선
width: calc(100% - #{$nav_width} - #{$big_margin});
height: 100%;
background-color: $white;
position: relative;
iframe {
border-radius: 0;
width: 100%;
height: 100%;
border: none;
}
}
// ─── Responsive ───────────────────────────────────────────────────────────────
@media (max-width: 800px) {
h1 {
font-size: 16px;
}
#main {
width: 100%;
flex-direction: column;
}
#side {
width: 100%;
height: auto;
}
#task {
height: auto;
}
#info {
height: auto;
}
#calendar {
width: 100%;
height: 400px;
flex-shrink: 0;
}
}