[Fix] fix ocfp-news page on device
This commit is contained in:
mysper
parent
1cbcff4185
commit
feb066ba42
601
src/assets/scss/ocfp/agenda.scss
Normal file
601
src/assets/scss/ocfp/agenda.scss
Normal file
@ -0,0 +1,601 @@
|
||||
// import google font
|
||||
// no need to import font; such font has been imported in App.vue
|
||||
// @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;700;900&display=swap");
|
||||
$fontFamily-NotoSansTC: 'Noto Sans TC', sans-serif;
|
||||
$fontFamily: 'Noto Sans TC', sans-serif;
|
||||
// Color
|
||||
// dont define private color if these are common ones
|
||||
@import '../color';
|
||||
// $white: #ffffff;
|
||||
// $mid-blue: #226bb4;
|
||||
|
||||
//Screen breakpoint
|
||||
$max-width-big-0: 1800px;
|
||||
$max-width-big: 1500px;
|
||||
$max-width-medium-0: 1100px;
|
||||
$max-width-medium-1: 900px;
|
||||
$max-width-small-0: 750px;
|
||||
$max-width-small-1: 500px;
|
||||
$max-width-small-2: 410px;
|
||||
$max-width-small-3: 360px;
|
||||
|
||||
// .info-container
|
||||
@mixin infoContainer() {
|
||||
max-width: 80%;
|
||||
@media screen and (max-width: 1365px) {
|
||||
margin: 0 120px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1023px) {
|
||||
margin: 0 100px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $max-width-small-0) {
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
// .info-section
|
||||
@mixin sectionH1Fontsize() {
|
||||
font-size: 32pt;
|
||||
@media only screen and (min-width: $max-width-big-0) {
|
||||
font-size: 36pt;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-medium-0) {
|
||||
font-size: 28pt;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-medium-1) {
|
||||
font-size: 24pt;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-0) {
|
||||
font-size: 21pt;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-1) {
|
||||
font-size: 19pt;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sectionH2Fontsize() {
|
||||
font-size: 24pt;
|
||||
@media only screen and (min-width: $max-width-big-0) {
|
||||
font-size: 27pt;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-medium-0) {
|
||||
font-size: 22pt;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-medium-1) {
|
||||
font-size: 19pt;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-0) {
|
||||
font-size: 18pt;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-1) {
|
||||
font-size: 18pt;
|
||||
}
|
||||
}
|
||||
|
||||
//.info-section__content
|
||||
@mixin sectionContentParagraphWidth() {
|
||||
// width: 92%;
|
||||
@media only screen and (max-width: $max-width-small-0) {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-1) {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sectionContentParagraphFontsize() {
|
||||
font-size: 15pt;
|
||||
@media only screen and (max-width: $max-width-big-0) {
|
||||
font-size: 14pt;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-medium-0) {
|
||||
font-size: 13pt;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-medium-1) {
|
||||
font-size: 12pt;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-0) {
|
||||
font-size: 11pt;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-1) {
|
||||
font-size: 10pt;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ulPadding {
|
||||
padding: 0 0 0 20px;
|
||||
@media only screen and (max-width: $max-width-big) {
|
||||
padding: 0 0 0 5px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-medium-1) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sectionContentSubExtendWidth {
|
||||
width: 107%;
|
||||
@media only screen and (max-width: $max-width-small-0) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// .info-kind
|
||||
@mixin kind() {
|
||||
@media only screen and (min-width: $max-width-big-0) {
|
||||
padding-bottom: 330px;
|
||||
&__itemBox {
|
||||
height: 305px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
&-title {
|
||||
margin-top: 30px;
|
||||
}
|
||||
&-text {
|
||||
padding-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $max-width-small-0) {
|
||||
width: 100%;
|
||||
&__itemBox {
|
||||
width: 100%;
|
||||
height: 201px;
|
||||
margin-bottom: 20px;
|
||||
margin-right: 0;
|
||||
padding: 0;
|
||||
&-title {
|
||||
margin-top: 20px;
|
||||
}
|
||||
&-text {
|
||||
width: 86%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin kindTitleFontsize() {
|
||||
font-size: 27pt;
|
||||
@media only screen and (max-width: $max-width-big-0) {
|
||||
font-size: 21pt;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-big) {
|
||||
font-size: 19pt;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-medium-0) {
|
||||
font-size: 15pt;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-medium-1) {
|
||||
font-size: 12pt;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-0) {
|
||||
font-size: 21pt;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-1) {
|
||||
font-size: 15pt;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin kindTextFontsize() {
|
||||
font-size: 15pt;
|
||||
@media only screen and (max-width: $max-width-big-0) {
|
||||
font-size: 13pt;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-big) {
|
||||
font-size: 12pt;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-medium-0) {
|
||||
font-size: 11pt;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-medium-1) {
|
||||
font-size: 9pt;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-0) {
|
||||
font-size: 13pt;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-1) {
|
||||
font-size: 11pt;
|
||||
}
|
||||
}
|
||||
|
||||
// .info-qa
|
||||
@mixin qaLayout {
|
||||
width: 86%;
|
||||
margin-bottom: 120px;
|
||||
@media only screen and (max-width: $max-width-big) {
|
||||
width: 90%;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-0) {
|
||||
width: 100%;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin qaTitleFontsize() {
|
||||
font-size: 18pt;
|
||||
@media only screen and (max-width: $max-width-medium-0) {
|
||||
font-size: 16pt;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-medium-1) {
|
||||
font-size: 14pt;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-0) {
|
||||
font-size: 11pt;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-1) {
|
||||
font-size: 9pt;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-2) {
|
||||
font-size: 8pt;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-3) {
|
||||
font-size: 7pt;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin qaTextFontsize() {
|
||||
font-size: 15pt;
|
||||
@media only screen and (max-width: $max-width-medium-1) {
|
||||
font-size: 14pt;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-medium-0) {
|
||||
font-size: 12pt;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-0) {
|
||||
font-size: 11pt;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-1) {
|
||||
font-size: 9pt;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-2) {
|
||||
font-size: 8pt;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-3) {
|
||||
font-size: 6.5pt;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin qaTitleHeight {
|
||||
height: 57px;
|
||||
@media only screen and (max-width: $max-width-small-0) {
|
||||
height: 45px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-1) {
|
||||
height: 36px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-2) {
|
||||
height: 32px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-3) {
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin qaTitleMarginTop {
|
||||
margin-top: 15px;
|
||||
@media only screen and (max-width: $max-width-small-1) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-2) {
|
||||
margin-top: 9px;
|
||||
}
|
||||
}
|
||||
@mixin qaTextMarginTop {
|
||||
margin-top: 25px;
|
||||
@media only screen and (max-width: $max-width-small-1) {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin qaQdisplay {
|
||||
margin-left: 25px;
|
||||
|
||||
&::before {
|
||||
content: "Q：";
|
||||
}
|
||||
@media only screen and (max-width: $max-width-medium-1) {
|
||||
margin-left: 18px;
|
||||
&::before {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin qaIconSize {
|
||||
height: 25px;
|
||||
width: 30px;
|
||||
@media only screen and (max-width: $max-width-medium-1) {
|
||||
height: 16px;
|
||||
width: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin qaIcon {
|
||||
background-image: url("../../assets/images/CFP/Polygon-big.svg");
|
||||
|
||||
@media only screen and (max-width: $max-width-medium-1) {
|
||||
background-image: url("../../assets/images/CFP/Polygon-small.svg");
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sitconImg {
|
||||
float: right;
|
||||
margin-top: 382px;
|
||||
margin-right: 15%;
|
||||
margin-bottom: 30px;
|
||||
@media only screen and (max-width: $max-width-big) {
|
||||
margin-top: 0;
|
||||
margin-right: 80%;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-medium-0) {
|
||||
width: 108px;
|
||||
height: 135px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-0) {
|
||||
margin-right: 15%;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $max-width-small-1) {
|
||||
width: 86px;
|
||||
height: 107px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $max-width-small-2) {
|
||||
width: 69px;
|
||||
height: 86px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-3) {
|
||||
width: 55px;
|
||||
height: 68px;
|
||||
}
|
||||
}
|
||||
|
||||
//cfp-sub-information <subInformation>
|
||||
.info {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
font-family: $fontFamily;
|
||||
float: left;
|
||||
|
||||
&-container {
|
||||
@include infoContainer();
|
||||
margin: 0 280px;
|
||||
// float: left;
|
||||
}
|
||||
|
||||
&-section {
|
||||
float: left;
|
||||
clear: both;
|
||||
width: 100%;
|
||||
|
||||
h1 {
|
||||
@include sectionH1Fontsize();
|
||||
height: 70px;
|
||||
font-weight: 900;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 1.9;
|
||||
letter-spacing: normal;
|
||||
text-align: left;
|
||||
color: $mid-blue;
|
||||
margin-block-start: 0.83em;
|
||||
margin-block-end: 0.83em;
|
||||
}
|
||||
&__content {
|
||||
width: 100%;
|
||||
|
||||
p {
|
||||
@include sectionContentParagraphWidth();
|
||||
@include sectionContentParagraphFontsize();
|
||||
|
||||
font-weight: 500;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 2.1;
|
||||
letter-spacing: 0.2px;
|
||||
text-align: left;
|
||||
color: $mid-blue;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
@include ulPadding();
|
||||
margin: 0;
|
||||
span {
|
||||
display: inline-block;
|
||||
height: 4px;
|
||||
width: 4px;
|
||||
transform: translate(-200%, -150%);
|
||||
background-color: $mid-blue;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--sub {
|
||||
h2 {
|
||||
@include sectionH2Fontsize();
|
||||
height: 60px;
|
||||
font-weight: 900;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 2.2;
|
||||
letter-spacing: normal;
|
||||
text-align: left;
|
||||
color: $mid-blue;
|
||||
margin-block-start: 0.83em;
|
||||
margin-block-end: 0.83em;
|
||||
}
|
||||
|
||||
&-extend {
|
||||
@include sectionContentSubExtendWidth();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-sitcon-img {
|
||||
&__box {
|
||||
float: right;
|
||||
}
|
||||
|
||||
@include sitconImg();
|
||||
}
|
||||
|
||||
//cfp-sub-information <subInformation> kind, qa components
|
||||
&-kind {
|
||||
width: 100%;
|
||||
margin-top: 45px;
|
||||
padding-bottom: 300px;
|
||||
&__itemBox {
|
||||
float: left;
|
||||
padding: 25px 1.5% 35px 1.5%;
|
||||
border-radius: 13px;
|
||||
background-color: $mid-blue;
|
||||
width: 30%;
|
||||
&:not(:last-child) {
|
||||
margin-right: 5%;
|
||||
}
|
||||
|
||||
&-title {
|
||||
@include kindTitleFontsize();
|
||||
width: 100%;
|
||||
color: $white;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
font-weight: 900;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
margin-top: 25px;
|
||||
}
|
||||
&-text {
|
||||
width: 100%;
|
||||
height: 172px;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
|
||||
p {
|
||||
@include kindTextFontsize();
|
||||
margin: 10px auto;
|
||||
color: $white;
|
||||
font-weight: 500;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 2.1;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 900;
|
||||
}
|
||||
}
|
||||
}
|
||||
//RWD for kind
|
||||
@include kind();
|
||||
}
|
||||
|
||||
&-qa {
|
||||
@include qaLayout();
|
||||
margin-bottom: 120px;
|
||||
float: left;
|
||||
// margin: 0 auto;
|
||||
&__itemBox {
|
||||
border-radius: 29px;
|
||||
box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56);
|
||||
background-color: $white;
|
||||
margin: 0 0 30px 0;
|
||||
|
||||
position: relative;
|
||||
&-title {
|
||||
@include qaTitleHeight();
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
p {
|
||||
@include qaTitleFontsize();
|
||||
@include qaTitleMarginTop();
|
||||
|
||||
@include qaQdisplay();
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 1.25;
|
||||
letter-spacing: normal;
|
||||
text-align: left;
|
||||
color: $mid-blue;
|
||||
}
|
||||
span {
|
||||
@include qaIcon();
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
top: 50%;
|
||||
transform: translateY(-45%);
|
||||
right: 3.5%;
|
||||
}
|
||||
}
|
||||
|
||||
&-input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&-input:checked ~ &-text {
|
||||
display: block;
|
||||
width: 88%;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 20px;
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
@include qaTextFontsize();
|
||||
}
|
||||
}
|
||||
|
||||
&-input:checked ~ &-title {
|
||||
p {
|
||||
@include qaTextMarginTop();
|
||||
}
|
||||
span {
|
||||
transform: rotate(180deg);
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 3.5%;
|
||||
}
|
||||
}
|
||||
|
||||
&-text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-icon {
|
||||
@include qaIconSize();
|
||||
}
|
||||
}
|
||||
}
|
||||
34
src/assets/scss/ocfp/card.scss
Normal file
34
src/assets/scss/ocfp/card.scss
Normal file
@ -0,0 +1,34 @@
|
||||
@import '../breakpoint';
|
||||
@import '../color';
|
||||
|
||||
.agenda.card:not(.container) {
|
||||
a.image.container {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
line-height: 0; // prevent background overflow
|
||||
background-color: #ffffff;
|
||||
border-radius: 11px;
|
||||
box-shadow: 0 3px 15px 0 rgba(89, 120, 206, 0.56);
|
||||
|
||||
// smooth transition from hover -> default state
|
||||
will-change: transform;
|
||||
transform: scale(1);
|
||||
transition-duration: 0.25s;
|
||||
|
||||
img {
|
||||
border-radius: 11px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.04);
|
||||
transition-duration: 0.25s;
|
||||
}
|
||||
}
|
||||
|
||||
p.description {
|
||||
line-height: 1.55em;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
362
src/assets/scss/ocfp/header.scss
Normal file
362
src/assets/scss/ocfp/header.scss
Normal file
@ -0,0 +1,362 @@
|
||||
@import '../hyperpoint';
|
||||
@import '../color';
|
||||
$fontFamily: Noto Sans TC, monospace;
|
||||
|
||||
|
||||
// desktop mode
|
||||
#ocfp-header {
|
||||
padding: 72px 280px;
|
||||
|
||||
* {
|
||||
font-family: "Noto Sans TC";
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
position: relative;
|
||||
// background: red; // debug
|
||||
height: 60px;
|
||||
|
||||
.return-wrapper {
|
||||
// location
|
||||
position: absolute;
|
||||
left: -30px;
|
||||
bottom: -4px;
|
||||
|
||||
.shape-wrapper {
|
||||
background: $white;
|
||||
border-radius: 12px;
|
||||
-webkit-box-shadow: -18px 18px 0px -6px $mid-blue,
|
||||
0px 0px 10px 0px rgba(0, 0, 0, 0.2);
|
||||
-moz-box-shadow: -18px 18px 0px -6px $mid-blue,
|
||||
0px 0px 10px 0px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: -18px 18px 0px -6px $mid-blue,
|
||||
0px 0px 10px 0px rgba(0, 0, 0, 0.2);
|
||||
|
||||
@keyframes jump {
|
||||
0% {
|
||||
position: relative;
|
||||
bottom: 0px;
|
||||
}
|
||||
50% {
|
||||
position: relative;
|
||||
bottom: 20px;
|
||||
}
|
||||
100% {
|
||||
position: relative;
|
||||
bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
animation: jump 0.6s ease-in 0s infinite reverse;
|
||||
}
|
||||
|
||||
.text-wrapper {
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
line-height: 68px;
|
||||
text-align: center;
|
||||
color: $mid-blue;
|
||||
font-weight: bold;
|
||||
font-size: 16pt;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1023px) {
|
||||
.contribute-wrapper {
|
||||
position:absolute;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56);
|
||||
transition-duration: 0.2s;
|
||||
color: #226bb4;
|
||||
width: 126px;
|
||||
height: 50px;
|
||||
border-radius: 8px;
|
||||
top: 20px;
|
||||
right: 25px;
|
||||
.btn-contribute {
|
||||
padding: 0.85em 1.25em;
|
||||
font-size: 1.1em;
|
||||
font-weight: 900;
|
||||
border: none;
|
||||
position: absolute;
|
||||
color:$mid-blue;
|
||||
top:0;
|
||||
bottom:0;
|
||||
margin:auto;
|
||||
width: 100%;
|
||||
&:hover {
|
||||
background-color: #226bb4;
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.19);
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.title-wrapper {
|
||||
.svg-cfp-news {
|
||||
height: 60px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cfp-body {
|
||||
padding: 40px 48px;
|
||||
margin-top: 54px;
|
||||
border-radius: 24px;
|
||||
|
||||
color: $white;
|
||||
|
||||
font-size: 14pt;
|
||||
font-weight: bold;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.spot-wrapper {
|
||||
margin-bottom: 2.25em;
|
||||
|
||||
h1 {
|
||||
font-size: 26pt;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.countdown {
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.time-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
|
||||
h2 {
|
||||
height: 24pt;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.44em;
|
||||
}
|
||||
|
||||
.tilde-wrapper {
|
||||
margin-right: 0.85em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.cfp-body-gray {
|
||||
background: #5F7A95;
|
||||
}
|
||||
.cfp-body-blue {
|
||||
background: $mid-blue;
|
||||
}
|
||||
|
||||
@include lg {
|
||||
#ocfp-header {
|
||||
padding-left: 120px;
|
||||
padding-right: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
// mobile mode
|
||||
@include md {
|
||||
#ocfp-header {
|
||||
font-size: 14pt;
|
||||
padding: 72px 100px;
|
||||
|
||||
.top-bar {
|
||||
position: initial;
|
||||
height: 5em;
|
||||
border-radius: 2.5em;
|
||||
padding-left: 2.5em;
|
||||
padding-right: 2.5em;
|
||||
|
||||
background: $white;
|
||||
-webkit-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.5);
|
||||
-moz-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.5);
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.return-wrapper {
|
||||
// location
|
||||
position: initial;
|
||||
flex: 1;
|
||||
|
||||
.shape-wrapper {
|
||||
background: $white;
|
||||
border-radius: 12px;
|
||||
-webkit-box-shadow: -13px 13px 0px -6px $mid-blue,
|
||||
0px 0px 10px 0px rgba(0, 0, 0, 0.2);
|
||||
-moz-box-shadow: -13px 13px 0px -6px $mid-blue,
|
||||
0px 0px 10px 0px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: -13px 13px 0px -6px $mid-blue,
|
||||
0px 0px 10px 0px rgba(0, 0, 0, 0.2);
|
||||
|
||||
.text-wrapper {
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
line-height: 3em;
|
||||
text-align: center;
|
||||
color: $mid-blue;
|
||||
font-weight: bold;
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title-wrapper {
|
||||
flex: 1;
|
||||
.svg-cfp-news {
|
||||
height: 2.25em;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.contribute-wrapper {
|
||||
display: initial;
|
||||
flex: 1;
|
||||
text-align: end;
|
||||
|
||||
.btn-contribute {
|
||||
display: inline-block;
|
||||
border-radius: 6px;
|
||||
background: $mid-blue;
|
||||
color: $white;
|
||||
font-weight: 900;
|
||||
padding: 0.5em;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cfp-body {
|
||||
padding-top: 2em;
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
padding-bottom: 3.5em;
|
||||
margin-top: 54px;
|
||||
border-radius: 24px;
|
||||
|
||||
color: $white;
|
||||
//background: $mid-blue;
|
||||
font-weight: bold;
|
||||
font-size: 1em;
|
||||
|
||||
.spot-wrapper {
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
margin-bottom: 2.25em;
|
||||
}
|
||||
|
||||
.time-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
h2 {
|
||||
height: initial;
|
||||
}
|
||||
p {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.start-time-wrapper {
|
||||
h2,
|
||||
p {
|
||||
margin-bottom: 1.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.end-time-wrapper {
|
||||
h2 {
|
||||
margin-bottom: 1.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.tilde-wrapper {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include sm {
|
||||
#ocfp-header {
|
||||
font-size: 11pt;
|
||||
padding: 60px 40px;
|
||||
|
||||
.cfp-body {
|
||||
font-size: 14pt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// a 540px break point will be better = =
|
||||
@media screen and (max-width: 539px) {
|
||||
#ocfp-header {
|
||||
font-size: 9pt;
|
||||
padding: 36px 18px;
|
||||
|
||||
.top-bar {
|
||||
height: 4em;
|
||||
border-radius: 2em;
|
||||
padding-left: 1.66em;
|
||||
padding-right: 1em;
|
||||
-webkit-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.5);
|
||||
-moz-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.5);
|
||||
|
||||
.return-wrapper {
|
||||
.shape-wrapper {
|
||||
.text-wrapper {
|
||||
width: 2.4em;
|
||||
height: 2.4em;
|
||||
line-height: 2.4em;
|
||||
text-align: center;
|
||||
color: $mid-blue;
|
||||
font-weight: bold;
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title-wrapper {
|
||||
flex: 1;
|
||||
.svg-cfp-news {
|
||||
height: 1.85em;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.contribute-wrapper {
|
||||
display: initial;
|
||||
flex: 1;
|
||||
text-align: end;
|
||||
|
||||
.btn-contribute {
|
||||
display: inline-block;
|
||||
border-radius: 6px;
|
||||
background: $mid-blue;
|
||||
color: $white;
|
||||
font-weight: 900;
|
||||
padding: 0.5em;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cfp-body {
|
||||
font-size: 12pt;
|
||||
}
|
||||
}
|
||||
}
|
||||
189
src/assets/scss/ocfp/navbar.scss
Normal file
189
src/assets/scss/ocfp/navbar.scss
Normal file
@ -0,0 +1,189 @@
|
||||
@import '../color';
|
||||
@import '../font';
|
||||
|
||||
$mobileView: 1024px;
|
||||
$fixedTopPadding: 25px;
|
||||
$fixedRightPadding: 50px;
|
||||
|
||||
#ocfp-nav {
|
||||
font-size: 13pt;
|
||||
line-height: 1em;
|
||||
z-index: 2;
|
||||
|
||||
// prevent slow animation update
|
||||
position: sticky;
|
||||
top: $fixedTopPadding;
|
||||
|
||||
&.fixed {
|
||||
position: fixed;
|
||||
top: $fixedTopPadding;
|
||||
right: $fixedRightPadding;
|
||||
|
||||
.news-nav.animating {
|
||||
// from section to fixed
|
||||
animation-name: move-to-side;
|
||||
}
|
||||
}
|
||||
|
||||
&.returning {
|
||||
// prevent navbar overlap header
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.news-nav {
|
||||
float: right;
|
||||
text-align: end;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 15px;
|
||||
padding: 10px;
|
||||
box-shadow: 3px 3px 15px $mid-blue;
|
||||
background: white;
|
||||
z-index: 5;
|
||||
|
||||
margin-left: 25px;
|
||||
|
||||
animation-duration: 0.5s;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-fill-mode: forwards;
|
||||
|
||||
&.animating {
|
||||
// from fixed to section
|
||||
animation-name: move-to-section;
|
||||
}
|
||||
|
||||
&-item {
|
||||
margin: 0 8px;
|
||||
padding: 5px 1em;
|
||||
color: $mid-blue;
|
||||
font-family: $fontFamily;
|
||||
cursor: pointer;
|
||||
border-right: 3px solid $sky-blue;
|
||||
|
||||
&.active {
|
||||
font-weight: 900;
|
||||
border-right: 3px solid $mid-blue;
|
||||
}
|
||||
}
|
||||
&-button {
|
||||
color: $mid-blue;
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 0.5em 0;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
&-contribute-button {
|
||||
display: inline-block;
|
||||
border-radius: 6px;
|
||||
background: $mid-blue;
|
||||
color: $white;
|
||||
font-weight: 900;
|
||||
padding: 0.5em 1em;
|
||||
font-size: 1.2em;
|
||||
margin: 1em auto;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-control-button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
top: $fixedTopPadding;
|
||||
right: $fixedRightPadding;
|
||||
z-index: 5;
|
||||
padding: 0 15px;
|
||||
width: 55px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: $mid-blue;
|
||||
font-size: 24px;
|
||||
background-color: white;
|
||||
box-shadow: -2px 0 15px $mid-blue;
|
||||
cursor: pointer;
|
||||
p {
|
||||
text-align: end;
|
||||
}
|
||||
}
|
||||
|
||||
// narrower padding
|
||||
@media screen and (max-width: 1365px) {
|
||||
.news-nav.animating {
|
||||
animation-name: slide-to-section;
|
||||
}
|
||||
|
||||
&.fixed .news-nav.animating {
|
||||
animation-name: slide-to-side;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobileView) {
|
||||
.nav-control-button {
|
||||
top: 250px;
|
||||
right: 0;
|
||||
width: 35px;
|
||||
font-size: 16px;
|
||||
text-align: left;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.news-nav.animating,
|
||||
&.fixed .news-nav.animating {
|
||||
animation-name: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobileView) {
|
||||
#ocfp-nav.fixed {
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes move-to-section {
|
||||
0% {
|
||||
transform: translateX(280px - $fixedRightPadding);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes move-to-side {
|
||||
0% {
|
||||
transform: translateX(-(280px - $fixedRightPadding));
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
// for narrower padding
|
||||
@keyframes slide-to-section {
|
||||
0% {
|
||||
transform: translateX(120px - $fixedRightPadding);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-to-side {
|
||||
0% {
|
||||
transform: translateX(-(120px - $fixedRightPadding));
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
155
src/assets/scss/ocfp/schedule.scss
Normal file
155
src/assets/scss/ocfp/schedule.scss
Normal file
@ -0,0 +1,155 @@
|
||||
@import "../breakpoint";
|
||||
@import "../color";
|
||||
@import "../font";
|
||||
// No need to import font; the fonts have been imported in App.vue
|
||||
// @import '@/assets/scss/font';
|
||||
|
||||
#ocfp-schedule {
|
||||
position: relative;
|
||||
max-width: 80vw;
|
||||
margin: 0 280px;
|
||||
|
||||
font-family: $fontFamily;
|
||||
font-size: 15pt;
|
||||
line-height: 2.1em;
|
||||
letter-spacing: 0.2px;
|
||||
color: $mid-blue;
|
||||
|
||||
* {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $mid-blue;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 36pt;
|
||||
line-height: 1.45em;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 27pt;
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 18pt;
|
||||
line-height: 1.25em;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
ul {
|
||||
li {
|
||||
&::before {
|
||||
content: "•";
|
||||
margin: 2px;
|
||||
line-height: 42px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section:not(:last-of-type),
|
||||
article:not(:last-of-type) {
|
||||
margin-bottom: 55px;
|
||||
}
|
||||
|
||||
#theme-example {
|
||||
> p {
|
||||
padding: 20px 0;
|
||||
}
|
||||
}
|
||||
|
||||
#theme-example ~ p {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
#example > p {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
#presentation-example,
|
||||
#espresso-example {
|
||||
> p {
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.agenda.card.container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
column-gap: 62px;
|
||||
row-gap: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#code-of-conduct a {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1365px) {
|
||||
#ocfp-schedule {
|
||||
margin: 0 120px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1023px) {
|
||||
#ocfp-schedule {
|
||||
margin: 0 100px;
|
||||
|
||||
h1 {
|
||||
font-size: 28pt;
|
||||
}
|
||||
|
||||
#presentation-example,
|
||||
#espresso-example {
|
||||
margin-bottom: unset;
|
||||
.agenda.card.container {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
column-gap: 42px;
|
||||
row-gap: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $max-width-small-0) {
|
||||
#news-schedule {
|
||||
margin: 0;
|
||||
max-width: 100vw;
|
||||
padding: 0 40px;
|
||||
font-size: 11pt;
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-size: 20pt;
|
||||
line-height: 2.69em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 15pt;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#schedule {
|
||||
margin-bottom: unset;
|
||||
}
|
||||
|
||||
#theme-example ~ p {
|
||||
padding: 15px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
47
src/assets/scss/ocfp/topic.scss
Normal file
47
src/assets/scss/ocfp/topic.scss
Normal file
@ -0,0 +1,47 @@
|
||||
@import '../breakpoint';
|
||||
@import '../color';
|
||||
|
||||
.topic {
|
||||
padding: 30px 0;
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 256px min-content 1fr;
|
||||
|
||||
h3.title {
|
||||
line-height: 1.67em;
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
border-left: 2px $mid-blue solid;
|
||||
margin: 0 37px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.description {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@include md {
|
||||
.topic {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 20px 0;
|
||||
|
||||
h3.title {
|
||||
br[data-delimiter='：'] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
border-bottom: none;
|
||||
border-top: 2px $mid-blue solid;
|
||||
margin: 15px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -195,5 +195,5 @@ export default class Agenda extends Vue {}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/assets/scss/news/agenda";
|
||||
@import "@/assets/scss/ocfp/agenda";
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<header>
|
||||
<header id="ocfp-header">
|
||||
<div class="top-bar">
|
||||
<div class="return-wrapper">
|
||||
<a class="shape-wrapper diamond" href="/2021/cfp"
|
||||
@ -122,5 +122,5 @@ export default class CfpHeader extends Vue {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '@/assets/scss/news/header'
|
||||
@import '@/assets/scss/ocfp/header';
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<nav id="news-nav" :class="{ fixed: (isNavbarFixed || isMobileView), returning: isNavbarReturning }">
|
||||
<nav id="ocfp-nav" :class="{ fixed: (isNavbarFixed || isMobileView), returning: isNavbarReturning }">
|
||||
<div
|
||||
class="news-nav"
|
||||
:class="{ animating: isNavbarAnimating }"
|
||||
@ -111,5 +111,5 @@ export default class Navbar extends Vue {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/assets/scss/news/navbar';
|
||||
@import '@/assets/scss/ocfp/navbar';
|
||||
</style>
|
||||
@ -61,5 +61,5 @@ export default class Schedule extends Vue {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '@/assets/scss/news/schedule';
|
||||
@import '@/assets/scss/ocfp/schedule';
|
||||
</style>
|
||||
@ -21,5 +21,5 @@ export default class Topic extends Vue {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '@/assets/scss/news/topic';
|
||||
@import '@/assets/scss/ocfp/topic';
|
||||
</style>
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="news">
|
||||
<NewsHeader id="news-header" />
|
||||
<Schedule id="news-schedule" />
|
||||
<Agenda id="news-agenda" />
|
||||
<NewsHeader id="ocfp-header" />
|
||||
<Schedule id="ocfp-schedule" />
|
||||
<Agenda id="ocfp-agenda" />
|
||||
<!-- <Footer></Footer> should be put at App.vue (?) -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user