UCOMmandIt
/
uci-hugo-landingpage
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat: added 404 template for use with caddy 

refactor: navbar to include draft div when on draft site
feat: add abaility for text shadow to hero text
rename page.css to sections.css
master
Kebler Network System Administrator 2021-11-10 13:01:14 -08:00
parent a57525de2f
commit 5f481fecfb
13 changed files with 141 additions and 272 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
layouts/404.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
{{ partial "head.html" . }}
<body>
{{ if ne .Site.Params.navbar.hidden true }}
{{ partial "navbar.html" . }}
{{ end }}
<main class="error404">
{{ partial "404.html" . }}
</main>
{{ partial "js.html" . }}
</body>
</html>

20
layouts/partials/404.html Normal file
View File

@ -0,0 +1,20 @@
<section id="error-404" class="section section--404"
style="color:{{ .Site.Params.light_color }}; background-color:{{ .Site.Params.dark_color }};"
>
<div class="section__container">
<div class="section__headline section__headline--404">
<h1>Whoops!</h1>
<h2>Content Load Error</h2>
</div>
<div class="section__content section-content--{{ .File.BaseFileName }}"
{{ with .Params.align }} style="align-items:
{{ if eq . "left" }} flex-start {{ end }}
{{ if eq . "right" }} flex-end {{ end }};"
{{ end }} >
The content you tried to load does not exist. </br>
<div>continue by clicking <a class="404__link" href="{{ .Site.BaseURL }}">here</a></div>
</div>
</div>
</section>

2
layouts/partials/head/css.html
View File

@ -16,7 +16,7 @@
<link href="/css/base.css" rel="stylesheet"> <link href="/css/base.css" rel="stylesheet">
<!-- Site CSS --> <!-- Site CSS -->
<link href="/css/page.css" rel="stylesheet"> <link href="/css/sections.css" rel="stylesheet">
<!-- Site Navigation CSS --> <!-- Site Navigation CSS -->
<link href="/css/navbar.css" rel="stylesheet"> <link href="/css/navbar.css" rel="stylesheet">

121
layouts/partials/head/styles.html
View File

