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

added basic styles for layout. test header

Browse Source
This commit is contained in:
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; display: none;
} }
:root { :root {
/* ========================================================================== /* ==========================================================================
Fonts Fonts
========================================================================== */ ========================================================================== */
--font-brand: 'Overpass Mono', monospace; --font-brand: 'Overpass Mono', monospace;
/* Fonts weights */ /* Fonts weights */
--fw-regular: 400; --fw-regular: 400;
--fw-bold: 700; --fw-bold: 700;
/* ========================================================================== /* ==========================================================================
Colors Colors
========================================================================== */ ========================================================================== */
/* Brand /* Brand
========================================================================== */ ========================================================================== */
--color-brand: #0161f0; --background-main: #F0F0F0;
--background-main: #F0F0F0; --color-main: #292929;
--color-main: #292929; --color-link: #0161f0;
--color-link-hover:#575757;
/* ========================================================================== /* ==========================================================================
Font sizes Font sizes
========================================================================== */ ========================================================================== */
/* Font sizes */ /* Font sizes https://www.modularscale.com/?16,14&px&1.5 */
--font-size-1: 14px; --font-size-1: 14px;
--font-size-2: 16px; --font-size-2: 16px;
--font-size-3: 26px; --font-size-3: 24px;
--font-size-4: 36px;
--font-size-5: 54px;
/* Font sizes names */ /* Font sizes names */
--font-heading: var(--fw-bold) var(--font-size-3) / 1.25 var(--font-brand); --font-title: var(--fw-bold) var(--font-size-4) / 1.25 var(--font-brand);
--font-body: var(--font-size-2) / 1.38 var(--font-brand); --font-heading: var(--fw-bold) var(--font-size-3) / 1.25 var(--font-brand);
--font-caption: var(--font-size-1) / 1.37 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 */ /* Dark theme */
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--color-brand: #02A4FF; --background-main: #292929;
--background-main: #292929; --color-main: #F0F0F0;
--color-main: #F0F0F0; --color-link: #02A4FF;
} --color-link-hover:#9e9e9e;
}
} }
/* ========================================================================== /* ==========================================================================
Breakpoints Breakpoints
========================================================================== */ ========================================================================== */
*, *,
*::before, *::before,
*::after { *::after {
box-sizing: border-box; box-sizing: border-box;
} }
body { body {
background-color: var(--background-main);
font-family: var(--font-brand); font-family: var(--font-brand);
text-rendering: auto;
color: var(--color-main);
font: var(--font-body); font: var(--font-body);
text-rendering: auto;
background-color: var(--background-main);
color: var(--color-main);
} }
body a { body a {
color: var(--color-brand); color: var(--color-link);
text-decoration: none; text-decoration: none;
} }
body a:hover {
color: var(--color-link-hover);
}
h1, h2, h3, h4, h5, h6, h1, h2, h3, h4, h5, h6,
b, strong { b, strong {
font-weight: var(--fw-bold); font-weight: var(--fw-bold);
@ -347,9 +370,89 @@ b, strong {
i, em { i, em {
font-style: italic; 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 */ /* Layout */
/* Components */ /* Components */
/* Modules */ /* 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 */ /* Specific pages */
/* Utilities */ /* 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 */ /* Vendors */

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

@ -5,14 +5,17 @@
} }
body { body {
background-color: var(--background-main);
font-family: var(--font-brand); font-family: var(--font-brand);
text-rendering: auto;
color: var(--color-main);
font: var(--font-body); font: var(--font-body);
text-rendering: auto;
background-color: var(--background-main);
color: var(--color-main);
a { a {
color: var(--color-brand); color: var(--color-link);
text-decoration: none; text-decoration: none;
&:hover {
color: var(--color-link-hover);
}
} }
} }
h1, h2, h3, h4, h5, h6, h1, h2, h3, h4, h5, h6,
@ -22,4 +25,17 @@ b, strong {
i, em { i, em {
font-style: italic; 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 */ /* Components */
/* Modules */ /* Modules */
@import 'assets/css/modules/header.css';
@import 'assets/css/modules/footer.css';
/* Specific pages */ /* Specific pages */
/* Utilities */ /* Utilities */
@import 'assets/css/utilities/visibility.css';
/* Vendors */ /* 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 { :root {
/* ========================================================================== /* ==========================================================================
Fonts Fonts
========================================================================== */ ========================================================================== */
--font-brand: 'Overpass Mono', monospace; --font-brand: 'Overpass Mono', monospace;
/* Fonts weights */ /* Fonts weights */
--fw-regular: 400; --fw-regular: 400;
--fw-bold: 700; --fw-bold: 700;
/* ========================================================================== /* ==========================================================================
Colors Colors
========================================================================== */ ========================================================================== */
/* Brand /* Brand
========================================================================== */ ========================================================================== */
--color-brand: #0161f0; --background-main: #F0F0F0;
--background-main: #F0F0F0; --color-main: #292929;
--color-main: #292929; --color-link: #0161f0;
--color-link-hover:#575757;
/* ========================================================================== /* ==========================================================================
Font sizes Font sizes
========================================================================== */ ========================================================================== */
/* Font sizes */ /* Font sizes https://www.modularscale.com/?16,14&px&1.5 */
--font-size-1: 14px; --font-size-1: 14px;
--font-size-2: 16px; --font-size-2: 16px;
--font-size-3: 26px; --font-size-3: 24px;
--font-size-4: 36px;
--font-size-5: 54px;
/* Font sizes names */ /* Font sizes names */
--font-heading: var(--fw-bold) var(--font-size-3) / 1.25 var(--font-brand); --font-title: var(--fw-bold) var(--font-size-4) / 1.25 var(--font-brand);
--font-body: var(--font-size-2) / 1.38 var(--font-brand); --font-heading: var(--fw-bold) var(--font-size-3) / 1.25 var(--font-brand);
--font-caption: var(--font-size-1) / 1.37 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 */ /* Dark theme */
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--color-brand: #02A4FF; --background-main: #292929;
--background-main: #292929; --color-main: #F0F0F0;
--color-main: #F0F0F0; --color-link: #02A4FF;
} --color-link-hover:#9e9e9e;
}
} }
/* ========================================================================== /* ==========================================================================
Breakpoints Breakpoints
========================================================================== */ ========================================================================== */
@custom-media --screen-xxs (min-width: 320px); @custom-media --screen-xxs (min-width: 320px);
@custom-media --screen-xs (min-width: 480px); @custom-media --screen-xs (min-width: 480px);
@custom-media --screen-s (min-width: 768px); @custom-media --screen-s (min-width: 768px);
@custom-media --screen-m (min-width: 960px); @custom-media --screen-m (min-width: 960px);
@custom-media --screen-ml (min-width: 1024px); @custom-media --screen-ml (min-width: 1024px);
@custom-media --screen-l (min-width: 1281px); @custom-media --screen-l (min-width: 1281px);
@custom-media --screen-xl (min-width: 1441px); @custom-media --screen-xl (min-width: 1441px);
@custom-media --screen-xxl (min-width: 1920px); @custom-media --screen-xxl (min-width: 1920px);
@custom-media --max-screen-s (max-width: 769px); @custom-media --max-screen-s (max-width: 769px);
@custom-media --max-screen-m (max-width: 960px); @custom-media --max-screen-m (max-width: 960px);
@custom-media --max-screen-ml (max-width: 1024px); @custom-media --max-screen-ml (max-width: 1024px);

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

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

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

@ -1,5 +1,11 @@
<footer> <footer class="footer wrapper">
<span> <span>
&copy; <time datetime="{{ now }}">{{ now.Format "2006" }}</time> {{ .Site.Author.name }}. {{ i18n "generator" | safeHTML }} © <time datetime="{{ now }}">{{ now.Format "2006" }}</time> {{ .Site.Author.name }}
</span> </span>
</footer> <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> <header class="header">
<h1> <h1 class="logo">
<a href="{{ "/" | relURL }}"> <a href="{{ "/" | relURL }}">
<svg width="85" height="25" viewBox="0 0 85 25" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="102" height="32" viewBox="0 0 102 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="28" width="26" height="25" fill="black"/> <title>{{ .Site.Title }}</title>
<path d="M60 0L85 25H60V0Z" fill="black"/> <rect x="0.5" y="0.5" width="31" height="31" rx="15.5" stroke="black"/>
<rect width="26" height="25" rx="12.5" fill="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> </svg>
<span>{{ .Site.Title }}</span> <span class="sr-only">{{ .Site.Title }}</span>
</a> </a>
</h1> </h1>
<nav> <nav class="main-nav" role="navigation" aria-label="Main">
<ul> <ul>
{{ $currentPage := . }} {{ $currentPage := . }}
{{ range .Site.Menus.main }} {{ range .Site.Menus.main }}

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

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