Said Achmiz
преди 5 години
ревизия
70ef0b04dd
променени са 31 файла, в които са добавени 1652 реда и са изтрити 0 реда
Двоични данни
.DS_Store
Целия файл
+ 15
- 0
.htaccess
Целия файл
| @@ -0,0 +1,15 @@ | |||
| AddCharset utf-8 .shtml .html .css .php .txt .js | |||
| <filesMatch ".(css)$"> | |||
| Header set Cache-Control "max-age=0, public" | |||
| </filesMatch> | |||
| Options +Includes | |||
| AddType text/html .shtml | |||
| AddOutputFilter INCLUDES .shtml | |||
| DirectoryIndex index.shtml | |||
| RewriteEngine On | |||
| RewriteBase /deus/ | |||
| RewriteRule ^(.+?)index\.html$ $1index.shtml [QSA,L] | |||
Двоични данни
assets/.DS_Store
Целия файл
+ 70
- 0
assets/css/home-page.css
Целия файл
| @@ -0,0 +1,70 @@ | |||
| @charset "UTF-8"; | |||
| /*=========*/ | |||
| /* Layout. */ | |||
| /*=========*/ | |||
| body.home-page { | |||
| --deus-body-padding: 2rem; | |||
| width: 100%; | |||
| height: 100vh; | |||
| } | |||
| body.home-page::before { | |||
| content: none; | |||
| } | |||
| /*===============*/ | |||
| /* Splash image. */ | |||
| /*===============*/ | |||
| body.home-page #splash-image { | |||
| width: 100%; | |||
| height: 100%; | |||
| opacity: 1.0; | |||
| transition: opacity 2.5s ease; | |||
| } | |||
| body.home-page #splash-image.hidden { | |||
| opacity: 0.0; | |||
| } | |||
| body.home-page #splash-image.fade { | |||
| opacity: 0.15; | |||
| transition: opacity 1s ease; | |||
| } | |||
| body.home-page #splash-image img { | |||
| width: 100%; | |||
| height: 100%; | |||
| object-fit: contain; | |||
| } | |||
| /*================*/ | |||
| /* Navigation UI. */ | |||
| /*================*/ | |||
| body.home-page #main-nav { | |||
| top: -2rem; | |||
| opacity: 0.0; | |||
| } | |||
| body.home-page #main-nav.shown { | |||
| top: 0; | |||
| opacity: 1.0; | |||
| transition: | |||
| top 1s ease, | |||
| opacity 1s ease; | |||
| } | |||
| /*===================*/ | |||
| /* Copyright notice. */ | |||
| /*===================*/ | |||
| body.home-page #copyright { | |||
| bottom: -0.625rem; | |||
| opacity: 0.0; | |||
| } | |||
| body.home-page #copyright.shown { | |||
| bottom: 0.625rem; | |||
| opacity: 0.5; | |||
| transition: | |||
| bottom 1s ease, | |||
| opacity 1s ease; | |||
| } | |||
+ 353
- 0
assets/css/image-focus.css
Целия файл
| @@ -0,0 +1,353 @@ | |||
| /***************/ | |||
| /* IMAGE FOCUS */ | |||
| /***************/ | |||
| /*=--------------=*/ | |||
| /*= Hover styles =*/ | |||
| /*=--------------=*/ | |||
| .img img:hover { | |||
| filter: drop-shadow(0 0 3px #777); | |||
| cursor: zoom-in; | |||
| } | |||
| .img img:active { | |||
| transform: scale(0.975); | |||
| } | |||
| /*=---------=*/ | |||
| /*= Overlay =*/ | |||
| /*=---------=*/ | |||
| #image-focus-overlay { | |||
| position: fixed; | |||
| top: 0; | |||
| right: 0; | |||
| bottom: 0; | |||
| left: 0; | |||
| z-index: 2001; | |||
| display: none; | |||
| cursor: zoom-out; | |||
| } | |||
| #image-focus-overlay::before { | |||
| content: ""; | |||
| display: block; | |||
| position: absolute; | |||
| top: 0; | |||
| right: 0; | |||
| bottom: 0; | |||
| left: 0; | |||
| background-color: #000; | |||
| opacity: 0.9; | |||
| z-index: -1; | |||
| } | |||
| #image-focus-overlay.engaged { | |||
| display: initial; | |||
| } | |||
| #image-focus-overlay img { | |||
| margin: auto; | |||
| position: absolute; | |||
| top: 0; | |||
| bottom: 0; | |||
| left: 0; | |||
| right: 0; | |||
| } | |||
| /*=-------------------=*/ | |||
| /*= Single-image mode =*/ | |||
| /*=-------------------=*/ | |||
| #image-focus-overlay:not(.slideshow) .image-number, | |||
| #image-focus-overlay:not(.slideshow) .slideshow-buttons, | |||
| #image-focus-overlay:not(.slideshow) .slideshow-help-text { | |||
| display: none; | |||
| } | |||
| /*=---------=*/ | |||
| /*= Caption =*/ | |||
| /*=---------=*/ | |||
| #image-focus-overlay .caption { | |||
| position: absolute; | |||
| bottom: 0.75em; | |||
| background-color: rgba(0, 0, 0, 0.7); | |||
| left: 4.5em; | |||
| right: 4.5em; | |||
| margin: auto; | |||
| max-width: calc(100% - 9em); | |||
| text-align: center; | |||
| font-family: "Lucida Sans Unicode", "Source Sans Pro", Helvetica, "Trebuchet MS", sans-serif; | |||
| border-radius: 8px; | |||
| z-index: 1; | |||
| transition: | |||
| bottom 0.15s ease; | |||
| } | |||
| @supports (width: -moz-fit-content) { | |||
| #image-focus-overlay .caption { | |||
| width: -moz-fit-content; | |||
| } | |||
| } | |||
| @supports (width: fit-content) { | |||
| #image-focus-overlay .caption { | |||
| width: fit-content; | |||
| } | |||
| } | |||
| #image-focus-overlay .caption.hidden { | |||
| bottom: -50%; | |||
| transition: | |||
| bottom 0.5s ease-in; | |||
| } | |||
| #image-focus-overlay .caption p { | |||
| margin: 1em 1.25em; | |||
| color: #fff; | |||
| } | |||
| #image-focus-overlay .caption code { | |||
| background-color: inherit; | |||
| border: none; | |||
| font-size: 1em; | |||
| } | |||
| #image-focus-overlay .caption a { | |||
| color: #ccc; | |||
| } | |||
| #image-focus-overlay .caption a:hover { | |||
| color: #aaa; | |||
| } | |||
| #image-focus-overlay .caption:not(:empty)::before { | |||
| content: ""; | |||
| display: block; | |||
| position: absolute; | |||
| width: 100vw; | |||
| height: calc(100% + 1.5em); | |||
| z-index: -1; | |||
| top: -0.75em; | |||
| left: calc(-50vw + 50%); | |||
| } | |||
| /*=--------------=*/ | |||
| /*= Help overlay =*/ | |||
| /*=--------------=*/ | |||
| #image-focus-overlay .help-overlay { | |||
| position: absolute; | |||
| display: flex; | |||
| flex-flow: column; | |||
| z-index: 3; | |||
| font-family: "Lucida Sans Unicode", "Source Sans Pro", Helvetica, "Trebuchet MS", sans-serif; | |||
| font-size: 1.25rem; | |||
| padding: 1em; | |||
| border-radius: 10px; | |||
| bottom: 1em; | |||
| right: 1em; | |||
| overflow: hidden; | |||
| white-space: nowrap; | |||
| color: transparent; | |||
| cursor: help; | |||
| visibility: hidden; | |||
| transition: | |||
| visibility 1s ease, | |||
| color 1s ease, | |||
| background-color 1s ease, | |||
| bottom 0.3s ease; | |||
| } | |||
| #image-focus-overlay .help-overlay:hover { | |||
| max-width: 24em; | |||
| max-height: 14em; | |||
| background-color: rgba(0, 0, 0, 0.85); | |||
| color: #fff; | |||
| visibility: visible; | |||
| transition: | |||
| visibility 0.2s ease 0.3s, | |||
| color 0.2s ease 0.3s, | |||
| background-color 0.2s ease 0.3s; | |||
| } | |||
| #image-focus-overlay .help-overlay::after { | |||
| content: "?"; | |||
| font-weight: bold; | |||
| font-size: 2rem; | |||
| position: absolute; | |||
| right: 0; | |||
| bottom: 0; | |||
| padding: 10px; | |||
| color: #000; | |||
| filter: drop-shadow(0 0 6px #fff); | |||
| visibility: visible; | |||
| opacity: 0.85; | |||
| transition: | |||
| visibility 1s ease; | |||
| } | |||
| #image-focus-overlay .help-overlay:hover::after { | |||
| visibility: hidden; | |||
| transition: | |||
| visibility 0.2s ease 0.3s; | |||
| } | |||
| #image-focus-overlay .help-overlay p { | |||
| margin: 0; | |||
| text-indent: -2em; | |||
| padding-left: 2em; | |||
| max-width: 100%; | |||
| overflow: hidden; | |||
| } | |||
| #image-focus-overlay .help-overlay p + p { | |||
| margin: 0.75em 0 0 0; | |||
| } | |||
| #image-focus-overlay .help-overlay.hidden { | |||
| bottom: -2em; | |||
| } | |||
| /*=--------------=*/ | |||
| /*= Slide number =*/ | |||
| /*=--------------=*/ | |||
| #image-focus-overlay .image-number { | |||
| position: absolute; | |||
| z-index: 2; | |||
| font-family: "Lucida Sans Unicode", "Source Sans Pro", Helvetica, "Trebuchet MS", sans-serif; | |||
| font-size: 1.5rem; | |||
| left: 1em; | |||
| top: 1em; | |||
| font-weight: 600; | |||
| text-shadow: | |||
| 0 0 3px #fff, | |||
| 0 0 5px #fff, | |||
| 0 0 8px #fff, | |||
| 0 0 13px #fff; | |||
| width: 1.5em; | |||
| text-align: right; | |||
| white-space: nowrap; | |||
| transition: top 0.3s ease; | |||
| } | |||
| #image-focus-overlay .image-number::before { | |||
| content: "#"; | |||
| opacity: 0.3; | |||
| } | |||
| #image-focus-overlay .image-number::after { | |||
| content: " of " attr(data-number-of-images); | |||
| opacity: 0.3; | |||
| } | |||
| #image-focus-overlay .image-number:hover::before, | |||
| #image-focus-overlay .image-number:hover::after { | |||
| opacity: 1.0; | |||
| } | |||
| #image-focus-overlay .image-number.hidden { | |||
| top: -1.25em; | |||
| } | |||
| /*=-------------------=*/ | |||
| /*= Slideshow buttons =*/ | |||
| /*=-------------------=*/ | |||
| #image-focus-overlay .slideshow-buttons { | |||
| position: absolute; | |||
| top: 0; | |||
| left: 0; | |||
| width: 100%; | |||
| height: 100%; | |||
| z-index: 2; | |||
| display: flex; | |||
| justify-content: space-between; | |||
| pointer-events: none; | |||
| } | |||
| #image-focus-overlay .slideshow-buttons button { | |||
| font-size: 3rem; | |||
| color: #ddd; | |||
| border: none; | |||
| background-color: transparent; | |||
| position: relative; | |||
| left: 0; | |||
| transition: | |||
| left 0.3s ease; | |||
| pointer-events: auto; | |||
| cursor: pointer; | |||
| width: 4rem; | |||
| background-repeat: no-repeat; | |||
| background-position: center; | |||
| background-origin: content-box; | |||
| } | |||
| #image-focus-overlay .slideshow-buttons button.next { | |||
| padding: 0.25em 0.25em 0.25em 0.375em; | |||
| } | |||
| #image-focus-overlay .slideshow-buttons button.previous { | |||
| padding: 0.25em 0.375em 0.25em 0.25em; | |||
| } | |||
| #image-focus-overlay .slideshow-buttons button svg { | |||
| pointer-events: none; | |||
| fill: currentColor; | |||
| } | |||
| #image-focus-overlay .slideshow-buttons button::selection { | |||
| background-color: transparent; | |||
| } | |||
| @media only screen and (hover: hover) { | |||
| #image-focus-overlay .slideshow-buttons button:hover { | |||
| background-color: rgba(0, 0, 0, 0.1); | |||
| color: #777; | |||
| } | |||
| #image-focus-overlay .slideshow-buttons button:not(:disabled):hover svg { | |||
| filter: | |||
| drop-shadow(0 0 1px #fff) | |||
| drop-shadow(0 0 3px #fff); | |||
| } | |||
| } | |||
| #image-focus-overlay .slideshow-buttons button:active { | |||
| transform: none; | |||
| color: #888; | |||
| } | |||
| #image-focus-overlay .slideshow-buttons button:disabled { | |||
| text-shadow: none; | |||
| background-color: transparent; | |||
| color: #ddd; | |||
| cursor: default; | |||
| opacity: 0.4; | |||
| } | |||
| #image-focus-overlay .slideshow-button.previous.hidden { | |||
| left: -1.75em; | |||
| } | |||
| #image-focus-overlay .slideshow-button.next.hidden { | |||
| left: 1.75em; | |||
| } | |||
| /*=---------=*/ | |||
| /*= Tooltip =*/ | |||
| /*=---------=*/ | |||
| .image-wrapper { | |||
| position: relative; | |||
| display: block; | |||
| margin: auto; | |||
| } | |||
| .image-wrapper::after { | |||
| content: "Click to enlarge"; | |||
| display: block; | |||
| position: absolute; | |||
| margin: auto; | |||
| left: 0; | |||
| right: 0; | |||
| bottom: 10px; | |||
| padding: 6px 15px 7px 15px; | |||
| font-size: 1rem; | |||
| font-family: var(--deus-UI-font); | |||
| background-color: rgba(0, 0, 0, 0.75); | |||
| color: #fff; | |||
| border-radius: 5px; | |||
| opacity: 0.0; | |||
| transition: opacity 0.15s ease; | |||
| pointer-events: none; | |||
| } | |||
| @supports (width: -moz-fit-content) { | |||
| .image-wrapper, | |||
| .image-wrapper::after { | |||
| width: -moz-fit-content; | |||
| } | |||
| } | |||
| @supports (width: fit-content) { | |||
| .image-wrapper, | |||
| .image-wrapper::after { | |||
| width: fit-content; | |||
| } | |||
| } | |||
| .image-wrapper:hover::after { | |||
| opacity: 1.0; | |||
| } | |||
+ 416
- 0
assets/css/main.css
Целия файл
| @@ -0,0 +1,416 @@ | |||
| @charset "UTF-8"; | |||
| /*************/ | |||
| /* VARIABLES */ | |||
| /*************/ | |||
| :root { | |||
| /* Specific colors. */ | |||
| --deus-color-darker-blue: #00122f; | |||
| --deus-color-dark-blue: #002e5c; | |||
| --deus-color-medium-blue: #0f5093; | |||
| --deus-color-light-blue: #2069b3; | |||
| --deus-color-gold: #fdc22f; | |||
| --deus-color-gold-shadow: #a5842e; | |||
| --deus-color-golden-brown: #684f00; | |||
| --deus-color-darker-grey: #161a1f; | |||
| --deus-color-dark-grey: #272b30; | |||
| --deus-color-medium-grey: #567; | |||
| --deus-color-light-grey: #a2a1a0; | |||
| --deus-color-lighter-grey: #d5d2d2; | |||
| --deus-color-white: #fff; | |||
| --deus-color-white-opacity-one-quarter: rgba(255,255,255,0.25); | |||
| --deus-color-white-opacity-one-half: rgba(255,255,255,0.5); | |||
| --deus-color-white-opacity-three-quarters: rgba(255,255,255,0.75); | |||
| /* Element colors & appearance. */ | |||
| --deus-body-background-color: var(--deus-color-darker-blue); | |||
| --deus-body-background-image: url('/deus/assets/images/deus-text-only.png'); | |||
| --deus-body-background-image-margin: 1.5rem; | |||
| --deus-box-background-color: var(--deus-color-dark-grey); | |||
| --deus-box-border-color: var(--deus-color-gold); | |||
| --deus-body-text-color: var(--deus-color-white); | |||
| --deus-body-text-shadow-color: var(--deus-color-white-opacity-one-quarter); | |||
| --deus-link-color: var(--deus-color-gold); | |||
| --deus-link-color-hover: var(--deus-color-white); | |||
| --deus-link-color-active: var(--deus-color-white); | |||
| --deus-link-color-visited: var(--deus-color-gold); | |||
| --deus-image-border-color: var(--deus-color-golden-brown); | |||
| /* Typography. */ | |||
| --deus-content-base-font-size: 1.125rem; | |||
| --deus-body-font: HK Grotesk; | |||
| --deus-body-font-weight: 300; | |||
| --deus-body-text-shadow: none; | |||
| --deus-body-text-line-spacing: 1.4; | |||
| --deus-body-text-paragraph-spacing: 1em; | |||
| --deus-heading-font: Aleo; | |||
| --deus-heading-font-size: 1.5em; | |||
| --deus-heading-text-color: var(--deus-color-white); | |||
| --deus-nav-ui-font: Aleo; | |||
| /* Layout. */ | |||
| --deus-body-padding: 6rem 2rem; | |||
| --deus-content-max-width: 92ch; | |||
| --deus-box-border-width: 1px; | |||
| --deus-post-padding: 1.5rem; | |||
| --deus-post-heading-spacing: 5px; | |||
| --deus-post-spacing: 3rem; | |||
| } | |||
| @media only screen and (max-resolution: 191dpi) { | |||
| :root { | |||
| --deus-body-text-shadow: 0 0 0 var(--deus-body-text-shadow-color); | |||
| } | |||
| } | |||
| /********/ | |||
| /* BASE */ | |||
| /********/ | |||
| html { | |||
| font-size: 16px; | |||
| box-sizing: border-box; | |||
| } | |||
| *, *::before, *::after { | |||
| box-sizing: inherit; | |||
| } | |||
| /**********/ | |||
| /* LAYOUT */ | |||
| /**********/ | |||
| body { | |||
| margin: 0; | |||
| padding: var(--deus-body-padding); | |||
| background-color: var(--deus-body-background-color); | |||
| } | |||
| body::before { | |||
| content: ""; | |||
| position: absolute; | |||
| left: 0; | |||
| right: 0; | |||
| top: 0; | |||
| bottom: 0; | |||
| background-image: var(--deus-body-background-image); | |||
| background-size: calc(100% - 2 * var(--deus-body-background-image-margin)); | |||
| background-repeat: no-repeat; | |||
| background-position: var(--deus-body-background-image-margin) var(--deus-body-background-image-margin); | |||
| background-attachment: fixed; | |||
| opacity: 0.1; | |||
| } | |||
| main { | |||
| max-width: var(--deus-content-max-width); | |||
| margin: auto; | |||
| position: relative; | |||
| } | |||
| /********/ | |||
| /* TEXT */ | |||
| /********/ | |||
| main { | |||
| color: var(--deus-body-text-color); | |||
| font-size: var(--deus-content-base-font-size); | |||
| font-family: var(--deus-body-font); | |||
| font-weight: var(--deus-body-font-weight); | |||
| text-shadow: var(--deus-body-text-shadow); | |||
| line-height: var(--deus-body-text-line-spacing); | |||
| } | |||
| /**********/ | |||
| /* NAV UI */ | |||
| /**********/ | |||
| main nav { | |||
| display: flex; | |||
| flex-flow: row wrap; | |||
| align-items: center; | |||
| position: fixed; | |||
| top: 0; | |||
| left: 0; | |||
| background-color: var(--deus-box-background-color); | |||
| width: 100%; | |||
| padding: 0.75em 1.25em; | |||
| border-bottom: var(--deus-box-border-width) solid var(--deus-box-border-color); | |||
| z-index: 1001; | |||
| } | |||
| main nav a { | |||
| font-family: var(--deus-nav-ui-font); | |||
| font-size: 1.25em; | |||
| font-weight: bold; | |||
| } | |||
| main nav a + a { | |||
| margin-left: 1em; | |||
| } | |||
| main nav a:hover { | |||
| text-decoration: none; | |||
| } | |||
| main nav a:active { | |||
| transform: scale(0.9); | |||
| } | |||
| /*=-------=*/ | |||
| /*= Logo. =*/ | |||
| /*=-------=*/ | |||
| main nav a.logo { | |||
| line-height: 0.5; | |||
| margin-right: 0.25em; | |||
| font-size: 1em; | |||
| } | |||
| main nav a img { | |||
| max-height: 2em; | |||
| filter: | |||
| drop-shadow(0 0 1px var(--deus-color-gold)) | |||
| drop-shadow(0 0 2px var(--deus-color-gold)); | |||
| } | |||
| main nav a:hover img { | |||
| filter: | |||
| drop-shadow(0 0 1px var(--deus-color-white)) | |||
| drop-shadow(0 0 2px var(--deus-color-white)); | |||
| } | |||
| /*=----------------=*/ | |||
| /*= Share buttons. =*/ | |||
| /*=----------------=*/ | |||
| main nav .social-buttons { | |||
| flex: 1 0 auto; | |||
| display: flex; | |||
| flex-flow: row nowrap; | |||
| justify-content: flex-end; | |||
| } | |||
| main nav .social-buttons > * { | |||
| flex: 0 1 auto; | |||
| } | |||
| main nav .social-buttons a { | |||
| font-family: Font Awesome, Font Awesome Brands; | |||
| font-size: 1em; | |||
| font-weight: normal; | |||
| width: 1.5em; | |||
| text-align: center; | |||
| } | |||
| main nav .social-buttons a + a { | |||
| margin-left: 0.5em; | |||
| } | |||
| /*********/ | |||
| /* LINKS */ | |||
| /*********/ | |||
| a { | |||
| color: var(--deus-link-color); | |||
| text-decoration: none; | |||
| } | |||
| a:hover { | |||
| color: var(--deus-link-color-hover); | |||
| text-decoration: underline; | |||
| } | |||
| /********/ | |||
| /* MISC */ | |||
| /********/ | |||
| hr { | |||
| height: 1px; | |||
| border: none; | |||
| background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--deus-color-gold), rgba(0, 0, 0, 0)); | |||
| margin: 1.5em 0; | |||
| clear: both; | |||
| } | |||
| /*=-----------------=*/ | |||
| /* Copyright notice. */ | |||
| /*=-----------------=*/ | |||
| #copyright { | |||
| position: fixed; | |||
| left: 0; | |||
| bottom: 1rem; | |||
| width: 100%; | |||
| text-align: center; | |||
| color: var(--deus-body-text-color); | |||
| font-size: 0.875rem; | |||
| opacity: 0.5; | |||
| } | |||
| #copyright p { | |||
| margin: 0; | |||
| } | |||
| /*********/ | |||
| /* POSTS */ | |||
| /*********/ | |||
| article { | |||
| text-align: justify; | |||
| hyphens: auto; | |||
| position: relative; | |||
| padding: var(--deus-post-padding); | |||
| background-color: var(--deus-box-background-color); | |||
| border: var(--deus-box-border-width) solid var(--deus-box-border-color); | |||
| box-shadow: 0 0 0 1px var(--deus-body-background-color); | |||
| z-index: 1; | |||
| } | |||
| article + article { | |||
| margin-top: var(--deus-post-spacing); | |||
| } | |||
| /*=--------------=*/ | |||
| /*= Post titles. =*/ | |||
| /*=--------------=*/ | |||
| article h1 { | |||
| float: right; | |||
| margin: | |||
| calc(-1 * var(--deus-post-padding) - var(--deus-box-border-width)) | |||
| calc(-1 * var(--deus-post-padding) - var(--deus-box-border-width)) | |||
| var(--deus-post-padding) | |||
| calc(1.5 * var(--deus-post-padding)); | |||
| padding: | |||
| calc(0.5 * var(--deus-post-padding)) | |||
| var(--deus-post-padding); | |||
| background-color: var(--deus-box-background-color); | |||
| border: var(--deus-box-border-width) solid var(--deus-box-border-color); | |||
| box-shadow: | |||
| calc(-1 * var(--deus-post-heading-spacing)) calc(var(--deus-post-heading-spacing)) 0 0 var(--deus-body-background-color), | |||
| calc(-1 * var(--deus-post-heading-spacing)) 0 0 0 var(--deus-body-background-color), | |||
| 0 calc(var(--deus-post-heading-spacing)) 0 0 var(--deus-body-background-color), | |||
| calc(-1 * var(--deus-post-heading-spacing)) var(--deus-box-border-width) 0 var(--deus-box-border-width) var(--deus-box-border-color), | |||
| calc(-1 * var(--deus-box-border-width)) var(--deus-post-heading-spacing) 0 var(--deus-box-border-width) var(--deus-box-border-color), | |||
| calc(-1 * var(--deus-post-heading-spacing)) var(--deus-post-heading-spacing) 0 var(--deus-box-border-width) var(--deus-box-border-color); | |||
| var(--deus-box-border-color); | |||
| font-family: var(--deus-heading-font); | |||
| font-size: var(--deus-heading-font-size); | |||
| color: var(--deus-heading-text-color); | |||
| } | |||
| /*=--------------=*/ | |||
| /*= “More” link. =*/ | |||
| /*=--------------=*/ | |||
| article .more-link { | |||
| text-align: right; | |||
| font-size: 0.875em; | |||
| line-height: 1; | |||
| } | |||
| article .more-link a { | |||
| font-weight: 500; | |||
| } | |||
| /*=-------------=*/ | |||
| /*= Paragraphs. =*/ | |||
| /*=-------------=*/ | |||
| article p { | |||
| margin: 0 0 var(--deus-body-text-paragraph-spacing) 0; | |||
| } | |||
| article p:last-child { | |||
| margin: 0 0 0 0; | |||
| } | |||
| /*=---------=*/ | |||
| /*= Images. =*/ | |||
| /*=---------=*/ | |||
| article img { | |||
| display: block; | |||
| max-width: 100%; | |||
| } | |||
| article .img { | |||
| display: block; | |||
| max-width: 100%; | |||
| border: 1px solid var(--deus-image-border-color); | |||
| } | |||
| article .img.full { | |||
| margin: 2em 0 1.5em 0; | |||
| } | |||
| article .img.left { | |||
| float: left; | |||
| clear: both; | |||
| max-width: 50%; | |||
| margin: 0.25em 1em 0.5em 0; | |||
| } | |||
| article .img.left ~ p { | |||
| float: right; | |||
| clear: right; | |||
| max-width: calc(50% - 1em); | |||
| } | |||
| article .img.right { | |||
| float: right; | |||
| clear: both; | |||
| max-width: 50%; | |||
| margin: 0.25em 0 0.5em 1em; | |||
| } | |||
| article .img.right ~ p { | |||
| float: left; | |||
| clear: left; | |||
| max-width: calc(50% - 1em); | |||
| } | |||
| article .img.left ~ hr ~ p, | |||
| article .img.right ~ hr ~ p { | |||
| float: none; | |||
| max-width: unset; | |||
| } | |||
| /*=-----------=*/ | |||
| /*= Sections. =*/ | |||
| /*=-----------=*/ | |||
| section::after { | |||
| content: ""; | |||
| display: block; | |||
| clear: both; | |||
| } | |||
| section + section { | |||
| margin-top: 4em; | |||
| } | |||
| /***********/ | |||
| /* GALLERY */ | |||
| /***********/ | |||
| main.gallery-layout { | |||
| max-width: unset; | |||
| display: grid; | |||
| grid-template-columns: repeat(auto-fit, minmax(64ch, 1fr)); | |||
| grid-gap: 1.5em; | |||
| } | |||
| .gallery img { | |||
| display: block; | |||
| max-width: 100%; | |||
| border: 1px solid var(--deus-image-border-color); | |||
| } | |||
| .gallery { | |||
| --deus-gallery-column-count: 12; | |||
| --deus-gallery-grid-gap: 0.5em; | |||
| display: grid; | |||
| grid-template-columns: repeat(var(--deus-gallery-column-count), auto); | |||
| grid-gap: var(--deus-gallery-grid-gap); | |||
| align-content: start; | |||
| } | |||
| .gallery .large { | |||
| grid-column: span 12; | |||
| } | |||
| .gallery .medium { | |||
| grid-column: span 6; | |||
| } | |||
| .gallery .small { | |||
| grid-column: span 4; | |||
| } | |||
Двоични данни
assets/images/.DS_Store
Целия файл
Двоични данни
assets/images/deus-logo-only.png
Целия файл
Двоични данни
assets/images/deus-logo-text-horizontal.png
Целия файл
Двоични данни
assets/images/deus-logo-text.png
Целия файл
Двоични данни
assets/images/deus-text-only-no-rays.png
Целия файл
Двоични данни
assets/images/deus-text-only.png
Целия файл
+ 612
- 0
assets/js/image-focus.js
Целия файл
| @@ -0,0 +1,612 @@ | |||
| /* Image-focus.js http://share.obormot.net/misc/gwern/image-focus.js */ | |||
| /* Written by Obormot, 15 February 2019 */ | |||
| /* Lightweight dependency-free JavaScript library for "click to focus/zoom" images in HTML web pages. Originally coded for Obormot.net / GreaterWrong.com. */ | |||
| if (typeof window.GW == "undefined") | |||
| window.GW = { }; | |||
| GW.temp = { }; | |||
| GW.isMobile = ('ontouchstart' in document.documentElement); | |||
| /********************/ | |||
| /* DEBUGGING OUTPUT */ | |||
| /********************/ | |||
| function GWLog (string) { | |||
| if (GW.loggingEnabled || localStorage.getItem("logging-enabled") == "true") | |||
| console.log(string); | |||
| } | |||
| GW.enableLogging = (permanently = false) => { | |||
| if (permanently) | |||
| localStorage.setItem("logging-enabled", "true"); | |||
| else | |||
| GW.loggingEnabled = true; | |||
| }; | |||
| GW.disableLogging = (permanently = false) => { | |||
| if (permanently) | |||
| localStorage.removeItem("logging-enabled"); | |||
| else | |||
| GW.loggingEnabled = false; | |||
| }; | |||
| /****************/ | |||
| /* MISC HELPERS */ | |||
| /****************/ | |||
| /* Given an HTML string, creates an element from that HTML, adds it to | |||
| #ui-elements-container (creating the latter if it does not exist), and | |||
| returns the created element. | |||
| */ | |||
| function addUIElement(element_html) { | |||
| var ui_elements_container = document.querySelector("#ui-elements-container"); | |||
| if (!ui_elements_container) { | |||
| ui_elements_container = document.createElement("div"); | |||
| ui_elements_container.id = "ui-elements-container"; | |||
| document.querySelector("body").appendChild(ui_elements_container); | |||
| } | |||
| ui_elements_container.insertAdjacentHTML("beforeend", element_html); | |||
| return ui_elements_container.lastElementChild; | |||
| } | |||
| /* Toggles whether the page is scrollable. | |||
| */ | |||
| function togglePageScrolling(enable) { | |||
| if (!enable) { | |||
| window.addEventListener('keydown', GW.imageFocus.keyDown = (event) => { | |||
| let forbiddenKeys = [ " ", "Spacebar", "ArrowUp", "ArrowDown", "Up", "Down" ]; | |||
| if (forbiddenKeys.contains(event.key) && | |||
| event.target == document.body) { | |||
| event.preventDefault(); | |||
| } | |||
| }); | |||
| } else { | |||
| window.removeEventListener('keydown', GW.imageFocus.keyDown); | |||
| } | |||
| } | |||
| /* Returns true if the array contains the given element. | |||
| */ | |||
| Array.prototype.contains = function (element) { | |||
| return (this.indexOf(element) !== -1); | |||
| } | |||
| /* Returns true if the string begins with the given prefix. | |||
| */ | |||
| String.prototype.hasPrefix = function (prefix) { | |||
| return (this.lastIndexOf(prefix, 0) === 0); | |||
| } | |||
| /***************/ | |||
| /* IMAGE FOCUS */ | |||
| /***************/ | |||
| function imageFocusSetup() { | |||
| if (typeof GW.imageFocus == "undefined") | |||
| GW.imageFocus = { | |||
| contentImagesSelector: "article img, .gallery img", | |||
| focusedImageSelector: "article img.focused, .gallery img.focused", | |||
| shrinkRatio: 0.975, | |||
| hideUITimerDuration: 1500, | |||
| hideUITimerExpired: () => { | |||
| GWLog("GW.imageFocus.hideUITimerExpired"); | |||
| let currentTime = new Date(); | |||
| let timeSinceLastMouseMove = (new Date()) - GW.imageFocus.mouseLastMovedAt; | |||
| if (timeSinceLastMouseMove < GW.imageFocus.hideUITimerDuration) { | |||
| GW.imageFocus.hideUITimer = setTimeout(GW.imageFocus.hideUITimerExpired, (GW.imageFocus.hideUITimerDuration - timeSinceLastMouseMove)); | |||
| } else { | |||
| hideImageFocusUI(); | |||
| cancelImageFocusHideUITimer(); | |||
| } | |||
| } | |||
| }; | |||
| GWLog("imageFocusSetup"); | |||
| // Create event listener for clicking on images to focus them. | |||
| GW.imageClickedToFocus = (event) => { | |||
| GWLog("GW.imageClickedToFocus"); | |||
| focusImage(event.target); | |||
| if (!GW.isMobile) { | |||
| // Set timer to hide the image focus UI. | |||
| unhideImageFocusUI(); | |||
| GW.imageFocus.hideUITimer = setTimeout(GW.imageFocus.hideUITimerExpired, GW.imageFocus.hideUITimerDuration); | |||
| } | |||
| }; | |||
| // Add the listener to all content images. | |||
| document.querySelectorAll(GW.imageFocus.contentImagesSelector).forEach(image => { | |||
| image.addEventListener("click", GW.imageClickedToFocus); | |||
| }); | |||
| // Wrap all images in a span. | |||
| document.querySelectorAll(GW.imageFocus.contentImagesSelector).forEach(image => { | |||
| let wrapper = document.createElement("span"); | |||
| wrapper.classList.add("image-wrapper", "img"); | |||
| image.parentElement.insertBefore(wrapper, image); | |||
| wrapper.appendChild(image); | |||
| wrapper.classList.add(...image.classList); | |||
| image.classList.remove(...image.classList); | |||
| }); | |||
| // Create the image focus overlay. | |||
| let imageFocusOverlay = addUIElement("<div id='image-focus-overlay'>" + | |||
| `<div class='help-overlay'> | |||
| <p><strong>Arrow keys:</strong> Next/previous image</p> | |||
| <p><strong>Escape</strong> or <strong>click</strong>: Hide zoomed image</p> | |||
| <p><strong>Space bar:</strong> Reset image size & position</p> | |||
| <p><strong>Scroll</strong> to zoom in/out</p> | |||
| <p>(When zoomed in, <strong>drag</strong> to pan; <br/><strong>double-click</strong> to close)</p> | |||
| </div> | |||
| <div class='image-number'></div> | |||
| <div class='slideshow-buttons'> | |||
| <button type='button' class='slideshow-button previous' tabindex='-1' title='Previous image'> | |||
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"> | |||
| <path d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"/> | |||
| </svg> | |||
| </button> | |||
| <button type='button' class='slideshow-button next' tabindex='-1' title='Next image'> | |||
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"> | |||
| <path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/> | |||
| </svg> | |||
| </button> | |||
| </div> | |||
| <div class='caption'></div>` + | |||
| "</div>"); | |||
| imageFocusOverlay.dropShadowFilterForImages = " drop-shadow(10px 10px 10px #000) drop-shadow(0 0 10px #444)"; | |||
| // On orientation change, reset the size & position. | |||
| window.matchMedia('(orientation: portrait)').addListener(() => { setTimeout(resetFocusedImagePosition, 0); }); | |||
| // Accesskey-L starts the slideshow. | |||
| (document.querySelector(GW.imageFocus.contentImagesSelector)||{}).accessKey = 'l'; | |||
| // Count how many images there are in the post, and set the "… of X" label to that. | |||
| ((document.querySelector("#image-focus-overlay .image-number")||{}).dataset||{}).numberOfImages = document.querySelectorAll(GW.imageFocus.contentImagesSelector).length; | |||
| // Activate the buttons. | |||
| imageFocusOverlay.querySelectorAll(".slideshow-button").forEach(button => { | |||
| button.addEventListener("click", GW.imageFocus.slideshowButtonClicked = (event) => { | |||
| GWLog("GW.imageFocus.slideshowButtonClicked"); | |||
| focusNextImage(event.target.classList.contains("next")); | |||
| event.target.blur(); | |||
| }); | |||
| }); | |||
| // UI starts out hidden. | |||
| hideImageFocusUI(); | |||
| } | |||
| function focusImage(imageToFocus) { | |||
| GWLog("focusImage"); | |||
| // Clear 'last-focused' class of last focused image. | |||
| let lastFocusedImage = document.querySelector("img.last-focused"); | |||
| if (lastFocusedImage) { | |||
| lastFocusedImage.classList.remove("last-focused"); | |||
| lastFocusedImage.removeAttribute("accesskey"); | |||
| } | |||
| // Create the focused version of the image. | |||
| imageToFocus.classList.toggle("focused", true); | |||
| let imageFocusOverlay = document.querySelector("#image-focus-overlay"); | |||
| let clonedImage = imageToFocus.cloneNode(true); | |||
| clonedImage.style = ""; | |||
| clonedImage.removeAttribute("width"); | |||
| clonedImage.removeAttribute("height"); | |||
| clonedImage.style.filter = imageToFocus.style.filter + imageFocusOverlay.dropShadowFilterForImages; | |||
| // Add the image to the overlay. | |||
| imageFocusOverlay.appendChild(clonedImage); | |||
| imageFocusOverlay.classList.toggle("engaged", true); | |||
| // Set image to default size and position. | |||
| resetFocusedImagePosition(); | |||
| // Add listener to zoom image with scroll wheel. | |||
| window.addEventListener("wheel", GW.imageFocus.scrollEvent = (event) => { | |||
| GWLog("GW.imageFocus.scrollEvent"); | |||
| event.preventDefault(); | |||
| let image = document.querySelector("#image-focus-overlay img.focused"); | |||
| // Remove the filter. | |||
| image.savedFilter = image.style.filter; | |||
| image.style.filter = 'none'; | |||
| // Locate point under cursor. | |||
| let imageBoundingBox = image.getBoundingClientRect(); | |||
| // Calculate resize factor. | |||
| var factor = (image.height > 10 && image.width > 10) || event.deltaY < 0 ? | |||
| 1 + Math.sqrt(Math.abs(event.deltaY))/100.0 : | |||
| 1; | |||
| // Resize. | |||
| image.style.width = (event.deltaY < 0 ? | |||
| (image.clientWidth * factor) : | |||
| (image.clientWidth / factor)) | |||
| + "px"; | |||
| image.style.height = ""; | |||
| // Designate zoom origin. | |||
| var zoomOrigin; | |||
| // Zoom from cursor if we're zoomed in to where image exceeds screen, AND | |||
| // the cursor is over the image. | |||
| let imageSizeExceedsWindowBounds = (image.getBoundingClientRect().width > window.innerWidth || image.getBoundingClientRect().height > window.innerHeight); | |||
| let zoomingFromCursor = imageSizeExceedsWindowBounds && | |||
| (imageBoundingBox.left <= event.clientX && | |||
| event.clientX <= imageBoundingBox.right && | |||
| imageBoundingBox.top <= event.clientY && | |||
| event.clientY <= imageBoundingBox.bottom); | |||
| // Otherwise, if we're zooming OUT, zoom from window center; if we're | |||
| // zooming IN, zoom from image center. | |||
| let zoomingFromWindowCenter = event.deltaY > 0; | |||
| if (zoomingFromCursor) | |||
| zoomOrigin = { x: event.clientX, | |||
| y: event.clientY }; | |||
| else if (zoomingFromWindowCenter) | |||
| zoomOrigin = { x: window.innerWidth / 2, | |||
| y: window.innerHeight / 2 }; | |||
| else | |||
| zoomOrigin = { x: imageBoundingBox.x + imageBoundingBox.width / 2, | |||
| y: imageBoundingBox.y + imageBoundingBox.height / 2 }; | |||
| // Calculate offset from zoom origin. | |||
| let offsetOfImageFromZoomOrigin = { | |||
| x: imageBoundingBox.x - zoomOrigin.x, | |||
| y: imageBoundingBox.y - zoomOrigin.y | |||
| } | |||
| // Calculate delta from centered zoom. | |||
| let deltaFromCenteredZoom = { | |||
| x: image.getBoundingClientRect().x - (zoomOrigin.x + (event.deltaY < 0 ? offsetOfImageFromZoomOrigin.x * factor : offsetOfImageFromZoomOrigin.x / factor)), | |||
| y: image.getBoundingClientRect().y - (zoomOrigin.y + (event.deltaY < 0 ? offsetOfImageFromZoomOrigin.y * factor : offsetOfImageFromZoomOrigin.y / factor)) | |||
| } | |||
| // Adjust image position appropriately. | |||
| image.style.left = parseInt(getComputedStyle(image).left) - deltaFromCenteredZoom.x + "px"; | |||
| image.style.top = parseInt(getComputedStyle(image).top) - deltaFromCenteredZoom.y + "px"; | |||
| // Gradually re-center image, if it's smaller than the window. | |||
| if (!imageSizeExceedsWindowBounds) { | |||
| let imageCenter = { x: image.getBoundingClientRect().x + image.getBoundingClientRect().width / 2, | |||
| y: image.getBoundingClientRect().y + image.getBoundingClientRect().height / 2 } | |||
| let windowCenter = { x: window.innerWidth / 2, | |||
| y: window.innerHeight / 2 } | |||
| let imageOffsetFromCenter = { x: windowCenter.x - imageCenter.x, | |||
| y: windowCenter.y - imageCenter.y } | |||
| // Divide the offset by 10 because we're nudging the image toward center, | |||
| // not jumping it there. | |||
| image.style.left = parseInt(getComputedStyle(image).left) + imageOffsetFromCenter.x / 10 + "px"; | |||
| image.style.top = parseInt(getComputedStyle(image).top) + imageOffsetFromCenter.y / 10 + "px"; | |||
| } | |||
| // Put the filter back. | |||
| image.style.filter = image.savedFilter; | |||
| // Set the cursor appropriately. | |||
| setFocusedImageCursor(); | |||
| }, { passive: false }); | |||
| window.addEventListener("MozMousePixelScroll", GW.imageFocus.oldFirefoxCompatibilityScrollEvent = (event) => { | |||
| GWLog("GW.imageFocus.oldFirefoxCompatibilityScrollEvent"); | |||
| event.preventDefault(); | |||
| }); | |||
| // If image is bigger than viewport, it's draggable. Otherwise, click unfocuses. | |||
| window.addEventListener("mouseup", GW.imageFocus.mouseUp = (event) => { | |||
| GWLog("GW.imageFocus.mouseUp"); | |||
| window.onmousemove = ''; | |||
| // We only want to do anything on left-clicks. | |||
| if (event.button != 0) return; | |||
| // Don't unfocus if click was on a slideshow next/prev button! | |||
| if (event.target.classList.contains("slideshow-button")) return; | |||
| // We also don't want to do anything if clicked on the help overlay. | |||
| if (event.target.classList.contains("help-overlay") || | |||
| event.target.closest(".help-overlay")) | |||
| return; | |||
| let focusedImage = document.querySelector("#image-focus-overlay img.focused"); | |||
| if ((event.target == focusedImage || event.target.tagName == "HTML") && | |||
| (focusedImage.height >= window.innerHeight || focusedImage.width >= window.innerWidth)) { | |||
| // If the mouseup event was the end of a pan of an overside image, | |||
| // put the filter back; do not unfocus. | |||
| focusedImage.style.filter = focusedImage.savedFilter; | |||
| } else if (event.target.tagName != "HTML") { | |||
| unfocusImageOverlay(); | |||
| return; | |||
| } | |||
| }); | |||
| window.addEventListener("mousedown", GW.imageFocus.mouseDown = (event) => { | |||
| GWLog("GW.imageFocus.mouseDown"); | |||
| // We only want to do anything on left-clicks. | |||
| if (event.button != 0) return; | |||
| event.preventDefault(); | |||
| let focusedImage = document.querySelector("#image-focus-overlay img.focused"); | |||
| if (focusedImage.height >= window.innerHeight || focusedImage.width >= window.innerWidth) { | |||
| let mouseCoordX = event.clientX; | |||
| let mouseCoordY = event.clientY; | |||
| let imageCoordX = parseInt(getComputedStyle(focusedImage).left); | |||
| let imageCoordY = parseInt(getComputedStyle(focusedImage).top); | |||
| // Save the filter. | |||
| focusedImage.savedFilter = focusedImage.style.filter; | |||
| window.onmousemove = (event) => { | |||
| // Remove the filter. | |||
| focusedImage.style.filter = "none"; | |||
| focusedImage.style.left = imageCoordX + event.clientX - mouseCoordX + 'px'; | |||
| focusedImage.style.top = imageCoordY + event.clientY - mouseCoordY + 'px'; | |||
| }; | |||
| return false; | |||
| } | |||
| }); | |||
| // Double-click on the image unfocuses. | |||
| clonedImage.addEventListener('dblclick', GW.imageFocus.doubleClick = (event) => { | |||
| GWLog("GW.imageFocus.doubleClick"); | |||
| if (event.target.classList.contains("slideshow-button")) return; | |||
| unfocusImageOverlay(); | |||
| }); | |||
| // Escape key unfocuses, spacebar resets. | |||
| document.addEventListener("keyup", GW.imageFocus.keyUp = (event) => { | |||
| GWLog("GW.imageFocus.keyUp"); | |||
| let allowedKeys = [ " ", "Spacebar", "Escape", "Esc", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Up", "Down", "Left", "Right" ]; | |||
| if (!allowedKeys.contains(event.key) || | |||
| getComputedStyle(document.querySelector("#image-focus-overlay")).display == "none") return; | |||
| event.preventDefault(); | |||
| switch (event.key) { | |||
| case "Escape": | |||
| case "Esc": | |||
| unfocusImageOverlay(); | |||
| break; | |||
| case " ": | |||
| case "Spacebar": | |||
| resetFocusedImagePosition(); | |||
| break; | |||
| case "ArrowDown": | |||
| case "Down": | |||
| case "ArrowRight": | |||
| case "Right": | |||
| if (document.querySelector(GW.imageFocus.focusedImageSelector)) focusNextImage(true); | |||
| break; | |||
| case "ArrowUp": | |||
| case "Up": | |||
| case "ArrowLeft": | |||
| case "Left": | |||
| if (document.querySelector(GW.imageFocus.focusedImageSelector)) focusNextImage(false); | |||
| break; | |||
| } | |||
| }); | |||
| setTimeout(() => { | |||
| // Prevent spacebar or arrow keys from scrolling page when image focused. | |||
| togglePageScrolling(false); | |||
| }); | |||
| // Mark the overlay as being in slide show mode (to show buttons/count). | |||
| imageFocusOverlay.classList.add("slideshow"); | |||
| // Set state of next/previous buttons. | |||
| let images = document.querySelectorAll(GW.imageFocus.contentImagesSelector); | |||
| var indexOfFocusedImage = getIndexOfFocusedImage(); | |||
| imageFocusOverlay.querySelector(".slideshow-button.previous").disabled = (indexOfFocusedImage == 0); | |||
| imageFocusOverlay.querySelector(".slideshow-button.next").disabled = (indexOfFocusedImage == images.length - 1); | |||
| // Set the image number. | |||
| document.querySelector("#image-focus-overlay .image-number").textContent = (indexOfFocusedImage + 1); | |||
| // Replace the hash. | |||
| history.replaceState(null, null, "#if_slide_" + (indexOfFocusedImage + 1)); | |||
| // Set the caption. | |||
| setImageFocusCaption(); | |||
| // Moving mouse unhides image focus UI. | |||
| window.addEventListener("mousemove", GW.imageFocus.mouseMoved = (event) => { | |||
| GWLog("GW.imageFocus.mouseMoved"); | |||
| let currentDateTime = new Date(); | |||
| if (!(event.target.tagName == "IMG" || event.target.id == "image-focus-overlay")) { | |||
| cancelImageFocusHideUITimer(); | |||
| } else { | |||
| if (!GW.imageFocus.hideUITimer) { | |||
| unhideImageFocusUI(); | |||
| GW.imageFocus.hideUITimer = setTimeout(GW.imageFocus.hideUITimerExpired, GW.imageFocus.hideUITimerDuration); | |||
| } | |||
| GW.imageFocus.mouseLastMovedAt = currentDateTime; | |||
| } | |||
| }); | |||
| } | |||
| function resetFocusedImagePosition() { | |||
| GWLog("resetFocusedImagePosition"); | |||
| let focusedImage = document.querySelector("#image-focus-overlay img.focused"); | |||
| if (!focusedImage) return; | |||
| let sourceImage = document.querySelector(GW.imageFocus.focusedImageSelector); | |||
| // Make sure that initially, the image fits into the viewport. | |||
| let constrainedWidth = Math.min(sourceImage.naturalWidth, window.innerWidth * GW.imageFocus.shrinkRatio); | |||
| let widthShrinkRatio = constrainedWidth / sourceImage.naturalWidth; | |||
| var constrainedHeight = Math.min(sourceImage.naturalHeight, window.innerHeight * GW.imageFocus.shrinkRatio); | |||
| let heightShrinkRatio = constrainedHeight / sourceImage.naturalHeight; | |||
| let shrinkRatio = Math.min(widthShrinkRatio, heightShrinkRatio); | |||
| focusedImage.style.width = (sourceImage.naturalWidth * shrinkRatio) + "px"; | |||
| focusedImage.style.height = (sourceImage.naturalHeight * shrinkRatio) + "px"; | |||
| // Remove modifications to position. | |||
| focusedImage.style.left = ""; | |||
| focusedImage.style.top = ""; | |||
| // Set the cursor appropriately. | |||
| setFocusedImageCursor(); | |||
| } | |||
| function setFocusedImageCursor() { | |||
| let focusedImage = document.querySelector("#image-focus-overlay img.focused"); | |||
| if (!focusedImage) return; | |||
| focusedImage.style.cursor = (focusedImage.height >= window.innerHeight || focusedImage.width >= window.innerWidth) ? | |||
| 'move' : ''; | |||
| } | |||
| function unfocusImageOverlay() { | |||
| GWLog("unfocusImageOverlay"); | |||
| // Remove event listeners. | |||
| window.removeEventListener("wheel", GW.imageFocus.scrollEvent); | |||
| window.removeEventListener("MozMousePixelScroll", GW.imageFocus.oldFirefoxCompatibilityScrollEvent); | |||
| // NOTE: The double-click listener does not need to be removed manually, | |||
| // because the focused (cloned) image will be removed anyway. | |||
| document.removeEventListener("keyup", GW.imageFocus.keyUp); | |||
| window.removeEventListener("mousemove", GW.imageFocus.mouseMoved); | |||
| window.removeEventListener("mousedown", GW.imageFocus.mouseDown); | |||
| window.removeEventListener("mouseup", GW.imageFocus.mouseUp); | |||
| // Set accesskey of currently focused image. | |||
| let currentlyFocusedImage = document.querySelector(GW.imageFocus.focusedImageSelector) | |||
| if (currentlyFocusedImage) { | |||
| currentlyFocusedImage.classList.toggle("last-focused", true); | |||
| currentlyFocusedImage.accessKey = 'l'; | |||
| } | |||
| // Remove focused image and hide overlay. | |||
| let imageFocusOverlay = document.querySelector("#image-focus-overlay"); | |||
| imageFocusOverlay.classList.remove("engaged"); | |||
| imageFocusOverlay.querySelector("img.focused").remove(); | |||
| // Unset "focused" class of focused image. | |||
| document.querySelector(GW.imageFocus.focusedImageSelector).classList.remove("focused"); | |||
| setTimeout(() => { | |||
| // Re-enable page scrolling. | |||
| togglePageScrolling(true); | |||
| }); | |||
| // Reset the hash, if needed. | |||
| if (location.hash.hasPrefix("#if_slide_")) | |||
| history.replaceState(null, null, "#"); | |||
| } | |||
| function getIndexOfFocusedImage() { | |||
| let images = document.querySelectorAll(GW.imageFocus.contentImagesSelector); | |||
| var indexOfFocusedImage = -1; | |||
| for (i = 0; i < images.length; i++) { | |||
| if (images[i].classList.contains("focused")) { | |||
| indexOfFocusedImage = i; | |||
| break; | |||
| } | |||
| } | |||
| return indexOfFocusedImage; | |||
| } | |||
| function focusNextImage(next = true) { | |||
| GWLog("focusNextImage"); | |||
| let images = document.querySelectorAll(GW.imageFocus.contentImagesSelector); | |||
| var indexOfFocusedImage = getIndexOfFocusedImage(); | |||
| if (next ? (++indexOfFocusedImage == images.length) : (--indexOfFocusedImage == -1)) return; | |||
| // Remove existing image. | |||
| document.querySelector("#image-focus-overlay img.focused").remove(); | |||
| // Unset "focused" class of just-removed image. | |||
| document.querySelector(GW.imageFocus.focusedImageSelector).classList.remove("focused"); | |||
| // Create the focused version of the image. | |||
| images[indexOfFocusedImage].classList.toggle("focused", true); | |||
| let imageFocusOverlay = document.querySelector("#image-focus-overlay"); | |||
| let clonedImage = images[indexOfFocusedImage].cloneNode(true); | |||
| clonedImage.style = ""; | |||
| clonedImage.removeAttribute("width"); | |||
| clonedImage.removeAttribute("height"); | |||
| clonedImage.style.filter = images[indexOfFocusedImage].style.filter + imageFocusOverlay.dropShadowFilterForImages; | |||
| imageFocusOverlay.appendChild(clonedImage); | |||
| imageFocusOverlay.classList.toggle("engaged", true); | |||
| // Set image to default size and position. | |||
| resetFocusedImagePosition(); | |||
| // Set state of next/previous buttons. | |||
| imageFocusOverlay.querySelector(".slideshow-button.previous").disabled = (indexOfFocusedImage == 0); | |||
| imageFocusOverlay.querySelector(".slideshow-button.next").disabled = (indexOfFocusedImage == images.length - 1); | |||
| // Set the image number display. | |||
| document.querySelector("#image-focus-overlay .image-number").textContent = (indexOfFocusedImage + 1); | |||
| // Set the caption. | |||
| setImageFocusCaption(); | |||
| // Replace the hash. | |||
| history.replaceState(null, null, "#if_slide_" + (indexOfFocusedImage + 1)); | |||
| } | |||
| function setImageFocusCaption() { | |||
| GWLog("setImageFocusCaption"); | |||
| var T = { }; // Temporary storage. | |||
| // Clear existing caption, if any. | |||
| let captionContainer = document.querySelector("#image-focus-overlay .caption"); | |||
| Array.from(captionContainer.children).forEach(child => { child.remove(); }); | |||
| // Determine caption. | |||
| let currentlyFocusedImage = document.querySelector(GW.imageFocus.focusedImageSelector); | |||
| var captionHTML; | |||
| if ((T.enclosingFigure = currentlyFocusedImage.closest("figure")) && | |||
| (T.figcaption = T.enclosingFigure.querySelector("figcaption"))) { | |||
| captionHTML = (T.figcaption.querySelector("p")) ? | |||
| T.figcaption.innerHTML : | |||
| "<p>" + T.figcaption.innerHTML + "</p>"; | |||
| } else if (currentlyFocusedImage.title != "") { | |||
| captionHTML = `<p>${currentlyFocusedImage.title}</p>`; | |||
| } | |||
| // Insert the caption, if any. | |||
| if (captionHTML) captionContainer.insertAdjacentHTML("beforeend", captionHTML); | |||
| } | |||
| function hideImageFocusUI() { | |||
| GWLog("hideImageFocusUI"); | |||
| let imageFocusOverlay = document.querySelector("#image-focus-overlay"); | |||
| imageFocusOverlay.querySelectorAll(".slideshow-button, .help-overlay, .image-number, .caption").forEach(element => { | |||
| element.classList.toggle("hidden", true); | |||
| }); | |||
| } | |||
| function unhideImageFocusUI() { | |||
| GWLog("unhideImageFocusUI"); | |||
| let imageFocusOverlay = document.querySelector("#image-focus-overlay"); | |||
| imageFocusOverlay.querySelectorAll(".slideshow-button, .help-overlay, .image-number, .caption").forEach(element => { | |||
| element.classList.remove("hidden"); | |||
| }); | |||
| } | |||
| function cancelImageFocusHideUITimer() { | |||
| clearTimeout(GW.imageFocus.hideUITimer); | |||
| GW.imageFocus.hideUITimer = null; | |||
| } | |||
| function focusImageSpecifiedByURL() { | |||
| GWLog("focusImageSpecifiedByURL"); | |||
| if (location.hash.hasPrefix("#if_slide_")) { | |||
| document.addEventListener("readystatechange", () => { | |||
| let images = document.querySelectorAll(GW.imageFocus.contentImagesSelector); | |||
| let imageToFocus = (/#if_slide_([0-9]+)/.exec(location.hash)||{})[1]; | |||
| if (imageToFocus > 0 && imageToFocus <= images.length) { | |||
| focusImage(images[imageToFocus - 1]); | |||
| if (!GW.isMobile) { | |||
| // Set timer to hide the image focus UI. | |||
| unhideImageFocusUI(); | |||
| GW.imageFocus.hideUITimer = setTimeout(GW.imageFocus.hideUITimerExpired, GW.imageFocus.hideUITimerDuration); | |||
| } | |||
| } | |||
| }); | |||
| } | |||
| } | |||
| /******************/ | |||
| /* INITIALIZATION */ | |||
| /******************/ | |||
| imageFocusSetup(); | |||
| focusImageSpecifiedByURL(); | |||
+ 3
- 0
includes/colophon.html
Целия файл
| @@ -0,0 +1,3 @@ | |||
| <div id='copyright'> | |||
| <p>© 2020–present DEUS gaming</p> | |||
| </div> | |||
+ 1
- 0
includes/foot-scripts.html
Целия файл
| @@ -0,0 +1 @@ | |||
| <script src="/deus/assets/js/image-focus.js" defer></script> | |||
+ 3
- 0
includes/head-css-links.html
Целия файл
| @@ -0,0 +1,3 @@ | |||
| <link rel='stylesheet' type='text/css' href='https://fonts.obormot.net?fonts=*'> | |||
| <link rel='stylesheet' type='text/css' href='/deus/assets/css/main.css'> | |||
| <link rel='stylesheet' type='text/css' href='/deus/assets/css/image-focus.css'> | |||
+ 10
- 0
includes/main-nav.html
Целия файл
| @@ -0,0 +1,10 @@ | |||
| <nav id='main-nav'> | |||
| <a href='/deus/' class='logo'><img src='/deus/assets/images/deus-logo-only.png'></a> | |||
| <a href='/deus/pages/about'>About</a> | |||
| <a href='/deus/posts'>News</a> | |||
| <div class='social-buttons'> | |||
| <a class='social-button share' href='#'></a> | |||
| <a class='social-button facebook' href='#'></a> | |||
| <a class='social-button twitter' href='#'></a> | |||
| </div> | |||
| </nav> | |||
+ 27
- 0
index.shtml
Целия файл
| @@ -0,0 +1,27 @@ | |||
| <!DOCTYPE html> | |||
| <html> | |||
| <head> | |||
| <title>DEUS gaming</title> | |||
| <!--#include virtual="/deus/includes/head-css-links.html" --> | |||
| <link rel='stylesheet' type='text/css' href='/deus/assets/css/home-page.css'> | |||
| </head> | |||
| <body class='home-page'> | |||
| <div id='splash-image' class='hidden'> | |||
| <img src='/deus/assets/images/deus-logo-text-horizontal.png'> | |||
| </div> | |||
| <main> | |||
| <!--#include virtual="/deus/includes/main-nav.html" --> | |||
| <!--#include virtual="/deus/includes/colophon.html" --> | |||
| </main> | |||
| </body> | |||
| <script> | |||
| document.querySelector("#splash-image").classList.remove("hidden"); | |||
| setTimeout(() => { | |||
| document.querySelector("#splash-image").classList.add("fade"); | |||
| }, 2000); | |||
| setTimeout(() => { | |||
| document.querySelector("#main-nav").classList.add("shown"); | |||
| document.querySelector("#copyright").classList.add("shown"); | |||
| }, 2000); | |||
| </script> | |||
| </html> | |||
Двоични данни
pages/.DS_Store
Целия файл
Двоични данни
pages/about/.DS_Store
Целия файл
Двоични данни
pages/about/TV_stand_enhanced.jpg
Целия файл
Двоични данни
pages/about/cult_of_Tiamat.png
Целия файл
+ 44
- 0
pages/about/index.shtml
Целия файл
| @@ -0,0 +1,44 @@ | |||
| <!DOCTYPE html> | |||
| <html lang='en-US'> | |||
| <head> | |||
| <title>DEUS gaming</title> | |||
| <!--#include virtual="/deus/includes/head-css-links.html" --> | |||
| </head> | |||
| <body> | |||
| <main> | |||
| <!--#include virtual="/deus/includes/main-nav.html" --> | |||
| <article> | |||
| <section> | |||
| <h1>About DEUS gaming</h1> | |||
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis diam turpis, at sagittis tortor pulvinar sed. Quisque sollicitudin ex in ultrices mattis. Cras vehicula odio at feugiat fermentum. Nunc mi lectus, iaculis eget velit vel, gravida elementum arcu. Nam facilisis, erat at dictum tincidunt, nunc ex ultricies elit, nec ullamcorper nunc purus eget nunc. Nulla facilisi. Fusce volutpat libero eget mollis ornare. Curabitur auctor ornare viverra. Nam sollicitudin lacus magna, eu vestibulum nulla consequat at. Vestibulum tempus dolor sed feugiat lobortis. Nulla facilisi. Fusce malesuada, velit a posuere vulputate, nisl mauris imperdiet odio, a porta diam felis eu ante. Maecenas mollis nulla enim, vitae gravida justo laoreet a. Mauris blandit orci a odio vestibulum rutrum. Fusce lobortis libero ut efficitur pretium. Donec semper, lectus gravida ultricies vulputate, mauris arcu laoreet massa, at sollicitudin tortor metus ut libero.</p> | |||
| </section> | |||
| <section> | |||
| <img src='things_wrapped_in_dough_flowchart.jpg' class='full'> | |||
| <p>Maecenas mattis convallis risus, sed mattis nibh sagittis et. Integer sed nulla quis ligula auctor fermentum non a felis. Mauris vitae eros quis nulla blandit dignissim. Cras bibendum augue non leo luctus bibendum. Nunc et porttitor nunc. Aenean at ipsum vel ligula volutpat mattis. Maecenas feugiat mauris vitae nibh pharetra venenatis. Nullam ornare dolor nec ex imperdiet pharetra condimentum id elit. Integer orci neque, dignissim non neque ut, aliquam commodo tellus. Suspendisse rhoncus neque tempus magna luctus, sodales rhoncus ipsum gravida. Maecenas et hendrerit augue.</p> | |||
| </section> | |||
| <section> | |||
| <img src='cult_of_Tiamat.png' class='left'> | |||
| <p>Pellentesque dapibus leo eget odio imperdiet, ac pellentesque elit finibus. In eu fermentum risus. In pretium lobortis efficitur. Proin hendrerit nisl magna, ut tempor dui tristique id. Morbi convallis risus at erat vehicula interdum. Nunc pellentesque metus quis vulputate sodales. Morbi consectetur massa turpis, ac condimentum massa rutrum ut. Vestibulum finibus felis ut magna hendrerit, non blandit nulla iaculis. Fusce commodo aliquet volutpat. Curabitur id bibendum lectus. Maecenas et scelerisque turpis, at vestibulum sem. Donec non mauris felis. Maecenas in nunc rutrum, dapibus nulla sed, vestibulum neque. Donec a lacus venenatis, tempus nunc quis, pellentesque mauris. Cras pharetra bibendum eros at efficitur. Nunc laoreet cursus elit ac pellentesque.</p> | |||
| <p>Etiam eu nisl sapien. Maecenas vehicula vitae metus in viverra. Fusce nec sapien malesuada, cursus quam eget, semper justo. Donec bibendum accumsan ante, in porta urna porta a. Ut luctus odio lacus, pulvinar semper ex lacinia accumsan. Curabitur sit amet rutrum ligula. Nam ex augue, tempor ut tortor et, vehicula hendrerit felis. Curabitur sit amet massa diam. Vestibulum ante urna, varius sed nunc vitae, laoreet dignissim enim. Suspendisse nec suscipit sem, vitae egestas tortor. Mauris auctor maximus dolor, vitae elementum nisi ullamcorper nec.</p> | |||
| </section> | |||
| <section> | |||
| <img src='TV_stand_enhanced.jpg' class='right'> | |||
| <p>Morbi laoreet aliquet enim. Quisque pulvinar accumsan fermentum. Nam convallis, arcu eu suscipit gravida, nisl felis sodales elit, ac dignissim nunc odio a mauris. Etiam elit libero, volutpat vitae massa eu, placerat ultricies purus. Duis vel finibus tellus. Etiam ultricies fringilla nibh, interdum ornare leo bibendum et. Quisque ultricies aliquet venenatis. Suspendisse neque nisi, ornare a condimentum vel, iaculis sed erat. Sed nec elit ut mi lobortis euismod. Nulla ut tempus tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc vitae tortor feugiat, accumsan dui non, finibus est. Maecenas et elit erat. Nam vulputate ante id massa ullamcorper sodales.</p> | |||
| <p>Aliquam dictum egestas sagittis. Donec neque leo, sollicitudin eu finibus a, condimentum ut quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus rutrum est ac felis pharetra, sit amet posuere lectus eleifend. Aenean at dignissim enim. Nunc erat est, aliquam in tempor ut, pulvinar eu dui. In convallis bibendum est, venenatis semper dui. Nulla facilisi. Donec in egestas sem. Sed sollicitudin dolor nec magna tristique euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Vivamus ornare justo in lacus mollis malesuada. Proin fringilla id libero eget pulvinar.</p> | |||
| <hr> | |||
| <p>Pellentesque malesuada nibh eu purus condimentum, at molestie lectus placerat. Curabitur a aliquam erat. Nulla elementum justo elit, in dapibus mauris maximus eleifend. Praesent hendrerit, quam in porttitor gravida, felis est tristique nulla, a mattis nunc dolor vel lectus. Proin purus lectus, mattis vel vulputate iaculis, venenatis at purus. Ut fermentum finibus diam. Sed vel erat odio. Curabitur mattis iaculis neque at posuere. Donec placerat, neque sed fringilla bibendum, leo leo dignissim mi, vel finibus augue nibh a neque.</p> | |||
| <p>Maecenas tristique ultricies ipsum eu sodales. Donec placerat posuere felis. Pellentesque egestas nunc eget tellus aliquet, et semper risus faucibus. Curabitur eleifend enim quis nisi egestas, id cursus ipsum tincidunt. Nam mollis malesuada ligula eget ornare. Praesent vitae nulla eu justo tristique convallis at at odio. Duis viverra turpis porta, egestas erat lobortis, molestie sem.</p> | |||
| <p>Nam nec enim fermentum, aliquet sapien eget, bibendum ante. Nullam hendrerit non dui mattis molestie. Ut eu mi id dui aliquet mattis. Mauris sit amet tellus eu enim blandit suscipit. Nam tincidunt dictum tincidunt. Etiam vel eros quis leo laoreet iaculis. Morbi nec tincidunt enim, convallis auctor dolor. Nunc consequat nulla turpis, vel aliquam urna rhoncus vitae. Aliquam rhoncus, arcu vel ornare imperdiet, orci risus placerat est, nec semper risus nulla vitae tellus. Vestibulum sed elit gravida, bibendum dui in, lacinia massa. Sed ultricies molestie suscipit.</p> | |||
| <hr> | |||
| <p>Maecenas est nisi, facilisis ac faucibus a, accumsan vel eros. Phasellus sit amet dui eget erat eleifend hendrerit quis quis elit. Phasellus nisl sem, vulputate vel mauris a, venenatis vehicula lectus. Maecenas elementum diam vel rutrum accumsan. Fusce ac pretium diam, ut ullamcorper nisl. Nullam dignissim sapien quam, eu sagittis purus tristique id. Sed dapibus tristique mauris nec gravida.</p> | |||
| <p>Quisque ut magna at quam laoreet interdum. Sed consequat nunc in orci tincidunt viverra. Praesent vitae imperdiet risus, at suscipit erat. Sed suscipit massa at mi facilisis, nec laoreet neque hendrerit. Nulla bibendum ligula nisi, varius dapibus velit interdum ut. In hac habitasse platea dictumst. Phasellus dignissim quam ligula, in tincidunt orci cursus id. Aliquam vehicula porta enim tristique facilisis. Praesent mollis a tellus at varius. Proin hendrerit magna consequat justo venenatis interdum. Etiam aliquet nisl ut auctor auctor. Mauris feugiat iaculis faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consectetur dictum condimentum.</p> | |||
| <p>Cras urna eros, ultricies non tempus a, bibendum in metus. Curabitur eu velit et leo lobortis euismod at vel leo. Ut ultricies purus non nisi molestie, consequat porta magna auctor. Nunc elementum luctus velit in mollis. Nulla eleifend semper sem id dictum. Donec at velit lacus. Sed tristique tortor eget nisl fringilla volutpat. Integer quis hendrerit risus. In at tincidunt mauris. Nulla in lorem a orci pulvinar egestas. Vestibulum pellentesque fermentum lorem ac venenatis. Morbi elementum vestibulum porta. Ut sagittis, est eu posuere mattis, urna felis luctus justo, eu ultrices orci ex nec nunc. Phasellus non purus massa.</p> | |||
| <p>Suspendisse efficitur, lacus ut imperdiet porttitor, dui mauris pulvinar ex, in tempor erat nisi at velit. Sed lacinia ligula eu hendrerit elementum. Cras ex mauris, tempor quis ante quis, placerat finibus leo. Praesent nec diam sapien. Integer sed nunc ornare, lacinia ante eget, convallis sem. Maecenas mollis, dui vel tincidunt vestibulum, nulla leo rutrum nibh, sed tempus enim neque porttitor urna. Vestibulum rhoncus, erat ac fringilla imperdiet, ipsum nisl bibendum erat, et ullamcorper tellus lorem ultricies dolor. Mauris posuere neque vel justo lobortis posuere. Maecenas sit amet massa non magna elementum elementum at lobortis magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer massa augue, scelerisque in pretium id, facilisis ac ipsum. In condimentum in nisl eget lobortis. Vestibulum posuere, enim nec tristique ornare, tortor est semper nisl, eu vulputate tortor nisl quis mauris.</p> | |||
| <p>Morbi eget arcu urna. Nam nec aliquam lectus, semper eleifend est. Pellentesque id lectus aliquam, lobortis mauris id, rhoncus est. Pellentesque vehicula enim tortor, in vehicula leo elementum eget. Suspendisse lacus leo, interdum id lectus sit amet, vestibulum lobortis leo. Sed vulputate, velit ac bibendum hendrerit, sem erat convallis dui, id blandit lorem diam ac enim. Nullam odio risus, elementum at dolor at, tempor efficitur dui. Vivamus tempus quam id vulputate condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec non felis id sapien iaculis volutpat vel nec elit.</p> | |||
| </section> | |||
| </article> | |||
| <!--#include virtual="/deus/includes/colophon.html" --> | |||
| </main> | |||
| <!--#include virtual="/deus/includes/foot-scripts.html" --> | |||
| </body> | |||
| </html> | |||
Двоични данни
pages/about/robot_bear_tie.jpg
Целия файл
Двоични данни
pages/about/things_wrapped_in_dough_flowchart.jpg
Целия файл
Двоични данни
pages/player/cervantes-soulcalibur6-artwork-by-takuji-kawano.jpg
Целия файл
+ 31
- 0
pages/player/index.shtml
Целия файл
| @@ -0,0 +1,31 @@ | |||
| <!DOCTYPE html> | |||
| <html lang='en-US'> | |||
| <head> | |||
| <title>DEUS gaming</title> | |||
| <!--#include virtual="/deus/includes/head-css-links.html" --> | |||
| </head> | |||
| <body> | |||
| <main class='gallery-layout'> | |||
| <!--#include virtual="/deus/includes/main-nav.html" --> | |||
| <div class='gallery'> | |||
| <img class='medium' src='cervantes-soulcalibur6-artwork-by-takuji-kawano.jpg'> | |||
| <img class='medium' src='cervantes-soulcalibur6-artwork-by-takuji-kawano.jpg'> | |||
| <img class='small' src='cervantes-soulcalibur6-artwork-by-takuji-kawano.jpg'> | |||
| <img class='small' src='cervantes-soulcalibur6-artwork-by-takuji-kawano.jpg'> | |||
| <img class='small' src='cervantes-soulcalibur6-artwork-by-takuji-kawano.jpg'> | |||
| <img class='small' src='cervantes-soulcalibur6-artwork-by-takuji-kawano.jpg'> | |||
| <img class='small' src='cervantes-soulcalibur6-artwork-by-takuji-kawano.jpg'> | |||
| <img class='small' src='cervantes-soulcalibur6-artwork-by-takuji-kawano.jpg'> | |||
| </div> | |||
| <article> | |||
| <h1>Example Gallery Page</h1> | |||
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis diam turpis, at sagittis tortor pulvinar sed. Quisque sollicitudin ex in ultrices mattis. Cras vehicula odio at feugiat fermentum. Nunc mi lectus, iaculis eget velit vel, gravida elementum arcu. Nam facilisis, erat at dictum tincidunt, nunc ex ultricies elit, nec ullamcorper nunc purus eget nunc. Nulla facilisi. Fusce volutpat libero eget mollis ornare. Curabitur auctor ornare viverra. Nam sollicitudin lacus magna, eu vestibulum nulla consequat at. Vestibulum tempus dolor sed feugiat lobortis. Nulla facilisi. Fusce malesuada, velit a posuere vulputate, nisl mauris imperdiet odio, a porta diam felis eu ante. Maecenas mollis nulla enim, vitae gravida justo laoreet a. Mauris blandit orci a odio vestibulum rutrum. Fusce lobortis libero ut efficitur pretium. Donec semper, lectus gravida ultricies vulputate, mauris arcu laoreet massa, at sollicitudin tortor metus ut libero.</p> | |||
| <p>Maecenas mattis convallis risus, sed mattis nibh sagittis et. Integer sed nulla quis ligula auctor fermentum non a felis. Mauris vitae eros quis nulla blandit dignissim. Cras bibendum augue non leo luctus bibendum. Nunc et porttitor nunc. Aenean at ipsum vel ligula volutpat mattis. Maecenas feugiat mauris vitae nibh pharetra venenatis. Nullam ornare dolor nec ex imperdiet pharetra condimentum id elit. Integer orci neque, dignissim non neque ut, aliquam commodo tellus. Suspendisse rhoncus neque tempus magna luctus, sodales rhoncus ipsum gravida. Maecenas et hendrerit augue.</p> | |||
| <p>Pellentesque dapibus leo eget odio imperdiet, ac pellentesque elit finibus. In eu fermentum risus. In pretium lobortis efficitur. Proin hendrerit nisl magna, ut tempor dui tristique id. Morbi convallis risus at erat vehicula interdum. Nunc pellentesque metus quis vulputate sodales. Morbi consectetur massa turpis, ac condimentum massa rutrum ut. Vestibulum finibus felis ut magna hendrerit, non blandit nulla iaculis. Fusce commodo aliquet volutpat. Curabitur id bibendum lectus. Maecenas et scelerisque turpis, at vestibulum sem. Donec non mauris felis. Maecenas in nunc rutrum, dapibus nulla sed, vestibulum neque. Donec a lacus venenatis, tempus nunc quis, pellentesque mauris. Cras pharetra bibendum eros at efficitur. Nunc laoreet cursus elit ac pellentesque.</p> | |||
| <p>Etiam eu nisl sapien. Maecenas vehicula vitae metus in viverra. Fusce nec sapien malesuada, cursus quam eget, semper justo. Donec bibendum accumsan ante, in porta urna porta a. Ut luctus odio lacus, pulvinar semper ex lacinia accumsan. Curabitur sit amet rutrum ligula. Nam ex augue, tempor ut tortor et, vehicula hendrerit felis. Curabitur sit amet massa diam. Vestibulum ante urna, varius sed nunc vitae, laoreet dignissim enim. Suspendisse nec suscipit sem, vitae egestas tortor. Mauris auctor maximus dolor, vitae elementum nisi ullamcorper nec.</p> | |||
| </article> | |||
| <!--#include virtual="/deus/includes/colophon.html" --> | |||
| </main> | |||
| <!--#include virtual="/deus/includes/foot-scripts.html" --> | |||
| </body> | |||
| </html> | |||
Двоични данни
posts/.DS_Store
Целия файл
+ 29
- 0
posts/index.shtml
Целия файл
| @@ -0,0 +1,29 @@ | |||
| <!DOCTYPE html> | |||
| <html lang='en-US'> | |||
| <head> | |||
| <title>DEUS gaming</title> | |||
| <!--#include virtual="/deus/includes/head-css-links.html" --> | |||
| </head> | |||
| <body> | |||
| <main> | |||
| <!--#include virtual="/deus/includes/main-nav.html" --> | |||
| <article> | |||
| <h1><a href='some-post/'>This is the title of a post</a></h1> | |||
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis diam turpis, at sagittis tortor pulvinar sed. Quisque sollicitudin ex in ultrices mattis. Cras vehicula odio at feugiat fermentum. Nunc mi lectus, iaculis eget velit vel, gravida elementum arcu. Nam facilisis, erat at dictum tincidunt, nunc ex ultricies elit, nec ullamcorper nunc purus eget nunc. Nulla facilisi. Fusce volutpat libero eget mollis ornare. Curabitur auctor ornare viverra. Nam sollicitudin lacus magna, eu vestibulum nulla consequat at. Vestibulum tempus dolor sed feugiat lobortis. Nulla facilisi. Fusce malesuada, velit a posuere vulputate, nisl mauris imperdiet odio, a porta diam felis eu ante. Maecenas mollis nulla enim, vitae gravida justo laoreet a. Mauris blandit orci a odio vestibulum rutrum. Fusce lobortis libero ut efficitur pretium. Donec semper, lectus gravida ultricies vulputate, mauris arcu laoreet massa, at sollicitudin tortor metus ut libero.</p> | |||
| <p class='more-link'><a href='some-post/'>Read more…</a></p> | |||
| </article> | |||
| <article> | |||
| <h1><a href='some-post/'>This is the title of another post</a></h1> | |||
| <p>Maecenas mattis convallis risus, sed mattis nibh sagittis et. Integer sed nulla quis ligula auctor fermentum non a felis. Mauris vitae eros quis nulla blandit dignissim. Cras bibendum augue non leo luctus bibendum. Nunc et porttitor nunc. Aenean at ipsum vel ligula volutpat mattis. Maecenas feugiat mauris vitae nibh pharetra venenatis. Nullam ornare dolor nec ex imperdiet pharetra condimentum id elit. Integer orci neque, dignissim non neque ut, aliquam commodo tellus. Suspendisse rhoncus neque tempus magna luctus, sodales rhoncus ipsum gravida. Maecenas et hendrerit augue.</p> | |||
| <p class='more-link'><a href='some-post/'>Read more…</a></p> | |||
| </article> | |||
| <article> | |||
| <h1><a href='some-post/'>Post a third the title this is of</a></h1> | |||
| <p>Pellentesque dapibus leo eget odio imperdiet, ac pellentesque elit finibus. In eu fermentum risus. In pretium lobortis efficitur. Proin hendrerit nisl magna, ut tempor dui tristique id. Morbi convallis risus at erat vehicula interdum. Nunc pellentesque metus quis vulputate sodales. Morbi consectetur massa turpis, ac condimentum massa rutrum ut. Vestibulum finibus felis ut magna hendrerit, non blandit nulla iaculis. Fusce commodo aliquet volutpat. Curabitur id bibendum lectus. Maecenas et scelerisque turpis, at vestibulum sem. Donec non mauris felis. Maecenas in nunc rutrum, dapibus nulla sed, vestibulum neque. Donec a lacus venenatis, tempus nunc quis, pellentesque mauris. Cras pharetra bibendum eros at efficitur. Nunc laoreet cursus elit ac pellentesque.</p> | |||
| <p class='more-link'><a href='some-post/'>Read more…</a></p> | |||
| </article> | |||
| <!--#include virtual="/deus/includes/colophon.html" --> | |||
| </main> | |||
| <!--#include virtual="/deus/includes/foot-scripts.html" --> | |||
| </body> | |||
| </html> | |||
+ 31
- 0
posts/some-post/index.shtml
Целия файл
| @@ -0,0 +1,31 @@ | |||
| <!DOCTYPE html> | |||
| <html lang='en-US'> | |||
| <head> | |||
| <title>DEUS gaming</title> | |||
| <!--#include virtual="/deus/includes/head-css-links.html" --> | |||
| </head> | |||
| <body> | |||
| <main> | |||
| <!--#include virtual="/deus/includes/main-nav.html" --> | |||
| <article> | |||
| <h1>This is the title of a post</h1> | |||
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis diam turpis, at sagittis tortor pulvinar sed. Quisque sollicitudin ex in ultrices mattis. Cras vehicula odio at feugiat fermentum. Nunc mi lectus, iaculis eget velit vel, gravida elementum arcu. Nam facilisis, erat at dictum tincidunt, nunc ex ultricies elit, nec ullamcorper nunc purus eget nunc. Nulla facilisi. Fusce volutpat libero eget mollis ornare. Curabitur auctor ornare viverra. Nam sollicitudin lacus magna, eu vestibulum nulla consequat at. Vestibulum tempus dolor sed feugiat lobortis. Nulla facilisi. Fusce malesuada, velit a posuere vulputate, nisl mauris imperdiet odio, a porta diam felis eu ante. Maecenas mollis nulla enim, vitae gravida justo laoreet a. Mauris blandit orci a odio vestibulum rutrum. Fusce lobortis libero ut efficitur pretium. Donec semper, lectus gravida ultricies vulputate, mauris arcu laoreet massa, at sollicitudin tortor metus ut libero.</p> | |||
| <p>Maecenas mattis convallis risus, sed mattis nibh sagittis et. Integer sed nulla quis ligula auctor fermentum non a felis. Mauris vitae eros quis nulla blandit dignissim. Cras bibendum augue non leo luctus bibendum. Nunc et porttitor nunc. Aenean at ipsum vel ligula volutpat mattis. Maecenas feugiat mauris vitae nibh pharetra venenatis. Nullam ornare dolor nec ex imperdiet pharetra condimentum id elit. Integer orci neque, dignissim non neque ut, aliquam commodo tellus. Suspendisse rhoncus neque tempus magna luctus, sodales rhoncus ipsum gravida. Maecenas et hendrerit augue.</p> | |||
| <p>Pellentesque dapibus leo eget odio imperdiet, ac pellentesque elit finibus. In eu fermentum risus. In pretium lobortis efficitur. Proin hendrerit nisl magna, ut tempor dui tristique id. Morbi convallis risus at erat vehicula interdum. Nunc pellentesque metus quis vulputate sodales. Morbi consectetur massa turpis, ac condimentum massa rutrum ut. Vestibulum finibus felis ut magna hendrerit, non blandit nulla iaculis. Fusce commodo aliquet volutpat. Curabitur id bibendum lectus. Maecenas et scelerisque turpis, at vestibulum sem. Donec non mauris felis. Maecenas in nunc rutrum, dapibus nulla sed, vestibulum neque. Donec a lacus venenatis, tempus nunc quis, pellentesque mauris. Cras pharetra bibendum eros at efficitur. Nunc laoreet cursus elit ac pellentesque.</p> | |||
| <p>Etiam eu nisl sapien. Maecenas vehicula vitae metus in viverra. Fusce nec sapien malesuada, cursus quam eget, semper justo. Donec bibendum accumsan ante, in porta urna porta a. Ut luctus odio lacus, pulvinar semper ex lacinia accumsan. Curabitur sit amet rutrum ligula. Nam ex augue, tempor ut tortor et, vehicula hendrerit felis. Curabitur sit amet massa diam. Vestibulum ante urna, varius sed nunc vitae, laoreet dignissim enim. Suspendisse nec suscipit sem, vitae egestas tortor. Mauris auctor maximus dolor, vitae elementum nisi ullamcorper nec.</p> | |||
| <p>Morbi laoreet aliquet enim. Quisque pulvinar accumsan fermentum. Nam convallis, arcu eu suscipit gravida, nisl felis sodales elit, ac dignissim nunc odio a mauris. Etiam elit libero, volutpat vitae massa eu, placerat ultricies purus. Duis vel finibus tellus. Etiam ultricies fringilla nibh, interdum ornare leo bibendum et. Quisque ultricies aliquet venenatis. Suspendisse neque nisi, ornare a condimentum vel, iaculis sed erat. Sed nec elit ut mi lobortis euismod. Nulla ut tempus tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc vitae tortor feugiat, accumsan dui non, finibus est. Maecenas et elit erat. Nam vulputate ante id massa ullamcorper sodales.</p> | |||
| <p>Aliquam dictum egestas sagittis. Donec neque leo, sollicitudin eu finibus a, condimentum ut quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus rutrum est ac felis pharetra, sit amet posuere lectus eleifend. Aenean at dignissim enim. Nunc erat est, aliquam in tempor ut, pulvinar eu dui. In convallis bibendum est, venenatis semper dui. Nulla facilisi. Donec in egestas sem. Sed sollicitudin dolor nec magna tristique euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Vivamus ornare justo in lacus mollis malesuada. Proin fringilla id libero eget pulvinar.</p> | |||
| <p>Pellentesque malesuada nibh eu purus condimentum, at molestie lectus placerat. Curabitur a aliquam erat. Nulla elementum justo elit, in dapibus mauris maximus eleifend. Praesent hendrerit, quam in porttitor gravida, felis est tristique nulla, a mattis nunc dolor vel lectus. Proin purus lectus, mattis vel vulputate iaculis, venenatis at purus. Ut fermentum finibus diam. Sed vel erat odio. Curabitur mattis iaculis neque at posuere. Donec placerat, neque sed fringilla bibendum, leo leo dignissim mi, vel finibus augue nibh a neque.</p> | |||
| <p>Maecenas tristique ultricies ipsum eu sodales. Donec placerat posuere felis. Pellentesque egestas nunc eget tellus aliquet, et semper risus faucibus. Curabitur eleifend enim quis nisi egestas, id cursus ipsum tincidunt. Nam mollis malesuada ligula eget ornare. Praesent vitae nulla eu justo tristique convallis at at odio. Duis viverra turpis porta, egestas erat lobortis, molestie sem.</p> | |||
| <p>Nam nec enim fermentum, aliquet sapien eget, bibendum ante. Nullam hendrerit non dui mattis molestie. Ut eu mi id dui aliquet mattis. Mauris sit amet tellus eu enim blandit suscipit. Nam tincidunt dictum tincidunt. Etiam vel eros quis leo laoreet iaculis. Morbi nec tincidunt enim, convallis auctor dolor. Nunc consequat nulla turpis, vel aliquam urna rhoncus vitae. Aliquam rhoncus, arcu vel ornare imperdiet, orci risus placerat est, nec semper risus nulla vitae tellus. Vestibulum sed elit gravida, bibendum dui in, lacinia massa. Sed ultricies molestie suscipit.</p> | |||
| <p>Maecenas est nisi, facilisis ac faucibus a, accumsan vel eros. Phasellus sit amet dui eget erat eleifend hendrerit quis quis elit. Phasellus nisl sem, vulputate vel mauris a, venenatis vehicula lectus. Maecenas elementum diam vel rutrum accumsan. Fusce ac pretium diam, ut ullamcorper nisl. Nullam dignissim sapien quam, eu sagittis purus tristique id. Sed dapibus tristique mauris nec gravida.</p> | |||
| <p>Quisque ut magna at quam laoreet interdum. Sed consequat nunc in orci tincidunt viverra. Praesent vitae imperdiet risus, at suscipit erat. Sed suscipit massa at mi facilisis, nec laoreet neque hendrerit. Nulla bibendum ligula nisi, varius dapibus velit interdum ut. In hac habitasse platea dictumst. Phasellus dignissim quam ligula, in tincidunt orci cursus id. Aliquam vehicula porta enim tristique facilisis. Praesent mollis a tellus at varius. Proin hendrerit magna consequat justo venenatis interdum. Etiam aliquet nisl ut auctor auctor. Mauris feugiat iaculis faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consectetur dictum condimentum.</p> | |||
| <p>Cras urna eros, ultricies non tempus a, bibendum in metus. Curabitur eu velit et leo lobortis euismod at vel leo. Ut ultricies purus non nisi molestie, consequat porta magna auctor. Nunc elementum luctus velit in mollis. Nulla eleifend semper sem id dictum. Donec at velit lacus. Sed tristique tortor eget nisl fringilla volutpat. Integer quis hendrerit risus. In at tincidunt mauris. Nulla in lorem a orci pulvinar egestas. Vestibulum pellentesque fermentum lorem ac venenatis. Morbi elementum vestibulum porta. Ut sagittis, est eu posuere mattis, urna felis luctus justo, eu ultrices orci ex nec nunc. Phasellus non purus massa.</p> | |||
| <p>Suspendisse efficitur, lacus ut imperdiet porttitor, dui mauris pulvinar ex, in tempor erat nisi at velit. Sed lacinia ligula eu hendrerit elementum. Cras ex mauris, tempor quis ante quis, placerat finibus leo. Praesent nec diam sapien. Integer sed nunc ornare, lacinia ante eget, convallis sem. Maecenas mollis, dui vel tincidunt vestibulum, nulla leo rutrum nibh, sed tempus enim neque porttitor urna. Vestibulum rhoncus, erat ac fringilla imperdiet, ipsum nisl bibendum erat, et ullamcorper tellus lorem ultricies dolor. Mauris posuere neque vel justo lobortis posuere. Maecenas sit amet massa non magna elementum elementum at lobortis magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer massa augue, scelerisque in pretium id, facilisis ac ipsum. In condimentum in nisl eget lobortis. Vestibulum posuere, enim nec tristique ornare, tortor est semper nisl, eu vulputate tortor nisl quis mauris.</p> | |||
| <p>Morbi eget arcu urna. Nam nec aliquam lectus, semper eleifend est. Pellentesque id lectus aliquam, lobortis mauris id, rhoncus est. Pellentesque vehicula enim tortor, in vehicula leo elementum eget. Suspendisse lacus leo, interdum id lectus sit amet, vestibulum lobortis leo. Sed vulputate, velit ac bibendum hendrerit, sem erat convallis dui, id blandit lorem diam ac enim. Nullam odio risus, elementum at dolor at, tempor efficitur dui. Vivamus tempus quam id vulputate condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec non felis id sapien iaculis volutpat vel nec elit.</p> | |||
| </article> | |||
| <!--#include virtual="/deus/includes/colophon.html" --> | |||
| </main> | |||
| <!--#include virtual="/deus/includes/foot-scripts.html" --> | |||
| </body> | |||
| </html> | |||
+ 7
- 0
template.html
Целия файл
| @@ -0,0 +1,7 @@ | |||
| <!DOCTYPE html> | |||
| <html> | |||
| <head> | |||
| </head> | |||
| <body> | |||
| </body> | |||
| </html> | |||
Loading…