From 6a03e4182762d718705c2fcc162aa058ab849d21 Mon Sep 17 00:00:00 2001 From: "Thomas A. Christensen II" <25492070+MillironX@users.noreply.github.com> Date: Fri, 27 Sep 2019 19:56:35 -0700 Subject: [PATCH] Make page headings size correctly --- _layouts/default.html | 5 +- css/grand-hotel.css | 16 -- css/gsdk-demo.css | 12 +- css/gskd-demo.css | 400 ---------------------------------- js/MillironX_CustomScripts.js | 3 +- js/jquery.fittext.js | 43 ++++ 6 files changed, 55 insertions(+), 424 deletions(-) delete mode 100644 css/grand-hotel.css delete mode 100644 css/gskd-demo.css create mode 100644 js/jquery.fittext.js diff --git a/_layouts/default.html b/_layouts/default.html index e4c2607..c39425d 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -82,7 +82,7 @@
-

+

{{ page.motto }}

@@ -128,6 +128,9 @@ + + + diff --git a/css/grand-hotel.css b/css/grand-hotel.css deleted file mode 100644 index 1e3e989..0000000 --- a/css/grand-hotel.css +++ /dev/null @@ -1,16 +0,0 @@ -/* latin-ext */ -@font-face { - font-family: 'Grand Hotel'; - font-style: normal; - font-weight: 400; - src: local('Grand Hotel'), local('GrandHotel-Regular'), url(https://fonts.gstatic.com/s/grandhotel/v5/NrGQkrs9rbHm5EYx0Eil0iYE0-AqJ3nfInTTiDXDjU4.woff2) format('woff2'); - unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; -} -/* latin */ -@font-face { - font-family: 'Grand Hotel'; - font-style: normal; - font-weight: 400; - src: local('Grand Hotel'), local('GrandHotel-Regular'), url(https://fonts.gstatic.com/s/grandhotel/v5/NrGQkrs9rbHm5EYx0Eil0o4P5ICox8Kq3LLUNMylGO4.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; -} diff --git a/css/gsdk-demo.css b/css/gsdk-demo.css index a786812..f877280 100644 --- a/css/gsdk-demo.css +++ b/css/gsdk-demo.css @@ -13,7 +13,7 @@ .tim-typo{ padding-left: 25%; margin-bottom: 40px; - position: relative; + position: relative; } .tim-typo .tim-note{ bottom: 10px; @@ -48,7 +48,7 @@ display: block; } .navigation-example .img-src{ - background-attachment: scroll; + background-attachment: scroll; } .main{ background-color: #FFFFFF; @@ -85,7 +85,7 @@ padding-top: 20px; } .subscribe-form .form-control{ - + } .space-100{ @@ -168,7 +168,7 @@ width: 100%; height: 100%; z-index: 0; - + } .parallax-pro:after{ position: absolute; @@ -362,13 +362,13 @@ text-shadow: 0 0 10px rgba(0, 0, 0, 0.33); text-transform: uppercase; /*Modified from the original to suit my sidebar layout*/ - top: 50px; + top: 120px; z-index: 3; display: block; margin: 0 auto; position: relative; - width: 306px; + width: 80%; height: 0; } .blurred-container .motto .border{ diff --git a/css/gskd-demo.css b/css/gskd-demo.css deleted file mode 100644 index a2c3c30..0000000 --- a/css/gskd-demo.css +++ /dev/null @@ -1,400 +0,0 @@ - -.tim-container{ - background: #ffffff; - -} -.tim-row{ - margin-bottom: 20px; -} -.tim-title{ - margin-top: 30px; - margin-bottom: 15px; -} -.tim-typo{ - padding-left: 25%; - margin-bottom: 40px; - position: relative; -} -.tim-typo .tim-note{ - bottom: 10px; - color: #c0c1c2; - display: block; - font-weight: 400; - font-size: 13px; - line-height: 13px; - left: 0; - margin-left: 20px; - position: absolute; - width: 260px; -} -.tim-row{ - margin-top: 50px; -} -.tim-row h3{ - margin-top: 0; -} -.switch{ - margin-right: 20px; -} -#navbar-full .navbar{ - border-radius: 0 !important; - margin-bottom: 0; -} -.navigation-example{ - margin-top: 0px; -} -.space{ - height: 130px; - display: block; -} -.navigation-example .img-src{ - background-attachment: scroll; -} -.main{ - background-color: #FFFFFF; -} -.navigation-example{ - height: 660px; - background-image: url('../img/bg.jpg'); - background-position: center center; - background-size: cover; - position: relative; -} -#notifications{ - background-color: #FFFFFF; - display: block; - width: 100%; - position: relative; -} -.tim-note{ - text-transform: capitalize; -} - -.card{ - background-color: #FFFFFF; - padding: 10px 0 20px; - width: 100%; -} -.card h3{ - margin-bottom: 20px; -} -.card button{ - margin-top: 30px; -} -.subscribe-form{ - padding-top: 20px; -} -.subscribe-form .form-control{ - -} - -.space-100{ - height: 100px; - display: block; - width: 100%; -} - -.be-social{ - padding-bottom: 20px; -/* border-bottom: 1px solid #aaa; */ - margin: 0 auto 40px; -} -.txt-white{ - color: #FFFFFF; -} -.txt-gray{ - color: #ddd !important; -} -.footer{ - background-color: #DDDDDD; - background-image: url('../img/cover_4_blur.jpg'); - background-attachment: fixed; - position: relative; -} -.heart{ - color: #FF3B30; -} -.footer .overlayer{ - background-color: rgba(27, 27, 27, 0.7); - position: relative; -} -.footer .credits { - margin-top: 25px; - padding: 20px 0 15px; - text-align: center; - color: #EEE; -} -.footer .credits a{ - color: #FFFFFF; -} -.social-share{ - float: left; - margin-right: 8px; -} -.social-share a{ - color: #FFFFFF; -} -#subscribe_email{ - border-radius: 0; - border-left: 0; - border-right: 0; -} -.pick-class-label{ - border-radius: 8px; - color: #ffffff; - cursor: pointer; - display: inline; - font-size: 75%; - font-weight: bold; - line-height: 1; - margin-right: 10px; - padding: 15px 23px; - text-align: center; - vertical-align: baseline; - white-space: nowrap; -} - -.parallax-pro{ - width:100%; - display: block; - position: relative; - background-color: #000; -} -.parallax-pro > .img-src{ - background-position: center center; - background-repeat: no-repeat; - background-size: cover; - position: absolute; - width: 100%; - height: 100%; - z-index: 0; - -} -.parallax-pro:after{ - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - background-color: rgba(0,0,0,.3); - display: block; - content: ""; - z-index: 0; -} -.parallax-pro .container{ - padding-top: 20px; - z-index: 1; - position: relative; -} -.parallax-pro .hello a{ - color: #fff; - text-decoration: none; -} -.parallax-pro .hello{ - font-size: 48px; - font-weight: 300; - position: relative; -/* width: 430px; */ - margin: 30px auto 50px; -} -.parallax-pro .label{ - font-size: 18px; - position: absolute; - text-transform: uppercase; - background-color: #FF9500; - color: #FFFFFF; - width: 60px; - margin-top: 10px; - margin-left: 10px; - padding: 0; - line-height: 30px; - text-align: center; - font-weight: 500; - letter-spacing: 0; -} -.parallax-pro small{ - padding-top: 15px; - font-size: 20px; - display: block; - color: #fff; -} -.parallax-pro ul{ - width: 280px; - margin: 0 auto; -} -.parallax-pro li{ - padding: 9px 0; - border-bottom: 1px solid #777; -} -.parallax-pro .actions{ - margin-top: 40px; -} -.parallax-pro .actions{ - margin-left: 10px; -} -.parallax-pro .motto{ - color: #FFFFFF; - font-size: 64px; - font-weight: 600; - position: relative; - text-align: center; - text-shadow: 0 0 10px rgba(0, 0, 0, 0.27); - text-transform: uppercase; - z-index: 3; - margin: 0 auto; - top: 22%; - width: 285px; -} -.parallax-pro .motto .pro{ - position: absolute; - font-size: 18px; - background-color: #FFFFFF; - width: 70px; - height: 70px; - border-radius: 50%; - text-align: center; - line-height: 70px; - color: #333333; - text-shadow: 0 0 0; -} -.parallax-pro .motto .square{ - padding: 7px 14px; - height: auto; - width: auto; - line-height: inherit; - border-radius: 6px; - bottom: 22px; - right: -25px; - color: #FFFFFF; - background-color: #ff9500; - font-weight: 300; - background-color: #ff9500; -} -.social-share{ - margin-right: 0px; - margin-top: 10px; -} -.footer h4{ - margin: 0px 0 20px; -} -.space-30{ - height: 30px; - display: block; -} -.credits{ - display: block; - margin: 15px 0; - color: #ddd; - opacity: .8; -} -.credits a{ - color: #FFFFFF; -} -.sharing-title{ - margin: 10px; - line-height: 40px; -} -.social-line{ - padding: 5px 0; -} -.section-gray{ - padding: 10px 0; - background-color: #EEE; -} -.section-gray h5{ - margin: 0; - line-height: 40px; -} - -/* EXTRA SHIT */ -/* @cristina: fisier singular, folosit pentru efectul de blur la parallax in header */ - -.blurred-container{ - position:relative; - width:100%; - height:540px; - top:0; - left:0; -} -.blurred-container > .img-src{ - position:fixed; - width:100%; - height:540px; - background-repeat:no-repeat; - background-size:cover; - background-position: center center; -} -.blur{ - opacity:0; -} - -.logo-container{ - margin-top: 10px; -} -.logo-container .logo{ - overflow: hidden; - border-radius: 50%; - border: 1px solid #333333; - height: 50px; - width: 50px; - float: left; -} -.logo-container .logo img{ - width: 100%; -} -.logo-container .brand{ - font-size: 18px; - color: #FFFFFF; - float: left; - height: 50px; - line-height: 20px; - margin-left: 10px; - margin-top: 5px; - width: 60px; -} -.blurred-container .motto{ - color: #FFFFFF; - font-size: 76px; - font-weight: 600; - - text-align: center; - text-shadow: 0 0 10px rgba(0, 0, 0, 0.33); - text-transform: uppercase; - top: 100px; - z-index: 3; - - display: block; - margin: 0 auto; - position: relative; - width: 306px; - height: 0; -} -.blurred-container .motto .border{ - float: left; - border: 3px solid #FFFFFF; - padding: 0px 30px; - text-align: center; -} -.blurred-container .motto .no-right-border{ - border-right: none; -} - -@media (max-width: 768px){ - .blurred-container .motto{ - font-size: 60px; - width: 268px; - top: 130px; - } -} -.main{ - background-color: #FFFFFF; - position: relative; -} - -#buttons .btn, #tooltips .btn{ - margin-bottom: 15px; -} -.img-dog{ - display: inline-block; - margin-bottom: 25px; -} \ No newline at end of file diff --git a/js/MillironX_CustomScripts.js b/js/MillironX_CustomScripts.js index c100cd5..7a1b10b 100644 --- a/js/MillironX_CustomScripts.js +++ b/js/MillironX_CustomScripts.js @@ -1,4 +1,5 @@ -$(function () { $('#githubFlair').socialFlair('github', 'millironx', {}); }); +$(function () { $('#githubFlair').socialFlair('github', 'millironx', {}); }); $(".img-src").width($("#main-content").width()); $(window).resize(function () { $(".img-src").width($("#main-content").width()); }); $("#nav-link-container").height($("#nav-link-list").height()); +$("#motto").fitText(); \ No newline at end of file diff --git a/js/jquery.fittext.js b/js/jquery.fittext.js new file mode 100644 index 0000000..0b3ddef --- /dev/null +++ b/js/jquery.fittext.js @@ -0,0 +1,43 @@ +/*global jQuery */ +/*! +* FitText.js 1.2 +* +* Copyright 2011, Dave Rupert http://daverupert.com +* Released under the WTFPL license +* http://sam.zoy.org/wtfpl/ +* +* Date: Thu May 05 14:23:00 2011 -0600 +*/ + +(function( $ ){ + + $.fn.fitText = function( kompressor, options ) { + + // Setup options + var compressor = kompressor || 1, + settings = $.extend({ + 'minFontSize' : Number.NEGATIVE_INFINITY, + 'maxFontSize' : Number.POSITIVE_INFINITY + }, options); + + return this.each(function(){ + + // Store the object + var $this = $(this); + + // Resizer() resizes items based on the object width divided by the compressor * 10 + var resizer = function () { + $this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize))); + }; + + // Call once to set. + resizer(); + + // Call on resize. Opera debounces their resize by default. + $(window).on('resize.fittext orientationchange.fittext', resizer); + + }); + + }; + +})( jQuery );