added shadow mode
This commit is contained in:
parent
16d319a514
commit
551d830194
3 changed files with 139 additions and 35 deletions
|
@ -21,7 +21,7 @@
|
||||||
url('fonts/Roboto/Roboto-Thin.ttf') format('truetype');
|
url('fonts/Roboto/Roboto-Thin.ttf') format('truetype');
|
||||||
}
|
}
|
||||||
|
|
||||||
body.style-1 {
|
body {
|
||||||
font-family: "Roboto";
|
font-family: "Roboto";
|
||||||
width: 80%;
|
width: 80%;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
@ -34,34 +34,70 @@ p { color: #444; }
|
||||||
a { text-decoration: none; }
|
a { text-decoration: none; }
|
||||||
|
|
||||||
button {
|
button {
|
||||||
margin: 4px 0px;
|
margin: 4px 4px;
|
||||||
padding: 8px;
|
padding: 10px;
|
||||||
background-color: #3BAD5F;
|
background-color: #3BAD5F;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
border: 0;
|
border: 0;
|
||||||
font-family: "Roboto";
|
font-family: "Roboto";
|
||||||
font-size: 120%;
|
font-size: 120%;
|
||||||
|
/* box-shadow: offset x, offset y, blur radius, color */
|
||||||
|
box-shadow: 4px 4px 5px #888;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover { box-shadow: 6px 6px; }
|
button:hover { color: #000; }
|
||||||
|
button:active { box-shadow: none; }
|
||||||
|
|
||||||
.name {
|
/*.text { position: relative; }*/
|
||||||
|
|
||||||
|
#sample {
|
||||||
font-size: 200%;
|
font-size: 200%;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
background-color: #eee;
|
/*background-color: #eee;*/
|
||||||
border: thin #ededed;
|
border: thin #ededed;
|
||||||
display: block;
|
display: block;
|
||||||
clear: both;
|
clear: both;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 0px;
|
||||||
font-family: "Lobster";
|
font-family: "Lobster";
|
||||||
|
line-height: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blue { color: blue; }
|
.blue { color: blue; }
|
||||||
.red { color: red; }
|
.red { color: red; }
|
||||||
.green { color: green; }
|
.green { color: green; }
|
||||||
.black { color: black; }
|
.black { color: black; }
|
||||||
|
.shadow {
|
||||||
|
color: white;
|
||||||
|
text-shadow: 1px 1px 20px #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.bold { font-weight: bold; }
|
.bold { font-weight: bold; }
|
||||||
.italic { font-style: italic; }
|
.italic { font-style: italic; }
|
||||||
.small-caps { font-variant: small-caps; }
|
.small-caps { font-variant: small-caps; }
|
||||||
|
|
||||||
|
|
||||||
|
.app {
|
||||||
|
background-color: #eee;
|
||||||
|
padding: 1em;
|
||||||
|
border-radius: 20px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.text, .controls {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
vertical-align: top;
|
||||||
|
width: 25%;
|
||||||
|
min-width: 14em;
|
||||||
|
padding-right: 4px;
|
||||||
|
}
|
||||||
|
.contols {
|
||||||
|
width: auto;
|
||||||
|
padding-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switches {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
45
index.html
45
index.html
|
@ -9,35 +9,40 @@
|
||||||
<meta name="keywords" content="git,forge,forgejo">
|
<meta name="keywords" content="git,forge,forgejo">
|
||||||
<meta name="referrer" content="no-referrer">
|
<meta name="referrer" content="no-referrer">
|
||||||
|
|
||||||
<link rel="stylesheet" href="css/style.css">
|
<!-- <link rel="stylesheet" href="css/style.css"> -->
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body class="style-1">
|
<body>
|
||||||
<h1>Digital Empowerment</h1>
|
<h1>Digital Empowerment</h1>
|
||||||
<p>The purpose of these sessions is to show Chch South Karamata learners that they don't
|
<p>Chch South Karamata learners don't have to be mere riders in their digital journey - they can drive themselves!</p>
|
||||||
have to be mere riders in their digital journey - they can become drivers.</p>
|
|
||||||
|
|
||||||
<p>Find <a href="https://forge.magnificent.nz/lightweight/karamata" title="Clicking this link will take you to a code 'repository' for this project, where you can get *all* the code.">this code</a> on the web!</p>
|
<p>Find <a href="https://forge.magnificent.nz/lightweight/karamata" title="Clicking this link will take you to a code 'repository' for this project, where you can get *all* the code.">this code</a> on the web!</p>
|
||||||
|
|
||||||
<div class='app1'>
|
<div class='app'>
|
||||||
<p class='name'>Take charge!</p>
|
<div class='text'>
|
||||||
<div class='colors'>
|
<p id='sample'>Take charge!</p>
|
||||||
<button onclick="changeColor('blue')">Change to <span class="blue">blue</span></button>
|
|
||||||
<button onclick="changeColor('red')">Change to <span class="red">red</span></button>
|
|
||||||
<button onclick="changeColor('green')">Change to <span class="green">green</span></button>
|
|
||||||
<button onclick="changeColor('black')">Change to <span class="black">black</span></button>
|
|
||||||
</div>
|
</div>
|
||||||
<div class='fonts'>
|
<div class='controls'>
|
||||||
<button onclick="changeWeight()">Change to <span class="bold">bold</span></button>
|
<div class='colors'>
|
||||||
<button onclick="changeStyle()">Change to <span class="italic">italics</span></button>
|
<button onclick="changeColor('blue')"><span class="blue">Blue</span></button>
|
||||||
<button onclick="changeVariant()">Change to <span class="small-caps">small capital letters</span></button>
|
<button onclick="changeColor('red')"><span class="red">Red</span></button>
|
||||||
</div>
|
<button onclick="changeColor('green')"><span class="green">Green</span></button>
|
||||||
|
<button onclick="changeColor('black')"><span class="black">Black</span></button>
|
||||||
|
<button onclick="changeToShadow()"><span class="shadow">Shadow</span></button>
|
||||||
|
</div>
|
||||||
|
<div class='fonts'>
|
||||||
|
<button onclick="changeWeight()"><span class="bold">Bold</span></button>
|
||||||
|
<button onclick="changeStyle()"><span class="italic">Italics</span></button>
|
||||||
|
<button onclick="changeVariant()"><span class="small-caps">Small Caps</span></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="clear: both;"></div>
|
||||||
<script src="js/script.js"></script>
|
<script src="js/script.js"></script>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="app2">
|
<div class="switches">
|
||||||
|
<button onclick="changeCSS()">Styles <span id="status">on</span></button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>Questions? <a href="https://davelane.nz/contact">Get in touch</a> with Dave.</p>
|
<p>Questions? <a href="https://davelane.nz/contact">Get in touch</a> with Dave.</p>
|
||||||
</body>
|
</body>
|
||||||
|
|
79
js/script.js
79
js/script.js
|
@ -1,43 +1,106 @@
|
||||||
|
|
||||||
const name = document.querySelector(".name");
|
const sample = document.querySelector("#sample");
|
||||||
|
|
||||||
// I commented the following line out by putting '//' at the start of the line.
|
// I commented the following line out by putting '//' at the start of the line.
|
||||||
//console.log(document);
|
//console.log(document);
|
||||||
|
|
||||||
|
console.log('color = ', sample.style.color);
|
||||||
|
// set default color
|
||||||
|
if (!sample.style.color) {
|
||||||
|
var color;
|
||||||
|
// from https://stackoverflow.com/questions/46336002/how-to-get-computed-background-color-style-inherited-from-parent-element
|
||||||
|
var div = document.createElement("div");
|
||||||
|
document.head.appendChild(div);
|
||||||
|
var color = window.getComputedStyle(div).color;
|
||||||
|
document.head.removeChild(div);
|
||||||
|
sample.style.color = color;
|
||||||
|
}
|
||||||
|
|
||||||
// red, green, blue, yellow, black, white, or #ccc or #5ef21d
|
// red, green, blue, yellow, black, white, or #ccc or #5ef21d
|
||||||
function changeColor(color) {
|
function changeColor(color) {
|
||||||
name.style.color = color;
|
sample.style.color = color;
|
||||||
}
|
}
|
||||||
|
|
||||||
function changeWeight() {
|
function changeWeight() {
|
||||||
let weight;
|
let weight;
|
||||||
if (name.style.fontWeight == 'bold') {
|
if (sample.style.fontWeight == 'bold') {
|
||||||
weight = 'normal';
|
weight = 'normal';
|
||||||
} else {
|
} else {
|
||||||
weight = 'bold';
|
weight = 'bold';
|
||||||
}
|
}
|
||||||
name.style.fontWeight = weight;
|
sample.style.fontWeight = weight;
|
||||||
}
|
}
|
||||||
|
|
||||||
// normal or small-caps
|
// normal or small-caps
|
||||||
function changeVariant() {
|
function changeVariant() {
|
||||||
let variant;
|
let variant;
|
||||||
if (name.style.fontVariant == 'small-caps') {
|
if (sample.style.fontVariant == 'small-caps') {
|
||||||
variant = 'normal';
|
variant = 'normal';
|
||||||
} else {
|
} else {
|
||||||
variant = 'small-caps';
|
variant = 'small-caps';
|
||||||
}
|
}
|
||||||
name.style.fontVariant = variant;
|
sample.style.fontVariant = variant;
|
||||||
}
|
}
|
||||||
|
|
||||||
// normal, italic, or oblique
|
// normal, italic, or oblique
|
||||||
function changeStyle() {
|
function changeStyle() {
|
||||||
let style;
|
let style;
|
||||||
if (name.style.fontStyle == 'italic') {
|
if (sample.style.fontStyle == 'italic') {
|
||||||
style = 'normal';
|
style = 'normal';
|
||||||
} else {
|
} else {
|
||||||
style = 'italic';
|
style = 'italic';
|
||||||
}
|
}
|
||||||
console.log('style = ', style);
|
console.log('style = ', style);
|
||||||
name.style.fontStyle = style;
|
sample.style.fontStyle = style;
|
||||||
|
}
|
||||||
|
|
||||||
|
// set text shadow
|
||||||
|
function changeToShadow() {
|
||||||
|
var color = sample.style.color;
|
||||||
|
var shadow;
|
||||||
|
console.log('found color ', sample);
|
||||||
|
// if we're already in shadow mode, reset color
|
||||||
|
var str = '0px 0px 5px';
|
||||||
|
// is shadow mode already on? If so disable it.
|
||||||
|
if (sample.getAttribute('text-shadow') && sample.getAttribute('text-shadow').includes(str)) {
|
||||||
|
shadow = sample.getAttribute('text-shadow');
|
||||||
|
console.log('shadow', shadow);
|
||||||
|
// replace the contents of str with nuthin' to get the color
|
||||||
|
color = shadow.replace(str,'');
|
||||||
|
console.log('got color ', color);
|
||||||
|
// return the color to its previous state
|
||||||
|
sample.style.color = color;
|
||||||
|
// remove shadow
|
||||||
|
sample.removeAttribute('text-shadow');
|
||||||
|
// otherwise enable shadow mode...
|
||||||
|
} else {
|
||||||
|
sample.style.textShadow = str + ' ' + color;
|
||||||
|
console.log('set textShadow to ', sample.style.textShadow);
|
||||||
|
sample.style.color = 'white';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// turn CSS on and off and change status text
|
||||||
|
function changeCSS() {
|
||||||
|
var indicator = document.getElementById('status');
|
||||||
|
var linkNode = null;
|
||||||
|
// do we already have the link in the DOM?
|
||||||
|
if (linkNode = document.getElementsByTagName('link')[0]) {
|
||||||
|
linkNode.parentNode.removeChild(linkNode);
|
||||||
|
// update the indicator
|
||||||
|
indicator.textContent = 'on';
|
||||||
|
} else {
|
||||||
|
var head = document.getElementsByTagName('HEAD')[0];
|
||||||
|
// Create new link Element
|
||||||
|
var link = document.createElement('link');
|
||||||
|
// set the attributes for link element
|
||||||
|
link.rel = 'stylesheet';
|
||||||
|
link.type = 'text/css';
|
||||||
|
link.href = 'css/style.css';
|
||||||
|
// Append link element to HTML head
|
||||||
|
head.appendChild(link);
|
||||||
|
// update the indicator
|
||||||
|
indicator.textContent = 'off';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue