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

added basic styles for layout. test header

feature/oscar-theme
Segundo Fdez 2022-02-12 13:12:25 +01:00
parent 6ae93d4922
commit 1b553040a5
11 changed files with 318 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -277,69 +277,92 @@ template {
display: none;
}
:root {
/* ==========================================================================
Fonts
========================================================================== */
--font-brand: 'Overpass Mono', monospace;
/* ==========================================================================
Fonts
========================================================================== */
--font-brand: 'Overpass Mono', monospace;
/* Fonts weights */
--fw-regular: 400;
--fw-bold: 700;
/* Fonts weights */
--fw-regular: 400;
--fw-bold: 700;
/* ==========================================================================
Colors
========================================================================== */
/* ==========================================================================
Colors
========================================================================== */
/* Brand
========================================================================== */
--color-brand: #0161f0;
--background-main: #F0F0F0;
--color-main: #292929;
/* Brand
========================================================================== */
--background-main: #F0F0F0;
--color-main: #292929;
--color-link: #0161f0;
--color-link-hover:#575757;
/* ==========================================================================
Font sizes
========================================================================== */
/* ==========================================================================
Font sizes
========================================================================== */
/* Font sizes */
--font-size-1: 14px;
--font-size-2: 16px;
--font-size-3: 26px;
/* Font sizes https://www.modularscale.com/?16,14&px&1.5 */
--font-size-1: 14px;
--font-size-2: 16px;
--font-size-3: 24px;
--font-size-4: 36px;
--font-size-5: 54px;
/* Font sizes names */
--font-heading: var(--fw-bold) var(--font-size-3) / 1.25 var(--font-brand);
--font-body: var(--font-size-2) / 1.38 var(--font-brand);
--font-caption: var(--font-size-1) / 1.37 var(--font-brand);
/* 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.38 var(--font-brand);
--font-caption: var(--font-size-1) / 1.37 var(--font-brand);
/* ==========================================================================
Spacing
========================================================================== */
--spacing-1: calc(1rem / 2);
--spacing-2: 1rem;
--spacing-3: 1.5rem;
--spacing-4: 2rem;
--spacing-5: 2.5rem;
--spacing-6: 3rem;
/* ==========================================================================
Size
========================================================================== */
--logo-width: 102px;
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
:root {
--color-brand: #02A4FF;
--background-main: #292929;
--color-main: #F0F0F0;
}
:root {
--background-main: #292929;
--color-main: #F0F0F0;
--color-link: #02A4FF;
--color-link-hover:#9e9e9e;
}
}
/* ==========================================================================
Breakpoints
========================================================================== */
Breakpoints
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
background-color: var(--background-main);
font-family: var(--font-brand);
text-rendering: auto;
color: var(--color-main);
font: var(--font-body);
text-rendering: auto;
background-color: var(--background-main);
color: var(--color-main);
}
body a {
color: var(--color-brand);
color: var(--color-link);
text-decoration: none;
}
body a:hover {
color: var(--color-link-hover);
}
h1, h2, h3, h4, h5, h6,
b, strong {
font-weight: var(--fw-bold);
@ -347,9 +370,89 @@ b, strong {
i, em {
font-style: italic;
}
/* TODO: move this */
.wrapper {
max-width: 768px;
}
@media (min-width: 480px) {
.wrapper {
margin-left: calc(20vw + var(--logo-width))
}
}
.main {
margin-top: var(--spacing-6);
padding: var(--spacing-3);
}
/* Layout */
/* Components */
/* Modules */
.header {
padding: var(--spacing-3);
}
@media (min-width: 480px) {
.header {
display: flex;
align-items: end;
position: sticky;
top: 0;
z-index: 1;
background: var(--background-main)
}
}
.logo {
margin: 0;
}
.logo svg {
vertical-align: middle;
}
.logo svg > * {
stroke: currentColor;
}
@media (min-width: 480px) {
.main-nav {
margin-left: 20vw
}
}
.main-nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
gap: var(--spacing-2);
}
.footer {
padding: var(--spacing-6) var(--spacing-3);
font: var(--font-caption);
display: flex;
gap: var(--spacing-1);
flex-wrap: wrap;
}
.footer span::after {
content: '|';
opacity: .4;
}
.footer-contact {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
gap: var(--spacing-2);
flex-wrap: wrap;
}
/* Specific pages */
/* Utilities */
/* Available for screen readers */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
border: 0;
clip: rect(0, 0, 0,0);
margin: -1px;
padding: 0;
overflow: hidden;
}
.hide {
display: none;
}
/* Vendors */

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

@ -5,14 +5,17 @@
}
body {
background-color: var(--background-main);
font-family: var(--font-brand);
text-rendering: auto;
color: var(--color-main);
font: var(--font-body);
text-rendering: auto;
background-color: var(--background-main);
color: var(--color-main);
a {
color: var(--color-brand);
color: var(--color-link);
text-decoration: none;
&:hover {
color: var(--color-link-hover);
}
}
}
h1, h2, h3, h4, h5, h6,
@ -22,4 +25,17 @@ b, strong {
i, em {
font-style: italic;
}
/* TODO: move this */
.wrapper {
max-width: 768px;
@media (--screen-xs) {
margin-left: calc(20vw + var(--logo-width));
}
}
.main {
margin-top: var(--spacing-6);
padding: var(--spacing-3);
}

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

@ -9,9 +9,12 @@
/* Components */
/* Modules */
@import 'assets/css/modules/header.css';
@import 'assets/css/modules/footer.css';
/* Specific pages */
/* Utilities */
@import 'assets/css/utilities/visibility.css';
/* Vendors */

21
src/themes/oscar/assets/css/modules/footer.css Normal file
View File

@ -0,0 +1,21 @@
.footer {
padding: var(--spacing-6) var(--spacing-3);
font: var(--font-caption);
display: flex;
gap: var(--spacing-1);
flex-wrap: wrap;
span {
&::after {
content: '|';
opacity: .4;
}
}
}
.footer-contact {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
gap: var(--spacing-2);
flex-wrap: wrap;
}

32
src/themes/oscar/assets/css/modules/header.css Normal file
View File

@ -0,0 +1,32 @@
.header {
padding: var(--spacing-3);
@media (--screen-xs) {
display: flex;
align-items: end;
position: sticky;
top: 0;
z-index: 1;
background: var(--background-main);
}
}
.logo {
margin: 0;
svg {
vertical-align: middle;
> * {
stroke: currentColor;
}
}
}
.main-nav {
@media (--screen-xs) {
margin-left: 20vw;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
gap: var(--spacing-2);
}
}

15
src/themes/oscar/assets/css/utilities/visibility.css Normal file
View File

@ -0,0 +1,15 @@
/* Available for screen readers */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
border: 0;
clip: rect(0, 0, 0,0);
margin: -1px;
padding: 0;
overflow: hidden;
}
.hide {
display: none;
}

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

