I’ve updated my styles.css file and my fonts, etc - but when I launch the hugo site to test it
- it shows both the old arial font and doesn’t update width changes in borders, for example.
It’s straight ignoring all new styles.css changes.
and nothing I do fixes this
Tried turning off cache
Rebooting
Moving the styles.css to assets folder
I’ve searched everywhere online, used llms, and so on and on.
I’m at my wits end.
Please help me.
**---- config.toml ----**
baseURL = "/"
languageCode = "en-us"
title = "my-website"
#theme = "your-theme-name"
[outputs]
section = ["HTML", "CustomRedirect"]
[outputFormats]
[outputFormats.CustomRedirect]
mediaType = "text/html"
baseName = "index"
isPlainText = false
isHTML = true
permalinkable = false
[asset]
minify = true
\n---- layouts ----
**\n---- layouts/section/redirect.html ----**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Redirecting...</title>
</head>
<body>
{{ $latest := first 1 (sort .Pages "Date" "desc") }}
{{ with $latest }}
<meta http-equiv="refresh" content="0; url={{ .Permalink }}" />
<p>If you are not redirected, <a href="{{ .Permalink }}">click here</a>.</p>
{{ end }}
</body>
</html>
**\n---- layouts/movies/single.html ----**
{{ define "main" }}
<div class="entry">
<h1>{{ .Title }}</h1>
<div class="content">
{{ .Content }}
</div>
<div class="navigation">
{{ with .PrevInSection }}
<button id="prev-entry" onclick="window.location.href='{{ .RelPermalink }}'">← Previous</button>
{{ end }}
{{ with .NextInSection }}
<button id="next-entry" onclick="window.location.href='{{ .RelPermalink }}'">Next →</button>
{{ end }}
</div>
</div>
<script>
document.addEventListener('keydown', function(event) {
var prevButton = document.getElementById('prev-entry');
var nextButton = document.getElementById('next-entry');
if (event.key === 'ArrowLeft' || event.key === 'a' || event.key === 'A') {
if (prevButton) {
prevButton.click();
}
}
if (event.key === 'ArrowRight' || event.key === 'd' || event.key === 'D') {
if (nextButton) {
nextButton.click();
}
}
});
</script>
{{ end }}
**\n---- layouts/movies/list.html ----**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Redirecting...</title>
<link rel="stylesheet" href="/css/styles.css">
<script>
document.addEventListener("DOMContentLoaded", function() {
// Fetch the latest entry
var latestEntryUrl = "{{ with (index (first 1 (sort .Pages "Date" "desc")) 0) }}{{ .Permalink }}{{ end }}";
// Redirect to the latest entry after 1 second
if (latestEntryUrl) {
setTimeout(function() {
window.location.href = latestEntryUrl;
}, 1000);
}
});
</script>
</head>
<body>
<div class="ascii-art">
<pre>
LOADING
</pre>
</div>
</body>
</html>
**\n---- layouts/_default/baseof.html ----**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ .Title }}</title>
<link rel="stylesheet" href="{{ "css/styles.css" | relURL }}">
</head>
<body>
<header>
<h1>MYWEBSITE</h1>
<nav>
<a href="/diary/">Diary</a>
<a href="/movies/">Movies</a>
<a href="/study/">Study</a>
</nav>
</header>
<main>
{{ block "main" . }}{{ end }}
</main>
</body>
</html>
**\n---- layouts/_default/single.html ----**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ .Title }}</title>
</head>
<body>
<h1>{{ .Title }}</h1>
<div>{{ .Content }}</div>
</body>
</html>
**\n---- layouts/_default/list.html ----**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ .Title }}</title>
</head>
<body>
<h1>{{ .Title }}</h1>
<ul>
{{ range .Pages }}
<li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
{{ end }}
</ul>
</body>
</html>
**\n---- layouts/diary/single.html ----**
{{ define "main" }}
<div class="entry">
<div class="media">
<img src="{{ .Params.image }}" alt="{{ .Title }}">
</div>
<div class="content">
<h2>{{ .Date.Format "02 January 2006" }}</h2>
<p>{{ .Content }}</p>
</div>
<div class="navigation">
{{ with .PrevInSection }}
<button id="prev-entry" onclick="window.location.href='{{ .RelPermalink }}'">← Previous</button>
{{ end }}
{{ with .NextInSection }}
<button id="next-entry" onclick="window.location.href='{{ .RelPermalink }}'">Next →</button>
{{ end }}
</div>
</div>
<script>
document.addEventListener('keydown', function(event) {
var prevButton = document.getElementById('prev-entry');
var nextButton = document.getElementById('next-entry');
if (event.key === 'ArrowLeft' || event.key === 'a' || event.key === 'A') {
if (prevButton) {
prevButton.click();
}
}
if (event.key === 'ArrowRight' || event.key === 'd' || event.key === 'D') {
if (nextButton) {
nextButton.click();
}
}
});
</script>
{{ end }}
**\n---- layouts/diary/list.html ----**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Redirecting...</title>
<link rel="stylesheet" href="/css/styles.css">
<script>
document.addEventListener("DOMContentLoaded", function() {
// Fetch the latest entry
var latestEntryUrl = "{{ with (index (first 1 (sort .Pages "Date" "desc")) 0) }}{{ .Permalink }}{{ end }}";
// Redirect to the latest entry after 1 second
if (latestEntryUrl) {
setTimeout(function() {
window.location.href = latestEntryUrl;
}, 1000);
}
});
</script>
</head>
<body>
<div class="ascii-art">
<pre>
LOADING
</pre>
<p>Redirecting to the latest diary entry...</p>
</div>
<!-- If JavaScript is disabled, provide a fallback link -->
<noscript>
<p>If you are not redirected, <a href="{{ with (index (first 1 (sort .Pages "Date" "desc")) 0) }}{{ .Permalink }}{{ end }}">click here</a>.</p>
</noscript>
</body>
</html>
**\n---- layouts/study/list.html ----**
{{ define "main" }}
<div class="entries">
{{ range .Pages }}
<div class="entry">
<h2>{{ .Title }}</h2>
<div class="media">
<img src="{{ .Params.image }}" alt="{{ .Title }}">
</div>
<div class="content">
<p>{{ .Content }}</p>
</div>
</div>
{{ end }}
</div>
{{ end }}
**\n---- layouts/shortcodes/video.html ----**
<video class="video-shortcode" preload="{{ .Get "preload" | default "metadata" }}" controls>
<source src="{{ .Get "src" }}" type="{{ .Get "type" | default "video/mp4" }}">
There should have been a video here but your browser does not seem to support it.
</video>
\n---- layouts/index.html ----
{{ define "main" }}
<div class="homepage">
<!-- Home page specific content, if any, can go here -->
</div>
{{ end }}
\n---- static/css ----
\n---- static/css/styles.css ----
/* Apply a global box-sizing rule */
*,
*::before,
*::after {
box-sizing: border-box;
}
@font-face {
font-family: 'NectoMono';
src: url('/fonts/NectoMono-Regular.otf') format('opentype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
body {
font-family: 'NectoMono', sans-serif;
background-color: #2c2c2c;
color: #ffffff;
margin: 0;
padding: 0;
}
header {
width: 100%;
background-color: #1c1c1c;
padding: 20px;
text-align: center;
position: fixed;
top: 0;
z-index: 1000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
header h1 {
margin: 0;
font-size: 2em;
font-family: 'PadmaaBold', Arial, sans-serif;
}
header nav {
margin-top: 10px;
display: flex;
gap: 10px;
}
header nav a {
color: #ffffff;
text-decoration: none;
}
header nav a:hover {
text-decoration: underline;
}
main {
margin-top: 120px; /* Ensure the content starts below the header */
width: 100%;
max-width: 800px;
margin: 120px auto 0 auto;
padding: 20px;
overflow-y: auto;
display: flex;
flex-direction: column;
align-items: center;
}
.entry {
background-color: #3c3c3c;
padding: 20px;
width: 100%;
overflow-wrap: break-word; /* Ensure long words break correctly */
white-space: pre-wrap; /* Ensure long content is displayed properly */
}
.navigation {
display: flex;
justify-content: space-between;
margin-top: 20px;
width: 100%;
}
.navigation button {
background-color: #ffffff;
color: #2c2c2c;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
}
.navigation button:hover {
background-color: #f66151;
}
.media video {
width: 100%;
max-width: 1920px; /* adjust as needed */
height: auto;
display: block;
margin: 0 auto;
}
/* Ensure media images are sized properly */
.media img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto 20px;
border-radius: 10px;
width: 100%;
max-height: 600px; /* Adjust this value as needed */
}
.video iframe {
width: 100%;
height: 315px;
}
.content {
text-align: left; /* Align text to the left for better readability */
margin-top: 20px;
width: 100%;
}
.video-shortcode {
max-width: 100%;
height: auto;