Commit 3a74ad00 authored by Sam McCollum's avatar Sam McCollum

sm - dynamic sizing

- Introduced CSS variables
- Used calc everywhere possible
parent 24b84686
Pipeline #558 failed with stages
in 11 seconds
:root{
--background-color: #232323;
/**
* The `.icing-logo` sections at the beginning of this file
* are demonstrating the parameters used to configure the cube.
*
*/
html,body{
background-color: #232323;
/*display: flex;
justify-content: center;*/
}
.icing-logo{
border-radius: 8%;
--side-length: 200px;
--logo-color: #1291E6;
--background-color: rgb(214, 214, 214);
}
html,body{
/**
* Below is the actual logo stuff
*/
.icing-logo{
--logo-color: #1291E6;
--border-thickness: calc(.03 * var(--side-length)); /* the border thickness */
--translate-dist: calc( var(--border-thickness) + ((var(--side-length) / 2) - 1px) );
--side-length-with-border: calc((var(--translate-dist) * 2px) + 2px);
--diagonal-width: calc(1.42px * var(--side-length-with-border));
width: calc(1.65 * var(--side-length));
height: calc(1.65 * var(--side-length));
background-color: var(--background-color);
}
.cube {
position: relative;
.icing-logo-cube {
display: flex;
justify-content: center;
width: var(--side-length);
height: var(--side-length);
transform-style: preserve-3d;
margin: 0 auto;
transform: translateY(40px) rotateX(-28deg) rotateY(-45deg);
transform: rotateX(-28deg) rotateY(-45deg) translateY(calc(.34 * var(--side-length)));
}
.side {
position: absolute;
.icing-logo-side {
position: fixed;
width: var(--side-length);
height: var(--side-length);
border: 6px solid var(--background-color);
border: var(--border-thickness) solid var(--background-color);
background-color: var(--logo-color);
}
.top {
transform: translateY(-100px) rotateX(90deg);
.icing-logo-top {
transform: translateY(calc(-1 * var(--translate-dist))) rotateX(90deg);
}
.left {
transform: translateZ(100px);
.icing-logo-left {
transform: translateZ(var(--translate-dist));
}
.right {
transform: translateX(100px) RotateY(90deg);
.icing-logo-right {
transform: translateX(var(--translate-dist)) RotateY(90deg);
}
\ No newline at end of file
......@@ -4,10 +4,12 @@
<link rel="stylesheet" type="text/css" href="cube.css"></link>
</HEAD>
<BODY>
<div class="cube">
<div class="side top"></div>
<div class="side left"></div>
<div class="side right"></div>
<div class="icing-logo">
<div class="icing-logo-cube">
<div class="icing-logo-side icing-logo-top"></div>
<div class="icing-logo-side icing-logo-left"></div>
<div class="icing-logo-side icing-logo-right"></div>
</div>
</div>
</BODY>
</HTML>
\ No newline at end of file
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment