틀:리버티게임 메뉴/대문: 두 판 사이의 차이

2024년 10월 11일 (금) 14:32 기준 최신판

인기 게임 게임 장르 주요 게임 업데이트

커뮤니티

지원

2024년 이후 리버티게임 대문에 사용할 네비게이션 메뉴입니다.

같이 보기[원본 편집]

레거시

@@ 1번째 줄: / 1번째 줄: @@
-<onlyinclude>
+<onlyinclude>__NOTOC__{{#css:
-{{#css:
 .ns-4 #content, .ns-4 #p-cactions li a:hover, .ns-4 #p-cactions li.selected a, .ns-12 #content, .ns-12 #p-cactions li a:hover, .ns-12 #p-cactions li.selected a {
      background-color: #eeffee;
 }
-#docTop {
+#docTopWithoutHeader {
+  --upper-height: 2.3rem;
    position: sticky;
    top: 0px;
@@ 13번째 줄: / 14번째 줄: @@
 }
-#docTop .upper {
+#docTopWithoutHeader .upper {
-   width:30%;
+   width:100%;
    text-align:center;
+  font-size: 1.2em;
 }
-#docTop div span {
+#docTopWithoutHeader div span {
-     color: #00A500;
+     background-color: #BBEEBB;
+    color: black;
+    height: 24px;
 }
-#docTop div span a {
+#docTopWithoutHeader div span a {
      color: inherit;
      text-decoration: none;
@@ 28번째 줄: / 32번째 줄: @@
 }
-#docTop span span {
+#docTopWithoutHeader .upper span {
-     background-color: #eeffee;
+    position:relative;
-     color: #00A500;
+     background-color: #00A500;
-     overflow-wrap:break-word;
+     color: white;
+     word-break:keep-all;
+    height: var(--upper-height);
+    line-break:keep-all;
 }
+#docTopWithoutHeader .upper span a {
-#docTop span span a {
      color: inherit;
+    padding: 0.65rem;
      text-decoration: none;
+    line-height: 1;
      font-weight: bold;
      display:block;
+}
+#header-lower {
+     position: absolute;
+    left: 0%;
+    right: 0%;
+    top: calc(var(--upper-height) + 3px);
+    bottom: 100px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+}
+@media (max-width: 420px) {
+    #docTopWithoutHeader {
+        --upper-height: 2rem;
+    }
+    #docTopWithoutHeader .upper {
+        font-size: 1em;
+    }
+}
+@media (max-width: 22.85rem) {
+    #docTopWithoutHeader {
+        --upper-height: 3.3em;
+    }
 }
@@ 60번째 줄: / 91번째 줄: @@
 #community-link {
    text-align:center;
-   height:25px;
+   height:24px;
 }
 #support-link {
    text-align:center;
-   height:25px;
+   height:24px;
 }
 #community-link #menusubList1 {
-   transition: 0.3s transform linear;
+   transition: 0.2s transform linear;
    transform: scale(1, 0);
    transform-origin: 0% 0%;
@@ 77번째 줄: / 108번째 줄: @@
    box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.3);
    visibility: hidden;
+}
+#community-link:hover {
+  background-color: white;
+  color: black;
 }
@@ 82번째 줄: / 118번째 줄: @@
    visibility: visible;
    transform: scale(1);
+  color: #00A500;
 }
@@ 91번째 줄: / 128번째 줄: @@
    width: 100%;
    top: 28px;
-   box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.3);
+   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
    visibility: hidden;
+}
+#support-link:hover {
+  background-color: white;
+  color: black;
 }
@@ 98번째 줄: / 140번째 줄: @@
    visibility: visible;
    transform: scale(1);
+  color: #00A500;
 }
@@ 110번째 줄: / 153번째 줄: @@
 .dropdown-button a {
    display:block;
+  word-break: keep-all;
 }
 }}
-<!-- 상단 바입니다.--><!-- 추천, 인기차트, 신규, 카테고리는 각각 대응되는 단락으로 이동해야 합니다. --><!-- 지원/커뮤니티는 visited CSS 이벤트를 사용합니다 -->
+<!-- 상단 바입니다. --><!-- 상단 링크는 각각 대응되는 단락으로 이동해야 합니다. --><!-- 커뮤니티/지원 링크는 visited CSS 이벤트를 사용합니다. -->
-<div id="docTop" style="background-color:#00A500;">
+<div id="docTopWithoutHeader" style="background-color:#eeffee;">
-<span class="upper" style="display:grid;grid-template-columns:50% 50%;float:left;">
+<span class="upper" style="display:grid;grid-template-columns:repeat(4, 1fr);">
-<span style="position:relative; left:1%; width:98%; border-radius:0.2rem; >[[#인기 게임|인기 게임 차트]]</span>
+<span style="position:relative; left:1%; width:98%; >[[#인기 게임|인기 게임]]</span>
-<span style="position:relative; left:1%; width:98%; border-radius:0.2rem;">[[#최고 평가 게임|플레이 추천]]</span>
+<span style="position:relative; left:1%; width:98%;">[[#장르별 인기 게임|게임 장르]]</span>
-</span><span class="upper" style="display:grid;grid-template-columns:50% 50%;float:right;">
+<span style="position:relative; left:1%; width:98%;">[[#추천 게임|주요 게임]]</span>
-<span style="position:relative; left:1%; width:98%; border-radius:0.2rem;">[[#카테고리|카테고리]]</span>
+<span style="position:relative; left:1%; width:98%;">[[#최근 업데이트|업데이트]]</span>
-<span style="position:relative; left:1%; width:98%; border-radius:0.2rem;">[[#최근 업데이트|최근 업데이트]]</span>
 </span>
-<div style="position:absolute;left:0%;right:0%;top:40px;bottom:100px;display:grid;grid-template-columns:1fr 1fr;">
+<div id="header-lower">
-<span id="community-link" style="background-color: #bbeebb; padding:0.1em;">[[#커뮤니티|커뮤니티]]<div id="menusubList1" style="text-align:center;display:grid;grid-template-columns:25% 25% 25% 25%;background-color:#00A500;">
+<span id="community-link" style=" padding:0.1em;">[[#커뮤니티|커뮤니티]]<div id="menusubList1" style="text-align:center;display:grid;grid-template-columns:25% 25% 25% 25%;background-color:#00A500;">
 <div class="dropdown-button">[[리버티게임:오락실|오락실]]</div> <div class="dropdown-button">[[리버티게임:발전소|발전소]]</div> <div class="dropdown-button">[[리버티게임:토론란|토론란]]</div> <div class="dropdown-button">[[리버티게임:특집 게임|추천 게임 토론]]</div>
 </div></span>
-<span id="support-link" style="background-color: #bbeebb;padding:0.1em;">[[#지원|지원]]<div id="menusubList2" style="text-align:center;display:grid;grid-template-columns:20% 20% 20% 20% 20%;background-color:#00A500;">
+<span id="support-link" style="padding:0.1em;">[[#지원|지원]]<div id="menusubList2" style="text-align:center;display:grid;grid-template-columns:20% 20% 20% 20% 20%;background-color:#00A500;">
 <div class="dropdown-button">[[리버티게임:소개|리버티게임 소개]]</div> <div class="dropdown-button">[[리버티게임:길라잡이|길라잡이]]</div> <div class="dropdown-button">[[리버티게임:도움말|도움말]]</div> <div class="dropdown-button">[[리버티게임:도움방|게임 개발 도움방]]</div> <div class="dropdown-button">[[리버티게임:정책과 지침|정책과 지침]]</div>
 </div>