@ -6,7 +6,8 @@
{{ $sections := .Site.Params.sections }} {{ $sections := .Site.Params.sections }}
{{ $modal := .Site.Params.modal }} {{ $modal := .Site.Params.modal }}
{{ $buttons := .Site.Params.buttons }} {{ $buttons := .Site.Params.buttons }}
{{ $imagesurl := .Site.Params.imagesurl | default ( printf "%simages/" ( $.Site.BaseURL | default "" )) }}
{{ $filesurl := .Site.Params.filesurl | default "./assets/assets/" }}
{{ $dark_color:=.Site.Params.dark_color }} {{ $dark_color:=.Site.Params.dark_color }}
{{ $light_color:=.Site.Params.light_color }} {{ $light_color:=.Site.Params.light_color }}
@ -18,10 +19,10 @@
{{ $bg_color := $navbar.bg_color | default $dark_color }} {{ $bg_color := $navbar.bg_color | default $dark_color }}
{{ $color := $navbar.color | default $light_color }} {{ $color := $navbar.color | default $light_color }}
.nav-bar__menu-item:hover {color: {{ $bg_color }}; } .nav-bar__menu-item:hover, .nav-bar__menu-item >a:hover {color: {{ $bg_color }}; }
.nav-bar, .section--footer { background-color: {{ $bg_color }}; } .nav-bar__container, .section--footer { background-color: {{ $bg_color }}; }
.nav-bar__logo, .nav-bar__menu, .nav-bar__menu-button, .section--footer { color: {{ $color }}; } .nav-bar__logo,.nav-bar__logo:hover, .nav-bar__menu, .nav-bar__menu-button, .section--footer { color: {{ $color }}; }
.nav-bar__menu-item:hover { background-color: {{ $color }}; } .nav-bar__menu-item:hover, .nav-bar__menu-item >a:hover { background-color: {{ $color }}; }
{{ with $navbar.font }} {{ with $navbar.font }}
.nav-bar__logo, .nav-bar__menu { font-family:{{ . }},Helvetica,Arial,sans-serif; } .nav-bar__logo, .nav-bar__menu { font-family:{{ . }},Helvetica,Arial,sans-serif; }
@ -45,95 +46,37 @@
/* HERO */ /* HERO */
{{ if ne .Site.Params.hero.custom_hero true }}
{{ $bg_color := .Params.bg_color | default $light_color }} {{ if ne .Site.Params.hero.custom_hero true }}
<!-- {{ $bg_color := $hero.bg_color | default $light_color }} -->
{{ $bg_color := $hero.bg_color | default $light_color }}
{{ $color := $hero.color | default $dark_color }} {{ $color := $hero.color | default $dark_color }}
#hero { color: {{ $color }}; } #hero { color: {{ $color }}; }
#hero { background-color: {{ $bg_color }}; }
#hero h1 { color: {{ $hero.headline_color | default $color }}; }
#hero h2 { color: {{ $hero.subheadline_color | default $color }}; }
#hero h3 { color: {{ $hero.subsubheadline_color | default $color }}; }
#hero h4 { color: {{ $hero.lines_color | default $color }}; }
#hero hr { border-top-color: {{ $hero.divider_color | default $color }}; }
#hero { background-color: {{ $bg_color }}; }
{{ if eq $hero.text_shadow true }}
#hero { text-shadow:
{{ $hero.text_shadow_horz | default 2 }}px
{{ $hero.text_shadow_vert | default 2 }}px
{{ $hero.text_shadow_blur | default 0 }}px
{{ $hero.text_shadow_color | default $bg_color }}; }
{{ end}}
{{/* #hero { text-shadow: -1px 1px 2px white,
1px 1px 2px white,
1px -1px 0 white,
-1px -1px 0 white
} */}}
#hero h1 { color: {{ $hero.headline_color | default $color }}; }
#hero h2 { color: {{ $hero.subheadline_color | default $color }}; }
#hero h3 { color: {{ $hero.subsubheadline_color | default $color }}; }
#hero h4 { color: {{ $hero.lines_color | default $color }}; }
#hero hr { border-top-color: {{ $hero.divider_color | default $color }}; }
{{ $image := .Site.Params.hero.img | default "hero.jpg" }}
/* TODO mobile image substitution */
{{ $image := print $imagesurl $image }}
#hero { background-image: url("{{ $image }}"); }
{{ with $hero }}
{{ with $.Site.Params.imagespath }}
{{ $.Scratch.Set "path" ( . ) }}
{{ else }}
{{ $.Scratch.Set "path" ( printf "%s/images/" ( $.Site.BaseURL | default "" ) ) }}
{{ end }}
#hero {
background-image: url("{{ $.Scratch.Get "path" }}{{ .img | default "hero.jpg" }}");
}
{{ with .font }}
#hero > .section__container { font-family:{{ . }},Helvetica,Arial,sans-serif;}
{{ end }}
{{ if and ( .text_outline ) ( .text_shadow ) }}
#hero > .section__container {
text-shadow:
-2px -2px 0 {{ .text_outline }},
2px -2px 0 {{ .text_outline }},
-2px 2px 0 {{ .text_outline }},
2px 2px 0 {{ .text_outline }},
-7px -3px 0 {{ .text_shadow }};
}
{{ else }}
{{ with .text_outline }}
#hero > .section__container {
text-shadow:
-2px -2px 0 {{ . }},
2px -2px 0 {{ . }},
-2px 2px 0 {{ . }},
2px 2px 0 {{ . }};
}
{{ end }}
{{ with .text_shadow }}
#hero > .section__container {
text-shadow:
-7px -3px 0 {{ . }}
}
{{ end }}
{{ end }}
{{ with .headlines_font }}
#hero h1, #hero h2, #hero h3 { font-family: "{{ . }}",Helvetica,Arial,sans-serif; }
{{ end }}
{{ with .headline_size }}
#hero h1 { font-size: {{ . }}em; }
{{ end }}
{{ with .subheadline_size }}
#hero h2 { font-size: {{ . }}em; }
{{ end }}
{{ with .subsubheadline_size }}
#hero h3 { font-size: {{ . }}em; }
{{ end }}
{{ with .lines_size }}
#hero h4 { font-size: {{ . }}em; }
{{ end }}
{{ with .divider_thickness }}
#hero hr { border-width: {{ . }}px; }
{{ end }}
{{ end }} /* end with hero */
{{ end }} /* end not custom hero {{ end }} /* end not custom hero

2
layouts/partials/hero.html
View File

@ -1,6 +1,6 @@
<section id="hero" class="section section--hero"> <section id="hero" class="section section--hero">
<div class="section__container" > <div class="section__container" >
<div class="section__content section__content--hero" > <div class="section__content section__content--hero" >
{{ with .Site.Params.hero }} {{ with .Site.Params.hero }}
{{ with .headline }}<h1>{{ . }}</h1>{{ end }} {{ with .headline }}<h1>{{ . }}</h1>{{ end }}
{{ with .subheadline }}<h2>{{ . }}</h2>{{ end }} {{ with .subheadline }}<h2>{{ . }}</h2>{{ end }}

1
layouts/partials/js.html
View File

@ -16,7 +16,6 @@
<!-- videos embed --> <!-- videos embed -->
<script src="/js/youtube.js"></script> <script src="/js/youtube.js"></script>
<!-- development tools --> <!-- development tools -->
<script src="/js/lorem.js"></script>
{{ if isset .Site.Params "googleAnalytics" }} {{ if isset .Site.Params "googleAnalytics" }}
<script src="/js/analytics.js"></script> <script src="/js/analytics.js"></script>
{{ end }} {{ end }}

27
layouts/partials/navbar.html
View File

@ -1,24 +1,27 @@
<!-- Navigation --> <!-- Navigation -->
<div id="nav-bar" class="nav-bar"> <div id="nav-bar">
<!-- <div class="nav-bar__container"> --> <div class="nav-bar__container">
<div class="nav-bar__header"> <div class="nav-bar__header">
<a href="#hero" class="nav-bar__logo">{{ if .Site.Params.navbar.logo_text }} {{ .Site.Params.navbar.logo_text }} {{ else }} {{ .Site.Title | default "Add a site title" }} {{ end }}</a> <a href="{{ if eq .Site.Params.use_hero true }}#hero{{end}}" class="nav-bar__logo">
<div class="nav-bar__menu-button"> <i class="fa fa-bars"></i></div> {{ if .Site.Params.navbar.logo_text }} {{ .Site.Params.navbar.logo_text }}
</div> {{ else }} {{ .Site.Title | default "Add a site title" }} {{ end }}
<!-- <nav class="nav-bar__menu-off"> --> </a>
<div class="nav-bar__menu-button"> <i class="fa fa-bars"></i></div>
</div>
<ul class="nav-bar__menu hide-menu"> <ul class="nav-bar__menu hide-menu">
{{ range where .Site.RegularPages "Section" "sections" }} {{ range where .Site.RegularPages "Section" "sections" }}
{{ if ne .Params.navbar false }} {{ if ne .Params.navbar false }}
{{ if ne .Params.hidden true }} {{ if ne .Params.hidden true }}
<li class="nav-bar__menu-item"> <li >
<a href="#{{ .File.BaseFileName }}"> <a class="nav-bar__menu-item" href="#{{ .File.BaseFileName }}">
{{ .Params.link_text | default .Title }} {{ .Params.link_text | default .Title }}
</a> </a>
</li> </li>
{{ end }} {{ end }} {{ end }} {{ end }}
{{ end }} {{ end }}
</ul> </ul>
<!-- </nav> --> </div>
<!-- </div> --> {{ if .Site.IsServer }}<div class="nav-bar__draft"> DRAFT - DRAFT - DRAFT - DRAFT </div> {{ end }}
</div> </div>
<div class="nav-bar-spacer"></div> <div class="nav-bar-spacer"></div>

6
layouts/partials/sections.html
View File

@ -10,7 +10,11 @@ style="color:{{ .Params.color }}; background-color:{{ .Params.bg_color }};"
<div class="section__headline section__headline--{{ .File.BaseFileName }}"> <div class="section__headline section__headline--{{ .File.BaseFileName }}">
<h1>{{ .Title }}</h1> <h1>{{ .Title }}</h1>
</div> </div>
<div class="section__content section-content--{{ .File.BaseFileName }}" {{ with .Params.align }} style="align-items: {{.}};"{{ end }} > <div class="section__content section-content--{{ .File.BaseFileName }}" {{ with .Params.align }}
style="align-items:
{{ if eq . "left" }} flex-start {{ end }}
{{ if eq . "right" }} flex-end {{ end }};"
{{ end }} >
{{ .Content }} {{ .Content }}
</div> </div>
</div> </div>

6
static/css/base.css
View File

@ -108,13 +108,13 @@ a,
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
font-weight: bold; font-weight: bold;
font-style: italic; /* font-style: italic;
filter: saturate(200%); filter: saturate(200%); */
} }
a:hover, a:hover,
.clickable:hover { .clickable:hover {
color: black; color: rgb(161, 44, 44);
filter: saturate(100%); filter: saturate(100%);
} }

