Skip to content

Commit cc6d3e6

Browse files
BarkingBadBarkingBad
committed
POC
1 parent 968dd1b commit cc6d3e6

File tree

2 files changed

+330
-5
lines changed

2 files changed

+330
-5
lines changed

‎docs/_layouts/doc-page.html

Lines changed: 50 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,54 @@
22
layout: main
33
---
44
<main class="container">
5-
<header>
6-
<h1>{{ page.title }}</h1>
7-
</header>
8-
{{ content }}
5+
<nav class="doc-navigation" role="menu">
6+
<div class="navigation-ellipsis">
7+
<i class="fa fa-ellipsis-v"></i>
8+
</div>
9+
<ul class="navigation-menu">
10+
<li class="navigation-menu-item">
11+
<a href="https://scala-lang.org/scala3/getting-started.html" id="getting started">Getting Started</a>
12+
</li>
13+
<li class="navigation-menu-item">
14+
<a href="#" id="learn">Learn</a>
15+
<ul class="navigation-dropdown">
16+
<li>
17+
<a href="https://scala-lang.org/scala3/new-in-scala3.html">New in Scala 3</a>
18+
</li>
19+
<li>
20+
<a href="https://scala-lang.org/scala3/book/introduction.html">Scala 3 Book</a>
21+
</li>
22+
</ul>
23+
</li>
24+
<li class="navigation-menu-item">
25+
<a href="https://scala-lang.org/scala3/guides/migration/compatibility-intro.html" id="migrate">Migrate</a>
26+
</li>
27+
<li class="navigation-menu-item">
28+
<a href="#" id="reference">Reference</a>
29+
<ul class="navigation-dropdown">
30+
<li>
31+
<a href="https://scala-lang.org/scala3/guides.html">Guides</a>
32+
</li>
33+
<li>
34+
<a href="https://scala-lang.org/scala3/reference/overview.html">Language Specification</a>
35+
</li>
36+
<li>
37+
<a href="https://scala-lang.org/api/3.x/">Scala Library API</a>
38+
</li>
39+
</ul>
40+
</li>
41+
<li class="navigation-menu-item">
42+
<a href="https://scala-lang.org/scala3/guides/contribution/contribution-intro.html" id="contributing guide">Contributing Guide</a>
43+
</li>
44+
</ul>
45+
</nav>
46+
<header>
47+
<h1>{{ page.title }}</h1>
48+
</header>
49+
{{ content }}
50+
<div class="two-columns">
51+
<a href="/scala3/reference/overview.html">← <strong>previous</strong></a>
52+
<a href="/scala3/reference/new-types/intersection-types.html"><strong>next</strong> →</a>
53+
</div>
954
</main>
55+

‎scaladoc/resources/dotty_res/styles/scalastyle.css

Lines changed: 280 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1035,4 +1035,283 @@ footer .socials {
10351035
align-self: flex-start;
10361036
}
10371037

