style tweaks

Author: Sami Kolari

src/assets/css/elements.css

@@ -8,6 +8,9 @@
     box-shadow: 2px 4px 4px -1px rgba(0,0,0,0.16),
     6px 6px 20px -1px rgba(107, 84, 84, 0.1);
 }
+.card.sharp {
+    border-radius: 0;
+}
 
 .border-black {
     border: solid 0.15rem var(--color-black);
@@ -52,6 +55,7 @@ button.theme, button.stroke {
     transition: 0.1s color, 0.1s background-color, box-shadow 0.1s;
     font-family: var(--font-title);
     padding: var(--size-2xsmall) var(--size-small);
+    text-transform: uppercase;
 }
 button.theme {
     color: var(--color-black);
@@ -71,7 +75,7 @@ button.theme.active {
 
 @media screen and (max-width: 768px) {
     button.theme, button.stroke {
-        padding: var(--size-3xsmall) var(--size-2xsmall);
+        padding: var(--size-2xsmall) var(--size-xsmall);
     }
 }
 

src/assets/css/grid.css

@@ -7,6 +7,10 @@
     max-width: var(--layout-container-max-width);
 }
 
+.container.narrow {
+  max-width: var(--layout-container-narrow-max-width);
+}
+
 .flex {
   display: flex;
 }

src/assets/css/variables.css

@@ -15,6 +15,7 @@
     --bp-lg: 1400px; /* desktop breakpoint */
 
     --layout-container-max-width: 1400px;
+    --layout-container-narrow-max-width: 800px;
     --container-padding: 0;
 
     /* fonts */

src/components/CommunityItems.vue

@@ -1,8 +1,8 @@
 <template>
   <div
     class="bg-white row card"
-    :class="$store.state.isMobile ? 'pt-medium pb-medium' : 'p-medium'">
-    <div class="row col-md-4">
+    :class="$store.state.isMobile ? 'pt-medium pb-medium' : 'p-large'">
+    <div class="row col-md-5 pr-medium">
       <div
         v-for="link in [items[0], items[1]]"
         :key="link.imgName"
@@ -23,7 +23,7 @@
         </div>
       </div>
     </div>
-    <div class="col-md-4">
+    <div class="col-md-5 pr-medium">
       <div
         class="flex col-sm-12"
         :class="$store.state.isMobile ? 'pl-small pr-small' : ''">
@@ -41,7 +41,7 @@
       </div>
     </div>
     <div
-      class="col-md-4 pl-medium"
+      class="col-md-2 pl-medium"
       :style="$store.state.isMobile ? 'padding-left: 4.7rem; margin-top: 1rem;' : ''">
       <h3 class="color-grey-dark mb-2xsmall">
         Other

src/components/CompanyCarousel.vue

@@ -37,13 +37,15 @@
         :key="company.name"
         :aria-label="`${company.name} testimonial`"
         :style="`background-image: url(${publicPath}img/carousel-company-icons/${company.imgName})`"
-        class="img-container-small mr-small mr-small bg-white card mt-2xsmall"
+        class="img-container-small mr-small mr-small bg-white card mt-small"
         :class="activeCompanyIndex === i ? 'logo-active border-black border-thin' : ''"
         @click="activeCompanyIndex = i" />
-      <router-link :to="{ name: 'Users' }" class="card pl-small pr-small color-grey-dark mt-2xsmall" style="line-height: 1.85;">
+    </div>
+    <button class="theme mt-small">
+      <router-link :to="{ name: 'Users' }" class="type-no-underline">
         More users
       </router-link>
-    </div>
+    </button>
   </div>
 </template>
 
@@ -109,10 +111,10 @@ export default {
     background-position: center;
   }
   .img-container-small {
-    width: 2rem;
-    height: 2rem;
+    width: 3rem;
+    height: 3rem;
     background-repeat: no-repeat;
-    background-size: contain;
+    background-size: 85%;
     background-position: center;
     filter: saturate(0);
     opacity: 0.7;

src/components/PageSectionTwitter.vue

@@ -27,7 +27,7 @@
           class="twitter-timeline"
           data-dnt="true"
           data-theme="dark"
-          href="https://twitter.com/robotframework?ref_src=twsrc%5Etfw">
+          href="https://twitter.com/robotframework?ref_src=twsrc%5Etfw">¨
           Tweets by robotframework
         </a>
         <component :is="'script'" async src="https://platform.twitter.com/widgets.js" charset="utf-8" />

src/components/ResourceBox.vue

@@ -1,14 +1,16 @@
 <template>
   <div>
-    <div class="bg-grey-dark color-white p-small card">
+    <div
+      class="bg-grey-dark color-white card"
+      :class="$store.state.isMobile ? 'p-small pt-medium sharp' : 'p-large'">
       <div class="row">
         <button
           v-for="({ name, key }, i) in $tm('resources.tabs')"
           :key="name"
-          class="type-uppercase theme type-small"
+          class="type-uppercase theme type-small mb-small"
           :class="[
             activeTab === key ? 'active' : '',
-            i === 3 ? 'mr-none' : 'mr-medium'
+            i === 3 ? 'mr-none' : 'mr-small'
           ]"
           @click="activeTab = key; showAll = false">
           {{ name }}
@@ -19,9 +21,10 @@
           <div class="row mb-medium">
             <div
               class="col-sm-12 col-md-9 pt-medium"
+              :class="$store.state.isMobile ? '' : 'pr-large'"
               v-html="selectedDescription" />
             <div
-              class="col-sm-6 col-md-3 flex bottom"
+              class="col-sm-12 col-md-3 flex bottom"
               :class="$store.state.isMobile ? '' : 'end'">
               <div class="relative" style="width: 100%;">
                 <div class="flex middle card border-white border-thin mt-medium" style="width: 100%;">
@@ -116,7 +119,8 @@
             <div
               v-for="(item, i) in visibleItems"
               :key="item.name"
-              class="pb-xsmall pt-xsmall"
+              class="p-xsmall"
+              style="margin-left: -1rem; margin-right: -1rem;"
               :style="i % 2 ? 'background-color: rgba(255, 255, 255, 0.1)' : ''">
               <div class="flex between">
                 <div>
@@ -138,15 +142,17 @@
               </div>
               <div
                 v-html="item.description"
-                class="type-small" />
+                class="type-small mt-2xsmall" />
             </div>
           </div>
-          <button
-            v-if="!showAll && itemsFilteredByTag.length > 7"
-            class="stroke type-uppercase mt-small type-small"
-            @click="showAll = true">
-            Show more
-          </button>
+          <div class="flex" :class="$store.state.isMobile ? 'center' : ''">
+            <button
+              v-if="!showAll && itemsFilteredByTag.length > 7"
+              class="stroke type-uppercase mt-small type-small mb-xsmall"
+              @click="showAll = true">
+              Show more
+            </button>
+          </div>
         </div>
       </transition>
     </div>

src/components/TabBox.vue

@@ -1,14 +1,16 @@
 <template>
-  <div class="bg-grey-dark p-small card">
+  <div
+    class="bg-grey-dark card"
+    :class="$store.state.isMobile ? 'p-small pt-medium sharp' : 'p-large'">
     <!-- tab buttons -->
     <div class="row">
       <button
         v-for="(tab, i) in tabs"
         :key="tab.name"
-        class="type-uppercase theme type-small"
+        class="type-uppercase theme type-small mb-xsmall"
         :class="[
           activeTabIndex === i ? 'active' : '',
-          i === 2 ? 'mr-none' : 'mr-medium'
+          i === 2 ? 'mr-none' : 'mr-small'
         ]"
         @click="activeTabIndex = i">
         {{ tab.name }}

src/views/CoC.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container mb-xlarge">
+  <div class="container narrow mb-xlarge pl-small pr-small">
     <div class="row mb-large mt-large">
       <button v-if="cameFromHome" @click="$router.go(-1)" class="color-theme type-underline">
         Back
@@ -29,7 +29,7 @@
       harassed, or have any other concerns, please Contact
       <a href="mailto: [email protected]">[email protected]</a>.
     </p>
-    <h4>Harassment includes</h4>
+    <h3 class="mt-large">Harassment includes</h3>
     <ul>
       <li>
         Offensive comments related to gender, gender identity and expression, sexual orientation, disability, mental illness, neuro(a)typicality, physical appearance, body size, age, race, or religion.
@@ -97,7 +97,7 @@
         Criticizing racist, sexist, cissexist, or otherwise oppressive behaviour or assumptions
       </li>
     </ul>
-    <h4 class="mt-small">Reporting</h4>
+    <h3 class="mt-large">Reporting</h3>
     <ul>
       <li>
         If you are being harassed by a member of ROBOT FRAMEWORK, notice that someone else is being harassed, or have any other concerns, please contact <a style="display: inline;" href="mailto: [email protected]">[email protected]</a>. If the person who is harassing you is on the team, they will recuse themselves from handling your incident. We will respond as promptly as we can.
@@ -112,7 +112,7 @@
         We will respect confidentiality requests for the purpose of protecting victims of abuse. At our discretion, we may publicly name a person about whom we’ve received harassment complaints, or privately warn third parties about them, if we believe that doing so will increase the safety of ROBOT FRAMEWORK members or the general public. We will not name harassment victims without their affirmative consent.
       </li>
     </ul>
-    <h4 class="mt-small">Consequences</h4>
+    <h3 class="mt-large">Consequences</h3>
     <ul>
       <li>
         Participants asked to stop any harassing behaviour are expected to comply immediately.

src/views/Home.vue

@@ -45,8 +45,8 @@
         :body="$t('community.body')">
         <div class="col-sm-12 col-md-9 col-md-offset-3 row">
           <community-items />
-          <button class="theme mt-small">
-            <router-link :to="{ name: 'CoC' }">
+          <button class="theme mt-medium" :class="$store.state.isMobile ? 'ml-xsmall' : ''">
+            <router-link :to="{ name: 'CoC' }" class="type-no-underline">
               Code of Conduct
             </router-link>
           </button>