Skip to content

Commit 60d2825

Browse files
vjdhamavjdhama
committed
optimisations
1 parent 866e76e commit 60d2825

File tree

2 files changed

+275
-2
lines changed

2 files changed

+275
-2
lines changed

‎assets/scss/critical.scss‎

Lines changed: 260 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,260 @@
1+
// Critical CSS - Only above-the-fold content
2+
// This gets inlined in <head> for instant rendering
3+
4+
// Variables
5+
$primary: #002644;
6+
$black: #2f2f41;
7+
$white: #ffffff;
8+
$white-offset: #f6f7ff;
9+
$grey: #5C5A5A;
10+
$font-family-base: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
11+
$font-family-heading: 'Outfit', serif, -apple-system;
12+
13+
// Reset essentials
14+
*, *::before, *::after {
15+
box-sizing: border-box;
16+
}
17+
18+
html {
19+
font-family: sans-serif;
20+
line-height: 1.15;
21+
-webkit-text-size-adjust: 100%;
22+
}
23+
24+
body {
25+
margin: 0;
26+
font-family: $font-family-base;
27+
font-size: 1rem;
28+
font-weight: 400;
29+
line-height: 1.5;
30+
color: $black;
31+
text-align: left;
32+
background-color: $white;
33+
}
34+
35+
h1, h2, h3, h4, h5, h6 {
36+
margin-top: 0;
37+
margin-bottom: 0.5rem;
38+
}
39+
40+
p {
41+
margin-top: 0;
42+
margin-bottom: 1rem;
43+
}
44+
45+
a {
46+
color: $primary;
47+
text-decoration: none;
48+
background-color: transparent;
49+
}
50+
51+
img {
52+
vertical-align: middle;
53+
border-style: none;
54+
}
55+
56+
// Container
57+
.container {
58+
width: 100%;
59+
padding-right: 15px;
60+
padding-left: 15px;
61+
margin-right: auto;
62+
margin-left: auto;
63+
}
64+
65+
@media (min-width: 576px) {
66+
.container {
67+
max-width: 540px;
68+
}
69+
}
70+
71+
@media (min-width: 768px) {
72+
.container {
73+
max-width: 720px;
74+
}
75+
}
76+
77+
@media (min-width: 992px) {
78+
.container {
79+
max-width: 960px;
80+
}
81+
}
82+
83+
@media (min-width: 1200px) {
84+
.container {
85+
max-width: 1140px;
86+
}
87+
}
88+
89+
// Wrapper
90+
.wrapper {
91+
display: flex;
92+
flex-direction: column;
93+
min-height: 100vh;
94+
}
95+
96+
// Header
97+
.header {
98+
color: $primary;
99+
background-color: #ffffff;
100+
display: flex;
101+
justify-content: space-between;
102+
align-items: center;
103+
border-bottom: 1px solid $white-offset;
104+
padding: 10px 0px;
105+
106+
.container {
107+
display: flex;
108+
justify-content: space-between;
109+
align-items: center;
110+
}
111+
112+
&.header-absolute {
113+
position: absolute;
114+
z-index: 10;
115+
width: 100%;
116+
}
117+
}
118+
119+
// Logo
120+
.logo {
121+
display: none;
122+
123+
a {
124+
display: block;
125+
}
126+
127+
img {
128+
width: auto;
129+
}
130+
}
131+
132+
.logo-mobile {
133+
display: block;
134+
135+
a {
136+
display: block;
137+
}
138+
139+
img {
140+
width: auto;
141+
}
142+
}
143+
144+
@media (min-width: 576px) {
145+
.logo {
146+
display: block;
147+
}
148+
.logo-mobile {
149+
display: none;
150+
}
151+
}
152+
153+
// Main menu
154+
.main-menu {
155+
display: none;
156+
157+
> ul {
158+
display: flex;
159+
align-items: center;
160+
justify-content: flex-start;
161+
margin: 0;
162+
padding: 0;
163+
164+
> li {
165+
list-style: none;
166+
font-size: 1rem;
167+
168+
> a {
169+
padding: 10px 12px;
170+
display: inline-block;
171+
font-weight: normal;
172+
text-decoration: none;
173+
color: $primary;
174+
175+
&:hover {
176+
text-decoration: underline;
177+
}
178+
}
179+
180+
&.active > a {
181+
font-weight: bold;
182+
text-decoration: none;
183+
}
184+
}
185+
}
186+
}
187+
188+
@media (min-width: 768px) {
189+
.main-menu {
190+
display: block;
191+
}
192+
}
193+
194+
// Intro/Hero section
195+
.intro {
196+
display: flex;
197+
justify-content: flex-start;
198+
align-items: center;
199+
padding-top: 60px;
200+
padding-bottom: 60px;
201+
overflow: hidden;
202+
203+
h1 {
204+
color: $black;
205+
font-size: 42px;
206+
font-weight: bold;
207+
line-height: 1.2;
208+
font-family: $font-family-heading;
209+
}
210+
211+
h2 {
212+
width: 80%;
213+
font-size: 1.2rem;
214+
line-height: 1.4;
215+
margin-bottom: 30px;
216+
color: $black;
217+
font-family: $font-family-base;
218+
}
219+
220+
p {
221+
font-size: 1.2rem;
222+
font-weight: 300;
223+
line-height: 1.5;
224+
color: $grey;
225+
}
226+
}
227+
228+
@media (min-width: 768px) {
229+
.intro {
230+
padding-top: 140px;
231+
padding-bottom: 140px;
232+
233+
h1 {
234+
width: 80%;
235+
font-size: 48px;
236+
}
237+
238+
p {
239+
width: 80%;
240+
}
241+
}
242+
}
243+
244+
@media (min-width: 992px) {
245+
.intro h1 {
246+
font-size: 50px;
247+
}
248+
}
249+
250+
// Hamburger menu (visible on mobile)
251+
.hamburger {
252+
display: inline-block;
253+
cursor: pointer;
254+
}
255+
256+
@media (min-width: 768px) {
257+
.hamburger {
258+
display: none;
259+
}
260+
}

