links/main.css · webring

git.iko.soy/webring

102 lines 6.9 kB history raw

1* { margin:0;padding:0;border:0;outline:0;text-decoration:none;font-weight:inherit;font-style:inherit;color:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;list-style:none;border-collapse:collapse;border-spacing:0; -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}

3body { background: #f4f4f4; padding: 0px; margin: 0px; font-family: 'input_mono', 'Monospaced', 'Courier New', 'Courier', monospace; }

4body > div { background: #111; min-height: calc(100vh - 60px); width: calc(100vw - 60px); margin: 15px; padding: 15px; font-size:11px; color:white; position: relative; }

5body > div > ul { padding-bottom: 15px; margin-bottom:15px; }

6body div p { display:block; padding:0px 5px; line-height: 20px;}

7body footer { border-top: 2px solid white; padding-top: 15px; margin-top: 15px;}

8body footer a { text-decoration: underline; }

9body strong { font-weight: bold; }

10body .selected { background: white; color:black; }

12/* portal */

13body #portal { display: flex; flex-direction: column; }

14body #portal main { flex: 1 0 auto; }

15body #portal main,

16body #portal footer { max-width: 1080px; flex-shrink: 0 }

17body #portal #icon { display: block; width: 30px; height: 30px; background-image: url(../icon.white.svg); background-size: cover; background-repeat: no-repeat; position: absolute; bottom: 15px; right:15px; background-position: center; padding:0px }

18body #portal ul { columns:1; }

19body #portal ul li { display:block; padding-left:5px; text-overflow: ellipsis; text-transform: lowercase;}

20body #portal ul li:before { content: attr(id) ")"; }

21body #portal ul li::after { content:"<" attr(data-type) attr(data-lang) ">"; color:#555; }

22body #portal ul li a { line-height: 20px; padding:0px 5px; text-decoration: none;}

23body #portal ul li a:visited { color:#ccc; text-decoration: none;}

24body #portal a:active,

25body #portal a:focus,

26body #portal a:hover { text-decoration: underline; }

28body #portal nav { display: flex; flex-direction: row; margin-bottom: 15px }

29body #portal nav a { margin: 0 5px; color: gray }

30body #portal nav a.currentType,

31body #portal nav a.currentLang { color: white }

33body aside { min-width: 200px; padding: 0 15px; line-height: 16px; display: none; }

34body aside ul { margin-bottom: 15px; }

35body aside #channels li:before, body #sidebar #categories li:before { content:'/'; }

36body aside #users li:before { content:'@'; }

37body aside span.right { color: #555; float: right; }

38body aside li { text-transform: lowercase; cursor: pointer; }

40/* hallway */

41body #hallway #entries { display: flex; margin-top: 35px; }

42body #hallway #entries > div { flex-grow: 1; }

43body #hallway #showbar { position: absolute;top: 0px;width: 92%;height: 50px; background-image: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22'><path d='M11,4 L11,18 M4,4 L 4,18 M18,4 L18,18' stroke='%23555' fill='none' stroke-width='2' stroke-linecap='round'/></svg>");background-repeat: no-repeat;background-position: right;background-size: 25px; }

44body #hallway #hidebar { position: absolute;top: 0px;width: 100%;height: 50px;background-image: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22'><path d='M5,5 L17,17 M17,5 L5,17' stroke='%23555' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat: no-repeat;background-position: left;background-size: 25px; }

45body #hallway .entry { line-height: 16px; display: block; position: relative; padding-left:100px; }

46body #hallway .entry .date { color: #555;display: block;float:right; margin-left:20px; padding-bottom: 16px;}

47body #hallway .entry .author { font-weight: bold; position: absolute; left: 0px; }

48body #hallway .entry .body { display: block;border-bottom: 1px solid #333;padding-bottom: 10px;margin-bottom: 10px; }

49body #hallway .entry .body a { text-decoration: underline; }

50body #hallway .entry .body .channel { display: inline-block; border-radius: 1px; font-weight: bold; color: #777; }

51body #hallway .entry .body .user { display: inline-block; border-radius: 1px; font-weight: bold; color: #777; }

52body #hallway .entry .body .user.local::before { content:'@';color: #777; }

53body #hallway .entry .body .user.external::before { content:'^';color: #777; }

54body #hallway .entry .body .tag { display: inline-block; border-radius: 1px; font-weight: bold; color: #777; }

55body #hallway .entry.highlight .author { color:#555; }

56body #hallway .entry:hover .author { color:#ccc; }

57body #hallway .entry:hover .date { color:#ccc; }

58body #hallway .entry:hover .body { color:#ccc; border-bottom-color: #555 }

59body #hallway #footer { padding-left: 60px; background-image: url(../icon.white.svg); background-size: 40px; background-repeat: no-repeat; background-position: 0px 20px; border-top: 2px solid white; padding-top: 20px; margin-top: 15px; min-height: 45px; line-height: 15px;}

61body #hallway #pagination { margin: 10px; text-align: center; }

62body #hallway #pagination span { padding: 3px; margin: 2px; cursor: pointer; }

64/* wiki */

65body #wiki { background: #ccc; color:#333; }

66body #wiki main { display: flex; }

67body #wiki main { flex: 1; }

68body #wiki main h1 { font-size: 1.3em; margin: 5px 0; font-weight: bold; }

69body #wiki main div.related { border-bottom: 1px solid white; margin-bottom: 10px; }

70body #wiki #main { width: 100%; }

71body #wiki #main > a { text-decoration: underline; }

72body #wiki #main a:hover { text-decoration: underline; }

73body #wiki #main ul li { line-height: 15px; }

74body #wiki aside { min-width: 220px; }

75body #wiki aside { overflow-y: scroll; height: calc(100% - 15px); position: absolute; right: 0;}

76body #wiki aside a { display: inline-block; width: 135px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding: 7px; }

77body #wiki aside li { line-height: 7px; }

78body #wiki aside li:before { display: none; }

79body #wiki aside a:before { content: '/'; }

80body #wiki aside a:after { content: attr(data-msgs) " msgs"; position: absolute; right: 20px; color:#555; }

81body #wiki ul.term { margin-bottom: 15px; }

82body #wiki ul.term li.name { margin-bottom: 5px; }

83body #wiki #footer { padding-left: 60px; background-image: url(../icon.white.svg); background-size: 40px; background-repeat: no-repeat; background-position: 0px 18px; border-top: 2px solid white; padding-top: 12px; margin-top: 15px; min-height: 45px; line-height: 15px;}

85/* progress indicator */

86body #progress { color: #777; }

88@media (min-width: 630px) {

89 body aside { display: block; }

90 body #portal ul { columns: 3;}

91 body #hallway #entries { margin-top: 0; }

92 body #hallway #showbar { display: none; }

93 body #hallway #hidebar { display: none; }

94 body #hallway #footer { max-width: calc(100% - 300px); }

95 body #wiki main { max-width: calc(100% - 230px); }

96 body #wiki footer { margin-right: 225px; max-width: calc(100% - 300px); }

97}

99@media (min-width: 992px) {

100 body #portal ul { columns: 4;}

101}

102