slt/template
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Restructured styles to be compatible to stylelint requirements

Browse Source
This commit is contained in:
Christian Wolf 2021-12-03 17:44:21 +01:00
parent 33f789994a
commit 3a6bbf59d5
10 changed files with 241 additions and 218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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>

188
slt/css/dynamic-styles.css.php Normal file
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']; ?>;
}

1
slt/css/layout/_index.scss
View File

@ -1,7 +1,6 @@
@use "page-layout"; @use "page-layout";
@use "topmenu"; @use "topmenu";
@use "leftmenu"; @use "leftmenu";
@use "rightcolumn";
@use "footer"; @use "footer";
@use "mobile-menu"; @use "mobile-menu";
@use "menu"; @use "menu";

2
slt/css/layout/_leftmenu.scss
View File

@ -1,6 +1,6 @@
@use "../abstract" as abstract; @use "../abstract" as abstract;
#left_menu { #left-menu {
display: none; display: none;
@include abstract.for-desktop { @include abstract.for-desktop {

4
slt/css/layout/_main-content.scss
View File

@ -8,7 +8,7 @@
} }
} }
#main_column { #main-column {
margin: 15px; margin: 15px;
@include abstract.for-desktop { @include abstract.for-desktop {
@ -18,7 +18,7 @@
} }
} }
#main_content { #main-content {
@include abstract.for-desktop { @include abstract.for-desktop {
flex: 1 1 auto; flex: 1 1 auto;
} }

8
slt/css/layout/_mobile-menu.scss
View File

@ -1,11 +1,11 @@
@use "../abstract" as abstract; @use "../abstract" as abstract;
#mobile_menu, #mobile-menu,
#content { #content {
margin: 0 15px; margin: 0 15px;
} }
#mobile_menu { #mobile-menu {
margin-top: 10px; margin-top: 10px;
display: none; display: none;
@ -61,7 +61,7 @@
} }
} }
#mobile_menu_switch { #mobile-menu-switch {
flex: 0 0 auto; flex: 0 0 auto;
text-align: right; text-align: right;
@ -70,7 +70,7 @@
} }
} }
#btn_mobile_menu { #btn-mobile-menu {
padding: 10px 30px 0 0; padding: 10px 30px 0 0;
width: 40px; width: 40px;
box-sizing: initial; box-sizing: initial;

11
slt/css/layout/_rightcolumn.scss
View File

@ -1,11 +0,0 @@
@use "../abstract" as abstract;
#right_column {
display: none;
@include abstract.for-desktop {
flex: 1 1 15%;
display: block;
margin: 15px 5px 15px 0;
}
}

14
slt/css/layout/_side-images.scss
View File

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

199
slt/index.php
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>

8
slt/js/mobile.js
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','');
} }
}); });