리버티게임:대문/신규 대문 (2024) 문서 원본 보기

{{#css:
  #vector-sticky-header {
    display: none !important;
  }
}}

이 문서는 [[리버티게임:대문]] 문서에 틀처럼 인용된 형태로 포함되어야 합니다! 그리고 이 문서 역시 관리자만 편집하도록 보호하는 것을 잊지 마세요!

기술적 한계<ref>예를 들어 확장 기능에서 직접 렌더링하는 SSR(Server-side Rendering)의 경우가 있습니다.</ref>를 고려한 뒤에 적용하는 색상 가이드라인은 다음과 같습니다.

* 주 녹색, 보조 녹색, 흰색, 검은색 순으로 우선순위를 넣습니다.
** 메인 녹색: #00A500
** 보조 녹색 1: #EEFFEE
** 보조 녹색 2: #BBEEBB
** 흰색: white
** 검은색: black
* 글자와 박스/선 사이에는 padding을 0보다 큰 값으로 둡니다.
* 링크는 가능하면 배경은 주 녹색, 글자는 흰색으로 넣어주세요.
** 가독성에 문제가 있는 경우 다음 조합을 대안으로 삼습니다.
*** 배경 보조 녹색 1, 글자 검은색으로 바꿉니다.
*** 배경 보조 녹색 2, 글자 #00A500으로 바꿉니다.
* 구역 구분은 다음과 같이 합니다.
** 미디어위키 문단 구분은 1차 구분으로 보고 - 4개로 줄을 그어 구분합니다.
*** 최근 업데이트는 DPL3의 렌더링 한계로 인해 초안 디자인을 유지합니다.
** 장르별 구분은 2차 구분으로 보고, border는 1px none #00A500으로 합니다.
* 모바일 대응을 반드시 고려하며, 모바일 레이아웃은 데스크탑 기준 레이아웃의 절반의 열을 가지도록 대응합니다.
** 2열의 컨텐츠는 모바일에서 1열로 수정합니다.
** 4열의 컨텐츠는 모바일에서 2열로 수정합니다.
----
<!-- 여기서부터 표시됨 -->
<onlyinclude>
__NOEDITSECTION__
<!-- 상단 바입니다.--><!-- 추천, 인기차트, 신규, 카테고리는 각각 대응되는 단락으로 이동해야 합니다. --><!-- 지원/커뮤니티는 visited CSS 이벤트를 사용합니다 -->
{{리버티게임 메뉴/2024}}
<br clear="both" />
----
<div id="mainSection" style="text-align: center;">
<div id="homeLogo"> [[파일:libertygame_logo.svg|128px|링크=]]</div>
<div id="mf-about" title="환영합니다"><span style="font-size: large;">'''자작 위키 게임 플랫폼 <span style="color:#00A500;">리버티게임</span>'''</span><br />자유롭게 게임을 즐기고 만들 수 있는 위키 기반 게임 사이트입니다.</span><br /><span style="font-size: large; background-color:#BBEEBB">{{#expr:trunc({{PAGESINCATEGORY:완성되어 변경하지 말아야 하는 게임|page}} / 2 + {{PAGESINCATEGORY:완성되었지만 추가할 수 있는 게임|page}} / 2)}}개의 게임을 [[리버티게임:게임 목록|'''지금 바로 플레이''']]하세요!</span>
</div>
----
{{#css:

  #highlight {
    background: linear-gradient(0deg, rgba(0,0,0,0.35), rgba(191,191,191,0));
    min-height: 5rem;
  }

  .embeddedText {
    position: absolute;
    background-color: linear-gradient(0deg, tranparent, rgba(0, 0, 0, 0.75));
    bottom: 0.5rem;
    color: white;
  }

  .embeddedText > span > a {
    color:inherit;
    padding: 0.1rem;
  }

  .tabs-label {
    width:10%;
    display:inline-box;
    background-color: #eeffee;
    font-size: 14px;
    text-overflow: ellipsis;
    text-wrap: nowrap;
    margin: 0.5em;
  }
  .tabs-tabbox > .tabs-label {
    border-radius: 0px;
    border: 1px none #00A500;
    background-color: #00A500;
    font-weight:bold;
    color: white;
  }
  .tabs-tabbox > .tabs-container {
    min-height: 200px;
    border-radius: 0px;
    border: 1px none #00A500;

  }
  #popular > .gamecards {
    display:grid;
    grid-template-columns: 25% 25% 25% 25%;
    column-gap: 0px;
  }
  .gamecards {
    display: grid;
    grid-template-columns: 50% 50%;
    min-width: 50%;
  }
  #advertisement, .section-ratings {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
  }

  .tabs-tabbox > .tabs-input:checked + .tabs-label, .tabs-input-0:checked + .tabs-input-1 + .tabs-label {
    color: #00A500;
  }
@media (max-width: 800px) {
    #highlight {
      background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(191,191,191,0));
      min-height: 6rem;
    }

    .embeddedText {
      position: absolute;
      background-color: linear-gradient(0deg, tranparent, rgba(0, 0, 0, 0.75));
      bottom: 0rem;
      left: 0%;
      right: 0%;
      width: 100%;
      color: white;
    }

    .embeddedText > span > a {
      color:inherit;
      font-weight: bold;
      font-size: 16px;
      padding: 0.05rem;
    }

    #advertisement {
        display: grid;
        grid-template-columns: 50% 50%;
    }
    .tabs-content > .section-ratings {
      display:grid;
      grid-template-columns: 50% 50%;
    }
    /* 인기 게임 문단의 게임카드 */
    #popular > .gamecards {
      display:grid;
      grid-template-columns: 50% 50%;
      column-gap: 0px;
    }
    /* 그 외의 게임카드 */
    .section-ratings, .gamecards {
      display:grid;
      grid-template-columns: 50% 50%;
    }
    /* 장르별 게임 보여주는 탭 */
    .tabs .tabs-label {
        width: 8%;
        font-size: 3vw;
        text-wrap: wrap;
        text-align: center;
        min-height: 50px;
        vertical-align: center;
    }
}
}}<!-- 게임카드 틀이 한 줄에 4개씩 표시하도록 변경하는 CSS 속성 설정 -->
==== 하이라이트 ==== <!-- 사용자 광고, 별도의 문서 인용으로 개량할 것 -->
<div id="highlight"><!-- 관리단 추천 1개: 게임잼 우승 작품이나 백괴시티, 백괴게임 제1회 특집 게임 같이 리버티게임에서도 의미가 있는 중요 게임 하나로 고정(랜덤 X) -->
<div class="fileContainer" style="position: relative; min-height: 5rem;">[[파일:{{JSON|마법의 MD-5 시뮬레이터/game.json|image}}|x250px|link={{JSON|마법의 MD-5 시뮬레이터/game.json|name}}|center]]<div class="embeddedText"><span style="font-size: x-large">[[{{JSON|마법의 MD-5 시뮬레이터/game.json|name}}]]</span><br />{{JSON|마법의 MD-5 시뮬레이터/game.json|summary}}</div></div>
</div>
----
<div id="advertisement"><!-- 자유 광고 4개, [[틀:대문 광고]] 하위 문서 4개에서 랜덤으로 가져오도록 변경 -->{{#invoke:IIFE|<nowiki>
<div class="adcard"><div style="min-height:150px;">{{#ifeq:{{JSON|{{{1}}}/game.json|image}}||[[파일:Libertygame logo.svg|160px|class=logo-ht]]|[[파일:{{JSON|{{{1}}}/game.json|image}}|150px|link={{JSON|{{{1}}}/game.json|name}}]]}}</div><br/><span style="font-size: large;">[[{{JSON|{{{1}}}/game.json|name}}]]</span></div>
<div class="adcard"><div style="min-height:150px;">{{#ifeq:{{JSON|{{{2}}}/game.json|image}}||[[파일:Libertygame logo.svg|160px|class=logo-ht]]|[[파일:{{JSON|{{{2}}}/game.json|image}}|150px|link={{JSON|{{{2}}}/game.json|name}}]]}}</div><br/><span style="font-size: large;">[[{{JSON|{{{2}}}/game.json|name}}]]</span></div>
<div class="adcard"><div style="min-height:150px;">{{#ifeq:{{JSON|{{{3}}}/game.json|image}}||[[파일:Libertygame logo.svg|160px|class=logo-ht]]|[[파일:{{JSON|{{{3}}}/game.json|image}}|150px|link={{JSON|{{{3}}}/game.json|name}}]]}}</div><br/><span style="font-size: large;">[[{{JSON|{{{3}}}/game.json|name}}]]</span></div>
<div class="adcard"><div style="min-height:150px;">{{#ifeq:{{JSON|{{{4}}}/game.json|image}}||[[파일:Libertygame logo.svg|160px|class=logo-ht]]|[[파일:{{JSON|{{{4}}}/game.json|image}}|150px|link={{JSON|{{{4}}}/game.json|name}}]]}}</div><br/><span style="font-size: large;">[[{{JSON|{{{4}}}/game.json|name}}]]</span></div>
</nowiki>
|{{JSON|틀:대문 광고/2024/0|{{rand|8}}}}|{{JSON|틀:대문 광고/2024/1|{{rand|7}}}}|{{JSON|틀:대문 광고/2024/2|{{rand|7}}}}|{{JSON|틀:대문 광고/2024/3|{{rand|8}}}}}}
</div>
----
<div style="text-align: center;">
==== 인기 게임 ==== <!-- 페이지 뷰 횟수 순서로 정렬, 확장 기능 필요 -->
</div>
<br />
<div id="popular">{{게임카드|{{#dpl:|namespace=|category=리버티게임|includesubpages=false|count=4|ordermethod=counter|order=descending}}|속성=설명감춤}}</div>
----
<div style="text-align: center;">
==== 최고 평가 게임 ====
</div>
<br />
<div class="section-ratings">리버티게임</div><!-- SectionRatings에 의존 -->
----
<div style="text-align: center;">
==== 장르별 인기 게임 ====
</div>
<br />
<tabs>
<tab name="어드벤처"><div class="section-ratings">어드벤처_게임</div></tab>
<tab name="탈출"><div class="section-ratings">탈출_게임</div></tab>
<tab name="액션 게임"><div class="section-ratings">액션_게임</div></tab>
<tab name="보드 게임"><div class="section-ratings">보드_게임</div></tab>
<tab name="롤플레잉"><div class="section-ratings">롤플레잉_게임</div></tab>
<tab name="캐주얼"><div class="section-ratings">캐주얼_게임</div></tab>
<tab name="퍼즐 게임"><div class="section-ratings">퍼즐_게임</div></tab>
</tabs>
----
<div style="text-align: center;">
==== 신규 출시 ==== <!-- game.json 작성 시점에 따라 최근 4개 표시, [[리버티게임:게임 목록]]에도 대응되는 분류 추가 필요? -->
</div>
<br />
{{게임카드|{{#dpl:|namespace=|category=리버티게임|notcategory=메타데이터가 없는 게임|ordermethod=firstedit|count=2}}|속성=설명감춤}}
----
<div style="text-align: center;">
==== 출시 예정 ==== <!-- '메타데이터가 없는 게임' 분류를 일단 사용하며, 추후 별도 분류로 분리할 것 + 일반 이름공간 뿐만 아니라 사용자 문서 이름공간까지 탐색할 것 -->
</div>
<br />
{{게임카드|{{#dpl:|namespace=|category=메타데이터가 없는 게임|ordermethod=lastedit|count=2}}|속성=설명감춤}}
----
<div style="text-align: center;">
==== 소생이 필요한 개방된 게임 ==== <!-- [[리버티게임:편집 초심자용 추천 게임]]에 게임카드 틀 적용 뒤 인용 -->
</div>
<br />
{{게임카드|히틀러 대신 제2차 세계 대전 이끌기,북한 군대에서 일하기|속성=설명감춤}}
----
<div style="text-align: center;">
==== 에디터 추천 게임 ==== <!-- [[리버티게임:특집 게임]]에 게임카드 틀 적용 뒤 인용 -->
</div>
<br />
{{게임카드|{{#dpl:|category=특집 게임|namespace=|ordermethod=counter|count=2}}|속성=설명감춤}}
----
<div style="text-align: center;">
==== 최근 업데이트 ==== <!-- 일반, 토론, 리버티게임 이름공간 최근바뀜 순으로 모든 문서 표시 -->
</div>
<br />
<div id="updated">
----
{{#dpl:
|namespace=¦Talk¦Project¦Project_Talk
|mode=userformat
|format=<div style="background-color: white;">,\n: <big>[[%PAGE%]]</big>,\n<small>%DATE%</small>\n----,</div>
|ordermethod=lastedit
|order=descending
|addeditdate=true
|count=8
}}
</div>
</div>
<div id="exploreOurCatalogue" style="padding: 2rem; background-color: #BBEEBB">
==== <span style="font-size: x-large;">게임 살펴보기</span> ====
여러분의 플레이를 기다리는 {{#expr:trunc({{PAGESINCATEGORY:완성되어 변경하지 말아야 하는 게임|page}} / 2 + {{PAGESINCATEGORY:완성되었지만 추가할 수 있는 게임|page}} / 2)}}개의 게임이 있습니다. 장르를 둘러보고 원하는 게임을 지금 바로 플레이해보세요!

<div style="background-color: #EEFFEE; border-radius: 1rem; width: 10rem; height: 25px; left: 50px; text-align: center;">[[리버티게임:게임 목록|모든 게임 보기]]</div>
</div>
<div id="footer" style="text-align: center;">

원하시는 게임이 없으신가요? 그렇다면 직접 게임을 직접 만들어보세요!<br>새로운 게임을 개발하거나 개방된 게임 개발에 참여할 수 있습니다. 또한 개발 포기 또는 중단된 게임을 이어받을 수도 있습니다.<br>[[리버티게임:도움말|설명문서]], [[리버티게임:도움방|게임 개발 도움방]], [[리버티게임:편집 초심자용 추천 게임|편집 초심자용 추천 게임]], [[리버티게임:도움방/아쉬운 아이디어들 모으기|아쉬운 아이디어들]], [[리버티게임:발전소|발전소]], [[:분류:버려진 게임|버려진 게임]], [[리버티게임:저작권|CC BY-NC-SA 4.0 국제에 따라 이용허가 필요]]

현재 리버티게임에서 개발 중인 게임은 {{#expr: trunc({{PAGESINCATEGORY:리버티게임|pages}} / 2 - ({{PAGESINCATEGORY:완성되어 변경하지 말아야 하는 게임|pages}} / 2 + {{PAGESINCATEGORY:완성되었지만 추가할 수 있는 게임|pages}} / 2))}}개입니다. 개발 중인 게임을 포함한 총 게임 개수는 <!-- 보존된 게임 제외한 게임 갯수 --><span class="pagecount">리버티게임</span>개입니다.

리버티게임은 여러 개인들이 자발적으로 모여 만들어나가는 비영리 사이트입니다. 특정한 법인 혹은 그와 동격인 단체가 운영하지 않습니다.
</div>
</onlyinclude>