Commit b6864c08 authored by Étienne Oz's avatar Étienne Oz 🖖

Merge branch 'master' of gitlab.com:Luuse/Luuse.tools/typotheque

parents f3f94f1b 8b9c56db
This diff is collapsed.
<?= $templates->setScripts() ?>
<?= $templates->setScripts($themeLibrary) ?>
<?php $validate->resetSess() ?>
</body>
</html>
......
......@@ -7,15 +7,12 @@
<?= $datas->setStylesheets($themeLibrary, $themeSpecimen) ?>
</head>
<body class="<?= $routes->current()->uid ?>">
<?php if(!$templates->isHomePage()): ?>
<header>
<?php if(!$accounts->isFirst()): ?>
<h1><?= $about->title ?></h1>
<a href="<?= $routes->index() ?>">Collection</a>
<h1><a href="<?= $routes->index() ?>"><?= $about->title ?></a></h1>
<?php endif ?>
<?php if(!$accounts->isFirst()): ?>
<?php include("site/inc/nav.php"); ?>
<?php endif ?>
</header>
<?php endif ?>
<?php include("site/inc/errors.php") ?>
......@@ -15,9 +15,9 @@
<?php if(isset($_SESSION["user"])): ?>
<h4>User</h4>
<ul>
<?php if(isset($user->admin) && $user->admin == 1): ?>
<li><a href="<?= $routes->index() ?>new-account">New Account</a></li>
<?php endif ?>
<?php if(isset($user->admin) && $user->admin == 1): ?>
<li><a href="<?= $routes->index() ?>new-account">New Account</a></li>
<?php endif ?>
<li><a href="<?= $routes->index() ?>account">Update</a></li>
<li><a href="<?= $routes->index() ?>logout">Logout</a></li>
</ul>
......
......@@ -60,7 +60,6 @@
<?php endif ?>
<h2><a href="#about">About</a></h2>
</div>
<?php include("site/inc/nav.php"); ?>
</header>
<main>
<section id="fonts">
......
function onWriteTest(){
var inputs = document.querySelectorAll("input.demo");
inputs.forEach(function(input){
input.addEventListener("input", function(){
var test = input.value;
inputs.forEach(function(input){
input.value = test;
});
});
});
}
function hexToComp(hex){
var rgb = 'rgb(' + (hex = hex.replace('#', '')).match(new RegExp('(.{' + hex.length/3 + '})', 'g')).map(function(l) { return parseInt(hex.length%2 ? l+l : l, 16); }).join(',') + ')';
rgb = rgb.replace(/[^\d,]/g, '').split(',');
var r = rgb[0], g = rgb[1], b = rgb[2];
r /= 255.0;
g /= 255.0;
b /= 255.0;
var max = Math.max(r, g, b);
var min = Math.min(r, g, b);
var h, s, l = (max + min) / 2.0;
if(max == min) {
h = s = 0;
} else {
var d = max - min;
s = (l > 0.5 ? d / (2.0 - max - min) : d / (max + min));
if(max == r && g >= b) {
h = 1.0472 * (g - b) / d ;
} else if(max == r && g < b) {
h = 1.0472 * (g - b) / d + 6.2832;
} else if(max == g) {
h = 1.0472 * (b - r) / d + 2.0944;
} else if(max == b) {
h = 1.0472 * (r - g) / d + 4.1888;
}
}
h = h / 6.2832 * 360.0 + 0;
h+= 180;
if (h > 360) { h -= 360; }
h /= 360;
if(s === 0){
r = g = b = l;
} else {
var hue2rgb = function hue2rgb(p, q, t){
if(t < 0) t += 1;
if(t > 1) t -= 1;
if(t < 1/6) return p + (q - p) * 6 * t;
if(t < 1/2) return q;
if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
return p;
};
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
var p = 2 * l - q;
r = hue2rgb(p, q, h + 1/3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1/3);
}
r = Math.round(r * 255);
g = Math.round(g * 255);
b = Math.round(b * 255);
rgb = b | (g << 8) | (r << 16);
return "#" + (0x1000000 | rgb).toString(16).substring(1);
}
function changeBackColor(demos){
var backColorInput = document.getElementById("backColor");
backColorInput.addEventListener("input", function(){
var newColor= this.value;
var fonts = document.querySelectorAll("section.font");
fonts.forEach(function(font){
font.style.backgroundColor=newColor;
});
document.body.style.backgroundColor=newColor;
});
}
function changeTextColor(demos){
var textColorInput = document.getElementById("textColor");
textColorInput.addEventListener("input", function(){
var newColor= this.value;
document.body.style.color=newColor;
var contrastsElements = document.querySelectorAll('[style*="color:red;"]');
});
}
function changeFontSize(demos){
var fontSizeInput = document.getElementById("fontSize");
fontSizeInput.addEventListener("input", function(){
var newSize = this.value;
demos.forEach(function(demo){
demo.style.fontSize=newSize+"px";
});
});
}
function tester(){
var demos = document.querySelectorAll(".demo");
onWriteTest();
changeFontSize(demos);
changeTextColor(demos);
changeBackColor(demos);
}
function showMoreFont(){
var shows = document.querySelectorAll(".showMoreFonts");
shows.forEach(function(show){
show.addEventListener("click", function(){
var tester = this.parentElement.querySelector(".moreFonts");
var name = this.querySelector(".action");
var sign = this.querySelector(".sign");
var isOpen = (tester.classList.contains("open"));
if(isOpen){
tester.classList.remove("open");
sign.innerHTML="+";
name.innerHTML="See All";
}else{
tester.classList.add("open");
sign.innerHTML="-";
name.innerHTML="Hide All";
}
});
});
}
function showMoreTags(){
var lists = document.querySelectorAll(".tagList");
lists.forEach(function(list){
var title = list.getElementsByTagName("H4")[0];
list.addEventListener("mouseover", function(){
var items = list.getElementsByTagName("UL")[0];
var isOpen = (list.classList.contains("open"));
if(isOpen){
list.classList.remove("open");
}else{
list.classList.add("open");
}
});
list.addEventListener("mouseout", function(){
list.classList.remove("open");
});
});
}
function listOnTags(tags, name){
var ons = [];
tags.forEach(function(subtag){
if(subtag.classList.contains("on")){
ons.push(subtag.getAttribute("data-"+name));
}
});
return ons;
}
function noTags(){
return (onLis.length > 0) ? false : true;
}
function setTags(){
var lists = document.querySelectorAll(".tagList");
lists.forEach(function(list){
var name = list.dataset.name;
var tags = list.querySelectorAll("li");
tags.forEach(function(tag){
tag.addEventListener("click", function(){
var value = tag.getAttribute("data-"+name);
var isOn = (tag.classList.contains("on"));
var fonts = document.querySelectorAll("#fonts .font");
if(isOn){ tag.classList.remove("on"); }else{ tag.classList.add("on"); }
var onTags = listOnTags(tags, name);
var hasAnyTags = document.querySelector(".tagLists li.on");
fonts.forEach(function(font){
var hasThisTag = font.hasAttribute("data-"+name);
var hasValue = [];
if(hasAnyTags !== null){
if(hasThisTag){
var fontTags = font.getAttribute("data-"+name).split(" / ");
fontTags.forEach(function(fontTag){
if(onTags.indexOf(fontTag) == -1){
hasValue.push(false);
}else{
hasValue.push(true);
}
});
if(hasValue.indexOf(true) == -1){
font.classList.add("hidden");
}else{
font.classList.remove("hidden");
}
}else{
font.classList.add("hidden");
}
}else{
font.classList.remove("hidden");
}
});
});
});
});
}
document.addEventListener("DOMContentLoaded", function(){
tester();
showMoreFont();
showMoreTags();
setTags();
});
......@@ -11,15 +11,15 @@ body header {
margin: 1rem;
margin-top: 0;
padding-bottom: 1rem; }
body header .tester {
position: fixed;
bottom: 10px;
background: #cecece;
outline: 1px solid #3111b9;
padding: 4px; }
body header h1 {
border-bottom: 1px solid red;
width: 100%; }
body header .index {
text-align: right;
right: 22px;
position: absolute; }
body header .index h2 {
display: none; }
body header .tagLists h2 {
width: 100%; }
body header .tagLists .tagList.open h4:hover::after {
......@@ -30,9 +30,14 @@ body header {
body header .tagLists .tagList.open > ul li {
display: block; }
body header .tagLists .tagList {
width: 33%; }
body header .tagLists .tagList h4::before {
width: 25%; }
body header .tagLists .tagList.sort h4::before {
content: "⤷ "; }
body header .tagLists .tagList:hover li {
border-bottom: 1px solid red;
display: block; }
body header .tagLists .tagList:hover li:nth-last-child(1) {
border-bottom: none; }
body header .tagLists .tagList h4:hover {
color: red;
cursor: pointer; }
......@@ -66,45 +71,68 @@ body header {
color: red;
content: "◉ "; }
body header .font-nav {
width: 65%; }
body header .tester {
width: 20%; }
body header .tester > ul {
width: 85%; }
body header .title {
width: 15%; }
body header .title:hover ul {
margin: 0;
background: #cecece;
border-left: 1px red solid;
border-right: 1px solid red;
border-bottom: 1px solid red;
padding: 0 5px;
margin-left: -1px;
display: block; }
body header .title > ul {
display: none; }
body header .tester > ul li > span:first-of-type {
body header .title > ul li > span:first-of-type {
margin: 0 1.5rem 0 0; }
body header .tester > ul li .active {
body header .title > ul li .active {
color: red; }
body header .tester > ul li input {
body header .title > ul li input {
display: inline;
width: 3rem;
height: 1rem;
color: red; }
body header .tester > ul li input[name="font-size"] {
body header .title > ul li input[name="font-size"] {
width: 5rem; }
body header .tester > ul li input#search_query {
body header .title > ul li input#search_query {
width: 6rem;
color: black; }
body nav .links > ul, body nav .links > div {
padding: 0 1.5rem 0 0; }
body nav h4:hover::after {
margin-right: 20px;
float: right;
content: "+"; }
body nav .accounts ul,
body nav .fonts ul {
display: none; }
body nav .accounts ul li::before,
body nav .fonts ul li::before {
content: "- "; }
body nav .accounts:hover,
body nav .fonts:hover {
cursor: pointer; }
body nav .accounts:hover ul,
body nav .fonts:hover ul {
display: block; }
body nav #search {
margin: 1.5rem 0 0 0; }
body nav {
position: fixed;
right: 10px;
bottom: 10px; }
body nav .links > ul, body nav .links > div {
padding: 0 1.5rem 0 0; }
body nav .accounts,
body nav .fonts {
width: 100px;
float: left; }
body nav .accounts h4,
body nav .fonts h4 {
background: #cecece;
border-bottom: 1px solid #3111b9; }
body nav .accounts ul,
body nav .fonts ul {
position: fixed;
bottom: 30px;
width: auto;
display: none;
padding: 4px;
background: #cecece;
margin-left: -4px; }
body nav .accounts ul li,
body nav .fonts ul li {
border-bottom: 1px solid #3111b9; }
body nav .accounts:hover,
body nav .fonts:hover {
cursor: pointer; }
body nav .accounts:hover ul,
body nav .fonts:hover ul {
display: block; }
body nav #search {
margin: 1.5rem 0 0 0; }
body main {
padding: 20px;
width: 100%; }
......
{
"version": 3,
"mappings": ";AAEE,UAAK;EACH,OAAO,EAAE,IAAI;EACb,KAAK,EAAE,IAAI;AAGd,aAAS;EACR,QAAQ,EAAE,KAAK;EACf,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACV,UAAU,EAAE,OAAO;AAGrB,WAAM;EACL,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,CAAC;EACb,cAAc,EAAE,IAAI;EACpB,cAAE;IACH,aAAa,EAAE,aAAa;IACzB,KAAK,EAAE,IAAI;EAGf,kBAAO;IACN,UAAU,EAAE,KAAK;IACf,KAAK,EAAE,IAAI;IACX,QAAQ,EAAE,QAAQ;IACpB,qBAAG;MACF,OAAO,EAAE,IAAI;EAKZ,wBAAE;IACA,KAAK,EAAE,IAAI;EAKX,mDAAe;IAEb,OAAO,EAAE,GAAG;IACZ,KAAK,EAAE,KAAK;EAId,sCAAE;IAEA,KAAK,EAAE,GAAG;EAKd,2CAAG;IACF,OAAO,EAAE,KAAK;EAQf,8BAAQ;IACT,KAAK,EAAE,GAAG;IAGP,yCAAU;MAER,OAAO,EAAE,IAAI;IAGf,uCAAQ;MAEN,KAAK,EAAE,GAAG;MACV,MAAM,EAAE,OAAO;IAIjB,8CAAe;MACjB,YAAY,EAAE,IAAI;MACd,OAAO,EAAE,GAAG;MACZ,KAAK,EAAE,KAAK;IAId,mCAAG;MAED,MAAM,EAAE,CAAC;MACb,UAAU,EAAE,OAAO;MACnB,WAAW,EAAE,aAAa;MAC1B,YAAY,EAAE,aAAa;MAC3B,aAAa,EAAE,aAAa;MAC5B,OAAO,EAAE,KAAK;MACd,WAAW,EAAE,IAAI;MAEb,sCAAE;QAEL,OAAO,EAAE,IAAI;MAGd,yCAAM;QACL,OAAO,EAAE,KAAK;MAGX,4CAAQ;QAEN,MAAM,EAAE,OAAO;QACf,KAAK,EAAE,GAAG;MAGZ,8CAAU;QAER,OAAO,EAAE,IAAI;QACb,SAAS,EAAE,MAAM;QACjB,OAAO,EAAE,UAAU;MAIrB,uDAAmB;QAEjB,KAAK,EAAE,IAAI;MAGb;0DACgB;QAEd,KAAK,EAAE,GAAG;QACV,OAAO,EAAE,IAAI;EAOtB,qBAAU;IACT,KAAK,EAAE,GAAG;EAGV,mBAAO;IAEP,KAAK,EAAE,GAAG;IAER,wBAAG;MAEJ,OAAO,EAAE,IAAI;MAQR,gDAAmB;QAGjB,MAAM,EAAE,YAAY;MAItB,mCAAO;QAEL,KAAK,EAAE,GAAG;MAGZ,iCAAK;QAEH,OAAO,EAAE,MAAM;QACf,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,GAAG;MAGZ,mDAAuB;QAErB,KAAK,EAAE,IAAI;MAIb,8CAAkB;QAEhB,KAAK,EAAE,IAAI;QACX,KAAK,EAAE,KAAK;AAiBlB,2CAAS;EAEP,OAAO,EAAE,YAAY;AAKzB,wBAAe;EAEf,YAAY,EAAE,IAAI;EAChB,KAAK,EAAE,KAAK;EACZ,OAAO,EAAE,GAAG;AAOZ;kBAAE;EAED,OAAO,EAAE,IAAI;EAEb;+BAAU;IAET,OAAO,EAAE,IAAI;AAOnB;qBACY;EAEV,MAAM,EAAE,OAAO;EAEf;0BAAE;IAEA,OAAO,EAAE,KAAK;AAKlB,gBAAO;EAEL,MAAM,EAAE,YAAY;AAItB,SAAI;EACH,OAAO,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI",
"mappings": "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",
"sources": ["nav.scss"],
"names": [],
"file": "nav.css"
}
}
\ No newline at end of file
@mixin nav-hover {
margin: 0;
background: #cecece;
border-left: 1px red solid;
border-right: 1px solid red;
border-bottom: 1px solid red;
padding: 0 5px;
margin-left: -1px;
}
body{
.flex{
......@@ -16,19 +27,18 @@ body{
margin: 1rem;
margin-top: 0;
padding-bottom: 1rem;
.tester {
position: fixed;
bottom: 10px;
background: #cecece;
outline: 1px solid #3111b9;
padding: 4px;
}
h1{
border-bottom: 1px solid red;
width: 100%;
}
.index {
text-align: right;
right: 22px;
position: absolute;
h2 {
display: none;
}
}
.tagLists{
h2{
......@@ -61,14 +71,24 @@ body{
}
.tagList{
width: 33%;
width: 25%;
h4::before{
&.sort h4::before{
content: "⤷ ";
}
&:hover {
li {
border-bottom: 1px solid red;
&:nth-last-child(1) {
border-bottom: none;
}
display: block;
}
}
h4:hover{
color: red;
......@@ -84,17 +104,17 @@ body{
}
>ul{
margin: 0;
background: #cecece;
border-left: 1px red solid;
border-right: 1px solid red;
border-bottom: 1px solid red;
padding: 0 5px;
margin-left: -1px;
@include nav-hover;
// margin: 0;
// background: #cecece;
// border-left: 1px red solid;
// border-right: 1px solid red;
// border-bottom: 1px solid red;
// padding: 0 5px;
// margin-left: -1px;
li{
display: none;
}
......@@ -103,13 +123,12 @@ body{
}
li:hover{
cursor: pointer;
color: red;
}
li::before{
li::before{
content: "◯ ";
font-size: 0.8rem;
padding: 0 1rem 0 0;
......@@ -117,13 +136,11 @@ body{
}
li.on:hover::before{
color: #000;
}
li.on::before,
li:hover::before{
color: red;
content: "◉ ";
}
......@@ -133,15 +150,20 @@ body{
}
.font-nav {
width: 65%;
width: 85%;
}
.tester{
.title{
width: 20%;
width: 15%;
&:hover {
ul {
@include nav-hover;
display: block;
}
}
>ul{
// background: #cecece;
display: none;
li{
......@@ -183,70 +205,58 @@ body{
}
}
}
}
}
nav{
nav{
.links{
>ul, >div{
padding: 0 1.5rem 0 0;
}
}
h4:hover::after{
margin-right: 20px;
float: right;
content: "+";
}
.accounts,
.fonts{
ul{
display: none;
li::before{
content: "- ";
}
}