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

Compare commits

base: lightweight:b46b2dc3e77c5b088d2543f8fcfdd6892f722089
Branches Tags
lightweight:main
...
compare: lightweight:16d319a514edaf0ec4735363ad100dae5e8beb36
Branches Tags
lightweight:main

2 commits
b46b2dc3e7 ... 16d319a514

Author SHA1 Message Date
Dave Lane
16d319a514 added fonts and new CSS layout 2023-07-27 14:49:55 +12:00
Dave Lane
41316ae2df added fonts and new CSS layout 2023-07-27 14:49:52 +12:00
22 changed files with 75 additions and 7 deletions
Show stats Expand all files Collapse all files

1
.gitignore vendored Normal file
View file

@ -0,0 +1 @@
*.zip

BIN
css/fonts/Lobster/Lobster-Regular.ttf Normal file
View file

Binary file not shown.

BIN
css/fonts/LobsterTwo/LobsterTwo-Bold.ttf Normal file
View file

Binary file not shown.

BIN
css/fonts/LobsterTwo/LobsterTwo-BoldItalic.ttf Normal file
View file

Binary file not shown.

BIN
css/fonts/LobsterTwo/LobsterTwo-Italic.ttf Normal file
View file

Binary file not shown.

BIN
css/fonts/LobsterTwo/LobsterTwo-Regular.ttf Normal file
View file

Binary file not shown.

BIN
css/fonts/Roboto/Roboto-Black.ttf Normal file
View file

Binary file not shown.

BIN
css/fonts/Roboto/Roboto-BlackItalic.ttf Normal file
View file

Binary file not shown.

BIN
css/fonts/Roboto/Roboto-Bold.ttf Normal file
View file

Binary file not shown.

BIN
css/fonts/Roboto/Roboto-BoldItalic.ttf Normal file
View file

Binary file not shown.

BIN
css/fonts/Roboto/Roboto-Italic.ttf Normal file
View file

Binary file not shown.

BIN
css/fonts/Roboto/Roboto-Light.ttf Normal file
View file

Binary file not shown.

BIN
css/fonts/Roboto/Roboto-LightItalic.ttf Normal file
View file

Binary file not shown.

BIN
css/fonts/Roboto/Roboto-Medium.ttf Normal file
View file

Binary file not shown.

BIN
css/fonts/Roboto/Roboto-MediumItalic.ttf Normal file
View file

Binary file not shown.

BIN
css/fonts/Roboto/Roboto-Regular.ttf Normal file
View file

Binary file not shown.

BIN
css/fonts/Roboto/Roboto-Thin.ttf Normal file
View file

Binary file not shown.

BIN
css/fonts/Roboto/Roboto-ThinItalic.ttf Normal file
View file

Binary file not shown.

BIN
css/fonts/Roboto_Flex/RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf Normal file
View file

Binary file not shown.

BIN
css/fonts/Roboto_Flex/static/RobotoFlex-Regular.ttf Normal file
View file

Binary file not shown.

66
css/style.css
View file

@ -1 +1,67 @@
/* Style sheet */
@font-face {
font-family: "Lobster";
src: url('fonts/Lobster/Lobster-Regular.ttf') format('truetype');
}
@font-face {
font-family: "Roboto";
src:
url('fonts/Roboto/Roboto-Regular.ttf') format('truetype'),
url('fonts/Roboto/Roboto-BlackItalic.ttf') format('truetype'),
url('fonts/Roboto/Roboto-Black.ttf') format('truetype'),
url('fonts/Roboto/Roboto-BoldItalic.ttf') format('truetype'),
url('fonts/Roboto/Roboto-Bold.ttf') format('truetype'),
url('fonts/Roboto/Roboto-LightItalic.ttf') format('truetype'),
url('fonts/Roboto/Roboto-Light.ttf') format('truetype'),
url('fonts/Roboto/Roboto-MediumItalic.ttf') format('truetype'),
url('fonts/Roboto/Roboto-Medium.ttf') format('truetype'),
url('fonts/Roboto/Roboto-ThinItalic.ttf') format('truetype'),
url('fonts/Roboto/Roboto-Thin.ttf') format('truetype');
}
body.style-1 {
font-family: "Roboto";
width: 80%;
margin: auto;
}
h1 { font-family: "Lobster"; }
p { color: #444; }
a { text-decoration: none; }
button {
margin: 4px 0px;
padding: 8px;
background-color: #3BAD5F;
color: #fff;
border-radius: 10px;
border: 0;
font-family: "Roboto";
font-size: 120%;
}
button:hover { box-shadow: 6px 6px; }
.name {
font-size: 200%;
padding: 12px;
background-color: #eee;
border: thin #ededed;
display: block;
clear: both;
margin-bottom: 20px;
font-family: "Lobster";
}
.blue { color: blue; }
.red { color: red; }
.green { color: green; }
.black { color: black; }
.bold { font-weight: bold; }
.italic { font-style: italic; }
.small-caps { font-variant: small-caps; }

15
index.html
View file

@ -12,7 +12,7 @@
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<body class="style-1">
<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>
@ -22,14 +22,15 @@
<div class='app1'>
<p class='name'>Take charge!</p>
<div class='colors'>
<button onclick="changeColor('blue')">Change to blue</button>
<button onclick="changeColor('red')">Change to red</button>
<button onclick="changeColor('green')">Change to green</button>
<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 class='fonts'>
<button onclick="changeWeight()">Change to bold</button>
<button onclick="changeStyle()">Change to italics</button>
<button onclick="changeVariant()">Change to small capital letters</button>
<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>
<script src="js/script.js"></script>
</div>