위키
포럼
도구
바뀐글
랜덤

"2025년 제타위키 디자인"의 두 판 사이의 차이

2번째 줄: 2번째 줄:
;제타위키 디자인 2026
;제타위키 디자인 2026


{| class='wikitable'
<syntaxhighlight lang='html' run outheight='400'>
! 구분 !! Light !! Dark
|-
| 배경색 || white || #222
|-
| 글자색 || #222 || white
|}
 
<syntaxhighlight lang='html' run outheight='300'>
<style>
<style>
   :root {
   :root {
     --bg: white;
     --bg: #fff;
     --text: #1d1d1d;
     --text: #222;
     --link: #03e;
     --link: #03e;
     --link-ext: #066;
     --link-ext: #066;
     --link-new: #833;
     --link-new: #833;
     --border: rgb(120 120 120 / 0.5);
     --border: rgb(120 120 120 / 0.5);
    --nav-bg: #345;
    --nav-text: #fff;
    --nav-hover-bg: rgb(0 0 0 / 0.2);
   }
   }


   .theme-dark {
   .theme-dark {
     --bg: #1d1d1d;
     --bg: #222;
     --text: white;
     --text: #fff;
     --link: #7af;
     --link: #7af;
     --link-ext: #7aa;
     --link-ext: #7aa;
29번째 줄: 25번째 줄:
   }
   }


   body {
   .page-bg {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
     font-family:
      Roboto, "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR",
      "Apple SD Gothic Neo", sans-serif;
     background: #777;
     background: #777;
    padding: 16px;
   }
   }


   .grid {
   .theme-grid {
     display: grid;
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-columns: 1fr 1fr;
     margin: 0 auto;
     gap: 16px;
    min-height: calc(100vh - 32px);
   }
   }


   .panel {
   .theme-panel {
     background: var(--bg);
     background: var(--bg);
     color: var(--text);
     color: var(--text);
     padding: 24px;
     display: flex;
    flex-direction: column;
   }
   }


   .label {
   .nav {
     font-size: 12px;
     font-size: 12px;
     font-weight: 500;
     line-height: 1.4;
     padding: 4px 8px;
    background: var(--nav-bg);
     border-radius: 6px;
    color: var(--nav-text);
     border: 1px solid var(--border);
    display: flex;
     display: inline-block;
    flex-direction: column;
     margin-bottom: 16px;
  }
 
  .nav-top {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    height: 36px;
  }
 
  .nav-flex {
    display: flex;
    align-items: stretch;
  }
 
  .nav-link {
    display: flex;
    align-items: center;
     padding: 0 8px;
     text-decoration: none;
     color: var(--nav-text);
    height: 100%;
  }
 
  .nav-link:hover {
    text-decoration: none;
    background: var(--nav-hover-bg);
  }
 
  .brand {
    padding: 0 12px;
    color: #e77;
    font-size: 18px;
    font-weight: 900;
  }
 
  .nav-current {
    color: #ff9;
  }
 
  .nav-sub {
     display: flex;
    align-items: stretch;
  }
 
  .nav-search-wrapper {
     padding: 8px 12px;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
  }
  .nav-search {
    flex: 1 1 auto;
    display: flex;
   }
   }


   h1 {
   .search-input {
    padding: 8px;
    border: 0;
    border-radius: 4px;
    background: var(--bg);
    color: var(--text);
    width: 100%;
  }
 
  .content {
    flex: 1 1 auto;
    padding: 16px;
    font-size: 14px;
    line-height: 1.5;
  }
 
  .title {
     font-size: 20px;
     font-size: 20px;
     margin: 0 0 12px;
     margin: 0 0 12px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--text);
  }
  .page-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: nowrap;
    font-size: 12px;
    line-height: 1.4;
    margin: 0 0 12px;
    color: var(--text);
    opacity: 0.8;
  }
  .meta-left {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .meta-right {
    flex: 1 1 auto;
    text-align: right;
    white-space: nowrap;
  }
  .meta-link {
    color: var(--link);
    text-decoration: none;
    margin-left: 8px;
    font-size: 12px;
  }
  .meta-link:hover {
    text-decoration: underline;
   }
   }


   p {
   .body-text {
     font-size: 14px;
     font-size: 14px;
     margin: 0 0 12px;
     margin: 0 0 12px;
    line-height: 1.5;
    color: var(--text);
   }
   }


   a {
   .inlink {
     color: var(--link);
     color: var(--link);
     text-decoration: none;
     text-decoration: none;
   }
   }
   a:hover {
 
   .inlink:hover {
     text-decoration: underline;
     text-decoration: underline;
   }
   }
   a.ext {
 
   .ext {
     color: var(--link-ext);
     color: var(--link-ext);
   }
   }
   a.new {
 
   .new {
     color: var(--link-new);
     color: var(--link-new);
  }
  .footer {
    font-size: 12px;
    line-height: 1.4;
    background: var(--nav-bg);
    color: var(--nav-text);
    padding: 12px 16px;
    text-align: center;
    border-top: 1px solid var(--border);
   }
   }
</style>
</style>
</head>
<body class="page-bg">
<body>
  <template id="panel-template">
  <div class="grid">
    <header class="nav">
    <!-- LIGHT -->
      <div class="nav-top">
    <section class="panel">
        <div class="nav-flex">
      <div class="label">LIGHT</div>
          <a href="#" class="nav-link brand">Z</a>
       <h1>한산섬 달 밝은 밤에</h1>
          <a href="#" class="nav-link nav-current">위키</a>
       <p>
          <a href="#" class="nav-link">포럼</a>
         <a href="#">한산섬</a> 달 밝은 밤에 <a href="#" class="ext">수루</a>에 홀로 앉아 큰 칼 옆에 차고 깊은 시름 하는 차에 어디서 <a href="#" class="new">일성호가</a>는 남의 애를 끊나니
          <a href="#" class="nav-link">도구</a>
        </div>
        <div class="nav-flex">
          <a href="#" class="nav-link">로그인</a>
        </div>
      </div>
 
      <div class="nav-sub">
        <div class="nav-search-wrapper">
          <div class="nav-flex nav-search">
            <input class="search-input" type="search" placeholder="검색" />
          </div>
        </div>
        <div class="nav-flex">
          <a href="#" class="nav-link">랜덤</a>
          <a href="#" class="nav-link">바뀐글</a>
        </div>
      </div>
    </header>
 
    <main class="content">
       <h1 class="title">문서 제목</h1>
 
       <p class="page-meta">
         <span class="meta-left">2025-10-31 · user1</span>
        <span class="meta-right">
          <a href="#" class="meta-link">읽기</a>
          <a href="#" class="meta-link">편집</a>
        </span>
       </p>
       </p>
    </section>


    <!-- DARK -->
      <p class="body-text">
    <section class="panel theme-dark">
         <a href="#" class="inlink">한산섬</a> 달 밝은 밤에
      <div class="label">DARK</div>
        <a href="#" class="inlink ext">수루</a>에 홀로 앉아 큰 칼 옆에 차고 깊은
      <h1>한산섬 달 밝은 밤에</h1>
        시름 하는 차에 어디서 <a href="#" class="inlink new">일성호가</a>는 남의
      <p>
        애를 끊나니
         <a href="#">한산섬</a> 달 밝은 밤에 <a href="#" class="ext">수루</a>에 홀로 앉아 큰 칼 옆에 차고 깊은 시름 하는 차에 어디서 <a href="#" class="new">일성호가</a>는 남의 애를 끊나니
       </p>
       </p>
     </section>
     </main>
 
    <footer class="footer">© 2025 제타위키 · CC BY-SA 4.0</footer>
  </template>
 
  <div class="theme-grid">
    <section class="theme-panel" id="light"></section>
    <section class="theme-panel theme-dark" id="dark"></section>
   </div>
   </div>
  <script>
    const template = document.getElementById('panel-template').content;
    ['light', 'dark'].forEach(id => {
      document.getElementById(id).appendChild(template.cloneNode(true));
    });
  </script>
</body>
</body>
</syntaxhighlight>
</syntaxhighlight>


2025년 11월 1일 (토) 16:34 판

1 개요

