A Gods Eye View

Link to article: A Gods Eye View.

Module Styles

• 
  #extrac-div-1 {
    display: none;
  }
  
  #page-title::after {
    content: "-Glass and Steel-";
  }
  
  .page-rate-widget-box {
    margin-right: 0;
  }
  
  .full:focus-within {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100lvh;
    width: 100%;
    z-index: 10;
    
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    
    backdrop-filter: blur(8px);
    
    cursor: pointer;
  }
  
  .full:focus-within img {
    max-height: 100vh;
    max-height: 100lvh;
    
    cursor: default;
    z-index: 11;
  }
  
  .full:focus-within a {
    cursor: default;
  }
  
  .full:focus-within .exit {
    position: absolute;
    top: 1rem;
    right: 1rem;
    height: 2rem;
    width: 2rem;
    cursor: pointer;
  }
  
  .full:focus-within .exit::before {
    content: "";
    clip-path: polygon(0 0, 50% 40%, 100% 0, 60% 50%, 100% 100%, 50% 60%, 0 100%, 40% 50%);
    cursor: pointer;
    background-color: red;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  @media (max-width: 767px) {
  .full:has(a:hover) {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100lvh;
    width: 100%;
    z-index: 10;
    
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    
    backdrop-filter: blur(8px);
    
    cursor: pointer;
  }
  
  .full a:hover img {
    max-height: 100vh;
    max-height: 100lvh;
    
    cursor: default;
    z-index: 11;
  }
  
  .full:has(a:hover) a {
    cursor: default;
  }
  
  .full:has(a:hover) .exit {
    position: absolute;
    top: 1rem;
    right: 1rem;
    height: 2rem;
    width: 2rem;
    cursor: pointer;
  }
  
  .full:has(a:hover) .exit::before {
    content: "";
    clip-path: polygon(0 0, 50% 40%, 100% 0, 60% 50%, 100% 100%, 50% 60%, 0 100%, 40% 50%);
    cursor: pointer;
    background-color: red;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  }
  
  .flex-cont {
    display: flex;
    justify-content: space-between;
  }
  

Inline Styles

• text-align: center;

Includes

• :scp-wiki:theme:shivering-night [info]

CSS Classes

• full

• exit

• blockquote

• flex-cont

Page Source

[[include :scp-wiki:theme:shivering-night low-height=*]]

[[module css]]

#extrac-div-1 {
  display: none;
}

#page-title::after {
  content: "-Glass and Steel-";
}

.page-rate-widget-box {
  margin-right: 0;
}

.full:focus-within {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  height: 100lvh;
  width: 100%;
  z-index: 10;
  
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  
  backdrop-filter: blur(8px);
  
  cursor: pointer;
}

.full:focus-within img {
  max-height: 100vh;
  max-height: 100lvh;
  
  cursor: default;
  z-index: 11;
}

.full:focus-within a {
  cursor: default;
}

.full:focus-within .exit {
  position: absolute;
  top: 1rem;
  right: 1rem;
  height: 2rem;
  width: 2rem;
  cursor: pointer;
}

.full:focus-within .exit::before {
  content: "";
  clip-path: polygon(0 0, 50% 40%, 100% 0, 60% 50%, 100% 100%, 50% 60%, 0 100%, 40% 50%);
  cursor: pointer;
  background-color: red;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

@media (max-width: 767px) {
.full:has(a:hover) {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  height: 100lvh;
  width: 100%;
  z-index: 10;
  
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  
  backdrop-filter: blur(8px);
  
  cursor: pointer;
}

.full a:hover img {
  max-height: 100vh;
  max-height: 100lvh;
  
  cursor: default;
  z-index: 11;
}

.full:has(a:hover) a {
  cursor: default;
}

.full:has(a:hover) .exit {
  position: absolute;
  top: 1rem;
  right: 1rem;
  height: 2rem;
  width: 2rem;
  cursor: pointer;
}

.full:has(a:hover) .exit::before {
  content: "";
  clip-path: polygon(0 0, 50% 40%, 100% 0, 60% 50%, 100% 100%, 50% 60%, 0 100%, 40% 50%);
  cursor: pointer;
  background-color: red;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
}

.flex-cont {
  display: flex;
  justify-content: space-between;
}

[[/module]]

[[=]]
[[module rate]]
[[/=]]

@@ @@

[[div class="full"]]
[[div class="exit"]]
[[/div]]
[[image https://scp-wiki.wikidot.com/local--files/art:a-gods-eye-view/godsEyeView.jpg link="#"]]
[[/div]]

@@ @@

[[div class="blockquote" style="text-align: center;"]]
An endless city

[[div class="flex-cont"]]
[[div]]
Of glass.
[[/div]]
[[div]]
Of steel.
[[/div]]
[[/div]]

Of neon.
[[/div]]

@@ @@