골목길 게시물 포맷

/* ---------- 전역 변수 ---------- */
:root {
    --header-padding: calc(((100vw - var(--content-size)) / 2) + 40px);
    --header-padding-second: 2.5rem;
    --header-padding-third: 5vw;
    --topbar-height: 30px;
    --content-size: 1500px;
    --theme-color: 209, 232, 255;
 
    --body-font: -apple-system, BlinkMacSystemFont, 'Open Sans', sans-serif;
}
 
/* ---------- 글꼴 ---------- */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');
 
body {
    font-family: var(--body-font);
    font-size: .9em;
}
 
li, p {
    line-height: 180%;
}
 
h1, h2, h3, h4, h5, h6 {
    font-family: var(--body-font);
}
 
/* ---------- 속성 초기화 ---------- */

input {
    -webkit-appearance: none;
    -webkit-border-radius: 0;
}
 
#content-wrap {
    max-width: var(--content-size);
    min-height: 2350px;
    margin-top: 3em;
}
 
#header, #top-bar {
    width: 100%;
    max-width: 100%;
    height: var(--topbar-height);
}
 
#extra-div-1 {
    background-image: linear-gradient(to bottom, rgb(0, 0, 0), rgb(128,128,128));
    height: 140px;
    width: 100%;
    top: 0;
    position: absolute;
}
 
#header {
    top: 0;
    box-sizing: border-box;
    position: sticky;
}
 
#header h1 a,
#header h2 {
    margin-left: var(--header-padding);
}
 
#login-status,
#search-top-box {
    margin-right: var(--header-padding);
}
 
#login-status ul a:hover {
    background-color: rgb(var(--theme-color));
    text-decoration: none;
}
 
@media (max-width: 1499px) {
    #header h1 a, #header h2 {
        margin-left: var(--header-padding-second);
    }
 
    #login-status,
    #search-top-box {
        margin-right: var(--header-padding-second);
    }
}
 
@media (max-width: 767px) {
    #header h1 a, #header h2 {
        margin-left: var(--header-padding-third);
    }
 
    #header h2::after {
        display: none;
    }
 
    #login-status,
    #search-top-box {
        margin-right: var(--header-padding-third);
    }
 
    #top-bar .open-menu a {
        display: flex;
        justify-content: center;
        bottom: 1rem;
        left: 1rem;
        padding: 6px;
        background-color: rgb(53, 53, 53);
        border: none;
        border-radius: 0;
        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .2), 0 3px 10px 0 rgba(0, 0, 0, .19);
        color: rgb(255, 255, 255);
        transition: .1s cubic-bezier(0.4, 0, 0.2, 1);
    }
 
    .mobile-top-bar > ul > li:nth-last-child(2) > ul {
        right: 0;
    }
 
    #side-bar {
        background-color: rgb(255, 255, 255);
    }
}
 
#header h1 a span,
#header h2 span {
    font-size: 0;
}
 
#header h1 {
    position: absolute;
    top: -6rem;
    margin-left: 0;
    float: inherit;
    max-height: inherit;
    text-shadow: none;
}
 
#header h1 a {
    padding: 0;
    color: rgb(var(--theme-color));
    font-size: 180%;
    line-height: 1;
    letter-spacing: 0;
    text-shadow: none;
    transition: text-shadow .1s ease-in-out;
}
 
#header h1 a::after {
    display: block;
    width: 178.5px;
    height: 80px;
    background-image: url('https://2021.wdfiles.com/local--files/theme%3Ahideout/front.svg');
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain;
    color: transparent;
    content: '';
}
 
#header h2 {
    position: absolute;
    top: -2.5rem;
    color: rgb(var(--theme-color));
    font-family: inherit;
    text-shadow: none;
    letter-spacing: .5em;
}
 
#header h2::after {
    margin-left: 178.5px;
    content: '양지로 나가지 못하는 사람들';
}
 
#header h2 span {
    padding: 0;
}
 
#top-bar {
    position: inherit;
    background-color: rgb(53, 53, 53);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    color: rgb(255, 255, 255);
}
 
#top-bar ul li a {
    padding-top: calc(var(--topbar-height) / 2);
    padding-bottom: calc(var(--topbar-height) / 2.1);
    transition: background .1s cubic-bezier(0.4, 0, 0.2, 1);
}
 
#top-bar ul li a {
    background-color: rgb(53, 53, 53) !important;
}
 
#top-bar ul li.sfhover a:hover,
#top-bar ul li:hover a:hover {
    background: rgb(255, 255, 255) !important;
}
 
#top-bar ul li.sfhover ul li a,
#top-bar ul li:hover ul li a {
    border-top: none;
}
 
#top-bar > div > ul > li > a {
    color: inherit;
    font-weight: bold;
}
 
#top-bar ul li.sfhover a, #top-bar ul li:hover a, .c_topbar_arrow {
    color: darkgray;
}
 
/* Nested topbar fix */
#top-bar ul li ul li ul {
    left: 176px;
}
 
.top-bar > ul {
    display: flex !important;
    justify-content: center;
    width: 100%;
}
 
.mobile-top-bar {
    position: inherit;
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 100%;
}
 
