lightweight/karamata
Template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

added shadow mode

Browse source
This commit is contained in:
Dave Lane 2023-07-27 19:57:59 +12:00
parent 16d319a514
commit 551d830194
3 changed files with 139 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
css/style.css
View file

@ -21,7 +21,7 @@
url('fonts/Roboto/Roboto-Thin.ttf') format('truetype');
}
body.style-1 {
body {
font-family: "Roboto";
width: 80%;
margin: auto;
@ -34,34 +34,70 @@ p { color: #444; }
a { text-decoration: none; }
button {
margin: 4px 0px;
padding: 8px;
margin: 4px 4px;
padding: 10px;
background-color: #3BAD5F;
color: #fff;
border-radius: 10px;
border: 0;
font-family: "Roboto";
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%;
padding: 12px;
background-color: #eee;
/*background-color: #eee;*/
border: thin #ededed;
display: block;
clear: both;
margin-bottom: 20px;
margin-bottom: 0px;
font-family: "Lobster";
line-height: 1em;
}
.blue { color: blue; }
.red { color: red; }
.green { color: green; }
.black { color: black; }
.shadow {
color: white;
text-shadow: 1px 1px 20px #000;
}
.bold { font-weight: bold; }
.italic { font-style: italic; }
.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
View file

@ -9,35 +9,40 @@
<meta name="keywords" content="git,forge,forgejo">
<meta name="referrer" content="no-referrer">
<link rel="stylesheet" href="css/style.css">
<!-- <link rel="stylesheet" href="css/style.css"> -->
</head>
<body class="style-1">
<body>
<h1>Digital Empowerment</h1>
<p>The purpose of these sessions is to show Chch South Karamata learners that they don't
have to be mere riders in their digital journey - they can become drivers.</p>
<p>Chch South Karamata learners don't have to be mere riders in their digital journey - they can drive themselves!</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'>
<p class='name'>Take charge!</p>
<div class='colors'>
<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 class='app'>
<div class='text'>
<p id='sample'>Take charge!</p>
</div>
<div class='fonts'>
<button onclick="changeWeight()">Change to <span class="bold">bold</span></button>
<button onclick="changeStyle()">Change to <span class="italic">italics</span></button>
<button onclick="changeVariant()">Change to <span class="small-caps">small capital letters</span></button>
</div>
<div class='controls'>
<div class='colors'>
<button onclick="changeColor('blue')"><span class="blue">Blue</span></button>
<button onclick="changeColor('red')"><span class="red">Red</span></button>
<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>
</div>
</div>
<div class="app2">
</div>
<div class="switches">
<button onclick="changeCSS()">Styles <span id="status">on</span></button>
</div>
<p>Questions? <a href="https://davelane.nz/contact">Get in touch</a> with Dave.</p>
</body>

79
js/script.js
View file

@ -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.
//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
function changeColor(color) {
name.style.color = color;
sample.style.color = color;
}
function changeWeight() {
let weight;
if (name.style.fontWeight == 'bold') {
if (sample.style.fontWeight == 'bold') {
weight = 'normal';
} else {
weight = 'bold';
}
name.style.fontWeight = weight;
sample.style.fontWeight = weight;
}
// normal or small-caps
function changeVariant() {
let variant;
if (name.style.fontVariant == 'small-caps') {
if (sample.style.fontVariant == 'small-caps') {
variant = 'normal';
} else {
variant = 'small-caps';
}
name.style.fontVariant = variant;
sample.style.fontVariant = variant;
}
// normal, italic, or oblique
function changeStyle() {
let style;
if (name.style.fontStyle == 'italic') {
if (sample.style.fontStyle == 'italic') {
style = 'normal';
} else {
style = 'italic';
}
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';
}
}