roc-lang/roc
1
1
Fork 0
mirror of https://github.com/roc-lang/roc.git synced 2024-11-05 01:58:58 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix tutorial layout and ToC on mobile

Browse Source
This commit is contained in:
Richard Feldman 2023-11-20 01:15:42 -05:00
parent 9cd4a83f52
commit edfba00ec3
No known key found for this signature in database
GPG Key ID: F1F21AA5B1D9E43B
2 changed files with 39 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
www/content/tutorial.md
View File

@ -1,4 +1,7 @@
<nav id="tutorial-toc">
<input id="tutorial-toc-toggle" name="tutorial-toc-toggle" type= "checkbox">
<nav id="tutorial-toc" aria-label="Table of Contents">
<label id="close-tutorial-toc" for="tutorial-toc-toggle">close</label>
<!-- TODO fix search: input [id "toc-search", type "text", placeholder "Search"] [] -->
<ol>
<li><a href="#repl">REPL</a></li>
<li><a href="#building-an-application">Building an Application</a></li>

41
www/public/site.css
View File

@ -276,6 +276,10 @@ h3 {
padding: 4px;
}
#tutorial-toc-toggle:checked+#tutorial-toc {
display: block;
}
.home-link-text {
padding: 8px;
font-size: 24px;
@ -533,8 +537,21 @@ li {
--body-max-width: none;
}
#tutorial-main main {
max-width: none;
#tutorial-main main, #tutorial-toc-toggle-label, #close-tutorial-toc {
display: block !important;
}
#tutorial-toc {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-y: auto;
margin: 0 !important;
padding-right: 120px;
border: 0;
}
#homepage-logo {
@ -1197,6 +1214,7 @@ code .dim {
}
#tutorial-toc {
position: relative;
background-color: var(--gray-bg);
flex: 0 0 auto; /* Take up as much space as it needs */
margin-top: 30px;
@ -1264,18 +1282,29 @@ code .dim {
/* This may be overridden on mobile-friendly screen widths */
}
#tutorial-toc-toggle:hover,
#tutorial-toc-toggle-label:hover,
#close-tutorial-toc:hover {
text-decoration: underline;
cursor: pointer;
}
#tutorial-toc-toggle,
#tutorial-toc-toggle-label {
font-size: 1.1rem;
font-size: 1.2rem;
float: right;
padding: 0 1rem;
font-family: Lato;
font-weight: normal;
}
#close-tutorial-toc {
position: absolute;
top: 20px;
right: 8px;
font-size: 18px;
top: 1rem;
right: 1rem;
font-size: 1.2rem;
padding: 12px 24px;
font-weight: bold;
}
/* for larger screens */