feat: introduces single page layout
Single pages can now be created, updates CSS as dependancy. Changes example site to show an example page.
This commit is contained in:
f-dinucci
Giuseppe Masino
parent
4de4465dd0
commit
5388b7681b
|
|
@ -14,12 +14,16 @@ publishDir = "public"
|
|||
[[menu.main]]
|
||||
identifier = "about"
|
||||
name = "About"
|
||||
url = "#about"
|
||||
url = "/#about"
|
||||
[[menu.main]]
|
||||
identifier = "examplePage"
|
||||
name = "Example Page"
|
||||
url = "/examplePage"
|
||||
[[menu.main]]
|
||||
identifier = "skills"
|
||||
name = "Skills"
|
||||
url = "#skills"
|
||||
url = "/#skills"
|
||||
[[menu.main]]
|
||||
identifier = "projects"
|
||||
name = "Projects"
|
||||
url = "#projects"
|
||||
url = "/#projects"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
+++
|
||||
title = "Example page"
|
||||
author = "Author name"
|
||||
+++
|
||||
|
||||
## Header 2 - Italics
|
||||
*Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum*
|
||||
|
||||
### Header 3 - Bold
|
||||
**Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum**
|
||||
|
||||
#### Header 4 - Ordered List
|
||||
1. First item
|
||||
2. Second item
|
||||
3. Third item
|
||||
|
||||
##### Header 5 - Unordered List
|
||||
* First item
|
||||
* Second item
|
||||
* Third item
|
||||
|
||||
###### Header 6 - Blockquote and links
|
||||
> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
|
||||
|
||||
[Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum](https://www.example.com)
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
{{ define "main" }}
|
||||
<div>
|
||||
<div id="mainBG" style="background-image: url('{{ if $.Site.Params.mainbg }}{{ $.Site.Params.mainbg }}{{ else }}https://picsum.photos/1920/1080{{ end }}');">
|
||||
|
||||
{{ partial "utilities/wave"}}
|
||||
|
||||
<div class="centerAll title font-bold text-center">
|
||||
<h1>404 - Not found</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
{{ define "main" }}
|
||||
|
||||
<div>
|
||||
|
||||
<div id="mainBG" style="background-image: url('{{ if $.Site.Params.mainbg }}{{ $.Site.Params.mainbg }}{{ else }}https://picsum.photos/1920/1080{{ end }}');">
|
||||
|
||||
{{ partial "utilities/wave"}}
|
||||
|
||||
<div class="centerAll space-y-4">
|
||||
<div class="title font-bold text-center">
|
||||
{{if $.Title }}<h1>{{ .Title }}</h1>{{else}}Missing Title{{end}}
|
||||
</div>
|
||||
<div class="text-4xl italic text-center">
|
||||
{{if $.Params.Author }} by {{ .Params.Author }}{{end}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<main class="container mx-auto mt-8 px-4 xl:px-0 justify-around space-y-2.5 whitespace-normal text-justify">
|
||||
{{ .Content }}
|
||||
</main>
|
||||
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,3 +1,88 @@
|
|||
/*
|
||||
* Loading tailwindcss components
|
||||
*/
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/*
|
||||
* Configuring tailwindcss components
|
||||
*/
|
||||
@layer base {
|
||||
/*
|
||||
* Preflight (https://tailwindcss.com/docs/preflight)
|
||||
* By default in tailwindcss preflight is enabled
|
||||
* Consequently headings and lists are unstyled
|
||||
*/
|
||||
|
||||
/*
|
||||
* Following styles are sorted by HTML tag
|
||||
*/
|
||||
|
||||
/*
|
||||
* <a>
|
||||
* Hyperlinks
|
||||
*/
|
||||
a {
|
||||
@apply text-blue-400 underline;
|
||||
}
|
||||
|
||||
/*
|
||||
* <blockquote>
|
||||
* Blockquotes
|
||||
*/
|
||||
blockquote {
|
||||
@apply text-gray-700 font-mono;
|
||||
}
|
||||
|
||||
/*
|
||||
* <header>
|
||||
* Headings
|
||||
*/
|
||||
h1 {
|
||||
@apply text-6xl;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply text-5xl;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@apply text-4xl;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@apply text-3xl;
|
||||
}
|
||||
|
||||
h5 {
|
||||
@apply text-2xl;
|
||||
}
|
||||
|
||||
h6 {
|
||||
@apply text-xl;
|
||||
}
|
||||
|
||||
/*
|
||||
* <ol>
|
||||
* Ordered list
|
||||
*/
|
||||
ol {
|
||||
list-style: decimal;
|
||||
margin: 10;
|
||||
padding: 5;
|
||||
}
|
||||
|
||||
/*
|
||||
* <ul>
|
||||
* Unordered list
|
||||
*/
|
||||
ul {
|
||||
list-style: disc;
|
||||
margin: 10;
|
||||
padding: 5;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
/*
|
||||
! tailwindcss v3.0.24 | MIT License | https://tailwindcss.com
|
||||
*/
|
||||
* Loading tailwindcss components
|
||||
*/
|
||||
|
||||
/*
|
||||
! tailwindcss v3.0.24 | MIT License | https://tailwindcss.com
|
||||
*/
|
||||
|
||||
/*
|
||||
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
|
||||
|
|
@ -423,6 +427,96 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|||
display: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* Preflight (https://tailwindcss.com/docs/preflight)
|
||||
* By default in tailwindcss preflight is enabled
|
||||
* Consequently headings and lists are unstyled
|
||||
*/
|
||||
|
||||
/*
|
||||
* Following styles are sorted by HTML tag
|
||||
*/
|
||||
|
||||
/*
|
||||
* <a>
|
||||
* Hyperlinks
|
||||
*/
|
||||
|
||||
a {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(96 165 250 / var(--tw-text-opacity));
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
/*
|
||||
* <blockquote>
|
||||
* Blockquotes
|
||||
*/
|
||||
|
||||
blockquote {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(55 65 81 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
/*
|
||||
* <header>
|
||||
* Headings
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 3.75rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 3rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 2.25rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* <ol>
|
||||
* Ordered list
|
||||
*/
|
||||
|
||||
ol {
|
||||
list-style: decimal;
|
||||
margin: 10;
|
||||
padding: 5;
|
||||
}
|
||||
|
||||
/*
|
||||
* <ul>
|
||||
* Unordered list
|
||||
*/
|
||||
|
||||
ul {
|
||||
list-style: disc;
|
||||
margin: 10;
|
||||
padding: 5;
|
||||
}
|
||||
|
||||
*, ::before, ::after {
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
|
|
@ -588,10 +682,32 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|||
gap: 1rem;
|
||||
}
|
||||
|
||||
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
|
||||
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
|
||||
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
|
||||
margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
|
||||
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
|
||||
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.whitespace-normal {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
|
@ -615,16 +731,16 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|||
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.py-2 {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.py-2 {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.px-6 {
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
|
|
@ -657,6 +773,15 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.text-justify {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.text-4xl {
|
||||
font-size: 2.25rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
.text-6xl {
|
||||
font-size: 3.75rem;
|
||||
line-height: 1;
|
||||
|
|
@ -691,6 +816,10 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|||
font-weight: 700;
|
||||
}
|
||||
|
||||
.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.tracking-wide {
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
|
|
@ -719,6 +848,10 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
/*
|
||||
* Configuring tailwindcss components
|
||||
*/
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.md\:mr-4 {
|
||||
margin-right: 1rem;
|
||||
|
|
@ -757,3 +890,5 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|||
padding-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue