default theme clean up
the default theme included with fipamo was a bit janky, so that's been cleaned to bring it more inline with current accessiblility standards, an updated mobile friendly menu, updated the logo and plugged in the fresh colors. the layout is still a bit boring but the main purpose of the default is to show how templating works, so it needs to be kept as simple as possible but it still has some room for making it pop a bit more.
This commit is contained in:
parent
69eb9905a2
commit
a92e124957
16 changed files with 227 additions and 168 deletions
|
|
@ -40,7 +40,7 @@ class ThemeController extends Controller
|
||||||
$view == 'index' ?
|
$view == 'index' ?
|
||||||
$template = $currentTheme . '.index' :
|
$template = $currentTheme . '.index' :
|
||||||
$template = $currentTheme . '.page';
|
$template = $currentTheme . '.page';
|
||||||
$page = $this->pages->getById('532E2250-F8CB-4E87-9782-8AFBEE88DD5E');
|
$page = $this->pages->getById('F4429D34-25E7-4CA9-9B0A-742810277505');
|
||||||
$pageData = $this->sort->page($page);
|
$pageData = $this->sort->page($page);
|
||||||
break;
|
break;
|
||||||
case "tags":
|
case "tags":
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,11 @@
|
||||||
/* BASE COLORS */
|
/* BASE COLORS */
|
||||||
:root {
|
:root {
|
||||||
|
/* BASE COLORS */
|
||||||
--primary: #1d3040;
|
--primary: #1d3040;
|
||||||
--secondary: #fc6399;
|
--secondary: #f3ebd2;
|
||||||
--primary-highlight: #f5ab35;
|
--primary-highlight: #f5ab35;
|
||||||
--secondary-highlight: #63fcc6ff;
|
--secondary-highlight: #cf436b;
|
||||||
--white: #ebe5d4;
|
--white: #efebe3;
|
||||||
|
--grey: #abb7b7;
|
||||||
--black: #32302f;
|
--black: #32302f;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@ html {
|
||||||
}
|
}
|
||||||
|
|
||||||
html body {
|
html body {
|
||||||
background: var(--white);
|
background: var(--secondary);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
perspective: 1px;
|
perspective: 1px;
|
||||||
|
|
@ -24,7 +24,6 @@ html body {
|
||||||
a {
|
a {
|
||||||
color: var(--primary);
|
color: var(--primary);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
border-bottom: 1px solid var(--secondary);
|
|
||||||
transition: all 0.2s linear;
|
transition: all 0.2s linear;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -47,24 +46,51 @@ code {
|
||||||
padding: 3px;
|
padding: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
img.logo-medium {
|
||||||
|
width: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu-open,
|
||||||
|
#menu-close {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
/* HEADER */
|
/* HEADER */
|
||||||
|
|
||||||
header {
|
header {
|
||||||
background: var(--primary);
|
|
||||||
height: 90%;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-top: var(--white) 3px solid;
|
border-top: var(--secondary) 3px solid;
|
||||||
|
position: relative;
|
||||||
|
z-index: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* HEADER -> Slideshow */
|
div#menu {
|
||||||
|
position: fixed;
|
||||||
header > div[role="slide-show"] {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 90%;
|
height: 100%;
|
||||||
position: absolute;
|
background: var(--secondary-highlight);
|
||||||
|
z-index: 500;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
header > div[role="slide-show"] > div[role="slide"] {
|
div.menu > div.links {
|
||||||
|
font-size: 2em;
|
||||||
|
line-height: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Slideshow */
|
||||||
|
|
||||||
|
div.slide-show {
|
||||||
|
width: 100%;
|
||||||
|
height: 90%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.slide-show > div.slide {
|
||||||
transition: all 0.7s linear;
|
transition: all 0.7s linear;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -79,7 +105,7 @@ header > div[role="slide-show"] > div[role="slide"] {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
header > div[role="slide-show"] > div[role="slide"] > video {
|
div.slide-show > div.slide > video {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
|
|
@ -102,13 +128,8 @@ nav img {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav div[role="nav-right"] {
|
nav > div.right {
|
||||||
margin-left: auto;
|
text-align: right;
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a[role="home-link"] {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
nav a[role="menu-link"] {
|
nav a[role="menu-link"] {
|
||||||
|
|
@ -124,19 +145,19 @@ nav a[role="menu-link"] {
|
||||||
/* MAIN CONTENT */
|
/* MAIN CONTENT */
|
||||||
main {
|
main {
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
background: var(--white);
|
background: var(--secondary);
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
font-weight: lighter;
|
font-weight: lighter;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
color: var(--black);
|
color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
main > article {
|
main > article {
|
||||||
position: relative;
|
position: relative;
|
||||||
background: var(--white);
|
background: var(--secondary);
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
color: var(--black);
|
color: var(--primary);
|
||||||
padding: 0 15%;
|
padding: 0 10%;
|
||||||
}
|
}
|
||||||
|
|
||||||
main > article > div[role="archives"] {
|
main > article > div[role="archives"] {
|
||||||
|
|
@ -153,27 +174,31 @@ main article div[role="archives"] h3 {
|
||||||
}
|
}
|
||||||
|
|
||||||
main > section {
|
main > section {
|
||||||
background: var(--primary);
|
background: var(--secondary-highlight);
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 50% 50%;
|
grid-template-columns: 50% 50%;
|
||||||
padding: 0 15%;
|
padding: 0 10%;
|
||||||
max-width: 1000px;
|
max-width: 1000px;
|
||||||
color: var(--secondary);
|
color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
main > section > div {
|
main > section > div {
|
||||||
padding-bottom: 20px;
|
padding-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
main > section[role="page-meta"] > div a {
|
main > sectio.page-meta > div a {
|
||||||
color: var(--white);
|
color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* FOOTER */
|
/* FOOTER */
|
||||||
footer {
|
footer {
|
||||||
background: var(--secondary-highlight);
|
background: var(--primary);
|
||||||
padding: 30px 15%;
|
padding: 30px 10%;
|
||||||
color: var(--primary);
|
color: var(--secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a {
|
||||||
|
color: var(--primary-highlight);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* RESPONSIVE */
|
/* RESPONSIVE */
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
h1,
|
h1,
|
||||||
h2,
|
h2,
|
||||||
h3 {
|
h3 {
|
||||||
color: var(--white);
|
color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<!-- Generated by Pixelmator Pro 3.3.8 -->
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path id="Path" fill="none" stroke="none" d="M 0 0 L 24 0 L 24 24 L 0 24 Z"/>
|
||||||
|
<path id="path1" fill="none" stroke="#f3ebd2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 18 6 L 6 18"/>
|
||||||
|
<path id="path2" fill="none" stroke="#f3ebd2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 6 6 L 18 18"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 523 B |
|
|
@ -0,0 +1,33 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<!-- Generated by Pixelmator Pro 3.5.7 -->
|
||||||
|
<svg width="462" height="462" viewBox="0 0 462 462" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g id="Primary-Color-Logo">
|
||||||
|
<g id="Group">
|
||||||
|
<path id="Path" fill="#1d3040" fill-rule="evenodd" stroke="none" d="M 122.219368 61.110565 C 122.219368 94.86026 94.859825 122.219788 61.110138 122.219788 C 27.360445 122.219788 0.000919 94.86026 0.000919 61.110565 C 0.000919 27.36087 27.360445 0.001343 61.110138 0.001343 C 94.859825 0.001343 122.219368 27.36087 122.219368 61.110565 Z"/>
|
||||||
|
</g>
|
||||||
|
<g id="g1">
|
||||||
|
<path id="path1" fill="#1d3040" fill-rule="evenodd" stroke="none" d="M 122.219368 230.965851 C 122.219368 264.715546 94.859825 292.075073 61.110138 292.075073 C 27.360445 292.075073 0.000919 264.715546 0.000919 230.965851 C 0.000919 197.216156 27.360445 169.856628 61.110138 169.856628 C 94.859825 169.856628 122.219368 197.216156 122.219368 230.965851 Z"/>
|
||||||
|
</g>
|
||||||
|
<g id="g2">
|
||||||
|
<path id="path2" fill="#1d3040" fill-rule="evenodd" stroke="none" d="M 292.013214 230.965851 C 292.013214 264.715546 264.653687 292.075073 230.903992 292.075073 C 197.154312 292.075073 169.794785 264.715546 169.794785 230.965851 C 169.794785 197.216156 197.154312 169.856628 230.903992 169.856628 C 264.653687 169.856628 292.013214 197.216156 292.013214 230.965851 Z"/>
|
||||||
|
</g>
|
||||||
|
<g id="g3">
|
||||||
|
<path id="path3" fill="#1d3040" fill-rule="evenodd" stroke="none" d="M 122.219368 400.850189 C 122.219368 434.599884 94.859825 461.959412 61.110138 461.959412 C 27.360445 461.959412 0.000919 434.599884 0.000919 400.850189 C 0.000919 367.100494 27.360445 339.740967 61.110138 339.740967 C 94.859825 339.740967 122.219368 367.100494 122.219368 400.850189 Z"/>
|
||||||
|
</g>
|
||||||
|
<g id="g4">
|
||||||
|
<path id="path4" fill="none" stroke="#1d3040" stroke-width="5" stroke-linejoin="round" d="M 458.927032 397.870483 C 458.927032 431.539703 431.632751 458.833984 397.963531 458.833984 C 364.294281 458.833984 337 431.539703 337 397.870483 C 337 364.201263 364.294281 336.906982 397.963531 336.906982 C 431.632751 336.906982 458.927032 364.201263 458.927032 397.870483 Z"/>
|
||||||
|
</g>
|
||||||
|
<g id="Group-copy-2">
|
||||||
|
<path id="path5" fill="none" stroke="#1d3040" stroke-width="5" stroke-linejoin="round" d="M 291.927032 397.870483 C 291.927032 431.539703 264.632751 458.833984 230.963516 458.833984 C 197.294296 458.833984 170 431.539703 170 397.870483 C 170 364.201263 197.294296 336.906982 230.963516 336.906982 C 264.632751 336.906982 291.927032 364.201263 291.927032 397.870483 Z"/>
|
||||||
|
</g>
|
||||||
|
<g id="Group-copy">
|
||||||
|
<path id="path6" fill="none" stroke="#1d3040" stroke-width="5" stroke-linejoin="round" d="M 458.927032 230.870483 C 458.927032 264.539703 431.632751 291.833984 397.963531 291.833984 C 364.294281 291.833984 337 264.539703 337 230.870483 C 337 197.201263 364.294281 169.906952 397.963531 169.906952 C 431.632751 169.906952 458.927032 197.201263 458.927032 230.870483 Z"/>
|
||||||
|
</g>
|
||||||
|
<g id="g5">
|
||||||
|
<path id="path7" fill="#1d3040" fill-rule="evenodd" stroke="none" d="M 461.886444 61.110565 C 461.886444 94.86026 434.526917 122.219788 400.777222 122.219788 C 367.027527 122.219788 339.667999 94.86026 339.667999 61.110565 C 339.667999 27.36087 367.027527 0.001343 400.777222 0.001343 C 434.526917 0.001343 461.886444 27.36087 461.886444 61.110565 Z"/>
|
||||||
|
</g>
|
||||||
|
<g id="g6">
|
||||||
|
<path id="path8" fill="#1d3040" fill-rule="evenodd" stroke="none" d="M 230.904007 122.21933 C 197.154312 122.21933 169.794785 94.859802 169.794785 61.110107 C 169.794785 27.360413 197.154312 0.000885 230.904007 0.000885 C 264.653687 0.000885 292.013214 27.360413 292.013214 61.110107 C 292.013214 94.859802 264.653687 122.21933 230.904007 122.21933 Z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.8 KiB |
|
|
@ -0,0 +1,33 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<!-- Generated by Pixelmator Pro 3.5.7 -->
|
||||||
|
<svg width="462" height="462" viewBox="0 0 462 462" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g id="Secondary-Color-Logo">
|
||||||
|
<g id="Group">
|
||||||
|
<path id="Path" fill="#f3ebd2" fill-rule="evenodd" stroke="none" d="M 122.219368 61.110565 C 122.219368 94.86026 94.859825 122.219788 61.110138 122.219788 C 27.360445 122.219788 0.000919 94.86026 0.000919 61.110565 C 0.000919 27.36087 27.360445 0.001343 61.110138 0.001343 C 94.859825 0.001343 122.219368 27.36087 122.219368 61.110565 Z"/>
|
||||||
|
</g>
|
||||||
|
<g id="g1">
|
||||||
|
<path id="path1" fill="#f3ebd2" fill-rule="evenodd" stroke="none" d="M 122.219368 230.965851 C 122.219368 264.715546 94.859825 292.075073 61.110138 292.075073 C 27.360445 292.075073 0.000919 264.715546 0.000919 230.965851 C 0.000919 197.216156 27.360445 169.856628 61.110138 169.856628 C 94.859825 169.856628 122.219368 197.216156 122.219368 230.965851 Z"/>
|
||||||
|
</g>
|
||||||
|
<g id="g2">
|
||||||
|
<path id="path2" fill="#f3ebd2" fill-rule="evenodd" stroke="none" d="M 292.013214 230.965851 C 292.013214 264.715546 264.653687 292.075073 230.903992 292.075073 C 197.154312 292.075073 169.794785 264.715546 169.794785 230.965851 C 169.794785 197.216156 197.154312 169.856628 230.903992 169.856628 C 264.653687 169.856628 292.013214 197.216156 292.013214 230.965851 Z"/>
|
||||||
|
</g>
|
||||||
|
<g id="g3">
|
||||||
|
<path id="path3" fill="#f3ebd2" fill-rule="evenodd" stroke="none" d="M 122.219368 400.850189 C 122.219368 434.599884 94.859825 461.959412 61.110138 461.959412 C 27.360445 461.959412 0.000919 434.599884 0.000919 400.850189 C 0.000919 367.100494 27.360445 339.740967 61.110138 339.740967 C 94.859825 339.740967 122.219368 367.100494 122.219368 400.850189 Z"/>
|
||||||
|
</g>
|
||||||
|
<g id="g4">
|
||||||
|
<path id="path4" fill="none" stroke="#f3ebd2" stroke-width="5" stroke-linejoin="round" d="M 458.927032 397.870483 C 458.927032 431.539703 431.632751 458.833984 397.963531 458.833984 C 364.294281 458.833984 337 431.539703 337 397.870483 C 337 364.201263 364.294281 336.906982 397.963531 336.906982 C 431.632751 336.906982 458.927032 364.201263 458.927032 397.870483 Z"/>
|
||||||
|
</g>
|
||||||
|
<g id="Group-copy-2">
|
||||||
|
<path id="path5" fill="none" stroke="#f3ebd2" stroke-width="5" stroke-linejoin="round" d="M 291.927032 397.870483 C 291.927032 431.539703 264.632751 458.833984 230.963516 458.833984 C 197.294296 458.833984 170 431.539703 170 397.870483 C 170 364.201263 197.294296 336.906982 230.963516 336.906982 C 264.632751 336.906982 291.927032 364.201263 291.927032 397.870483 Z"/>
|
||||||
|
</g>
|
||||||
|
<g id="Group-copy">
|
||||||
|
<path id="path6" fill="none" stroke="#f3ebd2" stroke-width="5" stroke-linejoin="round" d="M 458.927032 230.870483 C 458.927032 264.539703 431.632751 291.833984 397.963531 291.833984 C 364.294281 291.833984 337 264.539703 337 230.870483 C 337 197.201263 364.294281 169.906952 397.963531 169.906952 C 431.632751 169.906952 458.927032 197.201263 458.927032 230.870483 Z"/>
|
||||||
|
</g>
|
||||||
|
<g id="g5">
|
||||||
|
<path id="path7" fill="#f3ebd2" fill-rule="evenodd" stroke="none" d="M 461.886444 61.110565 C 461.886444 94.86026 434.526917 122.219788 400.777222 122.219788 C 367.027527 122.219788 339.667999 94.86026 339.667999 61.110565 C 339.667999 27.36087 367.027527 0.001343 400.777222 0.001343 C 434.526917 0.001343 461.886444 27.36087 461.886444 61.110565 Z"/>
|
||||||
|
</g>
|
||||||
|
<g id="g6">
|
||||||
|
<path id="path8" fill="#f3ebd2" fill-rule="evenodd" stroke="none" d="M 230.904007 122.21933 C 197.154312 122.21933 169.794785 94.859802 169.794785 61.110107 C 169.794785 27.360413 197.154312 0.000885 230.904007 0.000885 C 264.653687 0.000885 292.013214 27.360413 292.013214 61.110107 C 292.013214 94.859802 264.653687 122.21933 230.904007 122.21933 Z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.8 KiB |
|
|
@ -0,0 +1,8 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<!-- Generated by Pixelmator Pro 3.3.8 -->
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path id="Path" fill="none" stroke="none" d="M 0 0 L 24 0 L 24 24 L 0 24 Z"/>
|
||||||
|
<path id="path1" fill="none" stroke="#1d3040" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 4 6 L 20 6"/>
|
||||||
|
<path id="path2" fill="none" stroke="#1d3040" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 4 12 L 20 12"/>
|
||||||
|
<path id="path3" fill="none" stroke="#1d3040" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 4 18 L 20 18"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 658 B |
|
|
@ -1,33 +0,0 @@
|
||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
||||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
||||||
<svg width="100%" height="100%" viewBox="0 0 462 462" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
|
||||||
<g transform="matrix(1.58717,0,0,1.58717,-403.964,-376.506)">
|
|
||||||
<g transform="matrix(1,0,0,1,200.753,94.1743)">
|
|
||||||
<circle cx="92.268" cy="181.547" r="38.502" style="fill:rgb(252,99,153);"/>
|
|
||||||
</g>
|
|
||||||
<g transform="matrix(1,0,0,1,200.753,201.192)">
|
|
||||||
<circle cx="92.268" cy="181.547" r="38.502" style="fill:rgb(252,99,153);"/>
|
|
||||||
</g>
|
|
||||||
<g transform="matrix(1,0,0,1,307.732,201.192)">
|
|
||||||
<circle cx="92.268" cy="181.547" r="38.502" style="fill:rgb(252,99,153);"/>
|
|
||||||
</g>
|
|
||||||
<g transform="matrix(1,0,0,1,414.761,201.192)">
|
|
||||||
<circle cx="92.268" cy="181.547" r="38.502" style="fill:rgb(171,183,183);"/>
|
|
||||||
</g>
|
|
||||||
<g transform="matrix(1,0,0,1,200.753,308.228)">
|
|
||||||
<circle cx="92.268" cy="181.547" r="38.502" style="fill:rgb(252,99,153);"/>
|
|
||||||
</g>
|
|
||||||
<g transform="matrix(1,0,0,1,307.732,308.228)">
|
|
||||||
<circle cx="92.268" cy="181.547" r="38.502" style="fill:rgb(171,183,183);"/>
|
|
||||||
</g>
|
|
||||||
<g transform="matrix(1,0,0,1,414.761,308.228)">
|
|
||||||
<circle cx="92.268" cy="181.547" r="38.502" style="fill:rgb(171,183,183);"/>
|
|
||||||
</g>
|
|
||||||
<g transform="matrix(1,0,0,1,414.761,94.1743)">
|
|
||||||
<circle cx="92.268" cy="181.547" r="38.502" style="fill:rgb(252,99,153);"/>
|
|
||||||
</g>
|
|
||||||
<g transform="matrix(6.12323e-17,1,-1,6.12323e-17,581.547,183.453)">
|
|
||||||
<circle cx="92.268" cy="181.547" r="38.502" style="fill:rgb(252,99,153);"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.9 KiB |
|
|
@ -4,16 +4,24 @@ export default class Base {
|
||||||
//--------------------------
|
//--------------------------
|
||||||
constructor() {
|
constructor() {
|
||||||
this.currentSlide = 0;
|
this.currentSlide = 0;
|
||||||
this.slides = document.querySelectorAll('[role="slide"]');
|
this.slides = document.querySelectorAll('.slide');
|
||||||
//alert('FRESH');
|
//alert('FRESH');
|
||||||
|
document.getElementById('menu-open').addEventListener('click', e => {
|
||||||
|
document.getElementById('menu').style.opacity = '100%';
|
||||||
|
document.getElementById('menu').style.visibility = 'visible';
|
||||||
|
});
|
||||||
|
document.getElementById('menu-close').addEventListener('click', e => {
|
||||||
|
document.getElementById('menu').style.opacity = '0';
|
||||||
|
document.getElementById('menu').style.visibility = 'hidden';
|
||||||
|
});
|
||||||
this.start();
|
this.start();
|
||||||
}
|
}
|
||||||
start() {
|
start() {
|
||||||
if (this.slides.length > 1) {
|
if (this.slides.length > 1) {
|
||||||
this.slideInterval = setInterval(() => {
|
this.slideInterval = setInterval(() => {
|
||||||
this.slides[this.currentSlide].className = 'hide';
|
this.slides[this.currentSlide].className = 'hide slide';
|
||||||
this.currentSlide = (this.currentSlide + 1) % this.slides.length;
|
this.currentSlide = (this.currentSlide + 1) % this.slides.length;
|
||||||
this.slides[this.currentSlide].className = 'show';
|
this.slides[this.currentSlide].className = 'show slide';
|
||||||
}, 3000);
|
}, 3000);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -29,67 +29,17 @@
|
||||||
<link rel="stylesheet" type="text/css" href="{{ $assetPath."css/theme/start.css" }}">
|
<link rel="stylesheet" type="text/css" href="{{ $assetPath."css/theme/start.css" }}">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div id="menu">
|
||||||
|
@include('fipamo-default-v2.includes.menu')
|
||||||
|
</div>
|
||||||
<header>
|
<header>
|
||||||
<div role="slide-show">
|
@include('fipamo-default-v2.includes.nav')
|
||||||
@if(count($media)>1)
|
|
||||||
@foreach($media as $item)
|
|
||||||
@if($item['type'] == "mp4")
|
|
||||||
<div id="{{$loop->index}}" role="slide">
|
|
||||||
<video controls autoplay muted>
|
|
||||||
|
|
||||||
<source src="{{$item['file']}}" type="video/mp4">
|
|
||||||
|
|
||||||
Please get a better browser. They're free.
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
@else
|
|
||||||
<div id="{{$loop->index}}"role='slide' class="slide hide" style="background: url({{ $item['file'] }}) no-repeat center center / cover"></div>
|
|
||||||
@endif
|
|
||||||
@endforeach
|
|
||||||
@else
|
|
||||||
@if(isset($media[0]) && $media != '')
|
|
||||||
@if($media[0]['type'] == "mp4")
|
|
||||||
<div id="0" role="slide">
|
|
||||||
<video controls autoplay muted>
|
|
||||||
<source src="{{$media[0]['file']}}" type="video/mp4">
|
|
||||||
Please get a better browser. They're free.
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
@else
|
|
||||||
<div id="0" role="slide" style="background: url({{ $media[0]['file'] }}) no-repeat center center / cover"></div>
|
|
||||||
@endif
|
|
||||||
@else
|
|
||||||
<div id="0" role="slide" style="background: url({{ $info['image'] }}) no-repeat center center / cover"></div>
|
|
||||||
@endif
|
|
||||||
@endif
|
|
||||||
</div>
|
|
||||||
<nav>
|
|
||||||
<div class="left">
|
|
||||||
<a href="/" class="logo-link">
|
|
||||||
<img id="logo" src="{{ $assetPath."/images/global/the-logo.svg" }}"/>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="right">
|
|
||||||
@if(isset($menu))
|
|
||||||
@foreach($menu as $link)
|
|
||||||
@if(isset($dynamicRender))
|
|
||||||
@if($dynamicRender == 'true')
|
|
||||||
<a href="{{"/".$link['slug']}}" class="menu-link">{{$link['title']}}</a><br/>
|
|
||||||
@else
|
|
||||||
<a href="{{"/".$link['slug'].".html"}}" class="menu-link">{{$link['title']}}</a><br/>
|
|
||||||
@endif
|
|
||||||
@else
|
|
||||||
<a href="{{"/".$link['slug'].".html"}}" class="menu-link">{{$link['title']}}</a><br/>
|
|
||||||
@endif
|
|
||||||
@endforeach
|
|
||||||
@endif
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</header>
|
</header>
|
||||||
<div id="main-content" class="container">
|
@include('fipamo-default-v2.includes.slides')
|
||||||
|
<main>
|
||||||
@section('main-content')
|
@section('main-content')
|
||||||
@show
|
@show
|
||||||
</div>
|
</main>
|
||||||
<footer>
|
<footer>
|
||||||
<div class="inner">
|
<div class="inner">
|
||||||
@if(isset($dynamicRender))
|
@if(isset($dynamicRender))
|
||||||
|
|
|
||||||
17
content/themes/fipamo-default-v2/includes/menu.blade.php
Normal file
17
content/themes/fipamo-default-v2/includes/menu.blade.php
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
<div class="links">
|
||||||
|
<img id="menu-close" src="{{ $assetPath."/images/global/close.svg" }}"/><br />
|
||||||
|
<img class="logo-medium" src="{{ $assetPath."/images/global/fipamo-logo-primary.svg" }}"/><br />
|
||||||
|
@if(isset($menu))
|
||||||
|
@foreach($menu as $link)
|
||||||
|
@if(isset($dynamicRender))
|
||||||
|
@if($dynamicRender == 'true')
|
||||||
|
<a href="{{"/".$link['slug']}}" class="menu-link">{{$link['title']}}</a><br/>
|
||||||
|
@else
|
||||||
|
<a href="{{"/".$link['slug'].".html"}}" class="menu-link">{{$link['title']}}</a><br/>
|
||||||
|
@endif
|
||||||
|
@else
|
||||||
|
<a href="{{"/".$link['slug'].".html"}}" class="menu-link">{{$link['title']}}</a><br/>
|
||||||
|
@endif
|
||||||
|
@endforeach
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
10
content/themes/fipamo-default-v2/includes/nav.blade.php
Normal file
10
content/themes/fipamo-default-v2/includes/nav.blade.php
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
<nav>
|
||||||
|
<div class="left">
|
||||||
|
<a href="/" class="logo-link">
|
||||||
|
<img class="logo-medium" src="{{ $assetPath."/images/global/fipamo-logo-primary.svg" }}"/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<img id="menu-open" src="{{ $assetPath."/images/global/menu.svg" }}"/>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
33
content/themes/fipamo-default-v2/includes/slides.blade.php
Normal file
33
content/themes/fipamo-default-v2/includes/slides.blade.php
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
<div class="slide-show">
|
||||||
|
@if(count($media)>1)
|
||||||
|
@foreach($media as $item)
|
||||||
|
@if($item['type'] == "mp4")
|
||||||
|
<div id="{{$loop->index}}" class="slide">
|
||||||
|
<video controls autoplay muted>
|
||||||
|
|
||||||
|
<source src="{{$item['file']}}" type="video/mp4">
|
||||||
|
|
||||||
|
Please get a better browser. They're free.
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
@else
|
||||||
|
<div id="{{$loop->index}}" class="slide hide" style="background: url({{ $item['file'] }}) no-repeat center center / cover"></div>
|
||||||
|
@endif
|
||||||
|
@endforeach
|
||||||
|
@else
|
||||||
|
@if(isset($media[0]) && $media != '')
|
||||||
|
@if($media[0]['type'] == "mp4")
|
||||||
|
<div id="0" class="slide">
|
||||||
|
<video controls autoplay muted>
|
||||||
|
<source src="{{$media[0]['file']}}" type="video/mp4">
|
||||||
|
Please get a better browser. They're free.
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
@else
|
||||||
|
<div id="0" class="slide" style="background: url({{ $media[0]['file'] }}) no-repeat center center / cover"></div>
|
||||||
|
@endif
|
||||||
|
@else
|
||||||
|
<div id="0" class="slide" style="background: url({{ $info['image'] }}) no-repeat center center / cover"></div>
|
||||||
|
@endif
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
<h1>{{ $title }}</h1>
|
<h1>{{ $title }}</h1>
|
||||||
<p>{!!$content!!}</p>
|
<p>{!!$content!!}</p>
|
||||||
</article>
|
</article>
|
||||||
<section role="page-meta">
|
<section class="page-meta">
|
||||||
<div>
|
<div>
|
||||||
<h2>Files</h2>
|
<h2>Files</h2>
|
||||||
@foreach($files as $file)
|
@foreach($files as $file)
|
||||||
|
|
@ -44,19 +44,18 @@
|
||||||
@if($dynamicRender == 'true')
|
@if($dynamicRender == 'true')
|
||||||
<a href="{{ "/tags/".$tag['slug'] }}">
|
<a href="{{ "/tags/".$tag['slug'] }}">
|
||||||
{{ $tag['label'] }}
|
{{ $tag['label'] }}
|
||||||
</a><br/>
|
</a>
|
||||||
@else
|
@else
|
||||||
<a href="{{ "/tags/".$tag['slug'].".html" }}">
|
<a href="{{ "/tags/".$tag['slug'].".html" }}">
|
||||||
{{ $tag['label'] }}
|
{{ $tag['label'] }}
|
||||||
</a><br/>
|
</a>
|
||||||
@endif
|
@endif
|
||||||
@else
|
@else
|
||||||
<a href="{{ "/tags/".$tag['slug'].".html" }}">
|
<a href="{{ "/tags/".$tag['slug'].".html" }}">
|
||||||
{{ $tag['label'] }}
|
{{ $tag['label'] }}
|
||||||
</a><br/>
|
</a>
|
||||||
@endif
|
@endif
|
||||||
@endforeach
|
@endforeach
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@endsection
|
@endsection
|
||||||
|
|
|
||||||
|
|
@ -1,33 +0,0 @@
|
||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
||||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
||||||
<svg width="100%" height="100%" viewBox="0 0 462 462" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
|
||||||
<g transform="matrix(1.58717,0,0,1.58717,-403.964,-376.506)">
|
|
||||||
<g transform="matrix(1,0,0,1,200.753,94.1743)">
|
|
||||||
<circle cx="92.268" cy="181.547" r="38.502" style="fill:rgb(252,99,153);"/>
|
|
||||||
</g>
|
|
||||||
<g transform="matrix(1,0,0,1,200.753,201.192)">
|
|
||||||
<circle cx="92.268" cy="181.547" r="38.502" style="fill:rgb(252,99,153);"/>
|
|
||||||
</g>
|
|
||||||
<g transform="matrix(1,0,0,1,307.732,201.192)">
|
|
||||||
<circle cx="92.268" cy="181.547" r="38.502" style="fill:rgb(252,99,153);"/>
|
|
||||||
</g>
|
|
||||||
<g transform="matrix(1,0,0,1,414.761,201.192)">
|
|
||||||
<circle cx="92.268" cy="181.547" r="38.502" style="fill:rgb(171,183,183);"/>
|
|
||||||
</g>
|
|
||||||
<g transform="matrix(1,0,0,1,200.753,308.228)">
|
|
||||||
<circle cx="92.268" cy="181.547" r="38.502" style="fill:rgb(252,99,153);"/>
|
|
||||||
</g>
|
|
||||||
<g transform="matrix(1,0,0,1,307.732,308.228)">
|
|
||||||
<circle cx="92.268" cy="181.547" r="38.502" style="fill:rgb(171,183,183);"/>
|
|
||||||
</g>
|
|
||||||
<g transform="matrix(1,0,0,1,414.761,308.228)">
|
|
||||||
<circle cx="92.268" cy="181.547" r="38.502" style="fill:rgb(171,183,183);"/>
|
|
||||||
</g>
|
|
||||||
<g transform="matrix(1,0,0,1,414.761,94.1743)">
|
|
||||||
<circle cx="92.268" cy="181.547" r="38.502" style="fill:rgb(252,99,153);"/>
|
|
||||||
</g>
|
|
||||||
<g transform="matrix(6.12323e-17,1,-1,6.12323e-17,581.547,183.453)">
|
|
||||||
<circle cx="92.268" cy="181.547" r="38.502" style="fill:rgb(252,99,153);"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.7 KiB |
Loading…
Reference in a new issue