├── .editorconfig ├── .gitignore ├── .htaccess ├── Gruntfile.js ├── README.md ├── author.html ├── bower.json ├── cache.manifest ├── catrina.jpg ├── dist ├── css │ └── style.min.css ├── images │ ├── logo.png │ ├── modal │ │ ├── blank.gif │ │ ├── fancybox_loading.gif │ │ ├── fancybox_loading@2x.gif │ │ ├── fancybox_overlay.png │ │ ├── fancybox_sprite.png │ │ └── fancybox_sprite@2x.png │ └── og-facebook.png └── js │ ├── libs.min.js │ └── scripts.min.js ├── favicon.png ├── fonts ├── OpenSansBold.eot ├── OpenSansBold.svg ├── OpenSansBold.ttf ├── OpenSansBold.woff ├── OpenSansBold.woff2 ├── OpenSansLight.eot ├── OpenSansLight.svg ├── OpenSansLight.ttf ├── OpenSansLight.woff ├── OpenSansLight.woff2 ├── OpenSansRegular.eot ├── OpenSansRegular.svg ├── OpenSansRegular.ttf ├── OpenSansRegular.woff ├── OpenSansRegular.woff2 ├── sverigescriptdecorated_demo-webfont.eot ├── sverigescriptdecorated_demo-webfont.svg ├── sverigescriptdecorated_demo-webfont.ttf ├── sverigescriptdecorated_demo-webfont.woff └── sverigescriptdecorated_demo-webfont.woff2 ├── grunt-config.json ├── humans.txt ├── index.html ├── locales ├── en-US │ └── translation.json └── pt-BR │ └── translation.json ├── logo-bg.png ├── package.json ├── request.html ├── robots.txt ├── send.php ├── src ├── images │ ├── heart.svg │ ├── icon-arrow.svg │ ├── logo.png │ ├── modal │ │ ├── blank.gif │ │ ├── fancybox_loading.gif │ │ ├── fancybox_loading@2x.gif │ │ ├── fancybox_overlay.png │ │ ├── fancybox_sprite.png │ │ └── fancybox_sprite@2x.png │ └── og-facebook.png ├── js │ ├── APP.Cache.js │ ├── APP.Contact.js │ ├── APP.EasterEggs.js │ ├── APP.Instagram.js │ ├── APP.Language.js │ ├── APP.Modal.js │ ├── APP.Request.js │ ├── APP.Scroll.js │ ├── APP.Slide.js │ ├── APP.Status.js │ ├── APP.Storage.js │ ├── APP.Tracking.js │ ├── APP.Transitions.js │ ├── APP.Twitter.js │ ├── APP.js │ └── libs │ │ └── twitterFetcher.js └── sass │ ├── _animations.scss │ ├── _base.scss │ ├── _form.scss │ ├── _general.scss │ ├── _reset.scss │ ├── _typography.scss │ ├── libs │ ├── _fancybox.scss │ └── _slick.scss │ └── main.scss ├── touch-icon-ipad.png ├── touch-icon-ipad@2x.png └── touch-icon@2x.png /.editorconfig: -------------------------------------------------------------------------------- 1 | # This file is for unifying the coding style for different editors and IDEs 2 | # See editorconfig.org 3 | 4 | root = true 5 | 6 | [*] 7 | indent_style = space 8 | indent_size = 2 9 | charset = utf-8 10 | trim_trailing_whitespace = true 11 | insert_final_newline = true 12 | 13 | [*.md] 14 | trim_trailing_whitespace = false 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/* 3 | .sass-cache/* 4 | .git/* 5 | bower_components/* 6 | .gitignore 7 | to-do.md 8 | npm-debug.log 9 | -------------------------------------------------------------------------------- /.htaccess: -------------------------------------------------------------------------------- 1 | # Apache Server Configs v2.0.0 | MIT License 2 | # https://github.com/h5bp/server-configs-apache 3 | 4 | # (!) Using `.htaccess` files slows down Apache, therefore, if you have access 5 | # to the main server config file (usually called `httpd.conf`), you should add 6 | # this logic there: http://httpd.apache.org/docs/current/howto/htaccess.html. 7 | 8 | # ############################################################################## 9 | # # APP CACHE # 10 | # ############################################################################## 11 | 12 | AddType text/cache-manifest .appcache 13 | AddType text/cache-manifest .manifest 14 | 15 | # ############################################################################## 16 | # # CROSS-ORIGIN RESOURCE SHARING (CORS) # 17 | # ############################################################################## 18 | 19 | # ------------------------------------------------------------------------------ 20 | # | Cross-domain AJAX requests | 21 | # ------------------------------------------------------------------------------ 22 | 23 | # Enable cross-origin AJAX requests. 24 | # http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity 25 | # http://enable-cors.org/ 26 | 27 | # 28 | # Header set Access-Control-Allow-Origin "*" 29 | # 30 | 31 | # ------------------------------------------------------------------------------ 32 | # | CORS-enabled images | 33 | # ------------------------------------------------------------------------------ 34 | 35 | # Send the CORS header for images when browsers request it. 36 | # https://developer.mozilla.org/en/CORS_Enabled_Image 37 | # http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html 38 | # http://hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/ 39 | 40 | 41 | 42 | 43 | SetEnvIf Origin ":" IS_CORS 44 | Header set Access-Control-Allow-Origin "*" env=IS_CORS 45 | 46 | 47 | 48 | 49 | # ------------------------------------------------------------------------------ 50 | # | Web fonts access | 51 | # ------------------------------------------------------------------------------ 52 | 53 | # Allow access from all domains for web fonts 54 | 55 | 56 | 57 | Header set Access-Control-Allow-Origin "*" 58 | 59 | 60 | 61 | 62 | # ############################################################################## 63 | # # ERRORS # 64 | # ############################################################################## 65 | 66 | # ------------------------------------------------------------------------------ 67 | # | 404 error prevention for non-existing redirected folders | 68 | # ------------------------------------------------------------------------------ 69 | 70 | # Prevent Apache from returning a 404 error for a rewrite if a directory 71 | # with the same name does not exist. 72 | # http://httpd.apache.org/docs/current/content-negotiation.html#multiviews 73 | # http://www.webmasterworld.com/apache/3808792.htm 74 | 75 | Options -MultiViews 76 | 77 | # ------------------------------------------------------------------------------ 78 | # | Custom error messages / pages | 79 | # ------------------------------------------------------------------------------ 80 | 81 | # You can customize what Apache returns to the client in case of an error (see 82 | # http://httpd.apache.org/docs/current/mod/core.html#errordocument), e.g.: 83 | 84 | ErrorDocument 404 /404.html 85 | 86 | 87 | # ############################################################################## 88 | # # INTERNET EXPLORER # 89 | # ############################################################################## 90 | 91 | # ------------------------------------------------------------------------------ 92 | # | Better website experience | 93 | # ------------------------------------------------------------------------------ 94 | 95 | # Force IE to render pages in the highest available mode in the various 96 | # cases when it may not: http://hsivonen.iki.fi/doctype/ie-mode.pdf. 97 | 98 | 99 | Header set X-UA-Compatible "IE=edge" 100 | # `mod_headers` can't match based on the content-type, however, we only 101 | # want to send this header for HTML pages and not for the other resources 102 | 103 | Header unset X-UA-Compatible 104 | 105 | 106 | 107 | # ------------------------------------------------------------------------------ 108 | # | Cookie setting from iframes | 109 | # ------------------------------------------------------------------------------ 110 | 111 | # Allow cookies to be set from iframes in IE. 112 | # http://msdn.microsoft.com/en-us/library/ms537343.aspx 113 | # http://www.w3.org/TR/2000/CR-P3P-20001215/ 114 | 115 | # 116 | # Header set P3P "policyref=\"/w3c/p3p.xml\", CP=\"IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\"" 117 | # 118 | 119 | 120 | # ############################################################################## 121 | # # MIME TYPES AND ENCODING # 122 | # ############################################################################## 123 | 124 | # ------------------------------------------------------------------------------ 125 | # | Proper MIME types for all files | 126 | # ------------------------------------------------------------------------------ 127 | 128 | 129 | 130 | # Audio 131 | AddType audio/mp4 m4a f4a f4b 132 | AddType audio/ogg oga ogg 133 | 134 | # JavaScript 135 | # Normalize to standard type (it's sniffed in IE anyways): 136 | # http://tools.ietf.org/html/rfc4329#section-7.2 137 | AddType application/javascript js 138 | AddType application/json json 139 | 140 | # Video 141 | AddType video/mp4 f4v f4p m4v mp4 142 | AddType video/ogg ogv 143 | AddType video/webm webm 144 | AddType video/x-flv flv 145 | 146 | # Web fonts 147 | AddType application/font-woff woff 148 | AddType application/vnd.ms-fontobject eot 149 | 150 | # Browsers usually ignore the font MIME types and sniff the content, 151 | # however, Chrome shows a warning if other MIME types are used for the 152 | # following fonts. 153 | AddType application/x-font-ttf ttc ttf 154 | AddType font/opentype otf 155 | 156 | # Make SVGZ fonts work on iPad: 157 | # https://twitter.com/FontSquirrel/status/14855840545 158 | AddType image/svg+xml svgz 159 | AddEncoding gzip svgz 160 | 161 | # Other 162 | AddType application/octet-stream safariextz 163 | AddType application/x-chrome-extension crx 164 | AddType application/x-opera-extension oex 165 | AddType application/x-web-app-manifest+json webapp 166 | AddType application/x-xpinstall xpi 167 | AddType application/xml atom rdf rss xml 168 | AddType image/webp webp 169 | AddType image/x-icon cur 170 | AddType text/cache-manifest appcache manifest 171 | AddType text/vtt vtt 172 | AddType text/x-component htc 173 | AddType text/x-vcard vcf 174 | 175 | 176 | 177 | # ------------------------------------------------------------------------------ 178 | # | UTF-8 encoding | 179 | # ------------------------------------------------------------------------------ 180 | 181 | # Use UTF-8 encoding for anything served as `text/html` or `text/plain`. 182 | AddDefaultCharset utf-8 183 | 184 | # Force UTF-8 for certain file formats. 185 | 186 | AddCharset utf-8 .atom .css .js .json .rss .vtt .webapp .xml 187 | 188 | 189 | 190 | # ############################################################################## 191 | # # URL REWRITES # 192 | # ############################################################################## 193 | 194 | # ------------------------------------------------------------------------------ 195 | # | Rewrite engine | 196 | # ------------------------------------------------------------------------------ 197 | 198 | # Turning on the rewrite engine and enabling the `FollowSymLinks` option is 199 | # necessary for the following directives to work. 200 | 201 | # If your web host doesn't allow the `FollowSymlinks` option, you may need to 202 | # comment it out and use `Options +SymLinksIfOwnerMatch` but, be aware of the 203 | # performance impact: http://httpd.apache.org/docs/current/misc/perf-tuning.html#symlinks 204 | 205 | # Also, some cloud hosting services require `RewriteBase` to be set: 206 | # http://www.rackspace.com/knowledge_center/frequently-asked-question/why-is-mod-rewrite-not-working-on-my-site 207 | 208 | 209 | Options +FollowSymlinks 210 | # Options +SymLinksIfOwnerMatch 211 | RewriteEngine On 212 | # RewriteBase / 213 | 214 | # URL'S AMIGÁVEIS 215 | 216 | RewriteRule ^home/?$ index.html [NC,L] 217 | RewriteRule ^author/?$ author.html [NC,L] 218 | 219 | 220 | 221 | # ------------------------------------------------------------------------------ 222 | # | Suppressing / Forcing the "www." at the beginning of URLs | 223 | # ------------------------------------------------------------------------------ 224 | 225 | # The same content should never be available under two different URLs especially 226 | # not with and without "www." at the beginning. This can cause SEO problems 227 | # (duplicate content), therefore, you should choose one of the alternatives and 228 | # redirect the other one. 229 | 230 | # By default option 1 (no "www.") is activated: 231 | # http://no-www.org/faq.php?q=class_b 232 | 233 | # If you'd prefer to use option 2, just comment out all the lines from option 1 234 | # and uncomment the ones from option 2. 235 | 236 | # IMPORTANT: NEVER USE BOTH RULES AT THE SAME TIME! 237 | 238 | # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 239 | 240 | # Option 1: rewrite www.example.com → example.com 241 | 242 | 243 | RewriteCond %{HTTPS} !=on 244 | RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC] 245 | RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L] 246 | 247 | 248 | # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 249 | 250 | # Option 2: rewrite example.com → www.example.com 251 | 252 | # Be aware that the following might not be a good idea if you use "real" 253 | # subdomains for certain parts of your website. 254 | 255 | # 256 | # RewriteCond %{HTTPS} !=on 257 | # RewriteCond %{HTTP_HOST} !^www\..+$ [NC] 258 | # RewriteCond %{HTTP_HOST} !=localhost [NC] 259 | # RewriteCond %{HTTP_HOST} !=127.0.0.1 260 | # RewriteRule ^ http://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L] 261 | # 262 | 263 | 264 | # ############################################################################## 265 | # # SECURITY # 266 | # ############################################################################## 267 | 268 | # ------------------------------------------------------------------------------ 269 | # | Clickjacking | 270 | # ------------------------------------------------------------------------------ 271 | 272 | # Protect web site against clickjacking. 273 | 274 | # The example below sends the `X-Frame-Options` response header with the value 275 | # `DENY`, informing browsers not to display the web page content in any frame. 276 | 277 | # This might not be the best setting for everyone. You should read about the 278 | # other two possible values for `X-Frame-Options`: `SAMEORIGIN` and `ALLOW-FROM` 279 | # http://tools.ietf.org/html/rfc7034#section-2.1. 280 | 281 | # Keep in mind that while you could send the `X-Frame-Options` header for all 282 | # of your site’s pages, this has the potential downside that it forbids even 283 | # non-malicious framing of your content (e.g.: when users visit your site using 284 | # a Google Image Search results page). 285 | 286 | # Nonetheless, you should ensure that you send the `X-Frame-Options` header for 287 | # all pages that allow a user to make a state changing operation (e.g: pages 288 | # that contain one-click purchase links, checkout or bank-transfer confirmation 289 | # pages, pages that make permanent configuration changes, etc.). 290 | 291 | # Sending the `X-Frame-Options` header can also protect your web site against 292 | # more than just clickjacking attacks: https://cure53.de/xfo-clickjacking.pdf. 293 | 294 | # http://tools.ietf.org/html/rfc7034 295 | # http://blogs.msdn.com/b/ieinternals/archive/2010/03/30/combating-clickjacking-with-x-frame-options.aspx 296 | # https://www.owasp.org/index.php/Clickjacking 297 | 298 | # 299 | # Header set X-Frame-Options "SAMEORIGIN" 300 | # 301 | # Header unset X-Frame-Options 302 | # 303 | # 304 | 305 | # ------------------------------------------------------------------------------ 306 | # | Content Security Policy (CSP) | 307 | # ------------------------------------------------------------------------------ 308 | 309 | # You can mitigate the risk of cross-site scripting and other content-injection 310 | # attacks by setting a Content Security Policy which whitelists trusted sources 311 | # of content for your site. 312 | 313 | # The example header below allows ONLY scripts that are loaded from the current 314 | # site's origin (no inline scripts, no CDN, etc). This almost certainly won't 315 | # work as-is for your site! 316 | 317 | # For more details on how to craft a reasonable policy for your site, read: 318 | # http://html5rocks.com/en/tutorials/security/content-security-policy (or the 319 | # specification: http://w3.org/TR/CSP). Also, to make things easier, you can 320 | # use an online CSP header generator such as: http://cspisawesome.com/. 321 | 322 | # 323 | # Header set Content-Security-Policy "script-src 'self'; object-src 'self'" 324 | # 325 | # Header unset Content-Security-Policy 326 | # 327 | # 328 | 329 | # ------------------------------------------------------------------------------ 330 | # | File access | 331 | # ------------------------------------------------------------------------------ 332 | 333 | # Block access to directories without a default document. 334 | # Usually you should leave this uncommented because you shouldn't allow anyone 335 | # to surf through every directory on your server (which may includes rather 336 | # private places like the CMS's directories). 337 | 338 | 339 | Options -Indexes 340 | 341 | 342 | # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 343 | 344 | # Block access to hidden files and directories. 345 | # This includes directories used by version control systems such as Git and SVN. 346 | 347 | 348 | RewriteCond %{SCRIPT_FILENAME} -d [OR] 349 | RewriteCond %{SCRIPT_FILENAME} -f 350 | RewriteRule "(^|/)\." - [F] 351 | 352 | 353 | # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 354 | 355 | # Block access to backup and source files. 356 | # These files may be left by some text editors and can pose a great security 357 | # danger when anyone has access to them. 358 | 359 | 360 | 361 | # Apache < 2.3 362 | 363 | Order allow,deny 364 | Deny from all 365 | Satisfy All 366 | 367 | 368 | # Apache ≥ 2.3 369 | 370 | Require all denied 371 | 372 | 373 | 374 | 375 | # ------------------------------------------------------------------------------ 376 | # | Reducing MIME-type security risks | 377 | # ------------------------------------------------------------------------------ 378 | 379 | # Prevent some browsers from MIME-sniffing the response. 380 | 381 | # This reduces exposure to drive-by download attacks and should be enable 382 | # especially if the web server is serving user uploaded content, content 383 | # that could potentially be treated by the browser as executable. 384 | 385 | # http://blogs.msdn.com/b/ie/archive/2008/07/02/ie8-security-part-v-comprehensive-protection.aspx 386 | # http://msdn.microsoft.com/en-us/library/ie/gg622941.aspx 387 | # http://mimesniff.spec.whatwg.org/ 388 | 389 | # 390 | # Header set X-Content-Type-Options "nosniff" 391 | # 392 | 393 | # ------------------------------------------------------------------------------ 394 | # | Reflected Cross-Site Scripting (XSS) attacks | 395 | # ------------------------------------------------------------------------------ 396 | 397 | # (1) Try to re-enable the Cross-Site Scripting (XSS) filter built into the 398 | # most recent web browsers. 399 | # 400 | # The filter is usually enabled by default, but in some cases it may be 401 | # disabled by the user. However, in IE for example, it can be re-enabled 402 | # just by sending the `X-XSS-Protection` header with the value of `1`. 403 | # 404 | # (2) Prevent web browsers from rendering the web page if a potential reflected 405 | # (a.k.a non-persistent) XSS attack is detected by the filter. 406 | # 407 | # By default, if the filter is enabled and browsers detect a reflected 408 | # XSS attack, they will attempt to block the attack by making the smallest 409 | # possible modifications to the returned web page. 410 | # 411 | # Unfortunately, in some browsers (e.g.: IE), this default behavior may 412 | # allow the XSS filter to be exploited, thereby, it's better to tell 413 | # browsers to prevent the rendering of the page altogether, instead of 414 | # attempting to modify it. 415 | # 416 | # http://hackademix.net/2009/11/21/ies-xss-filter-creates-xss-vulnerabilities 417 | # 418 | # IMPORTANT: Do not rely on the XSS filter to prevent XSS attacks! Ensure that 419 | # you are taking all possible measures to prevent XSS attacks, the most obvious 420 | # being: validating and sanitizing your site's inputs. 421 | 422 | # http://blogs.msdn.com/b/ie/archive/2008/07/02/ie8-security-part-iv-the-xss-filter.aspx 423 | # http://blogs.msdn.com/b/ieinternals/archive/2011/01/31/controlling-the-internet-explorer-xss-filter-with-the-x-xss-protection-http-header.aspx 424 | # https://www.owasp.org/index.php/Cross-site_Scripting_%28XSS%29 425 | 426 | # 427 | # # (1) (2) 428 | # Header set X-XSS-Protection "1; mode=block" 429 | # 430 | # Header unset X-XSS-Protection 431 | # 432 | # 433 | 434 | # ------------------------------------------------------------------------------ 435 | # | Secure Sockets Layer (SSL) | 436 | # ------------------------------------------------------------------------------ 437 | 438 | # Rewrite secure requests properly to prevent SSL certificate warnings, e.g.: 439 | # prevent `https://www.example.com` when your certificate only allows 440 | # `https://secure.example.com`. 441 | 442 | # 443 | # RewriteCond %{SERVER_PORT} !^443 444 | # RewriteRule ^ https://example-domain-please-change-me.com%{REQUEST_URI} [R=301,L] 445 | # 446 | 447 | # ------------------------------------------------------------------------------ 448 | # | HTTP Strict Transport Security (HSTS) | 449 | # ------------------------------------------------------------------------------ 450 | 451 | # Force client-side SSL redirection. 452 | 453 | # If a user types "example.com" in his browser, the above rule will redirect 454 | # him to the secure version of the site. That still leaves a window of oppor- 455 | # tunity (the initial HTTP connection) for an attacker to downgrade or redirect 456 | # the request. The following header ensures that browser will ONLY connect to 457 | # your server via HTTPS, regardless of what the users type in the address bar. 458 | # http://tools.ietf.org/html/draft-ietf-websec-strict-transport-sec-14#section-6.1 459 | # http://www.html5rocks.com/en/tutorials/security/transport-layer-security/ 460 | 461 | # (!) Remove the `includeSubDomains` optional directive if the subdomains are 462 | # not using HTTPS. 463 | 464 | # 465 | # Header set Strict-Transport-Security "max-age=16070400; includeSubDomains" 466 | # 467 | 468 | # ------------------------------------------------------------------------------ 469 | # | Server software information | 470 | # ------------------------------------------------------------------------------ 471 | 472 | # Avoid displaying the exact Apache version number, the description of the 473 | # generic OS-type and the information about Apache's compiled-in modules. 474 | 475 | # ADD THIS DIRECTIVE IN THE `httpd.conf` AS IT WILL NOT WORK IN THE `.htaccess`! 476 | 477 | # ServerTokens Prod 478 | 479 | 480 | # ############################################################################## 481 | # # WEB PERFORMANCE # 482 | # ############################################################################## 483 | 484 | # ------------------------------------------------------------------------------ 485 | # | Compression | 486 | # ------------------------------------------------------------------------------ 487 | 488 | 489 | 490 | # Force compression for mangled headers. 491 | # http://developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping 492 | 493 | 494 | SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding 495 | RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding 496 | 497 | 498 | 499 | # Compress all output labeled with one of the following MIME-types 500 | # (for Apache versions below 2.3.7, you don't need to enable `mod_filter` 501 | # and can remove the `` and `` lines 502 | # as `AddOutputFilterByType` is still in the core directives). 503 | 504 | AddOutputFilterByType DEFLATE application/atom+xml \ 505 | application/javascript \ 506 | application/json \ 507 | application/rss+xml \ 508 | application/vnd.ms-fontobject \ 509 | application/x-font-ttf \ 510 | application/x-web-app-manifest+json \ 511 | application/xhtml+xml \ 512 | application/xml \ 513 | font/opentype \ 514 | image/svg+xml \ 515 | image/x-icon \ 516 | text/css \ 517 | text/html \ 518 | text/plain \ 519 | text/x-component \ 520 | text/xml 521 | 522 | 523 | 524 | 525 | # ------------------------------------------------------------------------------ 526 | # | Content transformations | 527 | # ------------------------------------------------------------------------------ 528 | 529 | # Prevent some of the mobile network providers from modifying the content of 530 | # your site: http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.9.5. 531 | 532 | # 533 | # Header set Cache-Control "no-transform" 534 | # 535 | 536 | # ------------------------------------------------------------------------------ 537 | # | ETag removal | 538 | # ------------------------------------------------------------------------------ 539 | 540 | # Since we're sending far-future expires headers (see below), ETags can 541 | # be removed: http://developer.yahoo.com/performance/rules.html#etags. 542 | 543 | # `FileETag None` is not enough for every server. 544 | 545 | Header unset ETag 546 | 547 | 548 | FileETag None 549 | 550 | # ------------------------------------------------------------------------------ 551 | # | Expires headers (for better cache control) | 552 | # ------------------------------------------------------------------------------ 553 | 554 | # The following expires headers are set pretty far in the future. If you don't 555 | # control versioning with filename-based cache busting, consider lowering the 556 | # cache time for resources like CSS and JS to something like 1 week. 557 | 558 | 559 | 560 | ExpiresActive on 561 | ExpiresDefault "access plus 1 month" 562 | 563 | # CSS 564 | ExpiresByType text/css "access plus 1 year" 565 | 566 | # Data interchange 567 | ExpiresByType application/json "access plus 0 seconds" 568 | ExpiresByType application/xml "access plus 0 seconds" 569 | ExpiresByType text/xml "access plus 0 seconds" 570 | 571 | # Favicon (cannot be renamed!) and cursor images 572 | ExpiresByType image/x-icon "access plus 1 week" 573 | 574 | # HTML components (HTCs) 575 | ExpiresByType text/x-component "access plus 1 month" 576 | 577 | # HTML 578 | ExpiresByType text/html "access plus 0 seconds" 579 | 580 | # JavaScript 581 | ExpiresByType application/javascript "access plus 1 year" 582 | 583 | # Manifest files 584 | ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds" 585 | ExpiresByType text/cache-manifest "access plus 0 seconds" 586 | 587 | # Media 588 | ExpiresByType audio/ogg "access plus 1 month" 589 | ExpiresByType image/gif "access plus 1 month" 590 | ExpiresByType image/jpeg "access plus 1 month" 591 | ExpiresByType image/png "access plus 1 month" 592 | ExpiresByType video/mp4 "access plus 1 month" 593 | ExpiresByType video/ogg "access plus 1 month" 594 | ExpiresByType video/webm "access plus 1 month" 595 | 596 | # Web feeds 597 | ExpiresByType application/atom+xml "access plus 1 hour" 598 | ExpiresByType application/rss+xml "access plus 1 hour" 599 | 600 | # Web fonts 601 | ExpiresByType application/font-woff "access plus 1 month" 602 | ExpiresByType application/vnd.ms-fontobject "access plus 1 month" 603 | ExpiresByType application/x-font-ttf "access plus 1 month" 604 | ExpiresByType font/opentype "access plus 1 month" 605 | ExpiresByType image/svg+xml "access plus 1 month" 606 | 607 | 608 | 609 | # ------------------------------------------------------------------------------ 610 | # | Filename-based cache busting | 611 | # ------------------------------------------------------------------------------ 612 | 613 | # If you're not using a build process to manage your filename version revving, 614 | # you might want to consider enabling the following directives to route all 615 | # requests such as `/css/style.12345.css` to `/css/style.css`. 616 | 617 | # To understand why this is important and a better idea than `*.css?v231`, read: 618 | # http://stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring 619 | 620 | # 621 | # RewriteCond %{REQUEST_FILENAME} !-f 622 | # RewriteRule ^(.+)\.(\d+)\.(js|css|png|jpg|gif)$ $1.$3 [L] 623 | # 624 | 625 | # ------------------------------------------------------------------------------ 626 | # | File concatenation | 627 | # ------------------------------------------------------------------------------ 628 | 629 | # Allow concatenation from within specific CSS and JS files, e.g.: 630 | # Inside of `script.combined.js` you could have 631 | # 632 | # 633 | # and they would be included into this single file. 634 | 635 | # 636 | # 637 | # Options +Includes 638 | # AddOutputFilterByType INCLUDES application/javascript application/json 639 | # SetOutputFilter INCLUDES 640 | # 641 | # 642 | # Options +Includes 643 | # AddOutputFilterByType INCLUDES text/css 644 | # SetOutputFilter INCLUDES 645 | # 646 | # 647 | 648 | # ------------------------------------------------------------------------------ 649 | # | Persistent connections | 650 | # ------------------------------------------------------------------------------ 651 | 652 | # Allow multiple requests to be sent over the same TCP connection: 653 | # http://httpd.apache.org/docs/current/en/mod/core.html#keepalive. 654 | 655 | # Enable if you serve a lot of static content but, be aware of the 656 | # possible disadvantages! 657 | 658 | # 659 | # Header set Connection Keep-Alive 660 | # 661 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | 3 | "use strict"; 4 | 5 | // Load plugins in package.json 6 | require('load-grunt-tasks')(grunt); 7 | 8 | // Load time plugin 9 | require('time-grunt')(grunt); 10 | 11 | // Parse JSON and init 12 | var gruntConfig = grunt.file.readJSON('./grunt-config.json'); 13 | grunt.initConfig(gruntConfig); 14 | 15 | // Register tasks 16 | grunt.registerTask('default', ['browserSync', 'watch']); 17 | grunt.registerTask('img', ['imagemin']); 18 | } 19 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Catrina](catrina.jpg "Catrina") 2 | 3 | [![Code Climate](https://codeclimate.com/github/thulioph/catrina/badges/gpa.svg)](https://codeclimate.com/github/thulioph/catrina) 4 | 5 | ## Olá, conheça o Catrina! 6 | 7 | O intúito deste projeto é ser um ponto de partida para você criar uma *landing page*, utilizando de recursos existentes de uma forma fácil e simples, você consegue fazer muito escrevendo pouco. Recentemente fiz alguns trabalhos que tinham necessidades parecidas, o cara queria mostrar as fotos do Instagram da empresa, ou fotos de determinadas hashtags, o outro queria o feeds do Twiiter, eles queriam que o usuário acessassem seu conteúdo mesmo sem internet e que enviasse um contato caso necessário, enfim.. Foram várias demandas e todas nada muito complicadas para fazer, porém estava levando um pouco mais de tempo do que queria pra fazer isso, então resolvi criar algo que me ajudasse nisso. :smile: 8 | 9 | Existem generators, yeoman e o escambal então porque usar o catrina? Não estou lhe obrigando a usa-lo, apenas estou compartilhando o que faço, documentando e aprendendo mais :stuck_out_tongue: 10 | 11 | Não se importe com a [página de apresentação](http://thulioph.github.io/catrina) que foi gerada, pois ela foi feita apenas como forma de demonstrar algumas das coisas que existem no projeto e será adaptada no futuro. 12 | 13 | ## Como usar? 14 | 15 | É necessário que você tenha instalado globalmente na sua máquina [Sass](http://sass-lang.com), [Bower](http://bower.io/), [Grunt](http://gruntjs.com/) e [npm](https://www.npmjs.com/); Depois da instalação feita, clone o projeto e rode o comando abaixo no terminal para prosseguir com as instalações das dependências e ferramentas necessárias. 16 | 17 | ``` 18 | npm start 19 | ``` 20 | 21 | O servidor irá rodar em: `http://localhost:8080`. 22 | 23 | Após instalar todas as dependências e ferramentas abra uma nova instância do terminal e rode: 24 | 25 | ``` 26 | grunt 27 | ``` 28 | 29 | Basicamente você vai trabalhar com dois "ambientes" *src* e *dist*: 30 | 31 | #### src 32 | Nesta pasta contém os arquivos originais, imagens originais, arquivos comentados, libs, etc.. 33 | 34 | #### dist 35 | Nesta pasta contém os arquivos minificados, otimizados e concatenados, e todo o processo é feito utilizando o Grunt. 36 | 37 | #### JS 38 | 39 | Vale a pena observar o arquivo [`grunt-config.json`](https://github.com/thulioph/catrina/blob/master/grunt-config.json) onde contém toda a estrutura dos plugins para o grunt e a regra para o src/dist. No final, você terá apenas 2 (dois) arquivos javascripts, um contendo suas dependências `libs.min.js` e outro contendo o código feito por você `scripts.min.js`. 40 | 41 | Utilizo handlebars como template para inserir as fotos do instagram, acredito que desta maneira consigo trabalhar melhor do que criar o elemento, fazer o append e todo aquele bla bla bla.. 42 | 43 | A forma como é manipulado o javascript não possui documentação 100%, mas se você conhece JSON, deu uma olhada no código e digitou no console `APP` já vai pegar como funciona tudo. 44 | 45 | Os dados do formulário são guardados em **Local Storage** caso não tenha acesso a internet e, será enviado quando a conexão for presente. 46 | 47 | 48 | #### CSS 49 | 50 | Para os estilos, os arquivos são organizados por: 51 | 52 | - `libs`: os estilos responsáveis pelas bibliotecas do projeto. 53 | 54 | - `base` : meus mixins, variáveis de cor, tamanho, largura, etc.. A base do meu css. 55 | 56 | - `form` : contém os estilos para formulário, prefiro separar porque formulários sempre são chatinhos para trabalhar. 57 | 58 | - `general` : todo o estilo que é em comum entre as páginas do projeto, neste caso todo o estilo. *as peculiaridades de determinada página caso tenha, eu prefiro separar do general criando uma nova folha de estilo. 59 | 60 | - `reset` : resetando os estilos. 61 | 62 | - `typography` : todos os estilos relacionados a tipografia, tamanho, estilo, peso, font-face, etc.. 63 | 64 | - `main` : chamada dos arquivos. 65 | 66 | #### Offline 67 | 68 | O projeto utiliza o **APP Cache**, lembre-se de alterar o arquivo [cache.manifest](https://github.com/thulioph/catrina/blob/master/cache.manifest) sempre que for publicar o seu projeto, caso contrário o cache não irá funcionar. 69 | 70 | ## Links de apoio? 71 | 72 | Todas as dependências, técnicas e estilos usados no projeto, você encontra na internet de forma fácil, os links abaixo são das documentações que podem te auxiliar caso queira fazer algo a mais ou contribuir com esse projeto. 73 | 74 | - [SASS](http://sass-lang.com/) 75 | - [Grunt](http://gruntjs.com/) 76 | - [Bower](http://bower.io/) 77 | - [i18next](http://i18next.com/) 78 | - [Google Trackin Events](https://developers.google.com/analytics/devguides/collection/gajs/) 79 | - [Google Analytics](http://www.google.com/analytics/) 80 | - [Simple Singleton Pattern](https://github.com/simplesingleton) 81 | - [Instagram API](http://instagram.com/developer/) 82 | - [Twitter Post Fetcher](https://github.com/jasonmayes/Twitter-Post-Fetcher) 83 | - [Fancybox](http://fancyapps.com/fancybox/) 84 | - [Handlebars](http://handlebarsjs.com/) 85 | - [EditorConfig](http://editorconfig.org/) 86 | - [Local Storage](http://diveintohtml5.com.br/storage.html) 87 | - [APPCache](http://www.html5rocks.com/pt/tutorials/appcache/beginner/) 88 | - [Eventos online e offline](https://developer.mozilla.org/pt-BR/docs/Online_and_offline_events) 89 | - [Cheet.js](http://namuol.github.io/cheet.js/) 90 | 91 | 92 | ## Atualizações 93 | 94 | Para manter as dependências e ferramentas do seu projeto atualizadas, você pode rodar os comandos: 95 | 96 | ``` 97 | npm update 98 | ``` 99 | 100 | ``` 101 | bower update 102 | ``` 103 | 104 | 105 | > O projeto se encontra em evolução, então antes de reportar algum problema por favor verifique as [issues](https://github.com/thulioph/catrina/issues) e veja se alguém já está fazendo o que você pensou, se está tendo ou teve o mesmo problema que o seu, ou se está colaborando em alguma coisa que você queria. :cop: 106 | 107 | ## License 108 | 109 | [MIT License](http://thulioph.mit-license.org/) © thulioph 110 | -------------------------------------------------------------------------------- /author.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Catrina | Easy landing pages 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 74 | 75 | 76 | 77 |
78 |

