From 6bbb9853441de384b394d821be42f90ece34746a Mon Sep 17 00:00:00 2001 From: hyperbola Date: Tue, 19 Jan 2021 21:14:32 +0800 Subject: [PATCH] Fix first paragraph in intro --- src/assets/scss/CFP/intro.scss | 167 +++++++++++++----- src/assets/scss/main.scss | 7 +- src/assets/scss/util.scss | 27 +++ src/components/CFP/Intro.vue | 297 +++++++++++++++++---------------- 4 files changed, 310 insertions(+), 188 deletions(-) diff --git a/src/assets/scss/CFP/intro.scss b/src/assets/scss/CFP/intro.scss index 87963d4..c3fd03a 100644 --- a/src/assets/scss/CFP/intro.scss +++ b/src/assets/scss/CFP/intro.scss @@ -10,11 +10,12 @@ $buttonHoverColor: #ffffff; @mixin hyperlinkFont() { text-decoration: underline; } + // font size -$h1FontSize: 30px; -$h2FontSize: 24px; -$h3FontSize: 16px; -$contextFontSize: 13px; +$h1FontSize: 42pt; +$h2FontSize: 27pt; +$h3FontSize: 20pt; +// $contextFontSize: 13px; $buttonFontSize: 24px; $mh1FontSize: 26px; @@ -36,6 +37,16 @@ $hyperlinkLetterSpace: 0; $buttonHoverBg: #226bb4; #cfp { + h1, + h2, + h3 { + margin-bottom: 2em; + } + + p { + line-height: 2; + } + .introduction-container { overflow-x: hidden; overflow-y: hidden; @@ -62,24 +73,24 @@ $buttonHoverBg: #226bb4; .about-section { // font - font-size: $contextFontSize; + // font-size: $contextFontSize; letter-spacing: $contextLetterSpace; - line-height: 42px; + //line-height: 42px; width: 90%; @media screen and(max-width: 414px) { - font-size: $mcontextFontSize; + // font-size: $mcontextFontSize; width: 160%; } } .discuss-section { - font-size: $contextFontSize; + // font-size: $contextFontSize; letter-spacing: $contextLetterSpace; - line-height: 42px; + // line-height: 42px; @media screen and(max-width: 414px) { - font-size: $mcontextFontSize; + // font-size: $mcontextFontSize; width: 80%; } } @@ -88,9 +99,9 @@ $buttonHoverBg: #226bb4; // size margin-top: 130px; // font - font-size: $contextFontSize; + // font-size: $contextFontSize; letter-spacing: $contextLetterSpace; - line-height: 42px; + // line-height: 42px; width: 1100px; @@ -105,9 +116,9 @@ $buttonHoverBg: #226bb4; margin-top: 70px; height: 325px; // font - font-size: $contextFontSize; + // font-size: $contextFontSize; letter-spacing: $contextLetterSpace; - line-height: 42px; + // line-height: 42px; @media screen and(max-width: 414px) { margin-top: 30%; @@ -122,7 +133,7 @@ $buttonHoverBg: #226bb4; font-size: $buttonFontSize; font-weight: 900; letter-spacing: $buttonLetterSpace; - line-height: 30px; + // line-height: 30px; // size margin-right: 37px; padding: 12px 15px 12px 15px; @@ -184,12 +195,12 @@ $buttonHoverBg: #226bb4; margin-right: 35px; // align vertical-align: bottom; - line-height: 30px; + // line-height: 16pt; @media screen and(max-width:414px) { - font-size: 30px; + font-size: 16pt; margin-right: 10px; - line-height: 50px; + //line-height: 1.5; vertical-align: middle; } } @@ -208,14 +219,14 @@ $buttonHoverBg: #226bb4; h1 { // font font-size: $h1FontSize; - line-height: 70px; + //@function: 70px; font-weight: 900; letter-spacing: $titleLetterSpace; .enlarge { font-size: $enlargeFontSize; @media screen and (max-width: 414px) { - line-height: 80px; + // line-height: 80px; } } @@ -224,7 +235,7 @@ $buttonHoverBg: #226bb4; } @media screen and (max-width: 414px) { - line-height: 20px; + // line-height: 20px; } } @@ -239,20 +250,20 @@ $buttonHoverBg: #226bb4; h2 { // font - font-size: $h2FontSize; + // font-size: $h2FontSize; letter-spacing: $titleLetterSpace; font-weight: 900; - line-height: 70px; - margin: 0px; + //line-height: 70px; + // margin: 0px; } h3 { // Font - font-size: $h3FontSize; + // font-size: $h3FontSize; letter-spacing: $titleLetterSpace; font-weight: 900; - line-height: 15px; - margin: 0px; + //line-height: 15px; + // margin: 0px; } .about-section > .context { @@ -263,20 +274,22 @@ $buttonHoverBg: #226bb4; margin-right: 30%; } + /* .context { // font - font-size: $contextFontSize; + // font-size: $contextFontSize; line-height: 30px; letter-spacing: $contextLetterSpace; font-weight: normal; } + */ .detail { // display display: inline; // font - font-size: $contextFontSize; - line-height: 20px; + // font-size: $contextFontSize; + // line-height: 20px; letter-spacing: $contextLetterSpace; font-weight: normal; // align @@ -285,17 +298,17 @@ $buttonHoverBg: #226bb4; @media screen and (max-width: 414px) { margin-right: 25%; - line-height: 35px; - font-size: $mcontextFontSize; + //line-height: 35px; + // font-size: $mcontextFontSize; } } .context-span { // font - font-size: $contextFontSize; + // font-size: $contextFontSize; font-weight: 900; letter-spacing: $contextLetterSpace; - line-height: 42px; + //line-height: 42px; } .context-hyperlink { @@ -304,13 +317,13 @@ $buttonHoverBg: #226bb4; letter-spacing: $hyperlinkLetterSpace; color: $light-blue; font-weight: normal; - line-height: 42px; + //line-height: 42px; } p.tag { // font font-size: 14px; - line-height: 15px; + // line-height: 15px; letter-spacing: 0; font-weight: 900; // align @@ -325,7 +338,7 @@ $buttonHoverBg: #226bb4; p.tag.sub { font-size: 12px; - line-height: 10px; + // line-height: 10px; @media screen and (max-width: 414px) { font-size: 12px; @@ -340,7 +353,7 @@ $buttonHoverBg: #226bb4; text-align: center; @media screen and (max-width: 414px) { - line-height: 12px; + // line-height: 12px; font-size: 10px; } } @@ -366,7 +379,7 @@ $buttonHoverBg: #226bb4; .thumbnails { // box - margin-left: -20.5px; + // margin-left: -20.5px; @media screen and (max-width: 414px) { margin-left: -9px; @@ -689,3 +702,79 @@ $buttonHoverBg: #226bb4; } } } + +// General settings: font-size and paragraph spacing +#cfp-intro { + h1, + h2, + h3 { + margin-bottom: 1em; + } + + p:not(:last-child) { + margin-bottom: 1em; + line-height: 1.75; + } + + h1 { + font-size: 42pt; + } + + h2 { + font-size: 26pt; + } + + h3 { + font-size: 22pt; + } +} + +#cfp-intro { + .box-back { + margin-top: -70px; + width: 600px; + + .about-sitcon { + margin-bottom: 1em; + } + + .past-sitcon { + margin-bottom: 1em; + + .thumbnails { + display: flex; + flex-direction: row; + padding: 0.25em 0; + + .thumb-wrapper { + .thumb-title, + .thumb-subtitle { + margin: 0; + font-size: 0.8em; + line-height: 1.75em; + font-weight: 900; + } + + .small { + font-size: 0.6em; + } + + &:not(:last-child) { + margin-right: 1em; + } + } + } + } + + .join-discuss { + .link-group { + margin-top: 1em; + .btn { + &:not(:first-child) { + margin-left: 2em; + } + } + } + } + } +} diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss index e8fe555..36b5127 100644 --- a/src/assets/scss/main.scss +++ b/src/assets/scss/main.scss @@ -23,13 +23,14 @@ body { width: 100vw; + height: 100vh; + position: relative; overflow-x: hidden; + display: flex; flex-direction: column; - height: 100vh; - font-size: 14pt; - margin:0; + font-size: 13pt; } #app { diff --git a/src/assets/scss/util.scss b/src/assets/scss/util.scss index 12171cb..61bb2cb 100644 --- a/src/assets/scss/util.scss +++ b/src/assets/scss/util.scss @@ -1,3 +1,5 @@ +@import 'color'; + .text-center { text-align: center; .ignore { @@ -33,3 +35,28 @@ .d-inline-block { display: inline-block; } + +.btn { + display: inline-block; + padding: 0.85em 1.25em; + + font-size: 1.1em; + font-weight: 900; + border: none; + border-radius: 8px; + + &.btn-primary { + background-color: #ffffff; + box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56); + transition-duration: 0.2s; + color: $mid-blue; + + &:hover { + // box + background-color: $mid-blue; + box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.19); + // font + color: $white; + } + } +} diff --git a/src/components/CFP/Intro.vue b/src/components/CFP/Intro.vue index 4b30ddf..98900fd 100644 --- a/src/components/CFP/Intro.vue +++ b/src/components/CFP/Intro.vue @@ -1,150 +1,155 @@