pau/sophie-lewis-hugo
0
0
Fork 0
forked from autonomic-cooperative/sophie-lewis-hugo
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'changes-layout' into staging

Browse Source
This commit is contained in:
desmukh
2023-01-04 00:40:33 +05:00
parent 6d7b4d5135 d841c35297
commit be0437cb85
12 changed files with 193 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
themes/sophie-lewis/assets/scss/font.scss
View File

@ -1,7 +1,7 @@
@mixin define-font-family($name, $weight, $style, $filename) {
font-family: $name;
src:
src:
url("../font/woff2/#{$filename}") format("woff2"),
url("../font/ttf/#{$filename}") format("ttf");
font-weight: $weight;
@ -41,21 +41,9 @@ $mono_font: IBMPlexMono;
@font-face {
@include define-font-family($serif_font, lighter, italic, 'IBMPlexSerif-LightItalic.woff2')
}
@font-face {
@include define-font-family($mono_font, normal, italic, 'IBMPlexMono-Italic.woff2')
}
@font-face {
@include define-font-family($mono_font, normal, null, 'IBMPlexMono-Regular.woff2')
}
@font-face {
@include define-font-family($mono_font, bold, italic, 'IBMPlexMono-BoldItalic.woff2')
}
@font-face {
@include define-font-family($mono_font, bold, null, 'IBMPlexMono-Bold.woff2')
}
@font-face {
@include define-font-family($mono_font, 700, italic, 'IBMPlexMono-MediumItalic.woff2')
}
@font-face {
@include define-font-family($mono_font, 700, null, 'IBMPlexMono-Medium.woff2')
}
}

147
themes/sophie-lewis/assets/scss/main.scss
View File

@ -1,4 +1,4 @@
$section-padding: 1rem 0rem;
$section-padding: 1rem 0rem;
$section-padding-desktop: $section-padding;
$section-padding-large: $section-padding;
@ -12,6 +12,21 @@ $text-colour: #1F1F1F;
body {
color: $text-colour;
font-family: $serif_font;
line-height: 1.4;
h1{
font-family: $mono_font;
font-size: 21px;
.red-text{
color: #eb2b2b;
}
}
}
.red-text{
color: #eb2b2b;
}
$hr-width: 0.15rem;
@ -19,6 +34,10 @@ $hr-color: $gray;
hr {
background-color: $hr-color;
height: $hr-width;
.red {
background-color: #eb2b2b;
}
}
.nav-tabs.tabs {
@ -30,7 +49,8 @@ hr {
}
a {
padding: 0.5rem 0;
font-size: 1.3rem;
font-size: 1rem;
text-decoration: underline;
@media (max-width: 480px) { font-size: 1.1rem; }
color: $text-colour;
border-bottom-color: $hr-color;
@ -39,9 +59,9 @@ hr {
border-bottom-color: $hr-color;
}
}
padding: 0.8rem 0;
.is-active a {
text-decoration: underline;
font-weight: bold;
color: $text-colour;
border-bottom-color: $hr-color;
@ -51,7 +71,7 @@ hr {
// adding styles to make navigation fit on mobile
@media (max-width: 480px) {
nav {
.tabs {
.tabs {
display: initial;
ul {
border-bottom: none;
@ -67,11 +87,28 @@ hr {
font-size: 5rem;
}
.is-size-0-1 {
font-size: 57px;
}
.header .hero-body {
padding-left: 0px !important;
padding-top: 8em;
}
.button-book {
background-color: #eb2b2b;
color: white;
float: right;
font-family: $mono_font;
}
.is-outlined{
background: rgba(0,0,0,0);
border-color: #eb2b2b;
color: #eb2b2b;
}
#content {
font-size: 1.1rem;
strong,i,b,em {
@ -79,7 +116,7 @@ hr {
}
em {
font-style: italic;
font-weight: lighter !important;
font-weight: lighter !important;
}
table {
@ -88,7 +125,7 @@ hr {
p {
padding-bottom: 0 !important;
}
}
}
td {
padding: 0.5rem 0;
}
@ -122,11 +159,11 @@ hr {
padding-bottom: 2rem;
}
}
&.getintouch p {
&.getintouch p {
padding-bottom: 0;
}
.contact {
p {
p {
font-family: $sans_font;
}
.contact_text {
@ -194,6 +231,14 @@ hr {
width: 25%;
}
.small{
width: 25%;
}
.medium {
width: 50%;
}
.clearfix {
clear: both;
}
@ -209,16 +254,15 @@ hr {
}
#content-column {
@media all and (max-width: 1216px) {
padding: 0 2rem;
@media all and (max-width: 1216px) {
padding: 0 2rem;
}
@media all and (min-width: 1408px) {
@media all and (min-width: 1408px) {
padding-right: 6.5rem !important;
}
}
.title {
font-family: $serif_font;
font-style: italic;
font-weight: 200;
}
@ -235,9 +279,22 @@ p {
}
}
a {
text-decoration: underline;
}
a.no-underline {
text-decoration: none;
}
h1 {
font-family: $mono_font;
font-size: 21px;
}
nav,footer {
font-family: $sans_font;
font-style: italic;
//font-style: italic;
}
.cv-entry {
@ -269,16 +326,17 @@ footer {
display: none;
}
}
/* EVENTS PAGE STYLES
====================== */
#events-listing {
h1 {
margin-bottom: 1em;
h1 {
margin-bottom: 1em;
font-weight: 600;
font-size: 21px;
}
.events-list {
li {
@ -289,7 +347,7 @@ footer {
padding-bottom: 0;
font-weight: bold;
}
small { font-weight: normal;}
}
}
@ -297,35 +355,43 @@ footer {
/* ABOLISH THE FAMILY STYLES
============================= */
#abolish-the-family {
padding-top: 1rem;
@media (max-width: 480px) { padding-top: 2rem; }
@media (max-width: 480px) { border-top: 1px solid; }
background-color: #fff5f5;
.book-cell {
h1{
text-align: center;
color: #eb2b2b;
}
.book-cover { margin-top: 2em; }
.order-link {
text-decoration: underline;
text-decoration: underline;
font-size: 1.2rem;
color: #851c22;
display: inline-block;
color: #eb2b2b;
text-align: center;
//display: inline-block;
@media (max-width: 480px) { padding-top: 1em; }
}
margin-bottom: 1.5em;
}
#reviews {
margin-bottom: 2rem;
h2 {
font-family: 'IBM Plex Serif', sans-serif;
h2 {
font-family: 'IBM Plex Serif', sans-serif;
font-size: 2rem;
font-weight: 300;
font-style: italic;
line-height: 1.4;
}
ol {
padding-left: 1.5rem;
li::marker { font-family: 'IBM Plex Serif', sans-serif; }
@ -333,11 +399,18 @@ footer {
}
.testimonial-card {
font-family: $mono_font;
font-size: 16px;
text-transform: capitalize;
font-weight: bold;
border: 1px solid;
color: #eb2b2b;
padding: 1em;
margin-bottom: 2rem;
.testimonial-author {
font-style: italic;
font-weight: normal;
font-family: $serif_font;
font-size: 16px;
}
}
}
@ -348,12 +421,11 @@ footer {
@media (max-width: 480px) { padding-top: 3rem; }
@media (max-width: 480px) { border-top: 1px solid; }
h1 {
margin-bottom: 1em;
font-family: 'IBM Plex Serif', sans-serif;
font-weight: 200;
font-size: 2.25rem;
font-style: italic;
h1 {
font-family: $mono_font;
font-size: 21px;
margin-bottom: 1em;
font-weight: 200;
}
.audio-list {
@ -364,10 +436,13 @@ footer {
p {
padding-bottom: 0;
font-weight: bold;
a{
font-weight: bold;
}
}
small { font-weight: normal;}
}
}
}
}

31
themes/sophie-lewis/layouts/_default/baseof.html
View File

@ -1,18 +1,23 @@
<!DOCTYPE html>
<html>
{{- partial "head.html" . -}}
<body>
<div class="columns">
<div class="column is-3-fullhd is-1-widescreen is-hidden-touch is-hidden-desktop-only"></div>
<div id="content-column" class="column is-6-widescreen is-8-desktop">
{{- partial "header.html" . -}}
{{- partial "nav.html" . -}}
{{- block "main" . }}{{- end }}
{{- partial "footer.html" . -}}
{{ $content_class := $.Page.Params.title | lower }}
{{ if eq (.Title | lower) "abolish-the-family" }}
<body id="abolish-the-family">
{{else}}
<body>
{{end}}
<div class="columns">
<div class="column is-3-fullhd is-1-widescreen is-hidden-touch is-hidden-desktop-only"></div>
<div id="content-column" class="column is-6-widescreen is-8-desktop">
{{- partial "header.html" . -}}
{{- partial "nav.html" . -}}
{{- block "main" . }}{{- end }}
{{- partial "footer.html" . -}}
</div>
<div id="octopus" class="column is-4-widescreen is-4-desktop is-hidden-touch ">
{{- block "octo" . }}{{- end }}
</div>
</div>
<div id="octopus" class="column is-4-widescreen is-4-desktop is-hidden-touch ">
{{- block "octo" . }}{{- end }}
</div>
</div>
</body>
</body>
</html>

12
themes/sophie-lewis/layouts/_default/single.html
View File

@ -1,11 +1,10 @@
{{ define "main" }}
{{ $content_class := $.Page.Params.title | lower }}
{{ if eq (.Title | lower) "about" }}
<div class="columns">
<div class="column is-one-third">
<div class="headshot">
{{ $img := relURL "img/headshot_example.png" }}
{{ if isset $.Site.Params.about "headshot" }}
{{ $img := relURL "img/headshot_example.png" }}
{{ if isset $.Site.Params.about "headshot" }}
{{ if fileExists ( printf "static/img/%s" $.Site.Params.about.headshot ) }}
{{ $img := relURL ( printf "img/%s" $.Site.Params.about.headshot )}}
<img src='{{ $img }}'>
@ -17,11 +16,8 @@
{{ end }}
</div>
</div>
<div class="column">
<div id="content" class='section {{ $content_class }}'>
{{.Content}}
</div>
</div>
<div id="content" class='section {{ $content_class }}'>
{{.Content}}
</div>
{{ else }}
<div id="content" class='section {{ $content_class }}'>

2
themes/sophie-lewis/layouts/partials/footer.html
View File

@ -2,7 +2,7 @@
<hr>
<div class="columns">
<div class="column">
<div>FIND ME AT</div>
<!--<div>FIND ME AT</div>-->
<div class="social-circles">
{{ if isset $.Site.Params.social "twitter" }}
{{- partial "social-circles/twitter.html" . -}}

2
themes/sophie-lewis/layouts/partials/head.html
View File

@ -9,5 +9,5 @@
{{ template "_internal/twitter_cards.html" . }}
<link href='{{ $style.RelPermalink }}' rel="stylesheet">
<title>{{ $title }}</title>
{{- partial "octocss.html" . -}}
<!--{{- partial "octocss.html" . -}}-->
</head>

14
themes/sophie-lewis/layouts/partials/header.html
View File

@ -1,12 +1,18 @@
<div class="hero header octopus-mobile">
<div class="hero-body">
<a href="/">
<p class="title is-size-0">
{{ $content_class := $.Page.Params.title | lower }}
{{ if eq (.Title | lower) "abolish-the-family" }}
<a class="button is-outlined button-book no-underline" href="/writing/abolish-the-family/">NEW BOOK&nbsp;<b>Abolish The Family</b></a><br />
{{else}}
<a class="button button-book no-underline" href="/writing/abolish-the-family/">NEW BOOK&nbsp;<b>Abolish The Family</b></a><br />
{{end}}
<a class="no-underline" href="/">
<p class="title is-size-0-1">
{{ site.Params.header.name }}
</p>
<p class="subtitle is-size-4">
<p class="subtitle is-size-6">
{{ site.Params.header.subtitle }}
</p>
</a>
</div>
</div>
</div>

8
themes/sophie-lewis/layouts/partials/nav.html
View File

@ -1,14 +1,14 @@
<nav>
<div class="tabs is-fullwidth nav-tabs is-italic is-uppercase">
<div class="tabs is-fullwidth nav-tabs is-uppercase">
<ul>
<li{{ if eq $.Page.Params.Title "index" }} class="is-active"{{ end }}><a href="/">Home</a></li>
{{ range $nav_tab := site.Params.navbar }}
{{ $nav_title := replace $nav_tab "-" " " | title }}
{{ if eq $.Page.Params.title $nav_title }}
<li class="is-active"><a href="/{{$nav_tab}}">{{ $nav_title }}</a></li>
{{ else }}
{{else}}
<li><a href="/{{$nav_tab}}">{{ $nav_title }}</a></li>
{{ end }}
{{ end }}
{{/* <li><a>About</a></li>
<li><a>Writing</a></li>
@ -16,4 +16,4 @@
<li><a>Get In Touch</a></li> */}}
</ul>
</div>
</nav>
</nav>