Catrina

79 | 80 | 99 |
100 | 101 |
102 | 103 |
104 |
105 |
106 | 107 |

Home

108 |

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

109 | 110 |

Header Level 2

111 | 112 |
    113 |
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    2. 114 |
  2. Aliquam tincidunt mauris eu risus.
    3. 115 |
116 | 117 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

118 | 119 |

Header Level 3

120 | 121 |
    122 |
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • 123 |
  • Aliquam tincidunt mauris eu risus.
    • 124 |
125 | 126 | 
127 |           
128 |             #header h1 a {
129 |               display: block;
130 |               width: 300px;
131 |               height: 80px;
132 |             }
133 |           
134 |
135 | 136 |

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

137 |
138 |
139 |
140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 165 | 166 | 167 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "catrina", 3 | "version": "1.0.0", 4 | "authors": [ 5 | "Thulio Philipe | thulioph.com" 6 | ], 7 | "main": "dist/js/libs.min.js", 8 | "license": "MIT", 9 | "private": true, 10 | "dependencies": { 11 | "jquery": "~2.1.0", 12 | "fastclick": "~1.0.3", 13 | "slick-carousel": "~1.3.15", 14 | "hammerjs": "~2.0.4", 15 | "handlebars": "~2.0.0", 16 | "fancybox": "~2.1.5", 17 | "smoothstate": "~0.5.1" 18 | }, 19 | "devDependencies": { 20 | "i18next": "~1.7.3", 21 | "cheet.js": "~0.3.3" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /cache.manifest: -------------------------------------------------------------------------------- 1 | CACHE MANIFEST 2 | #Versão 1.0.0 3 | 4 | 5 | CACHE: 6 | dist/css/style.min.css 7 | 8 | dist/js/libs.min.js 9 | dist/js/scripts.min.js 10 | 11 | dist/images/modal/blank.gif 12 | dist/images/modal/fancybox_loading.gif 13 | dist/images/modal/fancybox_loading@2x.gif 14 | dist/images/modal/fancybox_overlay.png 15 | dist/images/modal/fancybox_sprite.png 16 | dist/images/modal/fancybox_sprite@2x.png 17 | 18 | locales/en-US/translation.json 19 | locales/pt-BR/translation.json 20 | 21 | fonts/OpenSansBold.svg 22 | fonts/OpenSansLight.svg 23 | fonts/OpenSansRegular.svg 24 | fonts/sverigescriptdecorated_demo-webfont.svg 25 | fonts/OpenSansBold.ttf 26 | fonts/OpenSansLight.ttf 27 | fonts/OpenSansRegular.ttf 28 | fonts/sverigescriptdecorated_demo-webfont.ttf 29 | fonts/OpenSansBold.eot 30 | fonts/OpenSansBold.woff 31 | fonts/OpenSansBold.woff2 32 | fonts/OpenSansLight.eot 33 | fonts/OpenSansLight.woff 34 | fonts/OpenSansLight.woff2 35 | fonts/OpenSansRegular.eot 36 | fonts/OpenSansRegular.woff 37 | fonts/OpenSansRegular.woff2 38 | fonts/sverigescriptdecorated_demo-webfont.eot 39 | fonts/sverigescriptdecorated_demo-webfont.woff 40 | fonts/sverigescriptdecorated_demo-webfont.woff2 41 | 42 | NETWORK: 43 | * 44 | 45 | 46 | FALLBACK: 47 | -------------------------------------------------------------------------------- /catrina.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thulioph/catrina/957711455c3019c62a4098b5d94a8e1ccd92389e/catrina.jpg -------------------------------------------------------------------------------- /dist/css/style.min.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | /* line 6, ../../src/sass/_reset.scss */ 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | 27 | /* HTML5 display-role reset for older browsers */ 28 | /* line 27, ../../src/sass/_reset.scss */ 29 | article, aside, details, figcaption, figure, 30 | footer, header, hgroup, menu, nav, section { 31 | display: block; 32 | } 33 | 34 | /* line 31, ../../src/sass/_reset.scss */ 35 | body { 36 | line-height: 1; 37 | } 38 | 39 | /* line 34, ../../src/sass/_reset.scss */ 40 | ol, ul { 41 | list-style: none; 42 | } 43 | 44 | /* line 37, ../../src/sass/_reset.scss */ 45 | blockquote, q { 46 | quotes: none; 47 | } 48 | 49 | /* line 40, ../../src/sass/_reset.scss */ 50 | blockquote:before, blockquote:after, 51 | q:before, q:after { 52 | content: ''; 53 | content: none; 54 | } 55 | 56 | /* line 45, ../../src/sass/_reset.scss */ 57 | table { 58 | border-collapse: collapse; 59 | border-spacing: 0; 60 | } 61 | 62 | /* line 51, ../../src/sass/_reset.scss */ 63 | *, 64 | *:before, 65 | *:after { 66 | -webkit-box-sizing: border-box; 67 | -moz-box-sizing: border-box; 68 | box-sizing: border-box; 69 | } 70 | 71 | @font-face { 72 | font-family: 'OpenSansLight'; 73 | src: url("../../fonts/OpenSansLight.eot"); 74 | src: url("../../fonts/OpenSansLight.eot") format("embedded-opentype"), url("../../fonts/OpenSansLight.woff2") format("woff2"), url("../../fonts/OpenSansLight.woff") format("woff"), url("../../fonts/OpenSansLight.ttf") format("truetype"), url("../../fonts/OpenSansLight.svg#OpenSansLight") format("svg"); 75 | } 76 | @font-face { 77 | font-family: 'OpenSansRegular'; 78 | src: url("../../fonts/OpenSansRegular.eot"); 79 | src: url("../../fonts/OpenSansRegular.eot") format("embedded-opentype"), url("../../fonts/OpenSansRegular.woff2") format("woff2"), url("../../fonts/OpenSansRegular.woff") format("woff"), url("../../fonts/OpenSansRegular.ttf") format("truetype"), url("../../fonts/OpenSansRegular.svg#OpenSansRegular") format("svg"); 80 | } 81 | @font-face { 82 | font-family: 'OpenSansBold'; 83 | src: url("../../fonts/OpenSansBold.eot"); 84 | src: url("../../fonts/OpenSansBold.eot") format("embedded-opentype"), url("../../fonts/OpenSansBold.woff2") format("woff2"), url("../../fonts/OpenSansBold.woff") format("woff"), url("../../fonts/OpenSansBold.ttf") format("truetype"), url("../../fonts/OpenSansBold.svg#OpenSansBold") format("svg"); 85 | } 86 | @font-face { 87 | font-family: 'sverige_script_decorated_deRg'; 88 | src: url("../../fonts/sverigescriptdecorated_demo-webfont.eot"); 89 | src: url("../../fonts/sverigescriptdecorated_demo-webfont.eot?#iefix") format("embedded-opentype"), url("../../fonts/sverigescriptdecorated_demo-webfont.woff2") format("woff2"), url("../../fonts/sverigescriptdecorated_demo-webfont.woff") format("woff"), url("../../fonts/sverigescriptdecorated_demo-webfont.ttf") format("truetype"), url("../../fonts/sverigescriptdecorated_demo-webfont.svg#sverige_script_decorated_deRg") format("svg"); 90 | font-weight: normal; 91 | font-style: normal; 92 | } 93 | /* line 5, ../../src/sass/_form.scss */ 94 | ::-webkit-input-placeholder { 95 | color: #5f6a7d; 96 | } 97 | 98 | /* line 7, ../../src/sass/_form.scss */ 99 | :-moz-placeholder { 100 | color: #5f6a7d; 101 | } 102 | 103 | /* line 9, ../../src/sass/_form.scss */ 104 | ::-moz-placeholder { 105 | color: #5f6a7d; 106 | } 107 | 108 | /* line 11, ../../src/sass/_form.scss */ 109 | :-ms-input-placeholder { 110 | color: #5f6a7d; 111 | } 112 | 113 | /* line 13, ../../src/sass/_form.scss */ 114 | input:active, 115 | textarea:active, input:focus, 116 | textarea:focus { 117 | outline: none; 118 | border: 1px solid #2586b7; 119 | } 120 | 121 | /* line 18, ../../src/sass/_form.scss */ 122 | textarea { 123 | resize: vertical; 124 | min-height: 65px; 125 | } 126 | 127 | /* line 23, ../../src/sass/_form.scss */ 128 | input, 129 | textarea { 130 | font-family: "OpenSansLight"; 131 | -webkit-transition: border 0.2s 0s linear; 132 | -moz-transition: border 0.2s 0s linear; 133 | -ms-transition: border 0.2s 0s linear; 134 | -o-transition: border 0.2s 0s linear; 135 | transition: border 0.2s 0s linear; 136 | } 137 | 138 | /* line 32, ../../src/sass/_form.scss */ 139 | .btn-primary { 140 | text-transform: uppercase; 141 | padding: 5px 20px; 142 | text-align: center; 143 | border: none; 144 | margin: 0 auto; 145 | color: #FFFFFF; 146 | background-color: #2586b7; 147 | font-size: 1rem; 148 | font-family: "OpenSansLight"; 149 | display: block; 150 | -webkit-border-radius: 4px; 151 | -moz-border-radius: 4px; 152 | -ms-border-radius: 4px; 153 | -o-border-radius: 4px; 154 | border-radius: 4px; 155 | cursor: pointer; 156 | -webkit-transition: background 0.2s 0s ease; 157 | -moz-transition: background 0.2s 0s ease; 158 | -ms-transition: background 0.2s 0s ease; 159 | -o-transition: background 0.2s 0s ease; 160 | transition: background 0.2s 0s ease; 161 | } 162 | /* line 47, ../../src/sass/_form.scss */ 163 | .btn-primary:hover { 164 | background-color: #2E3B4E; 165 | } 166 | 167 | /* line 50, ../../src/sass/_form.scss */ 168 | .input-primary { 169 | height: 40px; 170 | padding: 5px 10px; 171 | margin-bottom: 10px; 172 | outline: none; 173 | border: 1px solid #E0E0E0; 174 | font-size: 1rem; 175 | -webkit-border-radius: 5px; 176 | -moz-border-radius: 5px; 177 | -ms-border-radius: 5px; 178 | -o-border-radius: 5px; 179 | border-radius: 5px; 180 | } 181 | /* line 59, ../../src/sass/_form.scss */ 182 | .input-primary.small { 183 | width: 30%; 184 | } 185 | /* line 60, ../../src/sass/_form.scss */ 186 | .input-primary.medium { 187 | width: 50%; 188 | } 189 | /* line 61, ../../src/sass/_form.scss */ 190 | .input-primary.big { 191 | width: 100%; 192 | } 193 | 194 | /* line 5, ../../src/sass/_general.scss */ 195 | body { 196 | font-size: 62.5%; 197 | background-color: transparent; 198 | } 199 | /* line 11, ../../src/sass/_general.scss */ 200 | body.js-offline::after { 201 | content: attr(data-status); 202 | width: 100%; 203 | height: 100%; 204 | padding-top: 10%; 205 | top: 0; 206 | left: 0; 207 | text-align: center; 208 | color: #FAFAFA; 209 | font-size: 1.4rem; 210 | line-height: 1.4rem; 211 | font-family: "OpenSansLight"; 212 | background-color: rgba(0, 0, 0, 0.8); 213 | position: absolute; 214 | overflow: hidden; 215 | z-index: 99; 216 | } 217 | 218 | /* line 31, ../../src/sass/_general.scss */ 219 | ::-moz-selection { 220 | background: #FAFAFA; 221 | color: #2586b7; 222 | text-shadow: none; 223 | } 224 | 225 | /* line 37, ../../src/sass/_general.scss */ 226 | ::selection { 227 | background: #FAFAFA; 228 | color: #2586b7; 229 | text-shadow: none; 230 | } 231 | 232 | /* line 46, ../../src/sass/_general.scss */ 233 | progress { 234 | z-index: 9999; 235 | position: fixed; 236 | left: 0; 237 | top: 0; 238 | width: 100%; 239 | height: 8px; 240 | border: none; 241 | background-color: transparent; 242 | -webkit-appearance: none; 243 | -moz-appearance: none; 244 | -ms-appearance: none; 245 | -o-appearance: none; 246 | appearance: none; 247 | -webkit-transition: all 0.2s 0s linear; 248 | -moz-transition: all 0.2s 0s linear; 249 | -ms-transition: all 0.2s 0s linear; 250 | -o-transition: all 0.2s 0s linear; 251 | transition: all 0.2s 0s linear; 252 | -webkit-box-shadow: 0 1px 11px rgba(0, 0, 0, 0.7); 253 | -moz-box-shadow: 0 1px 11px rgba(0, 0, 0, 0.7); 254 | -ms-box-shadow: 0 1px 11px rgba(0, 0, 0, 0.7); 255 | -o-box-shadow: 0 1px 11px rgba(0, 0, 0, 0.7); 256 | box-shadow: 0 1px 11px rgba(0, 0, 0, 0.7); 257 | } 258 | /* line 51, ../../src/sass/_base.scss */ 259 | progress::-webkit-progress-bar { 260 | background-color: transparent; 261 | } 262 | /* line 55, ../../src/sass/_base.scss */ 263 | progress::-webkit-progress-value { 264 | background-color: #2586b7; 265 | -webkit-transition: all 0.2s 0s linear; 266 | -moz-transition: all 0.2s 0s linear; 267 | -ms-transition: all 0.2s 0s linear; 268 | -o-transition: all 0.2s 0s linear; 269 | transition: all 0.2s 0s linear; 270 | } 271 | /* line 60, ../../src/sass/_base.scss */ 272 | progress::-moz-progress-bar { 273 | background-color: #2586b7; 274 | -webkit-transition: all 0.2s 0s linear; 275 | -moz-transition: all 0.2s 0s linear; 276 | -ms-transition: all 0.2s 0s linear; 277 | -o-transition: all 0.2s 0s linear; 278 | transition: all 0.2s 0s linear; 279 | } 280 | 281 | /* line 65, ../../src/sass/_general.scss */ 282 | .header-primary { 283 | width: 100%; 284 | height: 385px; 285 | position: relative; 286 | padding-top: 20px; 287 | background-color: #1B2126; 288 | } 289 | 290 | /* line 73, ../../src/sass/_general.scss */ 291 | .main { 292 | width: 100%; 293 | min-height: 800px; 294 | display: block; 295 | background-color: #FFFFFF; 296 | } 297 | 298 | /* line 80, ../../src/sass/_general.scss */ 299 | .logo { 300 | font-family: "sverige_script_decorated_deRg"; 301 | font-size: 7rem; 302 | color: #FAFAFA; 303 | text-align: center; 304 | height: 250px; 305 | line-height: 320px; 306 | } 307 | 308 | /* line 90, ../../src/sass/_general.scss */ 309 | .footer-primary { 310 | position: relative; 311 | width: 100%; 312 | min-height: 245px; 313 | text-align: center; 314 | background-color: #1B2126; 315 | } 316 | /* line 97, ../../src/sass/_general.scss */ 317 | .footer-primary p { 318 | color: #FAFAFA; 319 | font-size: 1rem; 320 | font-family: "OpenSansLight"; 321 | display: inline-block; 322 | top: 90px; 323 | position: relative; 324 | } 325 | /* line 105, ../../src/sass/_general.scss */ 326 | .footer-primary p.copyright { 327 | width: 100%; 328 | height: 30px; 329 | } 330 | 331 | /* line 112, ../../src/sass/_general.scss */ 332 | .social-item { 333 | width: 280px; 334 | border: 1px solid #FAFAFA; 335 | height: 45px; 336 | display: inline-block; 337 | margin: 70px 10px 0 0; 338 | } 339 | 340 | /* line 120, ../../src/sass/_general.scss */ 341 | .social-link { 342 | line-height: 45px; 343 | display: block; 344 | text-decoration: none; 345 | text-transform: uppercase; 346 | color: #E0E0E0; 347 | font-family: "OpenSansRegular"; 348 | font-size: 1rem; 349 | -webkit-transition: all 0.2s 0s ease-out; 350 | -moz-transition: all 0.2s 0s ease-out; 351 | -ms-transition: all 0.2s 0s ease-out; 352 | -o-transition: all 0.2s 0s ease-out; 353 | transition: all 0.2s 0s ease-out; 354 | } 355 | /* line 130, ../../src/sass/_general.scss */ 356 | .social-link:hover { 357 | background-color: #E0E0E0; 358 | color: #1B2126; 359 | } 360 | 361 | /* line 136, ../../src/sass/_general.scss */ 362 | .back-top { 363 | width: 50px; 364 | height: 50px; 365 | position: absolute; 366 | right: 20px; 367 | top: 120px; 368 | z-index: 10; 369 | display: block; 370 | text-indent: -9999px; 371 | overflow: hidden; 372 | opacity: 0; 373 | -webkit-transform: rotate(-90deg); 374 | -moz-transform: rotate(-90deg); 375 | -ms-transform: rotate(-90deg); 376 | -o-transform: rotate(-90deg); 377 | transform: rotate(-90deg); 378 | -webkit-border-radius: 4px; 379 | -moz-border-radius: 4px; 380 | -ms-border-radius: 4px; 381 | -o-border-radius: 4px; 382 | border-radius: 4px; 383 | background-color: #E0E0E0; 384 | background-repeat: no-repeat; 385 | background-position: center center; 386 | background-size: 40px 40px; 387 | background-image: url("../../src/images/icon-arrow.svg"); 388 | -webkit-transition: opacity 0.2s 0s linear; 389 | -moz-transition: opacity 0.2s 0s linear; 390 | -ms-transition: opacity 0.2s 0s linear; 391 | -o-transition: opacity 0.2s 0s linear; 392 | transition: opacity 0.2s 0s linear; 393 | } 394 | /* line 158, ../../src/sass/_general.scss */ 395 | .back-top.js-show { 396 | opacity: 1; 397 | } 398 | /* line 160, ../../src/sass/_general.scss */ 399 | .back-top:hover { 400 | opacity: .5; 401 | } 402 | 403 | /* line 165, ../../src/sass/_general.scss */ 404 | .nav-primary { 405 | height: 60px; 406 | width: 100%; 407 | margin-top: 75px; 408 | text-align: center; 409 | border-bottom: 1px solid #E0E0E0; 410 | background-color: #FAFAFA; 411 | } 412 | /* line 173, ../../src/sass/_general.scss */ 413 | .nav-primary.js-nav-active { 414 | position: fixed; 415 | top: -76px; 416 | z-index: 901; 417 | } 418 | 419 | /* line 180, ../../src/sass/_general.scss */ 420 | .nav-item { 421 | display: inline-block; 422 | } 423 | /* line 183, ../../src/sass/_general.scss */ 424 | .nav-item.js-nav-active { 425 | background-color: #2586b7; 426 | } 427 | /* line 186, ../../src/sass/_general.scss */ 428 | .nav-item.js-nav-active .nav-link { 429 | color: #FFFFFF; 430 | } 431 | 432 | /* line 190, ../../src/sass/_general.scss */ 433 | .nav-link { 434 | display: block; 435 | text-decoration: none; 436 | text-transform: uppercase; 437 | line-height: 60px; 438 | margin: 0 20px; 439 | font-family: "OpenSansLight"; 440 | color: #6C7980; 441 | font-size: 1rem; 442 | -webkit-transition: color 0.2s 0s linear; 443 | -moz-transition: color 0.2s 0s linear; 444 | -ms-transition: color 0.2s 0s linear; 445 | -o-transition: color 0.2s 0s linear; 446 | transition: color 0.2s 0s linear; 447 | } 448 | /* line 201, ../../src/sass/_general.scss */ 449 | .nav-link:hover { 450 | color: #2586b7; 451 | } 452 | 453 | /* line 206, ../../src/sass/_general.scss */ 454 | .fork-github img { 455 | z-index: 10; 456 | position: absolute; 457 | top: 0; 458 | right: 0; 459 | border: 0; 460 | } 461 | 462 | /* line 215, ../../src/sass/_general.scss */ 463 | .section.home, .section.about, .contact .content { 464 | width: 80%; 465 | } 466 | 467 | /* line 217, ../../src/sass/_general.scss */ 468 | .section { 469 | margin: 20px auto 0 auto; 470 | text-align: center; 471 | padding: 70px 0 20px 0; 472 | } 473 | 474 | /* line 226, ../../src/sass/_general.scss */ 475 | .section-title { 476 | font-family: "OpenSansBold"; 477 | font-size: 1.4rem; 478 | color: #2E3B4E; 479 | text-transform: none; 480 | } 481 | 482 | /* line 233, ../../src/sass/_general.scss */ 483 | .section-description { 484 | line-height: 1.4rem; 485 | font-size: 1rem; 486 | color: #5f6a7d; 487 | font-family: "OpenSansRegular"; 488 | width: 50%; 489 | margin: 20px auto; 490 | } 491 | 492 | /* line 242, ../../src/sass/_general.scss */ 493 | .link { 494 | text-decoration: none; 495 | display: block; 496 | font-size: 1rem; 497 | color: #2586b7; 498 | font-family: "OpenSansRegular"; 499 | } 500 | /* line 249, ../../src/sass/_general.scss */ 501 | .link.external { 502 | margin-top: 20px; 503 | } 504 | 505 | /* line 253, ../../src/sass/_general.scss */ 506 | .post { 507 | background-color: #E0E0E0; 508 | margin-top: 30px; 509 | padding: 20px 0; 510 | } 511 | /* line 258, ../../src/sass/_general.scss */ 512 | .post.new { 513 | background-color: #2586b7; 514 | } 515 | /* line 261, ../../src/sass/_general.scss */ 516 | .post.new h3 { 517 | color: #FFFFFF; 518 | } 519 | /* line 262, ../../src/sass/_general.scss */ 520 | .post.new p { 521 | color: #FFFFFF; 522 | } 523 | 524 | /* line 266, ../../src/sass/_general.scss */ 525 | .post-content { 526 | display: inline-block; 527 | vertical-align: middle; 528 | width: 46%; 529 | margin: 10px; 530 | text-align: left; 531 | } 532 | /* line 273, ../../src/sass/_general.scss */ 533 | .post-content h3 { 534 | font-family: "OpenSansRegular"; 535 | text-transform: uppercase; 536 | font-size: 1.2rem; 537 | color: #5f6a7d; 538 | } 539 | /* line 280, ../../src/sass/_general.scss */ 540 | .post-content p { 541 | font-family: "OpenSansLight"; 542 | font-size: 1rem; 543 | margin: 10px 0; 544 | line-height: 1.4rem; 545 | } 546 | 547 | /* line 288, ../../src/sass/_general.scss */ 548 | .post-image { 549 | display: inline-block; 550 | vertical-align: middle; 551 | position: relative; 552 | overflow: hidden; 553 | height: 202px; 554 | } 555 | /* line 295, ../../src/sass/_general.scss */ 556 | .post-image img { 557 | -webkit-transition: transform 0.2s 0s ease-out; 558 | -moz-transition: transform 0.2s 0s ease-out; 559 | -ms-transition: transform 0.2s 0s ease-out; 560 | -o-transition: transform 0.2s 0s ease-out; 561 | transition: transform 0.2s 0s ease-out; 562 | } 563 | /* line 297, ../../src/sass/_general.scss */ 564 | .post-image figcaption { 565 | width: 100%; 566 | padding: 20px 0; 567 | position: absolute; 568 | bottom: -60px; 569 | text-transform: uppercase; 570 | color: #1B2126; 571 | background-color: #FAFAFA; 572 | text-align: center; 573 | font-family: "OpenSansLight"; 574 | font-size: 1rem; 575 | -webkit-transition: bottom 0.2s 0s ease-out; 576 | -moz-transition: bottom 0.2s 0s ease-out; 577 | -ms-transition: bottom 0.2s 0s ease-out; 578 | -o-transition: bottom 0.2s 0s ease-out; 579 | transition: bottom 0.2s 0s ease-out; 580 | } 581 | /* line 312, ../../src/sass/_general.scss */ 582 | .post-image:hover figcaption { 583 | bottom: 0; 584 | } 585 | /* line 314, ../../src/sass/_general.scss */ 586 | .post-image:hover img { 587 | -webkit-transform: translate3d(0, -40px, 0); 588 | -moz-transform: translate3d(0, -40px, 0); 589 | -ms-transform: translate3d(0, -40px, 0); 590 | -o-transform: translate3d(0, -40px, 0); 591 | transform: translate3d(0, -40px, 0); 592 | -webkit-filter: url(#svg-blur); 593 | -o-filter: url(#svg-blur); 594 | filter: url(#svg-blur); 595 | } 596 | 597 | /* line 323, ../../src/sass/_general.scss */ 598 | #svg-filter { 599 | display: none; 600 | } 601 | 602 | /* line 327, ../../src/sass/_general.scss */ 603 | .content-modal { 604 | display: none; 605 | } 606 | /* line 330, ../../src/sass/_general.scss */ 607 | .content-modal p { 608 | width: 100%; 609 | } 610 | 611 | /* line 339, ../../src/sass/_general.scss */ 612 | .social { 613 | text-align: center; 614 | } 615 | /* line 342, ../../src/sass/_general.scss */ 616 | .social h2 { 617 | text-transform: uppercase; 618 | padding-bottom: 6px; 619 | border-bottom: 1px solid #E0E0E0; 620 | display: inline-block; 621 | } 622 | 623 | /* line 350, ../../src/sass/_general.scss */ 624 | .feeds { 625 | width: 100%; 626 | min-height: 280px; 627 | display: block; 628 | margin: 30px auto; 629 | } 630 | /* line 356, ../../src/sass/_general.scss */ 631 | .feeds.instagram { 632 | border-top: 1px solid #E0E0E0; 633 | border-bottom: 1px solid #E0E0E0; 634 | background-color: #FAFAFA; 635 | padding: 30px 0; 636 | } 637 | /* line 363, ../../src/sass/_general.scss */ 638 | .feeds li { 639 | display: inline-block; 640 | position: relative; 641 | } 642 | 643 | /* line 370, ../../src/sass/_general.scss */ 644 | .feeds-instagram-item { 645 | margin: 2px; 646 | border: 1px solid #1B2126; 647 | } 648 | 649 | /* line 375, ../../src/sass/_general.scss */ 650 | .feeds-instagram-link { 651 | text-decoration: none; 652 | } 653 | /* line 379, ../../src/sass/_general.scss */ 654 | .feeds-instagram-link:hover .feeds-instagram-like { 655 | height: 25%; 656 | } 657 | 658 | /* line 383, ../../src/sass/_general.scss */ 659 | .feeds-instagram-image { 660 | overflow: hidden; 661 | width: 150px; 662 | height: 150px; 663 | position: relative; 664 | } 665 | 666 | /* line 390, ../../src/sass/_general.scss */ 667 | .feeds-instagram-like { 668 | position: absolute; 669 | text-align: center; 670 | display: block; 671 | bottom: 0; 672 | width: 100%; 673 | height: 0%; 674 | line-height: 40px; 675 | color: #1B2126; 676 | font-family: "OpenSansRegular"; 677 | font-size: 1.4rem; 678 | background-color: rgba(255, 255, 255, 0.7); 679 | -webkit-transition: height 0.2s 0s linear; 680 | -moz-transition: height 0.2s 0s linear; 681 | -ms-transition: height 0.2s 0s linear; 682 | -o-transition: height 0.2s 0s linear; 683 | transition: height 0.2s 0s linear; 684 | } 685 | /* line 404, ../../src/sass/_general.scss */ 686 | .feeds-instagram-like::before { 687 | content: ''; 688 | width: 30px; 689 | height: 30px; 690 | position: absolute; 691 | top: 3px; 692 | left: 10px; 693 | background-repeat: no-repeat; 694 | background-size: 30px 30px; 695 | background-image: url("../../src/images/heart.svg"); 696 | -webkit-border-radius: 100%; 697 | -moz-border-radius: 100%; 698 | -ms-border-radius: 100%; 699 | -o-border-radius: 100%; 700 | border-radius: 100%; 701 | } 702 | 703 | /* line 420, ../../src/sass/_general.scss */ 704 | .feeds-twitter-item { 705 | width: 240px; 706 | height: auto; 707 | position: relative; 708 | min-height: 130px; 709 | background-color: #E0E0E0; 710 | margin: 0 30px 100px 0; 711 | -webkit-transition: background 0.2s 0s ease-out; 712 | -moz-transition: background 0.2s 0s ease-out; 713 | -ms-transition: background 0.2s 0s ease-out; 714 | -o-transition: background 0.2s 0s ease-out; 715 | transition: background 0.2s 0s ease-out; 716 | } 717 | /* line 429, ../../src/sass/_general.scss */ 718 | .feeds-twitter-item::before { 719 | content: ''; 720 | position: absolute; 721 | right: 80%; 722 | bottom: -15px; 723 | width: 0; 724 | height: 0; 725 | border-top: 14px solid transparent; 726 | border-right: 26px solid #E0E0E0; 727 | border-bottom: 13px solid transparent; 728 | -webkit-transform: rotate(10deg); 729 | -moz-transform: rotate(10deg); 730 | -ms-transform: rotate(10deg); 731 | -o-transform: rotate(10deg); 732 | transform: rotate(10deg); 733 | } 734 | /* line 442, ../../src/sass/_general.scss */ 735 | .feeds-twitter-item:hover { 736 | background-color: #5f6a7d; 737 | } 738 | /* line 445, ../../src/sass/_general.scss */ 739 | .feeds-twitter-item:hover::before { 740 | border-right: 26px solid #5f6a7d; 741 | } 742 | /* line 447, ../../src/sass/_general.scss */ 743 | .feeds-twitter-item:hover .tweet a { 744 | color: #FAFAFA; 745 | } 746 | /* line 449, ../../src/sass/_general.scss */ 747 | .feeds-twitter-item:hover p { 748 | color: #FAFAFA; 749 | } 750 | /* line 452, ../../src/sass/_general.scss */ 751 | .feeds-twitter-item .user { 752 | position: absolute; 753 | bottom: -70px; 754 | left: 53px; 755 | } 756 | /* line 457, ../../src/sass/_general.scss */ 757 | .feeds-twitter-item .user img { 758 | width: 48px; 759 | height: 48px; 760 | display: inline-block; 761 | -webkit-border-radius: 100%; 762 | -moz-border-radius: 100%; 763 | -ms-border-radius: 100%; 764 | -o-border-radius: 100%; 765 | border-radius: 100%; 766 | } 767 | /* line 464, ../../src/sass/_general.scss */ 768 | .feeds-twitter-item .user a { 769 | text-decoration: none; 770 | color: #2586b7; 771 | } 772 | /* line 469, ../../src/sass/_general.scss */ 773 | .feeds-twitter-item .user span { 774 | display: none; 775 | } 776 | /* line 472, ../../src/sass/_general.scss */ 777 | .feeds-twitter-item .user span[data-scribe="element:screen_name"] { 778 | font-size: 0.8rem; 779 | font-family: "OpenSansRegular"; 780 | vertical-align: top; 781 | line-height: 50px; 782 | margin-left: 10px; 783 | display: inline-block; 784 | } 785 | /* line 483, ../../src/sass/_general.scss */ 786 | .feeds-twitter-item p { 787 | font-size: 0.8rem; 788 | line-height: 1.4rem; 789 | font-family: "OpenSansRegular"; 790 | color: #1B2126; 791 | white-space: pre-line; 792 | overflow: hidden; 793 | text-overflow: ellipsis; 794 | } 795 | /* line 490, ../../src/sass/_general.scss */ 796 | .feeds-twitter-item p.tweet { 797 | padding: 20px; 798 | } 799 | /* line 493, ../../src/sass/_general.scss */ 800 | .feeds-twitter-item p.tweet a { 801 | color: #2586b7; 802 | } 803 | 804 | /* line 504, ../../src/sass/_general.scss */ 805 | .contact { 806 | padding: 70px 0; 807 | border-top: 1px solid #E0E0E0; 808 | border-bottom: 1px solid #E0E0E0; 809 | background-color: #FAFAFA; 810 | } 811 | /* line 510, ../../src/sass/_general.scss */ 812 | .contact .content { 813 | margin: 0 auto; 814 | } 815 | 816 | /* line 516, ../../src/sass/_general.scss */ 817 | .contact-form { 818 | margin-top: 30px; 819 | } 820 | 821 | /* line 5, ../../src/sass/libs/_slick.scss */ 822 | .slide-primary { 823 | overflow: hidden; 824 | position: relative; 825 | } 826 | 827 | /* line 10, ../../src/sass/libs/_slick.scss */ 828 | .slide-image { 829 | display: inline-block; 830 | } 831 | /* line 13, ../../src/sass/libs/_slick.scss */ 832 | .slide-image:focus { 833 | outline: none; 834 | border: none; 835 | } 836 | /* line 18, ../../src/sass/libs/_slick.scss */ 837 | .slide-image img { 838 | max-width: 100%; 839 | } 840 | 841 | /* line 22, ../../src/sass/libs/_slick.scss */ 842 | .slick-dots li { 843 | display: inline-block; 844 | margin: 5px; 845 | } 846 | /* line 26, ../../src/sass/libs/_slick.scss */ 847 | .slick-dots li.slick-active { 848 | background-color: black; 849 | } 850 | 851 | /* line 30, ../../src/sass/libs/_slick.scss */ 852 | .slick-prev, 853 | .slick-next { 854 | position: absolute; 855 | top: 50%; 856 | z-index: 910; 857 | } 858 | 859 | /* line 37, ../../src/sass/libs/_slick.scss */ 860 | .slick-prev { 861 | left: 0; 862 | } 863 | 864 | /* line 39, ../../src/sass/libs/_slick.scss */ 865 | .slick-next { 866 | right: 0; 867 | } 868 | 869 | /*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */ 870 | /* line 2, ../../src/sass/libs/_fancybox.scss */ 871 | .fancybox-wrap, 872 | .fancybox-skin, 873 | .fancybox-outer, 874 | .fancybox-inner, 875 | .fancybox-image, 876 | .fancybox-wrap iframe, 877 | .fancybox-wrap object, 878 | .fancybox-nav, 879 | .fancybox-nav span, 880 | .fancybox-tmp { 881 | padding: 0; 882 | margin: 0; 883 | border: 0; 884 | outline: none; 885 | vertical-align: top; 886 | } 887 | 888 | /* line 20, ../../src/sass/libs/_fancybox.scss */ 889 | .fancybox-wrap { 890 | position: absolute; 891 | top: 0; 892 | left: 0; 893 | z-index: 8020; 894 | } 895 | 896 | /* line 27, ../../src/sass/libs/_fancybox.scss */ 897 | .fancybox-skin { 898 | position: relative; 899 | background: #f9f9f9; 900 | color: #444; 901 | text-shadow: none; 902 | -webkit-border-radius: 4px; 903 | -moz-border-radius: 4px; 904 | border-radius: 4px; 905 | } 906 | 907 | /* line 37, ../../src/sass/libs/_fancybox.scss */ 908 | .fancybox-opened { 909 | z-index: 8030; 910 | } 911 | 912 | /* line 41, ../../src/sass/libs/_fancybox.scss */ 913 | .fancybox-opened .fancybox-skin { 914 | -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); 915 | -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); 916 | box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); 917 | } 918 | 919 | /* line 47, ../../src/sass/libs/_fancybox.scss */ 920 | .fancybox-outer, .fancybox-inner { 921 | position: relative; 922 | } 923 | 924 | /* line 51, ../../src/sass/libs/_fancybox.scss */ 925 | .fancybox-inner { 926 | overflow: hidden; 927 | } 928 | 929 | /* line 55, ../../src/sass/libs/_fancybox.scss */ 930 | .fancybox-type-iframe .fancybox-inner { 931 | -webkit-overflow-scrolling: touch; 932 | } 933 | 934 | /* line 59, ../../src/sass/libs/_fancybox.scss */ 935 | .fancybox-error { 936 | color: #444; 937 | font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; 938 | margin: 0; 939 | padding: 15px; 940 | white-space: nowrap; 941 | } 942 | 943 | /* line 67, ../../src/sass/libs/_fancybox.scss */ 944 | .fancybox-image, .fancybox-iframe { 945 | display: block; 946 | width: 100%; 947 | height: 100%; 948 | } 949 | 950 | /* line 73, ../../src/sass/libs/_fancybox.scss */ 951 | .fancybox-image { 952 | max-width: 100%; 953 | max-height: 100%; 954 | } 955 | 956 | /* line 78, ../../src/sass/libs/_fancybox.scss */ 957 | #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { 958 | background-image: url("../../src/images/modal/fancybox_sprite.png"); 959 | } 960 | 961 | /* line 82, ../../src/sass/libs/_fancybox.scss */ 962 | #fancybox-loading { 963 | position: fixed; 964 | top: 50%; 965 | left: 50%; 966 | margin-top: -22px; 967 | margin-left: -22px; 968 | background-position: 0 -108px; 969 | opacity: 0.8; 970 | cursor: pointer; 971 | z-index: 8060; 972 | } 973 | 974 | /* line 94, ../../src/sass/libs/_fancybox.scss */ 975 | #fancybox-loading div { 976 | width: 44px; 977 | height: 44px; 978 | background-image: url("../../src/images/modal/fancybox_loading.gif"); 979 | background-repeat: no-repeat; 980 | background-position: center center; 981 | } 982 | 983 | /* line 102, ../../src/sass/libs/_fancybox.scss */ 984 | .fancybox-close { 985 | position: absolute; 986 | top: -18px; 987 | right: -18px; 988 | width: 36px; 989 | height: 36px; 990 | cursor: pointer; 991 | z-index: 8040; 992 | } 993 | 994 | /* line 112, ../../src/sass/libs/_fancybox.scss */ 995 | .fancybox-nav { 996 | position: absolute; 997 | top: 0; 998 | width: 40%; 999 | height: 100%; 1000 | cursor: pointer; 1001 | text-decoration: none; 1002 | background-color: transparent; 1003 | background-image: url("../../src/images/modal/blank.gif"); 1004 | -webkit-tap-highlight-color: transparent; 1005 | z-index: 8040; 1006 | } 1007 | 1008 | /* line 125, ../../src/sass/libs/_fancybox.scss */ 1009 | .fancybox-prev { 1010 | left: 0; 1011 | } 1012 | 1013 | /* line 129, ../../src/sass/libs/_fancybox.scss */ 1014 | .fancybox-next { 1015 | right: 0; 1016 | } 1017 | 1018 | /* line 133, ../../src/sass/libs/_fancybox.scss */ 1019 | .fancybox-nav span { 1020 | position: absolute; 1021 | top: 50%; 1022 | width: 36px; 1023 | height: 34px; 1024 | margin-top: -18px; 1025 | cursor: pointer; 1026 | z-index: 8040; 1027 | visibility: hidden; 1028 | } 1029 | 1030 | /* line 144, ../../src/sass/libs/_fancybox.scss */ 1031 | .fancybox-prev span { 1032 | left: 10px; 1033 | background-position: 0 -36px; 1034 | } 1035 | 1036 | /* line 149, ../../src/sass/libs/_fancybox.scss */ 1037 | .fancybox-next span { 1038 | right: 10px; 1039 | background-position: 0 -72px; 1040 | } 1041 | 1042 | /* line 154, ../../src/sass/libs/_fancybox.scss */ 1043 | .fancybox-nav:hover span { 1044 | visibility: visible; 1045 | } 1046 | 1047 | /* line 158, ../../src/sass/libs/_fancybox.scss */ 1048 | .fancybox-tmp { 1049 | position: absolute; 1050 | top: -99999px; 1051 | left: -99999px; 1052 | visibility: hidden; 1053 | max-width: 99999px; 1054 | max-height: 99999px; 1055 | overflow: visible !important; 1056 | } 1057 | 1058 | /* Overlay helper */ 1059 | /* line 170, ../../src/sass/libs/_fancybox.scss */ 1060 | .fancybox-lock { 1061 | overflow: hidden !important; 1062 | width: auto; 1063 | } 1064 | 1065 | /* line 175, ../../src/sass/libs/_fancybox.scss */ 1066 | .fancybox-lock body { 1067 | overflow: hidden !important; 1068 | } 1069 | 1070 | /* line 179, ../../src/sass/libs/_fancybox.scss */ 1071 | .fancybox-lock-test { 1072 | overflow-y: hidden !important; 1073 | } 1074 | 1075 | /* line 183, ../../src/sass/libs/_fancybox.scss */ 1076 | .fancybox-overlay { 1077 | position: absolute; 1078 | top: 0; 1079 | left: 0; 1080 | overflow: hidden; 1081 | display: none; 1082 | z-index: 8010; 1083 | background-image: url("../../src/images/modal/fancybox_overlay.png"); 1084 | } 1085 | 1086 | /* line 193, ../../src/sass/libs/_fancybox.scss */ 1087 | .fancybox-overlay-fixed { 1088 | position: fixed; 1089 | bottom: 0; 1090 | right: 0; 1091 | } 1092 | 1093 | /* line 199, ../../src/sass/libs/_fancybox.scss */ 1094 | .fancybox-lock .fancybox-overlay { 1095 | overflow: auto; 1096 | overflow-y: scroll; 1097 | } 1098 | 1099 | /* Title helper */ 1100 | /* line 206, ../../src/sass/libs/_fancybox.scss */ 1101 | .fancybox-title { 1102 | visibility: hidden; 1103 | font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; 1104 | position: relative; 1105 | text-shadow: none; 1106 | z-index: 8050; 1107 | } 1108 | 1109 | /* line 214, ../../src/sass/libs/_fancybox.scss */ 1110 | .fancybox-opened .fancybox-title { 1111 | visibility: visible; 1112 | } 1113 | 1114 | /* line 218, ../../src/sass/libs/_fancybox.scss */ 1115 | .fancybox-title-float-wrap { 1116 | position: absolute; 1117 | bottom: 0; 1118 | right: 50%; 1119 | margin-bottom: -35px; 1120 | z-index: 8050; 1121 | text-align: center; 1122 | } 1123 | 1124 | /* line 227, ../../src/sass/libs/_fancybox.scss */ 1125 | .fancybox-title-float-wrap .child { 1126 | display: inline-block; 1127 | margin-right: -100%; 1128 | padding: 2px 20px; 1129 | background: transparent; 1130 | /* Fallback for web browsers that doesn't support RGBa */ 1131 | background: rgba(0, 0, 0, 0.8); 1132 | -webkit-border-radius: 15px; 1133 | -moz-border-radius: 15px; 1134 | border-radius: 15px; 1135 | text-shadow: 0 1px 2px #222; 1136 | color: #FFF; 1137 | font-weight: bold; 1138 | line-height: 24px; 1139 | white-space: nowrap; 1140 | } 1141 | 1142 | /* line 243, ../../src/sass/libs/_fancybox.scss */ 1143 | .fancybox-title-outside-wrap { 1144 | position: relative; 1145 | margin-top: 10px; 1146 | color: #fff; 1147 | } 1148 | 1149 | /* line 249, ../../src/sass/libs/_fancybox.scss */ 1150 | .fancybox-title-inside-wrap { 1151 | padding-top: 10px; 1152 | } 1153 | 1154 | /* line 253, ../../src/sass/libs/_fancybox.scss */ 1155 | .fancybox-title-over-wrap { 1156 | position: absolute; 1157 | bottom: 0; 1158 | left: 0; 1159 | color: #fff; 1160 | padding: 10px; 1161 | background: #000; 1162 | background: rgba(0, 0, 0, 0.8); 1163 | } 1164 | 1165 | /*Retina graphics!*/ 1166 | @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { 1167 | /* line 268, ../../src/sass/libs/_fancybox.scss */ 1168 | #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { 1169 | background-image: url("../../src/images/modal/fancybox_sprite@2x.png"); 1170 | background-size: 44px 152px; 1171 | /*The size of the normal image, half the size of the hi-res image*/ 1172 | } 1173 | 1174 | /* line 273, ../../src/sass/libs/_fancybox.scss */ 1175 | #fancybox-loading div { 1176 | background-image: url("../../src/images/modal/fancybox_loading@2x.gif"); 1177 | background-size: 24px 24px; 1178 | /*The size of the normal image, half the size of the hi-res image*/ 1179 | } 1180 | } 1181 | /* line 1, ../../src/sass/_animations.scss */ 1182 | body.author { 1183 | margin: 0; 1184 | padding: 0; 1185 | background-color: #e91e63; 1186 | } 1187 | 1188 | /*.m-header { 1189 | padding: 8.5em 8.5em 4.25em; 1190 | position: relative; 1191 | }*/ 1192 | /*.m-page { 1193 | background-color: #eceff1; 1194 | color: #263238; 1195 | padding:30px 30px 900px; 1196 | }*/ 1197 | /*.m-detail-layout { 1198 | padding-left: 270px; 1199 | }*/ 1200 | /*.m-detail-layout .m-aside { 1201 | position: absolute; 1202 | left: 0; 1203 | width: 270px; 1204 | background-color: #e91e63; 1205 | }*/ 1206 | /* 1207 | * Keyframes 1208 | */ 1209 | @-webkit-keyframes fadeIn { 1210 | 0% { 1211 | opacity: 0; 1212 | } 1213 | 100% { 1214 | opacity: 1; 1215 | } 1216 | } 1217 | @keyframes fadeIn { 1218 | 0% { 1219 | opacity: 0; 1220 | } 1221 | 100% { 1222 | opacity: 1; 1223 | } 1224 | } 1225 | @-webkit-keyframes fadeInUp { 1226 | 0% { 1227 | opacity: 0; 1228 | -webkit-transform: translate3d(0, 100%, 0); 1229 | transform: translate3d(0, 100%, 0); 1230 | } 1231 | 100% { 1232 | opacity: 1; 1233 | -webkit-transform: none; 1234 | transform: none; 1235 | } 1236 | } 1237 | @keyframes fadeInUp { 1238 | 0% { 1239 | opacity: 0; 1240 | -webkit-transform: translate3d(0, 100%, 0); 1241 | -ms-transform: translate3d(0, 100%, 0); 1242 | transform: translate3d(0, 100%, 0); 1243 | } 1244 | 100% { 1245 | opacity: 1; 1246 | -webkit-transform: none; 1247 | -ms-transform: none; 1248 | transform: none; 1249 | } 1250 | } 1251 | @-webkit-keyframes fadeInRight { 1252 | 0% { 1253 | opacity: 0; 1254 | -webkit-transform: translate3d(100%, 0, 0); 1255 | transform: translate3d(100%, 0, 0); 1256 | } 1257 | 100% { 1258 | opacity: 1; 1259 | -webkit-transform: none; 1260 | transform: none; 1261 | } 1262 | } 1263 | @keyframes fadeInRight { 1264 | 0% { 1265 | opacity: 0; 1266 | -webkit-transform: translate3d(100%, 0, 0); 1267 | -ms-transform: translate3d(100%, 0, 0); 1268 | transform: translate3d(100%, 0, 0); 1269 | } 1270 | 100% { 1271 | opacity: 1; 1272 | -webkit-transform: none; 1273 | -ms-transform: none; 1274 | transform: none; 1275 | } 1276 | } 1277 | /* 1278 | * CSS Page Transitions 1279 | * Don't forget to add vendor prefixes! 1280 | */ 1281 | /** Basic styles for an animated element */ 1282 | /* line 112, ../../src/sass/_animations.scss */ 1283 | .m-scene .scene_element { 1284 | -webkit-animation-duration: .5s; 1285 | animation-duration: .5s; 1286 | -webkit-animation-fill-mode: both; 1287 | animation-fill-mode: both; 1288 | transition-timing-function: ease-in; 1289 | -webkit-transition-timing-function: ease-in; 1290 | } 1291 | 1292 | /** An element that fades in */ 1293 | /* line 123, ../../src/sass/_animations.scss */ 1294 | .m-scene .scene_element--fadein { 1295 | -webkit-animation-name: fadeIn; 1296 | animation-name: fadeIn; 1297 | } 1298 | 1299 | /** An element that fades in and slides up */ 1300 | /* line 129, ../../src/sass/_animations.scss */ 1301 | .m-scene .scene_element--fadeinup { 1302 | -webkit-animation-name: fadeInUp; 1303 | animation-name: fadeInUp; 1304 | } 1305 | 1306 | /** An element that fades in and slides from the right */ 1307 | /* line 135, ../../src/sass/_animations.scss */ 1308 | .m-scene .scene_element--fadeinright { 1309 | -webkit-animation-name: fadeInRight; 1310 | animation-name: fadeInRight; 1311 | } 1312 | 1313 | /* line 140, ../../src/sass/_animations.scss */ 1314 | .m-scene .scene_element--delayed { 1315 | -webkit-animation-delay: 0.5s; 1316 | animation-delay: 0.5s; 1317 | } 1318 | 1319 | /* line 145, ../../src/sass/_animations.scss */ 1320 | .m-scene.is-exiting .scene_element { 1321 | -webkit-animation-direction: alternate-reverse; 1322 | animation-direction: alternate-reverse; 1323 | } 1324 | 1325 | /* line 150, ../../src/sass/_animations.scss */ 1326 | .m-scene.is-exiting .scene_element--delayed { 1327 | -webkit-animation-delay: 0s; 1328 | animation-delay: 0s; 1329 | } 1330 | 1331 | /* line 155, ../../src/sass/_animations.scss */ 1332 | .m-scene.is-exiting .scene_element--noexiting { 1333 | -webkit-animation-direction: alternate-reverse; 1334 | animation-direction: alternate-reverse; 1335 | } 1336 | -------------------------------------------------------------------------------- /dist/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thulioph/catrina/957711455c3019c62a4098b5d94a8e1ccd92389e/dist/images/logo.png -------------------------------------------------------------------------------- /dist/images/modal/blank.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thulioph/catrina/957711455c3019c62a4098b5d94a8e1ccd92389e/dist/images/modal/blank.gif -------------------------------------------------------------------------------- /dist/images/modal/fancybox_loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thulioph/catrina/957711455c3019c62a4098b5d94a8e1ccd92389e/dist/images/modal/fancybox_loading.gif -------------------------------------------------------------------------------- /dist/images/modal/fancybox_loading@2x.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thulioph/catrina/957711455c3019c62a4098b5d94a8e1ccd92389e/dist/images/modal/fancybox_loading@2x.gif -------------------------------------------------------------------------------- /dist/images/modal/fancybox_overlay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thulioph/catrina/957711455c3019c62a4098b5d94a8e1ccd92389e/dist/images/modal/fancybox_overlay.png -------------------------------------------------------------------------------- /dist/images/modal/fancybox_sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thulioph/catrina/957711455c3019c62a4098b5d94a8e1ccd92389e/dist/images/modal/fancybox_sprite.png -------------------------------------------------------------------------------- /dist/images/modal/fancybox_sprite@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thulioph/catrina/957711455c3019c62a4098b5d94a8e1ccd92389e/dist/images/modal/fancybox_sprite@2x.png -------------------------------------------------------------------------------- /dist/images/og-facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thulioph/catrina/957711455c3019c62a4098b5d94a8e1ccd92389e/dist/images/og-facebook.png -------------------------------------------------------------------------------- /dist/js/scripts.min.js: -------------------------------------------------------------------------------- 1 | var APP=APP||{};APP._nameSpace="APP",APP.delegate=function(scope,method){var methodArguments,i,argumentsLength=arguments.length;if(argumentsLength>2){for(methodArguments=[],i=2;argumentsLength>i;i++)methodArguments.push(arguments[i]);return function(){method.apply(scope,methodArguments)}}return function(){method.apply(scope,arguments)}},APP.init=function(Module){var modulesLength=arguments.length;void 0!==Module&&Module!==APP&&APP.setUp(),0==modulesLength||1==modulesLength?this.readModule(Module||APP):modulesLength>1&&APP.readModule.apply(this,arguments)},APP.setUp=function(){},APP.readModule=function(Module){var node,i=0;{if(!(arguments.length>1)){if("object"!=typeof Module)return!1;if(!Module.hasOwnProperty("setUp")||"function"!=typeof Module.setUp)return!1;Module.setUp();for(node in Module)Module.hasOwnProperty(node)===!0&&null!==Module[node]&&"object"==typeof Module[node]&&(Module[node].parent=function(){return Module},Module[node]._nameSpace=(Module._nameSpace||"APP")+"."+node,APP.readModule(Module[node]));return!1}for(;iiArguments;iArguments++)argumentsArray.push(APP.getByNamespace(arguments[iArguments]));APP.init.apply(this,argumentsArray)},APP.getByNamespace=function(namespace){var spaces,spacesLength,iSpace,space,target;if(spaces=namespace.split("."),"APP"!=spaces.shift())return null;for(spacesLength=spaces.length,target=this,iSpace=0;spacesLength>iSpace;iSpace++)space=spaces[iSpace],target.hasOwnProperty(space)&&(target=target[space]);return target},APP.applyByNamespace=function(nameSpace,params){var node,nodes,scopes,target,i;for(void 0!==params&¶ms instanceof Array==!1&&(params=[params]),scopes=[window],nodes=nameSpace.split("."),i=0;ii;i++){var href=data.data[i].link,imgUrl=data.data[i].images.thumbnail.url,likes=data.data[i].likes.count,text=data.data[i].caption.text;photos.push({href:href,imgUrl:imgUrl,likes:likes,text:text}),output=template({photos:photos}),document.getElementById("feeds-instagram").innerHTML=output}}};var APP=APP||{};APP.Scroll={setUp:function(){this.getClick(),this.getPosition(),this.showBackTop(),this.backTop(),this.sectionActive()},getClick:function(){var target,that;that=this,$(".nav-list").on("click","a",function(event){event.preventDefault(),target=$($(this).attr("href")),that.smoothScroll(target,85)})},smoothScroll:function(target,offset){$("html, body").animate({scrollTop:target.offset().top-offset},1500)},getPosition:function(){$(window).on("scroll",function(){$(document).scrollTop()>=345?$("#nav-primary").addClass("js-nav-active"):$(document).scrollTop()<=405&&$("#nav-primary").removeClass("js-nav-active")})},showBackTop:function(){$(window).on("scroll",function(){$(document).scrollTop()>=1885?$("#back-top").addClass("js-show"):$("#back-top").removeClass("js-show")})},backTop:function(){var that,target;that=this,$("#back-top").on("click",function(event){event.preventDefault(),target=$($(this).attr("href")),that.smoothScroll(target,0)})},sectionActive:function(){var that=this;$(document).on("scroll",that.markerSection)},markerSection:function(){var that,scrollPos;that=this,scrollPos=$(document).scrollTop()+115,$(".nav-item").each(function(){var currentElement=$(this),currentLink=$(this).children(),refElement=$(currentLink.attr("href"));refElement.position().top<=scrollPos&&refElement.position().top+refElement.height()>scrollPos?($(".nav-link").removeClass("js-nav-active"),currentElement.addClass("js-nav-active")):currentElement.removeClass("js-nav-active")})},progressBar:function(){var max,value,winHeight=$(window).height(),docHeight=$("main").height(),progressBar=$("progress");max=docHeight-winHeight,progressBar.attr("max",max),$(document).on("scroll",function(){value=$(window).scrollTop(),progressBar.attr("value",value)})}};var APP=APP||{};APP.Slide={setUp:function(){this.initSlide()},initSlide:function(){$("#slide").slick({dots:!0,infinite:!0,speed:500,fade:!0,slide:"figure",cssEase:"ease-out"})}};var APP=APP||{};APP.Request={setUp:function(){this.getClick()},getClick:function(){var href,text,that,sectionId;that=this,$(".request").on("click",function(event){event.preventDefault(),href=$(this).attr("href"),text=$(this).attr("href").replace(".html",""),sectionId=text,APP.Storage.getStorage(text,href,sectionId)})},ajax:function(url,key,sectionId){$.ajax({url:url,type:"GET",beforeSend:function(){console.log("Loading..")},success:function(data){$("#"+sectionId).html(data);var value=$("#"+sectionId).html();APP.Storage.convertString(key,value)},error:function(error){console.warn(error)}})}};var APP=APP||{};APP.Storage={setUp:function(){},convertString:function(chave,html){var that,string;that=this,string=JSON.stringify(html),that.insertLocalStorage(chave,string)},insertLocalStorage:function(text,string){localStorage.setItem(text,string)},getStorage:function(key,href,sectionId){var that=this;if(null==localStorage.getItem(key))APP.Request.ajax(href,key,sectionId);else{that.checkCapaticy(key);var href=JSON.parse(localStorage.getItem(key));$("#"+sectionId).html(href)}},checkCapaticy:function(key){var len,max;max=5126,len=localStorage.getItem(key).length,console.warn(max>=len?"Seu localStorage está com: "+Math.round(max-len)+"kb":"Seu localStorage está com: "+len)},searchToSend:function(){console.warn("Check if have data..");for(var data=[],i=0;i 2 | 3 | 4 | 5 | 6 | 7 | Catrina | Easy landing pages 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | Fork me on GitHub 81 | 82 | 83 |
84 |

Catrina

85 | 86 | 105 |
106 | 107 |
108 |
109 |

Aqui vem um título para sua sessão

110 |

111 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit recusandae amet error eligendi ab, consequatur delectus molestias minus aliquid vel sequi facilis, itaque a veritatis molestiae doloremque hic incidunt pariatur sit, voluptatem unde non totam! Ducimus autem mollitia nulla voluptatibus. 112 | 113 |

114 | 115 | Aqui vem um link pro modal. 116 |

117 | 118 |
119 |
120 | placeholder+image 121 |
122 | 123 |
124 | placeholder+image 125 |
126 | 127 |
128 | placeholder+image 129 |
130 |
131 |
132 | 133 |
134 |

Pequeno título

135 |

136 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident odio nihil assumenda facere quasi minus molestiae ducimus perferendis ratione numquam. 137 |

138 | 139 | 140 | Link para request de arquivos externos. 141 | 142 | 143 |
144 | 145 |
146 |
147 |

Título do meu post

148 |

149 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis cupiditate eligendi quisquam atque, possimus, voluptates quam nulla quas libero, vero, nisi architecto. Animi sequi possimus doloribus, nostrum odit labore aspernatur consectetur non ratione asperiores odio saepe, minima perspiciatis quasi voluptate? Porro rem a culpa possimus velit, nihil facere voluptatem at unde ipsam vel voluptatum aliquam, dolorem, mollitia dignissimos perspiciatis fuga? 150 |

151 |
152 | 153 | 154 |
155 | placeholder+image 156 | 157 |
Legenda da imagem
158 |
159 | 160 |
161 | 162 |
163 | 164 |
165 | placeholder+image 166 | 167 |
Legenda da imagem
168 |
169 | 170 | 171 |
172 |

Título do meu post

173 |

174 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis cupiditate eligendi quisquam atque, possimus, voluptates quam nulla quas libero, vero, nisi architecto. Animi sequi possimus doloribus, nostrum odit labore aspernatur consectetur non ratione asperiores odio saepe, minima perspiciatis quasi voluptate? Porro rem a culpa possimus velit, nihil facere voluptatem at unde ipsam vel voluptatum aliquam, dolorem, mollitia dignissimos perspiciatis fuga? 175 |

176 |
177 |
178 | 179 | 180 | Link para outra página. 181 | 182 |
183 | 184 | 196 | 197 |
198 |
199 |

Mais um título

200 |

201 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam fugiat alias eum labore adipisci, quas, aliquam consequuntur ratione nam, tenetur, eaque minus quia illum optio? 202 |

203 | 204 |
205 | 206 | 207 | 208 | 209 |
210 |
211 |
212 |
213 | 214 |
215 | Top 216 | 217 | 224 | 225 | 226 |
227 | 228 | 229 |
230 |
231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 244 | 245 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 284 | 285 | 286 | -------------------------------------------------------------------------------- /locales/en-US/translation.json: -------------------------------------------------------------------------------- 1 | { 2 | "app": { 3 | "name" : "i18next" 4 | } 5 | ,"nav" : { 6 | "home" : "Home" 7 | ,"about" : "About" 8 | ,"contact" : "Contact" 9 | } 10 | } -------------------------------------------------------------------------------- /locales/pt-BR/translation.json: -------------------------------------------------------------------------------- 1 | { 2 | "app": { 3 | "name" : "i18next" 4 | } 5 | ,"nav" : { 6 | "home" : "Início" 7 | ,"about" : "Sobre" 8 | ,"contact" : "Contato" 9 | } 10 | } -------------------------------------------------------------------------------- /logo-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thulioph/catrina/957711455c3019c62a4098b5d94a8e1ccd92389e/logo-bg.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "catrina", 3 | "version": "1.0.0", 4 | "title": "Catrina", 5 | "description": "Template Project Front-End", 6 | "author": "Thulio Philioe ", 7 | "homepage": "https://github.com/thulioph/catrina", 8 | "main": "Gruntfile.js", 9 | "repository": { 10 | "type": "git", 11 | "url": "git://github.com/thulioph/catrina.git" 12 | }, 13 | "private": true, 14 | "devDependencies": { 15 | "grunt": "^0.4.5", 16 | "matchdep": "^0.3.0", 17 | "grunt-contrib-watch": "~0.6.1", 18 | "grunt-contrib-compass": "^1.0.1", 19 | "grunt-contrib-uglify": "^0.6.0", 20 | "grunt-contrib-concat": "^0.5.0", 21 | "grunt-contrib-clean": "^0.6.0", 22 | "grunt-contrib-imagemin": "^0.9.2", 23 | "grunt-browser-sync": "^0.9.1", 24 | "time-grunt": "~1.0.0", 25 | "grunt-contrib-sass": "~0.8.1", 26 | "load-grunt-tasks": "~1.0.0" 27 | }, 28 | "dependencies": { 29 | "http-server": "^0.8.0" 30 | }, 31 | "scripts": { 32 | "postinstall": "bower install", 33 | "prestart": "npm install", 34 | "start": "http-server -a localhost -p 8080 -c-1" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /request.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | placeholder+image 5 | 6 |
Legenda da imagem
7 |
8 | 9 | 10 |
11 |

Título do meu post

12 |

13 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis cupiditate eligendi quisquam atque, possimus, voluptates quam nulla quas libero, vero, nisi architecto. Animi sequi possimus doloribus, nostrum odit labore aspernatur consectetur non ratione asperiores odio saepe, minima perspiciatis quasi voluptate? Porro rem a culpa possimus velit, nihil facere voluptatem at unde ipsam vel voluptatum aliquam, dolorem, mollitia dignissimos perspiciatis fuga? 14 |

15 |
16 |
17 | -------------------------------------------------------------------------------- /robots.txt: -------------------------------------------------------------------------------- 1 | # www.robotstxt.org/ 2 | 3 | # Allow crawling of all content 4 | User-agent: * 5 | Disallow: -------------------------------------------------------------------------------- /send.php: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 | 18 | 19 | 20 | 43 | 44 | 45 | 47 | 48 | 49 |
 
13 |      14 | 15 | 16 | 17 |
21 |
22 | 23 | 24 | 25 | 32 | 33 | 34 | 35 |
26 | 27 | Nome: ".$nome."

28 | Email: ".$email."

29 | Mensagem: ".$mensagem."

30 | Data: ".date("d/m/Y H:i:s")."

31 |
36 |
37 | 38 | 39 |
40 | 41 |
42 |
46 |
50 | "; 51 | 52 | if ($_SERVER[HTTP_HOST]) { 53 | $emailsender= $email; 54 | } else { 55 | $emailsender = $email; 56 | } 57 | 58 | 59 | if(PATH_SEPARATOR == ";") $quebra_linha = "\r\n"; 60 | else $quebra_linha = "\n"; 61 | 62 | $cabecalho = "From: $nome <$emailsender> $quebra_linha"; 63 | $cabecalho .= "Reply-To: $nome <$email> $quebra_linha"; 64 | $cabecalho .= "MIME-Version: 1.0$quebra_linha"; 65 | $cabecalho .= "Content-type: text/html; charset=uft-8$quebra_linha"; 66 | 67 | $envia = mail("email@gmail.com", "Contato site", utf8_decode($mens),$cabecalho,"-r".$emailsender); 68 | $envia .= mail("email2@gmail.com", "Contato site", utf8_decode($mens),$cabecalho,"-r".$emailsender); 69 | 70 | 71 | if($envia){ 72 | echo "Email enviado com sucesso!"; 73 | } else{ 74 | echo "Erro ao enviar o email. Por favor, tente novamente em alguns minutos."; 75 | } 76 | ?> 77 | -------------------------------------------------------------------------------- /src/images/heart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 13 | 14 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/images/icon-arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thulioph/catrina/957711455c3019c62a4098b5d94a8e1ccd92389e/src/images/logo.png -------------------------------------------------------------------------------- /src/images/modal/blank.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thulioph/catrina/957711455c3019c62a4098b5d94a8e1ccd92389e/src/images/modal/blank.gif -------------------------------------------------------------------------------- /src/images/modal/fancybox_loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thulioph/catrina/957711455c3019c62a4098b5d94a8e1ccd92389e/src/images/modal/fancybox_loading.gif -------------------------------------------------------------------------------- /src/images/modal/fancybox_loading@2x.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thulioph/catrina/957711455c3019c62a4098b5d94a8e1ccd92389e/src/images/modal/fancybox_loading@2x.gif -------------------------------------------------------------------------------- /src/images/modal/fancybox_overlay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thulioph/catrina/957711455c3019c62a4098b5d94a8e1ccd92389e/src/images/modal/fancybox_overlay.png -------------------------------------------------------------------------------- /src/images/modal/fancybox_sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thulioph/catrina/957711455c3019c62a4098b5d94a8e1ccd92389e/src/images/modal/fancybox_sprite.png -------------------------------------------------------------------------------- /src/images/modal/fancybox_sprite@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thulioph/catrina/957711455c3019c62a4098b5d94a8e1ccd92389e/src/images/modal/fancybox_sprite@2x.png -------------------------------------------------------------------------------- /src/images/og-facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thulioph/catrina/957711455c3019c62a4098b5d94a8e1ccd92389e/src/images/og-facebook.png -------------------------------------------------------------------------------- /src/js/APP.Cache.js: -------------------------------------------------------------------------------- 1 | // ========================================== 2 | // Check APP Cache 3 | // ========================================== 4 | 5 | var APP = APP || {}; 6 | APP.Cache = { 7 | setUp: function() { 8 | this.handlerUpdate(); 9 | }, 10 | 11 | handlerUpdate: function() { 12 | var that, appCache; 13 | 14 | that = this; 15 | appCache = window.applicationCache; 16 | 17 | appCache.addEventListener('cached', that.handleCachedEvent, false); 18 | appCache.addEventListener('checking', that.handleCacheChecking, false); 19 | appCache.addEventListener('downloading', that.handleCacheDownloading, false); 20 | appCache.addEventListener('error', that.handleCacheError, false); 21 | appCache.addEventListener('noupdate', that.handleCacheNoupdate, false); 22 | appCache.addEventListener('obsolete', that.handleCacheObsolete, false); 23 | appCache.addEventListener('progress', that.handleCacheProgress, false); 24 | appCache.addEventListener('updateready', that.handleCacheUpdateready, false); 25 | }, 26 | 27 | handleCachedEvent: function() { 28 | console.log(event); 29 | }, 30 | 31 | handleCacheChecking: function() { 32 | console.log(event); 33 | }, 34 | 35 | handleCacheDownloading: function() { 36 | console.log(event); 37 | }, 38 | 39 | handleCacheError: function() { 40 | console.warn(error); 41 | }, 42 | 43 | handleCacheNoupdate: function() { 44 | console.log(event); 45 | }, 46 | 47 | handleCacheObsolete: function() { 48 | console.log(event); 49 | }, 50 | 51 | handleCacheProgress: function() { 52 | console.log(event); 53 | }, 54 | 55 | handleCacheUpdateready: function() { 56 | var appCache = window.applicationCache; 57 | 58 | appCache.swapCache(); 59 | 60 | if (confirm('Existe uma nova versão para este site, deseja atualizar?')) { 61 | window.location.reload(); // refresh page to apply new updates 62 | } else { 63 | // nothing 64 | } 65 | } 66 | }; 67 | -------------------------------------------------------------------------------- /src/js/APP.Contact.js: -------------------------------------------------------------------------------- 1 | // ========================================== 2 | // Send email if internet is ok. 3 | // ========================================== 4 | 5 | var APP = APP || {}; 6 | APP.Contact = { 7 | setUp: function(){ 8 | this.submitForm(); 9 | }, 10 | 11 | submitForm: function() { 12 | var formdata, that, email; 13 | 14 | that = this; 15 | 16 | $('#contact-form').on('submit', function(event) { 17 | event.preventDefault(); 18 | 19 | formdata = $('#contact-form').serialize(); 20 | email = $('#contact-email').val(); 21 | 22 | that.checkStatus(email, formdata); 23 | }); 24 | }, 25 | 26 | checkStatus: function(email, formdata) { 27 | var that = this; 28 | 29 | if ($('body').hasClass('js-offline') == false) { 30 | that.sendForm(formdata); 31 | } else { 32 | APP.Storage.insertLocalStorage(email, formdata); 33 | } 34 | }, 35 | 36 | sendForm: function(formdata) { 37 | $.ajax({ 38 | url: 'send.php', 39 | type: 'POST', 40 | data: formdata, 41 | 42 | beforeSend: function() { 43 | console.log('Sending...'); 44 | }, 45 | 46 | success: function(data) { 47 | console.log(data); 48 | }, 49 | 50 | error: function(error) { 51 | console.warn(error); 52 | } 53 | }); 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /src/js/APP.EasterEggs.js: -------------------------------------------------------------------------------- 1 | // ========================================== 2 | // Lib that active konami code. 3 | // ========================================== 4 | 5 | var APP = APP || {}; 6 | APP.EasterEggs = { 7 | setUp: function() { 8 | this.checkPlatform(); 9 | }, 10 | 11 | checkPlatform: function() { 12 | var mobile, regex, that; 13 | 14 | that = this; 15 | regex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i; 16 | mobile = regex.test(navigator.userAgent); 17 | 18 | if (!mobile) { 19 | that.activeWithText(); 20 | } else { 21 | that.activeWithGestures(); 22 | } 23 | }, 24 | 25 | activeWithText :function() { 26 | cheet('h u m a n s', function() { 27 | window.open(document.URL + 'humans.txt', 'Project Team'); 28 | }); 29 | }, 30 | 31 | activeWithGestures: function() { 32 | var hammerPad, hitArea; 33 | 34 | hitArea = document.querySelector('#copyright'); 35 | hammerPad = new Hammer(hitArea); 36 | 37 | hammerPad.on("tap", function(event){ 38 | var pointer0 = event.pointers[0]; 39 | 40 | if (event.type.match(/tap/g)) { 41 | var tap = event.tapCount; 42 | 43 | console.log('Try again :)'); 44 | 45 | if (tap === 2) { 46 | window.open(document.URL + 'humans.txt', 'Project Team'); 47 | } 48 | } 49 | 50 | }); 51 | } 52 | }; 53 | -------------------------------------------------------------------------------- /src/js/APP.Instagram.js: -------------------------------------------------------------------------------- 1 | var APP = APP || {}; 2 | APP.Instagram = { 3 | setUp: function() { 4 | this.setConfig(); 5 | this.handlebarsModal(); 6 | }, 7 | 8 | setConfig: function() { 9 | var that, limit, size, tag, url, accessToken; 10 | 11 | that = this; 12 | limit = 16; 13 | size = 'medium'; 14 | tag = 'catrina'; 15 | accessToken = '181941196.5b9e1e6.c4df4ed6d9494b9a817be3ee7d046127'; 16 | url = 'https://api.instagram.com/v1/tags/' + tag + '/media/recent?access_token=' + accessToken + ''; 17 | 18 | that.getData(limit, size, url); 19 | }, 20 | 21 | getData: function(limit, size, url) { 22 | var that = this; 23 | 24 | $.ajax({ 25 | type: "GET", 26 | dataType: "jsonp", 27 | cache: false, 28 | url: url, 29 | beforeSend: function() { 30 | // console.log('Carregando...'); 31 | }, 32 | 33 | success: function(data) { 34 | if (data.data.length === 0) { 35 | alert('Não existem imagens!'); 36 | } else { 37 | that.template(data, limit, size); 38 | } 39 | }, 40 | 41 | error: function(error) { 42 | console.warn(error); 43 | } 44 | }); 45 | }, 46 | 47 | handlebarsModal: function() { 48 | var source, template, data, output; 49 | 50 | source = document.getElementById('modal-template').innerHTML; 51 | template = Handlebars.compile(source); 52 | 53 | data = { 54 | title: 'Título usando Handlebars', 55 | description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. At voluptatibus totam modi ullam est commodi debitis optio officiis ad, voluptates illum pariatur iure doloremque, nemo harum? Ipsa optio, saepe quo modi earum laudantium. Saepe, nesciunt. Alias voluptatum ipsam dolorum, error!' 56 | }; 57 | 58 | output = template(data); 59 | 60 | document.getElementById('modal').innerHTML = output; 61 | }, 62 | 63 | template: function(data, limit, size) { 64 | var source, template, output, dados, photos; 65 | 66 | source = document.getElementById('instagram-template').innerHTML; 67 | template = Handlebars.compile(source); 68 | photos = []; 69 | 70 | for (var i = 0; i < limit; i++) { 71 | var href = data.data[i].link, 72 | imgUrl = data.data[i].images.thumbnail.url, 73 | likes = data.data[i].likes.count, 74 | text = data.data[i].caption.text; 75 | 76 | photos.push({ 77 | href: href, 78 | imgUrl: imgUrl, 79 | likes: likes, 80 | text: text 81 | }); 82 | 83 | output = template({photos:photos}); 84 | document.getElementById('feeds-instagram').innerHTML = output; 85 | } 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /src/js/APP.Language.js: -------------------------------------------------------------------------------- 1 | var APP = APP || {}; 2 | APP.Language = { 3 | setUp: function() { 4 | this.startLanguage(); 5 | this.changeLanguage(); 6 | }, 7 | 8 | startLanguage: function() { 9 | i18n.init({ 10 | fallbackLng: 'en-US' // fallback when language is not defined language 11 | ,debug: false // debug 12 | ,fixLng: true // preserve cookie when language is not defined 13 | ,load: 'current' // define the correct form to describe language 14 | }, 15 | 16 | function(translation) { 17 | var appName, string; 18 | 19 | $('[data-i18n]').i18n(); 20 | appName = translation('app.name'); 21 | string = document.cookie; 22 | 23 | if (string.indexOf('i18next=pt-BR') != -1) { 24 | APP.Language.i18pt(); 25 | $('.pt').addClass('js-active'); 26 | } else { 27 | APP.Language.i18en(); 28 | $('.en').addClass('js-active'); 29 | } 30 | 31 | }); 32 | }, 33 | 34 | i18en: function() { 35 | i18n.setLng('en-US', {fixLng: true}, function(translation){ 36 | $('[data-i18n]').i18n(); 37 | }); 38 | 39 | $('#logo-primary').removeClass('js-logo-pt'); 40 | $('#logo-primary').addClass('js-logo-en'); 41 | $('.nav-logo').css('background-image', 'url(dist/images/logo-primary-2-en.png)'); 42 | $('.navbar-brand').css('background-image', 'url(dist/images/logo-primary-2-en.png)'); 43 | }, 44 | 45 | i18pt: function() { 46 | i18n.setLng('pt-BR', {fixLng: true}, function(translation){ 47 | $('[data-i18n]').i18n(); 48 | }); 49 | 50 | $('#logo-primary').removeClass('js-logo-en'); 51 | $('#logo-primary').addClass('js-logo-pt'); 52 | $('.nav-logo').css('background-image', 'url(dist/images/logo-primary-2-pt.png)'); 53 | $('.navbar-brand').css('background-image', 'url(dist/images/logo-primary-2-pt.png)'); 54 | }, 55 | 56 | activeClass:function(element) { 57 | $('#switch-language button').removeClass('js-active'); 58 | $(element).addClass('js-active'); 59 | }, 60 | 61 | changeLanguage: function() { 62 | var attr, element; 63 | 64 | $('#switch-language').on('click', 'button', function(event) { 65 | element = this; 66 | attr = $(this).attr('data-language'); 67 | 68 | if (attr == 'en') { 69 | APP.Language.activeClass(element); 70 | APP.Language.i18en(); 71 | } else if (attr == 'pt') { 72 | APP.Language.activeClass(element); 73 | APP.Language.i18pt(); 74 | } 75 | }); 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /src/js/APP.Modal.js: -------------------------------------------------------------------------------- 1 | // ========================================== 2 | // Open modal 3 | // ========================================== 4 | 5 | var APP = APP || {}; 6 | APP.Modal = { 7 | setUp: function() { 8 | this.modal(); 9 | this.lightbox(); 10 | }, 11 | 12 | modal: function() { 13 | $(".modal").fancybox({ 14 | maxWidth : 800, 15 | maxHeight : 600, 16 | fitToView : false, 17 | width : '70%', 18 | height : '70%', 19 | autoSize : false, 20 | closeClick : false, 21 | openEffect : 'elastic', 22 | closeEffect : 'fade' 23 | }); 24 | }, 25 | 26 | lightbox: function() { 27 | $(".lightbox").fancybox({ 28 | prevEffect : 'fade', 29 | nextEffect : 'fade', 30 | closeBtn : true, 31 | index: 2, 32 | helpers : { 33 | title : { type : 'inside' }, 34 | buttons : {} 35 | } 36 | }); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/js/APP.Request.js: -------------------------------------------------------------------------------- 1 | // ========================================== 2 | // Request external pages with local storage 3 | // ========================================== 4 | 5 | var APP = APP || {}; 6 | APP.Request = { 7 | setUp: function() { 8 | this.getClick(); 9 | }, 10 | 11 | getClick: function() { 12 | var href, text, that, sectionId; 13 | 14 | that = this; 15 | 16 | $('.request').on('click', function(event) { 17 | event.preventDefault(); 18 | 19 | href = $(this).attr('href'); 20 | text = $(this).attr('href').replace('.html', ''); 21 | sectionId = text; 22 | 23 | APP.Storage.getStorage(text, href, sectionId); 24 | }); 25 | }, 26 | 27 | ajax: function(url, key, sectionId) { 28 | $.ajax({ 29 | url: url, 30 | type: 'GET', 31 | 32 | beforeSend: function() { 33 | console.log('Loading..'); 34 | }, 35 | 36 | success: function(data) { 37 | $('#'+sectionId).html(data); 38 | 39 | // adds in local storage 40 | var value = $('#'+sectionId).html(); 41 | APP.Storage.convertString(key, value); 42 | }, 43 | 44 | error: function(error) { 45 | console.warn(error); 46 | } 47 | }); 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/js/APP.Scroll.js: -------------------------------------------------------------------------------- 1 | // ========================================== 2 | // Smooth scroll when click. 3 | // ========================================== 4 | 5 | var APP = APP || {}; 6 | APP.Scroll = { 7 | setUp: function(){ 8 | this.getClick(); 9 | this.getPosition(); 10 | this.showBackTop(); 11 | this.backTop(); 12 | this.sectionActive(); 13 | }, 14 | 15 | getClick: function() { 16 | var target, that; 17 | 18 | that = this; 19 | 20 | // nav links 21 | $('.nav-list').on('click', 'a', function(event) { 22 | event.preventDefault(); 23 | target = $( $(this).attr('href') ); 24 | 25 | that.smoothScroll(target, 85); 26 | }); 27 | }, 28 | 29 | smoothScroll: function(target, offset) { 30 | $('html, body').animate({ 31 | scrollTop: target.offset().top - offset 32 | }, 1500); 33 | }, 34 | 35 | getPosition: function() { 36 | $(window).on('scroll', function() { 37 | if ($(document).scrollTop() >= 345) { 38 | $('#nav-primary').addClass('js-nav-active'); 39 | } else if ($(document).scrollTop() <= 405) { 40 | $('#nav-primary').removeClass('js-nav-active'); 41 | } 42 | }); 43 | }, 44 | 45 | showBackTop: function() { 46 | $(window).on('scroll', function() { 47 | if ($(document).scrollTop() >= 1885) { 48 | $('#back-top').addClass('js-show'); 49 | } else { 50 | $('#back-top').removeClass('js-show'); 51 | } 52 | }); 53 | }, 54 | 55 | backTop: function() { 56 | var that, target; 57 | 58 | that = this; 59 | 60 | $('#back-top').on('click', function(event) { 61 | event.preventDefault(); 62 | target = $( $(this).attr('href') ); 63 | 64 | that.smoothScroll(target, 0); 65 | }); 66 | }, 67 | 68 | sectionActive: function() { 69 | var that = this; 70 | 71 | $(document).on('scroll', that.markerSection); 72 | }, 73 | 74 | markerSection: function() { 75 | var that, scrollPos; 76 | 77 | that = this; 78 | scrollPos = $(document).scrollTop()+115; 79 | 80 | $('.nav-item').each(function() { 81 | var currentElement = $(this), 82 | currentLink = $(this).children(), // get a 83 | refElement = $(currentLink.attr('href')); 84 | 85 | if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { 86 | $('.nav-link').removeClass('js-nav-active'); 87 | currentElement.addClass('js-nav-active'); 88 | } else { 89 | currentElement.removeClass('js-nav-active'); 90 | } 91 | }); 92 | }, 93 | 94 | // called when APP.Instagram and App.Twitter are created. 95 | progressBar: function() { 96 | var winHeight = $(window).height(), 97 | docHeight = $('main').height(), 98 | progressBar = $('progress'), 99 | max, value; 100 | 101 | max = docHeight - winHeight; 102 | progressBar.attr('max', max); 103 | 104 | $(document).on('scroll', function(){ 105 | value = $(window).scrollTop(); 106 | progressBar.attr('value', value); 107 | }); 108 | }, 109 | } 110 | -------------------------------------------------------------------------------- /src/js/APP.Slide.js: -------------------------------------------------------------------------------- 1 | // ========================================== 2 | // Lib that active slide. 3 | // ========================================== 4 | 5 | var APP = APP || {}; 6 | APP.Slide = { 7 | setUp: function() { 8 | this.initSlide(); 9 | }, 10 | 11 | initSlide: function() { 12 | $('#slide').slick({ 13 | dots: true, 14 | infinite: true, 15 | speed: 500, 16 | fade: true, 17 | slide: 'figure', 18 | cssEase: 'ease-out' 19 | }); 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/js/APP.Status.js: -------------------------------------------------------------------------------- 1 | // ========================================== 2 | // Verify if user have internet. 3 | // ========================================== 4 | 5 | var APP = APP || {}; 6 | APP.Status = { 7 | setUp: function() { 8 | var handlerStatus; 9 | 10 | handlerStatus = APP.delegate(this, this.getStatus); 11 | $(window).on('online offline', handlerStatus); 12 | }, 13 | 14 | getStatus: function() { 15 | var that = this; 16 | 17 | if (navigator.onLine == true) { 18 | that.statusOn(); 19 | } else { 20 | that.statusOff(); 21 | } 22 | }, 23 | 24 | statusOn: function() { 25 | var body; 26 | 27 | body = document.querySelector('body'); 28 | body.classList.remove('js-offline'); 29 | body.removeAttribute('data-status'); 30 | 31 | APP.Storage.searchToSend(); 32 | }, 33 | 34 | statusOff: function() { 35 | var body; 36 | 37 | body = document.querySelector('body'); 38 | body.classList.add('js-offline'); 39 | body.setAttribute('data-status', 'Você parece não possuir acesso a internet :('); 40 | } 41 | }; 42 | -------------------------------------------------------------------------------- /src/js/APP.Storage.js: -------------------------------------------------------------------------------- 1 | // ========================================== 2 | // Local Storage 3 | // ========================================== 4 | 5 | var APP = APP || {}; 6 | APP.Storage = { 7 | setUp: function() {}, 8 | 9 | // convert return of ajax to string 10 | convertString: function(chave, html) { 11 | var that, string; 12 | 13 | that = this; 14 | string = JSON.stringify(html); 15 | 16 | that.insertLocalStorage(chave, string); 17 | }, 18 | 19 | // adds content in local storage 20 | insertLocalStorage: function(text, string) { 21 | localStorage.setItem(text, string); 22 | }, 23 | 24 | // verify if content is true 25 | getStorage: function(key, href, sectionId) { 26 | var that = this; 27 | 28 | if (localStorage.getItem(key) == null) { 29 | APP.Request.ajax(href, key, sectionId); 30 | } else { 31 | that.checkCapaticy(key); 32 | var href = JSON.parse(localStorage.getItem(key)); 33 | $('#'+sectionId).html(href); 34 | } 35 | }, 36 | 37 | // verify the capacity of local storage 38 | checkCapaticy: function(key) { 39 | var len, max; 40 | 41 | max = 5126, 42 | len = localStorage.getItem(key).length; 43 | 44 | if (len <= max) { 45 | console.warn('Seu localStorage está com: ' + Math.round(max-len) + 'kb'); 46 | } else { 47 | console.warn('Seu localStorage está com: ' + len); 48 | } 49 | }, 50 | 51 | // check if have data to send. 52 | searchToSend: function() { 53 | console.warn('Check if have data..'); 54 | 55 | var data = []; 56 | 57 | for (var i = 0; i < localStorage.length; i++){ 58 | data.push(localStorage.getItem(localStorage.key(i))); 59 | APP.Contact.sendForm(data); 60 | } 61 | 62 | console.log('Data: ', data); 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /src/js/APP.Tracking.js: -------------------------------------------------------------------------------- 1 | // ========================================== 2 | // Trackea os clicks do usuário. 3 | // ========================================== 4 | 5 | var APP = APP || {}; 6 | APP.Tracking = { 7 | setUp: function() { 8 | this.initTracking(); 9 | }, 10 | 11 | initTracking: function() { 12 | var category, action; 13 | 14 | $('[data-track]').on('click', function() { 15 | category = $(this).attr('data-track'), 16 | action = $(this).attr('data-action'); 17 | 18 | ga('send', 'event', category, action); 19 | }); 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/js/APP.Transitions.js: -------------------------------------------------------------------------------- 1 | // ========================================== 2 | // Transition between pages 3 | // ========================================== 4 | 5 | var APP = APP || {}; 6 | APP.Transitions = { 7 | setUp: function() { 8 | this.checkPage(); 9 | }, 10 | 11 | checkPage:function() { 12 | var id, that; 13 | 14 | that = this; 15 | id = $('body').attr('id'); 16 | 17 | that.activeTransition(id); 18 | }, 19 | 20 | activeTransition: function(id) { 21 | var content; 22 | 23 | content = $(id).smoothState({ 24 | prefetch: true, // delay between hover and click 25 | pageCacheSize: 4, // cache in memory 26 | onStart: { // run with click 27 | duration: 500, // duration of animations 28 | render: function(url, $container) { 29 | content.toggleAnimationClass('is-exiting'); 30 | $('body').animate({ scrollTop: 0 }); 31 | } 32 | } 33 | }).data('smoothState'); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/js/APP.Twitter.js: -------------------------------------------------------------------------------- 1 | var APP = APP || {}; 2 | APP.Twitter = { 3 | setUp: function() { 4 | this.getData(); 5 | }, 6 | 7 | getData: function() { 8 | var that = this; 9 | 10 | var tweets = { 11 | "id": '562454560720302080', 12 | "maxTweets": 7, 13 | "enableLinks": true, 14 | "showUser": true, 15 | "showImages": false, 16 | "showTime": false, 17 | "showInteraction": false, 18 | "customCallback": inserTweets 19 | }; 20 | 21 | function inserTweets(tweets){ 22 | for (var i = 0; i < tweets.length; i++) { 23 | var tweet = tweets[i]; 24 | that.createStructure(tweet); 25 | } 26 | 27 | // start progressBar 28 | APP.Scroll.progressBar(); 29 | } 30 | 31 | twitterFetcher.fetch(tweets); 32 | }, 33 | 34 | createStructure: function(tweet) { 35 | var feedsList = document.querySelector('#feeds-twitter ul'), 36 | li = document.createElement('li'); 37 | 38 | li.classList.add('feeds-twitter-item'); 39 | 40 | li.innerHTML = tweet; 41 | 42 | feedsList.appendChild(li); 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/js/APP.js: -------------------------------------------------------------------------------- 1 | /** 2 | * APP Modules Initilizer 3 | * Author: Dennis Calazans 4 | * 5 | */ 6 | var APP = APP || {}; 7 | 8 | /** 9 | * APP's Module Namespace 10 | * @type {String} 11 | */ 12 | APP._nameSpace = "APP"; 13 | 14 | /** 15 | * Method delegation 16 | * 17 | * Using this method, 18 | * you can create an anonymous function able to invoke a method 19 | * inside an determined scope 20 | * 21 | * @param {Object} scope Scope Object 22 | * @param {function} method The method that will be invoked 23 | * @return {function} Delegated method 24 | */ 25 | APP.delegate = function(scope, method) { 26 | var argumentsLength = arguments.length, methodArguments, i; 27 | 28 | if(argumentsLength > 2) { 29 | methodArguments = []; 30 | 31 | for(i = 2; i < argumentsLength; i++) { 32 | methodArguments.push(arguments[i]); 33 | } 34 | 35 | return function() { 36 | method.apply(scope, methodArguments); 37 | } 38 | } else { 39 | return function() { 40 | method.apply(scope,arguments); 41 | }; 42 | } 43 | } 44 | 45 | /** 46 | * Initialize all (arguments.length == 0) or several modules under APP 47 | * @param object [Module,[...]] 48 | * @return void 49 | */ 50 | APP.init = function(Module) { 51 | var modulesLength = arguments.length; 52 | if(Module !== undefined && Module !== APP) { 53 | APP.setUp(); 54 | } 55 | 56 | if(modulesLength == 0 || modulesLength == 1) { 57 | this.readModule(Module || APP); 58 | } else if(modulesLength > 1) { 59 | APP.readModule.apply(this, arguments); 60 | } 61 | }; 62 | 63 | //Main method 64 | APP.setUp = function() {}; 65 | 66 | /** 67 | * Look for child Modules 68 | */ 69 | APP.readModule = function(Module) { 70 | var node, i=0; 71 | 72 | if(arguments.length > 1) { 73 | for(;i'; 36 | n++; 37 | } 38 | html += ''; 39 | element.innerHTML = html; 40 | } else { 41 | customCallbackFunction(tweets); 42 | } 43 | } 44 | 45 | function strip(data) { 46 | return data.replace(/]*>(.*?)<\/b>/gi, function(a,s){return s;}) 47 | .replace(/class=".*?"|data-query-source=".*?"|dir=".*?"|rel=".*?"/gi, 48 | ''); 49 | } 50 | 51 | function targetLinksToNewWindow(el) { 52 | var links = el.getElementsByTagName('a'); 53 | for (var i = links.length - 1; i >= 0; i--) { 54 | links[i].setAttribute('target', '_blank'); 55 | } 56 | } 57 | 58 | function getElementsByClassName (node, classname) { 59 | var a = []; 60 | var regex = new RegExp('(^| )' + classname + '( |$)'); 61 | var elems = node.getElementsByTagName('*'); 62 | for (var i = 0, j = elems.length; i < j; i++) { 63 | if(regex.test(elems[i].className)){ 64 | a.push(elems[i]); 65 | } 66 | } 67 | return a; 68 | } 69 | 70 | function extractImageUrl(image_data) { 71 | if (image_data !== undefined) { 72 | var data_src = image_data.innerHTML.match(/data-srcset="([A-z0-9%_\.-]+)/i)[0]; 73 | return decodeURIComponent(data_src).split('"')[1]; 74 | } 75 | } 76 | 77 | return { 78 | fetch: function(config) { 79 | if (config.maxTweets === undefined) { 80 | config.maxTweets = 20; 81 | } 82 | if (config.enableLinks === undefined) { 83 | config.enableLinks = true; 84 | } 85 | if (config.showUser === undefined) { 86 | config.showUser = true; 87 | } 88 | if (config.showTime === undefined) { 89 | config.showTime = true; 90 | } 91 | if (config.dateFunction === undefined) { 92 | config.dateFunction = 'default'; 93 | } 94 | if (config.showRetweet === undefined) { 95 | config.showRetweet = true; 96 | } 97 | if (config.customCallback === undefined) { 98 | config.customCallback = null; 99 | } 100 | if (config.showInteraction === undefined) { 101 | config.showInteraction = true; 102 | } 103 | if (config.showImages === undefined) { 104 | config.showImages = false; 105 | } 106 | if (config.linksInNewWindow === undefined) { 107 | config.linksInNewWindow = true; 108 | } 109 | 110 | if (inProgress) { 111 | queue.push(config); 112 | } else { 113 | inProgress = true; 114 | 115 | domNode = config.domId; 116 | maxTweets = config.maxTweets; 117 | parseLinks = config.enableLinks; 118 | printUser = config.showUser; 119 | printTime = config.showTime; 120 | showRts = config.showRetweet; 121 | formatterFunction = config.dateFunction; 122 | customCallbackFunction = config.customCallback; 123 | showInteractionLinks = config.showInteraction; 124 | showImages = config.showImages; 125 | targetBlank = config.linksInNewWindow; 126 | 127 | var script = document.createElement('script'); 128 | script.type = 'text/javascript'; 129 | script.src = '//cdn.syndication.twimg.com/widgets/timelines/' + 130 | config.id + '?&lang=' + (config.lang || lang) + '&callback=twitterFetcher.callback&' + 131 | 'suppress_response_codes=true&rnd=' + Math.random(); 132 | document.getElementsByTagName('head')[0].appendChild(script); 133 | } 134 | }, 135 | 136 | callback: function(data) { 137 | var div = document.createElement('div'); 138 | div.innerHTML = data.body; 139 | if (typeof(div.getElementsByClassName) === 'undefined') { 140 | supportsClassName = false; 141 | } 142 | 143 | var tweets = []; 144 | var authors = []; 145 | var times = []; 146 | var images = []; 147 | var rts = []; 148 | var tids = []; 149 | var x = 0; 150 | 151 | if (supportsClassName) { 152 | var tmp = div.getElementsByClassName('tweet'); 153 | while (x < tmp.length) { 154 | if (tmp[x].getElementsByClassName('retweet-credit').length > 0) { 155 | rts.push(true); 156 | } else { 157 | rts.push(false); 158 | } 159 | if (!rts[x] || rts[x] && showRts) { 160 | tweets.push(tmp[x].getElementsByClassName('e-entry-title')[0]); 161 | tids.push(tmp[x].getAttribute('data-tweet-id')); 162 | authors.push(tmp[x].getElementsByClassName('p-author')[0]); 163 | times.push(tmp[x].getElementsByClassName('dt-updated')[0]); 164 | if (tmp[x].getElementsByClassName('inline-media')[0] !== undefined) { 165 | images.push(tmp[x].getElementsByClassName('inline-media')[0]); 166 | } else { 167 | images.push(undefined); 168 | } 169 | } 170 | x++; 171 | } 172 | } else { 173 | var tmp = getElementsByClassName(div, 'tweet'); 174 | while (x < tmp.length) { 175 | tweets.push(getElementsByClassName(tmp[x], 'e-entry-title')[0]); 176 | tids.push(tmp[x].getAttribute('data-tweet-id')); 177 | authors.push(getElementsByClassName(tmp[x], 'p-author')[0]); 178 | times.push(getElementsByClassName(tmp[x], 'dt-updated')[0]); 179 | if (getElementsByClassName(tmp[x], 'inline-media')[0] !== undefined) { 180 | images.push(getElementsByClassName(tmp[x], 'inline-media')[0]); 181 | } else { 182 | images.push(undefined); 183 | } 184 | 185 | if (getElementsByClassName(tmp[x], 'retweet-credit').length > 0) { 186 | rts.push(true); 187 | } else { 188 | rts.push(false); 189 | } 190 | x++; 191 | } 192 | } 193 | 194 | if (tweets.length > maxTweets) { 195 | tweets.splice(maxTweets, (tweets.length - maxTweets)); 196 | authors.splice(maxTweets, (authors.length - maxTweets)); 197 | times.splice(maxTweets, (times.length - maxTweets)); 198 | rts.splice(maxTweets, (rts.length - maxTweets)); 199 | images.splice(maxTweets, (images.length - maxTweets)); 200 | } 201 | 202 | var arrayTweets = []; 203 | var x = tweets.length; 204 | var n = 0; 205 | while(n < x) { 206 | if (typeof(formatterFunction) !== 'string') { 207 | var datetimeText = times[n].getAttribute('datetime'); 208 | var newDate = new Date(times[n].getAttribute('datetime') 209 | .replace(/-/g,'/').replace('T', ' ').split('+')[0]); 210 | var dateString = formatterFunction(newDate, datetimeText); 211 | times[n].setAttribute('aria-label', dateString); 212 | 213 | if (tweets[n].innerText) { 214 | // IE hack. 215 | if (supportsClassName) { 216 | times[n].innerText = dateString; 217 | } else { 218 | var h = document.createElement('p'); 219 | var t = document.createTextNode(dateString); 220 | h.appendChild(t); 221 | h.setAttribute('aria-label', dateString); 222 | times[n] = h; 223 | } 224 | } else { 225 | times[n].textContent = dateString; 226 | } 227 | } 228 | var op = ''; 229 | if (parseLinks) { 230 | if (targetBlank) { 231 | targetLinksToNewWindow(tweets[n]); 232 | if (printUser) { 233 | targetLinksToNewWindow(authors[n]); 234 | } 235 | } 236 | if (printUser) { 237 | op += '
' + strip(authors[n].innerHTML) + 238 | '
'; 239 | } 240 | op += '

' + strip(tweets[n].innerHTML) + '

'; 241 | if (printTime) { 242 | op += '

' + 243 | times[n].getAttribute('aria-label') + '

'; 244 | } 245 | } else { 246 | if (tweets[n].innerText) { 247 | if (printUser) { 248 | op += '

' + authors[n].innerText + '

'; 249 | } 250 | op += '

' + tweets[n].innerText + '

'; 251 | if (printTime) { 252 | op += '

' + times[n].innerText + '

'; 253 | } 254 | 255 | } else { 256 | if (printUser) { 257 | op += '

' + authors[n].textContent + '

'; 258 | } 259 | op += '

' + tweets[n].textContent + '

'; 260 | if (printTime) { 261 | op += '

' + times[n].textContent + '

'; 262 | } 263 | } 264 | } 265 | if (showInteractionLinks) { 266 | op += '

' + 270 | '

'; 272 | } 273 | 274 | if (showImages && images[n] !== undefined) { 275 | op += '
' + 276 | 'Image from tweet' + 277 | '
'; 278 | } 279 | 280 | arrayTweets.push(op); 281 | n++; 282 | } 283 | handleTweets(arrayTweets); 284 | inProgress = false; 285 | 286 | if (queue.length > 0) { 287 | twitterFetcher.fetch(queue[0]); 288 | queue.splice(0,1); 289 | } 290 | } 291 | }; 292 | }(); 293 | -------------------------------------------------------------------------------- /src/sass/_animations.scss: -------------------------------------------------------------------------------- 1 | body.author { 2 | margin:0; 3 | padding:0; 4 | background-color: #e91e63; 5 | } 6 | 7 | /*.m-header { 8 | padding: 8.5em 8.5em 4.25em; 9 | position: relative; 10 | }*/ 11 | 12 | /*.m-page { 13 | background-color: #eceff1; 14 | color: #263238; 15 | padding:30px 30px 900px; 16 | }*/ 17 | 18 | /*.m-detail-layout { 19 | padding-left: 270px; 20 | }*/ 21 | 22 | /*.m-detail-layout .m-aside { 23 | position: absolute; 24 | left: 0; 25 | width: 270px; 26 | background-color: #e91e63; 27 | }*/ 28 | 29 | 30 | /* 31 | * Keyframes 32 | */ 33 | 34 | @-webkit-keyframes fadeIn { 35 | 0% {opacity: 0;} 36 | 100% {opacity: 1;} 37 | } 38 | 39 | @keyframes fadeIn { 40 | 0% {opacity: 0;} 41 | 100% {opacity: 1;} 42 | } 43 | 44 | @-webkit-keyframes fadeInUp { 45 | 0% { 46 | opacity: 0; 47 | -webkit-transform: translate3d(0, 100%, 0); 48 | transform: translate3d(0, 100%, 0); 49 | } 50 | 51 | 100% { 52 | opacity: 1; 53 | -webkit-transform: none; 54 | transform: none; 55 | } 56 | } 57 | 58 | @keyframes fadeInUp { 59 | 0% { 60 | opacity: 0; 61 | -webkit-transform: translate3d(0, 100%, 0); 62 | -ms-transform: translate3d(0, 100%, 0); 63 | transform: translate3d(0, 100%, 0); 64 | } 65 | 66 | 100% { 67 | opacity: 1; 68 | -webkit-transform: none; 69 | -ms-transform: none; 70 | transform: none; } 71 | } 72 | 73 | 74 | @-webkit-keyframes fadeInRight { 75 | 0% { 76 | opacity: 0; 77 | -webkit-transform: translate3d(100%, 0, 0); 78 | transform: translate3d(100%, 0, 0); 79 | } 80 | 81 | 100% { 82 | opacity: 1; 83 | -webkit-transform: none; 84 | transform: none; 85 | } 86 | } 87 | 88 | @keyframes fadeInRight { 89 | 0% { 90 | opacity: 0; 91 | -webkit-transform: translate3d(100%, 0, 0); 92 | -ms-transform: translate3d(100%, 0, 0); 93 | transform: translate3d(100%, 0, 0); 94 | } 95 | 96 | 100% { 97 | opacity: 1; 98 | -webkit-transform: none; 99 | -ms-transform: none; 100 | transform: none; 101 | } 102 | } 103 | 104 | 105 | 106 | /* 107 | * CSS Page Transitions 108 | * Don't forget to add vendor prefixes! 109 | */ 110 | 111 | /** Basic styles for an animated element */ 112 | .m-scene .scene_element { 113 | -webkit-animation-duration: .5s; 114 | animation-duration: .5s; 115 | -webkit-animation-fill-mode: both; 116 | animation-fill-mode: both; 117 | 118 | transition-timing-function: ease-in; 119 | -webkit-transition-timing-function: ease-in; 120 | } 121 | 122 | /** An element that fades in */ 123 | .m-scene .scene_element--fadein { 124 | -webkit-animation-name: fadeIn; 125 | animation-name: fadeIn; 126 | } 127 | 128 | /** An element that fades in and slides up */ 129 | .m-scene .scene_element--fadeinup { 130 | -webkit-animation-name: fadeInUp; 131 | animation-name: fadeInUp; 132 | } 133 | 134 | /** An element that fades in and slides from the right */ 135 | .m-scene .scene_element--fadeinright { 136 | -webkit-animation-name: fadeInRight; 137 | animation-name: fadeInRight; 138 | } 139 | 140 | .m-scene .scene_element--delayed { 141 | -webkit-animation-delay: 0.5s; 142 | animation-delay: 0.5s; 143 | } 144 | 145 | .m-scene.is-exiting .scene_element { 146 | -webkit-animation-direction: alternate-reverse; 147 | animation-direction: alternate-reverse; 148 | } 149 | 150 | .m-scene.is-exiting .scene_element--delayed { 151 | -webkit-animation-delay: 0s; 152 | animation-delay: 0s; 153 | } 154 | 155 | .m-scene.is-exiting .scene_element--noexiting { 156 | -webkit-animation-direction: alternate-reverse; 157 | animation-direction: alternate-reverse; 158 | } 159 | -------------------------------------------------------------------------------- /src/sass/_base.scss: -------------------------------------------------------------------------------- 1 | // —————————————————————————————————————————————————————————————————————————— 2 | // Base: Variables, Mixins & Utilities 3 | // —————————————————————————————————————————————————————————————————————————— 4 | 5 | // —————————————— 6 | // Colors 7 | // —————————————— 8 | 9 | // Hexadecimals 10 | $dark: #1B2126; 11 | $dark-primary: #6C7980; 12 | $dark-secondary: #2E3B4E; 13 | $white: #FFFFFF; 14 | $white-primary: #FAFAFA; 15 | $gray: #E0E0E0; 16 | $gray-primary: #5F6A7D; 17 | $blue-primary: #2586B7; 18 | 19 | // RGB 20 | $dark-rgb: rgb(27, 33, 38); 21 | $dark-primary-rgb: rgb(108, 121, 128); 22 | $dark-secondary-rgb: rgb(46, 59, 78); 23 | $white-rgb: rgb(255, 255, 255); 24 | $white-primary-rgb: rgb(250, 250, 250); 25 | $gray-rgb: rgb(224, 224, 224); 26 | $gray-primary: rgb(95, 106, 125); 27 | $blue-primary: rgb(37, 134, 183); 28 | 29 | // Names 30 | $bg-primary: $dark; 31 | $link-secondary: $dark-primary; 32 | $title-primary: $dark-secondary; 33 | $bg-clean: $white; 34 | $bg-featured: $white-primary; 35 | $border-primary: $gray; 36 | $text-primary: $gray-primary; 37 | $link-primary: $blue-primary; 38 | 39 | 40 | // —————————————————————— 41 | // Mixins 42 | // —————————————————————— 43 | 44 | 45 | // 46 | // Gradient 47 | // 48 | 49 | // Progress Bar 50 | @mixin progressBar($background) { 51 | &::-webkit-progress-bar { 52 | background-color: transparent; 53 | } 54 | 55 | &::-webkit-progress-value { 56 | background-color: $background; 57 | @include transition(all, .2s, 0s, linear); 58 | } 59 | 60 | &::-moz-progress-bar { 61 | background-color: $background; 62 | @include transition(all, .2s, 0s, linear); 63 | } 64 | } 65 | 66 | // Background Images 67 | @mixin path ($rulers...) { 68 | background-image: url("../../src/images/"+$rulers); 69 | } 70 | 71 | @mixin linear-gradient ($angle, $startColor, $endColor) { 72 | background-color: $startColor; 73 | background-image: -webkit-linear-gradient($angle, $startColor, $endColor); 74 | background-image: -moz-linear-gradient($angle, $startColor, $endColor); 75 | background-image: -ms-linear-gradient($angle, $startColor, $endColor); 76 | background-image: -o-linear-gradient($angle, $startColor, $endColor); 77 | background-image: linear-gradient($angle, $startColor, $endColor); 78 | } 79 | 80 | @mixin linear-gradient-control($angle, $colour, $position, $colour2, $position2) { 81 | background-color: $colour; 82 | background-image: -webkit-linear-gradient($angle, $colour $position, $colour2 $position2); 83 | background-image: -moz-linear-gradient($angle, $colour $position, $colour2 $position2); 84 | background-image: -ms-linear-gradient($angle, $colour $position, $colour2 $position2); 85 | background-image: -o-linear-gradient($angle, $colour $position, $colour2 $position2); 86 | background-image: linear-gradient($angle, $colour $position, $colour2 $position2); 87 | } 88 | 89 | // Text Truncate 90 | @mixin truncate { 91 | white-space: pre-line; 92 | overflow: hidden; 93 | text-overflow: ellipsis; 94 | } 95 | 96 | // Transition 97 | @mixin transition($property, $time, $method, $delay){ 98 | -webkit-transition: $property $time $method $delay; 99 | -moz-transition: $property $time $method $delay; 100 | -ms-transition: $property $time $method $delay; 101 | -o-transition: $property $time $method $delay; 102 | transition: $property $time $method $delay; 103 | } 104 | 105 | // Border-Radius 106 | @mixin bdr($radius) { 107 | -webkit-border-radius: $radius; 108 | -moz-border-radius: $radius; 109 | -ms-border-radius: $radius; 110 | -o-border-radius: $radius; 111 | border-radius: $radius; 112 | } 113 | 114 | // 115 | // Shadow 116 | // 117 | 118 | // box-shadow 119 | @mixin bsd($x, $y, $blur, $color) { 120 | -webkit-box-shadow: $x $y $color; 121 | -moz-box-shadow: $x $y $color; 122 | -ms-box-shadow: $x $y $color; 123 | -o-box-shadow: $x $y $color; 124 | box-shadow: $x $y $color; 125 | } 126 | 127 | @mixin bsd-multiples($rulers...) { 128 | -webkit-box-shadow: $rulers; 129 | -moz-box-shadow: $rulers; 130 | -ms-box-shadow: $rulers; 131 | -o-box-shadow: $rulers; 132 | box-shadow: $rulers; 133 | } 134 | 135 | // text-shadow 136 | @mixin tsd($x, $y, $blur, $color) { 137 | -webkit-text-shadow: $x $y $blur $color; 138 | -moz-text-shadow: $x $y $blur $color; 139 | -ms-text-shadow: $x $y $blur $color; 140 | -o-text-shadow: $x $y $blur $color; 141 | text-shadow: $x $y $blur $color; 142 | } 143 | 144 | // 145 | // Translate 146 | // 147 | 148 | // translateY 149 | @mixin translateY($value) { 150 | -webkit-transform: translateY($value); 151 | -moz-transform: translateY($value); 152 | -ms-transform: translateY($value); 153 | -o-transform: translateY($value); 154 | transform: translateY($value); 155 | } 156 | 157 | // translateX 158 | @mixin translateX($value) { 159 | -webkit-transform: translateX($value); 160 | -moz-transform: translateX($value); 161 | -ms-transform: translateX($value); 162 | -o-transform: translateX($value); 163 | transform: translateX($value); 164 | } 165 | 166 | // translate3d 167 | @mixin translate3d($valueX, $valueY, $valueZ) { 168 | -webkit-transform: translate3d($valueX, $valueY, $valueZ); 169 | -moz-transform: translate3d($valueX, $valueY, $valueZ); 170 | -ms-transform: translate3d($valueX, $valueY, $valueZ); 171 | -o-transform: translate3d($valueX, $valueY, $valueZ); 172 | transform: translate3d($valueX, $valueY, $valueZ); 173 | } 174 | 175 | // skew 176 | @mixin skew($value) { 177 | -webkit-transform: skew($value); 178 | -moz-transform: skew($value); 179 | -ms-transform: skew($value); 180 | -o-transform: skew($value); 181 | transform: skew($value); 182 | } 183 | 184 | // rotate 185 | @mixin rotate($value) { 186 | -webkit-transform: rotate($value); 187 | -moz-transform: rotate($value); 188 | -ms-transform: rotate($value); 189 | -o-transform: rotate($value); 190 | transform: rotate($value); 191 | } 192 | 193 | // transform-origin 194 | @mixin origin($value) { 195 | -webkit-transform-origin: $value; 196 | -moz-transform-origin: $value; 197 | -ms-transform-origin: $value; 198 | -o-transform-origin: $value; 199 | transform-origin: $value; 200 | } 201 | 202 | // scale 203 | @mixin scale3d($scaleX, $scaleY, $scaleZ) { 204 | -webkit-transform: scale($scaleX, $scaleY, $scaleZ); 205 | -moz-transform: scale($scaleX, $scaleY, $scaleZ); 206 | -ms-transform: scale($scaleX, $scaleY, $scaleZ); 207 | -o-transform: scale($scaleX, $scaleY, $scaleZ); 208 | transform: scale($scaleX, $scaleY, $scaleZ); 209 | } 210 | 211 | // animation 212 | @mixin animation($rulers...){ 213 | -webkit-animation: $rulers; 214 | -moz-animation: $rulers; 215 | -ms-animation: $rulers; 216 | -o-animation: $rulers; 217 | animation: $rulers; 218 | } 219 | 220 | // appearance 221 | @mixin apr($value) { 222 | -webkit-appearance: $value; 223 | -moz-appearance: $value; 224 | -ms-appearance: $value; 225 | -o-appearance: $value; 226 | appearance: $value; 227 | } 228 | 229 | 230 | // 231 | // Organizes 232 | // 233 | 234 | @mixin organizers ($type) { 235 | display: inline-block; 236 | width: 20px; 237 | height: 20px; 238 | margin-right: 10px; 239 | vertical-align: middle; 240 | background-repeat: no-repeat; 241 | background-size: 20px 20px; 242 | 243 | @if $type == 'facebook' { 244 | @include path('icon-facebook.svg'); 245 | } 246 | @else if $type == 'twitter' { 247 | @include path('icon-twitter.svg'); 248 | } 249 | @else if $type == 'github' { 250 | @include path('icon-github.svg'); 251 | } 252 | } 253 | -------------------------------------------------------------------------------- /src/sass/_form.scss: -------------------------------------------------------------------------------- 1 | // ————————————————————————— 2 | // Forms 3 | // ————————————————————————— 4 | 5 | ::-webkit-input-placeholder { color: $gray-primary; } 6 | 7 | :-moz-placeholder { color: $gray-primary; } 8 | 9 | ::-moz-placeholder { color: $gray-primary; } 10 | 11 | :-ms-input-placeholder { color: $gray-primary; } 12 | 13 | %input-state { 14 | outline: none; 15 | border: 1px solid $link-primary; 16 | } 17 | 18 | textarea { 19 | resize: vertical; 20 | min-height: 65px; 21 | } 22 | 23 | input, 24 | textarea { 25 | font-family: $ff-primary; 26 | @include transition(border, .2s, 0s, linear); 27 | 28 | &:active { @extend %input-state; } 29 | &:focus { @extend %input-state; } 30 | } 31 | 32 | .btn-primary { 33 | text-transform: uppercase; 34 | padding: 5px 20px; 35 | text-align: center; 36 | border: none; 37 | margin: 0 auto; 38 | color: $bg-clean; 39 | background-color: $link-primary; 40 | font-size: ($fs-extra-small)-.2; 41 | font-family: $ff-primary; 42 | display: block; 43 | @include bdr(4px); 44 | cursor: pointer; 45 | @include transition(background, .2s, 0s, ease); 46 | 47 | &:hover { background-color: $title-primary; } 48 | } 49 | 50 | .input-primary { 51 | height: 40px; 52 | padding: 5px 10px; 53 | margin-bottom: 10px; 54 | outline: none; 55 | border: 1px solid $border-primary; 56 | font-size: ($fs-extra-small)-.2; 57 | @include bdr(5px); 58 | 59 | &.small { width: 30%; } 60 | &.medium { width: 50%; } 61 | &.big { width: 100%; } 62 | } 63 | 64 | 65 | 66 | // iPad 67 | @media (min-width: 768px) {} 68 | 69 | // Desktop 70 | @media (min-width: 992px) {} 71 | -------------------------------------------------------------------------------- /src/sass/_general.scss: -------------------------------------------------------------------------------- 1 | // ————————————————————————— 2 | // General 3 | // ————————————————————————— 4 | 5 | body { 6 | font-size: $fs-root; 7 | background-color: transparent; 8 | 9 | &.js-offline { 10 | 11 | &::after { 12 | content: attr(data-status); 13 | width: 100%; 14 | height: 100%; 15 | padding-top: 10%; 16 | top: 0; 17 | left: 0; 18 | text-align: center; 19 | color: $bg-featured; 20 | font-size: $fs-small; 21 | line-height: $fs-small; 22 | font-family: $ff-primary; 23 | background-color: rgba(0,0,0,.8); 24 | position: absolute; 25 | overflow: hidden; 26 | z-index: 99; 27 | } 28 | } 29 | } 30 | 31 | ::-moz-selection { 32 | background: $bg-featured; 33 | color: $link-primary; 34 | text-shadow: none; 35 | } 36 | 37 | ::selection { 38 | background: $bg-featured; 39 | color: $link-primary; 40 | text-shadow: none; 41 | } 42 | 43 | // 44 | // Components 45 | // 46 | progress { 47 | z-index: 9999; 48 | position: fixed; 49 | left: 0; 50 | top: 0; 51 | width: 100%; 52 | height: 8px; 53 | border: none; 54 | background-color: transparent; 55 | @include apr(none); 56 | @include transition(all, .2s, 0s, linear); 57 | @include bsd-multiples(0 1px 11px rgba(0,0,0,0.7)); 58 | @include progressBar($blue-primary); 59 | } 60 | 61 | // 62 | // Structure 63 | // 64 | 65 | .header-primary { 66 | width: 100%; 67 | height: 385px; 68 | position: relative; 69 | padding-top: 20px; 70 | background-color: $bg-primary; 71 | } 72 | 73 | .main { 74 | width: 100%; 75 | min-height: 800px; 76 | display: block; 77 | background-color: $bg-clean; 78 | } 79 | 80 | .logo { 81 | font-family: $ff-project; 82 | font-size: ($fs-extra-large)+2; 83 | color: $bg-featured; 84 | text-align: center; 85 | height: 250px; 86 | line-height: 320px; 87 | } 88 | 89 | // footer 90 | .footer-primary { 91 | position: relative; 92 | width: 100%; 93 | min-height: 245px; 94 | text-align: center; 95 | background-color: $bg-primary; 96 | 97 | p { 98 | color: $bg-featured; 99 | font-size: ($fs-extra-small)-.2; 100 | font-family: $ff-primary; 101 | display: inline-block; 102 | top: 90px; 103 | position: relative; 104 | 105 | &.copyright { 106 | width: 100%; 107 | height: 30px; 108 | } 109 | } 110 | } 111 | 112 | .social-item { 113 | width: 280px; 114 | border: 1px solid $bg-featured; 115 | height: 45px; 116 | display: inline-block; 117 | margin: 70px 10px 0 0; 118 | } 119 | 120 | .social-link { 121 | line-height: 45px; 122 | display: block; 123 | text-decoration: none; 124 | text-transform: uppercase; 125 | color: $border-primary; 126 | font-family: $ff-general; 127 | font-size: ($fs-extra-small)-.2; 128 | @include transition(all, .2s, 0s, ease-out); 129 | 130 | &:hover { 131 | background-color: $border-primary; 132 | color: $bg-primary; 133 | } 134 | } 135 | 136 | .back-top { 137 | width: 50px; 138 | height: 50px; 139 | position: absolute; 140 | right: 20px; 141 | top: 120px; 142 | z-index: 10; 143 | display: block; 144 | text-indent: -9999px; 145 | overflow: hidden; 146 | opacity: 0; 147 | @include rotate(-90deg); 148 | @include bdr(4px); 149 | 150 | background-color: $border-primary; 151 | background-repeat: no-repeat; 152 | background-position: center center; 153 | background-size: 40px 40px; 154 | @include path('icon-arrow.svg'); 155 | 156 | @include transition(opacity, .2s, 0s, linear); 157 | 158 | &.js-show { opacity: 1; } 159 | 160 | &:hover { opacity: .5; } 161 | } 162 | // === 163 | 164 | // nav 165 | .nav-primary { 166 | height: 60px; 167 | width: 100%; 168 | margin-top: 75px; 169 | text-align: center; 170 | border-bottom: 1px solid $border-primary; 171 | background-color: $bg-featured; 172 | 173 | &.js-nav-active { 174 | position: fixed; 175 | top: -76px; 176 | z-index: 901; 177 | } 178 | } 179 | 180 | .nav-item { 181 | display: inline-block; 182 | 183 | &.js-nav-active { 184 | background-color: $link-primary; 185 | 186 | .nav-link { color: $bg-clean; } 187 | } 188 | } 189 | 190 | .nav-link { 191 | display: block; 192 | text-decoration: none; 193 | text-transform: uppercase; 194 | line-height: 60px; 195 | margin: 0 20px; 196 | font-family: $ff-primary; 197 | color: $link-secondary; 198 | font-size: ($fs-extra-small)-.2; 199 | @include transition(color, .2s, 0s, linear); 200 | 201 | &:hover { color: $link-primary; } 202 | } 203 | // === 204 | 205 | .fork-github { 206 | img { 207 | z-index: 10; 208 | position: absolute; 209 | top: 0; 210 | right: 0; 211 | border: 0; 212 | } 213 | } 214 | 215 | %width-fixed { width: 80%; } 216 | 217 | .section { 218 | margin: 20px auto 0 auto; 219 | text-align: center; 220 | padding: 70px 0 20px 0; 221 | 222 | &.home { @extend %width-fixed; } 223 | &.about {@extend %width-fixed; } 224 | } 225 | 226 | .section-title { 227 | font-family: $ff-title; 228 | font-size: $fs-small; 229 | color: $title-primary; 230 | text-transform: none; 231 | } 232 | 233 | .section-description { 234 | line-height: $fs-small; 235 | font-size: ($fs-extra-small)-.2; 236 | color: $text-primary; 237 | font-family: $ff-general; 238 | width: 50%; 239 | margin: 20px auto; 240 | } 241 | 242 | .link { 243 | text-decoration: none; 244 | display: block; 245 | font-size: ($fs-extra-small)-.2; 246 | color: $link-primary; 247 | font-family: $ff-general; 248 | 249 | &.external { margin-top: 20px; } 250 | } 251 | 252 | // post 253 | .post { 254 | background-color: $border-primary; 255 | margin-top: 30px; 256 | padding: 20px 0; 257 | 258 | &.new { 259 | background-color: $link-primary; 260 | 261 | h3 { color: $bg-clean; } 262 | p { color: $bg-clean; } 263 | } 264 | } 265 | 266 | .post-content { 267 | display: inline-block; 268 | vertical-align: middle; 269 | width: 46%; 270 | margin: 10px; 271 | text-align: left; 272 | 273 | h3 { 274 | font-family: $ff-general; 275 | text-transform: uppercase; 276 | font-size: $fs-extra-small; 277 | color: $text-primary; 278 | } 279 | 280 | p { 281 | font-family: $ff-primary; 282 | font-size: ($fs-extra-small)-.2; 283 | margin: 10px 0; 284 | line-height: $fs-small; 285 | } 286 | } 287 | 288 | .post-image { 289 | display: inline-block; 290 | vertical-align: middle; 291 | position: relative; 292 | overflow: hidden; 293 | height: 202px; 294 | 295 | img { @include transition(transform, .2s, 0s, ease-out); } 296 | 297 | figcaption { 298 | width: 100%; 299 | padding: 20px 0; 300 | position: absolute; 301 | bottom: -60px; 302 | text-transform: uppercase; 303 | color: $bg-primary; 304 | background-color: $bg-featured; 305 | text-align: center; 306 | font-family: $ff-primary; 307 | font-size: ($fs-extra-small)-.2; 308 | @include transition(bottom, .2s, 0s, ease-out); 309 | } 310 | 311 | &:hover { 312 | figcaption { bottom: 0; } 313 | 314 | img { 315 | @include translate3d(0, -40px, 0); 316 | -webkit-filter: url(#svg-blur); 317 | -o-filter: url(#svg-blur); 318 | filter: url(#svg-blur); 319 | } 320 | } 321 | } 322 | 323 | #svg-filter { display: none; } 324 | // === 325 | 326 | // Modal 327 | .content-modal { 328 | display: none; 329 | 330 | p { width: 100%; } 331 | } 332 | // === 333 | 334 | 335 | // 336 | // Social 337 | // 338 | 339 | .social { 340 | text-align: center; 341 | 342 | h2 { 343 | text-transform: uppercase; 344 | padding-bottom: 6px; 345 | border-bottom: 1px solid $border-primary; 346 | display: inline-block; 347 | } 348 | } 349 | 350 | .feeds { 351 | width: 100%; 352 | min-height: 280px; 353 | display: block; 354 | margin: 30px auto; 355 | 356 | &.instagram { 357 | border-top: 1px solid $border-primary; 358 | border-bottom: 1px solid $border-primary; 359 | background-color: $bg-featured; 360 | padding: 30px 0; 361 | } 362 | 363 | li { 364 | display: inline-block; 365 | position: relative; 366 | } 367 | } 368 | 369 | // instagram 370 | .feeds-instagram-item { 371 | margin: 2px; 372 | border: 1px solid $bg-primary; 373 | } 374 | 375 | .feeds-instagram-link { 376 | text-decoration: none; 377 | 378 | &:hover { 379 | .feeds-instagram-like { height: 25%; } 380 | } 381 | } 382 | 383 | .feeds-instagram-image { 384 | overflow: hidden; 385 | width: 150px; 386 | height: 150px; 387 | position: relative; 388 | } 389 | 390 | .feeds-instagram-like { 391 | position: absolute; 392 | text-align: center; 393 | display: block; 394 | bottom: 0; 395 | width: 100%; 396 | height: 0%; 397 | line-height: 40px; 398 | color: $bg-primary; 399 | font-family: $ff-general; 400 | font-size: $fs-small; 401 | background-color: rgba(255, 255, 255, .7); 402 | @include transition(height, .2s, 0s, linear); 403 | 404 | &::before { 405 | content: ''; 406 | width: 30px; 407 | height: 30px; 408 | position: absolute; 409 | top: 3px; 410 | left: 10px; 411 | background-repeat: no-repeat; 412 | background-size: 30px 30px; 413 | @include path('heart.svg'); 414 | @include bdr(100%); 415 | } 416 | } 417 | // === 418 | 419 | // twitter 420 | .feeds-twitter-item { 421 | width: 240px; 422 | height: auto; 423 | position: relative; 424 | min-height: 130px; 425 | background-color: $border-primary; 426 | margin: 0 30px 100px 0; 427 | @include transition(background, .2s, 0s, ease-out); 428 | 429 | &::before { 430 | content: ''; 431 | position: absolute; 432 | right: 80%; 433 | bottom: -15px; 434 | width: 0; 435 | height: 0; 436 | border-top: 14px solid transparent; 437 | border-right: 26px solid $border-primary; 438 | border-bottom: 13px solid transparent; 439 | @include rotate(10deg); 440 | } 441 | 442 | &:hover { 443 | background-color: $text-primary; 444 | 445 | &::before { border-right: 26px solid $text-primary; } 446 | 447 | .tweet a { color: $bg-featured; } 448 | 449 | p { color: $bg-featured; } 450 | } 451 | 452 | .user { 453 | position: absolute; 454 | bottom: -70px; 455 | left: 53px; 456 | 457 | img { 458 | width: 48px; 459 | height: 48px; 460 | display: inline-block; 461 | @include bdr(100%); 462 | } 463 | 464 | a { 465 | text-decoration: none; 466 | color: $link-primary; 467 | } 468 | 469 | span { 470 | display: none; 471 | 472 | &[data-scribe="element:screen_name"] { 473 | font-size: ($fs-extra-small)-.4; 474 | font-family: $ff-general; 475 | vertical-align: top; 476 | line-height: 50px; 477 | margin-left: 10px; 478 | display: inline-block; 479 | } 480 | } 481 | } 482 | 483 | p { 484 | font-size: ($fs-extra-small)-.4; 485 | line-height: $fs-small; 486 | font-family: $ff-general; 487 | color: $bg-primary; 488 | @include truncate(); 489 | 490 | &.tweet { 491 | padding: 20px; 492 | 493 | a { color: $link-primary; } 494 | } 495 | } 496 | } 497 | // === 498 | 499 | 500 | // 501 | // Contact 502 | // 503 | 504 | .contact { 505 | padding: 70px 0; 506 | border-top: 1px solid $border-primary; 507 | border-bottom: 1px solid $border-primary; 508 | background-color: $bg-featured; 509 | 510 | .content { 511 | @extend %width-fixed; 512 | margin: 0 auto; 513 | } 514 | } 515 | 516 | .contact-form { margin-top: 30px; } 517 | 518 | 519 | // 520 | // Media queries 521 | // 522 | 523 | // iPads 524 | @media (min-width: 768px) {} 525 | 526 | // Desktops 527 | @media (min-width: 992px) {} 528 | 529 | // Large Desktops 530 | @media (min-width: 1200px) {} 531 | -------------------------------------------------------------------------------- /src/sass/_reset.scss: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } 49 | 50 | // Custom 51 | *, 52 | *:before, 53 | *:after { 54 | -webkit-box-sizing: border-box; 55 | -moz-box-sizing: border-box; 56 | box-sizing: border-box; 57 | } 58 | -------------------------------------------------------------------------------- /src/sass/_typography.scss: -------------------------------------------------------------------------------- 1 | // ————————————————————————— 2 | // Typography 3 | // ————————————————————————— 4 | 5 | // Size 6 | $fs-root: 62.5%; 7 | $fs-extra-large: 5.0rem; 8 | $fs-large: 3.2rem; 9 | $fs-extra-medium: 2.5rem; 10 | $fs-medium: 1.8rem; 11 | $fs-small: 1.4rem; 12 | $fs-extra-small: 1.2rem; 13 | 14 | // Family 15 | $ff-general: 'OpenSansRegular'; 16 | $ff-primary: 'OpenSansLight'; 17 | $ff-title: 'OpenSansBold'; 18 | $ff-project: 'sverige_script_decorated_deRg'; 19 | 20 | 21 | // Style 22 | $f-italic: italic; 23 | $f-normal: normal; 24 | 25 | // Weight 26 | $fw-light: 300; 27 | $fw-semi-bold: 600; 28 | 29 | // Custom Font Face 30 | @font-face { 31 | font-family: 'OpenSansLight'; 32 | src: url('../../fonts/OpenSansLight.eot'); 33 | src: url('../../fonts/OpenSansLight.eot') format('embedded-opentype'), 34 | url('../../fonts/OpenSansLight.woff2') format('woff2'), 35 | url('../../fonts/OpenSansLight.woff') format('woff'), 36 | url('../../fonts/OpenSansLight.ttf') format('truetype'), 37 | url('../../fonts/OpenSansLight.svg#OpenSansLight') format('svg'); 38 | } 39 | 40 | @font-face { 41 | font-family: 'OpenSansRegular'; 42 | src: url('../../fonts/OpenSansRegular.eot'); 43 | src: url('../../fonts/OpenSansRegular.eot') format('embedded-opentype'), 44 | url('../../fonts/OpenSansRegular.woff2') format('woff2'), 45 | url('../../fonts/OpenSansRegular.woff') format('woff'), 46 | url('../../fonts/OpenSansRegular.ttf') format('truetype'), 47 | url('../../fonts/OpenSansRegular.svg#OpenSansRegular') format('svg'); 48 | } 49 | 50 | @font-face { 51 | font-family: 'OpenSansBold'; 52 | src: url('../../fonts/OpenSansBold.eot'); 53 | src: url('../../fonts/OpenSansBold.eot') format('embedded-opentype'), 54 | url('../../fonts/OpenSansBold.woff2') format('woff2'), 55 | url('../../fonts/OpenSansBold.woff') format('woff'), 56 | url('../../fonts/OpenSansBold.ttf') format('truetype'), 57 | url('../../fonts/OpenSansBold.svg#OpenSansBold') format('svg'); 58 | } 59 | 60 | @font-face { 61 | font-family: 'sverige_script_decorated_deRg'; 62 | src: url('../../fonts/sverigescriptdecorated_demo-webfont.eot'); 63 | src: url('../../fonts/sverigescriptdecorated_demo-webfont.eot?#iefix') format('embedded-opentype'), 64 | url('../../fonts/sverigescriptdecorated_demo-webfont.woff2') format('woff2'), 65 | url('../../fonts/sverigescriptdecorated_demo-webfont.woff') format('woff'), 66 | url('../../fonts/sverigescriptdecorated_demo-webfont.ttf') format('truetype'), 67 | url('../../fonts/sverigescriptdecorated_demo-webfont.svg#sverige_script_decorated_deRg') format('svg'); 68 | font-weight: normal; 69 | font-style: normal; 70 | } 71 | -------------------------------------------------------------------------------- /src/sass/libs/_fancybox.scss: -------------------------------------------------------------------------------- 1 | /*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */ 2 | .fancybox-wrap, 3 | .fancybox-skin, 4 | .fancybox-outer, 5 | .fancybox-inner, 6 | .fancybox-image, 7 | .fancybox-wrap iframe, 8 | .fancybox-wrap object, 9 | .fancybox-nav, 10 | .fancybox-nav span, 11 | .fancybox-tmp 12 | { 13 | padding: 0; 14 | margin: 0; 15 | border: 0; 16 | outline: none; 17 | vertical-align: top; 18 | } 19 | 20 | .fancybox-wrap { 21 | position: absolute; 22 | top: 0; 23 | left: 0; 24 | z-index: 8020; 25 | } 26 | 27 | .fancybox-skin { 28 | position: relative; 29 | background: #f9f9f9; 30 | color: #444; 31 | text-shadow: none; 32 | -webkit-border-radius: 4px; 33 | -moz-border-radius: 4px; 34 | border-radius: 4px; 35 | } 36 | 37 | .fancybox-opened { 38 | z-index: 8030; 39 | } 40 | 41 | .fancybox-opened .fancybox-skin { 42 | -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); 43 | -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); 44 | box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); 45 | } 46 | 47 | .fancybox-outer, .fancybox-inner { 48 | position: relative; 49 | } 50 | 51 | .fancybox-inner { 52 | overflow: hidden; 53 | } 54 | 55 | .fancybox-type-iframe .fancybox-inner { 56 | -webkit-overflow-scrolling: touch; 57 | } 58 | 59 | .fancybox-error { 60 | color: #444; 61 | font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; 62 | margin: 0; 63 | padding: 15px; 64 | white-space: nowrap; 65 | } 66 | 67 | .fancybox-image, .fancybox-iframe { 68 | display: block; 69 | width: 100%; 70 | height: 100%; 71 | } 72 | 73 | .fancybox-image { 74 | max-width: 100%; 75 | max-height: 100%; 76 | } 77 | 78 | #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { 79 | @include path('modal/fancybox_sprite.png'); 80 | } 81 | 82 | #fancybox-loading { 83 | position: fixed; 84 | top: 50%; 85 | left: 50%; 86 | margin-top: -22px; 87 | margin-left: -22px; 88 | background-position: 0 -108px; 89 | opacity: 0.8; 90 | cursor: pointer; 91 | z-index: 8060; 92 | } 93 | 94 | #fancybox-loading div { 95 | width: 44px; 96 | height: 44px; 97 | @include path('modal/fancybox_loading.gif'); 98 | background-repeat: no-repeat; 99 | background-position: center center; 100 | } 101 | 102 | .fancybox-close { 103 | position: absolute; 104 | top: -18px; 105 | right: -18px; 106 | width: 36px; 107 | height: 36px; 108 | cursor: pointer; 109 | z-index: 8040; 110 | } 111 | 112 | .fancybox-nav { 113 | position: absolute; 114 | top: 0; 115 | width: 40%; 116 | height: 100%; 117 | cursor: pointer; 118 | text-decoration: none; 119 | background-color: transparent; 120 | @include path('modal/blank.gif'); 121 | -webkit-tap-highlight-color: rgba(0,0,0,0); 122 | z-index: 8040; 123 | } 124 | 125 | .fancybox-prev { 126 | left: 0; 127 | } 128 | 129 | .fancybox-next { 130 | right: 0; 131 | } 132 | 133 | .fancybox-nav span { 134 | position: absolute; 135 | top: 50%; 136 | width: 36px; 137 | height: 34px; 138 | margin-top: -18px; 139 | cursor: pointer; 140 | z-index: 8040; 141 | visibility: hidden; 142 | } 143 | 144 | .fancybox-prev span { 145 | left: 10px; 146 | background-position: 0 -36px; 147 | } 148 | 149 | .fancybox-next span { 150 | right: 10px; 151 | background-position: 0 -72px; 152 | } 153 | 154 | .fancybox-nav:hover span { 155 | visibility: visible; 156 | } 157 | 158 | .fancybox-tmp { 159 | position: absolute; 160 | top: -99999px; 161 | left: -99999px; 162 | visibility: hidden; 163 | max-width: 99999px; 164 | max-height: 99999px; 165 | overflow: visible !important; 166 | } 167 | 168 | /* Overlay helper */ 169 | 170 | .fancybox-lock { 171 | overflow: hidden !important; 172 | width: auto; 173 | } 174 | 175 | .fancybox-lock body { 176 | overflow: hidden !important; 177 | } 178 | 179 | .fancybox-lock-test { 180 | overflow-y: hidden !important; 181 | } 182 | 183 | .fancybox-overlay { 184 | position: absolute; 185 | top: 0; 186 | left: 0; 187 | overflow: hidden; 188 | display: none; 189 | z-index: 8010; 190 | @include path('modal/fancybox_overlay.png'); 191 | } 192 | 193 | .fancybox-overlay-fixed { 194 | position: fixed; 195 | bottom: 0; 196 | right: 0; 197 | } 198 | 199 | .fancybox-lock .fancybox-overlay { 200 | overflow: auto; 201 | overflow-y: scroll; 202 | } 203 | 204 | /* Title helper */ 205 | 206 | .fancybox-title { 207 | visibility: hidden; 208 | font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; 209 | position: relative; 210 | text-shadow: none; 211 | z-index: 8050; 212 | } 213 | 214 | .fancybox-opened .fancybox-title { 215 | visibility: visible; 216 | } 217 | 218 | .fancybox-title-float-wrap { 219 | position: absolute; 220 | bottom: 0; 221 | right: 50%; 222 | margin-bottom: -35px; 223 | z-index: 8050; 224 | text-align: center; 225 | } 226 | 227 | .fancybox-title-float-wrap .child { 228 | display: inline-block; 229 | margin-right: -100%; 230 | padding: 2px 20px; 231 | background: transparent; /* Fallback for web browsers that doesn't support RGBa */ 232 | background: rgba(0, 0, 0, 0.8); 233 | -webkit-border-radius: 15px; 234 | -moz-border-radius: 15px; 235 | border-radius: 15px; 236 | text-shadow: 0 1px 2px #222; 237 | color: #FFF; 238 | font-weight: bold; 239 | line-height: 24px; 240 | white-space: nowrap; 241 | } 242 | 243 | .fancybox-title-outside-wrap { 244 | position: relative; 245 | margin-top: 10px; 246 | color: #fff; 247 | } 248 | 249 | .fancybox-title-inside-wrap { 250 | padding-top: 10px; 251 | } 252 | 253 | .fancybox-title-over-wrap { 254 | position: absolute; 255 | bottom: 0; 256 | left: 0; 257 | color: #fff; 258 | padding: 10px; 259 | background: #000; 260 | background: rgba(0, 0, 0, .8); 261 | } 262 | 263 | /*Retina graphics!*/ 264 | @media only screen and (-webkit-min-device-pixel-ratio: 1.5), 265 | only screen and (min--moz-device-pixel-ratio: 1.5), 266 | only screen and (min-device-pixel-ratio: 1.5){ 267 | 268 | #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { 269 | @include path('modal/fancybox_sprite@2x.png'); 270 | background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/ 271 | } 272 | 273 | #fancybox-loading div { 274 | @include path('modal/fancybox_loading@2x.gif'); 275 | background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/ 276 | } 277 | } 278 | -------------------------------------------------------------------------------- /src/sass/libs/_slick.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Slide 3 | // 4 | 5 | .slide-primary { 6 | overflow: hidden; 7 | position: relative; 8 | } 9 | 10 | .slide-image { 11 | display: inline-block; 12 | 13 | &:focus { 14 | outline: none; 15 | border: none; 16 | } 17 | 18 | img { max-width: 100%; } 19 | } 20 | 21 | .slick-dots { 22 | li { 23 | display: inline-block; 24 | margin: 5px; 25 | 26 | &.slick-active { background-color: black; } 27 | } 28 | } 29 | 30 | .slick-prev, 31 | .slick-next { 32 | position: absolute; 33 | top: 50%; 34 | z-index: 910; 35 | } 36 | 37 | .slick-prev { left: 0; } 38 | 39 | .slick-next { right: 0; } 40 | // === 41 | -------------------------------------------------------------------------------- /src/sass/main.scss: -------------------------------------------------------------------------------- 1 | // Reset 2 | @import '_reset'; 3 | 4 | // Custom 5 | @import '_typography'; 6 | @import '_base'; 7 | @import '_form'; 8 | 9 | // General styles 10 | @import '_general'; 11 | 12 | // Libs 13 | @import 'libs/_slick'; 14 | @import 'libs/_fancybox'; 15 | 16 | // Page Transition 17 | @import '_animations'; 18 | -------------------------------------------------------------------------------- /touch-icon-ipad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thulioph/catrina/957711455c3019c62a4098b5d94a8e1ccd92389e/touch-icon-ipad.png -------------------------------------------------------------------------------- /touch-icon-ipad@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thulioph/catrina/957711455c3019c62a4098b5d94a8e1ccd92389e/touch-icon-ipad@2x.png -------------------------------------------------------------------------------- /touch-icon@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thulioph/catrina/957711455c3019c62a4098b5d94a8e1ccd92389e/touch-icon@2x.png --------------------------------------------------------------------------------