yeray/gobyexample
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Mobile layout template and styles

Browse Source
This commit is contained in:
Anton Zhiyanov 2021-04-20 20:15:10 +03:00
parent 58e66a8103
commit b81394f6f2
3 changed files with 62 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
templates/example.tmpl
View File

@ -1,7 +1,8 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Go by Example: {{.Name}}</title>
<link rel=stylesheet href="site.css">
</head>

3
templates/index.tmpl
View File

@ -1,7 +1,8 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Go by Example</title>
<link rel=stylesheet href="site.css">
</head>

58
templates/site.css
View File

@ -148,6 +148,64 @@ img.copy {
margin-right: 4px;
}
/* Mobile layout */
@media only screen and (max-width: 40em) {
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
div#intro {
width: 100%;
min-width: auto;
max-width: none;
margin-left: auto;
margin-right: auto;
margin-bottom: 120px;
padding-left: 1rem;
padding-right: 1rem;
}
div.example {
width: 100%;
max-width: none;
min-width: auto;
padding: 1rem;
}
table, tbody, tr {
display: block;
}
td {
display: block;
}
td.docs {
width: 100%;
max-width: none;
min-width: auto;
min-height: auto;
vertical-align: top;
text-align: left;
}
td.code {
width: 100%;
max-width: none;
min-width: auto;
padding-top: 5px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 5px;
vertical-align: top;
background: #f0f0f0;
}
td.docs p:first-child {
padding-top: 15px;
padding-bottom: 5px;
}
pre {
overflow-x: auto;
}
}
/* Syntax highlighting */
body .hll { background-color: #ffffcc }
body .err { border: 1px solid #FF0000 } /* Error */