oscarmlage
/
oscarmlage.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

check todo. A few changes

feature/oscar-theme
Segundo Fdez 2022-03-12 02:16:36 +01:00
parent a076adbcd1
commit 1fb46d2d56
24 changed files with 195 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
TODO.md
View File

@ -6,11 +6,13 @@
- [x] og + twitter card
- [x] Index, 5 posts
- [x] Archive + About: Change title
- [ ] Emphasize `<code>`
- [ ] Favicon
- [x] Emphasize `<code>`
- [x] Favicon (Added)*
- [ ] *Review the favicon imgs directory. Not sure if the images are in the right directory.
- [ ] Index call2action that leads you to "posts"
- [ ] Change paginators (no vertical separator |)
- [ ] Fonts, use one font for the title and another one (more readable) for the post text
- [x] Change paginators (no vertical separator |)
- [x] Fonts, use one font for the title and another one (more readable) for the post text
- [x] Remove background pre on about
- [ ] Some images contains a `<p>`, get rid of it.
- Images with p in the post content (as it is html now)
- ![image.png](path/to/image.png) -> <p><img src=""></p>

76
src/resources/_gen/assets/css/css/main.css_abdeb689137b085b8cf50bb0fe96e360.content
View File

@ -281,6 +281,7 @@ template {
Fonts
========================================================================== */
--font-brand: 'Overpass Mono', monospace;
--font-ui: -apple-system, system-ui, sans-serif;
/* Fonts weights */
--fw-regular: 400;
@ -307,7 +308,7 @@ template {
/* Font sizes https://www.modularscale.com/?16,14&px&1.5 */
--font-size-1: 14px;
--font-size-2: 16px;
--font-size-2: 17px;
--font-size-3: 24px;
--font-size-4: 36px;
--font-size-5: 54px;
@ -315,8 +316,8 @@ template {
/* Font sizes names */
--font-title: var(--fw-bold) var(--font-size-4) / 1.25 var(--font-brand);
--font-heading: var(--fw-bold) var(--font-size-3) / 1.25 var(--font-brand);
--font-body: var(--font-size-2) / 1.46 var(--font-brand);
--font-caption: var(--font-size-1) / 1.37 var(--font-brand);
--font-body: var(--font-size-2) / 1.6 var(--font-ui);
--font-caption: var(--font-size-1) / 1.5 var(--font-brand);
/* ==========================================================================
Spacing
@ -356,8 +357,6 @@ template {
box-sizing: border-box;
}
body {
font-family: var(--font-brand);
font: var(--font-body);
text-rendering: auto;
background-color: var(--background-main);
color: var(--color-main);
@ -373,6 +372,19 @@ h1, h2, h3, h4, h5, h6,
b, strong {
font-weight: var(--fw-bold);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-brand);
}
p, ul, ol, dl, dd {
font: var(--font-body);
}
li code,
p code {
font: var(--font-caption);
padding: 4px;
color: rgb(0, 180, 0);
font-family: var(--font-brand);
}
i, em {
font-style: italic;
}
@ -517,6 +529,7 @@ i, em {
margin: 0;
display: flex;
gap: var(--spacing-2);
font-family: var(--font-brand);
}
.main-nav a.is-active {
color: var(--color-main);
@ -564,12 +577,6 @@ i, em {
flex-shrink: 0;
}
.post .social span, .social span {
/* position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow: hidden; */
display: block;
font: var(--font-caption);
margin-top: var(--spacing-1);
@ -627,6 +634,7 @@ i, em {
/* margin-top: calc(var(--spacing-1) / 2); */
}
.post-item .post-item-summary {
font-family: var(--font-ui);
font: var(--font-body);
color: var(--color-main-medium);
}
@ -644,6 +652,7 @@ i, em {
width: auto;
}
.post-detail pre {
font: var(--font-caption);
overflow-x: scroll;
/* border: 1px solid var(--color-main-medium); */
/* box-shadow: 3px 3px 15px 5px rgba(0, 0, 0, 0.3); */
@ -679,7 +688,7 @@ i, em {
padding-bottom: var(--spacing-1);
}
.post h2 span {
font: var(--font-body);
font: var(--font-caption);
color: var(--color-main-medium);
vertical-align: middle;
}
@ -698,25 +707,57 @@ i, em {
margin-bottom: var(--spacing-6);
}
.about .highlight {
margin-bottom: var(--spacing-8);
}
.about .highlight pre {
background-color: transparent !important;
}
.pagination {
border-top: 1px solid var(--color-main-medium);
border-bottom: 1px solid var(--color-main-medium);
padding-block: var(--spacing-3);
font: var(--font-caption);
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
flex-wrap: nowrap;
gap: 0 var(--spacing-3);
color: var(--color-main-medium);
}
.pagination a {
font: var(--font-heading);
.pagination .center {
display: flex;
align-items: center;
gap: 0 var(--spacing-3);
}
.pagination span {
font: var(--font-body);
.pagination .left,
.pagination .right {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pagination .left::before,
.pagination .left::after,
.pagination .right::before,
.pagination .right::after {
vertical-align: middle;
font-size: var(--font-size-3);
}
.pagination .left::before {
content: "⇠ ";
}
.pagination .right {
direction: rtl;
text-align: left;
}
.pagination .right::before {
content: "⇢ ";
}
.footer {
padding: var(--spacing-6) var(--spacing-3);
font: var(--font-caption);
display: flex;
align-items: center;
gap: var(--spacing-1);
flex-wrap: wrap;
}
@ -725,6 +766,7 @@ i, em {
opacity: .4;
}
.footer-contact {
font: var(--font-caption);
list-style-type: none;
padding: 0;
margin: 0;

BIN
src/static/android-chrome-192x192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
src/static/android-chrome-256x256.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
src/static/apple-touch-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

9
src/static/browserconfig.xml Normal file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/mstile-150x150.png"/>
<TileColor>#da532c</TileColor>
</tile>
</msapplication>
</browserconfig>

BIN
src/static/favicon-16x16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 647 B

BIN
src/static/favicon-32x32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 799 B

BIN
src/static/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.2 KiB

BIN
src/static/mstile-150x150.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

19
src/static/safari-pinned-tab.svg Normal file
View File

@ -0,0 +1,19 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="260.000000pt" height="260.000000pt" viewBox="0 0 260.000000 260.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.14, written by Peter Selinger 2001-2017
</metadata>
<g transform="translate(0.000000,260.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M0 1300 l0 -1300 1300 0 1300 0 0 1300 0 1300 -1300 0 -1300 0 0
-1300z m735 289 c63 -30 124 -90 156 -154 35 -71 34 -198 -1 -270 -31 -64 -92
-124 -155 -156 -41 -20 -65 -24 -135 -24 -100 1 -160 24 -226 90 -167 168 -97
457 130 531 61 20 170 12 231 -17z m735 -89 l150 100 0 -300 0 -300 -300 0
-300 0 0 300 0 300 150 -100 150 -100 150 100z m555 -200 l300 -300 -303 0
-302 0 0 300 c0 165 1 300 3 300 1 0 137 -135 302 -300z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 949 B

19
src/static/site.webmanifest Normal file
View File

@ -0,0 +1,19 @@
{
"name": "",
"short_name": "",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-256x256.png",
"sizes": "256x256",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}

17
src/themes/oscar/assets/css/common.css
View File

@ -5,8 +5,6 @@
}
body {
font-family: var(--font-brand);
font: var(--font-body);
text-rendering: auto;
background-color: var(--background-main);
color: var(--color-main);
@ -23,6 +21,21 @@ b, strong {
font-weight: var(--fw-bold);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-brand);
}
p, ul, ol, dl, dd {
font: var(--font-body);
}
li code,
p code {
font: var(--font-caption);
padding: 4px;
color: rgb(0, 180, 0);
font-family: var(--font-brand);
}
i, em {
font-style: italic;
}

1
src/themes/oscar/assets/css/main.css
View File

@ -11,6 +11,7 @@
/* Modules */
@import 'assets/css/modules/header.css';
@import 'assets/css/modules/posts.css';
@import 'assets/css/modules/about.css';
@import 'assets/css/modules/pagination.css';
@import 'assets/css/modules/footer.css';

8
src/themes/oscar/assets/css/modules/about.css Normal file
View File

@ -0,0 +1,8 @@
.about {
.highlight {
margin-bottom: var(--spacing-8);
pre {
background-color: transparent !important;
}
}
}

2
src/themes/oscar/assets/css/modules/footer.css
View File

@ -2,6 +2,7 @@
padding: var(--spacing-6) var(--spacing-3);
font: var(--font-caption);
display: flex;
align-items: center;
gap: var(--spacing-1);
flex-wrap: wrap;
span {
@ -12,6 +13,7 @@
}
}
.footer-contact {
font: var(--font-caption);
list-style-type: none;
padding: 0;
margin: 0;

7
src/themes/oscar/assets/css/modules/header.css
View File

@ -32,6 +32,7 @@
margin: 0;
display: flex;
gap: var(--spacing-2);
font-family: var(--font-brand);
}
a.is-active {
color: var(--color-main);
@ -82,12 +83,6 @@
}
}
span {
/* position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow: hidden; */
display: block;
font: var(--font-caption);
margin-top: var(--spacing-1);

35
src/themes/oscar/assets/css/modules/pagination.css
View File

@ -2,14 +2,39 @@
border-top: 1px solid var(--color-main-medium);
border-bottom: 1px solid var(--color-main-medium);
padding-block: var(--spacing-3);
font: var(--font-caption);
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
flex-wrap: nowrap;
gap: 0 var(--spacing-3);
a {
font: var(--font-heading);
color: var(--color-main-medium);
.center {
display: flex;
align-items: center;
gap: 0 var(--spacing-3);
}
span {
font: var(--font-body);
.left,
.right {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&::before,
&::after {
vertical-align: middle;
font-size: var(--font-size-3);
}
}
.left {
&::before {
content: "⇠ ";
}
}
.right {
direction: rtl;
text-align: left;
&::before {
content: "⇢ ";
}
}
}

4
src/themes/oscar/assets/css/modules/posts.css
View File

@ -32,6 +32,7 @@
/* margin-top: calc(var(--spacing-1) / 2); */
}
.post-item-summary {
font-family: var(--font-ui);
font: var(--font-body);
color: var(--color-main-medium);
}
@ -52,6 +53,7 @@
width: auto;
}
pre {
font: var(--font-caption);
overflow-x: scroll;
/* border: 1px solid var(--color-main-medium); */
/* box-shadow: 3px 3px 15px 5px rgba(0, 0, 0, 0.3); */
@ -89,7 +91,7 @@
border-bottom: 1px solid var(--color-main-dark);
padding-bottom: var(--spacing-1);
span {
font: var(--font-body);
font: var(--font-caption);
color: var(--color-main-medium);
vertical-align: middle;
&:first-child {

7
src/themes/oscar/assets/css/variables.css
View File

@ -3,6 +3,7 @@
Fonts
========================================================================== */
--font-brand: 'Overpass Mono', monospace;
--font-ui: -apple-system, system-ui, sans-serif;
/* Fonts weights */
--fw-regular: 400;
@ -29,7 +30,7 @@
/* Font sizes https://www.modularscale.com/?16,14&px&1.5 */
--font-size-1: 14px;
--font-size-2: 16px;
--font-size-2: 17px;
--font-size-3: 24px;
--font-size-4: 36px;
--font-size-5: 54px;
@ -37,8 +38,8 @@
/* Font sizes names */
--font-title: var(--fw-bold) var(--font-size-4) / 1.25 var(--font-brand);
--font-heading: var(--fw-bold) var(--font-size-3) / 1.25 var(--font-brand);
--font-body: var(--font-size-2) / 1.46 var(--font-brand);
--font-caption: var(--font-size-1) / 1.37 var(--font-brand);
--font-body: var(--font-size-2) / 1.6 var(--font-ui);
--font-caption: var(--font-size-1) / 1.5 var(--font-brand);
/* ==========================================================================
Spacing

8
src/themes/oscar/layouts/partials/metas.html
View File

@ -19,7 +19,13 @@
{{ end -}}
<!-- Favicon -->
<link rel="icon" href="favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<!-- RSS -->
<link href="{{ with .OutputFormats.Get "RSS" }}{{ .RelPermalink }}{{ end }}" rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}" />

16
src/themes/oscar/layouts/partials/pagination.html
View File

@ -1,7 +1,9 @@
{{ if .Paginator.HasPrev }}
<a href="{{ .Paginator.Prev.URL }}" class="left arrow" rel="prev">⇠</a>
{{ end }}
<span>{{ .Paginator.PageNumber }}</span>
{{ if .Paginator.HasNext }}
<a href="{{ .Paginator.Next.URL }}" class="right arrow" rel="next">⇢</a>
{{ end }}
<div class="center">
{{ if .Paginator.HasPrev }}
<a href="{{ .Paginator.Prev.URL }}" class="left arrow" rel="prev"></a>
{{ end }}
<span>{{ .Paginator.PageNumber }}</span>
{{ if .Paginator.HasNext }}
<a href="{{ .Paginator.Next.URL }}" class="right arrow" rel="next"></a>
{{ end }}
</div>

4
src/themes/oscar/layouts/partials/posts/pagination.html
View File

@ -1,7 +1,7 @@
{{- if .NextInSection }}
<a href="{{ .NextInSection.RelPermalink }}" class="left arrow">⇠ <span>{{ .NextInSection.Title }}</span></a>
<a href="{{ .NextInSection.RelPermalink }}" class="left arrow"><span>{{ .NextInSection.Title }}</span></a>
{{- end }}
{{- if .PrevInSection }}
| <a href="{{ .PrevInSection.RelPermalink }}" class="right arrow"><span>{{ .PrevInSection.Title }}</span> ⇢</a>
<a href="{{ .PrevInSection.RelPermalink }}" class="right arrow"><span>{{ .PrevInSection.Title }}</span></a>
{{- end }}

2
src/themes/oscar/layouts/sections/about.html
View File

@ -2,7 +2,7 @@
<main class="main wrapper">
<div class="post">
<div class="post about">
{{ .Content }}