diff options
| author | Max le Fou <buttbadger@gmail.com> | 2021-08-20 17:48:06 +0300 |
|---|---|---|
| committer | Max le Fou <buttbadger@gmail.com> | 2021-08-20 17:48:06 +0300 |
| commit | 662d9850373e9111675520a1ac9dcecf7c1fb761 (patch) | |
| tree | cd70b5a76bce8d435f03663c44736bd35ec027b2 | |
| parent | a2ce9a33138252d0d4c342a36bd1ad52c0bca7df (diff) | |
added crt effect
| -rw-r--r-- | exampleSite/config.toml | 3 | ||||
| -rw-r--r-- | layouts/_default/baseof.html | 2 | ||||
| -rw-r--r-- | static/css/style.css | 206 |
3 files changed, 210 insertions, 1 deletions
diff --git a/exampleSite/config.toml b/exampleSite/config.toml index c103bc7..4894ca8 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -24,6 +24,9 @@ preserveTaxonomyNames = true # Show the "built on Hugo" disclaimer showhugo = true + # Show a CRT screen effect. Default is enabled. + showcrt = true + # Urls for social networks facebook = "https://facebook.com" twitter = "https://twitter.com" diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 07e5acd..20adc08 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -2,7 +2,7 @@ <html lang="{{ .Site.Language.Lang }}"> {{- partial "head.html" . -}} -<body class="bootstra-enable-cursor"> +<body class="bootstra-enable-cursor {{ with .Site.Params.showcrt }}crt{{ end }}"> {{- partial "header.html" . -}} <div id="content" class="container"> {{- block "main" . }}{{- end }} diff --git a/static/css/style.css b/static/css/style.css index 54343e5..c148488 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -18,4 +18,210 @@ h6 { ol, ul { padding-left: 1em; +} + + +/* CRT effect */ + +@keyframes flicker { + 0% { + opacity: 0.45027; + } + 5% { + opacity: 0.84576; + } + 10% { + opacity: 0.26568; + } + 15% { + opacity: 0.61067; + } + 20% { + opacity: 0.70845; + } + 25% { + opacity: 0.03414; + } + 30% { + opacity: 0.43398; + } + 35% { + opacity: 0.17181; + } + 40% { + opacity: 0.21662; + } + 45% { + opacity: 0.39138; + } + 50% { + opacity: 0.66801; + } + 55% { + opacity: 0.93228; + } + 60% { + opacity: 0.21237; + } + 65% { + opacity: 0.83268; + } + 70% { + opacity: 0.64623; + } + 75% { + opacity: 0.93198; + } + 80% { + opacity: 0.00774; + } + 85% { + opacity: 0.82173; + } + 90% { + opacity: 0.07991; + } + 95% { + opacity: 0.709; + } + 100% { + opacity: 0.76967; + } +} + +.crt { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; +} + +.crt::after { + content: " "; + display: block; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + background: rgba(18, 16, 16, 0.1); + opacity: 0; + z-index: 2; + pointer-events: none; + animation: vm-flicker 0.15s infinite; +} + +.crt::before { + content: " "; + display: block; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); + z-index: 2; + background-size: 100% 2px, 3px 100%; + pointer-events: none; +} + +@keyframes vm-flicker { + 0% { + opacity: 0.3110708144; + } + 5% { + opacity: 0.4100544822; + } + 10% { + opacity: 0.2545181193; + } + 15% { + opacity: 0.5218255527; + } + 20% { + opacity: 0.6484908331; + } + 25% { + opacity: 0.7080114771; + } + 30% { + opacity: 0.5631970786; + } + 35% { + opacity: 0.917632443; + } + 40% { + opacity: 0.0948466981; + } + 45% { + opacity: 0.8326163351; + } + 50% { + opacity: 0.6899885766; + } + 55% { + opacity: 0.2888567905; + } + 60% { + opacity: 0.9248702036; + } + 65% { + opacity: 0.7040007702; + } + 70% { + opacity: 0.2640259186; + } + 75% { + opacity: 0.5556345635; + } + 80% { + opacity: 0.5216816534; + } + 85% { + opacity: 0.7383953722; + } + 90% { + opacity: 0.0820464927; + } + 95% { + opacity: 0.2139555955; + } + 100% { + opacity: 0.7105653676; + } +} + +@keyframes turn-on { + 0% { + transform: scale(1, 0.8) translate3d(0, 0, 0); + -webkit-filter: brightness(30); + filter: brightness(30); + opacity: 1; + } + 3.5% { + transform: scale(1, 0.8) translate3d(0, 100%, 0); + } + 3.6% { + transform: scale(1, 0.8) translate3d(0, -100%, 0); + opacity: 1; + } + 9% { + transform: scale(1.3, 0.6) translate3d(0, 100%, 0); + -webkit-filter: brightness(30); + filter: brightness(30); + opacity: 0; + } + 11% { + transform: scale(1, 1) translate3d(0, 0, 0); + -webkit-filter: contrast(0) brightness(0); + filter: contrast(0) brightness(0); + opacity: 0; + } + 100% { + transform: scale(1, 1) translate3d(0, 0, 0); + -webkit-filter: contrast(1) brightness(1.2) saturate(1.3); + filter: contrast(1) brightness(1.2) saturate(1.3); + opacity: 1; + } }
\ No newline at end of file |