/* ------------------------------------------------------------------ benyaminnajafi.ir — original theme stylesheet, recovered. Only asset URLs were rewritten to local paths; the layout is untouched. Note: the document stays LTR (no dir on ). That is what puts .main on the left and keeps .nav in source order. RTL lives on .article, exactly as in the original theme. ------------------------------------------------------------------ */ @font-face { font-family: Vazir; src: url('../fonts/vazir/Vazir-Thin.woff2') format('woff2'); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: Vazir; src: url('../fonts/vazir/Vazir-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: Vazir; src: url('../fonts/vazir/Vazir-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: Vazir; src: url('../fonts/vazir/Vazir-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: Vazir; src: url('../fonts/vazir/Vazir-Bold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: Vazir; src: url('../fonts/vazir/Vazir-Black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; } * { box-sizing: border-box; text-decoration: none; outline: none; } *::selection { background: #FAD961; } body { font-family: Vazir, Tahoma, sans-serif; /* the original left this to the browser default, which shows through as dark on a dark-mode canvas above .main's collapsed 80px margin */ background: #fff; color-scheme: light; position: relative; margin: 0 0; display: block; width: auto; height: auto; } .header { display: block; position: fixed; right: 0; width: calc(38% - 1px); top: 0; height: calc(100% - 190px); background: #fdfdfd; background-image: url(../img/cover.jpg); border-left: 1px solid #ccc; background-position: center center; background-size: cover; background-repeat: no-repeat; box-shadow: 2px 0 7px 0 rgba(0,0,0,0.05) inset; left: auto; } .aside { font-family: inherit; position: fixed; right: 0; bottom: 0; left: auto; top: auto; background: #fff; text-align: center; box-shadow: 2px 0 7px 0 rgba(0,0,0,0.05) inset; width: calc(38% - 1px); border-left: 1px solid #ccc; height: 190px; } .figure { background-image: url(../img/avatar.jpg); height: 100px; width: 100px; display: inline-block; background-position: center; border-radius: 100%; background-repeat: no-repeat; border: 3px solid #fff; position: relative; margin: 0 auto; background-size: cover; cursor: zoom-in; padding: 0; top: -54px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); } .figcaption { font-family: inherit; font-weight: 700; font-size: 24px; cursor: default; position: relative; color: #000; top: -54px; word-spacing: -2px; } .figcaption a { color: #000; transition: color 0.2s ease-in-out; } .figcaption a:hover { color: #999; } .bio { font-family: inherit; font-weight: 100; font-size: 16px; cursor: default; position: relative; color: #4c4c4c; display: block; bottom: 48px; letter-spacing: -.4px; } .nav a { font-family: inherit; font-weight: 100; font-size: 15px; position: relative; color: #999; display: inline-block; bottom: 24px; letter-spacing: -0.4px; word-spacing: -1px; margin: 0 12px; text-decoration: none; transition: color 0.2s ease-in-out; } .nav a:hover { color: #101010; } .main { position: static; width: 62%; display: block; height: 100%; background: #fff; } .backward { margin: -50px 0px 27px 0px; } .backward a { color: #999; transition: color 0.2s ease-in-out; } .backward a:hover { color: #000; } .article { text-align: right; direction: rtl; font-family: Vazir, Tahoma, sans-serif; margin: 40px 100px 100px 160px; } .article:first-child { margin-top: 80px; } .article h1 { font-family: inherit; font-size: 24px; font-weight: 500; margin: 0px 0px 16px 0px; letter-spacing: -0.4px; color: #000; transition: color 0.2s ease-in-out; } .article h1:hover { color: #999; } .none:hover { opacity: 1 !important; } .article span { font-family: inherit; font-size: 16px; margin: 0 0 0px 24px; color: #999; font-weight: 100; cursor: default; display: inline-block; } .article p { font-family: inherit; font-size: 16px; line-height: 1.8; margin: 16px 0 0; font-weight: 100; color: #333; } /* English posts run left-to-right. WordPress already tagged its English paragraphs with dir="ltr"; build.py adds it to whole articles whose title is Latin, so the heading turns with the text. */ .article[dir="ltr"], .article [dir="ltr"] { direction: ltr; text-align: left; } .article a { color: inherit; border-bottom: 1px solid #ccc; transition: border-color 0.2s ease-in-out; } .article a:hover { border-bottom-color: #333; } .article img, .article iframe { max-width: 100%; } @media only screen and (min-width: 0px) and (max-width: 961px) { .header { display: block; position: relative; right: 0; width: 100%; top: 0; height: 200px; background: #fdfdfd; background-image: url(../img/cover.jpg); border-left: 0px; background-position: center center; background-size: cover; background-repeat: no-repeat; box-shadow: 2px 0 7px 0 rgba(0,0,0,0.05) inset; left: 0; } .aside { font-family: inherit; position: absolute; right: 0; bottom: auto; left: 0; top: 200px; background: #fff; text-align: center; box-shadow: 2px 0 7px 0 rgba(0,0,0,0.05) inset; width: 100%; border-left: 1px solid #ccc; height: auto; } .main { position: static; width: 100%; display: block; height: 100%; background: #fff; margin: 220px auto; } .article:first-child { margin-top: 0; } .article { text-align: right; direction: rtl; font-family: Vazir, Tahoma, sans-serif; margin: 80px 20px; } .backward { margin: 0px 0 12px 0; } }