This is an automated email from the ASF dual-hosted git repository.
dashorst pushed a commit to branch asf-site
in repository https://gitbox.apache.org/repos/asf/wicket-site.git
The following commit(s) were added to refs/heads/asf-site by this push:
new db28b649 Fix: all deprecation warnings from sass
db28b649 is described below
commit db28b649fb30d62cfc0cfd00ee060fc1f5ae397d
Author: Martijn Dashorst <[email protected]>
AuthorDate: Fri May 2 14:04:54 2025 +0200
Fix: all deprecation warnings from sass
Breaking changes:
- [@import and global built-in functions][1]
- [/ as Division][2]
- [Mixed Declarations][3]
Used the sass-migrator tool (installed through npm) for most of the
migrations.
[1] https://sass-lang.com/documentation/breaking-changes/import/
[2] https://sass-lang.com/documentation/breaking-changes/slash-div/
[3] https://sass-lang.com/documentation/breaking-changes/mixed-decls/
---
_sass/main.scss | 58 +++++++++----------
_sass/modules/_builtwithwicket.scss | 4 +-
_sass/modules/_jumbotron.scss | 20 ++++---
_sass/modules/_mainmenu.scss | 22 +++++---
_sass/modules/_quickstart.scss | 6 +-
_sass/modules/_toc.scss | 5 +-
_sass/modules/_wicket8.scss | 8 ++-
_sass/taiga/_base.scss | 58 ++++++++++---------
_sass/taiga/_button.scss | 48 ++++++++--------
_sass/taiga/_grid.scss | 4 +-
_sass/taiga/_layout.scss | 39 +++++++------
_sass/taiga/_mixins.scss | 4 +-
_sass/taiga/_settings.scss | 5 +-
_sass/taiga/_states.scss | 7 ++-
content/atom.xml | 2 +-
content/css/style.css | 108 +++++++++++++++++++++++++++++-------
content/css/style.css.map | 2 +-
css/style.scss | 9 +--
18 files changed, 260 insertions(+), 149 deletions(-)
diff --git a/_sass/main.scss b/_sass/main.scss
index d1996c0e..5abf2059 100755
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -1,35 +1,35 @@
-@import "taiga/settings";
-@import "taiga/mixins";
-@import "taiga/grid";
-@import "taiga/base";
-@import "taiga/layout";
-@import "taiga/states";
-@import "taiga/button";
-@import "taiga/print";
-
-@import "modules/syntax";
-@import "modules/logo";
-@import "modules/jumbotron";
-@import "modules/mainmenu";
-@import "modules/toc";
-@import "modules/builtwithwicket";
-@import "modules/quickstart";
-@import "modules/wicket8";
+@use "taiga/settings";
+@use "taiga/mixins";
+@use "taiga/grid";
+@use "taiga/base";
+@use "taiga/layout";
+@use "taiga/states";
+@use "taiga/button";
+@use "taiga/print";
+
+@use "modules/syntax";
+@use "modules/logo";
+@use "modules/jumbotron";
+@use "modules/mainmenu";
+@use "modules/toc";
+@use "modules/builtwithwicket";
+@use "modules/quickstart";
+@use "modules/wicket8";
code, pre, code > span, pre > span {
font-family: 'Source Code Pro', 'courier new', monospace;
- font-size: $font-size-20;
+ font-size: settings.$font-size-20;
}
a {
- border-color: $color-brand-50;
+ border-color: settings.$color-brand-50;
border-style: none none dotted none;
border-width: 0 0 1px 0;
cursor: pointer;
font-weight:400;
text-decoration: none;
- &:hover { color: $color-brand-60; }
+ &:hover { color: settings.$color-brand-60; }
}
h1 a, h2 a, h3 a {
@@ -40,7 +40,7 @@ div.header {
background-color: white;
border-bottom: 1px solid #e1e1e1;
box-shadow: 0 .5rem 3rem #f0f0f0;
- color: $color-brand-50;
+ color: settings.$color-brand-50;
display:block;
position:relative;
width:100%;
@@ -52,7 +52,7 @@ div.header {
padding-right:1em;
display:flex;
- @include breakpoint($breakpoint-20, 'max-width') {
+ @include mixins.breakpoint(settings.$breakpoint-20, 'max-width') {
display:block;
}
}
@@ -70,7 +70,7 @@ div.header {
font-weight:300;
}
h2 {
- color:$color-brand-50;
+ color:settings.$color-brand-50;
font-weight:300;
}
h1 + *,
@@ -84,7 +84,7 @@ div.header {
margin-bottom:2rem;
}
p {
- font-size: $font-size-50;
+ font-size: settings.$font-size-50;
text-align: left;
}
}
@@ -123,7 +123,7 @@ pre {
}
article+article {
- border-top: 1px solid $color-neutral-30;
+ border-top: 1px solid settings.$color-neutral-30;
clear: both;
margin-top: 2rem;
padding-top: 2rem;
@@ -169,11 +169,11 @@ th {
}
.color-brand {
- color:$color-brand-70;
+ color:settings.$color-brand-70;
}
.wicket7.header {
- background-color: $color-brand-50;
+ background-color: settings.$color-brand-50;
background-image: url(/img/wicket-7-bg.jpg);
margin-bottom : 0;
text-align:center;
@@ -181,7 +181,7 @@ th {
img { min-width: 240px; width:33%; margin: 0 auto; padding: 6rem 0
4rem; }
nav.mainmenu {
- background-color: $color-brand-50;
+ background-color: settings.$color-brand-50;
line-height:3em;
margin-top:1rem;
margin-bottom:0;
@@ -213,7 +213,7 @@ th {
&.active { border-bottom: 2px solid;}
}
li+li {
- margin-left:1*$grid-column;
+ margin-left:1*grid.$grid-column;
}
a, a:active, a:hover {
diff --git a/_sass/modules/_builtwithwicket.scss
b/_sass/modules/_builtwithwicket.scss
index 5e95650e..2ff2c2d6 100644
--- a/_sass/modules/_builtwithwicket.scss
+++ b/_sass/modules/_builtwithwicket.scss
@@ -1,3 +1,5 @@
+@use "../taiga/settings";
+
.builtwithwicket {
background-color: #eee;
/*margin-left: -1rem;
@@ -8,7 +10,7 @@
.slick-prev::before,
.slick-next::before {
- color: $color-brand-50;
+ color: settings.$color-brand-50;
}
}
diff --git a/_sass/modules/_jumbotron.scss b/_sass/modules/_jumbotron.scss
index 7698285e..6fccf658 100644
--- a/_sass/modules/_jumbotron.scss
+++ b/_sass/modules/_jumbotron.scss
@@ -1,3 +1,7 @@
+@use "../taiga/grid";
+@use "../taiga/mixins";
+@use "../taiga/settings";
+
.jumbotron {
&.header{
/* background: radial-gradient(ellipse closest-side, rgba(0,0,0,0),
rgba(0,0,0,0.6)), url('../img/background-1.jpg');*/
@@ -10,28 +14,28 @@
}
.mainmenu {
- @include breakpoint($breakpoint-20) {
+ @include mixins.breakpoint(settings.$breakpoint-20) {
padding-top:1rem;
margin-bottom:7rem;
}
}
.jumbotron-mission {
- font-size: $font-size-50;
+ font-size: settings.$font-size-50;
font-weight:400;
line-height:2;
margin-top:2rem;
margin-bottom:2rem;
text-align:center;
text-transform:uppercase;
- @include grid(48,2);
+ @include grid.grid(48,2);
- @include breakpoint($breakpoint-10) {
- @include grid(48,6);
+ @include mixins.breakpoint(settings.$breakpoint-10) {
+ @include grid.grid(48,6);
margin-top:2rem;
margin-bottom:3rem;
}
- @include breakpoint($breakpoint-20) {
- @include grid(48,12);
+ @include mixins.breakpoint(settings.$breakpoint-20) {
+ @include grid.grid(48,12);
}
}
@@ -45,7 +49,7 @@
margin-top:2rem;
margin-bottom:2rem;
- @include breakpoint($breakpoint-20) {
+ @include mixins.breakpoint(settings.$breakpoint-20) {
display:block;
float:none;
}
diff --git a/_sass/modules/_mainmenu.scss b/_sass/modules/_mainmenu.scss
index 7ab5042d..72851b1c 100644
--- a/_sass/modules/_mainmenu.scss
+++ b/_sass/modules/_mainmenu.scss
@@ -1,3 +1,7 @@
+@use "../taiga/grid";
+@use "../taiga/mixins";
+@use "../taiga/settings";
+
nav.mainmenu {
display:block;
margin:0 auto 2rem auto;
@@ -9,12 +13,12 @@ nav.mainmenu {
&.active { border-bottom: 2px solid white;}
li+li {
- margin-left:1*$grid-column;
+ margin-left:1*grid.$grid-column;
}
a, a:active {
border:none;
- color:$color-brand-50;
+ color:settings.$color-brand-50;
font-weight:500;
text-decoration: none;
}
@@ -35,12 +39,14 @@ nav.mainmenu {
justify-content: flex-end;
- @include breakpoint($breakpoint-20, 'max-width') {
+ @include mixins.breakpoint(settings.$breakpoint-20, 'max-width') {
justify-content: center;
}
- font-size: 2rem;
- flex-wrap: nowrap;
+ & {
+ font-size: 2rem;
+ flex-wrap: nowrap;
+ }
}
}
@@ -48,7 +54,7 @@ nav.mainmenu {
padding-right: 1rem;
&:hover {
- color: $color-brand-50;
+ color: settings.$color-brand-50;
}
}
@@ -58,10 +64,10 @@ nav.mainmenu {
display:flex;
padding-right: 1rem;
- @include breakpoint($breakpoint-20, 'max-width') {
+ @include mixins.breakpoint(settings.$breakpoint-20, 'max-width') {
margin:0;
- @include prepend(1);
+ @include grid.prepend(1);
justify-content: center;
align-items: center;
diff --git a/_sass/modules/_quickstart.scss b/_sass/modules/_quickstart.scss
index d06a3d56..5637735e 100644
--- a/_sass/modules/_quickstart.scss
+++ b/_sass/modules/_quickstart.scss
@@ -1,5 +1,7 @@
+@use "../taiga/settings";
+
div.quickstart-wizard {
- background-color: $color-brand-70;
+ background-color: settings.$color-brand-70;
border-radius: 3px;
color: #ffffff;
line-height: 2em;
@@ -51,7 +53,7 @@ div.quickstart-wizard {
margin-bottom:10px
}
ol>li:before {
- background: $color-brand-70;
+ background: settings.$color-brand-70;
border-radius: 50%;
color:#fff;
content: counter(item);
diff --git a/_sass/modules/_toc.scss b/_sass/modules/_toc.scss
index b7cc9270..aad32121 100644
--- a/_sass/modules/_toc.scss
+++ b/_sass/modules/_toc.scss
@@ -1,3 +1,6 @@
+@use "../taiga/mixins";
+@use "../taiga/settings";
+
.toc {
ul { list-style: none; }
&>ul {
@@ -7,7 +10,7 @@
margin-top: 1rem;
}
- @include breakpoint($breakpoint-10) {
+ @include mixins.breakpoint(settings.$breakpoint-10) {
display: none;
}
}
diff --git a/_sass/modules/_wicket8.scss b/_sass/modules/_wicket8.scss
index ed8fcd08..9ac7679b 100644
--- a/_sass/modules/_wicket8.scss
+++ b/_sass/modules/_wicket8.scss
@@ -1,13 +1,15 @@
+@use "../taiga/settings";
+
.wicket8 {
nav.mainmenu {
a, a:active, a:hover {
- color:$almost-black;
+ color:settings.$almost-black;
}
}
.header {
- color:$almost-black;
+ color:settings.$almost-black;
}
.jumbotron {
&.header{
@@ -19,7 +21,7 @@
box-shadow: none;
}
.jumbotron-version {
- color:$almost-black;
+ color:settings.$almost-black;
}
.jumbotron-poweredbyasf {
margin: 0 auto;
diff --git a/_sass/taiga/_base.scss b/_sass/taiga/_base.scss
index 82670e1d..3b5564f5 100644
--- a/_sass/taiga/_base.scss
+++ b/_sass/taiga/_base.scss
@@ -1,3 +1,8 @@
+@use "sass:color";
+@use "grid";
+@use "mixins";
+@use "settings";
+
// =========== Base
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img,
ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i,
center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section,
summary, time, mark, audio, video { [...]
@@ -5,22 +10,22 @@ html, body, div, span, applet, object, iframe, h1, h2, h3,
h4, h5, h6, p, blockq
*,
*:after,
*:before {
- @include box-sizing(border-box);
+ @include mixins.box-sizing(border-box);
}
-::-moz-selection { background: $color-neutral-90; color: $white; text-shadow:
none; }
-::selection { background: $color-neutral-90; color: $white; text-shadow: none;
}
+::-moz-selection { background: settings.$color-neutral-90; color:
settings.$white; text-shadow: none; }
+::selection { background: settings.$color-neutral-90; color: settings.$white;
text-shadow: none; }
html {
- color: $color-neutral-70;
- font: 300 $font-size-base $font-family-body;
+ color: settings.$color-neutral-70;
+ font: 300 settings.$font-size-base settings.$font-family-body;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: auto;
-webkit-text-size-adjust: 100%;
- @include breakpoint($breakpoint-20) {
- font-size: $font-size-base + 2;
+ @include mixins.breakpoint(settings.$breakpoint-20) {
+ font-size: settings.$font-size-base + 2;
}
}
@@ -32,7 +37,7 @@ body {
// Headings
h1, h2, legend, h3, h4, h5, h6 {
- font-family: $font-family-heading;
+ font-family: settings.$font-family-heading;
font-weight: 400;
line-height: 1.5em;
margin: 0 0 0.25em 0;
@@ -56,26 +61,26 @@ h6 { font-size: 1rem; }
// Paragraphs
p {
- margin-bottom: $spacing;
+ margin-bottom: settings.$spacing;
- &.is-lead { font-size: $font-size-40; }
+ &.is-lead { font-size: settings.$font-size-40; }
}
// Links
a {
- color: $color-brand-50;
+ color: settings.$color-brand-50;
cursor: pointer;
text-decoration: none;
- &:hover { color: $color-brand-60; }
+ &:hover { color: settings.$color-brand-60; }
}
// Other
small {
- color: $color-neutral-50;
- font-size: $font-size-20;
+ color: settings.$color-neutral-50;
+ font-size: settings.$font-size-20;
}
em { font-style: italic; }
@@ -86,40 +91,43 @@ code, pre { font-family: 'courier new', monospace; }
pre { overflow-x: auto; }
-abbr { border-bottom: 1px dotted $color-neutral-50; }
+abbr { border-bottom: 1px dotted settings.$color-neutral-50; }
del { text-decoration: line-through; }
-mark { background-color: lighten(yellow, 35%); }
+mark { background-color: color.adjust(yellow, $lightness: 35%); }
hr {
background-color: transparent;
- border: solid $color-neutral-30;
+ border: solid settings.$color-neutral-30;
border-width: 1px 0 0;
clear: both;
- margin: 2.5rem $spacing;
+ margin: 2.5rem settings.$spacing;
}
// Lists
-ul, ol { margin: 0 0 $spacing 1.5rem; }
+ul, ol { margin: 0 0 settings.$spacing 1.5rem; }
ul { list-style: disc; }
ol { list-style: decimal; }
dl {
- margin-bottom: $spacing;
+ margin-bottom: settings.$spacing;
dt { font-weight: bold; }
- dd { margin-left: $spacing; }
+ & { // Wrap the dd rule to ensure CSS order matches source order
+ dd { margin-left: settings.$spacing; }
+ }
&.advanced {
- @include grid-container;
-
- dt { @include grid(16, 0, 1); }
+ @include grid.grid-container;
- dd { @include grid(32); }
+ dt { @include grid.grid(16, 0, 1); }
+ & { // Wrap the dd rule to ensure CSS order matches source order
+ dd { @include grid.grid(32); }
+ }
}
}
diff --git a/_sass/taiga/_button.scss b/_sass/taiga/_button.scss
index 1c3690b4..5174fde7 100644
--- a/_sass/taiga/_button.scss
+++ b/_sass/taiga/_button.scss
@@ -1,3 +1,5 @@
+@use "settings";
+
// =========== Buttons
button::-moz-focus-inner,
@@ -11,11 +13,11 @@ input::-moz-focus-inner {
-moz-appearance: none;
appearance: none;
border: 0;
- border-radius: $border-radius-10;
+ border-radius: settings.$border-radius-10;
cursor: pointer;
display: inline-block;
- font-family: $font-family-body;
- font-size: $font-size-30;
+ font-family: settings.$font-family-body;
+ font-size: settings.$font-size-30;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: bold;
@@ -33,17 +35,17 @@ input::-moz-focus-inner {
input[type=submit],
button {
@extend %button;
- background: $color-brand-70;
- color: $white;
+ background: settings.$color-brand-70;
+ color: settings.$white;
&:hover {
- background: $color-brand-60;
- color: $white;
+ background: settings.$color-brand-60;
+ color: settings.$white;
}
&:active,
&:focus {
- box-shadow: inset 0 1px 3px rgba($black, 0.2);
+ box-shadow: inset 0 1px 3px rgba(settings.$black, 0.2);
}
}
@@ -51,17 +53,17 @@ button {
input[type=submit].button--neutral,
button.button--neutral {
@extend %button;
- background: $color-neutral-30;
- color: $color-neutral-70;
+ background: settings.$color-neutral-30;
+ color: settings.$color-neutral-70;
&:hover {
- background: $color-neutral-50;
- color: $color-neutral-70;
+ background: settings.$color-neutral-50;
+ color: settings.$color-neutral-70;
}
&:active,
&:focus {
- box-shadow: inset 0 1px 3px rgba($black, 0.2);
+ box-shadow: inset 0 1px 3px rgba(settings.$black, 0.2);
}
}
@@ -69,17 +71,17 @@ button.button--neutral {
input[type=submit].button--success,
button.button--success {
@extend %button;
- background-color: $color-success-50;
- color: $white;
+ background-color: settings.$color-success-50;
+ color: settings.$white;
&:hover {
- background-color: $color-success-60;
- color: $white;
+ background-color: settings.$color-success-60;
+ color: settings.$white;
}
&:active,
&:focus {
- box-shadow: inset 0 1px 3px rgba($black, 0.2);
+ box-shadow: inset 0 1px 3px rgba(settings.$black, 0.2);
}
}
@@ -87,16 +89,16 @@ button.button--success {
input[type=submit].button--alert,
button.button--alert {
@extend %button;
- background-color: $color-alert-50;
- color: $white;
+ background-color: settings.$color-alert-50;
+ color: settings.$white;
&:hover {
- background-color: $color-alert-60;
- color: $white;
+ background-color: settings.$color-alert-60;
+ color: settings.$white;
}
&:active,
&:focus {
- box-shadow: inset 0 1px 3px rgba($black, 0.2);
+ box-shadow: inset 0 1px 3px rgba(settings.$black, 0.2);
}
}
diff --git a/_sass/taiga/_grid.scss b/_sass/taiga/_grid.scss
index 2ed4f5a1..7285fa6b 100644
--- a/_sass/taiga/_grid.scss
+++ b/_sass/taiga/_grid.scss
@@ -1,3 +1,5 @@
+@use "settings";
+
// =========== Grid
// Use '@include grid(12, 2)' to make a column.
@@ -9,7 +11,7 @@
// To set different margins on both sides use '@include grid(12, 2, 3)'.
// You can also use negative margins.
-$grid-column: 100% / $grid-columns;
+$grid-column: calc(100% / settings.$grid-columns);
@mixin col($n: 1) { width: ($n * $grid-column); }
@mixin prepend($n: 1) { margin-left: $grid-column * $n }
diff --git a/_sass/taiga/_layout.scss b/_sass/taiga/_layout.scss
index 35bb6911..86d50cb1 100644
--- a/_sass/taiga/_layout.scss
+++ b/_sass/taiga/_layout.scss
@@ -1,42 +1,49 @@
+@use "grid";
+@use "mixins";
+@use "settings";
+
// =========== Layout
.l-full {
- @include breakpoint($breakpoint-30) { @include grid(48, 1); }
- width: 100%;
- float: none;
+ @include mixins.breakpoint(settings.$breakpoint-30) { @include
grid.grid(48, 1); }
+
+ & {
+ width: 100%;
+ float: none;
+ }
}
.l-two-third {
- @include breakpoint($breakpoint-30) { @include grid(32, 1); }
+ @include mixins.breakpoint(settings.$breakpoint-30) { @include
grid.grid(32, 1); }
}
.l-half {
- @include breakpoint($breakpoint-30) { @include grid(24, 1); }
+ @include mixins.breakpoint(settings.$breakpoint-30) { @include
grid.grid(24, 1); }
}
.l-one-quarter {
- @include breakpoint($breakpoint-30) { @include grid(12, 1); }
+ @include mixins.breakpoint(settings.$breakpoint-30) { @include
grid.grid(12, 1); }
}
.l-one-eigth {
- @include breakpoint($breakpoint-30) { @include grid(6, 1); }
+ @include mixins.breakpoint(settings.$breakpoint-30) { @include
grid.grid(6, 1); }
}
.l-one-sixth {
- @include breakpoint($breakpoint-30) { @include grid(8, 1); }
+ @include mixins.breakpoint(settings.$breakpoint-30) { @include
grid.grid(8, 1); }
}
.l-one-third {
- @include breakpoint($breakpoint-30) { @include grid(16, 1); }
+ @include mixins.breakpoint(settings.$breakpoint-30) { @include
grid.grid(16, 1); }
}
.l-grid {
- @include grid-container;
+ @include grid.grid-container;
- li { @include grid(16, 1); }
+ li { @include grid.grid(16, 1); }
}
.l-first { clear: left; }
@@ -44,15 +51,15 @@
.l-container {
margin: auto;
- max-width: $max-width;
- padding: $spacing ;
- @include grid-container;
+ max-width: settings.$max-width;
+ padding: settings.$spacing ;
+ @include grid.grid-container;
- @include breakpoint($breakpoint-30) { padding: $spacing ($spacing * 5); }
+ @include mixins.breakpoint(settings.$breakpoint-30) { padding:
settings.$spacing (settings.$spacing * 5); }
}
.l-button-table {
- @include breakpoint($breakpoint-30) {
+ @include mixins.breakpoint(settings.$breakpoint-30) {
display: flex;
justify-content: center;
}
diff --git a/_sass/taiga/_mixins.scss b/_sass/taiga/_mixins.scss
index 2d5e1913..ea8e44ae 100644
--- a/_sass/taiga/_mixins.scss
+++ b/_sass/taiga/_mixins.scss
@@ -1,3 +1,5 @@
+@use "settings";
+
// =========== Mixins
// Animations
@@ -37,7 +39,7 @@
// Media queries
// Example: @include breakpoint($breakpoint-20) { your properties }
-@mixin breakpoint($breakpoint, $property-name : $breakpoint-property) {
+@mixin breakpoint($breakpoint, $property-name : settings.$breakpoint-property)
{
@media ($property-name: $breakpoint) {
@content;
}
diff --git a/_sass/taiga/_settings.scss b/_sass/taiga/_settings.scss
index 6e7d023d..6558eb02 100644
--- a/_sass/taiga/_settings.scss
+++ b/_sass/taiga/_settings.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
// =========== Settings
// Most of the variables are based on some kind of percentages to maintain
stability.
@@ -57,9 +58,9 @@ $z-index-30: 30;
// Add your own color variables
// Color brand
-$color-brand-40: darken(#E97826, 25%);
+$color-brand-40: color.adjust(#E97826, $lightness: -25%);
$color-brand-50: #E97826; // Default
-$color-brand-60: lighten(#E97826, 10%);
+$color-brand-60: color.adjust(#E97826, $lightness: 10%);
$color-brand-70: #FF9925; //old default
diff --git a/_sass/taiga/_states.scss b/_sass/taiga/_states.scss
index da8a8636..22533f4a 100644
--- a/_sass/taiga/_states.scss
+++ b/_sass/taiga/_states.scss
@@ -1,3 +1,6 @@
+@use "mixins";
+@use "settings";
+
// =========== States
.is-hidden { display: none !important; }
@@ -6,9 +9,9 @@
.is-active, .is-visible { display: block; }
-.left { @include breakpoint($breakpoint-10) { float: left; } }
+.left { @include mixins.breakpoint(settings.$breakpoint-10) { float: left; } }
-.right { @include breakpoint($breakpoint-10) { float: right; } }
+.right { @include mixins.breakpoint(settings.$breakpoint-10) { float: right; }
}
.text-left { text-align: left; }
diff --git a/content/atom.xml b/content/atom.xml
index b0aedad8..bc3bd53c 100644
--- a/content/atom.xml
+++ b/content/atom.xml
@@ -3,7 +3,7 @@
<title>Apache Wicket</title>
<link href="http://wicket.apache.org/atom.xml"; rel="self"/>
<link href="http://wicket.apache.org/"/>
- <updated>2025-05-02T11:32:32+00:00</updated>
+ <updated>2025-05-02T12:00:13+00:00</updated>
<id>http://wicket.apache.org/</id>
<author>
<name>Apache Wicket</name>
diff --git a/content/css/style.css b/content/css/style.css
index ba5f34e5..a3718d05 100644
--- a/content/css/style.css
+++ b/content/css/style.css
@@ -1,6 +1,6 @@
-@import url(../fonts/source-code-pro/stylesheet.css);
-@import url(../fonts/source-sans-pro/stylesheet.css);
-@import url(../fonts/wicket-font/stylesheet.css);
+@import "../fonts/source-code-pro/stylesheet.css";
+@import "../fonts/source-sans-pro/stylesheet.css";
+@import "../fonts/wicket-font/stylesheet.css";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img,
ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i,
center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section,
summary, time, mark, audio, video {
margin: 0;
padding: 0;
@@ -38,12 +38,12 @@ html {
text-rendering: auto;
-webkit-text-size-adjust: 100%;
}
+
@media (min-width: 769px) {
html {
font-size: 17px;
}
}
-
body {
line-height: 1.5em;
background-color: #fff;
@@ -84,6 +84,7 @@ h6 {
p {
margin-bottom: 1rem;
}
+
p.is-lead {
font-size: 1.125rem;
}
@@ -93,6 +94,7 @@ a {
cursor: pointer;
text-decoration: none;
}
+
a:hover {
color: rgb(237.6945606695, 148.8075313808, 84.3054393305);
}
@@ -153,24 +155,30 @@ ol {
dl {
margin-bottom: 1rem;
}
+
dl dt {
font-weight: bold;
}
+
dl dd {
margin-left: 1rem;
}
+
dl.advanced:before, dl.advanced:after {
content: "";
display: table;
}
+
dl.advanced:after {
clear: both;
}
+
dl.advanced dt {
width: 31.25%;
margin-left: 0%;
margin-right: 2.0833333333%;
}
+
dl.advanced dd {
width: 66.6666666667%;
margin-left: 0%;
@@ -187,10 +195,6 @@ main {
color: rgb(48, 50, 132);
}
-.l-full {
- width: 100%;
- float: none;
-}
@media (min-width: 960px) {
.l-full {
width: 95.8333333333%;
@@ -198,6 +202,10 @@ main {
margin-right: 2.0833333333%;
}
}
+.l-full {
+ width: 100%;
+ float: none;
+}
@media (min-width: 960px) {
.l-two-third {
@@ -206,7 +214,6 @@ main {
margin-right: 2.0833333333%;
}
}
-
@media (min-width: 960px) {
.l-half {
width: 45.8333333333%;
@@ -214,7 +221,6 @@ main {
margin-right: 2.0833333333%;
}
}
-
@media (min-width: 960px) {
.l-one-quarter {
width: 20.8333333333%;
@@ -222,7 +228,6 @@ main {
margin-right: 2.0833333333%;
}
}
-
@media (min-width: 960px) {
.l-one-eigth {
width: 8.3333333333%;
@@ -230,7 +235,6 @@ main {
margin-right: 2.0833333333%;
}
}
-
@media (min-width: 960px) {
.l-one-sixth {
width: 12.5%;
@@ -238,7 +242,6 @@ main {
margin-right: 2.0833333333%;
}
}
-
@media (min-width: 960px) {
.l-one-third {
width: 29.1666666667%;
@@ -246,14 +249,15 @@ main {
margin-right: 2.0833333333%;
}
}
-
.l-grid:before, .l-grid:after {
content: "";
display: table;
}
+
.l-grid:after {
clear: both;
}
+
.l-grid li {
width: 29.1666666667%;
margin-left: 2.0833333333%;
@@ -269,26 +273,27 @@ main {
max-width: 85rem;
padding: 1rem;
}
+
.l-container:before, .l-container:after {
content: "";
display: table;
}
+
.l-container:after {
clear: both;
}
+
@media (min-width: 960px) {
.l-container {
padding: 1rem 5rem;
}
}
-
@media (min-width: 960px) {
.l-button-table {
display: flex;
justify-content: center;
}
}
-
.l-button-table > .l-two-third {
float: none;
margin-left: 0;
@@ -317,13 +322,11 @@ main {
float: left;
}
}
-
@media (min-width: 590px) {
.right {
float: right;
}
}
-
.text-left {
text-align: left;
}
@@ -379,6 +382,7 @@ button {
text-decoration: none;
vertical-align: bottom;
}
+
.button--alert:focus, .button--success:focus, .button--neutral:focus,
.button:focus,
input[type=submit]:focus,
button:focus {
@@ -391,12 +395,14 @@ button {
background: #FF9925;
color: #fff;
}
+
.button:hover,
input[type=submit]:hover,
button:hover {
background: rgb(237.6945606695, 148.8075313808, 84.3054393305);
color: #fff;
}
+
.button:active, .button:focus,
input[type=submit]:active,
input[type=submit]:focus,
@@ -411,12 +417,14 @@ button.button--neutral {
background: #ccd6d2;
color: #3f4542;
}
+
.button--neutral:hover,
input[type=submit].button--neutral:hover,
button.button--neutral:hover {
background: #8d9994;
color: #3f4542;
}
+
.button--neutral:active, .button--neutral:focus,
input[type=submit].button--neutral:active,
input[type=submit].button--neutral:focus,
@@ -431,12 +439,14 @@ button.button--success {
background-color: #39b924;
color: #fff;
}
+
.button--success:hover,
input[type=submit].button--success:hover,
button.button--success:hover {
background-color: #249c11;
color: #fff;
}
+
.button--success:active, .button--success:focus,
input[type=submit].button--success:active,
input[type=submit].button--success:focus,
@@ -451,12 +461,14 @@ button.button--alert {
background-color: #f3490d;
color: #fff;
}
+
.button--alert:hover,
input[type=submit].button--alert:hover,
button.button--alert:hover {
background-color: #d33e09;
color: #fff;
}
+
.button--alert:active, .button--alert:focus,
input[type=submit].button--alert:active,
input[type=submit].button--alert:focus,
@@ -724,6 +736,7 @@ button.button--alert:focus {
background-size: cover;
box-shadow: inset 0 0 40px rgb(0, 0, 0);
}
+
@media (min-width: 769px) {
.jumbotron .mainmenu {
padding-top: 1rem;
@@ -742,6 +755,7 @@ button.button--alert:focus {
margin-left: 4.1666666667%;
margin-right: 4.1666666667%;
}
+
@media (min-width: 590px) {
.jumbotron .jumbotron-mission {
width: 75%;
@@ -763,10 +777,12 @@ button.button--alert:focus {
text-align: center;
text-transform: uppercase;
}
+
.jumbotron .jumbotron-logo {
margin-top: 2rem;
margin-bottom: 2rem;
}
+
@media (min-width: 769px) {
.jumbotron .jumbotron-logo {
display: block;
@@ -779,6 +795,7 @@ button.button--alert:focus {
min-width: 320px;
margin: 0 auto;
}
+
.jumbotron .jumbotron-version {
text-transform: lowercase;
color: white;
@@ -793,18 +810,22 @@ nav.mainmenu {
text-transform: uppercase;
font-weight: bold;
}
+
nav.mainmenu.active {
border-bottom: 2px solid white;
}
+
nav.mainmenu li + li {
margin-left: 2.0833333333%;
}
+
nav.mainmenu a, nav.mainmenu a:active {
border: none;
color: #E97826;
font-weight: 500;
text-decoration: none;
}
+
nav.mainmenu a:hover {
color: #303284;
}
@@ -815,21 +836,26 @@ nav.mainmenu a:hover {
align-items: center;
flex-wrap: wrap;
}
+
.nav-container:last-child {
flex-grow: 1;
justify-content: flex-end;
- font-size: 2rem;
- flex-wrap: nowrap;
}
+
@media (max-width: 769px) {
.nav-container:last-child {
justify-content: center;
}
}
+.nav-container:last-child {
+ font-size: 2rem;
+ flex-wrap: nowrap;
+}
.nav-items {
padding-right: 1rem;
}
+
.nav-items:hover {
color: #E97826;
}
@@ -839,6 +865,7 @@ nav.mainmenu a:hover {
display: flex;
padding-right: 1rem;
}
+
@media (max-width: 769px) {
.nav-logo {
margin: 0;
@@ -855,18 +882,20 @@ nav.mainmenu a:hover {
.toc ul {
list-style: none;
}
+
.toc > ul {
margin-left: 0;
}
+
.toc > ul > li + li {
margin-top: 1rem;
}
+
@media (min-width: 590px) {
.toc {
display: none;
}
}
-
.toc.post.index {
display: none;
}
@@ -879,6 +908,7 @@ nav.mainmenu a:hover {
padding-left: 1rem;
padding-right: 1rem;
}
+
.builtwithwicket .slick-prev::before,
.builtwithwicket .slick-next::before {
color: #E97826;
@@ -908,11 +938,13 @@ div.quickstart-wizard {
line-height: 2em;
padding: 1rem 2rem 2rem 2rem;
}
+
div.quickstart-wizard label {
display: block;
font-weight: bold;
margin-top: 0.5rem;
}
+
div.quickstart-wizard button,
div.quickstart-wizard input,
div.quickstart-wizard select,
@@ -925,9 +957,11 @@ div.quickstart-wizard textarea {
color: #606060;
height: 2rem;
}
+
div.quickstart-wizard textarea {
height: 5rem;
}
+
div.quickstart-wizard button {
background-color: #E68A00;
color: white;
@@ -942,6 +976,7 @@ div.quickstart-wizard button {
padding-left: 0;
counter-reset: item;
}
+
.quickstart ol > li {
margin-left: 2.5rem;
padding-left: 0;
@@ -949,6 +984,7 @@ div.quickstart-wizard button {
list-style: none inside;
margin-bottom: 10px;
}
+
.quickstart ol > li:before {
background: #FF9925;
border-radius: 50%;
@@ -968,9 +1004,11 @@ div.quickstart-wizard button {
.wicket8 nav.mainmenu a, .wicket8 nav.mainmenu a:active, .wicket8 nav.mainmenu
a:hover {
color: #111111;
}
+
.wicket8 .header {
color: #111111;
}
+
.wicket8 .jumbotron.header {
background-color: #BF866F;
background-image: url("../img/background-4.jpg");
@@ -979,16 +1017,20 @@ div.quickstart-wizard button {
background-size: cover;
box-shadow: none;
}
+
.wicket8 .jumbotron .jumbotron-version {
color: #111111;
}
+
.wicket8 .jumbotron .jumbotron-poweredbyasf {
margin: 0 auto;
text-align: center;
}
+
.wicket8 .jumbotron .jumbotron-poweredbyasf b {
font-weight: bold;
}
+
.wicket8 .jumbotron .jumbotron-mission {
font-size: 2rem;
font-weight: bold;
@@ -1007,6 +1049,7 @@ a {
font-weight: 400;
text-decoration: none;
}
+
a:hover {
color: rgb(237.6945606695, 148.8075313808, 84.3054393305);
}
@@ -1030,6 +1073,7 @@ div.header {
padding-right: 1em;
display: flex;
}
+
@media (max-width: 769px) {
.default nav.mainmenu {
display: block;
@@ -1044,23 +1088,28 @@ div.header {
line-height: 2;
text-align: center;
}
+
.preamble h1 {
font-weight: 300;
}
+
.preamble h2 {
color: #E97826;
font-weight: 300;
}
+
.preamble h1 + *,
.preamble h2 + *,
.preamble img + * {
padding-top: 1rem;
}
+
.preamble h1:last-child,
.preamble h2:last-child,
.preamble img:last-child {
margin-bottom: 2rem;
}
+
.preamble p {
font-size: 1.313rem;
text-align: left;
@@ -1069,6 +1118,7 @@ div.header {
.index .preamble {
margin-bottom: 2rem;
}
+
.index .preamble p {
text-align: center;
}
@@ -1078,6 +1128,7 @@ div.header {
margin-left: 0;
padding-left: 0;
}
+
.news li {
display: block;
margin-left: 0;
@@ -1114,15 +1165,18 @@ article + article {
margin-bottom: 2rem;
width: 100%;
}
+
.button-bar .button {
-webkit-flex: 1;
flex: 1;
padding: 1rem;
text-align: center;
}
+
.button-bar .button + .button {
margin-left: 0.5rem;
}
+
.button-bar .button i {
font-size: 3rem;
}
@@ -1134,9 +1188,11 @@ th {
.media-bar {
clear: both;
}
+
.media-bar a {
border: none;
}
+
.media-bar a > img {
width: 100%;
}
@@ -1151,18 +1207,21 @@ th {
margin-bottom: 0;
text-align: center;
}
+
.wicket7.header a {
border: none;
margin: 0;
padding: 0;
height: 0;
}
+
.wicket7.header img {
min-width: 240px;
width: 33%;
margin: 0 auto;
padding: 6rem 0 4rem;
}
+
.wicket7.header nav.mainmenu {
background-color: #E97826;
line-height: 3em;
@@ -1170,9 +1229,11 @@ th {
margin-bottom: 0;
padding-right: 1em;
}
+
.wicket7.header nav.mainmenu ul {
margin-bottom: 0;
}
+
@media screen and (orientation: portrait) {
.wicket7.header nav.mainmenu {
padding-bottom: 0.25rem;
@@ -1188,19 +1249,24 @@ th {
padding-right: 1em;
text-align: center;
}
+
.wicket7.header .submenu ul {
list-style: none;
}
+
.wicket7.header .submenu li {
display: inline-block;
font-size: 12px;
}
+
.wicket7.header .submenu li.active {
border-bottom: 2px solid;
}
+
.wicket7.header .submenu li + li {
margin-left: 2.0833333333%;
}
+
.wicket7.header .submenu a, .wicket7.header .submenu a:active, .wicket7.header
.submenu a:hover {
border: none;
font-weight: 400;
diff --git a/content/css/style.css.map b/content/css/style.css.map
index 056b871b..b405e496 100644
--- a/content/css/style.css.map
+++ b/content/css/style.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["style.scss","../_sass/taiga/_base.scss","../_sass/taiga/_mixins.scss","../_sass/taiga/_settings.scss","../_sass/taiga/_grid.scss","../_sass/taiga/_layout.scss","../_sass/taiga/_states.scss","../_sass/taiga/_button.scss","../_sass/taiga/_print.scss","../_sass/modules/_syntax.scss","../_sass/modules/_logo.scss","../_sass/modules/_jumbotron.scss","../_sass/modules/_mainmenu.scss","../_sass/modules/_toc.scss","../_sass/modules/_builtwithwicket.scss","
[...]
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["style.scss","../_sass/taiga/_base.scss","../_sass/taiga/_mixins.scss","../_sass/taiga/_settings.scss","../_sass/taiga/_grid.scss","../_sass/taiga/_layout.scss","../_sass/taiga/_states.scss","../_sass/taiga/_button.scss","../_sass/taiga/_print.scss","../_sass/modules/_syntax.scss","../_sass/modules/_logo.scss","../_sass/modules/_jumbotron.scss","../_sass/modules/_mainmenu.scss","../_sass/modules/_toc.scss","../_sass/modules/_builtwithwicket.scss","
[...]
\ No newline at end of file
diff --git a/css/style.scss b/css/style.scss
index fbce2c9b..6c8cadeb 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -2,7 +2,8 @@
# this ensures Jekyll reads the file to be transformed into CSS later
# only Main files contain this front matter, not partials.
---
-@import url(../fonts/source-code-pro/stylesheet.css);
-@import url(../fonts/source-sans-pro/stylesheet.css);
-@import url(../fonts/wicket-font/stylesheet.css);
-@import "main";
+@use "sass:meta";
+@import "../fonts/source-code-pro/stylesheet.css";
+@import "../fonts/source-sans-pro/stylesheet.css";
+@import "../fonts/wicket-font/stylesheet.css";
+@include meta.load-css("../_sass/main");
