Skip to content

Commit 46facb2

Browse files
atruskieatruskie
committed
Simplified styles
- changed the flex layout to be simpler in the footer - it's now responsive without needing media queries - aligned all text and icons in footer-lower - fixed horizontal scrollbar appearing because of hero image - converted some files that didn't need to be scss to plain css - add dynamic font scaling variables to global vars - used the dynamic font scaling var to improve hero title - contrained hero image to take up a max of 40% of the view height (on really large screens it could scale until the hero was the height of the page) - disabled useless post-footer style - simplified structure of footer
1 parent 461a46d commit 46facb2

8 files changed

Lines changed: 53 additions & 84 deletions

File tree

‎assets/css/common.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ body {
44
min-height: 100vh;
55
display: flex;
66
flex-direction: column;
7+
overflow-x: hidden;
78

89
/* transition:
910
color var(--oe-duration) var(--oe-timing),

‎assets/css/footer.css‎

Lines changed: 25 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -2,90 +2,58 @@
22
display: flex;
33
flex-direction: column;
44
margin-top: var(--oe-padding-small);
5+
width: 100%;
56

67
&-git-info {
7-
width: 100%;
8-
display: flex;
9-
justify-content: center;
8+
width: 100%;
9+
display: flex;
10+
justify-content: center;
1011
background-color: blue;
1112
}
1213

13-
&-upper, &-lower {
14-
width: 100%;
15-
display: flex;
16-
flex-wrap: wrap;
17-
flex-direction: row;
18-
margin-bottom: var(--oe-padding-small);
14+
&-upper,
15+
&-lower {
16+
width: 100%;
17+
display: flex;
18+
flex-wrap: wrap;
19+
flex-direction: row;
20+
margin-bottom: var(--oe-padding-small);
21+
gap: var(--oe-padding);
22+
text-align: center;
1923
}
2024

2125
&-upper {
22-
justify-content: center;
26+
justify-content: center;
2327
}
2428

2529
&-lower {
2630
justify-content: space-between;
27-
width: 100%;
31+
align-items: end;
32+
align-content: center;
2833
}
2934

30-
&-doi {
31-
display: flex;
32-
}
33-
34-
&-doi, &-copyright, &-social-media, &-themeselector {
35-
width: 50%;
36-
padding-top: var(--oe-padding-smaller);
35+
& .oe-footer-lower > * {
36+
flex-grow: 1;
37+
flex-shrink: 0;
3738
}
3839

3940
&-social-media {
40-
display: flex;
41-
justify-content: flex-end;
42-
43-
sl-icon-button::part(base) {
44-
color: var(--color-link);
45-
}
46-
47-
.button__label {
48-
padding: 0 var(--sl-spacing-x-small) 0 0 !important; /* Overriding shoelace button label style to improve spacing */
49-
}
41+
a {
42+
height: 16px;
43+
display: inline-block;
44+
vertical-align: text-top;
45+
}
5046
}
5147

5248
&-themeselector {
53-
text-align: right;
49+
flex-shrink: 1;
5450
}
5551
}
5652

57-
dark-mode-toggle {
58-
word-spacing: 200%;
59-
}
60-
6153
dark-mode-toggle::part(fieldset) {
6254
display: flex;
6355
justify-content: flex-start;
6456
align-items: baseline;
6557
flex-direction: row-reverse;
6658
gap: 1em;
6759
}
68-
69-
/* Small screen styles */
70-
@media only screen and (max-width: 700px) {
71-
.oe-footer {
72-
flex-direction: column;
73-
74-
&-lower {
75-
flex-direction: column;
76-
}
77-
78-
&-doi, &-copyright, &-social-media, &-themeselector {
79-
width: 100%;
80-
display: flex;
81-
justify-content: flex-start;
82-
}
83-
}
84-
.oe-footer > div {
85-
margin-top: --oe-padding-small;
86-
}
87-
88-
dark-mode-toggle::part(fieldset) {
89-
flex-direction: row;
90-
}
91-
}

assets/css/newsletter-iframe.scss renamed to assets/css/newsletter-iframe.css

File renamed without changes.

‎assets/css/oe-main.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,14 @@
5050
--oe-box-shadow: 0 1px 4px 0 rgba(0,0,0, 0.3);
5151
--oe-box-shadow-hover: 0 1px 6px 0 rgba(0,0,0, 0.8);
5252

53+
/* Use these definitions for font sizes that scale to the size of the viewport */
54+
/* Adjust by using the calculator at the link below */
55+
/* https://www.fluid-type-scale.com/calculate?minFontSize=16&minWidth=400&minRatio=1.25&maxFontSize=18&maxWidth=1920&maxRatio=1.66&steps=small%2Cnormal%2Clarge%2Ctitle&baseStep=base&prefix=oe-font-size-scaling&useContainerWidth=false&includeFallbacks=false&useRems=true&remValue=16&decimals=2&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1920 */
56+
--oe-font-size-scaling-small: clamp(1.25rem, 0.65vi + 1.09rem, 1.87rem);
57+
--oe-font-size-scaling-normal: clamp(1.56rem, 1.62vi + 1.16rem, 3.1rem);
58+
--oe-font-size-scaling-large: clamp(1.95rem, 3.36vi + 1.11rem, 5.15rem);
59+
--oe-font-size-scaling-title: clamp(2.44rem, 6.42vi + 0.84rem, 8.54rem);
60+
5361
}
5462

5563
@media screen and (max-width: 60em) {

‎assets/css/page.css‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212

1313
margin-top: 0;
1414
margin-bottom: var(--oe-padding-small);
15+
max-height: 40vh;
1516
}
1617

1718
.page-hero-image {
@@ -47,7 +48,8 @@
4748

4849
color: var(--oe-font-color-bright);
4950
& > h1 {
50-
font-size: calc(clamp(2.25rem, 0.875rem + 6.875vw, 5rem));
51+
font-size: var(--oe-font-size-scaling-title);
52+
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
5153
padding: 0;
5254
margin: 0;
5355
width: calc(100% - 2 * var(--oe-padding-large));
@@ -61,10 +63,3 @@
6163
margin-top: auto;
6264
}
6365
}
64-
65-
@media only screen and (max-width: 700px) {
66-
.page-hero-content > h1 {
67-
/* font-size: 300% !important; */
68-
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
69-
}
70-
}

assets/css/posts.scss renamed to assets/css/posts.css

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@
2424
font-size: inherit;
2525
}
2626

27-
&-image, &-content {
27+
&-image,
28+
&-content {
2829
flex: 1;
2930
}
3031

@@ -35,9 +36,9 @@
3536
}
3637

3738
&-image {
38-
margin-top: calc(var(--oe-padding-small) * -1);
39-
margin-bottom: calc(var(--oe-padding-small) * -1);
40-
margin-left: calc(var(--oe-padding-small) * -1);
39+
margin-top: calc(var(--oe-padding-small) * -1);
40+
margin-bottom: calc(var(--oe-padding-small) * -1);
41+
margin-left: calc(var(--oe-padding-small) * -1);
4142
padding-right: var(--oe-padding-small);
4243
background-size: cover;
4344
background-position: center;
@@ -60,7 +61,8 @@
6061
}
6162
}
6263

63-
&-footer {
64+
/* AT 2025: We don't have any content affected by this right? Disabling for removal */
65+
/* &-footer {
6466
display: flex;
6567
justify-content: end;
6668
margin-top: auto;
@@ -81,7 +83,7 @@
8183
.button__label {
8284
color: var(--oe-font-color);
8385
}
84-
}
86+
} */
8587
}
8688

8789
@media only screen and (max-width: 700px) {
@@ -99,20 +101,17 @@
99101
}
100102

101103
.section-posts {
102-
103104
}
104105

105106
.oe-post {
106107
display: flex;
107108
flex-direction: column;
108-
/* 80rem is the container size */
109-
max-width: calc(80rem - var(--oe-side-menu-width));
110109
align-content: center;
111110
align-self: center;
112111
background-color: var(--oe-background-color);
113112

114113
&-breadcrumb {
115-
margin-top: var(--oe-padding-smaller)
114+
margin-top: var(--oe-padding-smaller);
116115
}
117116

118117
&-meta {

‎content/posts/_index.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
title: Blog
33
image: '/images/Buffel-Grass-pasture-botanical-survey-at-Cungelella-1-1.jpg'
4+
imageStyle: 'background-position: 50% 66%;'
45
---
56

67
Read our regular updates here.

‎layouts/partials/after_main.html‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
{{ partial "docs/inject/body" . }}
2-
<footer class="oe-footer">
3-
<div class="container">
2+
<footer class="oe-footer container">
43
<div class="oe-footer-upper">
54
<div class="oe-footer-gitinfo">
65
<small><a href="{{ relref . `about#cite-this-web-page` }}">How to cite</a></small>｜
@@ -20,11 +19,10 @@
2019
</div>
2120

2221
<div class="oe-footer-social-media">
23-
<sl-button variant="text" size="small">
24-
<a href="{{ relref . `newsletter` }}">
25-
<sl-icon slot="prefix" name="envelope-at" label="newsletter"></sl-icon>Newsletter
26-
</a>
27-
</sl-button>
22+
<sl-icon-button name="envelope-at" label="Newsletter" src="/images/newsletter-icon.svg" href="{{ relref . `newsletter` }}" target="_blank"></sl-icon-button>
23+
<a href="{{ relref . `newsletter` }}">
24+
Newsletter
25+
</a>
2826
<sl-icon-button name="linkedin" label="LinkedIn" href="https://www.linkedin.com/company/open-ecoacoustics/" target="_blank"></sl-icon-button>
2927
<sl-icon-button label="BlueSky" src="/images/bluesky-icon.svg" href="https://bsky.app/profile/openecoacoustics.bsky.social" target="_blank"></sl-icon-button>
3028
</div>
@@ -35,11 +33,10 @@
3533

3634
<div class="oe-footer-themeselector" id="themeSelector">
3735
<dark-mode-toggle class="oe-dark-mode-toggle" id="dark-mode-toggle-1" appearance="switch" dark="Dark" light="Light"
38-
permanent remember="Remember?"></dark-mode-toggle>
36+
permanent></dark-mode-toggle>
3937
</div>
4038

4139
</div>
42-
</div>
4340
</footer>
4441
</body>
4542

0 commit comments

Comments
 (0)