Merge branch 'dev/scss'

This commit is contained in:
Christian Wolf 2021-12-03 17:44:47 +01:00
commit e1ceea4459
35 changed files with 4589 additions and 1032 deletions

2
slt/.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
/node_modules/
/.stylelintcache

10
slt/.stylelintrc.json Normal file
View File

@ -0,0 +1,10 @@
{
"extends": "stylelint-config-standard-scss",
"plugins": [
"stylelint-order",
"stylelint-scss"
],
"rules": {
"indentation": 4
}
}

2
slt/css/.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
/style.css
*.css.map

24
slt/css/.htaccess Normal file
View File

@ -0,0 +1,24 @@
<IfModule mod_headers.c>
# Caching
# 2 Stunden für Textdateien
<FilesMatch "\.(css|css\.map)$">
Header set Cache-Control "public, max-age=3600, must-revalidate"
</FilesMatch>
</IfModule>
<IfModule mod_expires.c>
# Expires-Header aktivieren
ExpiresActive On
# Typunabhängige Standard-Ablaufzeit setzen
ExpiresDefault "access plus 1 hour"
# Typabhängige Ablaufzeit für JPEG-Dateien (jpeg, jpg, jpe)
# ExpiresByType image/jpeg "access plus 1 year"
# Weitere Dateitypen...
</IfModule>

View File

@ -0,0 +1,15 @@
$color-lehre: #d9c254;
$color-breitensport: #a6d400;
$color-jugend: #04b;
$color-jmd: #e95d00;
$color-fachverbaende: #eec008;
$color-sport: #bc0023;
:root {
--color-lehre: #{$color-lehre};
--color-breitensport: #{$color-breitensport};
--color-jugend: #{$color-jugend};
--color-jmd: #{$color-jmd};
--color-fachverbaende: #{$color-fachverbaende};
--color-sport: #{$color-sport};
}

View File

@ -0,0 +1,2 @@
@forward "responsive";
@forward "colors";

View File

@ -0,0 +1,13 @@
// Some Mixins for various screen sizes
@mixin for-desktop {
@media screen and (min-width: 1000px) {
@content;
}
}
@mixin for-wide-desktop {
@media screen and (min-width: 1200px) {
@content;
}
}

View File

@ -0,0 +1,28 @@
@use "../abstract" as abstract;
.article-info {
font-size: smaller;
clear: both;
}
@include abstract.for-desktop {
.btn {
border-radius: 0;
}
p.readmore {
text-align: right;
font-size: smaller;
> .btn {
font-size: inherit;
background-image: none;
border: none;
text-shadow: unset;
> span[class^="icon-"] {
display: none;
}
}
}
}

View File

@ -0,0 +1,25 @@
#current_page_menu.menu {
background-color: transparent;
padding-top: 0;
padding-bottom: 0;
margin-bottom: 0;
&:hover {
box-shadow: unset;
}
> li {
border-style: none;
display: none;
&.active {
display: block;
border-style: none;
> a {
background-color: transparent;
font-weight: bold;
}
}
}
}

View File

@ -0,0 +1,3 @@
@use "slideshow";
@use "article";
@use "current-page-manu";

View File

@ -0,0 +1,10 @@
@use "../abstract" as abstract;
#slideshow {
flex: 1;
display: none;
@include abstract.for-desktop {
display: inline-block;
}
}

48
slt/css/core/_core.scss Normal file
View File

@ -0,0 +1,48 @@
@use "../abstract" as abstract;
body {
margin: 0;
min-height: 100.1vh;
display: flex;
flex-direction: column;
align-items: center;
/* padding: 0px 20px 10px 20px; */
padding: 0;
font-size: 12pt;
font-family: Arial, Verdana, Helvetica, Geneva, sans-serif;
line-height: 175%;
@include abstract.for-desktop {
overflow: scroll;
padding: 0;
}
}
a {
text-decoration: none;
}
p {
text-align: justify;
hyphens: auto;
}
h3 {
font-size: 133% /*16pt*/;
}
h2 {
font-size: 158% /*19pt*/;
}
h1 {
font-size: 183% /*22pt*/;
}
h1,
h2,
h3,
h4 {
line-height: 150%;
}

View File

@ -0,0 +1,32 @@
.pull-right > img,
.pull-left > img,
.pull-right > a > img,
.pull-left > a > img {
margin: 10px;
}
.centered {
text-align: center;
}
.ragged-left {
text-align: left;
}
li.row-fluid {
display: block;
}
.page-header {
padding-bottom: 0;
}
.row-striped .row-fluid:nth-child(n),
.list-striped li:nth-child(n),
.table-striped tbody > tr:nth-child(n) > td {
background-color: inherit;
}
.well {
background-color: inherit;
}

2
slt/css/core/_index.scss Normal file
View File

@ -0,0 +1,2 @@
@use "core";
@use "default-classes";

View File

@ -1,3 +0,0 @@
#topmenu .nav > li > a {
font-size: large;
}

View File