제타위키 디자인 2026
<style>
  :root {
    --bg: #fff;
    --text: #222;
    --link: #03e;
    --link-ext: #066;
    --link-new: #833;
    --border: rgb(120 120 120 / 0.5);

    --nav-bg: #345;
    --nav-text: #fff;
    --nav-hover-bg: rgb(0 0 0 / 0.2);
  }

  .theme-dark {
    --bg: #222;
    --text: #fff;
    --link: #7af;
    --link-ext: #7aa;
    --link-new: #eaa;
  }

  .page-bg {
    font-family:
      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR",
      "Apple SD Gothic Neo", sans-serif;
    background: #777;
    padding: 16px;
  }

  .theme-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    min-height: calc(100vh - 32px);
  }

  .theme-panel {
    background: var(--bg);
    color: var(--text);
    display: flex;
    flex-direction: column;
  }

  .nav {
    font-size: 12px;
    line-height: 1.4;
    background: var(--nav-bg);
    color: var(--nav-text);
    display: flex;
    flex-direction: column;
  }

  .nav-top {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    height: 36px;
  }

  .nav-flex {
    display: flex;
    align-items: stretch;
  }

  .nav-link {
    display: flex;
    align-items: center;
    padding: 0 8px;
    text-decoration: none;
    color: var(--nav-text);
    height: 100%;
  }

  .nav-link:hover {
    text-decoration: none;
    background: var(--nav-hover-bg);
  }

  .brand {
    padding: 0 12px;
    color: #e77;
    font-size: 18px;
    font-weight: 900;
  }

  .nav-current {
    color: #ff9;
  }

  .nav-sub {
    display: flex;
    align-items: stretch;
  }

  .nav-search-wrapper {
    padding: 8px 12px;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
  }
  .nav-search {
    flex: 1 1 auto;
    display: flex;
  }

  .search-input {
    padding: 8px;
    border: 0;
    border-radius: 4px;
    background: var(--bg);
    color: var(--text);
    width: 100%;
  }

  .content {
    flex: 1 1 auto;
    padding: 16px;
    font-size: 14px;
    line-height: 1.5;
  }

  .title {
    font-size: 20px;
    margin: 0 0 12px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--text);
  }

  .page-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: nowrap;
    font-size: 12px;
    line-height: 1.4;
    margin: 0 0 12px;
    color: var(--text);
    opacity: 0.8;
  }

  .meta-left {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .meta-right {
    flex: 1 1 auto;
    text-align: right;
    white-space: nowrap;
  }

  .meta-link {
    color: var(--link);
    text-decoration: none;
    margin-left: 8px;
    font-size: 12px;
  }

  .meta-link:hover {
    text-decoration: underline;
  }

  .body-text {
    font-size: 14px;
    margin: 0 0 12px;
    line-height: 1.5;
    color: var(--text);
  }

  .inlink {
    color: var(--link);
    text-decoration: none;
  }

  .inlink:hover {
    text-decoration: underline;
  }

  .ext {
    color: var(--link-ext);
  }

  .new {
    color: var(--link-new);
  }

  .footer {
    font-size: 12px;
    line-height: 1.4;
    background: var(--nav-bg);
    color: var(--nav-text);
    padding: 12px 16px;
    text-align: center;
    border-top: 1px solid var(--border);
  }
</style>
<body class="page-bg">
  <template id="panel-template">
    <header class="nav">
      <div class="nav-top">
        <div class="nav-flex">
          <a href="#" class="nav-link brand">Z</a>
          <a href="#" class="nav-link nav-current">위키</a>
          <a href="#" class="nav-link">포럼</a>
          <a href="#" class="nav-link">도구</a>
        </div>
        <div class="nav-flex">
          <a href="#" class="nav-link">로그인</a>
        </div>
      </div>

      <div class="nav-sub">
        <div class="nav-search-wrapper">
          <div class="nav-flex nav-search">
            <input class="search-input" type="search" placeholder="검색" />
          </div>
        </div>
        <div class="nav-flex">
          <a href="#" class="nav-link">랜덤</a>
          <a href="#" class="nav-link">바뀐글</a>
        </div>
      </div>
    </header>

    <main class="content">
      <h1 class="title">문서 제목</h1>

      <p class="page-meta">
        <span class="meta-left">2025-10-31 · user1</span>
        <span class="meta-right">
          <a href="#" class="meta-link">읽기</a>
          <a href="#" class="meta-link">편집</a>
        </span>
      </p>

      <p class="body-text">
        <a href="#" class="inlink">한산섬</a> 달 밝은 밤에
        <a href="#" class="inlink ext">수루</a>에 홀로 앉아 큰 칼 옆에 차고 깊은
        시름 하는 차에 어디서 <a href="#" class="inlink new">일성호가</a>는 남의
        애를 끊나니
      </p>
    </main>

    <footer class="footer">© 2025 제타위키 · CC BY-SA 4.0</footer>
  </template>

  <div class="theme-grid">
    <section class="theme-panel" id="light"></section>
    <section class="theme-panel theme-dark" id="dark"></section>
  </div>

  <script>
    const template = document.getElementById('panel-template').content;
    ['light', 'dark'].forEach(id => {
      document.getElementById(id).appendChild(template.cloneNode(true));
    });
  </script>
</body>

2 같이 보기

원본 주소 "https://zetawiki.com/w/index.php?title=2025년_제타위키_디자인&oldid=944802"
문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}