57
static/css/navbar.css
View File

@ -1,7 +1,8 @@
/* NAVIGATION BAR */ /* NAVIGATION BAR */
/* mobile first at <1000px */ /* mobile first at <1000px */
.nav-bar {
#nav-bar {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: fixed; position: fixed;
@ -9,25 +10,31 @@
left: 0; left: 0;
z-index: 10000; z-index: 10000;
width: 100vw; width: 100vw;
}
.nav-bar__container {
display: flex;
flex-direction: column;
width: 100%;
color: black; color: black;
background-color: white; background-color: white;
border-bottom: 1px solid grey; border-bottom: 1px solid grey;
font-size: 1em;
font-weight: bold; font-weight: bold;
font-size: 2em;
padding-left: 1em;
padding-right: 1em;
} }
.nav-bar__header { .nav-bar__header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
align-content: center; align-content: start;
padding-top: 0.9em; padding-top: 0.9em;
padding-bottom: 0.9em; padding-bottom: 0.9em;
} }
.nav-bar__logo, .nav-bar__logo {
.nav-bar__menu-button {
font-size: 1.8em;
padding-left: 1em; padding-left: 1em;
} }
@ -35,6 +42,7 @@
order: 2; order: 2;
} }
.nav-bar__menu-button { .nav-bar__menu-button {
order: 1; order: 1;
cursor: pointer; cursor: pointer;
@ -55,7 +63,6 @@
justify-content: center; justify-content: center;
transition: 200ms; transition: 200ms;
border-top: 2px solid; border-top: 2px solid;
font-size: 1.8em;
padding: .35em; padding: .35em;
} }
@ -65,20 +72,32 @@
opacity: 1; opacity: 1;
} }
.nav-bar__menu-item:hover { .nav-bar__menu-item:hover, .nav-bar__menu-item >a:hover {
background-color: black; background-color: white;
color: white; color: black;
} }
.nav-bar__draft {
display: flex;
justify-content: center;
align-items: center;
background-color: black;
color: red;
font-weight: bold;
font-size: 1em;
width: 100%;
height: 2em;
}
/* bigger than small tablet */ /* bigger than small tablet */
@media only screen and (min-width: 1000px) { @media only screen and (min-width: 1000px) {
.nav-bar { .nav-bar__container {
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding-right: 2em; font-size: 2.5em;
padding-left: 2em;
} }
.nav-bar__menu { .nav-bar__menu {
@ -103,8 +122,8 @@
} }
.nav-bar__menu-item, .nav-bar__menu-item,
.nav-bar__logo { .nav-bar__logo,
font-size: 1.5em; .nav-bar__draft {
padding-left: 0.3em; padding-left: 0.3em;
padding-right: 0.3em; padding-right: 0.3em;
padding-top: 0.7em; padding-top: 0.7em;
@ -121,10 +140,6 @@
/* full size */ /* full size */
@media screen and (min-width: 1400px) { @media screen and (min-width: 1400px) {
.nav-bar__menu-item,
.nav-bar__logo {
font-size: 2em;
padding-left: 0.5em;
padding-right: 0.5em;
}
} }

6
static/css/page.css → static/css/sections.css
View File

@ -66,6 +66,12 @@
background-color: black; background-color: black;
} }
.section--404 {
color: white;
background-color: black;
height: 1000px;
}
.section--hero { .section--hero {
color: white; color: white;
background-color: grey; background-color: grey;

141
static/js/lorem.js
View File

@ -1,141 +0,0 @@
var Lorem;
(function() {
//Create a class named Lorem and constructor
Lorem = function() {
//Default values.
this.type = null;
this.query = null;
this.data = null;
};
//Static variables
Lorem.IMAGE = 1;
Lorem.TEXT = 2;
Lorem.TYPE = {
PARAGRAPH: 1,
SENTENCE: 2,
WORD: 3
};
//Words to create lorem ipsum text.
Lorem.WORDS = [
"lorem", "ipsum", "dolor", "sit", "amet,", "consectetur", "adipiscing", "elit", "ut", "aliquam,", "purus", "sit", "amet", "luctus", "venenatis,", "lectus", "magna", "fringilla", "urna,", "porttitor", "rhoncus", "dolor", "purus", "non", "enim", "praesent", "elementum", "facilisis", "leo,", "vel", "fringilla", "est", "ullamcorper", "eget", "nulla", "facilisi", "etiam", "dignissim", "diam", "quis", "enim", "lobortis", "scelerisque", "fermentum", "dui", "faucibus", "in", "ornare", "quam", "viverra", "orci", "sagittis", "eu", "volutpat", "odio", "facilisis", "mauris", "sit", "amet", "massa", "vitae", "tortor", "condimentum", "lacinia", "quis", "vel", "eros", "donec", "ac", "odio", "tempor", "orci", "dapibus", "ultrices", "in", "iaculis", "nunc", "sed", "augue", "lacus,", "viverra", "vitae", "congue", "eu,", "consequat", "ac", "felis", "donec", "et", "odio", "pellentesque", "diam", "volutpat", "commodo", "sed", "egestas", "egestas", "fringilla", "phasellus", "faucibus", "scelerisque", "eleifend", "donec", "pretium", "vulputate", "sapien", "nec", "sagittis", "aliquam", "malesuada", "bibendum", "arcu", "vitae", "elementum",
"curabitur", "vitae", "nunc", "sed", "velit", "dignissim", "sodales", "ut", "eu", "sem", "integer", "vitae", "justo", "eget", "magna", "fermentum", "iaculis", "eu", "non", "diam", "phasellus", "vestibulum", "lorem", "sed", "risus", "ultricies", "tristique", "nulla", "aliquet", "enim", "tortor,", "at", "auctor", "urna", "nunc", "id", "cursus", "metus", "aliquam", "eleifend", "mi", "in", "nulla", "posuere", "sollicitudin", "aliquam", "ultrices", "sagittis", "orci,", "a", "scelerisque", "purus", "semper", "eget", "duis", "at", "tellus", "at", "urna", "condimentum", "mattis", "pellentesque", "id", "nibh", "tortor,", "id", "aliquet", "lectus", "proin", "nibh", "nisl,", "condimentum", "id", "venenatis", "a,", "condimentum", "vitae", "sapien", "pellentesque", "habitant", "morbi", "tristique", "senectus", "et", "netus", "et", "malesuada", "fames", "ac", "turpis", "egestas", "sed", "tempus,", "urna", "et", "pharetra", "pharetra,", "massa", "massa", "ultricies", "mi,", "quis", "hendrerit", "dolor", "magna", "eget", "est", "lorem", "ipsum", "dolor", "sit", "amet,", "consectetur", "adipiscing", "elit", "pellentesque", "habitant", "morbi", "tristique", "senectus", "et", "netus", "et", "malesuada", "fames", "ac", "turpis", "egestas", "integer", "eget", "aliquet", "nibh", "praesent", "tristique", "magna", "sit", "amet", "purus", "gravida", "quis", "blandit", "turpis", "cursus", "in", "hac", "habitasse", "platea", "dictumst", "quisque", "sagittis,", "purus", "sit", "amet", "volutpat", "consequat,", "mauris", "nunc", "congue", "nisi,", "vitae", "suscipit", "tellus", "mauris", "a", "diam",
"maecenas", "sed", "enim", "ut", "sem", "viverra", "aliquet", "eget", "sit", "amet", "tellus", "cras", "adipiscing", "enim", "eu", "turpis", "egestas", "pretium", "aenean", "pharetra,", "magna", "ac", "placerat", "vestibulum,", "lectus", "mauris", "ultrices", "eros,", "in", "cursus", "turpis", "massa", "tincidunt", "dui", "ut", "ornare", "lectus", "sit", "amet", "est", "placerat", "in", "egestas", "erat", "imperdiet", "sed", "euismod", "nisi", "porta", "lorem", "mollis", "aliquam", "ut", "porttitor", "leo", "a", "diam", "sollicitudin", "tempor", "id", "eu", "nisl", "nunc", "mi", "ipsum,", "faucibus", "vitae", "aliquet", "nec,", "ullamcorper", "sit", "amet", "risus", "nullam", "eget", "felis", "eget", "nunc", "lobortis", "mattis", "aliquam", "faucibus", "purus", "in", "massa", "tempor", "nec", "feugiat", "nisl", "pretium", "fusce", "id", "velit", "ut", "tortor", "pretium", "viverra", "suspendisse", "potenti", "nullam", "ac", "tortor", "vitae", "purus", "faucibus", "ornare", "suspendisse", "sed", "nisi", "lacus,", "sed", "viverra", "tellus", "in", "hac", "habitasse", "platea", "dictumst", "vestibulum", "rhoncus", "est", "pellentesque", "elit", "ullamcorper", "dignissim", "cras", "tincidunt", "lobortis", "feugiat", "vivamus", "at", "augue", "eget", "arcu", "dictum", "varius", "duis", "at", "consectetur", "lorem",
"donec", "massa", "sapien,", "faucibus", "et", "molestie", "ac,", "feugiat", "sed", "lectus", "vestibulum", "mattis", "ullamcorper", "velit", "sed", "ullamcorper", "morbi", "tincidunt", "ornare", "massa,", "eget", "egestas", "purus", "viverra", "accumsan", "in", "nisl", "nisi,", "scelerisque", "eu", "ultrices", "vitae,", "auctor", "eu", "augue", "ut", "lectus", "arcu,", "bibendum", "at", "varius", "vel,", "pharetra", "vel", "turpis", "nunc", "eget", "lorem", "dolor,", "sed", "viverra", "ipsum", "nunc", "aliquet", "bibendum", "enim,", "facilisis", "gravida", "neque", "convallis", "a", "cras", "semper", "auctor", "neque,", "vitae", "tempus", "quam", "pellentesque", "nec", "nam", "aliquam", "sem", "et", "tortor", "consequat", "id", "porta", "nibh", "venenatis", "cras", "sed", "felis", "eget", "velit", "aliquet", "sagittis", "id", "consectetur", "purus", "ut", "faucibus", "pulvinar", "elementum", "integer", "enim", "neque,", "volutpat", "ac", "tincidunt", "vitae,", "semper", "quis", "lectus", "nulla", "at", "volutpat", "diam", "ut", "venenatis", "tellus", "in", "metus", "vulputate", "eu", "scelerisque", "felis", "imperdiet", "proin", "fermentum", "leo", "vel", "orci", "porta", "non", "pulvinar", "neque", "laoreet", "suspendisse", "interdum", "consectetur", "libero,", "id", "faucibus", "nisl", "tincidunt", "eget", "nullam", "non", "nisi", "est,", "sit", "amet", "facilisis", "magna",
"etiam", "tempor,", "orci", "eu", "lobortis", "elementum,", "nibh", "tellus", "molestie", "nunc,", "non", "blandit", "massa", "enim", "nec", "dui", "nunc", "mattis", "enim", "ut", "tellus", "elementum", "sagittis", "vitae", "et", "leo", "duis", "ut", "diam", "quam", "nulla", "porttitor", "massa", "id", "neque", "aliquam", "vestibulum", "morbi", "blandit", "cursus", "risus,", "at", "ultrices", "mi", "tempus", "imperdiet", "nulla", "malesuada", "pellentesque", "elit", "eget", "gravida", "cum", "sociis", "natoque", "penatibus", "et", "magnis", "dis", "parturient", "montes,", "nascetur", "ridiculus", "mus", "mauris", "vitae", "ultricies", "leo", "integer", "malesuada", "nunc", "vel", "risus", "commodo", "viverra", "maecenas", "accumsan,", "lacus", "vel", "facilisis", "volutpat,", "est", "velit", "egestas", "dui,", "id", "ornare", "arcu", "odio", "ut", "sem", "nulla", "pharetra", "diam", "sit", "amet", "nisl", "suscipit", "adipiscing", "bibendum", "est", "ultricies", "integer", "quis", "auctor", "elit",
"sed", "vulputate", "mi", "sit", "amet", "mauris", "commodo", "quis", "imperdiet", "massa", "tincidunt", "nunc", "pulvinar", "sapien", "et", "ligula", "ullamcorper", "malesuada", "proin", "libero", "nunc,", "consequat", "interdum", "varius", "sit", "amet,", "mattis", "vulputate", "enim", "nulla", "aliquet", "porttitor", "lacus,", "luctus", "accumsan", "tortor", "posuere", "ac", "ut", "consequat", "semper", "viverra", "nam", "libero", "justo,", "laoreet", "sit", "amet", "cursus", "sit", "amet,", "dictum", "sit", "amet", "justo", "donec", "enim", "diam,", "vulputate", "ut", "pharetra", "sit", "amet,", "aliquam", "id", "diam", "maecenas", "ultricies", "mi", "eget", "mauris", "pharetra", "et", "ultrices", "neque", "ornare", "aenean", "euismod", "elementum", "nisi,", "quis", "eleifend", "quam", "adipiscing", "vitae", "proin", "sagittis,", "nisl", "rhoncus", "mattis", "rhoncus,", "urna", "neque", "viverra", "justo,", "nec", "ultrices", "dui", "sapien", "eget", "mi", "proin", "sed", "libero", "enim,", "sed", "faucibus", "turpis", "in", "eu", "mi", "bibendum", "neque", "egestas", "congue", "quisque", "egestas", "diam", "in", "arcu", "cursus", "euismod", "quis", "viverra", "nibh", "cras", "pulvinar", "mattis", "nunc,", "sed", "blandit", "libero", "volutpat", "sed", "cras", "ornare", "arcu", "dui", "vivamus", "arcu", "felis,", "bibendum", "ut", "tristique", "et,", "egestas", "quis", "ipsum", "suspendisse", "ultrices", "gravida", "dictum",
"fusce", "ut", "placerat", "orci", "nulla", "pellentesque", "dignissim", "enim,", "sit", "amet", "venenatis", "urna", "cursus", "eget", "nunc", "scelerisque", "viverra", "mauris,", "in", "aliquam", "sem", "fringilla", "ut", "morbi", "tincidunt", "augue", "interdum", "velit", "euismod", "in", "pellentesque", "massa", "placerat", "duis", "ultricies", "lacus", "sed", "turpis", "tincidunt", "id", "aliquet", "risus", "feugiat", "in", "ante", "metus,", "dictum", "at", "tempor", "commodo,", "ullamcorper", "a", "lacus", "vestibulum", "sed", "arcu", "non", "odio", "euismod", "lacinia", "at", "quis", "risus", "sed", "vulputate", "odio", "ut", "enim", "blandit", "volutpat", "maecenas", "volutpat", "blandit", "aliquam", "etiam", "erat", "velit,", "scelerisque", "in", "dictum", "non,", "consectetur", "a", "erat", "nam", "at", "lectus", "urna", "duis", "convallis", "convallis", "tellus,", "id", "interdum", "velit", "laoreet", "id", "donec", "ultrices", "tincidunt", "arcu,", "non", "sodales", "neque", "sodales", "ut", "etiam", "sit", "amet", "nisl", "purus,", "in", "mollis", "nunc",
"sed", "id", "semper", "risus", "in", "hendrerit", "gravida", "rutrum", "quisque", "non", "tellus", "orci,", "ac", "auctor", "augue", "mauris", "augue", "neque,", "gravida", "in", "fermentum", "et,", "sollicitudin", "ac", "orci", "phasellus", "egestas", "tellus", "rutrum", "tellus", "pellentesque", "eu", "tincidunt", "tortor", "aliquam", "nulla", "facilisi", "cras", "fermentum,", "odio", "eu", "feugiat", "pretium,", "nibh", "ipsum", "consequat", "nisl,", "vel", "pretium", "lectus", "quam", "id", "leo", "in", "vitae", "turpis", "massa", "sed", "elementum", "tempus", "egestas", "sed", "sed", "risus", "pretium", "quam", "vulputate", "dignissim", "suspendisse", "in", "est", "ante", "in", "nibh", "mauris,", "cursus", "mattis", "molestie", "a,", "iaculis", "at", "erat",
"pellentesque", "adipiscing", "commodo", "elit,", "at", "imperdiet", "dui", "accumsan", "sit", "amet", "nulla", "facilisi", "morbi", "tempus", "iaculis", "urna,", "id", "volutpat", "lacus", "laoreet", "non", "curabitur", "gravida", "arcu", "ac", "tortor", "dignissim", "convallis", "aenean", "et", "tortor", "at", "risus", "viverra", "adipiscing", "at", "in", "tellus", "integer", "feugiat", "scelerisque", "varius", "morbi", "enim", "nunc,", "faucibus", "a", "pellentesque", "sit", "amet,", "porttitor", "eget", "dolor", "morbi", "non", "arcu", "risus,", "quis", "varius", "quam", "quisque", "id", "diam", "vel", "quam", "elementum", "pulvinar", "etiam", "non", "quam", "lacus", "suspendisse", "faucibus", "interdum", "posuere", "lorem", "ipsum", "dolor", "sit", "amet,", "consectetur", "adipiscing", "elit", "duis", "tristique", "sollicitudin", "nibh", "sit", "amet", "commodo", "nulla", "facilisi",
"nullam", "vehicula", "ipsum", "a", "arcu", "cursus", "vitae", "congue", "mauris", "rhoncus", "aenean", "vel", "elit", "scelerisque", "mauris", "pellentesque", "pulvinar", "pellentesque", "habitant", "morbi", "tristique", "senectus", "et", "netus", "et", "malesuada", "fames", "ac", "turpis", "egestas", "maecenas", "pharetra", "convallis", "posuere", "morbi", "leo", "urna,", "molestie", "at", "elementum", "eu,", "facilisis", "sed", "odio", "morbi", "quis", "commodo", "odio", "aenean", "sed", "adipiscing", "diam", "donec", "adipiscing", "tristique", "risus", "nec", "feugiat", "in", "fermentum", "posuere", "urna", "nec", "tincidunt", "praesent", "semper", "feugiat", "nibh", "sed", "pulvinar", "proin", "gravida", "hendrerit", "lectus", "a", "molestie"
];
//random integer method.
Lorem.prototype.randomInt = function (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
};
//text creator method with parameters: how many, what
Lorem.prototype.createText = function(count, type) {
switch (type) {
//paragraphs are loads of sentences.
case Lorem.TYPE.PARAGRAPH:
var paragraphs = new Array;
for (var i = 0; i < count; i++) {
var paragraphLength = this.randomInt(10, 20);
var paragraph = this.createText(paragraphLength, Lorem.TYPE.SENTENCE);
paragraphs.push('<p>'+paragraph+'</p>');
}
return paragraphs.join('\n');
break;
//sentences are loads of words.
case Lorem.TYPE.SENTENCE:
var sentences = new Array;
for (var i = 0; i < count; i++) {
var sentenceLength = this.randomInt(5, 10);
var words = this.createText(sentenceLength, Lorem.TYPE.WORD).split(' ');
words[0] = words[0].substr(0, 1).toUpperCase() + words[0].substr(1);
var sentence = words.join(' ');
sentences.push(sentence);
}
return (sentences.join('. ') + '.').replace(/(\.\,|\,\.)/g, '.');
break;
//words are words
case Lorem.TYPE.WORD:
var wordIndex = this.randomInt(0, Lorem.WORDS.length - count - 1);
return Lorem.WORDS.slice(wordIndex, wordIndex + count).join(' ').replace(/\.|\,/g, '');
break;
}
};
Lorem.prototype.createLorem = function(element) {
var lorem = new Array;
var count;
if (/\d+-\d+[psw]/.test(this.query)){
var range = this.query.replace(/[a-z]/,'').split("-");
count = Math.floor(Math.random() * parseInt(range[1])) + parseInt(range[0]);
}else{
count = parseInt(this.query);
}
if (/\d+p/.test(this.query)) {
var type = Lorem.TYPE.PARAGRAPH;
}
else if (/\d+s/.test(this.query)) {
var type = Lorem.TYPE.SENTENCE;
}
else if (/\d+w/.test(this.query)) {
var type = Lorem.TYPE.WORD;
}
lorem.push(this.createText(count, type));
lorem = lorem.join(' ');
if (element) {
if (this.type == Lorem.TEXT)
element.innerHTML += lorem;
else if (this.type == Lorem.IMAGE) {
//TODO: for now, using lorempixum.
var path = '';
var options = this.query.split(' ');
if (options[0] == 'gray') {
path += '/g';
options[0] = '';
}
if (element.getAttribute('width'))
path += '/' + element.getAttribute('width');
if (element.getAttribute('height'))
path += '/' + element.getAttribute('height');
path += '/' + options.join(' ').replace(/(^\s+|\s+$)/, '');
element.src = 'http://lorempixum.com'+path.replace(/\/\//, '/');
}
}
if (element == null)
return lorem;
};
//Register as jQuery
if (typeof jQuery != 'undefined') {
(function($) {
$.fn.lorem = function() {
$(this).each(function() {
var lorem = new Lorem;
lorem.type = $(this).is('img') ? Lorem.IMAGE : Lorem.TEXT;
//data-lorem can be taken with data function (thanks to http://forrst.com/people/webking)
lorem.query = $(this).data('lorem');
lorem.createLorem(this);
})
};
//If developer run this javascript, then we can run the lorem.js
$(document).ready(function() {
$('[data-lorem]').lorem();
});
})(jQuery);
}
})();

11
static/js/page.js
View File

@ -21,7 +21,14 @@ $('a[href*="#"]:not(a[modal])').click(function () {
$('.nav-bar__menu')[0].style.transition = "max-height 0.5s"; $('.nav-bar__menu')[0].style.transition = "max-height 0.5s";
$('.nav-bar__menu')[0].classList.toggle("hide-menu"); $('.nav-bar__menu')[0].classList.toggle("hide-menu");
} }
$('.nav-bar__menu-button, .nav-bar__menu-item > a').click(toggleMobileMenu)
function hideMobileMenu() {
$('.nav-bar__menu')[0].style.transition = "max-height 0.5s";
$('.nav-bar__menu')[0].classList.add("hide-menu");
}
$('.nav-bar__menu-button, .nav-bar__menu, .nav-bar__menu-item').click(toggleMobileMenu)
$("main").click(hideMobileMenu)
}()); }());
@ -31,7 +38,7 @@ $('#cell').click(function () { $('#cell-number').toggleClass("hide"); });
function navbarSpacer() { function navbarSpacer() {
$('.nav-bar-spacer').css({ $('.nav-bar-spacer').css({
height: $(".nav-bar__header").outerHeight(true), height: $("#nav-bar").outerHeight(true),
}); });
} }