@ -1,335 +0,0 @@
/*
Structure of page
*/
#topmenu-div {
}
#topmenu
{
position: fixed;
display: flex;
}
#topmenu > .topmenu-sep
{
display: inline-block;
flex: 1 1 auto;
}
#topmenu .nav
{
flex: 0 0 auto;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
position: relative;
align-items: center;
}
#topmenu .nav > li
{
display: inline-block;
}
#topmenu .nav > li > a
{
position: relative;
}
#topmenu .nav > li > .nav-child {
position: absolute;
display: none;
}
#topmenu .nav > li:hover > .nav-child {
display: block;
}
#topmenu .nav > li > .nav-child > li > a {
display: block;
}
#page-div
{
display: flex;
flex-flow: row;
width: 100%;
justify-content: space-around;
}
#page
{
flex: 0 0 auto;
}
#page-bg
{
display: block;
position: fixed;
}
#header {
justify-content: space-around;
}
#slideshow {
display: inline-block;
}
#content {
display: flex;
}
#left_menu {
flex: 0 1 20%;
display: block;
}
.nav-child > li > a {
display: block;
}
#main_column {
flex: 1 1 60%;
display: flex;
flex-flow: column nowrap;
}
#main_content{
flex: 1 1 auto;
}
#footline {
flex: none;
}
#right_column {
flex: 1 1 15%;
display: block;
}
#mobile_menu,
#mobile_menu.visible,
#mobile_menu_switch
{
display: none;
}
a.facebook img
{
display: inline;
}
a.facebook > span.image-title
{
display: none;
}
/*
Form of page (paddings, margins, ...)
*/
body
{
overflow: scroll;
padding: 0px;
}
#topmenu-div {
width: 100vw;
height: 40px;
}
#topmenu {
width: 100vw;
z-index: 5000;
}
#topmenu .nav {
padding: 0px 10px;
margin: 0px;
height: 40px;
width: 980px;
}
#topmenu .nav > li > a {
font-size: large;
padding: 10px;
z-index: 3001;
}
#topmenu .nav > li > .nav-child {
z-index: 3000;
margin: 0px 20px 10px 0px;
border: none;
padding: 0px;
}
#topmenu .nav > li:hover > .nav-child {
box-shadow: 3px 5px 5px 2px rgba(0,0,0,0.5);
}
#topmenu .nav > li > .nav-child > li
{
padding: 0px 5px;
}
#topmenu .nav > li > .nav-child > li > a {
padding: 10px 5px 10px 4px;
border-left-color: transparent;
border-left-style: solid;
border-left-width: 6px;
}
#page-div, #page
{
min-height: calc( 100vh - 40px );
}
#page {
width: 1000px;
}
#page-bg
{
width: 1000px;
height: calc( 100% - 40px );
bottom: 0px;
z-index: -9;
left: calc( (100% - 1000px) / 2 );
}
#left_side-image, #right_side-image
{
position: fixed;
height: 100vh;
width: calc( (100% - 980px) / 2 );
z-index: -10;
}
#left_side-image
{
left: 0px;
}
#right_side-image
{
right: 0px;
}
#left_menu
{
margin: 15px 0px 15px 5px;
}
#left_menu > ul.menu
{
padding: 10px;
}
#left_menu > ul.menu:hover
{
box-shadow: 3px 5px 5px 2px rgba(0,0,0,0.5);
}
#left_menu > ul.menu li > a
{
padding: 2px 5px 2px 5px;
}
#right_column
{
margin: 15px 5px 15px 0px;
}
/*
Additional content
*/
#topmenu a {
color: inherit;
}
#topmenu {
font-weight: bold;
text-align: center;
}
#topmenu .nav > li {
text-align: left;
}
#topmenu .nav > li > a {
font-size: large;
}
#topmenu li > a,
#topmenu li:hover > a,
#topmenu li:focus > a,
#topmenu li.active > a
{
background-color: inherit;
color: inherit;
}
#topmenu .nav-child > li:hover > a:hover,
#topmenu .nav-child > li:focus > a:hover,
#topmenu .nav-child > li:hover > a:focus
{
text-decoration: none;
}
#left_side-image, #right_side-image
{
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
opacity: 0.5;
}
#page
{
background-color: inherit;
}
p.readmore
{
text-align: right;
font-size: smaller;
}
.btn
{
border-radius: 0pt;
}
.readmore > .btn
{
font-size: inherit;
background-image: none;
border: none;
text-shadow: unset;
}
p.readmore > .btn > span[class^="icon-"]
{
display: none;
}
/*
* Debug
*/
/*#right_column,#left_menu,#main_content,#footline {
background-color: rgba(0,0,0,0.1);
}*/

View File