@media (min-width: 768px) {
    .mobile-top-bar {
        display: none;
    }
}
 
#login-status {
    top: -8rem;
}
 
#search-top-box {
    top: -4rem;
}
 
#search-top-box-form {
    display: inline-flex;
    background-color: rgb(53, 53, 53);
    border: 3px solid rgb(53, 53, 53);
}
 
#search-top-box-form > * {
    padding: .25em .5em;
    border: none !important;
    border-radius: 0;
    box-shadow: none !important;
}
 
#search-top-box-input {
    background-color: rgb(85, 85, 85) !important;
    transition: .1s cubic-bezier(0.4, 0, 0.2, 1);
}
 
#search-top-box-input:hover {
    background-color: rgb(119, 119, 119) !important;
    cursor: pointer;
}
 
#search-top-box-input:focus-visible {
    background-color: rgb(119, 119, 119) !important;
    cursor: text;
}
 
#search-top-box-form input[type=submit] {
    margin: 0;
    background: rgb(53, 53, 53) !important;
    border-radius: 0;
}
 
#search-top-box-form input[type=submit]:hover {
    background: rgb(119, 119, 119) !important;
}
 
#container {
    padding-top: 140px;
}
 
/* 사이드바 임시디자인, 안 예쁨 */
#side-bar {
    color: rgba(0, 0, 0, .2);
    font-weight: bold;
}
 
#side-bar a,
#side-bar a:visited {
    color: rgb(51, 51, 51);
}
 
#side-bar .side-block {
    padding: 10px 0;
    background-color: rgb(255, 255, 255) !important;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
 
#side-bar div.menu-item {
    margin: 10px;
}
 
#side-bar div.menu-item img {
    display: none;
}
 
#side-bar div.menu-item a {
    font-weight: normal;
    letter-spacing: -2px;
}
 
#side-bar .heading {
    margin-top: 20px;
    margin-bottom: 10px;
    padding: .5em 1em;
    border-bottom: none;
    font-size: 1em;
}
 
#main-content {
    margin: 0 24em;
}
 
#u-side-bar {
    position: absolute;
    top: 6px;
    right: -22em;
    width: 230px;
}
 
#u-side-bar p {
    margin: 0;
}
 
.right-block {
    margin-bottom: 15px;
    padding: 10px 0;
    background-color: rgb(255, 255, 255);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .2);
}
 
#u-side-bar .heading {
    display: block;
    margin-top: 20px;
    margin-bottom: 10px;
    padding: .5em 1em;
    padding-left: 15px;
    background-color: rgb(62, 62, 62);
    border-bottom: none;
    color: rgb(255, 255, 255);
    font-size: 1em;
    font-weight: bold;
}
 
#u-side-bar .menu-item {
    display: flex;
    padding: 10px;
}
 
#u-side-bar .ad {
    transition: filter ease-out .2s;
}
 
#u-side-bar .ad:hover {
    cursor: pointer;
    filter: brightness(.75);
}
 
@media (max-width: 1410px) {
    #main-content {
        margin: 0 2em 0 22em;
    }
 
    #u-side-bar {
        position: fixed;
        top: 0;
        right: -20em;
        padding: 1em;
        height: 100%;
        background-color: rgb(255, 255, 255);
        box-shadow: 0 0 1rem rgba(0, 0, 0, .5);
        overflow-y: scroll;
        overscroll-behavior: none;
        transition: .5s;
        transition-delay: .13s;
        z-index: 10;
    }
 
    #u-side-bar::before {
        display: flex;
        position: fixed;
        top: 50%;
        right: 0;
        bottom: 0;
        width: 1rem;
        height: 10rem;
        background-color: rgba(0, 0, 0, .7);
        border-radius: .5rem 0 0 .5rem;
        box-shadow: 0 0 3px black;
        color: white;
        transform: translateY(-50%);
        transition: .1s;
        content: '🡄\A　\A🡄\A　\A🡄';
        align-items: center;
    }
 
    #u-side-bar:hover::before {
        right: -2rem;
        cursor: pointer;
        transition-delay: .63s;
    }
 
    #u-side-bar:hover {
        right: 0;
    }
}
 
@media (min-width: 768px) and (max-width: 979px) {
    #top-bar ul li ul li ul {
        left: 136px;
    }
 
    #main-content {
        margin: 0 4em 0 20em;
    }
}
 
@media (max-width: 767px) {
    #main-content {
        max-width: 90%;
        margin: 0 5%;
    }
}
 
#page-options-container {
    margin-top: 2em;
}
 
#page-options-container > * {
    text-align: center;
}
 
.page-watch-options {
    display: none;
}
 
.page-options-bottom > .btn {
    display: inline-block;
}
 
h1, #page-title {
    color: inherit;
}
 
#page-title {
    font-size: 1.4em;
    font-weight: normal;
}
 
blockquote,
div.blockquote {
    margin-block-start: 1.5em;
    margin-block-end: 1.5em;
    padding: .5em 1em;
    background-color: rgb(250, 250, 250);
    border: 2px solid rgba(0, 0, 0, .05);
    border-left: 5px solid rgb(var(--theme-color));
}
 
/* 재조정 필요? */
a {
    color: rgb(91, 145, 191);
}
 
a:visited {
    color: rgb(57, 99, 135);
}
 
a.newpage {
    color: rgb(216, 185, 116);
}

[공지골] 전반적인 뒷골목 규칙

깡패일수도♦2014.04.09. 21:09

골목길은 2개로 나눠져 있는데, 하나는 앞골목이고 하나는 뒷골목임.

앞골목은 대충 블라인드 비슷한거임. 서로 자기 단체 소속 까고 대화하고, 정상성 유지 단체 일원들도 ㅈㄹ만 안하면 보통 받아줌. 물론 인증 수단같은건 없으니까 딱히 믿지는 마셈 이게 제일 중요함.
앞골목에 가입한 사람은 닉네임 옆에 아이피 대신 단체이름이 뜨고, 뒷골목에서도 그렇게 뜨니까 신중하게 가입하셈.

뒷골목은 그냥 온갖 잡다한게 다 있는 곳임. 게시판같이 골목들이 나눠져 있고, 원하면 자기가 새로운 골목을 개설할수도 있음. 처음 오는 사람들이면 잡담골이나 게임골 가는거 추천함.

골목마다 추천 많이 받으면 글 옆에 ✧가 붙음. 보통 핫골목에 간다고 부름. 필요한 추천수는 골목마다 다름.

뒷골목도 앞골목 비슷하게 고닉 팔수 있음. 계정 설정 들어가서 닉네임 중복확인 해본다음 닉네임 고정시키면 됨. 그러면 닉네임 옆에 아이피가 사라지고 ♦이 붙으니까, 얘도 신중하게 결정하셈. 만약 고닉 판 다음에 앞골목에서 인증하면 ♦는 사라지고 너가 앞골목에 등록한 단체 이름이 붙음. 고닉은 그대로니까 걱정은 하지 말고.

골목길 사이트 자체는 내가 관리하지만, 골목들은 내가 아니라 그 골목 개설자랑 개설자가 지정한 사람들이 관리함. 그래서 골목마다 사이트 규칙이 다 다름. 그래도 보편적인 규칙은 똑같으니까 이거 잘 읽으셈.

골목마다 있는 관리자들은 전부 이름 옆에 ♦가 붙고, 부관리자들은 ♦가 붙음. 골목길 유저들은 보통 색깔 보고 금딱이랑 은딱이라고 부르는데, 딱히 지정한 공식 명칭은 없으니 편하게 불러도 됨. 물론 사이트 관리자인 나도 금딱임.

👍436 👎32

도둑놈쉐리♦2014.04.09. 21:10

지금부터 완장찬양을 시작하겠습니다

아무거나연구함(SCP 재단)2014.04.09. 21:12

대충 법정에서 하는 완장찬양콘

그냥변칙임(11167)2014.04.09. 21:11

이거 개인이 만든 음모론같은거 올리면 차단함?

명천구사우나수건도둑(22324)2014.04.09. 21:32

여러 출처를 지키는 금딱… 이거 귀하군요

구에에에엑(37733)2014.04.09. 21:39

구오ㅔㅇ에에엑 구오ㅔㅇ에에엑 구오ㅔㅇ에에엑 구오ㅔㅇ에에엑 구오ㅔㅇ에에엑 구오ㅔㅇ에에엑 구오ㅔㅇ에에엑 구오ㅔㅇ에에엑 구오ㅔㅇ에에엑 구오ㅔㅇ에에엑 구오ㅔㅇ에에엑 구오ㅔㅇ에에엑 구오ㅔㅇ에에엑 구오ㅔㅇ에에엑 구오ㅔㅇ에에엑

구에에에엑(37733)2014.04.09. 21:39

영원한노예♦2014.04.09. 21:39

"1달 차단"

연합싫다(11234)2014.04.09. 21:42

은딱 그는 신이야!

메카네코쨩(부서진 신의 교단)2014.04.09. 21:45

돌쇠(나루건설)2014.04.09. 22:08

여기 관리자가 우리회사보다 운영 잘하네

ㅇㅇ(33452)2014.04.09. 22:14

이거 올린새끼 다크넷으로 꺼져버리지 왜 여기서 난리지 진짜 이해가 안가네

도둑놈쉐리(63552)2014.04.09. 22:15

병신아 운영자야

쇠가아닌은질러(삼대천 체육관)2014.04.09. 22:18

ㅅㅂ 금딱게이야 근육노출도 차단이였냐 글목록 보고 해명좀

밥요정(앰브로즈 레스토랑스)2014.04.09. 22:22

근육노출? 게이게이야……

쇠가아닌은질러(삼대천 체육관)2014.04.09. 22:22

게이 아니야 ㅅㅂ롬아

김김김김♦2014.04.09. 22:30

나르시스트임?

댓글 더 보기

페이지 내역: 58, 마지막 수정: 15 Oct 2021 13:05

편집 평가 (0) 태그 토론하기 내역 파일 인쇄 사이트 도구 + 설정

제2021K기지

Explicit sandbox

댓글(189)