jay/havox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

formatting

Browse Source
This commit is contained in:
Jay
2026-03-21 15:05:08 +00:00
parent 2100334f1f
commit 13c8b0a28e
26 changed files with 3176 additions and 2631 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
tutorials/tsp/style.css
View File

@@ -1,15 +1,18 @@
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed");
a{font-family: 'Roboto Condensed', sans-serif; font-size: 18pt;}
a {
font-family: "Roboto Condensed", sans-serif;
font-size: 18pt;
}
h1 {
font-family: 'Roboto Condensed', sans-serif;
font-family: "Roboto Condensed", sans-serif;
margin: 0;
padding: 0 0 15px 0;
}
h2 {
font-family: 'Roboto Condensed', sans-serif;
font-family: "Roboto Condensed", sans-serif;
margin: 0;
padding: 0 0 15px 0;
text-align: center;
@@ -17,89 +20,150 @@ h2 {
}
@media (min-width: 350px) {
h1 {font-size: 3.25em;}
img{height: 40px;}
p{font-size: 10px;}
h2{font-size: 17px;}
h1 {
font-size: 3.25em;
}
img {
height: 40px;
}
p {
font-size: 10px;
}
h2 {
font-size: 17px;
}
}
@media (min-width: 400px) {
h1 {font-size: 3.25em;}
img{height: 45px;}
p{font-size: 15px;}
h2{font-size: 17px;}
h1 {
font-size: 3.25em;
}
img {
height: 45px;
}
p {
font-size: 15px;
}
h2 {
font-size: 17px;
}
}
@media (min-width: 440px) {
h1 {font-size: 3.5em;}
img {height: 100px;}
p{font-size: 16px;}
h2{font-size: 18px;}
h1 {
font-size: 3.5em;
}
img {
height: 100px;
}
p {
font-size: 16px;
}
h2 {
font-size: 18px;
}
}
@media (min-width: 500px) {
h1 {font-size: 3.75em;}
img{height: 125px;}
p{font-size: 16px;}
h2{font-size: 19px;}
h1 {
font-size: 3.75em;
}
img {
height: 125px;
}
p {
font-size: 16px;
}
h2 {
font-size: 19px;
}
}
@media (min-width: 630px) {
h1 {font-size: 5em;}
img{height: 150px;}
p{font-size: 20px;}
h2{font-size: 24px;}
h1 {
font-size: 5em;
}
img {
height: 150px;
}
p {
font-size: 20px;
}
h2 {
font-size: 24px;
}
}
@media (min-width: 768px) {
h1 {
h1 {
font-size: 5em;
padding-bottom: 30px;
}
img{height: 175px;}
p{font-size: 22px;}
h2{font-size: 26px;}
img {
height: 175px;
}
p {
font-size: 22px;
}
h2 {
font-size: 26px;
}
}
@media (min-width: 1200px) {
h1 {font-size: 8em;}
img{height: 250px;}
p{font-size: 24px;}
h2{font-size: 28px;}
h1 {
font-size: 8em;
}
img {
height: 250px;
}
p {
font-size: 24px;
}
h2 {
font-size: 28px;
}
}
p{
font-family: 'Roboto Condensed', sans-serif;
p {
font-family: "Roboto Condensed", sans-serif;
}
h3{
h3 {
text-align: center;
font-size: 30px;
font-family: 'Roboto Condensed', sans-serif;
font-family: "Roboto Condensed", sans-serif;
}
footer{
footer {
padding: 20px;
background-color: #e0e0e0;
font-family: 'Roboto Condensed', sans-serif;
font-family: "Roboto Condensed", sans-serif;
}
@keyframes dimImg{
from {opacity: 1;
filter: alpha(opacity=100);}
to {opacity: 0.4;
filter: alpha(opacity=50);}
@keyframes dimImg {
from {
opacity: 1;
filter: alpha(opacity=100);
}
to {
opacity: 0.4;
filter: alpha(opacity=50);
}
}
@keyframes revealText{
from {opacity: 0.4;
filter: alpha(opacity=50);}
to {opacity: 1;
filter: alpha(opacity=100);}
@keyframes revealText {
from {
opacity: 0.4;
filter: alpha(opacity=50);
}
to {
opacity: 1;
filter: alpha(opacity=100);
}
}
.pictureContainer{
float: right;
.pictureContainer {
float: right;
position: relative;
}
.pictureContainer a{
.pictureContainer a {
opacity: 0;
position: absolute;
text-align: center;
@@ -107,36 +171,36 @@ footer{
left: 5px;
}
.pictureContainer:hover img{
.pictureContainer:hover img {
animation-name: dimImg;
animation-duration: 1s;
opacity: 0.4;
filter: alpha(opacity=50);
}
.pictureContainer:hover a{
.pictureContainer:hover a {
animation-name: revealText;
animation-duration: 1s;
opacity: 1;
}
.canvasText{
.canvasText {
margin: 0px;
display: inline-block;
text-align: left;
}
#c1, #c2, #c3{
#c1,
#c2,
#c3 {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.button{
.button {
padding: 16px 32px;
text-align: center;
text-decoration: none;
@@ -156,5 +220,3 @@ footer{
background-color: #555555;
color: white;
}