jk.nipponalba.scot website https://jk.nipponalba.scot
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This repo is archived. You can view files and clone it, but cannot push or open issues/pull-requests.

812 lines
14 KiB

5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
  1. @charset "UTF-8";
  2. @import url('https://rsms.me/inter/inter.css');
  3. html { font-family: 'Inter', sans-serif; height:100%;}
  4. @supports (font-variation-settings: normal) {
  5. html { font-family: 'Inter var', sans-serif; }
  6. }
  7. :root {
  8. --dark-link:#59ABE3;
  9. --dark-text:#f8f8f8;
  10. --dark-bg:#2b2b2b;
  11. --dark-opacity: 0.75;
  12. --light-text:#2b2b2b;
  13. --light-bg:#f8f8f8;
  14. --light-link:#0065BF;
  15. --light-opacity:1;
  16. --text-colour: var(--dark-text);
  17. --bg-colour: var(--dark-bg);
  18. --link-colour: var(--dark-link);
  19. --opacity-img: var(--dark-opacity);
  20. }
  21. @media (prefers-color-scheme: light) {
  22. --text-colour: var(--light-text);
  23. --bg-colour: var(--light-bg);
  24. --link-colour: var(--light-link);
  25. --opacity-img: var(--light-opacity);
  26. }
  27. [data-theme="light"]{
  28. --text-colour: var(--light-text);
  29. --bg-colour: var(--light-bg);
  30. --link-colour: var(--light-link);
  31. --opacity-img: var(--light-opacity);
  32. }
  33. /* Switched mode */
  34. .theme-switch:checked ~ *,
  35. .theme-switch:checked + *,
  36. .theme-switch:checked + * + *{
  37. --text-colour:var(--light-text);
  38. --bg-colour:var(--light-bg);
  39. --link-colour:var(--light-link);
  40. --opacity-img: var(--light-opacity);
  41. }
  42. .theme-switch{
  43. display:none;
  44. }
  45. .light{
  46. display:inline;
  47. float:right;
  48. color:var(--text-colour);
  49. }
  50. html {
  51. -webkit-animation-fill-mode: forwards;
  52. }
  53. body {
  54. color: var(--text-colour);
  55. font-size: 15px;
  56. width: 100%;
  57. margin: 0 auto 30px auto;
  58. background: var(--bg-colour);
  59. }
  60. #page{
  61. display:block;
  62. height:100%;
  63. color: var(--text-colour);
  64. background: var(--bg-colour);
  65. }
  66. .main, .content {
  67. background: var(--bg-colour);
  68. color: var(--text-colour);
  69. height:95%;
  70. display:block;
  71. }
  72. p {
  73. line-height: 1.9em;
  74. font-weight: 400;
  75. font-size: 14px;
  76. }
  77. a {
  78. text-decoration: none;
  79. }
  80. img {
  81. opacity: var(--opacity-img);
  82. transition: opacity .5s ease-in-out;
  83. }
  84. img:hover {
  85. opacity: 1
  86. }
  87. .category {
  88. padding: 4px 6px;
  89. border-radius: 3px;
  90. border: 1px solid var(--text-colour);
  91. }
  92. .blog {
  93. padding: 4px 6px;
  94. border-radius: 3px;
  95. background: var(--link-colour);
  96. border: 1px solid var(--text-colour);
  97. }
  98. .tag::before {
  99. content: "#";
  100. opacity: .75;
  101. }
  102. .tag, .category {
  103. display: inline-block;
  104. font-size: 15px;
  105. line-height: 1;
  106. margin: 5px 8px 5px 0;
  107. }
  108. pre {
  109. background: var(--bg-colour);
  110. padding: 5px;
  111. }
  112. .info i{
  113. opacity: 0.5;
  114. margin-right: 5px;
  115. }
  116. a:link, a:visited {
  117. opacity: 1;
  118. -webkit-transition: all .15s linear;
  119. -moz-transition: all .15s linear;
  120. -o-transition: all .15s linear;
  121. -ms-transition: all .15s linear;
  122. transition: all .15s linear;
  123. color: var(--text-colour);
  124. }
  125. a:hover, a:active {
  126. color: var(--link-colour);
  127. }
  128. .content {
  129. background: var(--bg-colour);
  130. position:fixed;
  131. left:30%;
  132. height: 100%;
  133. float: right;
  134. width: 80%;
  135. margin-top: 60px;
  136. overflow:auto;
  137. -ms-overflow-style:none;
  138. }
  139. .content::-webkit-scrollbar{
  140. display:none;
  141. }
  142. .page-top {
  143. width: 70%;
  144. position: fixed;
  145. right: 0;
  146. z-index: 3;
  147. height: 60px;
  148. border-bottom: 1px solid var(--text-colour);
  149. background: var(--bg-colour);
  150. }
  151. .page-top .nav {
  152. width:95%;
  153. list-style: none;
  154. padding: 18px 30px;
  155. float: left;
  156. font-size: 14px;
  157. display:inline-block;
  158. }
  159. .page-top .nav li{
  160. position: relative;
  161. display: initial;
  162. padding-right: 20px;
  163. }
  164. .page-top .nav a {
  165. color: var(--text-colour);
  166. }
  167. .page-top .nav a:hover {
  168. color: var(--link-colour);
  169. }
  170. .page-top .language-selector {
  171. position:relative;
  172. display:inline;
  173. float:right;
  174. vertical-align:top;
  175. }
  176. .page-top .language-selector ul{
  177. list-style:none;
  178. padding:0;
  179. margin:0;
  180. display:inline;
  181. }
  182. .page-top .language-selector li{
  183. vertical-align:top;
  184. margin:0;
  185. padding:0;
  186. padding-bottom:22px;
  187. }
  188. .page-top .language-selector i{
  189. vertical-align:top;
  190. display:inline;
  191. padding:0px 10px;
  192. }
  193. .page-top .language-selector label{
  194. margin:0px;
  195. padding:0px;
  196. display:inline;
  197. }
  198. .sidebar {
  199. width: 30%;
  200. background: var(--bg-colour);
  201. -webkit-background-size: cover;
  202. background-size: cover;
  203. height: 100%;
  204. top: 0;
  205. left: 0;
  206. position: fixed;
  207. z-index: 4;
  208. border-right: 1px solid var(--text-colour);
  209. }
  210. .sidebar #logo{
  211. max-width: 300px;
  212. width: 80%;
  213. margin: 0 auto;
  214. display:block;
  215. padding: 10px;
  216. }
  217. .sidebar img{
  218. width:150px;
  219. border-radius: 50%;
  220. }
  221. .sidebar .logo-title {
  222. text-align: center;
  223. padding-top: 240px;
  224. }
  225. .sidebar .logo-title .description {
  226. font-size: 14px;
  227. width: 60%;
  228. margin: 0 auto;
  229. color: var(--text-colour);
  230. padding-bottom:10px;
  231. }
  232. .sidebar .logo-title .logo {
  233. margin: 0 auto;
  234. }
  235. .sidebar .logo-title .title h3 {
  236. text-transform: uppercase;
  237. font-size: 2rem;
  238. font-weight: bold;
  239. letter-spacing: 2px;
  240. line-height: 1;
  241. margin: 1em;
  242. }
  243. .sidebar .logo-title .title a {
  244. text-decoration: none;
  245. color: var(--text-colour);
  246. font-size: 2rem;
  247. font-weight: bold;
  248. }
  249. .sidebar .social-links {
  250. list-style: none;
  251. padding: 0;
  252. font-size: 14px;
  253. text-align: center;
  254. }
  255. .sidebar .social-links i {
  256. margin-right: 3px;
  257. }
  258. .sidebar .social-links li {
  259. display: inline;
  260. padding: 0 4px;
  261. line-height: 0;
  262. }
  263. .sidebar .social-links a {
  264. color: var(--text-colour);
  265. }
  266. .sidebar .social-links a:hover {
  267. color: var(--link-colour);
  268. }
  269. .post, .h-entry {
  270. background: var(--bg-colour);
  271. margin: 30px;
  272. width:80%;
  273. padding-left:20px;
  274. }
  275. .post .banner{
  276. width:100%;
  277. max-height: 300px;
  278. object-fit:scale-down;
  279. object-position:top;
  280. }
  281. .post .post-title h1 {
  282. text-transform: uppercase;
  283. font-size: 30px;
  284. letter-spacing: 5px;
  285. line-height: 1;
  286. }
  287. .post .post-title h2 {
  288. text-transform: uppercase;
  289. letter-spacing: 1px;
  290. font-size: 28px;
  291. line-height: 1;
  292. font-weight: 600;
  293. color: var(--text-colour);
  294. }
  295. .post .post-title h3 {
  296. text-transform: uppercase;
  297. letter-spacing: 1px;
  298. line-height: 1;
  299. font-weight: 600;
  300. color: var(--text-colour);
  301. font-size: 22px;
  302. margin: 0;
  303. }
  304. .post .post-title a, .h-entry .post-title a {
  305. text-decoration: none;
  306. letter-spacing: 1px;
  307. color: var(--text-colour);
  308. }
  309. .post .post-title a:hover, .h-entry .post-title a:hover {
  310. text-decoration: underline;
  311. }
  312. .post .post-content a, .h-entry p a {
  313. text-decoration: none;
  314. color: var(--link-colour);
  315. }
  316. .post .post-content table, .h-entry table {
  317. border-collapse:collapse;
  318. }
  319. .post .post-content table,.post .post-content table td, .post .post-content table th,
  320. .h-entry table,.h-entry table td, .h-entry table th{
  321. border: 1px dashed var(--text-colour);
  322. }
  323. .post .post-content table td, .post .post-content table th,.h-entry table td, .h-entry table th{
  324. padding: 15px
  325. }
  326. .post .post-content a:hover, .h-entry a:hover {
  327. color: var(--link-colour);
  328. }
  329. .post .post-content h3,section aside h3 {
  330. color: var(--text-colour);
  331. font-size: 22px;
  332. font-weight: 600;
  333. }
  334. .post .post-content h4 {
  335. color: var(--text-colour);
  336. font-size: 16px;
  337. }
  338. .post .post-content img, .h-entry img {
  339. max-width: 60%;
  340. text-align: center;
  341. margin: 0 auto;
  342. display:block;
  343. padding:10px;
  344. }
  345. .post .post-footer {
  346. padding: 0 0 30px 0;
  347. border-bottom: 1px solid var(--text-colour);
  348. }
  349. .post .post-footer .meta {
  350. max-width: 100%;
  351. height: 25px;
  352. color: var(--text-colour);
  353. }
  354. .post .post-footer .meta .info {
  355. float: left;
  356. font-size: 12px;
  357. margin-bottom: 1em;
  358. }
  359. .post .post-footer .info .separator a {
  360. margin-right: 0.2em;
  361. }
  362. .post .post-footer .meta .info .date {
  363. margin-right: 10px;
  364. }
  365. .info {
  366. margin: 1em;
  367. }
  368. .post .post-footer .meta a {
  369. text-decoration: none;
  370. color: var(--text-colour);
  371. padding-right: 10px;
  372. }
  373. .post .post-footer .meta a:hover {
  374. color: var(--link-colour);
  375. }
  376. .post .post-footer .blog{
  377. color: var(--text-colour);
  378. }
  379. .post .post-footer .blog:hover{
  380. color: var(--text-colour);
  381. }
  382. .post .post-footer .meta i {
  383. margin-right: 6px;
  384. }
  385. .post .post-footer .tags {
  386. padding-bottom: 15px;
  387. font-size: 13px;
  388. }
  389. .post .post-footer .tags ul {
  390. list-style-type: none;
  391. display: inline;
  392. margin: 0;
  393. padding: 0;
  394. }
  395. .post .post-footer .tags ul li {
  396. list-style-type: none;
  397. margin: 0;
  398. padding-right: 5px;
  399. display: inline;
  400. }
  401. .post .post-footer .tags a {
  402. text-decoration: none;
  403. color: var(--text-colour);
  404. font-weight: 400;
  405. }
  406. .post .post-footer .tags a:hover {
  407. text-decoration: none;
  408. }
  409. .like-reblog-buttons {
  410. float: right;
  411. }
  412. .like-button {
  413. float: right;
  414. padding: 0 0 0 10px;
  415. }
  416. .reblog-button {
  417. float: right;
  418. padding: 0;
  419. }
  420. #install-btn {
  421. position: fixed;
  422. bottom: 0px;
  423. right: 6px;
  424. }
  425. .footer {
  426. clear: both;
  427. text-align: center;
  428. font-size: 14px;
  429. margin: 0 auto;
  430. bottom: 0;
  431. position: absolute;
  432. width: 100%;
  433. padding-bottom: 20px;
  434. background: var(--bg-colour);
  435. }
  436. .footer a {
  437. color: var(--text-colour);
  438. }
  439. .footer a:hover {
  440. color: var(--link-colour);
  441. }
  442. /*for archive*/
  443. .archive {
  444. width: 80%;
  445. }
  446. .description {
  447. color: var(--text-colour);
  448. }
  449. .list-title{
  450. margin:30px;
  451. font-size:30px;
  452. font-weight:bold;
  453. color: var(--text-colour);
  454. }
  455. .list-title i{
  456. font-size:22px;
  457. vertical-align:middle;
  458. color: var(--text-colour);
  459. }
  460. .list-with-title {
  461. font-size: 14px;
  462. margin: 30px;
  463. padding: 0;
  464. }
  465. .list-with-title li {
  466. list-style-type: none;
  467. padding: 0;
  468. }
  469. .list-with-title .listing-title {
  470. font-size: 24px;
  471. color: var(--text-colour);
  472. font-weight: 600;
  473. line-height: 2.2em;
  474. }
  475. .list-with-title .listing {
  476. padding: 0;
  477. }
  478. .list-with-title .listing .listing-post {
  479. padding-bottom: 5px;
  480. }
  481. .list-with-title .listing .listing-post .post-time {
  482. float: right;
  483. color: var(--text-colour);
  484. }
  485. .list-with-title .listing .listing-post a {
  486. color: var(--text-colour);
  487. }
  488. .list-with-title .listing .listing-post a:hover {
  489. color: var(--link-colour);
  490. }
  491. /* share */
  492. .share {
  493. margin: 0px 30px;
  494. display: inline-flex;
  495. }
  496. /* about */
  497. .about {
  498. margin: 30px;
  499. width:80%;
  500. }
  501. .about h3 {
  502. font-size: 22px;
  503. }
  504. /* links*/
  505. .links {
  506. margin: 30px;
  507. }
  508. .links h3 {
  509. font-size: 22px;
  510. }
  511. .links a {
  512. cursor: pointer;
  513. }
  514. /* Comments */
  515. .comment-count {
  516. color: #666;
  517. }
  518. .tab-community {
  519. color: #666;
  520. }
  521. .readmore {
  522. font-size: 14px;
  523. text-align:left;
  524. padding:0;
  525. text-decoration:underline;
  526. }
  527. .back-button {
  528. padding-top: 30px;
  529. max-width: 100px;
  530. padding-left: 40px;
  531. float: left;
  532. }
  533. /* Buttons */
  534. a.btn {
  535. color: #868686;
  536. font-weight: 400;
  537. }
  538. .btn {
  539. display: inline-block;
  540. position: relative;
  541. outline: 0;
  542. color: rgba(0, 0, 0, 0.44);
  543. background: transparent;
  544. font-size: 14px;
  545. text-align: center;
  546. text-decoration: none;
  547. cursor: pointer;
  548. border: 1px solid rgba(0, 0, 0, 0.15);
  549. white-space: nowrap;
  550. font-weight: 400;
  551. font-style: normal;
  552. border-radius: 999em;
  553. }
  554. .btn:hover {
  555. display: inline-block;
  556. position: relative;
  557. outline: 0px;
  558. color: #464545;
  559. background: transparent;
  560. font-size: 14px;
  561. text-align: center;
  562. text-decoration: none;
  563. cursor: pointer;
  564. border: 1px solid #464545;
  565. white-space: nowrap;
  566. font-weight: 400;
  567. font-style: normal;
  568. border-radius: 999em;
  569. }
  570. [role="back"] {
  571. padding: 0.5em 1.25em;
  572. line-height: 1.666em;
  573. }
  574. [role="home"] {
  575. padding: 0.5em 1.25em;
  576. line-height: 1.666em;
  577. }
  578. [role="navigation"] {
  579. padding: 0.5em 1.25em;
  580. line-height: 1.666em;
  581. }
  582. [role="tags"] {
  583. padding: 6px 12px;
  584. }
  585. /* Menu */
  586. .menu {
  587. float: right;
  588. padding-top: 30px;
  589. }
  590. .menu .btn-down {
  591. margin: 0px;
  592. }
  593. .menu .btn-down li {
  594. list-style: none;
  595. width: 100px;
  596. }
  597. .menu .btn-down li a {
  598. display: inline-block;
  599. position: relative;
  600. padding: 0.5em 1.25em;
  601. outline: 0;
  602. color: rgba(0, 0, 0, 0.44);
  603. background: transparent;
  604. font-size: 14px;
  605. text-align: center;
  606. text-decoration: none;
  607. cursor: pointer;
  608. border: 1px solid rgba(0, 0, 0, 0.15);
  609. white-space: nowrap;
  610. font-weight: 400;
  611. font-style: normal;
  612. border-radius: 999em;
  613. margin-top: 5px;
  614. }
  615. .menu .btn-down li a:hover {
  616. position: relative;
  617. padding: 0.5em 1.25em;
  618. outline: 0;
  619. color: #fff;
  620. background: #3CBD10;
  621. font-size: 14px;
  622. text-align: center;
  623. text-decoration: none;
  624. cursor: pointer;
  625. border: 1px solid rgba(0, 0, 0, 0.15);
  626. white-space: nowrap;
  627. font-weight: 400;
  628. font-style: normal;
  629. border-radius: 999em;
  630. margin-top: 5px;
  631. }
  632. .menu .btn-down div {
  633. position: absolute;
  634. visibility: hidden;
  635. width: 100px;
  636. float: right;
  637. }
  638. .page_404 {
  639. text-align: center;
  640. padding-top: 50px;
  641. }
  642. .pixelfed_embed {
  643. margin:0 auto;
  644. display:block;
  645. }
  646. .contents hr {
  647. color: var(--text-colour);
  648. }
  649. .contents .note, .contents .article {
  650. background-color: var(--bg-colour);
  651. border-radius:10px;
  652. padding:10px;
  653. width: 80%;
  654. margin: 10px;
  655. display:block;
  656. }
  657. .contents .note .author, .contents .article .author{
  658. width: 60px;
  659. display:block;
  660. float:left;
  661. height:100%;
  662. margin:0px;
  663. padding:0px;
  664. }
  665. .contents .note .author img, .contents .article .author img{
  666. max-width:50px;
  667. vertical-align: top;
  668. margin:0px;
  669. padding:0px;
  670. }
  671. .contents aside {
  672. width:95%;
  673. display:inline-block;
  674. vertical-align:top;
  675. margin:0px;
  676. padding:0px;
  677. }
  678. .contents aside time{
  679. font-size:12px;
  680. }
  681. .pagination {
  682. list-style:none;
  683. margin: 0 auto;
  684. border:0px;
  685. padding-top:20px;
  686. display:block;
  687. max-width: 1000px;
  688. width:100%;
  689. }
  690. .pagination li{
  691. display:inline-block;
  692. padding:10px 80px;
  693. height: 80px;
  694. }
  695. .page-top .nav #Photos, .page-top .nav #Likes, .page-top .nav #Replies, .page-top .nav #Re-posts{
  696. display:none;
  697. }
  698. @media screen and (max-width: 960px) {
  699. .sidebar {
  700. width: 100%;
  701. position: absolute;
  702. border-right: none;
  703. z-index: 1;
  704. }
  705. .sidebar .logo-title {
  706. padding-top: 100px;
  707. }
  708. .sidebar .logo-title .title img {
  709. width: 70px;
  710. }
  711. .sidebar .logo-title .title h3 {
  712. font-size: 20px;
  713. }
  714. .sidebar #logo{
  715. padding-top:80px;
  716. }
  717. .page-top {
  718. width: 100%;
  719. }
  720. .page-top .nav{
  721. width: 90%;
  722. }
  723. .page-top .nav #Likes, .page-top .nav #Replies, .page-top .nav #Re-posts{
  724. display:none;
  725. }
  726. .page-top .language-selector i{
  727. padding:0 5px;
  728. }
  729. .post-title h3, section aside h3 {
  730. line-height: 1.6;
  731. }
  732. .content {
  733. margin-top: 680px;
  734. width: 100%;
  735. z-index: 2;
  736. position: absolute;
  737. left:0;
  738. height:100%;
  739. border-top: 1px solid var(--text-colour);
  740. }
  741. .about, .post, .archive, .contents{
  742. width:95%;
  743. margin-left:15px;
  744. }
  745. .footer {
  746. display: none;
  747. }
  748. .share {
  749. display: grid;
  750. }
  751. .pagination li{
  752. display:inline-block;
  753. padding:0px 30px;
  754. height: 30px;
  755. }
  756. }