@ -0,0 +1,188 @@
<?php
define( '_JEXEC', 1 );
define('JPATH_BASE', '../../../');
require_once ( JPATH_BASE .'/includes/defines.php' );
require_once ( JPATH_BASE .'/includes/framework.php' );
/* Create the Application */
$mainframe = JFactory::getApplication('site');
$mainframe->initialise();
$params = JFactory::getApplication()->getTemplate(true)->params;
header("content-type: text/css");
// duration of cached content (1 hour)
$offset = 60 * 60 ;
// cache control to process
header("Cache-Control: must-revalidate, max-age=$offset, public");
// expiration header format
// $ExpStr = "Expires: " . gmdate("D, d M Y H:i:s",time() + $offset) . " GMT";
// send cache expiration header to broswer
// header($ExpStr);
$leftImageValue = (empty($params['imgleft']) ? "none" : "url(\"" . JPATH_BASE. "/" . $params['imgleft'] . "\")") ;
$rightImageValue = (empty($params['imgright']) ? "none" : "url(\"" . JPATH_BASE . "/" . $params['imgright'] . "\")")
// $leftImageValue = (empty($params['imgleft']) ? "none" : "url(\"" . $this->baseurl . "/" . $params['imgleft'] . "\")") ;
// $rightImageValue = (empty($params['imgright']) ? "none" : "url(\"" . $this->baseurl . "/" . $params['imgright'] . "\")")
?>
<?php
if($params['titlepage'] === '1')
{
?>
#left-menu
{
display: none;
}
<?php
}
?>
body
{
background-color: <?php echo $params['bgcolorside']; ?>;
}
a, a:hover, a:active, a:visited
{
color: <?php echo $params['mainlicolor']; ?>;
}
#page-bg
{
background-image: linear-gradient(to bottom, <?php echo $params['mainbgcolortop'] . ',' . $params['mainbgcolorbot']; ?>);
color: <?php echo $params['mainfgcolor']; ?>;
}
#mobile-menu li > a {
background-color: <?php echo $params['bgcolor2']; ?>;
color: <?php echo $params['licolor2']; ?>;
}
#mobile-menu li.current > a {
background-color: <?php echo $params['bgcolor3']; ?>;
color: <?php echo $params['licolor3']; ?>;
}
ul.menu {
background-color: <?php echo $params['bgcolor1']; ?>;
color: <?php echo $params['fgcolor1']; ?>;
}
#mobile-menu {
background-color: <?php echo $params['bgcolor1']; ?>;
color: <?php echo $params['fgcolor1']; ?>;
}
ul.menu li.current > a,
ul.menu li.current:hover > a
{
background-color: <?php echo $params['bgcolor2']; ?>;
color: <?php echo $params['licolor2']; ?>;
}
ul.nav > li > a:hover,
ul.nav > li > a:focus,
ul.nav-child > li > a:hover,
ul.nav-child > li > a:focus
{
background-color: <?php echo $params['bgcolor3']; ?>;
color: <?php echo $params['licolor3']; ?>;
}
#topmenu,
#topmenu > ul.menu {
background-color: <?php echo $params['topbgcolor1']; ?>;
color: <?php echo $params['topfgcolor1']; ?>;
}
#topmenu .nav-child > li.current
{
background-color: <?php echo $params['topbgcolor2']; ?>;
color: <?php echo $params['topfgcolor2']; ?>;
}
#topmenu .nav-child {
background-color: <?php echo $params['topbgcolor3']; ?>;
color: <?php echo $params['topfgcolor3']; ?>;
}
#topmenu .nav > li:hover,
#topmenu .nav > li:focus,
#topmenu .nav > li.active,
#topmenu .nav-child > li:hover,
#topmenu .nav-child > li:focus
{
background-color: <?php echo $params['topbgcolor2']; ?>;
color: <?php echo $params['topfgcolor2']; ?>;
}
#left-side-image
{
background-image: <?php echo $leftImageValue; ?>;
}
#right-side-image
{
background-image: <?php echo $rightImageValue; ?>;
}
.list-striped li:nth-child(odd),
.row-striped .row-fluid:nth-child(odd),
.table-striped > tbody > tr:nth-child(odd)
{
background-color: <?php echo $params['bgcolor2']; ?>;
color: <?php echo $params['fgcolor2']; ?>;
}
.row-striped .row-fluid:nth-child(odd) a,
.table-striped > tbody > tr:nth-child(odd) a
{
color: <?php echo $params['licolor2']; ?>;
}
.list-striped li:hover,
.row-striped .row-fluid:hover,
.table-striped > tbody > tr:hover
{
background-color: <?php echo $params['bgcolor3']; ?>;
color: <?php echo $params['fgcolor3']; ?>;
}
.row-striped .row-fluid:hover a,
.table-striped > tbody > tr:hover a
{
color: <?php echo $params['licolor3']; ?>;
}
.table-striped > thead > tr
{
background-color: <?php echo $params['bgcolor3']; ?>;
color: <?php echo $params['fgcolor3']; ?>;
}
table.alternating tr:nth-child(even) {
background-color: <?php echo $params['bgcolor2']; ?>;
color: <?php echo $params['fgcolor2']; ?>;
}
table.alternating tr:nth-child(even) a
{
color: <?php echo $params['licolor2']; ?>;
}
table.alternating tr:nth-child(1) {
background-color: <?php echo $params['bgcolor3']; ?>;
color: <?php echo $params['fgcolor3']; ?>;
}
table.alternating tr:nth-child(1) a {
color: <?php echo $params['licolor3']; ?>;
}
.readmore > .btn
{
color: <?php echo $params['fgcolor1'];?>;
background-color: <?php echo $params['bgcolor1']; ?>;
}
.readmore > .btn:hover
{
color: <?php echo $params['fgcolor3'];?>;
background-color: <?php echo $params['bgcolor3']; ?>;
}

View File

@ -0,0 +1,63 @@
@use "../abstract" as abstract;
#impressum {
flex: 0 0 auto;
text-align: right;
margin-top: 30px;
padding: 5px;
.nav {
margin-bottom: 0;
background-color: inherit;
display: inline-block;
> li {
display: inline-block;
}
}
a {
text-decoration: underline;
padding: 10px;
}
}
#footer {
flex: 0 0 auto;
background-color: black;
// color: white;
text-align: center;
padding: 5px;
font-size: x-small;
line-height: 100%;
color: gray;
> .customimpressum {
float: left;
}
> .customdatenschutz {
float: right;
}
a {
color: inherit;
text-decoration: underline;
&:hover,
&:focus {
color: black;
background-color: white;
text-decoration: underline;
}
}
}
#footline {
margin-top: 10px;
@include abstract.for-desktop {
flex: none;
}
}

View File

@ -0,0 +1,9 @@
@use "page-layout";
@use "topmenu";
@use "leftmenu";
@use "footer";
@use "mobile-menu";
@use "menu";
@use "pageheader";
@use "side-images";
@use "main-content";

View File

@ -0,0 +1,31 @@
@use "../abstract" as abstract;
#left-menu {
display: none;
@include abstract.for-desktop {
flex: 0 1 20%;
display: block;
margin: 15px 0 15px 5px;
> ul.menu {
padding: 10px;
li > a {
padding: 2px 5px;
}
}
}
.nav > li,
.nav-child > li {
padding: 5px 0;
border-top-style: solid;
border-width: 1px;
}
.nav > li:first-child,
.nav-child > li:first-child {
border-top-style: none;
}
}

View File

@ -0,0 +1,25 @@
@use "../abstract" as abstract;
#content {
flex: 1 0 auto;
@include abstract.for-desktop {
display: flex;
}
}
#main-column {
margin: 15px;
@include abstract.for-desktop {
flex: 1 1 60%;
display: flex;
flex-flow: column nowrap;
}
}
#main-content {
@include abstract.for-desktop {
flex: 1 1 auto;
}
}

45
slt/css/layout/_menu.scss Normal file
View File

@ -0,0 +1,45 @@
@use "../abstract" as abstract;
.nav {
font-size: inherit;
a {
color: inherit;
}
}
.nav-child {
font-size: small;
> li > a {
@include abstract.for-desktop {
display: block;
}
}
}
.nav,
.nav-child {
padding: 0;
> li {
display: block;
> .nav-child {
padding-left: 10px;
margin-left: 10px;
/* border-left: solid gray 1px; */
/* TODO */
}
}
}
ul.nav > li > a:hover,
ul.nav-child > li > a:hover {
/* background-color: inherit; */
/* FIXME */
text-decoration: none;
}

View File

@ -0,0 +1,77 @@
@use "../abstract" as abstract;
#mobile-menu,
#content {
margin: 0 15px;
}
#mobile-menu {
margin-top: 10px;
display: none;
&.visible {
display: block;
@include abstract.for-desktop {
display: none;
}
}
a {
font-size: initial;
margin-right: 0;
padding-right: 0;
}
li > a {
margin: 5px 0;
padding: 10px 5px;
display: block;
flex: 0;
}
.nav {
padding: 0;
border: none;
margin-left: 0;
}
li {
margin-left: 5px;
margin-right: 5px;
}
.nav-child > li {
margin: 0;
}
li > ul.nav {
margin-left: -5px;
margin-right: -5px;
}
li ul {
border: none;
}
> ul.menu {
background-color: initial;
color: initial;
margin-bottom: initial;
}
}
#mobile-menu-switch {
flex: 0 0 auto;
text-align: right;
@include abstract.for-desktop {
display: none;
}
}
#btn-mobile-menu {
padding: 10px 30px 0 0;
width: 40px;
box-sizing: initial;
}

View File

@ -0,0 +1,49 @@
@use "../abstract" as abstract;
#page-div {
width: 100%;
@include abstract.for-desktop {
display: flex;
flex-flow: row;
// width: 100%;
justify-content: space-around;
}
}
#page {
/* box-shadow: 30vw 0px 5vw -10vw green inset; */
flex: 1 0 auto;
display: flex;
flex-direction: column;
width: 100%;
min-height: 100vh;
@include abstract.for-desktop {
flex: 0 0 auto;
width: 1000px;
background-color: inherit;
}
}
#page,
#page-div {
@include abstract.for-desktop {
min-height: calc(100vh - 40px);
}
}
#page-bg {
display: none;
@include abstract.for-desktop {
display: block;
position: fixed;
width: 1000px;
height: calc(100% - 40px);
bottom: 0;
z-index: -9;
left: calc((100% - 1000px) / 2);
}
}

View File

@ -0,0 +1,17 @@
@use "../abstract" as abstract;
#header {
flex: 0 0 auto;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
@include abstract.for-desktop {
justify-content: space-around;
}
> div {
margin: 20px;
align-items: center;
}
}

View File

@ -0,0 +1,23 @@
@use "../abstract" as abstract;
@include abstract.for-desktop {
#left-side-image,
#right-side-image {
position: fixed;
height: 100vh;
width: calc((100% - 980px) / 2);
z-index: -10;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
opacity: 0.5;
}
#left-side-image {
left: 0;
}
#right-side-image {
right: 0;
}
}

View File

