diff options
Diffstat (limited to 'info')
| -rw-r--r-- | info/blocks.html | 254 |
1 files changed, 144 insertions, 110 deletions
diff --git a/info/blocks.html b/info/blocks.html index b6160d6..ce307cb 100644 --- a/info/blocks.html +++ b/info/blocks.html @@ -2,8 +2,6 @@ <html> <meta name="viewport" content="width=700"> <title>Julius Caesar - Blocks</title> -<link rel="stylesheet" href="../blocks_columbia.css"> -<link rel="stylesheet" href="../blocks_simple.css"> <style> body { margin: 40px; @@ -11,118 +9,154 @@ body { color: white; text-align: center; } + div.list { - display: flex; - flex-wrap: wrap; - justify-content: center; + display: grid; + width: calc(66px * 7 + 8px * 6); + margin: 0 auto; + grid-template-columns: repeat(7, 66px); + gap: 8px; +} + +.block { + width: 60px; + height: 60px; + border-width: 3px; + border-radius: 8px; + border: 3px solid blue; + box-shadow: 0 0 2px 1px #0004; } -.block { box-shadow: 1px 1px 3px rgba(0,0,0,0.5); } -.block:hover { transform: scale(2); } +.block { background-size: 360px 360px; } +.Cleopatra.block { background-size: 60px 60px; } + +.Caesar.block { background-image: url(../blocks_caesar.1x.webp); } +.Cleopatra.block { background-image: url(../blocks_cleopatra.1x.webp); } +.Pompeius.block { background-image: url(../blocks_pompeius.1x.webp); } -.columbia-labels .block { width:56px; height:56px; margin:8px; } -.columbia-labels .block.Caesar { background-color: #822; border: 3px solid #822; } -.columbia-labels .block.Pompeius { background-color: #862; border: 3px solid #862; } -.columbia-labels .block.Cleopatra { background-color: #067; border: 3px solid #067; } -.columbia-labels .block { border-radius: 0px; } +@media (min-resolution: 97dpi) { +.Caesar.block { background-image: url(../blocks_caesar.2x.webp); } +.Cleopatra.block { background-image: url(../blocks_cleopatra.2x.webp); } +.Pompeius.block { background-image: url(../blocks_pompeius.2x.webp); } +} + +.block.Caesar { background-color: hsl(358, 69%, 47%); } +.block.Caesar { border-color: hsl(358, 69%, 32%); } +.block.Pompeius { background-color: hsl(43, 87%, 44%); } +.block.Pompeius { border-color: hsl(43, 87%, 30%); } +.block.Cleopatra { background-color: hsl(187, 100%, 35%); } +.block.Cleopatra { border-color: hsl(187, 100%, 23%); } -.simple-labels .block { width:48px; height:48px; margin:12px; } -.simple-labels .block.Caesar { background-color: #b22; border: 3px solid #822; } -.simple-labels .block.Pompeius { background-color: #eb2; border: 3px solid #862; } -.simple-labels .block.Cleopatra { background-color: #09b; border: 3px solid #067; } -.simple-labels .block { border-radius: 0px; } +.block_1_1{background-position:0px 0px} +.block_1_2{background-position:-60px 0px} +.block_1_3{background-position:-120px 0px} +.block_1_4{background-position:-180px 0px} +.block_1_5{background-position:-240px 0px} +.block_1_6{background-position:-300px 0px} +.block_2_1{background-position:0px -60px} +.block_2_2{background-position:-60px -60px} +.block_2_3{background-position:-120px -60px} +.block_2_4{background-position:-180px -60px} +.block_2_5{background-position:-240px -60px} +.block_2_6{background-position:-300px -60px} +.block_3_1{background-position:0px -120px} +.block_3_2{background-position:-60px -120px} +.block_3_3{background-position:-120px -120px} +.block_3_4{background-position:-180px -120px} +.block_3_5{background-position:-240px -120px} +.block_3_6{background-position:-300px -120px} +.block_4_1{background-position:0px -180px} +.block_4_2{background-position:-60px -180px} +.block_4_3{background-position:-120px -180px} +.block_4_4{background-position:-180px -180px} +.block_4_5{background-position:-240px -180px} +.block_4_6{background-position:-300px -180px} +.block_5_1{background-position:0px -240px} +.block_5_2{background-position:-60px -240px} +.block_5_3{background-position:-120px -240px} +.block_5_4{background-position:-180px -240px} +.block_5_5{background-position:-240px -240px} +.block_5_6{background-position:-300px -240px} +.block_6_1{background-position:0px -300px} +.block_6_2{background-position:-60px -300px} +.block_6_3{background-position:-120px -300px} +.block_6_4{background-position:-180px -300px} +.block_6_5{background-position:-240px -300px} +.block_6_6{background-position:-300px -300px} </style> -<body id="body" class="columbia-labels"> -<h1> -Julius Caesar - Blocks -</h1> - -<p> -<button onclick="window.body.className='columbia-labels'">Columbia</button> -<button onclick="window.body.className='simple-labels'">Simple</button> -</p> - -<div> -<div class="list r0"> -<div class="block known Caesar block_0 r0"></div> -<div class="block known Caesar block_1 r0"></div> -<div class="block known Caesar block_2 r0"></div> -<div class="block known Caesar block_3 r0"></div> -<div class="block known Caesar block_4 r0"></div> -<div class="block known Caesar block_5 r0"></div> -<div class="block known Caesar block_6 r0"></div> -</div> -<div class="list r0"> -<div class="block known Caesar block_7 r0"></div> -<div class="block known Caesar block_8 r0"></div> -<div class="block known Caesar block_9 r0"></div> -<div class="block known Caesar block_10 r0"></div> -<div class="block known Caesar block_11 r0"></div> -<div class="block known Caesar block_12 r0"></div> -<div class="block known Caesar block_13 r0"></div> -</div> -<div class="list r0"> -<div class="block known Caesar block_14 r0"></div> -<div class="block known Caesar block_15 r0"></div> -<div class="block known Caesar block_16 r0"></div> -<div class="block known Caesar block_17 r0"></div> -<div class="block known Caesar block_18 r0"></div> -<div class="block known Caesar block_19 r0"></div> -<div class="block known Caesar block_20 r0"></div> -</div> -<div class="list r0"> -<div class="block known Caesar block_21 r0"></div> -<div class="block known Caesar block_22 r0"></div> -<div class="block known Caesar block_23 r0"></div> -<div class="block known Caesar block_24 r0"></div> -<div class="block known Caesar block_25 r0"></div> -<div class="block known Caesar block_26 r0"></div> -<div class="block known Caesar block_27 r0"></div> -</div> -<div class="list r0"> -<div class="block known Caesar block_28 r0"></div> -<div class="block known Caesar block_29 r0"></div> -<div class="block known Caesar block_30 r0"></div> -<div class="block known Cleopatra block_31 r0"></div> -<div class="block known Pompeius block_32 r0"></div> -<div class="block known Pompeius block_33 r0"></div> -<div class="block known Pompeius block_34 r0"></div> -</div> -<div class="list r0"> -<div class="block known Pompeius block_35 r0"></div> -<div class="block known Pompeius block_36 r0"></div> -<div class="block known Pompeius block_37 r0"></div> -<div class="block known Pompeius block_38 r0"></div> -<div class="block known Pompeius block_39 r0"></div> -<div class="block known Pompeius block_40 r0"></div> -<div class="block known Pompeius block_41 r0"></div> -</div> -<div class="list r0"> -<div class="block known Pompeius block_42 r0"></div> -<div class="block known Pompeius block_43 r0"></div> -<div class="block known Pompeius block_44 r0"></div> -<div class="block known Pompeius block_45 r0"></div> -<div class="block known Pompeius block_46 r0"></div> -<div class="block known Pompeius block_47 r0"></div> -<div class="block known Pompeius block_48 r0"></div> -</div> -<div class="list r0"> -<div class="block known Pompeius block_49 r0"></div> -<div class="block known Pompeius block_50 r0"></div> -<div class="block known Pompeius block_51 r0"></div> -<div class="block known Pompeius block_52 r0"></div> -<div class="block known Pompeius block_53 r0"></div> -<div class="block known Pompeius block_54 r0"></div> -<div class="block known Pompeius block_55 r0"></div> -</div> -<div class="list r0"> -<div class="block known Pompeius block_56 r0"></div> -<div class="block known Pompeius block_57 r0"></div> -<div class="block known Pompeius block_58 r0"></div> -<div class="block known Pompeius block_59 r0"></div> -<div class="block known Pompeius block_60 r0"></div> -<div class="block known Pompeius block_61 r0"></div> -<div class="block known Pompeius block_62 r0"></div> -</div> -</div> +<body> + +<div class="list"> + +<div class="block Caesar block_1_1"></div> +<div class="block Caesar block_1_2"></div> +<div class="block Caesar block_1_3"></div> +<div class="block Caesar block_1_4"></div> +<div class="block Caesar block_1_5"></div> +<div class="block Caesar block_1_6"></div> +<div class="block Caesar block_2_1"></div> + +<div class="block Caesar block_2_2"></div> +<div class="block Caesar block_2_3"></div> +<div class="block Caesar block_2_4"></div> +<div class="block Caesar block_2_5"></div> +<div class="block Caesar block_2_6"></div> +<div class="block Caesar block_3_1"></div> +<div class="block Caesar block_3_2"></div> + +<div class="block Caesar block_3_3"></div> +<div class="block Caesar block_3_4"></div> +<div class="block Caesar block_3_5"></div> +<div class="block Caesar block_3_6"></div> +<div class="block Caesar block_4_1"></div> +<div class="block Caesar block_4_2"></div> +<div class="block Caesar block_4_3"></div> + +<div class="block Caesar block_4_4"></div> +<div class="block Caesar block_4_5"></div> +<div class="block Caesar block_4_6"></div> +<div class="block Caesar block_5_1"></div> +<div class="block Caesar block_5_2"></div> +<div class="block Caesar block_5_3"></div> +<div class="block Caesar block_5_4"></div> + +<div class="block Caesar block_5_5"></div> +<div class="block Caesar block_5_6"></div> +<div class="block Caesar block_6_1"></div> +<div class="block Cleopatra block_1_1"></div> +<div class="block Pompeius block_1_1"></div> +<div class="block Pompeius block_1_2"></div> +<div class="block Pompeius block_1_3"></div> + +<div class="block Pompeius block_1_4"></div> +<div class="block Pompeius block_1_5"></div> +<div class="block Pompeius block_1_6"></div> +<div class="block Pompeius block_2_1"></div> +<div class="block Pompeius block_2_2"></div> +<div class="block Pompeius block_2_3"></div> +<div class="block Pompeius block_2_4"></div> + +<div class="block Pompeius block_2_5"></div> +<div class="block Pompeius block_2_6"></div> +<div class="block Pompeius block_3_1"></div> +<div class="block Pompeius block_3_2"></div> +<div class="block Pompeius block_3_3"></div> +<div class="block Pompeius block_3_4"></div> +<div class="block Pompeius block_3_5"></div> + +<div class="block Pompeius block_3_6"></div> +<div class="block Pompeius block_4_1"></div> +<div class="block Pompeius block_4_2"></div> +<div class="block Pompeius block_4_3"></div> +<div class="block Pompeius block_4_4"></div> +<div class="block Pompeius block_4_5"></div> +<div class="block Pompeius block_4_6"></div> + +<div class="block Pompeius block_5_1"></div> +<div class="block Pompeius block_5_2"></div> +<div class="block Pompeius block_5_3"></div> +<div class="block Pompeius block_5_4"></div> +<div class="block Pompeius block_5_5"></div> +<div class="block Pompeius block_5_6"></div> +<div class="block Pompeius block_6_1"></div> |