‎layouts/_default/baseof.html‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,26 @@
1818
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Overpass+Mono:[email protected]&display=swap">
1919
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap">
2020

21-
<!-- CSS-->
21+
<!-- Critical CSS - Inlined for instant rendering -->
22+
{{ $critical_css_options := dict "targetPath" "css/critical.css" }}
23+
{{ $critical := resources.Get "scss/critical.scss" | toCSS $critical_css_options }}
24+
{{ if hugo.IsProduction }}
25+
{{ $critical = $critical | minify }}
26+
{{ end }}
27+
<style>{{ $critical.Content | safeCSS }}</style>
28+
29+
<!-- Full CSS - Deferred for non-blocking load -->
2230
{{ $css_options := dict "targetPath" "css/style.css" "enableSourceMap" (not hugo.IsProduction) }}
2331
{{ $style := resources.Get "scss/style.scss" | resources.ExecuteAsTemplate "style.scss" . | toCSS $css_options }}
2432
{{ if hugo.IsProduction }}
2533
{{ $style = $style | minify | fingerprint }}
2634
{{ end }}
27-
<link rel="stylesheet" href="{{ $style.RelPermalink }}">
35+
<link rel="preload" href="{{ $style.RelPermalink }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
36+
<noscript><link rel="stylesheet" href="{{ $style.RelPermalink }}"></noscript>
37+
<script>
38+
// Fallback for browsers that don't support rel="preload"
39+
!function(e){"use strict";var n=function(n,t,o){var i,r=e.document,a=r.createElement("link");if(t)i=t;else{var l=(r.body||r.getElementsByTagName("head")[0]).childNodes;i=l[l.length-1]}var d=r.styleSheets;a.rel="stylesheet",a.href=n,a.media="only x",function e(n){if(r.body)return n();setTimeout(function(){e(n)})}(function(){i.parentNode.insertBefore(a,t?i:i.nextSibling)});var f=function(e){for(var n=a.href,t=d.length;t--;)if(d[t].href===n)return e();setTimeout(function(){f(e)})};return a.addEventListener&&a.addEventListener("load",o),a.onloadcssdefined=f,f(o),a};"undefined"!=typeof exports?exports.loadCSS=n:e.loadCSS=n}("undefined"!=typeof global?global:this);
40+
</script>
2841

2942
<!-- Swiper CSS -->
3043
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" media="print" onload="this.media='all'">

0 commit comments

Comments
 (0)