1038-
1038+
.navigation {
1039+
padding: 30px 0;
1040+
display: -webkit-box;
1041+
display: -moz-box;
1042+
display: box;
1043+
display: -webkit-flex;
1044+
display: -moz-flex;
1045+
display: -ms-flexbox;
1046+
display: flex;
1047+
-webkit-box-orient: horizontal;
1048+
-moz-box-orient: horizontal;
1049+
box-orient: horizontal;
1050+
-webkit-box-direction: normal;
1051+
-moz-box-direction: normal;
1052+
box-direction: normal;
1053+
-webkit-flex-direction: row;
1054+
-moz-flex-direction: row;
1055+
flex-direction: row;
1056+
-ms-flex-direction: row;
1057+
-webkit-box-align: center;
1058+
-moz-box-align: center;
1059+
box-align: center;
1060+
-webkit-align-items: center;
1061+
-moz-align-items: center;
1062+
-ms-align-items: center;
1063+
-o-align-items: center;
1064+
align-items: center;
1065+
-ms-flex-align: center;
1066+
-webkit-box-pack: justify;
1067+
-moz-box-pack: justify;
1068+
box-pack: justify;
1069+
-webkit-justify-content: space-between;
1070+
-moz-justify-content: space-between;
1071+
-ms-justify-content: space-between;
1072+
-o-justify-content: space-between;
1073+
justify-content: space-between;
1074+
-ms-flex-pack: justify; }
1075+
.navigation .navigation-bdand img {
1076+
width: 104px;
1077+
height: 43px; }
1078+
.navigation .navigation-panel-button {
1079+
display: none;
1080+
font-size: 1.333rem;
1081+
color: #fff;
1082+
cursor: pointer; }
1083+
@media (max-width: 992px) {
1084+
.navigation .navigation-panel-button {
1085+
order: 3;
1086+
display: block; } }
1087+
.navigation .navigation-menu .navigation-menu-item {
1088+
display: inline-block; }
1089+
.navigation .navigation-menu .navigation-menu-item:last-child {
1090+
margin-right: 0; }
1091+
.navigation .navigation-menu .navigation-menu-item a {
1092+
padding: 5px 15px;
1093+
text-transform: uppercase;
1094+
color: #fff;
1095+
border-radius: 300px;
1096+
font-weight: 700; }
1097+
.navigation .navigation-menu .navigation-menu-item a:active, .navigation .navigation-menu .navigation-menu-item a:focus, .navigation .navigation-menu .navigation-menu-item a:hover, .navigation .navigation-menu .navigation-menu-item a.active {
1098+
background: #DC322F;
1099+
text-decoration: none; }
1100+
1101+
@media (max-width: 992px) {
1102+
.navigation .navigation-menu {
1103+
padding: 20px;
1104+
position: fixed;
1105+
top: 0;
1106+
right: 0;
1107+
bottom: 0;
1108+
left: auto;
1109+
height: 100%;
1110+
width: 270px;
1111+
-webkit-transform: translateX(270px);
1112+
-moz-transform: translateX(270px);
1113+
-ms-transform: translateX(270px);
1114+
-o-transform: translateX(270px);
1115+
transform: translateX(270px);
1116+
-webkit-transition: all 0.25s linear;
1117+
-moz-transition: all 0.25s linear;
1118+
transition: all 0.25s linear;
1119+
background: #fff;
1120+
-webkit-overflow-scrolling: touch;
1121+
overflow-y: auto;
1122+
z-index: 100;
1123+
background: rgba(0, 43, 54, 0.99); }
1124+
.navigation .navigation-menu.is-visible {
1125+
-webkit-transform: translateX(0);
1126+
-moz-transform: translateX(0);
1127+
-ms-transform: translateX(0);
1128+
-o-transform: translateX(0);
1129+
transform: translateX(0); }
1130+
.navigation .navigation-menu .navigation-menu-item {
1131+
margin-right: 16px;
1132+
padding: 10px 0;
1133+
display: block; } }
1134+
.navigation-fade-screen {
1135+
position: fixed;
1136+
top: 0;
1137+
right: 0;
1138+
bottom: 0;
1139+
left: 0;
1140+
-webkit-transition: all 0.15s ease-out 0s;
1141+
-moz-transition: all 0.15s ease-out 0s;
1142+
transition: all 0.15s ease-out 0s;
1143+
background: #000;
1144+
opacity: 0;
1145+
visibility: hidden;
1146+
z-index: 90; }
1147+
.navigation-fade-screen.is-visible {
1148+
opacity: 0.6;
1149+
visibility: visible; }
1150+
1151+
.doc-navigation {
1152+
padding: 10px 20px;
1153+
display: -webkit-box;
1154+
display: -moz-box;
1155+
display: box;
1156+
display: -webkit-flex;
1157+
display: -moz-flex;
1158+
display: -ms-flexbox;
1159+
display: flex;
1160+
-webkit-box-orient: horizontal;
1161+
-moz-box-orient: horizontal;
1162+
box-orient: horizontal;
1163+
-webkit-box-direction: normal;
1164+
-moz-box-direction: normal;
1165+
box-direction: normal;
1166+
-webkit-flex-direction: row;
1167+
-moz-flex-direction: row;
1168+
flex-direction: row;
1169+
-ms-flex-direction: row;
1170+
-webkit-box-align: center;
1171+
-moz-box-align: center;
1172+
box-align: center;
1173+
-webkit-align-items: center;
1174+
-moz-align-items: center;
1175+
-ms-align-items: center;
1176+
-o-align-items: center;
1177+
align-items: center;
1178+
-ms-flex-align: center;
1179+
-webkit-box-pack: justify;
1180+
-moz-box-pack: justify;
1181+
box-pack: justify;
1182+
-webkit-justify-content: space-between;
1183+
-moz-justify-content: space-between;
1184+
-ms-justify-content: space-between;
1185+
-o-justify-content: space-between;
1186+
justify-content: space-between;
1187+
-ms-flex-pack: justify; }
1188+
.doc-navigation .navigation-bdand img {
1189+
width: 58px;
1190+
height: 20px; }
1191+
@media (max-width: 992px) {
1192+
.doc-navigation .navigation-bdand img {
1193+
display: none; } }
1194+
.doc-navigation .navigation-bdand .doc-language-version {
1195+
font-size: 1.6em;
1196+
font-family: "Roboto Slab", serif;
1197+
font-weight: bold;
1198+
color: #86a1a6; }
1199+
@media (max-width: 992px) {
1200+
.doc-navigation .navigation-bdand .doc-language-version {
1201+
display: none; } }
1202+
.doc-navigation .navigation-bdand a,
1203+
.doc-navigation .navigation-bdand a:hover,
1204+
.doc-navigation .navigation-bdand a:active,
1205+
.doc-navigation .navigation-bdand a:focus,
1206+
.doc-navigation .navigation-bdand a:hover,
1207+
.doc-navigation .navigation-bdand a.active {
1208+
text-decoration: none; }
1209+
.doc-navigation .navigation-ellipsis {
1210+
display: none;
1211+
font-size: 1.333rem;
1212+
cursor: pointer; }
1213+
@media (max-width: 768px) {
1214+
.doc-navigation .navigation-ellipsis {
1215+
color: rgba(255, 255, 255, 0.5);
1216+
order: 3;
1217+
display: block; }
1218+
.doc-navigation .navigation-ellipsis a:active, .doc-navigation .navigation-ellipsis a:hover {
1219+
color: #ffffff; } }
1220+
.doc-navigation .navigation-menu .navigation-menu-item {
1221+
display: inline-block; }
1222+
.doc-navigation .navigation-menu .navigation-menu-item .navigation-dropdown {
1223+
background: #15414C;
1224+
min-width: 190px;
1225+
position: absolute;
1226+
margin-top: 10px;
1227+
display: none;
1228+
z-index: 1;
1229+
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15); }
1230+
@media (max-width: 768px) {
1231+
.doc-navigation .navigation-menu .navigation-menu-item .navigation-dropdown {
1232+
order: 3; } }
1233+
.doc-navigation .navigation-menu .navigation-menu-item .navigation-dropdown li {
1234+
line-height: 46px; }
1235+
.doc-navigation .navigation-menu .navigation-menu-item .navigation-dropdown li:hover {
1236+
background: #002B36;
1237+
text-decoration: none; }
1238+
.doc-navigation .navigation-menu .navigation-menu-item .navigation-dropdown li:hover a {
1239+
color: #ffffff; }
1240+
.doc-navigation .navigation-menu .navigation-menu-item .navigation-dropdown li:hover a:hover {
1241+
text-decoration: none; }
1242+
@media (max-width: 768px) {
1243+
.doc-navigation .navigation-menu .navigation-menu-item:nth-child(n+4) {
1244+
display: none; } }
1245+
.doc-navigation .navigation-menu .navigation-menu-item:last-child {
1246+
margin-right: 0; }
1247+
.doc-navigation .navigation-menu .navigation-menu-item a {
1248+
display: block;
1249+
padding: 5px 15px;
1250+
color: rgba(255, 255, 255, 0.5);
1251+
font-weight: 700; }
1252+
.doc-navigation .navigation-menu .navigation-menu-item a:focus, .doc-navigation .navigation-menu .navigation-menu-item a.active {
1253+
color: #ffffff;
1254+
text-decoration: none; }
1255+
.doc-navigation .navigation-menu .navigation-menu-item a:hover {
1256+
text-decoration: none; }
1257+
.doc-navigation .navigation-menu .navigation-menu-item a:not(:only-child):after {
1258+
padding-left: 4px;
1259+
content: ' ▾'; }
1260+
1261+
.navigation-submenu li {
1262+
text-align: center;
1263+
line-height: 46px; }
1264+
.navigation-submenu li:hover {
1265+
background: #002B36;
1266+
text-decoration: none; }
1267+
.navigation-submenu li:hover a {
1268+
color: #ffffff; }
1269+
.navigation-submenu li a {
1270+
padding-left: 20px;
1271+
display: block;
1272+
color: rgba(255, 255, 255, 0.5);
1273+
font-weight: 700; }
1274+
.navigation-submenu li a:hover {
1275+
text-decoration: none; }
1276+
1277+
.two-columns {
1278+
display: -webkit-box;
1279+
display: -moz-box;
1280+
display: box;
1281+
display: -webkit-flex;
1282+
display: -moz-flex;
1283+
display: -ms-flexbox;
1284+
display: flex;
1285+
-webkit-box-orient: horizontal;
1286+
-moz-box-orient: horizontal;
1287+
box-orient: horizontal;
1288+
-webkit-box-direction: normal;
1289+
-moz-box-direction: normal;
1290+
box-direction: normal;
1291+
-webkit-flex-direction: row;
1292+
-moz-flex-direction: row;
1293+
flex-direction: row;
1294+
-ms-flex-direction: row;
1295+
-webkit-box-lines: multiple;
1296+
-moz-box-lines: multiple;
1297+
box-lines: multiple;
1298+
-webkit-flex-wrap: wrap;
1299+
-moz-flex-wrap: wrap;
1300+
-ms-flex-wrap: wrap;
1301+
flex-wrap: wrap;
1302+
-webkit-box-pack: justify;
1303+
-moz-box-pack: justify;
1304+
box-pack: justify;
1305+
-webkit-justify-content: space-between;
1306+
-moz-justify-content: space-between;
1307+
-ms-justify-content: space-between;
1308+
-o-justify-content: space-between;
1309+
justify-content: space-between;
1310+
-ms-flex-pack: justify; }
1311+
.two-columns .first,
1312+
.two-columns .second {
1313+
flex: 0 1 calc(50% - 1em); }
1314+
@media (max-width: 768px) {
1315+
.two-columns .first,
1316+
.two-columns .second {
1317+
flex: 0 1 calc(100% - 0.5em); } }

0 commit comments

Comments
 (0)