@ -1,64 +1,84 @@
:root {
/* ==========================================================================
Fonts
========================================================================== */
--font-brand: 'Overpass Mono', monospace;
/* ==========================================================================
Fonts
========================================================================== */
--font-brand: 'Overpass Mono', monospace;
/* Fonts weights */
--fw-regular: 400;
--fw-bold: 700;
/* Fonts weights */
--fw-regular: 400;
--fw-bold: 700;
/* ==========================================================================
Colors
========================================================================== */
/* ==========================================================================
Colors
========================================================================== */
/* Brand
========================================================================== */
--color-brand: #0161f0;
--background-main: #F0F0F0;
--color-main: #292929;
/* Brand
========================================================================== */
--background-main: #F0F0F0;
--color-main: #292929;
--color-link: #0161f0;
--color-link-hover:#575757;
/* ==========================================================================
Font sizes
========================================================================== */
/* ==========================================================================
Font sizes
========================================================================== */
/* Font sizes */
--font-size-1: 14px;
--font-size-2: 16px;
--font-size-3: 26px;
/* Font sizes https://www.modularscale.com/?16,14&px&1.5 */
--font-size-1: 14px;
--font-size-2: 16px;
--font-size-3: 24px;
--font-size-4: 36px;
--font-size-5: 54px;
/* Font sizes names */
--font-heading: var(--fw-bold) var(--font-size-3) / 1.25 var(--font-brand);
--font-body: var(--font-size-2) / 1.38 var(--font-brand);
--font-caption: var(--font-size-1) / 1.37 var(--font-brand);
/* 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.38 var(--font-brand);
--font-caption: var(--font-size-1) / 1.37 var(--font-brand);
/* ==========================================================================
Spacing
========================================================================== */
--spacing-1: calc(1rem / 2);
--spacing-2: 1rem;
--spacing-3: 1.5rem;
--spacing-4: 2rem;
--spacing-5: 2.5rem;
--spacing-6: 3rem;
/* ==========================================================================
Size
========================================================================== */
--logo-width: 102px;
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
:root {
--color-brand: #02A4FF;
--background-main: #292929;
--color-main: #F0F0F0;
}
:root {
--background-main: #292929;
--color-main: #F0F0F0;
--color-link: #02A4FF;
--color-link-hover:#9e9e9e;
}
}
/* ==========================================================================
Breakpoints
========================================================================== */
@custom-media --screen-xxs (min-width: 320px);
@custom-media --screen-xs (min-width: 480px);
@custom-media --screen-s (min-width: 768px);
@custom-media --screen-m (min-width: 960px);
@custom-media --screen-ml (min-width: 1024px);
@custom-media --screen-l (min-width: 1281px);
@custom-media --screen-xl (min-width: 1441px);
@custom-media --screen-xxl (min-width: 1920px);
/* ==========================================================================
Breakpoints
========================================================================== */
@custom-media --screen-xxs (min-width: 320px);
@custom-media --screen-xs (min-width: 480px);
@custom-media --screen-s (min-width: 768px);
@custom-media --screen-m (min-width: 960px);
@custom-media --screen-ml (min-width: 1024px);
@custom-media --screen-l (min-width: 1281px);
@custom-media --screen-xl (min-width: 1441px);
@custom-media --screen-xxl (min-width: 1920px);
@custom-media --max-screen-s (max-width: 769px);
@custom-media --max-screen-m (max-width: 960px);
@custom-media --max-screen-ml (max-width: 1024px);
@custom-media --max-screen-s (max-width: 769px);
@custom-media --max-screen-m (max-width: 960px);
@custom-media --max-screen-ml (max-width: 1024px);

2
src/themes/oscar/layouts/index.html
View File

@ -1,6 +1,6 @@
{{ define "main" }}
<main>
<main class="main wrapper">
<section class="catalogue">
<h2>List: Index</h2>

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

@ -1,5 +1,11 @@
<footer>
<span>
&copy; <time datetime="{{ now }}">{{ now.Format "2006" }}</time> {{ .Site.Author.name }}. {{ i18n "generator" | safeHTML }}
</span>
</footer>
<footer class="footer wrapper">
<span>
© <time datetime="{{ now }}">{{ now.Format "2006" }}</time> {{ .Site.Author.name }}
</span>
<ul class="footer-contact">
<li><a href="">twitter</a></li>
<li><a href="">instagram</a></li>
<li><a href="">twich</a></li>
<li><a href="mailto:info@oscarmlage">info@oscarmlage.com</a></li>
</ul>
</footer>

17
src/themes/oscar/layouts/partials/header.html
View File

@ -1,15 +1,16 @@
<header>
<h1>
<header class="header">
<h1 class="logo">
<a href="{{ "/" | relURL }}">
<svg width="85" height="25" viewBox="0 0 85 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="28" width="26" height="25" fill="black"/>
<path d="M60 0L85 25H60V0Z" fill="black"/>
<rect width="26" height="25" rx="12.5" fill="black"/>
<svg width="102" height="32" viewBox="0 0 102 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>{{ .Site.Title }}</title>
<rect x="0.5" y="0.5" width="31" height="31" rx="15.5" stroke="black"/>
<path d="M51.2957 12.4032L65.5 1.9867V30.5H36.5V1.9867L50.7043 12.4032L51 12.62L51.2957 12.4032Z" stroke="black"/>
<path d="M72.5 2.20711L100.793 30.5H72.5V2.20711Z" stroke="black"/>
</svg>
<span>{{ .Site.Title }}</span>
<span class="sr-only">{{ .Site.Title }}</span>
</a>
</h1>
<nav>
<nav class="main-nav" role="navigation" aria-label="Main">
<ul>
{{ $currentPage := . }}
{{ range .Site.Menus.main }}

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

@ -1,6 +1,6 @@
{{ define "main" }}
<main>
<main class="main wrapper">
<h1>Single: Sections</h1>
<div class="post">