Theme: Update for hugo 0.153: switch to dart-sass
libsass will be deprecated in hugo v0.153. Also fix some SASS 2.0 deprecation notices in our scss files
This commit is contained in:
parent
1551503e68
commit
ffce3b232c
3 changed files with 21 additions and 11 deletions
|
|
@ -34,6 +34,8 @@ Please note, that the website should be re-deployed at least daily to update the
|
||||||
### Add Pages
|
### Add Pages
|
||||||
|
|
||||||
To run a local version, just install HUGO by following the [instructions](https://gohugo.io/installation/) for your operating system.
|
To run a local version, just install HUGO by following the [instructions](https://gohugo.io/installation/) for your operating system.
|
||||||
|
Note that you also need to install the [Dart Sass compiler](https://sass-lang.com/dart-sass/).
|
||||||
|
|
||||||
To build the website and run a development webserver, execute:
|
To build the website and run a development webserver, execute:
|
||||||
```shell
|
```shell
|
||||||
hugo server
|
hugo server
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,6 @@
|
||||||
|
@use "sass:map";
|
||||||
|
@use "sass:math";
|
||||||
|
|
||||||
$roomstate_color_unknown: #dda218;
|
$roomstate_color_unknown: #dda218;
|
||||||
$roomstate_color_open: var(--ins-color);
|
$roomstate_color_open: var(--ins-color);
|
||||||
$roomstate_color_closed: var(--del-color);
|
$roomstate_color_closed: var(--del-color);
|
||||||
|
|
@ -164,7 +167,12 @@ body>main {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
margin: 0.5rem 1rem;
|
margin: 0.5rem 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -202,7 +210,7 @@ body>main {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
// (250px - 2*var(--grid-spacing-horizontal)) * 3/4
|
// (250px - 2*var(--grid-spacing-horizontal)) * 3/4
|
||||||
max-height: (222px * 3/4);
|
max-height: math.div(222px * 3, 4);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 2*250px + 2*var(--spacing) + 1px
|
// 2*250px + 2*var(--spacing) + 1px
|
||||||
|
|
@ -211,7 +219,7 @@ body>main {
|
||||||
|
|
||||||
img.groups-img {
|
img.groups-img {
|
||||||
// (150px - 2*var(--grid-spacing-horizontal)) * 3/4
|
// (150px - 2*var(--grid-spacing-horizontal)) * 3/4
|
||||||
max-height: (122px*3/4);
|
max-height: math.div(122px*3, 4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -221,7 +229,7 @@ body>main {
|
||||||
|
|
||||||
img.groups-img {
|
img.groups-img {
|
||||||
// (350px - 2*var(--grid-spacing-horizontal)) * 3/4
|
// (350px - 2*var(--grid-spacing-horizontal)) * 3/4
|
||||||
max-height: (322px*3/4);
|
max-height: math.div(322px*3, 4);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 2*350px + 2*var(--spacing) + 1px
|
// 2*350px + 2*var(--spacing) + 1px
|
||||||
|
|
@ -230,7 +238,7 @@ body>main {
|
||||||
|
|
||||||
img.groups-img {
|
img.groups-img {
|
||||||
// (250px - 2*var(--grid-spacing-horizontal)) * 3/4
|
// (250px - 2*var(--grid-spacing-horizontal)) * 3/4
|
||||||
max-height: (222px*3/4);
|
max-height: math.div(222px*3, 4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -295,7 +303,7 @@ body>main {
|
||||||
// When the header content doesn't display nicely anymore, switch to mobile mode.
|
// When the header content doesn't display nicely anymore, switch to mobile mode.
|
||||||
@import "../pico-1.5.11/scss/variables";
|
@import "../pico-1.5.11/scss/variables";
|
||||||
|
|
||||||
@media (max-width: map-get($breakpoints, md)) {
|
@media (max-width: map.get($breakpoints, md)) {
|
||||||
.hamburger-button {
|
.hamburger-button {
|
||||||
display: unset;
|
display: unset;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -375,15 +383,15 @@ body>main {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Use the media queries, which we need, from here:
|
// Use the media queries, which we need, from here:
|
||||||
@if map-get($breakpoints, "sm") {
|
@if map.get($breakpoints, "sm") {
|
||||||
@media (min-width: map-get($breakpoints, "sm")) {
|
@media (min-width: map.get($breakpoints, "sm")) {
|
||||||
ul {
|
ul {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-nav {
|
.main-nav {
|
||||||
max-width: map-get($viewports, "sm");
|
max-width: map.get($viewports, "sm");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
{{- $cssOptionsMain := dict "transpiler" "libsass" "targetPath" "css/style.css" -}}
|
{{- $cssOptionsMain := dict "transpiler" "dartsass" "targetPath" "css/style.css" -}}
|
||||||
{{- $cssOptionsPico := dict "transpiler" "libsass" "targetPath" "css/pico.css" -}}
|
{{- $cssOptionsPico := dict "transpiler" "dartsass" "targetPath" "css/pico.css" -}}
|
||||||
{{- $jsResources := resources.Match "js/*.js" }}
|
{{- $jsResources := resources.Match "js/*.js" }}
|
||||||
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue