Migrate to plain css

In order to remove dependencies to ecosystem, bootstrap, yarn, etc.
This commit is contained in:
Daniel Siepmann 2024-02-08 22:04:36 +01:00
parent 1a1f4b3a41
commit 6d10bdb4ef
28 changed files with 910 additions and 3103 deletions

2
.gitignore vendored
View file

@ -1,2 +0,0 @@
/node_modules/
/Resources/Public/Css

View file

@ -1,7 +1,17 @@
page = PAGE
page {
includeCSS {
index = EXT:ds_site/Resources/Public/Css/index.css
normalize = EXT:ds_site/Resources/Public/Css/normalize.css
variables = EXT:ds_site/Resources/Public/Css/variables.css
elements = EXT:ds_site/Resources/Public/Css/elements.css
layout = EXT:ds_site/Resources/Public/Css/layout.css
admonition = EXT:ds_site/Resources/Public/Css/admonition.css
typo3 = EXT:ds_site/Resources/Public/Css/typo3.css
# condition, only when necessary
code-highlighting = EXT:ds_site/Resources/Public/Css/code-highlighting.css
}
meta {

View file

@ -1,55 +0,0 @@
@import "../Frontend/variables";
.typo3-login {
.panel,
.panel-footer {
background-color: rgba(0, 0, 0, .2);
}
.card-login {
background-color: #2e3436;
}
input {
color: #9CD9F0;
border-color: #9CD9F0;
background-color: #2E3436;
}
.form-control:focus,
.form-control:hover {
color: #9CD9F0;
border-color: #9CD9F0;
background-color: #2E3436;
}
h2 {
color: #fff;
}
a {
color: #218693;
}
}
.exampleContent {
video {
width: 40rem;
max-width: 100%;
}
}
.ck-content {
padding: {
top: $spacer * 2;
bottom: $spacer * 2;
}
pre {
background: $black-dark;
color: $white-dark;
padding: 0.5em;
}
}
.ck.ck-content code {
background: $black-dark;
color: $white-dark;
}
.ck-editor__editable_inline {
height: 500px;
}

View file

@ -1,9 +0,0 @@
@import "layout/elements";
@import "layout/header";
@import "layout/footer";
@import "layout/content";
@import "layout/page/content";
body {
@extend .container;
}

View file

@ -1,78 +0,0 @@
$spacer: 1rem !default;
$black: #5D5D5D;
$black-dark: #000000;
$red: #E09690;
$red-dark: #C75646;
$green: #CDEE69;
$green-dark: #8EB33B;
$yellow: #FFE377;
$yellow-dark: #D0B03C;
$blue: #9CD9F0;
$blue-dark: #72B3CC;
$pink: #FBB1F9;
$pink-dark: #C8A0D1;
$cyan: #77DFD8;
$cyan-dark: #218693;
$white: #F7F7F7;
$white-dark: #B0B0B0;
$primary: $blue;
$secondary: $blue-dark;
$success: $green;
$info: $blue;
$warning: $yellow;
$danger: $red;
$light: $white-dark;
$dark: $black;
$theme-colors: ();
$theme-colors: map-merge(
(
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
),
$theme-colors
);
$body-bg: #2E3436;
$body-color: #D3D7CF;
$text-muted: $white-dark;
$font-family-sans-serif: 'Montserrat', 'Avenir', 'Roboto', sans-serif;
$font-family-serif: "Georgia", serif;
$font-family-monospace: "DejaVu Sans Mono", "Menlo", "Consolas", monospace;
$font-family-base: $font-family-monospace;
$font-size-base: 1.25rem;
$font-size-lg: $font-size-base * 1.25 !default;
$font-size-sm: $font-size-base * .875 !default;
$line-height-lg: 1;
$line-height-sm: 1;
$link-color: $blue-dark;
$link-decoration: underline;
$link-hover-color: $blue;
$link-hover-decoration: underline;
$container-max-widths: (
sm: 1023px,
md: 1024px,
lg: 1200px,
xl: 1440px
);
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 1200px,
xl: 1440px
);

View file

@ -1,15 +0,0 @@
#typo3-preview-info {
background: $warning;
border: solid 4px;
border-color: $yellow-dark;
color: $black-dark;
padding: {
top: calc($spacer / 4);
bottom: calc($spacer / 4);
left: $spacer;
right: $spacer;
}
position: fixed;
right: 15px;
top: 15px;
}

View file

@ -1,30 +0,0 @@
aside {
&[class^='admonition-'] {
border: none;
border-left: solid calc($spacer / 4);
padding: calc($spacer * 2);
margin-top: calc($spacer * 2);
h1, h2, h3, h4, h5, h6 {
padding-top: 0;
letter-spacing: 1em;
}
}
&.admonition-note {
border-color: $yellow;
}
&.admonition-task,
&.admonition-hint {
border-color: $green;
}
&.admonition-caution {
border-color: $red-dark;
}
&.admonition-danger {
border-color: $red-dark;
}
}

View file

@ -1,12 +0,0 @@
.ck-content {
padding: {
top: $spacer * 2;
bottom: $spacer * 2;
}
pre {
background: $black-dark;
color: $white-dark;
padding: 0.5em;
}
}

View file

@ -1,53 +0,0 @@
code {
background: $black-dark;
color: $white-dark;
padding: {
left: 0.5em;
right: 0.5em;
}
white-space: pre-line;
}
pre code {
display: block;
overflow-x: auto;
padding: 0.5em;
white-space: pre;
color: $white;
.meta {
color: $blue;
}
.tag {
color: $white;
.name {
color: $blue;
}
}
.attr {
color: $blue;
}
.string {
color: $white-dark;
}
.function {
color: $white;
}
.keyword {
color: $green;
}
.params {
color: $blue;
}
.comment {
color: $white-dark;
}
}

View file

@ -1,3 +0,0 @@
video {
max-width: 100%;
}

View file

@ -1,17 +0,0 @@
// Required
@import "bootstrap/scss/functions";
@import "variables";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
// Option
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/root";
@import "layout";
@import "components/codeHighlighting";
@import "components/adminpanel";
@import "components/admonition";
@import "components/video";

View file

@ -1,140 +0,0 @@
body {
word-break: break-word;
}
// Basic layout of content
body > main {
@extend .row;
& > header {
@extend .col-12;
@extend .order-xl-1;
margin-bottom: $spacer * 2;
}
& > aside {
@extend .col-xl-4;
@extend .col-12;
@extend .order-xl-3;
nav ul {
list-style: none;
padding-left: 0;
}
}
& > section {
@extend .col-xl-8;
@extend .col-12;
@extend .order-xl-2;
}
& article > aside {
margin-bottom: $spacer * 2;
nav ul {
list-style: none;
padding-left: 0;
}
}
}
aside,
main > header {
h1, h2, h3, h4, h5, h6 {
padding : 0;
margin: 0;
}
}
section > article {
margin-bottom: 4rem;
&:last-of-type {
margin-bottom: 0;
}
}
article {
&:first-of-type {
padding-top: 0;
margin-top: 0;
}
margin-top: 2.75em;
main {
h1:first-of-type {
padding-top: 0;
}
}
& > header {
font-size: 1.25em;
margin-bottom: $spacer * 2;
h1, h2, h3, h4, h5, h6 {
padding-bottom: 0;
}
p {
font-size: 0.75em;
margin: 0;
}
}
}
main > article > main > h2:first-of-type,
main > section > h2:first-of-type,
main article h1 {
padding-top: 0;
}
aside,
nav {
details > summary > h2 {
display: inline;
}
}
@media (max-width: 1439px) {
body > main {
& aside {
padding-bottom: 0;
h1, h2, h3, h4, h5, h6 {
margin-bottom: 0;
}
}
& aside,
& article > aside {
li {
margin-right: $spacer;
line-height: $spacer * 2;
}
nav ul {
columns: 4;
}
}
}
article {
padding-top: 0;
header h1 {
padding-top: 0;
}
}
}
@media (max-width: 768px) {
body > main {
& article aside,
& aside {
nav {
ul {
columns: 2;
}
}
}
}
}

View file

@ -1,75 +0,0 @@
h1, h2, h3, h4, h5, h6 {
font-family: $font-family-sans-serif;
letter-spacing: 2px;
word-spacing: 2px;
font-weight: 300;
line-height: 2.8rem;
margin: 0;
padding: {
top: $spacer * 3;
bottom: $spacer * 1;
}
small a {
display: none;
color: $gray-500;
}
&:hover small a {
display: inline;
}
}
p {
line-height: 1.5em;
}
figure {
text-align: center;
padding: $spacer;
figcaption {
text-align: start;
padding-top: $spacer;
}
}
strong {
color: $white;
}
blockquote {
border: none;
border-left: dashed calc($spacer / 4);
padding: $spacer;
margin-top: calc($spacer * 2);
border-color: $white;
&:before {
content: "Quote";
}
}
img {
max-width: 100%;
height: auto;
}
ul {
padding-inline-start: 20px;
list-style-type: square;
}
ol {
padding-inline-start: 50px;
list-style-type: decimal-leading-zero;
}
li {
padding: {
bottom: calc($spacer / 2);
top: calc($spacer / 2);
}
}

View file

@ -1,11 +0,0 @@
body > footer {
padding: {
top: $spacer * 2;
bottom: $spacer * 2;
}
text-align: center;
nav {
padding-bottom: $spacer;
}
}

View file

@ -1,34 +0,0 @@
body > header {
font-family: $font-family-sans-serif;
letter-spacing: 0.5em;
word-spacing: 0.75em;
font-weight: lighter;
padding-bottom: $spacer * 4;
a {
font-size: $h1-font-size;
text-decoration: none;
}
small {
font-size: 1em;
}
}
@media (max-width: 768px) {
body > header {
a {
font-size: .75em;
}
small {
display: none;
}
}
}
@media (max-width: 1439px) {
body > header {
padding-bottom: $spacer;
}
}

View file

@ -1,31 +0,0 @@
body.LayoutContent {
article {
@extend .row;
@extend .col-12;
@extend .order-xl-2;
& > header {
@extend .col-12;
@extend .order-xl-1;
}
& > aside {
@extend .col-12;
@extend .col-xl-4;
@extend .order-xl-3;
}
& > main {
@extend .col-12;
@extend .col-xl-8;
@extend .order-xl-2;
}
}
}
@media (max-width: 1023px) {
body.LayoutContent {
article,
article > main {
padding-right: 0;
}
}
}

View file

@ -1 +1,48 @@
.typo3-login .panel,.typo3-login .panel-footer{background-color:rgba(0,0,0,.2)}.typo3-login .card-login,.typo3-login input{background-color:#2e3436}.typo3-login input{color:#9cd9f0;border-color:#9cd9f0}.typo3-login .form-control:focus,.typo3-login .form-control:hover{color:#9cd9f0;border-color:#9cd9f0;background-color:#2e3436}.typo3-login h2{color:#fff}.typo3-login a{color:#218693}.exampleContent video{width:40rem;max-width:100%}.ck-content{padding-top:2rem;padding-bottom:2rem}.ck-content pre{padding:.5em}.ck-content pre,.ck.ck-content code{background:#000;color:#b0b0b0}.ck-editor__editable_inline{height:500px}
.typo3-login .panel,
.typo3-login .panel-footer {
background-color: rgba(0, 0, 0, .2);
}
.typo3-login .card-login {
background-color: #2e3436;
}
.typo3-login input {
color: #9CD9F0;
border-color: #9CD9F0;
background-color: #2E3436;
}
.typo3-login .form-control:focus,
.typo3-login .form-comtrol:hover {
color: #9CD9F0;
border-color: #9CD9F0;
background-color: #2E3436;
}
.typo3-login h2 {
color: #fff;
}
.typo3-login a {
color: #218693;
}
.element-preview {
video {
width: 40rem;
max-width: 100%;
}
}
.ck-content {
padding-top: calc(var(--ds-spacer) * 2);
padding-bottom: calc(var(--ds-spacer) * 2);
}
.ck-content pre {
background: var(--ds-black-dark);
color: var(--ds-white-dark);
padding: 0.5em;
}
.ck.ck-content code {
background: var(--ds-black-dark);
color: var(--ds-white-dark);
}
.ck-editor__editable_inline {
height: 500px;
}

View file

@ -0,0 +1 @@
../../Css/variables.css

View file

@ -0,0 +1,30 @@
/* Admonition */
aside[class^='admonition-'] {
border: none;
border-left: solid calc(var(--ds-spacer) / 4);
padding: calc(var(--ds-spacer) * 2);
margin-top: calc(var(--ds-spacer) * 2);
}
aside[class^='admonition-'] h1,
aside[class^='admonition-'] h2,
aside[class^='admonition-'] h3,
aside[class^='admonition-'] h4,
aside[class^='admonition-'] h5,
aside[class^='admonition-'] h6 {
padding-top: 0;
letter-spacing: 1em;
}
aside.admonition-note {
border-color: var(--ds-yellow);
}
aside.admonition-task,
aside.admonition-hint {
border-color: var(--ds-green);
}
aside.admonition-caution {
border-color: var(--ds-red-dark);
}
aside.admonition-danger {
border-color: var(--ds-red-dark);
}

View file

@ -0,0 +1,51 @@
code {
background: var(--ds-black-dark);
color: var(--ds-white-dark);
padding-left: 0.5em;
padding-right: 0.5em;
white-space: pre-line;
}
pre code {
display: block;
overflow-x: auto;
padding: 0.5em;
white-space: pre;
color: var(--ds-white);
}
pre code .meta {
color: var(--ds-blue);
}
pre code .tag {
color: var(--ds-white);
}
pre code .tag .name {
color: var(--ds-blue);
}
pre code .attr {
color: var(--ds-blue);
}
pre code .string {
color: var(--ds-white-dark);
}
pre code .function {
color: var(--ds-white);
}
pre code .keyword {
color: var(--ds-green);
}
pre code .params {
color: var(--ds-blue);
}
pre code .comment {
color: var(--ds-white-dark);
}

View file

@ -0,0 +1,99 @@
/* Elements */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--ds-font-family-sans-serif);
letter-spacing: 2px;
word-spacing: 2px;
font-weight: 300;
line-height: 2.8rem;
margin: 0;
padding-top: calc(var(--ds-spacer) * 3);
padding-bottom: calc(var(--ds-spacer) * 1);
}
h1 small a,
h2 small a,
h3 small a,
h4 small a,
h5 small a,
h6 small a {
display: none;
color: var(--ds-gray-500);
}
h1 &:hover small a ,
h2 &:hover small a ,
h3 &:hover small a ,
h4 &:hover small a ,
h5 &:hover small a ,
h6 &:hover small a {
display: inline;
}
p {
line-height: 1.5em;
margin-top: 0;
margin-bottom: 1rem;
}
figure {
text-align: center;
padding: var(--ds-spacer);
}
figure figcaption {
text-align: start;
padding-top: var(--ds-spacer);
}
strong {
color: var(--ds-white);
}
blockquote {
border: none;
border-left: dashed calc(var(--ds-spacer) / 4);
padding: var(--ds-spacer);
margin-top: calc(var(--ds-spacer) * 2);
border-color: var(--ds-white);
}
blockquote &:before {
content: "Quote";
}
img {
max-width: 100%;
height: auto;
}
ul {
padding-inline-start: 20px;
list-style-type: square;
}
ol {
padding-inline-start: 50px;
list-style-type: decimal-leading-zero;
}
li {
padding-bottom: calc(var(--ds-spacer) / 2);
padding-top: calc(var(--ds-spacer) / 2);
}
a,
a:visited {
color: var(--ds-blue-dark);
text-decoration: underline;
}
a:hover {
color: var(--ds-blue);
text-decoration: underline;
}
video {
max-width: 100%;
}

View file

