Commit af4ce548 authored by julientaq's avatar julientaq
Browse files

mobile version!

parent 0528faab
{"Target":"css/main.min.5665515e0ce49468a15fa5e8288839c4.css","MediaType":"text/css","Data":{"Integrity":"md5-VmVRXgzklGihX6XoKIg5xA=="}}
\ No newline at end of file
{"Target":"css/main.min.e02f96a5fa5c44e03cd3ae3e27d3344e.css","MediaType":"text/css","Data":{"Integrity":"md5-4C+WpfpcROA8064+J9M0Tg=="}}
\ No newline at end of file
......@@ -28,7 +28,7 @@
margin-left: 1ch;
}
a.back-home {
.back-home {
width: 14ch;
background: 0 0;
padding: 0;
......@@ -36,6 +36,8 @@
top: 0;
margin-left: 0;
min-width: 10ch;
box-shadow: none;
border: none;
}
#paged-logo {
......@@ -60,7 +62,9 @@
text-transform: uppercase;
font-variant: all-small-caps;
font-size: 1.1em;
&.hide {
display: flex;
}
ul {
width: 100%;
list-style-type: none;
......@@ -99,4 +103,5 @@
#paged-logo {
display: none;
}
}
\ No newline at end of file
}
......@@ -32,7 +32,7 @@
}
/*
/* 0
@media screen and (max-width: 767px) {
article header {
font-size: 0.7em;
......@@ -43,4 +43,139 @@
body footer {
max-width: unset ;
}
} */
\ No newline at end of file
} */
@media screen and (max-width: 767px) {
:root {
--font-size: 16px;
}
article {
grid-template-columns: [left] 10% [main] 80% 10%[end];
}
body {
margin: 0;
padding: 0;
width: 100%;
grid-template-columns: [left] 10% [main] 80% [right] 10% [end];
}
.running-head {
flex-direction: column;
align-items: center;
justify-content: center;
height: auto;
padding-top: 0;
width: 100%;
border-bottom: none;
background: white;
.back-home {
position: unset;
background: transparent;
padding-top: 1em;
width: 100%;
background: white;
padding: 2em 35%;
}
.menu {
margin-top: 0;
transition: all .6s;
opacity: 1;
padding-top: 0;
margin-bottom: 2em;
display: flex;
flex-direction: column;
}
.menu.hide {
opacity: 0;
margin-top: -50vh;
/* background: red; */
/* height: 0; */
}
.menu ul {
padding: 0;
text-align: center;
/* display: none; */
flex-direction: column;
li {
margin: 0;
border-bottom: 1px solid grey;
padding: 1em;
}
}
}
header {
grid-column: main/main;
margin-top: 10em;
}
.symbol-text {
display: none;
}
.paginator {
grid-column: main;
flex-direction: column;
align-items: center;
font-size: 1.7em;
.next {
width: 100%;
text-align: center;
border: none;
padding: 0;
margin-top: 2em;
&::before {
font-size: 0.3em;
text-align: center;
}
}
.previous {
text-align: center;
width: 100%;
border: none;
padding: 0;
&::before {
font-size: 0.3em;
text-align: center;
}
}
.alone {
}
}
footer {
padding: 0 5em 3em;
text-align: center;
a {
white-space: pre;
}
}
/* list */
body .article {
grid-template-columns: [left] 2% [main] 96% 2%[end];
}
.list {
grid-column: main/main;
ul {
padding-left: 0;
}
}
}
.hide {
display: none;
}
\ No newline at end of file
......@@ -308,8 +308,8 @@ header {
/* transform: rotate(45deg); */
/* border: 4px solid #eee; */
z-index: -1;
width: 10em;
height: 10em;
/* width: 10em; */
/* height: 10em; */
font-size: 20em;
top: -0.5em;
left: -0.3em;
......@@ -326,6 +326,7 @@ header {
color: var(--color-body);
font-size: 4.25em;
line-height: 1.1;
margin-top: .3em;
font-family: var(--font-serif);
position: relative;
/* text-shadow: 1px 1px var(--color-paper), -1px 1px var(--color-paper), -1px -1px var(--color-paper), 1px -1px var(--color-paper), 2px 2px var(--color-paper), -2px 2px var(--color-paper), -2px -2px var(--color-paper), 2px -2px var(--color-paper), 3px 3px var(--color-paper), -3px 3px var(--color-paper), -3px -3px var(--color-paper), 3px -3px var(--color-paper), 4px 4px var(--color-paper), -4px 4px var(--color-paper), -4px -4px var(--color-paper), 4px -4px var(--color-paper); */
......@@ -356,6 +357,7 @@ header {
max-width: 51ch;
display: block;
margin-bottom: 3em;
margin-top: 2em;
/* text-shadow: 1px 1px var(--color-paper), -1px 1px var(--color-paper), -1px -1px var(--color-paper), 1px -1px var(--color-paper), 2px 2px var(--color-paper), -2px 2px var(--color-paper), -2px -2px var(--color-paper), 2px -2px var(--color-paper), 3px 3px var(--color-paper), -3px 3px var(--color-paper), -3px -3px var(--color-paper), 3px -3px var(--color-paper), 4px 4px var(--color-paper), -4px 4px var(--color-paper), -4px -4px var(--color-paper), 4px -4px var(--color-paper); */
/* filter: drop-shadow(-2px 0px 0px var(--color-paper)) drop-shadow(0px 2px 0px var(--color-paper)) drop-shadow(-2px -2px 0px var(--color-paper)) drop-shadow(2px 2px 0px var(--color-paper)) ; */
......@@ -367,6 +369,7 @@ header {
font-family: var(--font-sans);
font-weight: 400;
margin-bottom: 0px;
margin-top: 0;
/* border-bottom: 1px solid grey; */
a {
font-style: normal;
......
......@@ -8,7 +8,6 @@
@import "themes/pagedjs/assets/css/base/postit.css";
@import "themes/pagedjs/assets/css/base/toc.css";
@import "themes/pagedjs/assets/css/base/syntax.css";
@import "themes/pagedjs/assets/css/base/mobile.css";
@import "themes/pagedjs/assets/css/base/print.css";
......@@ -27,4 +26,7 @@
@import "themes/pagedjs/assets/css/page/cookbook.css";
/* page specific
@import "themes/pagedjs/assets/css/page/doc.css"; */
\ No newline at end of file
@import "themes/pagedjs/assets/css/page/doc.css"; */
@import "themes/pagedjs/assets/css/base/mobile.css";
.list {
counter-reset: doc;
grid-column: main/end;
a {
text-decoration: none;
background: none;
......@@ -52,6 +53,7 @@
.article {
margin-left: 0;
margin-top: 3em;
.intro {
font-family: var(--font-sans);
font-size: 1em;
......@@ -75,6 +77,7 @@
position: relative;
border-color: transparent;
margin-bottom: 0;
line-height: 1.1;
&::before {
content: ".................................................................................................................................................";
......@@ -91,18 +94,25 @@
a {
counter-increment: doc;
background: var(--color-paper);
position: relative;
z-index: 100;
padding-right: 0.5ch;
font-style: italic;
line-height: 1.1;
span {
background: var(--color-paper);
/* max-width: 70%; */
display: inline;
padding-right: 1ch;
}
&::after {
padding-left: 1ch;
content: counter(doc);
float: right;
background: var(--color-paper);
font-family: var(--font-sans);
/* font-family: var(--font-sans); */
font-style: normal;
font-size: 0.8em;
bottom: 0;
......
......@@ -43,7 +43,6 @@ article .note {
float: right;
width: 30ch;
:first-child {
padding-top: 0;
}
......@@ -106,7 +105,6 @@ article {
padding-left: 3em;
max-width: max-content;
padding-right: .3ch;
}
}
......@@ -122,7 +120,7 @@ article {
padding: 5px;
background: var(--color-paper);
margin-top: -6px;
/* box-shadow: 0 0 0 5px var(--color-primary); */
/* box-shadow: 0 0 0 5px var(--color-primary); */
}
}
......@@ -144,44 +142,34 @@ a.tag {
margin-top: 100px !important;
}
.symbol-text {
font-family: var(--font-sans);
font-size: 1em;
position: absolute;
color: grey;
width: 25ch;
width: 20ch;
background: var(--color-paper);
padding-right: 1em;
left: -33ch;
margin-top: 3em;
text-align: right;
a {
text-decoration: underline;
/* word-break: none; */
white-space: nowrap
white-space: nowrap;
}
left: -40ch;
margin-top: 3em;
text-align:right;
&::before {
content: " ";
transform: rotate(-11deg);
height: 1px;
background:
grey;
background: grey;
display: block;
right: -52px;
width: 11ch;
position: absolute;
z-index: -1;
top: 11px;
}
}
}
\ No newline at end of file
......@@ -13,10 +13,12 @@ document.querySelector('.toc .title').addEventListener("click", function() {
})
}
document.querySelector(".back-home").addEventListener("click", function() {document.querySelector(".menu").classList.toggle("hide")});
if (document.querySelector('#print')) {
document.querySelector('#print').addEventListener("click", print);
}
function print() {
window.PagedPolyfill.preview();
......
......@@ -11,42 +11,33 @@
{{ $css := resources.Get "./css/main.css" | resources.PostCSS (dict "config" "./assets/css/postcss.config.js" "noMap" true) | minify | resources.Fingerprint "md5" }}
<link rel="stylesheet" href="{{ $css.Permalink }}" integrity="{{ $css.Data.Integrity }}">
{{/* set up paged.js polyfull to preview the print version */}}
{{ $pagegjs := resources.Get "js/paged.polyfill.js" | resources.Fingerprint "md5" }}
{{ $pagegjs := resources.Get "js/paged.polyfill.js" | resources.Fingerprint "md5" }}
<script src="{{ $pagegjs.Permalink }}" type="module" type="application/javascript"></script>
<script>
window.PagedConfig = {
auto: false
};
</script>
</head>
<body style="{{ if .Params.colorPaper }} --color-paper:{{ .Params.colorPaper }}; {{ end }} " class="{{ if .Params.class }} {{ .Params.class }} {{ end }} {{ .Page.Section }}">
{{ block "print" .}}
{{/* print button */}}
{{ if or (.Params.print) (eq .Page.Section "documentation") (eq .Page.Section "posts")}}
<button id="print">{{ partial "print-icon.html" . }}</button>
{{ end }}
{{/* print button */}}
{{ if or (.Params.print) (eq .Page.Section "documentation") (eq .Page.Section "posts")}}
<button id="print">{{ partial "print-icon.html" . }}</button>
{{ end }}
{{ end }}
{{ partial "cropmarks.html" }}
{{ block "running" . }}
<div class="running-head">
<a class="back-home" href="{{ .Site.BaseURL }}">
<div class="running-head">
<!-- <a class="back-home" href="{{ .Site.BaseURL }}"> -->
<button class="back-home">
{{ partial "paged-logo.html" . }}
</a>
{{ partial "menu" . }}
</div>
{{ end }}
</button>
<!-- </a> -->
{{ partial "menu" . }}
</div>
{{ end }}
{{ block "header" . }}
<header>
<h1 id="title">{{ .Title }}</h1>
......@@ -57,7 +48,7 @@
{{ end }}
{{ block "main" . }}
{{ block "breadcrumb.html" . }}
{{/* {{ partial "breadcrumb.html" .}} */}}
{{/* {{ partial "breadcrumb.html" .}} */}}
{{ end }}
<article>
{{ .Content }}
......@@ -85,6 +76,10 @@
{{ block "script" . }}
{{ $js := resources.Get "/js/scripts.js" }}
<script src="{{$js.Permalink}}"></script>
{{ if eq .Params.section "documentation" }}
{{ $docjs := resources.Get "/js/docList.js" }}
<script src="{{$docjs.Permalink}}"></script>
{{ end }}
{{ end }}
</body>
......
......@@ -3,7 +3,7 @@
<ul>
{{ range .Pages }}
<li class="article">
<h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
<h2><a href="{{ .Permalink }}"><span>{{ .Title }}</span></a></h2>
{{ if eq .Page.Section "documentation"}}
{{ .TableOfContents }}
{{else}}
......@@ -21,7 +21,3 @@
{{ end }}
{{ define "script" }}
{{ $js := resources.Get "/js/docList.js" }}
<script src="{{$js.Permalink}}"></script>
{{ end }}
\ No newline at end of file
{{ define "header" }}
<header>
{{ if eq .Page.Section "documentation" }}
{{ else }}
<h1 id="title">{{ .Title }}</h1>
{{ else }}
<h1 id="title">{{ .Title }}</h1>
<p class="meta">
written by <span class="author">{{ .Params.author }}</span> on
<span class="date">{{ dateFormat "January 2, 2006" .Date }}</span>
</p>
{{ end }}
<h1 id="title">{{ .Title }}</h1>
{{ if .Params.intro }}<p class="intro">{{ .Params.intro | markdownify }} <br/><span class="tags"> {{ partial "tag-coma.html" . }}</span></p>{{end}}
{{ if .Params.symbolText }}
......
<nav class="menu" role="main">
<nav class="menu hide" role="main">
<ul>
{{ $currentPage := . }}
{{ range .Site.Menus.main }}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment