WIP work on styling
This commit is contained in:
parent
42e325a44c
commit
f357b96f08
@ -8,7 +8,7 @@
|
||||
"sass:watch": "sass --watch scss/main.scss:src/css/main.css",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "",
|
||||
"author": "Christian Wolf",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"sass": "^1.85.1"
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
$green: #69a840;
|
||||
$black: #000000;
|
||||
$light-gray: #d3d3d3;
|
||||
|
||||
$background-color: $light-gray;
|
||||
|
||||
49
template/scss/_header.scss
Normal file
49
template/scss/_header.scss
Normal file
@ -0,0 +1,49 @@
|
||||
@use './colors' as *;
|
||||
@use './responsive' as r;
|
||||
@use './sizes';
|
||||
|
||||
#header {
|
||||
.text {
|
||||
background-color: $green;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
padding: 5px 0px;
|
||||
|
||||
.logo-link {
|
||||
max-width: 85%;
|
||||
|
||||
@include r.normal {
|
||||
max-height: 100px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.track {
|
||||
height: 50px;
|
||||
background-image: url('../images/track.png');
|
||||
background-repeat: repeat-x;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.black-background {
|
||||
display: none;
|
||||
|
||||
@include r.normal {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: sizes.$left-menu-width;
|
||||
height: 100%;
|
||||
background-color: $black;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
0
template/scss/_menu.scss
Normal file
0
template/scss/_menu.scss
Normal file
39
template/scss/_positions.scss
Normal file
39
template/scss/_positions.scss
Normal file
@ -0,0 +1,39 @@
|
||||
@use './colors' as *;
|
||||
@use './responsive' as r;
|
||||
@use './sizes';
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#main-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 0 auto;
|
||||
gap: 10px;
|
||||
|
||||
@include r.normal {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
#main {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
#menu {
|
||||
background-color: $black;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
|
||||
@include r.normal {
|
||||
flex: 0 0 sizes.$left-menu-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#footer {
|
||||
padding: 2px 0;
|
||||
color: $light-gray;
|
||||
background-color: black;
|
||||
}
|
||||
1
template/scss/_sizes.scss
Normal file
1
template/scss/_sizes.scss
Normal file
@ -0,0 +1 @@
|
||||
$left-menu-width: 20%;
|
||||
@ -1,6 +1,9 @@
|
||||
@use './fonts';
|
||||
@use './colors';
|
||||
@use './responsive' as r;
|
||||
@use './header';
|
||||
@use './positions';
|
||||
@use './menu';
|
||||
|
||||
$color-green-1: rgb(184,229,162);
|
||||
$color-green-2: rgb(162,221,131);
|
||||
@ -24,16 +27,17 @@ $width-wide: 1600px;
|
||||
$indent-menu-left: 25px;
|
||||
|
||||
body {
|
||||
padding: 5px;
|
||||
padding: 0px;
|
||||
margin: 0px auto;
|
||||
font-size: 12px;
|
||||
max-width: 1100px;
|
||||
// max-width: 1100px;
|
||||
min-height: 100.1vh;
|
||||
background-color: colors.$background-color;
|
||||
|
||||
font-family: 'Noto Sans', sans-serif;
|
||||
|
||||
@include r.narrow {
|
||||
padding: 20px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@include r.normal {
|
||||
@ -41,7 +45,7 @@ body {
|
||||
}
|
||||
|
||||
@include r.wide {
|
||||
max-width: 70%;
|
||||
// max-width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
BIN
template/src/images/logo.png
Normal file
BIN
template/src/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
BIN
template/src/images/track.png
Normal file
BIN
template/src/images/track.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 363 KiB |
@ -6,8 +6,8 @@ JHtml::_('stylesheet', 'templates/system/css/system.css', array('version' => 'au
|
||||
JHtml::_('stylesheet', 'templates/system/css/general.css', array('version' => 'auto', 'relative' => false));
|
||||
JHtml::_('stylesheet', 'main.css', array('version' => 'auto', 'relative' => true));
|
||||
|
||||
$doc = JFactory::getDocument();
|
||||
$doc->addStyleSheet($this->baseurl.'/media/jui/css/icomoon.css');
|
||||
// $doc = JFactory::getDocument();
|
||||
// $doc->addStyleSheet($this->baseurl.'/media/jui/css/icomoon.css');
|
||||
|
||||
// Check for a custom CSS file
|
||||
JHtml::_('stylesheet', 'user.css', array('version' => 'auto', 'relative' => true));
|
||||
@ -25,6 +25,31 @@ JHtml::_('script', 'user.js', array('version' => 'auto', 'relative' => true));
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="header">
|
||||
<div class="text">
|
||||
<a class="logo-link" href="<?php echo JURI::base(); ?>">
|
||||
<img src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/logo.png" alt="Logo">
|
||||
</a>
|
||||
</div>
|
||||
<div class="track"></div>
|
||||
<div class="black-background"></div>
|
||||
</div>
|
||||
|
||||
<div id="main-row">
|
||||
<div id="main">
|
||||
<jdoc:include type="component" />
|
||||
</div>
|
||||
|
||||
<div id="menu">
|
||||
<jdoc:include type="modules" name="menu" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer">
|
||||
<jdoc:include type="modules" name="footer" />
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<div id='header'>
|
||||
<div class='image_row'>
|
||||
<div class='siderow'>
|
||||
@ -67,7 +92,7 @@ JHtml::_('script', 'user.js', array('version' => 'auto', 'relative' => true));
|
||||
<jdoc:include type="modules" name="copyright" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
-->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user