@ -0,0 +1,183 @@
@use "../abstract/" as abstract;
#topmenu {
display: none;
font-weight: bold;
text-align: center;
@include abstract.for-desktop {
position: fixed;
display: flex;
width: 100vw;
z-index: 5000;
font-weight: bold;
text-align: center;
a {
color: inherit;
}
}
a {
color: inherit;
}
> .topmenu-sep {
display: inline-block;
flex: 1 1 auto;
}
.nav > li,
.nav-child > li {
padding: 0;
border-style: none;
}
.nav {
flex: 0 0 auto;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
position: relative;
align-items: center;
@include abstract.for-desktop {
padding: 0 10px;
margin: 0;
height: 40px;
width: 980px;
}
> li {
display: inline-block;
text-align: left;
@include abstract.for-desktop {
text-align: left;
}
> a {
position: relative;
font-size: large;
@include abstract.for-desktop {
font-size: large;
padding: 10px;
z-index: 3001;
}
}
& > a,
&:hover > a {
background-color: inherit;
}
> .nav-child {
position: absolute;
display: none;
@include abstract.for-desktop {
z-index: 3000;
margin: 0 20px 10px 0;
border: none;
padding: 0;
}
> li {
@include abstract.for-desktop {
padding: 0 5px;
}
> a {
display: block;
@include abstract.for-desktop {
padding: 10px 5px 10px 4px;
// border-left-color: transparent;
// border-left-style: solid;
// border-left-width: 6px;
border-left: 6px solid transparent;
}
}
&:hover > a {
text-decoration: none;
}
}
}
&:hover > .nav-child {
display: block;
@include abstract.for-desktop {
box-shadow: 3px 5px 5px 2px rgb(0 0 0 / 50%);
}
}
}
}
@include abstract.for-desktop {
li > a,
li:hover > a,
li:focus > a,
li:active > a {
background-color: inherit;
color: inherit;
}
.nav-child > li:hover > a:hover,
.nav-child > li:focus > a:hover,
.nav-child > li:hover > a:focus {
text-decoration: none;
}
}
// Special colors for topics
> ul.nav .nav-child a.lehre {
border-left-color: abstract.$color-lehre;
}
> ul.nav .nav-child a.breitensport {
border-left-color: abstract.$color-breitensport;
}
> ul.nav .nav-child a.jugend {
border-left-color: abstract.$color-jugend;
}
> ul.nav .nav-child a.jmd {
border-left-color: abstract.$color-jmd;
}
> ul.nav .nav-child a.fachverbaende {
border-left-color: abstract.$color-fachverbaende;
}
> ul.nav .nav-child a.sport {
border-left-color: abstract.$color-sport;
}
}
#topmenu-div {
@include abstract.for-desktop {
width: 100vw;
height: 40px;
}
}
a.facebook {
img {
display: none;
@include abstract.for-desktop {
display: inline;
}
}
> span.image-title {
@include abstract.for-desktop {
display: none;
}
}
}

View File

@ -1,7 +0,0 @@
@import "mobile.css";
@import "desktop.css" ( min-width: 1000px );
@import "desktop-narrow.css" ( min-width: 1000px) and ( max-width: 1200px );
@import "visual.css";

View File

@ -1,274 +0,0 @@
body {
margin: 0px;
min-height: 100.1vh;
display: flex;
flex-direction: column;
align-items: center;
/* padding: 0px 20px 10px 20px;*/
padding: 0px;
}
#page-div
{
width: 100%;
}
#page {
/*box-shadow: 30vw 0px 5vw -10vw green inset;*/
flex: 1 0 auto;
display: flex;
flex-direction: column;
width: 100%;
min-height: 100vh;
}
#page-bg
{
display: none;
}
/*
* Menu configuration
*/
.nav,
.nav-child
{
padding: 0px;
}
.nav > li,
.nav-child > li
{
display: block;
}
.nav
{
font-size: inherit;
}
.nav-child
{
font-size: small;
}
.nav > li > .nav-child, .nav-child > li > .nav-child {
padding-left: 10px;
margin-left: 10px;
/* border-left: solid gray 1px;*/ /*TODO*/
}
/*
* Topmenu positioning and styling
*/
#topmenu {
display: none;
}
/*
* Header line positioning
*/
#header {
flex: 0 0 auto;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
#header > div {
margin: 20px;
align-items: center;
}
#slideshow {
flex: 1;
}
#slideshow {
display: none;
}
/*
* Content positioning
*/
#content {
flex: 1 0 auto;
}
#left_menu {
display: none;
}
#main_column {
margin: 15px;
}
#right_column {
display: none;
}
#footline {
margin-top: 10px;
}
/*
* Footer positioning
*/
#impressum
{
flex: 0 0 auto;
text-align: right;
margin-top: 30px;
padding: 5px;
}
#impressum .nav
{
margin-bottom: 0px;
background-color: inherit;
display: inline-block;
}
#impressum .nav > li
{
display: inline-block;
}
#impressum a
{
text-decoration: underline;
padding: 10px;
}
#footer {
flex: 0 0 auto;
background-color: black;
color: white;
text-align: center;
padding: 5px;
}
#footer > .customimpressum {
float: left;
}
#footer > .customdatenschutz {
float: right;
}
#footer a
{
color: inherit;
text-decoration: underline;
}
#footer a:hover,
#footer a:focus
{
color: black;
background-color: white;
text-decoration: underline;
}
/*
* Mobile menu positioning
*/
#mobile_menu, #content {
margin: 0px 15px 0px 15px;
}
#mobile_menu {
margin-top: 10px;
display: none;
}
#mobile_menu.visible
{
display: block;
}
#mobile_menu li > a {
margin: 5px 0px 5px 0px;
padding: 10px 5px;
display: block;
flex: 0;
}
#mobile_menu .nav {
padding: 0px;
border: none;
margin-left: 0px;
}
#mobile_menu li {
margin-left: 5px;
margin-right: 5px;
}
#mobile_menu .nav-child > li {
margin: 0px;
}
#mobile_menu li > ul.nav {
margin-left: -5px;
margin-right: -5px;
}
#mobile_menu li ul {
border: none;
}
#mobile_menu a {
font-size: initial;
margin-right: 0px;
padding-right: 0px;
}
#mobile_menu > ul.menu {
background-color: initial;
color: initial;
margin-bottom: initial;
}
#mobile_menu_switch
{
flex: 0 0 auto;
text-align: right;
}
#btn_mobile_menu
{
padding: 10px 30px 0px 0px;
width: 40px;
box-sizing: initial;
}
a.facebook img
{
display: none;
}
.article-info
{
font-size: smaller;
}
/*
* Debug
*/
/*#right_column,#left_menu,#main_content,#footline {
background-color: rgba(0,0,0,0.1);
}*/

12
slt/css/style.scss Normal file
View File

@ -0,0 +1,12 @@
@use "abstract";
@use "core";
@use "layout";
@use "components";
/*
* Debug
*/
/* #right_column,#left_menu,#main_content,#footline {
background-color: rgba(0,0,0,0.1);
} */

View File

@ -1,224 +0,0 @@
body {
font-size: 12pt;
font-family: Arial, Verdana, Helvetica, Geneva, sans-serif;
line-height: 175%;
}
a {
text-decoration: none;
}
p {
text-align: justify;
hyphens: auto;
}
h3
{
font-size: 133% /*16pt*/;
}
h2
{
font-size: 158% /*19pt*/;
}
h1
{
font-size: 183% /*22pt*/;
}
h1,h2,h3,h4
{
line-height: 150%;
}
.pull-right > img,
.pull-left > img,
.pull-right > a > img,
.pull-left > a > img
{
margin: 10px;
}
.centered {
text-align: center;
}
.ragged-left {
text-align: left;
}
/*h2 > a {
color: black;
}*/
li.row-fluid {
display: block;
}
.article-info {
clear: both;
}
.page-header
{
padding-bottom: 0px;
}
ul.nav > li > a:hover,
ul.nav-child > li > a:hover
{
/* background-color: inherit;*/ /* FIXME */
text-decoration: none;
}
.nav a
{
color: inherit;
}
#topmenu a {
color: inherit;
}
#topmenu {
font-weight: bold;
text-align: center;
}
#topmenu > .nav > li {
text-align: left;
}
#topmenu .nav > li > a {
font-size: large;
}
#topmenu .nav > li > a,
#topmenu .nav > li:hover > a {
background-color: inherit;
}
#topmenu > .nav > li > .nav-child > li:hover > a:hover {
text-decoration: none;
}
#topmenu .nav > li,
#topmenu .nav-child > li
{
padding: 0px;
border-style: none;
}
#left_side, #right_side
{
background-repeat: no-repeat;
background-size: cover;
}
#left_menu .nav > li,
#left_menu .nav-child > li
{
padding: 5px 0px;
border-top-style: solid;
border-width: 1px;
}
#left_menu .nav > li:first-child,
#left_menu .nav-child > li:first-child
{
border-top-style: none;
}
.row-striped .row-fluid:nth-child(n),
.list-striped li:nth-child(n),
.table-striped tbody > tr:nth-child(n) > td
{
background-color: inherit;
}
.well
{
background-color: inherit;
}
#footer
{
font-size: x-small;
line-height: 100%;
color: gray;
}
/* Special colors */
/* Lehre */
#topmenu > ul.nav .nav-child a.lehre
{
border-left-color: #d9c254;
}
/* Breitensport */
#topmenu > ul.nav .nav-child a.breitensport
{
border-left-color: #a6d400;
}
/* Jugend */
#topmenu > ul.nav .nav-child a.jugend
{
border-left-color: #0044bb;
}
/* JMD */
#topmenu > ul.nav .nav-child a.jmd
{
border-left-color: #e95d00;
}
/* Fachverbaende */
#topmenu > ul.nav .nav-child a.fachverbaende
{
border-left-color: #eec008;
}
/* Std/Lat */
#topmenu > ul.nav .nav-child a.sport
{
border-left-color: #bc0023;
}
/* Visual enhancements for the single entry menu */
ul#current_page_menu.menu
{
background-color: transparent;
padding-top: 0px;
padding-bottom: 0px;
}
ul#current_page_menu.menu:hover
{
box-shadow: unset;
}
#current_page_menu > li
{
border-style: none;
display: none;
}
#current_page_menu > li.active
{
display: block;
border-style: none;
}
#current_page_menu > li.active > a
{
background-color: transparent;
font-weight: bold;
}

View File

@ -2,8 +2,11 @@
// No direct access. // No direct access.
defined('_JEXEC') or die; defined('_JEXEC') or die;
use Joomla\CMS\Uri\Uri;
JHTML::_('behavior.framework', true); JHTML::_('behavior.framework', true);
$app = JFactory::getApplication(); $app = JFactory::getApplication();
$doc = JFactory::getDocument();
// Add JavaScript Frameworks // Add JavaScript Frameworks
JHtml::_('bootstrap.framework'); JHtml::_('bootstrap.framework');
@ -21,10 +24,10 @@ JHtml::_('jquery.framework');
// Add Stylesheets // Add Stylesheets
JHtml::_('stylesheet', 'templates/system/css/system.css', array('version' => 'auto', 'relative' => false)); JHtml::_('stylesheet', 'templates/system/css/system.css', array('version' => 'auto', 'relative' => false));
// JHtml::_('stylesheet', 'media/jui/css/icomoon.css', array('version' => 'auto', 'relative' => false)); // JHtml::_('stylesheet', 'media/jui/css/icomoon.css', array('version' => 'auto', 'relative' => false));
JHtml::_('stylesheet', 'main.css', array('version' => 'auto', 'relative' => true)); JHtml::_('stylesheet', 'style.css', array('version' => 'auto', 'relative' => true));
$doc = JFactory::getDocument();
$doc->addStyleSheet($this->baseurl.'/media/jui/css/icomoon.css'); $doc->addStyleSheet($this->baseurl.'/media/jui/css/icomoon.css');
$doc->addStyleSheet($this->baseurl.'/templates/slt/css/dynamic-styles.css.php?Itemid=' . $app->input->getInt('Itemid'));
// Add Javascript for mobile menu // Add Javascript for mobile menu
JHtml::_('script', 'mobile.js', array('version' => 'auto', 'relative' => true)); JHtml::_('script', 'mobile.js', array('version' => 'auto', 'relative' => true));
@ -35,11 +38,6 @@ JHtml::_('stylesheet', 'user.css', array('version' => 'auto', 'relative' => true
// Check for a custom js file // Check for a custom js file
JHtml::_('script', 'user.js', array('version' => 'auto', 'relative' => true)); JHtml::_('script', 'user.js', array('version' => 'auto', 'relative' => true));
$params = $this->params;
$leftImageValue = (empty($this->params{'imgleft'}) ? "none" : "url(\"" . $this->baseurl . "/" . $this->params{'imgleft'} . "\")") ;
$rightImageValue = (empty($this->params{'imgright'}) ? "none" : "url(\"" . $this->baseurl . "/" . $this->params{'imgright'} . "\")") ;
?> ?>
<?php echo '<!DOCTYPE html>'; ?> <?php echo '<!DOCTYPE html>'; ?>
@ -50,172 +48,6 @@ $rightImageValue = (empty($this->params{'imgright'}) ? "none" : "url(\"" . $this
<jdoc:include type="head" /> <jdoc:include type="head" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
<?php
if($this->params{'titlepage'} === '1')
{
?>
#right_column, #left_menu
{
display: none;
}
<?php
}
?>
body
{
background-color: <?php echo $this->params{'bgcolorside'}; ?>;
}
a, a:hover, a:active, a:visited
{
color: <?php echo $params{'mainlicolor'}; ?>;
}
#page-bg
{
background-image: linear-gradient(to bottom, <?php echo $params{'mainbgcolortop'} . ',' . $params{'mainbgcolorbot'}; ?>);
color: <?php echo $params{'mainfgcolor'}; ?>;
}
#mobile_menu li > a {
background-color: <?php echo $params{'bgcolor2'}; ?>;
color: <?php echo $params{'licolor2'}; ?>;
}
#mobile_menu li.current > a {
background-color: <?php echo $params{'bgcolor3'}; ?>;
color: <?php echo $params{'licolor3'}; ?>;
}
ul.menu {
background-color: <?php echo $params{'bgcolor1'}; ?>;
color: <?php echo $params{'fgcolor1'}; ?>;
}
#mobile_menu {
background-color: <?php echo $params{'bgcolor1'}; ?>;
color: <?php echo $params{'fgcolor1'}; ?>;
}
ul.menu li.current > a,
ul.menu li.current:hover > a
{
background-color: <?php echo $params{'bgcolor2'}; ?>;
color: <?php echo $params{'licolor2'}; ?>;
}
ul.nav > li > a:hover,
ul.nav > li > a:focus,
ul.nav-child > li > a:hover,
ul.nav-child > li > a:focus
{
background-color: <?php echo $params{'bgcolor3'}; ?>;
color: <?php echo $params{'licolor3'}; ?>;
}
#topmenu,
#topmenu > ul.menu {
background-color: <?php echo $params{'topbgcolor1'}; ?>;
color: <?php echo $params{'topfgcolor1'}; ?>;
}
#topmenu .nav-child > li.current
{
background-color: <?php echo $params{'topbgcolor2'}; ?>;
color: <?php echo $params{'topfgcolor2'}; ?>;
}
#topmenu .nav-child {
background-color: <?php echo $params{'topbgcolor3'}; ?>;
color: <?php echo $params{'topfgcolor3'}; ?>;
}
#topmenu .nav > li:hover,
#topmenu .nav > li:focus,
#topmenu .nav > li.active,
#topmenu .nav-child > li:hover,
#topmenu .nav-child > li:focus
{
background-color: <?php echo $params{'topbgcolor2'}; ?>;
color: <?php echo $params{'topfgcolor2'}; ?>;
}
#left_side-image
{
background-image: <?php echo $leftImageValue; ?>;
}
#right_side-image
{
background-image: <?php echo $rightImageValue; ?>;
}
.list-striped li:nth-child(odd),
.row-striped .row-fluid:nth-child(odd),
.table-striped > tbody > tr:nth-child(odd)
{
background-color: <?php echo $params{'bgcolor2'}; ?>;
color: <?php echo $params{'fgcolor2'}; ?>;
}
.row-striped .row-fluid:nth-child(odd) a,
.table-striped > tbody > tr:nth-child(odd) a
{
color: <?php echo $params{'licolor2'}; ?>;
}
.list-striped li:hover,
.row-striped .row-fluid:hover,
.table-striped > tbody > tr:hover
{
background-color: <?php echo $params{'bgcolor3'}; ?>;
color: <?php echo $params{'fgcolor3'}; ?>;
}
.row-striped .row-fluid:hover a,
.table-striped > tbody > tr:hover a
{
color: <?php echo $params{'licolor3'}; ?>;
}
.table-striped > thead > tr
{
background-color: <?php echo $params{'bgcolor3'}; ?>;
color: <?php echo $params{'fgcolor3'}; ?>;
}
table.alternating tr:nth-child(even) {
background-color: <?php echo $params{'bgcolor2'}; ?>;
color: <?php echo $params{'fgcolor2'}; ?>;
}
table.alternating tr:nth-child(even) a
{
color: <?php echo $params{'licolor2'}; ?>;
}
table.alternating tr:nth-child(1) {
background-color: <?php echo $params{'bgcolor3'}; ?>;
color: <?php echo $params{'fgcolor3'}; ?>;
}
table.alternating tr:nth-child(1) a {
color: <?php echo $params{'licolor3'}; ?>;
}
.readmore > .btn
{
color: <?php echo $params{'fgcolor1'};?>;
background-color: <?php echo $params{'bgcolor1'}; ?>;
}
.readmore > .btn:hover
{
color: <?php echo $params{'fgcolor3'};?>;
background-color: <?php echo $params{'bgcolor3'}; ?>;
}
</style>
<!--
<?php
print_r($this->params);
?>
-->
</head> </head>
<body> <body>
@ -228,7 +60,7 @@ print_r($this->params);
</div> <!-- #topmenu-div --> </div> <!-- #topmenu-div -->
<div id='page-div'> <div id='page-div'>
<div id='left_side-image'></div> <div id='left-side-image'></div>
<div id='page-bg'></div> <div id='page-bg'></div>
<div id='page'> <div id='page'>
@ -238,26 +70,23 @@ print_r($this->params);
</div> <!-- #slideshow --> </div> <!-- #slideshow -->
</div> <!-- #header --> </div> <!-- #header -->
<div id='mobile_menu_switch'><?php echo JHtml::_('image', 'mobile_menu.svg', 'Menu', array('width' => '40px', 'id' => 'btn_mobile_menu'), true);?></div> <div id='mobile-menu-switch'><?php echo JHtml::_('image', 'mobile_menu.svg', 'Menu', array('width' => '40px', 'id' => 'btn-mobile-menu'), true);?></div>
<div id='mobile_menu'> <div id='mobile-menu'>
<jdoc:include type="modules" style="none" name="mobile_menu" /> <jdoc:include type="modules" style="none" name="mobile_menu" />
</div> </div>
<div id='content'> <div id='content'>
<div id='left_menu'> <div id='left-menu'>
<jdoc:include type="modules" style="none" name="left_menu" /> <jdoc:include type="modules" style="none" name="left_menu" />
</div> <!-- #left_menu --> </div> <!-- #left-menu -->
<div id='main_column'> <div id='main-column'>
<div id='main_content'> <div id='main-content'>
<jdoc:include type="component" style="none" /> <jdoc:include type="component" style="none" />
</div> </div>
<div id='footline'> <div id='footline'>
<jdoc:include type="modules" style="none" name="footline" /> <jdoc:include type="modules" style="none" name="footline" />
</div> <!-- #footline --> </div> <!-- #footline -->
</div><!-- main_column --> </div><!-- main-column -->
<!-- <div id='right_column'>
<jdoc:include type="modules" style="none" name="right_column" />
</div>--><!-- #right_column -->
</div> <!-- #content --> </div> <!-- #content -->
<div id='impressum'> <div id='impressum'>
@ -268,7 +97,7 @@ print_r($this->params);
</div> <!-- #footer --> </div> <!-- #footer -->
</div> <!-- #page --> </div> <!-- #page -->
<div id='right_side-image'></div> <div id='right-side-image'></div>
</div> <!-- #page-div --> </div> <!-- #page-div -->
</body> </body>

View File

@ -1,13 +1,13 @@
jQuery(function($){ jQuery(function($){
$('#btn_mobile_menu').click(function(){ $('#btn-mobile-menu').click(function(){
$('#mobile_menu').toggle({ $('#mobile-menu').toggle({
duration: '400', duration: '400',
easing: 'linear', easing: 'linear',
complete: function(){ complete: function(){
$('#mobile_menu').toggleClass('visible'); $('#mobile-menu').toggleClass('visible');
$('#mobile_menu').css('display',''); $('#mobile-menu').css('display','');
} }
}); });

3613
slt/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

20
slt/package.json Normal file
View File

@ -0,0 +1,20 @@
{
"name": "slt",
"version": "0.0.9",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"stylelint": "npx stylelint css/*.scss css/**/*.scss --cache",
"stylelint-fix": "npx stylelint css/**.scss css/**/*.scss --fix",
"sass": "npx sass css/style.scss:css/style.css -s compressed --no-source-map",
"sass-dev": "npx sass css/style.scss:css/style.css",
"sass-watch": "npx sass css/style.scss:css/style.css --watch"
},
"author": "Christian Wolf",
"devDependencies": {
"sass": "^1.44.0",
"stylelint": "^14.1.0",
"stylelint-config-standard-scss": "^3.0.0",
"stylelint-order": "^5.0.0",
"stylelint-scss": "^4.0.0"
}
}