@ -0,0 +1,288 @@
* {
box-sizing: border-box;
}
/* Header */
body > header {
font-family: var(--ds-font-family-sans-serif);
letter-spacing: 0.5em;
word-spacing: 0.75em;
font-weight: lighter;
box-sizing: content-box;
padding-bottom: calc(var(--ds-spacer) * 4);
}
body > header a {
font-size: calc(var(--ds-font-size-base) * 3.5);
text-decoration: none;
}
body > header small {
font-size: 1em;
}
@media (max-width: 768px) {
body > header a {
font-size: .75em;
}
body > header small {
display: none;
}
}
@media (max-width: 1439px) {
body > header {
padding-bottom: var(--ds-spacer);
}
}
/* Footer */
body > footer {
padding-top: calc(var(--ds-spacer) * 2);
padding-bottom: calc(var(--ds-spacer) * 2);
text-align: center;
}
body > footer nav {
padding-bottom: var(--ds-spacer);
}
/* Content */
body {
word-break: break-word;
background-color: #2E3436;
color: #D3D7CF;
font-family: "DejaVu Sans Mono", "Menlo", "Consolas", monospace;
font-size: 1.25rem;
line-height: 1.5;
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) {
body {
max-width: 1023px;
}
}
@media (min-width: 768px) {
body {
max-width: 1024px;
}
}
@media (min-width: 1200px) {
body {
max-width: 1200px;
}
}
@media (min-width: 1440px) {
body {
max-width: 1440px;
}
}
body > main {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
body > main > header {
flex: 0 0 100%;
max-width: 100%;
margin-bottom: calc(var(--ds-spacer) * 2);
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
body > main > aside {
flex: 0 0 100%;
max-width: 100%;
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
@media (min-width: 1440px) {
body > main > aside {
order: 3;
flex: 0 0 33.33333333%;
max-width: 33.33333333%;
}
}
body > main > aside nav ul {
list-style: none;
padding-left: 0;
}
body > main > section {
flex: 0 0 100%;
max-width: 100%;
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
@media (min-width: 1440px) {
body > main > section {
order: 2;
flex: 0 0 66.66666667%;
max-width: 66.66666667%;
}
}
body > main article > aside {
margin-bottom: calc(var(--ds-spacer) * 2);
}
body > main article > aside nav ul {
list-style: none;
padding-left: 0;
}
aside h1,
aside h2,
aside h3,
aside h4,
aside h5,
aside h6,
main > header h1,
main > header h2,
main > header h3,
main > header h4,
main > header h5,
main > header h6 {
padding : 0;
margin: 0;
}
section > article {
margin-bottom: 4rem;
}
section > article :last-of-type {
margin-bottom: 0;
}
article {
margin-top: 2.75em;
}
article:first-of-type {
padding-top: 0;
margin-top: 0;
}
article main h1:first-of-type {
padding-top: 0;
}
article > header {
font-size: 1.25em;
margin-bottom: calc(var(--ds-spacer) * 2);
}
article > header h1,
article > header h2,
article > header h3,
article > header h4,
article > header h5,
article > header h6 {
padding-bottom: 0;
}
article > header h1 {
font-size: 1.17em;
}
article > header p {
font-size: 0.75em;
margin: 0;
}
main > article > main > h2:first-of-type,
main > section > h2:first-of-type,
main article h1 {
padding-top: 0;
}
aside details > summary > h2,
nav details > summary > h2 {
display: inline;
}
@media (max-width: 1439px) {
body > main aside {
padding-bottom: 0;
}
body > main aside h1,
body > main aside h2,
body > main aside h3,
body > main aside h4,
body > main aside h5,
body > main aside h6 {
margin-bottom: 0;
}
body > main aside li,
body > main article > aside li {
margin-right: var(--ds-spacer);
line-height: calc(var(--ds-spacer) * 2);
}
body > main aside nav ul,
body > main article > aside nav ul {
columns: 4;
}
article {
padding-top: 0;
}
article header h1 {
padding-top: 0;
}
}
@media (max-width: 768px) {
body > main article aside nav ul,
body > main aside nav ul{
columns: 2;
}
}
body.LayoutContent article {
flex: 0 0 100%;
max-width: 100%;
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
body.LayoutContent article,
body.LayoutContent article > header,
body.LayoutContent article > aside,
body.LayoutContent article > main {
flex: 0 0 100%;
max-width: 100%;
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
@media (max-width: 1023px) {
body.LayoutContent article,
body.LayoutContent article > main {
padding-right: 0;
}
}
@media (min-width: 1440px) {
body.LayoutContent article {
order: 2;
}
body.LayoutContent article > header {
order: 1;
}
body.LayoutContent article > aside {
flex: 0 0 33.33333333%;
max-width: 33.33333333%;
order: 3;
}
body.LayoutContent article > main {
flex: 0 0 66.66666667%;
max-width: 66.66666667%;
order: 2;
}
}

349
Resources/Public/Css/normalize.css vendored Normal file
View file

@ -0,0 +1,349 @@
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}

View file

@ -0,0 +1,13 @@
#typo3-preview-info {
background: var(--ds-warning);
border: solid 4px;
border-color: var(--ds-yellow-dark);
color: var(--ds-black-dark);
padding-top: calc(var(--ds-spacer) / 4);
padding-bottom: calc(var(--ds-spacer) / 4);
padding-left: var(--ds-spacer);
padding-right: var(--ds-spacer);
position: fixed;
right: 15px;
top: 15px;
}

View file

@ -0,0 +1,20 @@
:root {
--ds-black-dark: #000000;
--ds-white: #F7F7F7;
--ds-red-dark: #C75646;
--ds-white-dark: #B0B0B0;
--ds-yellow: #FFE377;
--ds-yellow-dark: #D0B03C;
--ds-green: #CDEE69;
--ds-blue: #9CD9F0;
--ds-blue-dark: #72B3CC;
--ds-gray-500: #8f96a3;
--ds-warning: var(--ds-yellow);
--ds-font-size-base: 1rem;
--ds-h1-font-size: calc(var(--ds-font-size-base) * 2.5);
--ds-font-family-sans-serif: 'Montserrat', 'Avenir', 'Roboto', sans-serif;
--ds-spacer: 1rem;
}

View file

@ -1,35 +0,0 @@
const { src, dest, parallel, watch } = require('gulp');
const sass = require('gulp-dart-sass');
const minifyCSS = require('gulp-csso');
const frontendSassFolder = 'Resources/Private/Sass/Frontend/';
const backendSassFolder = 'Resources/Private/Sass/Backend/';
function frontendCss() {
return src(frontendSassFolder + 'index.scss')
.pipe(sass({
includePaths: [
'./node_modules/'
]
}).on('error', sass.logError))
.pipe(minifyCSS())
.pipe(dest('Resources/Public/Css/'))
}
function backendCss() {
return src(backendSassFolder + 'index.scss')
.pipe(sass({
includePaths: [
'./node_modules/'
]
}).on('error', sass.logError))
.pipe(minifyCSS())
.pipe(dest('Resources/Public/Backend/Css/'))
}
exports.frontendCss = frontendCss;
exports.backendCss = backendCss;
exports.watch = function () {
watch([frontendSassFolder + '**/*.scss'], {ignoreInitial: false}, frontendCss);
watch([backendSassFolder + '**/*.scss'], {ignoreInitial: false}, backendCss);
};
exports.default = parallel(frontendCss, backendCss);

View file

@ -1,19 +0,0 @@
{
"private": true,
"scripts": {
"build": "gulp default",
"watch": "gulp watch"
},
"engines": {
"node": "20.*"
},
"dependencies": {
"bootstrap": "^4.3.1",
"gulp": "^4.0.2",
"gulp-cli": "^2.2.0",
"gulp-csso": "^3.0.1",
"gulp-dart-sass": "^1.0.2",
"jquery": "^3.4.1",
"popper.js": "^1.16.0"
}
}

2482
yarn.lock

File diff suppressed because it is too large Load diff